之前我一直没有重视过HTML语义化，觉得<div>+<span>，再用上一些基本的语义化标签，比如<p>,<h1>等等，写一些比较普通的页面足够了。但是吧，秉承着HTML语义化标签 “不用比用错好，用对比不用好”，还是应该追求把语义化标签用对，而不是仅仅完成一个页面就行。
为什么要使用语义化标签？
- 使代码结构更加清晰，方便阅读，更加方便团队开发
- 方便设备以语义的方式来渲染网页
- 有利于搜索引擎化(SEO)，爬虫抓取信息的时候能抓取到更多有效的信息
主要的语义化标签
这里略去一些特别简单的
-
<main> 规定文章的主要内容，标签中的内容在文章中应当是唯一的，不包含在文档中重复出现的内容。
PS：一个文档中只能有一个<main>，并且其不能是<article>,<aside>,<footer>,<header>,<nav>的后代
- <header> 主要包括文档的头部区域，用于定义介绍展示区域
- <nav> 主要包括了文档的导航链接部分
- <section> 定义文档中的章节，可以存放文档的章节、页眉、页脚等部分
- <article> 定义文档中独立完整的，可以被外部引用的内容，可以是一篇文章，一个帖子或者是用户的评论等。该标签可以嵌套使用。
- <aside> 定义所处内容之外的内容，一般定义文章的侧边栏。
-
<footer> 定义文档底部区域，一般包括文档作者，著作权信息，联系方式等
文档结构
- <small> 被包含的内容呈现小号字体
- <mark> 定义被标记的文本
- <figure> 定义独立的内容，包括图片、图表和代码等。此标签的内容应该与主内容相关。
- <figcaption> 定义<figure>标签内元素的标题，比如图片的题注。
- <cite> 表示所包含的文本是对某个参考文献的引用，一般为书籍、杂志、期刊或者作品的名字，被包含文本会斜体显示。
- <q> 标记一个短的引用
- <blockquote> 用来标记长的引用，定义引用块。被引用的部分前后会添加换行，并且增加外边距。
- <abbr> 标记一个缩写，在此标签的title属性中注明该缩写的全称，当鼠标指针移动到abbr元素上时，会显示该缩写的全称。
- <time> 定义时间和日期，以机器可读的方式对日期或时间进行编码这样一些软件可以把用户生日或者时间自动添加到日程表中，标签不会在浏览器中呈现任何效果。
- <dfn> 定义一个术语，斜体显示
- <address> 定义文档或文章作者的联系信息。如果此标签位于<body>标签内部，则表示文章作者的信息；如果位于<body>标签的外部，则表示文档作者的信息。此标签内的内容将会斜体显示。
- <del> 定义文档中已经被删除的文本，此标签内的文本中间会有横线。
- <ins> 定义已经被插入文档中的文本，一般与<del>配合使用。
- <code> 定义一段代码
- <meter> 定义已知范围内或分数值内的数据，以类似进度条的形式展现
- <progress> 用来显示任务的进度
- <ruby> 定义ruby注释，可以是拼音，音标发音等内容。一般与<rt></rt>，<rp></rp>标签同时使用，<rt>标签内提供发音或解释的信息，<rp>标签内提供当浏览器不支持ruby标签时显示的内容。
- <details> 用于描述文档某个部分的细节。与<summary>标签同时使用可以定义details的标题，用户点击标题时，弹出details的主体
- <audio> 定义一个音频
- <video> 定义一个视频
- <canvas> 定义图形，图表或者其它图像。此标签只是一个容器，需要用脚本语言来绘制具体图形。
目前看到的感觉比较重要和常用的就是这些啦以后如果有感觉很重要的会来更新，欢迎纠错和补充
网友评论