h5新增语意标签与BFC

---

html5新增语意标签

HTML5添加了很多新元素及功能，比如: 图形的绘制，多媒体内容，更好的页面结构，更好的形式 处理，和几个api拖放元素，定位，包括网页 应用程序缓存，存储，网络工作者，

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、html5新标签兼容性

最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。

二、h5新增语意标签

标签	描述
article	定义页面独立的内容区域。
aside	定义页面的侧边栏内容。
bdi	允许您设置一段文本，使其脱离其父元素的文本方向设置。
command	定义命令按钮，比如单选按钮、复选框或按钮
details	用于描述文档或文档某个部分的细节
dialog	定义对话框，比如提示框
summary	标签包含 details 元素的标题
figure	规定独立的流内容（图像、图表、照片、代码等等）。
figcaption	定义 figure 元素的标题
footer	定义 section 或 document 的页脚。
header	定义了文档的头部区域
mark	定义带有记号的文本。
meter	定义度量衡。仅用于已知最大和最小值的度量。
nav	定义导航链接的部分。
progress	定义任何类型的任务的进度。
ruby	定义 ruby 注释（中文注音或字符）。
rt	定义字符（中文注音或字符）的解释或发音。
rp	在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
section	定义文档中的节（section、区段）。
time	定义日期或时间。
wbr	规定在文本中的何处适合添加换行符。

三、语意标签优点

• 为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构
• 比div标签有更加丰富的含义，方便开发与维护
• 方便搜索引擎能识别页面结构，有利于SEO
• 方便其他设备解析（如移动设备、盲人阅读器等）
• 有利于合作，遵守W3C标准

---

四、注意

• 尽可能少的使用无语义的标签div和span
• 在语义不明显时，既可以使用div或者p时，尽量用p，因为p在默认情况下有上下间距，对兼容特殊终端有利
• 不要使用纯样式标签，如：b、font、u等，改用css设置
• 需要强调的文本，可以包含在strong或者em标签中
• 使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般- - - 单元格要区分开，表头用th，单元格用td
• 表单域要用fieldset标签包起来，并用legend标签说明表单的用途
• 每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性

五、布局

1. header 与hgroup
   放在页面或布局的顶部，一般放置导航栏或标题，如：

<header>
    <h1>**有限公司</h1>
</header>

一个文档中可以包含一对或者一对以上的header标签。
标签的位置是次要的，不一定非要显示在页面的上方，我们可以为任何需要的区块标签添加

元素

<hgroup>
    <h1>这是一篇介绍HTML 5语义化标签和更简洁的结构</h1>
    <h2>HTML 5</h2>
</hgroup>

如果有连续多个h1-h6标签就用hgroup
如果有连续多个标题和其他文章数据，h1-h6标签就用hgroup包住，和其他文章元数据一起放入header标签。
2. nav

标签定义导航链接的部分。 并不是所有的 HTML 文档都要使用到

元素。

元素只是作为标注一个导航链接的区域。 在不同设备上（手机或者PC）可以制定导航链接是否显示，以适应不同屏幕的需求。

<header>
   <h1>**王者荣耀英雄位置</h1>
   <nav>
       <li><a href="#">刺客</a></li> 
       <li><a href="#">射手</a></li>
       <li><a href="#">法师</a></li>
       <li><a href="#">战士</a></li>
       <li><a href="#">坦克</a></li>
   </nav>
</header>

3.aside
所包含的内容不是页面的主要内容、具有独立性，是对页面的补充。
aside一般使用在页面、文章的侧边栏、广告、友情链接等区域。
4. article
article元素应该使用在相对比较独立、完整的的内容区块，所以我们可以在一篇博客、一个论坛帖子、一篇新闻报道或者一个用户评论中使用article元素。article可以互相嵌套。

<article>
   <h1>HTML5学习之语义化标签</h1>
   <p>....正文.....</p>
   <footer>版权所有*伪版必究</footer>
</article>

5.section标签定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域。

<section>
  <h1>WWF</h1>
  <p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>

<section>
  <h1>WWF's Panda symbol</h1>
  <p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
</section>

6.footer
文档的页脚；
footer标签定义文档或者文档的一部分区域的页脚。

footer 元素应该包含它所包含的元素的信息。
在典型情况下，该元素会包含文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等。
在一个文档中，您可以定义多个 footer元素。

<footer>
    <small>
        版权所有 © 2016-2017 *四川成都有限公司
    </small>
</footer>

BFC块级格式化上下文。

• 官方解释为：它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。BFC提供了一个环境，HTML元素在这阁环境中会按照一定规则进行布局。
  说人话：BFC的目的就是形成一个独立的空间，在这个空间内的子元素不会在布局上影响到外面的元素。

• 如何生成BFC
  方法1：overflow 为：hidden auto scroll。
  方法2：浮动 float。只要设置了浮动，当前元素就拥有了BFC属性。
  方法3：定位 绝对定位和固定定位。 默认和相对定位不会创建BFC空间。
  方法4：display inline-block table-cell flex inline-flex

   BFC应用：
   1.解决margin塌陷
   2.父类高度塌陷
   3.阻止元素被浮动元素遮盖