H5标签兼容

header,footer...{
  display:block;
}

结构标签

<article>  标记定义一篇文章
<header>  定义一个页面或者是区域的头部
<nav>  定义导航链接
<section> 定义一个区域
<aside> 定义页面内容部分的侧边栏 常与article结合使用
<hgroup> 标签用于对网页或区段的标题进行组合。(包裹多个h1-h6标签)
<figure> 标记定义一组多媒体内容
<figcaption> 定义figure的标题
<footer> 定义页面或区域的底部
<dialog> 标记定义一个对话框 类似微信对话框

多媒体标签

<!-- 
  audio定义音频内容
  source定义媒体资源
 -->
<audio src="../Source/passion.mp3" autoplay="autoplay" loop="-1" controls="controls">
    您的浏览器也该退休了，是否考虑一下Chrome这样的新鲜血液呢？
</audio>
<audio autoplay='autoplay'>
    <source src="./passion.mp3" type="audio/mpeg [mp3转码]" />
</audio>

<!-- video定义一个视频-->
<video src="../Source/pal4.mp4" controls="controls"></video>
<video controls="controls" width="1024" height="768">
  <source src="[../Source/pal4.mp4](../Source/pal4.mp4)" type="video/mp4">
</video>
<!-- embed 定义外部可交互的内容或插件 比如flash-->
<embed src="../HappyBirthday.swf" width="1024" height="768"></embed>

状态标签 用处不大 存在显示不一致及兼容性问题了解即可

<!-- meter 状态标签  实时状态显示 比如电量显示-->
<meter value="220" min="20" max="380" low="200安全区间" high="240安全区间" optimum="220最佳值"></meter>
<meter value="0.75">75%</meter>
<!-- progress  定义任务 加载 /安装 过程-->
<progress value="80" max="100"></progress> 

列表标签

<!-- datalist  IE10以上兼容-->
<input type="text" list="list" placeholder="请选择"/>
<datalist id="list">
        <option>js</option>
        <option>php</option>
        <option>css</option>
</datalist>

<!-- details 标签功能 : 生成按钮 点击后展开显示详细信息 -->
<details open="open 默认打开状态">
    <summary>树下的猫</summary>
    <p>我是一只坐在树下的貓，每天我都坐在树下，看花花世界，人海茫茫……
我每天都会做相同的梦，梦里看到一位公子，身患重病，危在旦夕。
公子身边有一名女子，她的眼里尽是关切和深深的依恋。梦里，她喂药给他，
他流着泪拉着她的手对他说：“谢谢你，下辈子我一定好好待你，来世还要娶你……” …</p>
</details>

注释标签 对不常见的文字在其上方显示其 音标 发音

#ruby标记内容需要注释
#rp对于不兼容的浏览器 人性化处理
#rt 注释的内容
<p>我们来<ruby>夼<rp>(</rp><rt>Kuang</rt><rp>)</rp></ruby>一个话题。</p>

其他标签

<!--mark 对标记内的内容 增加黄色背景选中状态 需要ie9以上-->
妈妈叫我回家的时候顺路买一盒<mark>牛奶</mark>，需要很新鲜的那种。
<!-- output标签  计算表单结果 配合 oninput事件  应该用不到这个标签-->
<form oninput="totalPrice.value=parseInt(price.value)*parseInt(number.value)">
    <input type="text" id="price" value="5000">
    *
    <input type="number" id="number" value="1">
    =
    <output name="totalPrice" for="price number"></output>
</form>

重定义标签

<b>粗体，无意义
<i>斜体，无意义
<dd>同details与figure使用包含文本 dialog也可用
<dt>可以同details和figure一同使用，汇总细节，dialog也可用（标题)
<hr> 不仅表示水平线，还表示主题结束，显示效果相同
<menu> 重新定义用户界面的菜单，配合command或者menuitem使用
<small> 表示小字体，例如打印注释或者法律条款
<strong> 表示重要性而不是强调符号

链接相关

<!--sizes(控制图标大小) 根据不同的分辨率引用不用的sizes,调整图标清晰度-->
<link rel="icon' href="icon.gif" type="image/gif" sizes="16*16">

<!--target(网页中所有的链接都是以这种方式打开) (base标签写在head标签内)(不添加target时默认是_slef）-->
<base href="http://localhost/" target="_blank">

<!--<a>超链接->-->
a:media=""(表示对设备进行优化，handheld对“手持”设备进行支持，tv对“电视”设备进行支持);
a:hreflang="zh"（设置语言，这里设置语言是中文）；
a:rel="external"（设置超链接的引用，这里的超链接为外部链接）。