3.2 标签语法
原创声明。未经许可，不得转载，作者：小步教程。
标签具有语义与默认样式，样式与语义一致。例如h1表示一级标题，p表示段落，“一级标题”、“段落”就是它们的语义；h1具有较大字体且加粗等默认样式，p具有一定段落间距。
3.2.1 标签基本语法
标签分双标记标签与单标记标签。
（1）双标记标签
<开始标签>标签内容体</结束标签>
标签名不区分大小写，通常小写。
示例代码
<h1>小步教程一级标题</h1>
<p>小步教程 xiaobuteach.com 这是很长的一个段落这是很长的一个段落这是很长的一个段落</p>
h1与p属于双标记标签。
（2）单标记标签
单标记标签只有开始标签没有结束标签。包含两种写法，推荐无斜杠写法。
<标签>
或
<标签 />
示例
小步教程 xiaobuteach.com<br>
小步教程<br />
<hr>
<hr />
br表示换行，hr表示水平线，两者属于单标记标签。
（3）什么时候使用双标记标签？什么时候使用单标记？
由标签本身决定，HTML规范规定一个标签属于单标记还是双标记。
MDN查看单双标记标签。标签的帮助页“技术总结（技术概要）”—“标签省略”。
MDN查询hr如下，表示是单标记标签。
标签省略： 必须有开始标签，不能有结束标签。
MDN查询div如下，表示是双标记标签。
标签省略: 不允许，开始标签和结束标签都不能省略。
3.2.2 GramError001 双标记标签写成单标记标签
错误示例代码如下，h1双标记标签错写成单标记标签。
<body>
<h1/>小步教程一级标题
<p>小步教程 xiaobuteach.com 这是很长的一个段落</p>
</body>
浏览器的解析规则与解析结果是什么？当一个双标记标签缺少结束标记时，会在它的父元素的内部结束位置补上该元素的结束标记，分析的解析结果如下。
<body>
<h1>小步教程一级标题
<p>小步教程 xiaobuteach.com 这是很长的一个段落</p>
</h1>
</body>
查看解析元素结构，与前面分析一致。
3.2.3 GramError002 单标记标签写成双标记标签
单标记标签写成双标记标签。
<p>小步教程 xiaobuteach.com<br></br>这是很长的一个段落</p>
两个br并不是真正的一对，浏览器会解析成两个换行。查看解析元素结构。
大多数单标记标签错写会忽略它的结束标签，错误代码如下。
<hr></hr>
<input></input>
浏览器解析结果
<hr>
<input>
3.2.4 标签嵌套
内部元素通常缩进，元素结构层次更加清晰，提高代码可读性。
示例1：两层嵌套。父元素包含多个子元素。
<div>
<h1>小步教程一级标题</h1>
<p>小步教程这是很长的一个段落</p>
<p>www.xiaobuteach.com这是很长的一个段落2</p>
</div>
示例2：三层嵌套。两个p元素处于第三层。类似能够更多层嵌套。
<div>
<h1>小步教程一级标题</h1>
<div>
<p>小步教程这是很长的一个段落</p>
<p> www.xiaobuteach.com这是很长的一个段落2</p>
</div>
</div>
3.2.5 GramError003 嵌套时双标记标签漏写结束标签
错误原因：嵌套时双标记标签漏写结束标签，实际项目经常出现此场景。示例代码如下。
<h1>小步教程一级标题
解析规则与解析结果与前面介绍的双标记标签写成单标记标签相同。解析结果如下。
<div>
<h1>小步教程一级标题
<div>
<p>小步教程这是很长的一个段落</p>
<p> www.xiaobuteach.com这是很长的一个段落2</p>
</div>
</h1>
</div>
3.2.6 GramError004 完全不规范HTML代码
完全不规范HTML文件示例代码。
<p>小步教程 xiaobuteach.com
缺少html、head、body等基本元素结构，缺少p的结束标签。解析结果如下。
浏览器自动按标准结构补齐元素。
3.2.7 HTML注释
语法
<!-- 注释内容 -->
注释内容用于对HTML代码进行说明，提高代码可读性；可以注释单行或多行。
注释的公开性。用户可通过两种方式查看到注释：查看网页源代码、开发者工具。
3.2.8 浏览器解析元素规则
HTML代码不规范时页面显示不会报错，解析与显示结果可能与期望不一致。尽量按规范编写标签代码，使用开发者工具调试定位问题，总结不规范代码的解析规则，快速解决问题。
（1）解析结果符合HTML标准结构。如果缺少html、head、body元素，会自动补齐。
示例，整个HTML文件的代码如下，查看解析结果仍包含html、head与body。
小步教程 xiaobuteach.com
（2）整体是标准树状结构，从外到内依次嵌套。
（3）如果双标记标签如果缺少结束标记，会自动补齐，补齐位置在父元素的内部结束位置。
（4）如果单标记标签写成双标记标签，可能被解析成两个标签，可能忽略结束标签。
（5）如果嵌套错乱，首先按照第3条规则处理，补齐缺少结束标签，多余结束标签被忽略。
3.2.9 开发者工具调试元素思路
浏览器处理HTML代码包括三个步骤：加载源代码、按照解析规则解析结果、页面显示。
当标签代码错误时，调试方法与上述步骤相反：首先观察页面显示不正常，然后快速定位到解析结果的问题，根据解析结果并结合浏览器解析规则快速定位源代码问题。
