《智能前端技术与实践》——第 2 章 前端开发基础 ——2.2 HTML基础——2.2.1 HTML 文档基本结构（上） https://developer.aliyun.com/article/1228355?groupCode=tech_library
3．ead>标签
一个HTML5元素主要由文档元素和元数据元素两部分组成。其中，文档元素包括DOCTYPE>、、、ody>；而元数据元素包括itle>、yle>、nk>、eta>、
<span>、<span style="color: transparent;"></span><span><<span style="color: transparent;"></span>noscript<span style="color: transparent;"></span>><span>。<span style="color: transparent;"></span>因为<span><head></span>标签<span style="color: transparent;"></span>是所有头部元素的容</span></span></span>器，<span style="color: transparent;"></span>所以它<span style="color: transparent;"></span>们都可以包含<span style="color: transparent;"></span>在<span><head></span>标签的内<span style="color: transparent;"></span>部。<span style="color: transparent;"></span>注意，<span style="color: transparent;"></span><span><title></span>标签必须包含在<span style="color: transparent;"></span><span><head><span>标签中。<span style="color: transparent;"></span> </span></span></div><div><br /></div><div>这些元数据元素本身并非网页文档的内容，但它们提供了<span style="color: transparent;"> </span><span>HTML<span style="color: transparent;"> </span></span><span>文档的信息，如代码清</span></div><div>单<span>2-4<span style="color: transparent;"> </span></span><span>所示。</span></div><div><br /></div><div>代码清单 2-4</div><div><br /></div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22html%22%2C%22code%22%3A%22%3C!DOCTYPE%20html%3E%5Cn%3Chtml%3E%5Cn%3Chead%3E%5Cn%3Cmeta%20charset%3D%5C%22utf-8%5C%22%3E%5Cn%3Ctitle%3E%E6%88%91%E6%98%AF%E6%96%87%E6%A1%A3%E6%A0%87%E9%A2%98%3C%2Ftitle%3E%5Cn%3C%2Fhead%3E%5Cn%3Cbody%3E%5Cn%E5%A4%A7%E5%AE%B6%E5%A5%BD%EF%BC%8C%E6%88%91%E6%98%AF%E7%9F%B3%E7%92%9E%E4%B8%9C%E3%80%82%E8%BF%99%E9%87%8C%E6%98%AF%E6%96%87%E6%A1%A3%E5%86%85%E5%AE%B9%E9%83%A8%E5%88%86%5Cn%3C%2Fbody%3E%5Cn%3C%2Fhtml%3E%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22FxBzj%22%7D"></div><div><span style="color: #000000;"><head></span><span style="color: #000000;">标签<span style="color: transparent;"></span>具有结束标签。图<span style="color: transparent;"> </span><span>2-<span style="color: transparent;"></span>5<span style="color: transparent;"> </span><span>所示即为</span><span><h<span style="color: transparent;"></span>ead><span>标签在网页<span style="color: transparent;"></span>中的实际应用。</span></span></span></span></div><div><span style="color: #000000;"><br /></span></div><div style="text-align: center;"><span style="color: #000000;"><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2F66b3qbdpwu6gg_25d2b0cca358441c9d0b10a18c519445.png%22%2C%22originWidth%22%3A1538%2C%22originHeight%22%3A814%2C%22name%22%3A%22image.png%22%2C%22size%22%3A388197%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Atrue%2C%22bottom%22%3Atrue%7D%2C%22width%22%3A769%2C%22height%22%3A407%7D"></span></span></div><h2 id="Wq3SN"><span style="color: #000000;">4</span><span style="color: #000000;">．实际应用中<span style="color: transparent;"></span>出现的几个<span style="color: transparent;"></span>标签（<span><title></span>、<span><st<span style="color: transparent;"></span>yle><span>、</span><link><span>、</span><met<span style="color: transparent;"></span>a><span>）</span></span></span></h2><div><span style="color: #000000;"><br /></span></div><h3 id="qvHka">1<span>）</span><span><<span>title<span>><span>标签</span></span></span></span></h3><div><title><span>标签<span style="color: transparent;"></span>定义了文档的标<span style="color: transparent;"></span>题或名称，<span style="color: transparent;"></span>在所有<span style="color: transparent;"> </span><span>HTML<span style="color: transparent;"> </span>文档中是必<span style="color: transparent;"></span>需的，<span style="color: transparent;"></span>浏览器会将该<span style="color: transparent;"></span>元素</span></span>的内容显示在<span style="color: transparent;"></span>图<span style="color: transparent;"> </span><span>2-6</span><span>、图<span style="color: transparent;"> </span></span><span>2-7<span style="color: transparent;"> </span></span><span>和图<span style="color: transparent;"> </span><span>2-8<span style="color: transparent;"> </span></span><span>所<span style="color: transparent;"></span>示场景中。</span></span></div><div><br /></div><div style="text-align: center;"><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2F66b3qbdpwu6gg_0e578cd0751c4fd19fa2edd99a8e5d3a.png%22%2C%22originWidth%22%3A1321%2C%22originHeight%22%3A513%2C%22name%22%3A%22image.png%22%2C%22size%22%3A164461%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Atrue%2C%22bottom%22%3Atrue%7D%2C%22width%22%3A660.5%2C%22height%22%3A257%7D"></span></div><div><br /></div><div style="text-align: center;"><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2F66b3qbdpwu6gg_fa368f9d1d314d9d93a67ec45908b4df.png%22%2C%22originWidth%22%3A1257%2C%22originHeight%22%3A346%2C%22name%22%3A%22image.png%22%2C%22size%22%3A97684%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Atrue%2C%22bottom%22%3Atrue%7D%2C%22width%22%3A628.5%2C%22height%22%3A173%7D"></span></div><div><br /></div><div style="text-align: center;"><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2F66b3qbdpwu6gg_1a4bae42934e4549b357f9a2e4313dd6.png%22%2C%22originWidth%22%3A1283%2C%22originHeight%22%3A1050%2C%22name%22%3A%22image.png%22%2C%22size%22%3A293608%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Atrue%2C%22bottom%22%3Atrue%7D%2C%22width%22%3A641.5%2C%22height%22%3A525%7D"></span></div><h3 id="FCtWp">2<span>）</span><style><span>标签</span></h3><div><style><span>标签<span style="color: transparent;"></span>可以定义<span style="color: transparent;"> </span><span>HTML<span style="color: transparent;"> </span></span><span>文<span style="color: transparent;"></span>档的样式信息，它<span style="color: transparent;"></span>有<span style="color: transparent;"> </span><span>3</span><span>个属性，详情<span style="color: transparent;"></span>请参考表<span style="color: transparent;"> </span><span>2-1</span><span>。</span></span></span></span></div><div style="text-align: center;"><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2F66b3qbdpwu6gg_db553e2dcd104e8a875446f631b3d570.png%22%2C%22originWidth%22%3A1911%2C%22originHeight%22%3A233%2C%22name%22%3A%22image.png%22%2C%22size%22%3A29490%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Atrue%2C%22bottom%22%3Atrue%7D%2C%22width%22%3A955.5%2C%22height%22%3A117%7D"></span></div><div><br /></div><div style="text-align: center;"><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2F66b3qbdpwu6gg_43a831a7ef094246977b5e5f083eb0f7.png%22%2C%22originWidth%22%3A1928%2C%22originHeight%22%3A634%2C%22name%22%3A%22image.png%22%2C%22size%22%3A293649%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Atrue%2C%22bottom%22%3Atrue%7D%2C%22width%22%3A964%2C%22height%22%3A317%7D"></span></div><div style="text-align: center;"><br /></div><div style="text-align: left;">代码清单 2-5 展示了一段示例代码。 </div><div style="text-align: left;"><br /></div><div style="text-align: left;">代码清单 2-5</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22html%22%2C%22code%22%3A%22%3C!DOCTYPE%20html%3E%5Cn%3Chtml%3E%5Cn%3Chead%3E%5Cn%3Cmeta%20charset%3D%5C%22utf-8%5C%22%3E%5Cn%3Ctitle%3EhahaCoder%3C%2Ftitle%3E%5Cn%3Cstyle%20type%3D%5C%22text%2Fcss%5C%22%3E%5Cnh1%20%7B%5Cncolor%3Ared%3B%5Cn%7D%5Cnp%20%7B%5Cncolor%3Ablue%3B%5Cn%7D%5Cnli%7B%5Cnfont-weight%3Abold%3B%5Cn%7D%5Cn%3C%2Fstyle%3E%5Cn%3C%2Fhead%3E%5Cn%3Cbody%3E%5Cn%3Ch1%3E%E5%A4%A7%E5%AE%B6%E5%A5%BD%EF%BC%8C%E6%88%91%E6%98%AF%E7%9F%B3%E7%92%9E%E4%B8%9C%E3%80%82%3C%2Fh1%3E%5Cn%3Cp%3E%E6%AC%A2%E8%BF%8E%E8%AE%BF%E9%97%AE%E6%88%91%E7%9A%84%E5%BC%80%E6%BA%90%E4%BD%9C%E5%93%81%3C%2Fp%3E%5Cn%3Col%3E%5Cn%3Cli%3E%E4%B8%AA%E4%BA%BA%E7%BD%91%E7%AB%99%EF%BC%88https%3A%2F%2Fwww.shipudong.com%EF%BC%89%3C%2Fli%3E%5Cn%3Cli%3E%E4%B8%AA%E4%BA%BA%E5%BE%AE%E4%BF%A1%E5%85%AC%E4%BC%97%E5%8F%B7%EF%BC%88hahaCoder%EF%BC%89%3C%2Fli%3E%5Cn%3Cli%3E%E4%B8%AA%E4%BA%BA%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%EF%BC%88hahaAI%EF%BC%89%3C%2Fli%3E%5Cn%3Cli%3EGithub%EF%BC%88https%3A%2F%2Fgithub.com%2FhahaDong%3Ftab%3Drepositories%EF%BC%89%3C%2Fli%3E%5Cn%3C%2Fol%3E%5Cn%3C%2Fbody%3E%5Cn%3C%2Fhtml%3E%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%223Dal7%22%7D"></div><div><br /></div><div>运行结果如图 2-9 所示。</div><div><br /></div><div style="text-align: center;"><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2F66b3qbdpwu6gg_14ae380643514ce6acf4e33723086f21.png%22%2C%22originWidth%22%3A873%2C%22originHeight%22%3A503%2C%22name%22%3A%22image.png%22%2C%22size%22%3A165047%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Atrue%2C%22bottom%22%3Atrue%7D%2C%22width%22%3A436.5%2C%22height%22%3A251%7D"></span></div>
《智能前端技术与实践》——第 2 章 前端开发基础 ——2.2 HTML基础——2.2.1 HTML 文档基本结构（下） https://developer.aliyun.com/article/1228352?groupCode=tech_library
