一.各种标签的作用
1.固定标签
<!DOCTYPE html>：告诉浏览器要使用标准、兼容的模式来解析渲染这个HTML页面 <html>：用来囊括整个页面，所有的页面内容都写在这个标签里，这也是我们建立在最外侧的“围墙” <head>：包含了对HTML5页面各种属性、配置信息的描述，这些代码基本不会呈现个浏览者。 <title>：是<head>必需的元素之一 <meat>：是在<head>中对charset进行设置的，指定页面字符编码的“UTF-8” <body>：包含了所有呈现给浏览者的内容信息2.h标签
<h>：h标签一共有6个，按层次分别为<h1>到<h6> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试标题</title> </head> <body> <h1>标题1</h1> <h2>标题2</h2> <h3>标题3</h3> <h4>标题4</h4> <h5>标题5</h5> <h6>标题6</h6> </body> </html>3.p标签
<p>：表示段落 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试标题</title> </head> <body> <p>由国家广电总局组织指导，宁夏回族自治区广播电视局、福建省广播电视局支持，高满堂任总策划，王三毛、未夕、小倔、磊子编剧， 孔笙、孙墨龙执导，侯鸿亮制片，正午阳光出品的电视剧《闽宁镇》发布首组人物剧照，展示故事线索和角色设定。 该剧由黄轩领衔主演，张嘉益、闫妮、黄觉、陶红特别出演，热依扎、黄尧、白宇帆、尤勇、胡明、王莎莎主演，郭京飞、祖峰、白宇、郎月婷友情出演。</p> <p>该剧讲述了上世纪九十年代以来，西海固的人民和干部们响应国家扶贫政策的号召，完成异地搬迁，在福建的对口帮扶下， 通过辛勤劳动和不懈探索，将风沙走石的“干沙滩”建设成寸土寸金的“金沙滩”的故事。</p> </body> </html>4.a标签
<a>：链接标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试标题</title> </head> <body> <!-- a标签可以包裹图片、段落、列表、表格 _blank 在新窗口中打开被链接文档。 _self 默认。在相同的框架中打开被链接文档。 _parent 在父框架集中打开被链接文档。 _top 在整个窗口中打开被链接文档。 --> <a href="https://www.baidu.com/">跳转到百度</a> <a href="https://www.baidu.com/" target="_top"> <section> <h2>财经模块</h2> <article> <h3>第一篇财经文章标题</h3> <p>第一篇财经文章内容</p> </article> </section> </a> </body> </html>5.div标签
<div>：将所有内容的元素并到一个区块中，使页面代码的结构性更强 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试标题</title> </head> <body> <div> <h1>第一篇文章</h1> <p>第一篇文章内容</p> </div> <div> <h1>第二篇文章</h1> <p>第二篇文章内容</p> </div> </body> </html>6.br标签
<br>：换行 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试标题</title> </head> <body> <p>第一篇文章内容<br>这是正文</p> </body> </html>7.figure标签
<figure>：主要用于展示插图、图标、照片、代码列表等 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试标题</title> </head> <body> <!--alt对图片进行说明，figcaption是figure专有元素--> <figure> <img src="tower.png" alt="这是埃菲尔铁塔"> <figcaption>巴黎最高建筑物：埃菲尔铁塔</figcaption> </figure> </body> </html>8.address标签
<address>：联系信息时用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试标题</title> </head> <body> <address>联系人：张先生 12345678910</address> </body> </html>9.ul、ol标签
<ul>：无需集合，li时其子集 <ol>：有序集合，li时其子集 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试标题</title> </head> <body> <ul> <li>语文</li> <li>数学</li> <li>外语</li> </ul> <ol> <li>语文</li> <li>数学</li> <li>外语</li> </ol> <ol type="a"> <li>语文</li> <li>数学</li> <li>外语</li> </ol> <ol type="A"> <li>语文</li> <li>数学</li> <li>外语</li> </ol> <ol type="I"> <li>语文</li> <li>数学</li> <li>外语</li> </ol> <ol type="i"> <li>语文</li> <li>数学</li> <li>外语</li> </ol> </body> </html>10.dl、dt、dd标签
<dl><dt><dd>：dl时最外围元素，它代表内容集合。在集合中存在多种类型的内容，每一个内容标题由dt指定，具体内容由dd指定 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试标题</title> </head> <body> <dl> <dt>名称</dt> <dd>成都站</dd> <dt>级别</dt> <dd>一级站台</dd> <dt>景区</dt> <dd>武侯祠、青城山</dd> </dl> </body> </html>11.div、nav、section、header、footer、article标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>最新资讯</title> </head> <body> <header> <h1>这个整个页面的标题</h1> <nav> <ul> <li>栏目1</li> <li>栏目2</li> </ul> </nav> <!-- nav 是html5新增的标签，主要用bai于制作du导航（ navigate）菜单。其实它本身zhi是没有什么特殊性的， 用div也一样可以dao，但它具有语义性，可以增加代码的可读性，如果一个html文档中全部是div标签， 时间一长，别说是别人，就连编写者自己如果没加注释都可能分不清哪个是哪个了。 而用了nav就不同了，啥时候一看，即使英文再差也大概知道它与导航有关。 html5新增的那些标签如section、header、footer、article等基本上都是这个作用。 nav：导航 section：部分 header：头部 footer：页脚 article：文章 --> <div> <ul> <li>栏目4</li> <li>栏目5</li> </ul> </div> </header> <section> <h2>财经模块</h2> <article> <h3>第一篇财经文章标题</h3> <p>第一篇财经文章内容</p> </article> <article> <h3>第二篇财经文章标题</h3> <p>第二篇财经文章内容</p> </article> </section> <section> <h2>体育模块</h2> <article> <h3>第一篇体育文章标题</h3> <p>第一篇体育文章内容</p> </article> <article> <h3>第二篇体育文章标题</h3> <p>第二篇体育文章内容</p> </article> </section> <section> <!--这是一个五脏俱全的文章，有头部、段落、页脚--> <article> <header> <h3>台风海神风雨明起抵达东北 秋风秋雨秋白露盛夏已近尾声</h3> </header> <p> 不过和昨天相比，“海神”路径略向西调整，转向时间偏晚，所以7日以后影响东北的风雨范围也随之略向西调整， 同时“海神”8日进入东北后，转向较慢，也导致强降雨中心区域有一定的不确定性。 </p> <footer> <p>文章发表日期：<time datetime="2020-9-6 21:50">2020年9月6日 13:00</time></p> </footer> </article> </section> <footer>版权所有：某某公司</footer> </body> </html>12.span标签
<span>标签是使用来组合文档中的行内元素，以便使用样式来对它们进行格式化 语法格式说明 1.span标签是内联元素，不像块级元素（如：div标签、p标签等）哪样有换行的效果； 2.如果不对span元素应用样式，使用span标签没有任何的显示效果； 3.span标签可以设置id或class属性，这样不仅能增加语义，还能更方便的对span元素应用样式； <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试标题</title> </head> <body> <p> <span style="color: red">红色</span> <span style="color: #37ff00">绿色</span> <span style="color: aqua">蓝色</span> </p> </body> </html>13.em、strong、hr标签
<em>：代表语义、语气的加强 <strong>：更加强调页面文本内容的重要性、紧急程度 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试标题</title> </head> <body> <p><em>北京</em>欢迎您</p> <hr> <p><strong>北京</strong>欢迎您</p> </body> </html>  14.link标签 ```bash <link>：链接到外部样式文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试标题</title> <link rel="stylesheet" href="css.css"> </head> <body> <p id="content1">您好</p> <p id="content2">您好</p> <div>您好</div> </body> </html> #content1 { font-size: 20px; color: red; } #content2 { font-size: 30px; color: #37ff00; } div { font-size: 40px; color: aquamarine; }14.big、small标签
HTML5 不支持 <big> 标签，HTML 4.01 支持 <big> 标签。HTML5还是可以用的 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试标题</title> </head> <body> <p>当前出校活动：</p> <p>特价商品只要<big>998</big>!</p> <p>仅此<small>一天</small></p> </body> </html>15.q、cite标签
<q>：将默认在头和尾加上双引号 <cite>：默认显示斜体 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试标题</title> </head> <body> <p>老师上课说：<q>注意课堂纪律</q>，<cite>小明</cite>表现很好。</p> </body> </html>16.form、label、input、select、option 标签联合使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单测试</title> </head> <body> <form method="post" action="server.php"> <p><label>姓名：<input name="username" type="text" placeholder="请输入用户名"></label></p> <p><label>电话：<input name="tel" type="tel" placeholder="请输入电话"></label></p> <p><label>邮箱：<input name="email" type="email" placeholder="请输入邮箱"></label></p> <p><label>时间：<input name="data" type="date" placeholder="请选择时间"></label></p> <!--<label>标签通常和<input>标签一起使用，将两者进行关联--> <p>性别： <!--label for 属性针对id 将两者进行绑定--> <input type="radio" name="sex" id="male" checked> <label for="male">男</label> <input type="radio" name="sex" id="female"> <label for="female">女</label> </p> <p> <label for="equipment">请选择预约的仪器：</label> <select id="equipment"> <option value="1">分光光度计</option> <option value="2">气相色谱仪</option> <option value="3">低速离心机</option> <option value="4">电子天平</option> </select> </p> <p><label><input type="checkbox" name="rule">遵守仪器使用规范</label></p> <button>提交订单</button> </form> </body> </html>17.表格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试标题</title> </head> <body> <!-- border:表格边框的宽度,1是最细的 cellpadding：规定单元边沿与其内容之间的空白。可以理解为将摆个放大多少倍 cellspacing：规定单元格之间的空白。设置单元格之间的距离 align：表格水平位置right、left、center --> <table border="1" cellpadding="30" cellspacing="1" align="center"> <caption>学生信息表</caption> <thead> <tr align="center"> <th>优秀度</th> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>年级</th> </tr> </thead> <tbody> <!-- align：单元格数据水平位置right、left、center --> <tr align="center"> <!-- rowspan：规定单元格可横跨的行数。0默认是当前行之后的行数全部横跨。如果要横跨两行就要写成3，原因还在研究者 --> <td rowspan="3">优秀</td> </tr> <tr align="center"> <td>小明</td> <td>男</td> <td>23</td> <td>大3</td> </tr> <tr align="center"> <td>小王</td> <td>女</td> <td>25</td> <td>大4</td> </tr> <tr align="center"> <td rowspan="3">垃圾</td> </tr> <tr align="center"> <td>小明</td> <td>男</td> <td>23</td> <td>大3</td> </tr> <tr align="center"> <td>小王</td> <td>女</td> <td>25</td> <td>大4</td> </tr> <tr align="center"> <!-- colspan：规定单元格可横跨的列数。 --> <td colspan="3">测试</td> </tr> </tbody> </table> </body> </html>