13 H5新标签

H5新标签

H5 新特性都有那些？

1. 新增了很多语义化标签
2. 废弃了一些css修饰和html标签
3. 支持本地持久化数据
4. 增加了音视频标签的api
5. 提供了canvas画布及其api

H5各种功能比较新，低于IE9的浏览器支持的功能不够全面，建议使用 IE9及其以上浏览器

一、mark 标记标签

<p>两个<mark>黄鹂</mark>鸣翠柳</p>

两个黄鹂鸣翠柳

二、meter 用电量标签

常用于能量的使用或者内容使用量等
属性

• value 当前电量的值
• max 最大值
• min 最小值
• low 用电量最低报警值
• high 用电量最高报警值

<meter value="100" max="100" low="20" high="90" min="0">你的浏览器太low了 </meter>

你的浏览器太low了

当前标签中的文字，只有在浏览器不支持的时候会被渲染出来

三、progress 进度条标签

只有最大max属性

没有min属性

value属性是当前值

<progress max="100" value="50" ></progress>

四、ruby 标签

常用来做拼音，注音，注释等

• rt 表示注释的内容
• rp 如果浏览器不支持，显示的内容

<ruby>赵
    <rt>zhao</rt>
    <rp>你的浏览器太low了</rp>
</ruby>

赵
zhao
你的浏览器太low了

五、datalist 数据列表标签

通过 input 的 list属性 和 datalist 的 id属性 进行绑定

datalist 中的选项使用 option 标签

通过 datalist 可以制作关联查询效果

<input type="text" value="" list="show">
<datalist id="show">
    <option value="一枝红杏"></option>
    <option value="一枝红"></option>
    <option value="一枝"></option>
    <option value="两个"></option>
    <option value="两个个"></option>    
</datalist>

六、sup 上角标 sub 下角标

常用于注释

<p> 3 <sup>2</sup> + 4 <sup>2</sup>=5 <sup>2</sup></p>
<p> 3 <sub>2</sub> + 4 <sub>2</sub></p>

3 ² + 4 ²=5 ²

3 ₂ + 4 ₂

七、details 展示详情标签

自带折叠效果

八、summary 标签

是details的标题

<details>
    <summary>四大名著</summary>
    <p>西游记</p>
    <p>三国演义</p>
    <p>红楼梦</p>
    <p>水浒传</p>
</details>

九、audio 标签

用来播放音频文件，支持 MP3 ogg wav 类型的文件

属性

1. contols：控制是否出现播放的控制条
2. autoplay:控制自动播放
3. loop：循环播放
4. muted：静音
5. preload：设置预加载

值:

1. auto:默认值，在整个页面加载之后立即加载音频文件
2. metadata：只加载音乐的源文件
3. none：不加载，可以用他来减少服务器压力

如果设置了autoplay，则可以不设置preload

<audio src="../src/见于不见.mp3" 
    controls
    autoplay
    loop 
    muted
    preload="auto"  
      >
</audio>

audio 结合source 标签 做音频播放的兼容效果

source 专门用来解决不同浏览器对不同资源格式的支持问题，做兼容

<audio controls>
    <source src="../src/见于不见.mp3">
    <source src="../src/见于不见.ogg">
    <source src="../src/见于不见.wav">
</audio>

十、video 视频播放标签

支持 MP4，ogg，webm 格式

属性：

1. contols：控制是否出现播放的控制条
2. autoplay:控制自动播放
3. loop：循环播放
4. muted：静音
5. preload：设置预加载
6. width：视频播放区域的宽度
7. poster：视频的封面

<video src="../src/sp.mp4"
    controls
    loop
    muted    
    width="500px"
    poster="../src/zyl1.jpg">
</video>

<!-- 视频播放的兼容写法 -->
<video controls>
    <source src="../src/sp.mp4">
    <source src="../src/sp.ogg">
    <source src="../src/sp.webm">
</video>

十一、figure 注释标签

一般包裹一段文字、图片、代码、图表等

注释的内容写在 figcaption 标签中

<figure>
    <figcaption>zyl</figcaption>
    <img width="400px" src="../src/zyl1.jpg" alt="">
</figure>

H5新增关于布局的标签

1. header：页面的头部区域，要和head标签区分开
2. footer：页面的底部区域
3. nav：导航区域
4. aside：侧边栏区域
5. section：一个独立的区域，类似 div
6. article：他一般包含在 section 中，使用article 包裹独立的模块