《智能前端技术与实践》——第 2 章 前端开发基础 ——2.2 HTML基础——2.2.1 HTML 文档基本结构（中）
教程管理员 发布于2023-09-28 13:54 HTML教程 138
《智能前端技术与实践》——第 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 data-lake-id="31a08c72959ac84f736e385952c58027"><br /></div><div data-lake-id="c175ecc5963048cb0842ff9ebc5bf8ca">这些元数据元素本身并非网页文档的内容，但它们提供了<span style="color: transparent;"> </span><span>HTML<span style="color: transparent;"> </span></span><span>文档的信息，如代码清</span></div><div data-lake-id="abb7ddd7e233eff125a817bf859104a6">单<span>2-4<span style="color: transparent;"> </span></span><span>所示。</span></div><div data-lake-id="87fcb6141be784b9bd715079fa2a1aba"><br /></div><div data-lake-id="28b2a8fb5bd4c395245c53cd309f1c29">代码清单 2-4</div><div data-lake-id="ef0eb059e66b3302cc57adb7aec33719"><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 data-lake-id="410dc24b7b2d289d25ab9ef7f376577b"><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 data-lake-id="814ae837f39df73c0bb95fa65cc0e612"><span style="color: #000000;"><br /></span></div><div data-lake-id="f8a38f28a1a125faf114dccb83e66677" 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 data-lake-id="ab45b9a8f78babb5e4eed28b3d8ca353" 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 data-lake-id="cef6b5d88d1260aff986ec8fdedeb788"><span style="color: #000000;"><br /></span></div><h3 data-lake-id="085cdde07cf8ad54610f2efe3f3b795e" id="qvHka">1<span>）</span><span><<span>title<span>><span>标签</span></span></span></span></h3><div data-lake-id="3bf2f540d31e1fee0e6d8c4629fd55d1"><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 data-lake-id="97dd67bc00680e8b08a2acd1ff2186a0"><br /></div><div data-lake-id="d4534c80848af4c55916f57fd248eb2f" 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 data-lake-id="6cedf40440f6d6bab5f44192844db9c5"><br /></div><div data-lake-id="50a602411f0533e9ea6f9b548a7e00ed" 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 data-lake-id="dfbfb3cb3b715c799dec7912e73c4885"><br /></div><div data-lake-id="26fabf3164349a4bcc66a51047352907" 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 data-lake-id="57e06466e563f9c9ad1165705dda541b" id="FCtWp">2<span>）</span><style><span>标签</span></h3><div data-lake-id="0ad3ca074a2e5088f8a2769f9973a45e"><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 data-lake-id="e0e1631204ba0d1f6fa201dfa597008c" 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 data-lake-id="7e37e16fbe31d5d5e1aacbfbeab6e9f6"><br /></div><div data-lake-id="a5f31452f7c0ad3c17336d6f168106ad" 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 data-lake-id="9e9dec4d6190094cfbbe7db31d1bdc26" style="text-align: center;"><br /></div><div data-lake-id="72ecd684f04583bc716a06b725761c14" style="text-align: left;">代码清单 2-5 展示了一段示例代码。 </div><div data-lake-id="dbda0069009fab45ac0f92e68ef2f5b2" style="text-align: left;"><br /></div><div data-lake-id="2a8c37002ccb237b7a69d26dbb58091a" 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 data-lake-id="203b2bce01d360f1d9b3ba7dc6aa3d1a"><br /></div><div data-lake-id="134c79946de783fda8fc8e0e1ff9e43a">运行结果如图 2-9 所示。</div><div data-lake-id="3fc801221be7a112ca158498caf12c3d"><br /></div><div data-lake-id="01b9af66f44b34e3539999d7f1023a38" 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
相关推荐
- 03-20 互联网+智能服务系统项目汇报Office PPT免费模板背景素材下载
- 12-13 结构工程师应聘求职简历模板下载_简介doc文档Word模板下载
- 10-04 在HTML中取得请求中的参数
- 10-04 SharePoint 2013 母版页取消和HTML页关联
- 10-04 29行代码使用HTML5 Canvas API绘制一颗红心
- 10-04 浏览器加载和渲染html的顺序，Div和Table的区别
- 10-04 《HTML5完美游戏开发》——2.6 Processing.js实例和整合
- 10-04 如何关闭Struts2的webconsole.html
- 10-04 《HTML5 开发实例大全》——1.4 使用CSS修饰HTML 5页面
- 10-04 《HTML5游戏编程核心技术与实战》——2.8 小结
- 控制面板
- 友情链接
- 最近发表
-
- 涂鸦而不乱简约艺术主题Office PPT免费模板背景素材下载
- 有创意的情人表白动态贺卡Office PPT免费模板背景素材下载
- 绿色简约技能竞赛电力Office PPT免费模板背景素材下载
- 极简几何商务蓝年终总结汇报Office PPT免费模板背景素材下载
- 蓝橙简约商务年终总结汇报Office PPT免费模板背景素材下载
- 绿色清新教育风课堂教学通用Office PPT免费模板背景素材下载
- 潮流复古艺术感年终总结Office PPT免费模板背景素材下载
- 浅绿商务风工作总结报告Office PPT免费模板背景素材下载
- 大气简约时尚年终总结汇报Office PPT免费模板背景素材下载
- 喜庆春节风公司年终誓师表彰大会Office PPT免费模板背景素材下载
- 最新留言
-
