Html5的新语义化的标签

在HTML5之前采用HTML+CSS文档结构写法

【ID选择器说明 id选择器——用于标识页面上特定元素(比如站点导航、页眉、页脚)而且必须唯一; 也可以用来标识持久结构性元素(如主导航、内容区域)】
【class选择器说明 class类选择器——可以应用于页面任意多个元素,非常适合标识内容类型或其他相似的条目】


Html5的新语义化的标签_第1张图片
image

(上图展示典型的两列布局标记使用div的id和class类属型.它包含一个页眉,页脚,横向的导航栏.主要内容包含一篇文章和右边的侧边栏 )

缺点 :
1.不利于SEO搜索引擎对页面内容的抓取
2.文档结构定义不明确

于是HTML5出现,解决上述问题,专门添加页眉、页脚、导航、文章内容等跟结构相关的结构元素标签


Html5的新语义化的标签_第2张图片
image

(div元素被替换成新的元素:header 页眉, nav 导航, section 区块, article 文章, aside 侧边栏 , and footer 页脚.)

HTML5结构代码


  
...
...
...

对HTML5语义化标签解释

定义主要内容

页眉,可能包含标题元素,也可以包含其他元素,像logo、分节头部、搜索表单等

页眉主标题

页眉副标题

你可能感兴趣的:(Html5的新语义化的标签)