正确的标签做正确的事情

语义化标签的好处
- 方便代码维护
- 减少开发者之间沟通的成本
- 能让语言合成工具识别网页元素的用途,做出正确的反应
- 让搜索引擎能够正确识别重要的信息
- 一眼望上去,就能直观的知道标签的大概意思,而不是一堆span或者div标签.

语义化标签

总结了一下w3c中的标签,img/button/span...等不收录了
main:标签规定文档的主要内容(在一个文档中,不能出现一个以上的main元素:一般作为最大的布局元素,不能嵌套)

<header>
    定义页面头部
    <nav>定义导航</nav>
    <aside>定义侧边栏</aside>
</header>
<main>
    定义页面主体
    <section>
        <article>定义文章</article>
    </section>
    <section>
        <article>定义文章</article>
    </section>
</main>
<footer>
    定义页面底部
    <address>
        页面拥有者的信息
    </address>
</footer>

header:定义页面头部
footer:定义页面底部
nav:定义导航
aside:定义侧边栏
article:定义文章
section:定义区域
address:标签定义文档或文章的作者/拥有者的联系信息
strong:把文本定义为语气更强的强调的内容
em:把文本定义为强调的内容
del:定义删除文本
small:定义小号文本
time:定义日期/时间:所有主流浏览器都不支持,但是可以用啊.
mark:定义有记号的文本
figure:用作文档中插图的图像，带有一个标题
xmp:不赞成使用,可以原模原样的输出<span>标签</span>

<figure>
  <figcaption>黄浦江上的的卢浦大桥</figcaption>
  <img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/4/5/1714609fb2543a79~tplv-t2oaga2asx-image.image" width="350" height="234" />
</figure>

datalist:定义下拉列表

<input id="myCar" list="cars" />
<datalist id="cars">
    <option value="BMW">
    <option value="Ford">
    <option value="Volvo">
</datalist>

meter:定义预定义范围内的度量

    <p>显示度量值：</p>
    <meter value="3" min="0" max="10">3/10</meter><br>
    <meter value="0.6">60%</meter>
    <p>显示度量值：</p>
    <meter value="3" min="0" max="10">3/10</meter><br>
    <meter value="0.6">60%</meter>

显示度量值：

3/10
60%

显示度量值：

3/10
60%

details:定义元素的细节

<details>
    <summary>Copyright 2011.</summary>
    <p>All pages and graphics on this web site are the property of W3School.</p>
</details>

All pages and graphics on this web site are the property of W3School.

progress:定义任何类型的任务的进度

<progress value="22" max="100"></progress>

fieldset:定义围绕表单中元素的边框

<fieldset>
    <legend>健康信息</legend>
    身高：<input type="text" />
    <br/>
    体重：<input type="text" />
</fieldset>

健康信息身高：
体重：

HTML5的标签

正确的标签做正确的事情

语义化标签