我的HTML标签语义归纳

Info

完成时间: 2016年4月
更新时间：

转载请保留时间信息，以免误导查阅者！！
内容有错误、不完整请帮忙指出，我会更新的！

为什么根据语义归纳

使用HTML标签有一个最重要的原则，那就是：根据标签的语义而不是根据标签的默认样式。举个例子:

    

    这是文章的第一段。

    这是文章的第二段。
    

正确的做法应该是一个自然段一个p标签。像上面仅仅只是因为br标签能换行（换行是一种样式表现），所以才使用br标签来分割自然段，这是不合理的。当我们要给所有的自然段设置缩进text-indent属性的时候，上面的HTML写法将会非常的无力！因为只有第一段会缩进，逻辑上的第二段在上面的代码中的HTML结构里属于第一段！

再说一下HTML的“语义”。我上面举的p标签表示的是文本内容语义，HTML标签的语义还包括表示结构的，例如: header、main、footer等。所以不要把语义的概念缩得太小了。根据语义构建出来的HTML结构，一般就是结构良好的HTML。结构良好的HTML页面，有时候只需要非常小的改动 甚至不用改动， 直接换一套CSS就能给页面换一层皮。

那br标签是不是就没用了？HTML5没有取消这些标签，说明还是有用的。毕竟负责样式的CSS并非万能的，因为有一些需求处于“结构”与“样式”之间的灰色地带。比如：br标签、b标签、i标签，这些我们在最后面讨论。

归纳的方式

我将HTML归纳为三大类：

• 组织类标签。 就是用于协助组织页面元素的标签，例如：header、main、aside、footer、section、div等等。

• 内容类标签。 就是表示具体内容的标签，例如：p表示自然段、article表示文章、h1~6表示标题、figure表示插图、audio表示多媒体、form表示表单等等。HTML中的大部分标签属于此类。

• 其它。就是我也不知道该怎么分，或者我认为没必要再细分了的标签。

另外说明下，我的归纳会有重复，比如article标签，即是组织类标签，也是内容类标签。再者读者最好不要复制我做的思维导图，一是因为并不完善，二是因为思维导图要自己做了才对自己有用，仅供参考！

具体如图：

HTML5不支持

这里顺便罗列一下HTML5取消支持的标签，这些标签不要再是使用了！

• acronym 原本是IE版的attr标签，HTML5将统一使用attr，并且不再支持acronym

• applet 表示java的applet小程序，改为embed或object

• basefont 原本表示设置基本字体，现在直接用CSS

• big 让字体更大（典型的HTML做CSS的事），现在直接用CSS.

• center 原本是居中作用的-->CSS

• dir 定义文件夹列表

• font 定义文本内容的文字样式

• frame 定义子窗口。HTML5停用，貌似是因为安全原因。TODO: 了解具体原因

• frameset 定义子窗口群。同上。

• noframes

• strike 删除线，现在用del跟s。

• tt 表示打印机样式

灰色地带的HTML标签

这些标签有br、b、i、u、small、pre。 这些标签其实都是样式标签，没有多少语义的含义在里面，但是HTML5依然保留着，可见是一种无奈。因为总有一些东西是CSS做不了的，比如上面举的诗歌中用br标签的例子。再拿加粗标签b来说，HTML5建议使用b标签前应该先考虑使用h1-~h6、em、strong、mark，如果都不适用再使用b标签，我一直在想什么情况下才会用到b标签？用户标记一段文字的时候，可能表示强调、也可能表示重要、又或者是表示标记、但也存在一种可能：“我就是想标粗而已”。 是不是因为这样b标签才被保留下来呢？可能吧！

• br 换行标签，可用于诗歌体裁的内容，用于分割诗歌的语句，表示顿挫；

• b 加粗标签，使用前优先考虑如下顺序的标签：

  • 标题用h1~h6

  • 强调用em

  • 重要用strong

  • 高亮用mark

• i 倾斜标签。同b标签一样，使用顺序：

  • em

  • strong

  • mark

  • cite

  • dfn

• pre 保留空格换行的标签，用于显示代码（虽然有code标签）;

• small 使其内容比周围的字来得小一些。big标签被HTML5列入不支持的行列，small却没有，匪夷所思.....

• u 下划线;

• wbr 去掉字间距

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!