web前端：谈谈你对HTML语义化的理解
编程巫师
2024-04-23 23:42
超文本标记语言，标准通用标记语言下的一个应用。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
1.什么是html语义化？
基本上都是围绕着几个主要的标签，像标题（h1-h6），列表（li），强调（strongem）等。
根据内容的语义化（内容结构化），选择合适的标签（代码语义化），便于开发者阅读和写出更优雅的代码的同时，让浏览器的爬虫和机器很好的解析。
2.为什么要语义化？
为了在没有css的情况下，页面也能呈现出很好的内容结构和代码结构。
为了提升用户体验，如：title，alt用于解释名词或解释图片信息，lable标签的活用。
有利于和搜索引擎建立良好的沟通。
方便其他设备解析（如屏幕阅读器，盲人阅读器，移动设备），以意义的方式来渲染网页。
便于团队的开发和维护，语义化更具有可读性，是下一步网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
3.写HTML代码是应注意什么？
尽可能少的使用无语义的标签div和span
在语义不明显时，既可以使用div或者时，尽量用p，因为p在默认情况下有上下间距，对兼容特殊终端有利。
不要使用纯样式的标签，如：b，font，u等，改用css设置。
需要强调的文本，可以包含在strong（加粗）或者em（斜体）标签中（浏览器预设样式，能用css样式就不用它们）
使用表格，标题要用caption，表头用thead，主体部分用tbody包围，尾部要tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td
表单域要用fieldset标签包起来，并用legend标签说明标签的用途。
每个input标签对应的文本框都需要使用label标签，并且通过为input设置id属性，在label标签中设置for=someID来说明文本和相对应的input关联起来
简单来说就是：用正确的标签做正确的事情。html语义化让页面的内容结构化，结构更清晰，便于对浏览器，搜索引擎解析；即使在没有css样式的情况下，也以一种文档格式显示，并且是容易阅读的；搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO；使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
在网页中除了可显示常见的ASCII字符和汉字外，HTML还有许多特殊字符，它们一起构成了HTML字符集。有2种情况需要使用特殊字符，一是网页中有其特殊意义的字符，如：；二是键盘上没有的字符。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
