HTML5 语义化结构标签

2024-01-21 11:02:40

语义化标签通俗的讲，就是用特定的词汇去描述网页的一块区域、某处作用等等而应运而生的一些标签。这些标签不仅可以让人们方便通过索引查询的到，也便于计算机在处理这些信息的时候解析速度更快。

语义化标签的优点

结构上，在网页没有css的衬托下，上下、左右结构仍然分明。这就好比一个人没了皮肉，从骨架子上依然能看出这是个人 >_<
对搜索引擎而言，方便其索引，本质上其实就是帮助了搜索引擎做优化（SEO）
当面向用户时，诸如alt、title、label等等这类标签，可以用来解释某部分的名称或者意义所在，即提升了用户的易用性
面向开发者时，语义化的作用便是利于整个团队去查阅它，这不仅减少了团队的开发时间，还便于后期的维护
对于硬件方面，语义化的约束也方便了众多阅读器、移动设备等等诸如此类的硬件以这样的方式去解析渲染网页

下面回顾一下html5 新增的一些语义化标签

<section></section>

类似于div，section 更偏向划分区域

<article></article>

更偏向于内容的展示

<aside></aside>

在一边的，在一旁的，侧边

<header></header>

表示内容的头部、网页的头部、头部区域

<footer></footer>

表示网页的底部、内容的底部、底部区域

<nav></nav>

导航连接、导航区域

<figure></figure>

表示一块独立的内容

<figcaption></figcaption>

的标题（一般放在figure的第一位或者最后一位）

<main></main>

主体内容(IE不兼容)

<hgroup></hgroup>

标题成组

<mark></mark>

高亮显示默认北京为黄色（可以更改背景内联元素）

<time></time>

放时间的

<dialog></dialog>

尝试一下以下小demo：

    <button id="open">open</button>
    <dialog open>
        <p>蹦跶出一个对话框！</p>
        <button id="close">close</button>
    </dialog>
    <script>
        var dg = document.getElementsByTagName("dialog")[0];
        openDg = document.getElementById("open");
        openDg.onclick = function(){dg.show()};
        closeDg = document.getElementById("close");
        closeDg.onclick = function(){dg.close()};
    </script>

类似于微信的对话框 ( 默认display:none 默认定位默认边框 )

码农公寓