HTML详解
1.网页基本标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基本标签学习</title> </head> <body> <!--养成良好的规范，自闭和标签加上/ --> <!--标题标签--> <h1>一级标签</h1> <h2>一级标签</h2> <h3>一级标签</h3> <h4>一级标签</h4> <h5>一级标签</h5> <h6>一级标签</h6> <hr/> <!--段落标签--> <p>你好</p> <p>再见了 亲爱的大海</p> <!--水平线标签--> <hr/> <!--换行标签--> 你好<br/> 再见了 亲爱的大海 <br/> <hr/> <!--字体样式标签--> 粗体：<strong>i love you</strong> <br/> 斜体：<em>i love you</em> <hr/> <!--特殊符号--> 空 格 <br/> 大于符号> <br/> 小于符号< <br/> 版权所有符号© <hr/> </body> </html>
2.图像标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图像标签</title> </head> <body> <!--alt：图像加载失败显示--> <!--title：鼠标悬停显示--> <img src="../resources/image/chenshu.jpg" alt="陈数" title="悬停文字" width="300" height="300"> </body> </html>
3.链接标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>链接标签</title> </head> <body> <!-- href:必填，表示要跳转的那个页面 target：表示窗口在哪里打开 _blank _parent _self _top --> <!--页面间链接--> <a href="https:www.baidu.com">点击我跳转到百度</a><br> <a href="图像标签.html">点击我跳转到图像标签页面</a><br> <!--图像超链接--> <a href="https:www.baidu.com"> <img src="../resources/image/chenshu.jpg" alt="陈数" title="悬停文字"> </a><br> <a href="https:www.baidu.com" target="_blank">点击我_blank方式打开</a><br> <a href="https:www.baidu.com" target="_parent">点击我_parent方式打开</a><br> <a href="https:www.baidu.com" target="_self">点击我_self方式打开</a><br><!--默认就是在自己页面打开--> <a href="https:www.baidu.com" target="_top">点击我_top方式打开</a><br> <hr> <!--锚链接--> <a name="mark">标记</a><!--锚链接标记--> <br> <a href="#mark">页面回到锚链接标记的地方</a><!--页面比较短，效果没有演示出来 还可以页面间跳转--> <hr> <!--功能性链接:一般不用 邮件链接：mailto QQ链接： --> <a href="mailto:2564001572@qq.com">点击联系我</a> <br> <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"> <img border="0" src="http://wpa.qq.com/pa?p=2::51" alt="点击给我发送消息" title="点击给我发送消息"/> </a> </body> </html>
4.行内元素和块元素
块元素：独占一行
行内元素：多个可以排在一行
5.列表标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表标签</title> </head> <body> <!--无序列表--> <ul> <li>java</li> <li>python</li> <li>运维</li> <li>c/c++</li> </ul> <!--有序列表--> <ol> <li>java</li> <li>python</li> <li>运维</li> <li>c/c++</li> </ol> <!--定义列表 dl:标签 dt:列表名称 dd:列表内容--> <dl> <dt>学科</dt> <dd>java</dd> <dd>python</dd> <dd>Linux</dd> <dd>c/c++ </dd> <dt>位置</dt> <dd>河南</dd> <dd>北京</dd> <dd>上海</dd> <dd>深圳</dd> </dl> </body> </html>
6.表格标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格标签</title> </head> <body> <!-- border="1px"：边界一个像素 tr:行 td:列 colspan:跨列 rowspan:跨行 --> <table border="1px"> <tr> <!--跨列--> <td colspan="4">1.1</td> <td>1.2</td> </tr> <tr> <td rowspan="2">2.1</td> <td>2.2</td> <td>2.3</td> <td>2.4</td> <td>2.5</td> </tr> <tr> <td>3.2</td> <td>3.3</td> <td>3.4</td> <td>3.5</td> </tr> </table> </body> </html>
7.视频和音频标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>视频和音频标签</title> </head> <body> <!-- video:视频 src:资源目录 controls:控制视频 autoplay：自动播放 audio:音频 --> <video src="../resources/test.mp4" controls autoplay></video> <audio src="" controls autoplay></audio> </body> </html>
8.页面结构分析
header:标题头部区域的内容
footer：标记脚步区域的内容
section:Web页面的一块独立区域
article:独立的文章内容
aside:相关内容或应用（侧边栏）
nav:导航类辅助内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页面结构</title> </head> <body> <header> <h2>网页头部</h2> </header> <section> <h2>网页主体</h2> </section> <footer> <h2>网页脚部</h2> </footer> </body> </html>
9.iframe
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>iframe</title> </head> <body> <!----> <iframe src="https:www.baidu.com" name="baidu" frameborder="0"></iframe> </body> </html>
10.表单
- input typet:text,password,radio,checkbox,file,button,image,submit,reset,range,seach 带验证--->email,url,num
- 下拉列表：select option
- 文本域:textAre
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单</title> </head> <body> <h1>注册</h1> <!-- form: action:表单提交的位置：可以使网站也可以是请求处理地址 method:post和get两种方式 --> <form action="01基本标签.html" method="get"> <p>名字：<input type="text" name="username"></p> <p>密码：<input type="password" name="password"></p> <!--单选--> <p>性别：<!--name：分组--> <input type="radio" name="sex" value="男" checked>男 <input type="radio" name="sex" value="女">女 </p> <!--多选--> <p>爱好： <input type="checkbox" name="hobby" value="打篮球">打篮球 <input type="checkbox" name="hobby" value="游泳">游泳 <input type="checkbox" name="hobby" value="看电影">看电影 <input type="checkbox" name="hobby" value="听音乐" checked>听音乐 </p> <!--文件域--> <p> <input type="file" name="files"> </p> <!--滑块--> <p>滑块 <input type="range" name="voice" min="0" max="100" step="10"> </p> <p>搜索： <input type="search" name="search"> </p> <!--按钮： button image submit reset--> <p><input type="button" value="点击按钮"></p> <p><input type="image" src="../resources/image/chenshu.jpg"></p><!--点击这个也可以提交--> <p><input type="submit" value="提交"> <input type="reset" value="重置"></p> <!--下拉框，列表框--> <p>下拉框： <select name="列表名称"> <option value="china">中国</option> <option value="us">美国</option> <option value="eth" selected>瑞士</option> <option value="beijing">北京</option> </select> </p> <!--文本域--> <p>反馈： <textarea name="textarea" cols="50" rows="6">文本内容</textarea> </p> </form> </body> </html>
11.表单的应用
- 隐藏域 hidden(通常用来传递一些默认值)
- 只读 readonly
- 禁用 disabled
- placeholder:默认提示信息
- required：非空判断
- pattern：正则表达式判断（常用正则表达式）
