HTML5的语义元素

一，语义元素

    那么什么是语义元素呢?
简单来说,这些标注的内容被赋予了额外的涵义，并且不做真正的任何事。

    那么既然不做真正的任何事，我们为什么要使用语义元素呢？

• 1.容易修改和维护

  因为现在的网页都是分区进行创建，比如网页的标题，侧边栏，内容区，尾部等等，所以当你想修改网页，使用语义元素更能清晰的表达网页的页面结构。

• 2.搜素引擎的优化

如谷歌的搜索引擎，会使用搜索机器人（search bot），这些搜索机器人会自动在web页面中爬行获取每一个页面。

语义化元素示例请访问示例页面

如我们页面大体都分为三个组成部分，头部，主体内容，尾部。之前我们可能都使用div元素来进行
而现在可以使用header和footer来代替网页的头部，和尾部

• header标签
  表示网页的头部信息

• footer标签
  表示网页的尾部信息

• article标签
  用于表示完整的，自成一体的内容块，如博客文章

  
  article

• hgroup标签里放标题
      如果有一个普通的标题，本身不含特殊内容我们使用h1，h2等标签就可以
      但如果除了主标题我们页面还需要一个副标题，那么就需要将两个标题包装在hgroup标签中

            <hgroup>
           <h1>我是主标题</h1>
           <h2>我是副标题</h2>
            </hgroup>
  

• figure 标签添加插图
      很多页面都有图片，但是插图和图片概念不同，插图可以说是附图，简单来说：也就是文章旁边的位置上的插图，应该是浮动的

  
  figure

figcaption图题的描述，注意这里img的alt属性要删除掉，因为你使用了alt属性或者是空字符串，那么屏幕阅读器会以为你的图片仅仅是装饰作用，屏幕阅读器会忽略不读

• aside标签
      表示它与周围文本没有密切关系的，可以使用在对某些问题进行解释，存放广告，相关链接。。。。

二，支持语义元素的浏览器版本

浏览器	IE	Firefox	chrome	Safari	opera	SafariIOS	Android
最低版本	9	4	8	5	11.1	4	2.1

但是不支持语义化元素的浏览器，会将这些不认识的元素当成内联（inline）来处理，会使他们挤在一起。所以我们的处理方法就是强制将他们变成块级元素以处理之前老版本浏览器不认识语义元素的问题
如

   article,aside,figure,figcaption,footer,header,hgroup,nav,section,summary{
            display: block;
        }