1.什么是语义化

语义化(Semantic)在HTML5中被大量提起,就是语义化标签向浏览器和开发者展示了它所包裹内容的类型与意思,可是至今我看了好多代码,HTML5新增的语义化标签的使用率还是挺低的,但是毕竟是一个趋势,要想使用好必须要很清楚的了解各个标签的真正语义。

2.H5中页面布局常见语义标签

一张图足以了解:

需要注意的就是 article :

article 是一个特殊的 section 标签,它比 section 具有更明确的语义, 它代表一个独立的、完整的相关内容块。一般来说, article 会有标题部分(通常包含在 header 内),有时也会 包含 footer 。虽然 section 也是带有主题性的一块内容,但是无论从结构上还是内容上来说,article 本身就是独立的、完整的。

3.谈一谈比较常见的标签i,b,em,strong在H5中的新语义

  • <i> <b> – 原本只是倾斜和加粗,只是一种表象的元素,没有任何语义,现在被赋予了新的语义,解释起来很麻烦,google上有一段不错:

They are tags you should use when you need to draw attention to a part of prose, or to offset normal prose, without conveying emphasis (em), importance (for strong), or relevance (for mark). b is for key words, product names, actionable words, etc., while i is for technical terms, thoughts, phrases, etc.

意思就是这俩是备胎,当em和strong都不用的时候就可以考虑这俩了,然后两个人运用的场景有些区别,一个是关键字一个是科技词汇等。

  • <em> <strong> - 和H4中基本是一样的,只是强调的程度进一步是加强,都是主胎!

4.参考资料

[HTML知识体系]语义化标签概论的更多相关文章

  1. 浅谈html语义化标签,Html5新增语义化标签

    Html语义化标签,Html5新增语义化标签 自己在学习的期间,整理了下html关于语义化标签的一些知识,列的不是很全. 希望大家有新的见解可以给我留言,我会补充上去,谢谢大家 1.什么是语义化标签? ...

  2. HTML 语义化标签-新增标签介绍

    HTML 基础知识 版权声明:未经博主授权,内容严禁转载 ! HTML语义化标签概念 如果没有语义化标签,上面这些 div 都是没有实际意义的,只是我们提供给浏览器的指令. 和 语义化 代码对比: 什 ...

  3. html5语义化标签使用规范

    Html5添加了很多语义化标签,一个典型的html5页面结构可以如下安排 一.使用案例 1. 头部——header和nav标签 header头部,body下的直接子元素header一般用于放页面的介绍 ...

  4. HTML5语义化标签

    在HTML5中最基础也是比较好理解的也就是语义化标签了,,顾名思义语义化也就是可以直接读懂的标签~,这样我们在项目开发过程中不但自己不会因为5花8门的标签命名而伤脑筋,跟同事对接项目也会节约很多时间~ ...

  5. 让HTML5语义化标签兼容IE浏览器

    解决方案:IE9以下旧版本浏览器不支持新的语义化标签.其中一种解决方案就是用js将HTML5增加的标签创建出来,就像下面这样.(放在header部位) <script> var html5 ...

  6. HTML5之语义化标签

    HTML 5的革新之一:语义化标签一节元素标签. 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式的id和class形容这块内容的意义).这些标 ...

  7. Html5新增的语义化标签(部分)

    2014年10月29日,万维网联盟宣布,经过接近8年的艰苦努力,html5的标准规范终于制定完成.这是互联网的一次重大变革,这也许是一个时代的来临! 总结一些h5新增的语义化标签,记录下来方便自己学习 ...

  8. html5语义化标签总结二

    HTML 5的革新之一:语义化标签二文本元素标签.分组元素标签. HTML 5的革新——语义化标签(一)中介绍了一些HTML5新加的一些节元素,一张页面中结构元素构成网页大体,但是也需要其他内容来填充 ...

  9. 转html5语义化标签总结一

    HTML 5的革新之一:语义化标签一节元素标签. 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式的id和class形容这块内容的意义).这些标 ...

随机推荐

  1. Sass-除法

    Sass的乘法运算规则也适用于除法运算.不过除了除法运算还有一个特殊之处.众所周知“/”符号在css中已作为一种符号使用,因此在sass中做除法运算时,直接使用"/" 符号作为除号 ...

  2. tomcat启动一闪而过解决办法报错The CATALINA_HOME environment variable is not defined correctly

    解决办法: Tomcat无论在windows上还是Linux上只需要吧安装包传上去解压就行,不需要配置环境变量,吧之前有可能别人别配置的环境变量统一删掉即可(网上一大堆说需要配置的都是胡说八道).把以 ...

  3. Flutter-Text

    text的主要属性有:textAlign,maxLines,overflow等. Text( "hello flutter!", TextAlign:TextAlign.cente ...

  4. 亲测可用的golang sql例程与包管理

    sqlite与golang package main import ( "database/sql" "fmt" "time" _ &quo ...

  5. ConcurrentLinkedDeque

    import java.util.concurrent.ConcurrentLinkedDeque; /** * ConcurrentLinkedQueue : 是一个适用于高并发场景下的队列,通过无 ...

  6. controllerpom

    <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> &l ...

  7. 英语单词Repository

    Repository 来源——查看仓库的名称内容 [root@centos7 ~]# yum repolist Loaded plugins: fastestmirror Repository bas ...

  8. 【2019 Multi-University Training Contest 3】

    01: 02:https://www.cnblogs.com/myx12345/p/11593829.html 03: 04:https://www.cnblogs.com/myx12345/p/11 ...

  9. [CSP-S模拟测试]:字符消除2(hash+KMP)

    题目背景 生牛哥终于打通了“字符消除”,可是他又被它的续集难倒了. 题目传送门(内部题52) 输入格式 第一行$n$表示数据组书.接下来每行一个字符串.(只包含大写字母) 输出格式 每组数据输出一个$ ...

  10. linux下使用lftp的小结

    今天在解决一个远程服务器备份的问题时,用到了lftp的相关知识.整理如下: lftp的功能比较强大,相比原来用ftp,方便了很多. 1.登陆: lftp ftp://yourname@site pwd ...