html标签整理

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

标签种类

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

• head里面的元信息类标签
• img、video之类的替换型媒体标签
• 语义类标签
  下面是我根据自己理解整理的一个关于html标签的思维导图：
  
  html元素.png
  
  上图中都是我感觉日常比较有可能用到的一些标签，其中页面结构类，是可以在页面中表示一块区域的标签。

常用的语义标签

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

ruby

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

ruby标签实例

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

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使用的话，其实按照文档的结构来说，是会形成层次结构的，下边用列子来表现一下。

如下一段简单的代码：

    
食物
    
蔬菜
    
水果

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

• 食物
  • 蔬菜
  • 水果

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

    

        
食物
        
蔬菜
    

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

• 食物-蔬菜

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

    
食物
    

        
蔬菜
    
    

        
水果
    

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

• 食物
  • 蔬菜
  • 水果

结构元素

上边说过，结构元素是可以在页面中表示一块特殊区域的标签，下边两个是我觉得有必要特别收一下的标签。

• section 一般用来表示文章中的段落、章节等，一般配合article使用
• main main不能嵌套在article里边，main一般表示为网站最重要的部分，一个网页应该保证只有一个main