html标签整理

最近在学习html知识，希望可以让自己写的html更语义化一些，从而让自己的前端干的更专业一点，本文就记录一下自己整理的一些知识。

标签种类

html标签一般可以分为如下几类

head里面的元信息类标签
img、video之类的替换型媒体标签
语义类标签
下面是我根据自己理解整理的一个关于html标签的思维导图：

html元素.png

上图中都是我感觉日常比较有可能用到的一些标签，其中页面结构类，是可以在页面中表示一块区域的标签。

常用的语义标签

语义类表示没有什么特殊功能只是用来表示有特殊含义的标签，下边列举一些觉得有意思的语义标签。

ruby

ruby标签被用来展示东亚文字注音或字符注释。

ruby标签实例

如上图所示，ruby配合rp、rt标签就可以起到效果，rt表示注释内容，<rp> 元素用于为那些不能使用 ruby元素展示 ruby 注解的浏览器，提供随后的圆括号。

em标签

有些时候同样的内容在不同的语境下会有不同的意思，这个时候语义标签的作用就很大了

例如下今天我吃了一个苹果 这句话放在不同上下文中就会表达不同的意思。

今天我吃了一个苹果，昨天我吃了一个香蕉

和

今天我我吃了一个苹果，昨天我吃了两个苹果

这两种情况，第一个例子中强调的是吃的内容，在第二个例子中强调的是吃的数量。

如何突出我们想表达的意思呢？em 标签就可以起到这个作用

今天我吃了一个<em>苹果</em>，昨天我吃了一个<em>香蕉</em>

使用em标签包裹需要强调的内容即可

em与strong的对比

很多人老是将em与strong混淆，其实两个标签完全表达不同的意思，em与strong标签有如下几个不同的地方：

em 表示强调，strong 表示更强烈的强调。言简意赅，表明了 em 和 strong 的命名来历。并且在浏览器中，em 默认用斜体表示，strong 用粗体表示，简单说来就是strong强调的情绪更强烈
em 用来局部强调，strong 则是全局强调。从视觉上考虑，em 的强调是有顺序的，阅读到某处时，才会注意到。strong 的强调则是一种随意无顺序的，看见某文时，立刻就凸显出来的关键词句。斜体和粗体刚好满足了这两种视觉效果，因此也就成了 em 和 strong 的默认样式。
em 表示内容的重点（stress emphasis），strong 表示强烈的重要性、严重性或内容的紧迫性，简单的说来就是em强调出重点，表达出这部分是这段内容要表达的重点，strong用来提示这部分内容有重点你要认真看。

标题

在html中h1-h6使用的话，其实按照文档的结构来说，是会形成层次结构的，下边用列子来表现一下。

如下一段简单的代码：

    <h1>食物</h1>
    <h2>蔬菜</h2>
    <h2>水果</h2>

如果用文档来表现的话，是这样的：

食物

蔬菜

水果

使用hgroup可以表明这段内容表达的是一个标题，只是表现标题的不同部分，例子如下：

    <hgroup>
        <h1>食物</h1>
        <h2>蔬菜</h2>
    </hgroup>

表示出的文档效果其实类似于如下这种：

食物-蔬菜

不过一般现在不需要这么麻烦，section 可以自动让标题下降一级，例如，下边这段代码：

<section>
    <h1>食物</h1>
    <section>
        <h1>蔬菜</h1>
    </section>
    <section>
        <h1>水果</h1>
    </section>
</section>

通过section可以表现出下边这种效果,和上边用h1和h2一样。