什么是HTML语义要说HTML语义，首先要说说HTML负责什么？以下内容摘自维基百科：超文本标记语言（英文：HyperTextMarkupLanguage，简称：HTML）是一种用于制作网页的标准标记语言。HTML元素是网站的构建块。HTML允许嵌入图像和对象，并可用于创建交互式表单，它用于结构化信息——例如标题、段落和列表等，它还可以用于描述文档的外观和语义以一定程度上。关于语义的理解谷以岭：如何理解Web的语义？这里说的很清楚了，所以我简单说明一下我的理解：一般来说，是从代码上展示页面的结构，而不是从最终的视觉展示上。纯HTML代码是没有任何样式的，只是用来标示这一段是标题，这段是代码，哪一段是要强调的内容等等。但是为什么我们只写HTML呢？浏览器中不同的标签也有不同的风格呢？那是因为每个浏览器都有自己的默认样式和对应的标签，为了方便页面友好的展示而不需要设置样式。有了好的语义代码，你可以直接从代码中看出那段代码到底想表达什么。为什么使用HTML语义标签为什么使用语义标签？我也可以用DIV+CSS来达到同样的效果。诚然，单纯看效果两者并无区别，但页面不仅是给人看的，也是给机器和爬虫看的。网页结构更清晰，更易于开发和维护：另外，当由于网络或其他原因导致页面样式文件丢失时，页面充满div和良好的语义结构哪个更方便用户使用？优点语义标签有助于构建结构良好的HTML结构，有利于搜索引擎的索引和抓取。简单来说，想象一下H1标签中匹配的关键词和div中匹配的关键词。搜索引擎会将结果放在第一位。方便不同设备（屏幕阅读器，盲人阅读器等）的解析这些设备如何区分那些是主要内容并在充满div的页面上首先阅读它们？有利于建立清晰的组织结构，有利于团队的发展和维护。大厂是怎么做到的？看看大厂的运作，打开淘宝页面查看其首页源代码，发现世界上只有一个h1标签，就是他的LOGO。往下看，主题栏目标题是h2再往下看，栏目都是用h3标签，内部还用了一个隐藏的来特别强调。虽然这些东西用div+css都可以做到，但是它还是用了相应的语义标签来强调作用。编写语义代码时，要注意尽量少使用非语义标签div和span；当语义不明显，可以用div或者p的时候，尽量用p，因为p默认有上下间距，对兼容特殊终端有好处；不要使用纯样式标签，如：b、font、u等，改用css设置。需要强调的文字可以包含在strong或者em标签中（浏览器预设样式，如果可以用CSS指定就不需要），strong默认的样式是粗体（不要用b),em为斜体（不要使用i）；use对于表格，标题使用caption，头部使用thead，主体使用tbody，尾部使用tfoot。表格标题应与一般单元格区分开来，标题使用th，单元格使用td；表单字段应该用fieldset标签包裹，并且应该使用legend标签来解释表单的用途；每个input标签对应的描述文字需要使用label标签，通过为input设置id属性，在lable标签中设置for=someld，将描述文字与对应的input关联起来。一些常用的语义标签
~作为标题，按重要性从高到低排序，为最高级别。
为最高级别。
段落标记，知道
是一个段落，就不会用
来换行，也不需要
来区分段与段。
中的文字会自动换行，换行效果优于
。段落之间的间距也可以通过CSS来控制，这样就可以轻松清晰的区分段落与段落。
- ,
- ,
- 无序列表，大家用的很广泛，
- ,
- ,
- 是“定义列表”。例如字典中单词的解释和定义就可以使用这种列表。dl不单独使用，一般与dt、dd一起使用。dl打开一个定义列表，dt代表要定义的项目名称，dd代表dt的项目的描述。，，用于强调，用于强调。
- 1独家的！逃跑时老板的公章被抢走了！这个明星机器人深陷破产困境
- 2VR“断断续续”的流行还存在这些问题
- 3这种可以骑乘并自动跟随人的移动机器人在海外收获了无数粉丝
- 4董明珠对美的的犀利点评！根本不是对手，算是长辈
- 5诺基亚用时尚诠释智能手表的未来
- 6智能手环的准确性受到质疑，厂商盲目跟风，忽视软实力
- 7可穿戴设备！你有自己的信息
- 8LV高管！瑞士奢侈手表行业将受益于智能手表的繁荣
- 9致力于可穿戴设备的续航能力，下一代电池会取代锂电池吗？
- 10雷军透露，小米手环2的图片已于5月10日发布
- 11iPhone XS上市不温不火的背后，国产高性价比手机备受追
- 12手机照片盲评：哪张照片最适合你的选择？
- 13全面评测399元华为荣耀手环零！你不知道的偏执
- 14被小猪佩奇祝福的社会人都out了，据说这群新社会人比较受欢迎
- 15除了小龙虾，世界杯还有这些值得关注的技术
- 16谷歌的硬件一直广受好评，但并不受欢迎，推出两款智能手表的底气
- 17什么能让你摆脱“随机无蛋”的可穿戴产品？
- 18林林的爆料！可穿戴设备的实用性还不够
- 19微软HoloLens眼镜！打破虚拟与现实的界限
- 20高通推出Snapdragon Wear 2500，增加在可穿
,,,
, , 用于制作表格，不用于布局HTML5。新的HTML5标准更加语义化，借用网上的一张图来说明这些新的标签header元素：header元素代表一个“页面”或“section”的头部。footer元素：footer元素代表一个“网页”或“版块”的页脚，通常包含该版块的一些基本信息，如：作者、相关文档链接、版权信息等。hgroup元素：nav元素：nav元素代表页面的导航链接区域。用于定义页面的主要导航部分。aside元素：aside元素包含在article元素中，作为主要内容的辅助信息部分，内容可以是与当前文章相关的相关信息、标签、排名说明等。(Specialsection)section元素：section元素表示文档中的一个“节”或“段落”。“节”可以指文章中按主题划分的节；“部分”可以指页面中的分组。章节通常有标题。虽然html5中的section会自动降级h1-h6的标题，但是最好手动降级。article元素：article元素最容易与section和div混淆。实际上，article代表了一个文档、页面或网站中的一个自成一体的内容，其目的是让开发者能够独立开发或重用。例如，论坛帖子、博客文章、用户评论、交互式小部件。（特殊部分）除了内容外，文章还会有标题（通常在页眉中）和页脚。推荐阅读原博主的博客：传送门参考链接https://www.zhihu.com/question/20583492/answer/260535796https://www.zhihu.com/question/20455165https://www.zhihu.com/question/20583492https://www.cnblogs.com/freeyiyi1993/p/3615179.htmlhttp://www.html5jscss.com/html5-semantics-section.htmlhttps://segmentfault.com/a/1190000004179484 最新推荐猜你喜欢
- 有序列表不常用。在web标准化的过程中，
- 也更多的被用于导航栏。本来，导航栏是一个列表。这是完全正确的，当你的浏览器不支持CSS时，导航链接仍然很好。所以，就美学而言，它只是差了一点。
- ,
- ,