H5 之 新增标签

# 前言

 H5的雏形形成于2004年，在2008年发布正式版，并于2014年定稿。目前支持IE9+及绝大多数市场浏览器。同时，它是唯一一个支持PC、Mac、iPhone、Android等主流平台的 跨平台语言。用H5开发的移动软件对比于原生APP应用得名“WebAPP”。各自优缺参半。对比一下

# 改变

 必须是在HTML文档的第一行，它不是html标签，而是指示web浏览器对页面使用哪个HTML版本进行指令的编写

// html4.01框架版doctype

// html4.01 严格版doctype

// HTML 5 版本不需要DTD

 

# 新增功能

  新增离线存储，更丰富的表单，Js线程，socket， 标准扩展embed，CSS3，流媒体多媒体引擎（Audio、Video、Canvas、webgl等）
 

---

# 新增标签

一. 结构标签

  H5之前，有意义的结构标签就是div，H5扩展了以下标签。

标签	说明
	标记一篇文章
	一个区域的头部
	一个导航链接
	一块区域
	页面的内容部分的侧边栏，如菜单栏
	定义section中的相关信息
	定义一组包裹多媒体内容以及他们的标题
	figure元素的标题
	标记一个区域的底部
	定义一个对话框（会话框）类似微信

【注意事项】

• 不要滥用结构标签
• 这些标签不要嵌套自身
• 标签使用级别：
  优于

  优于

二. 多媒体标签

标签	说明
	定义一个视频
	定义音频内容
	替代audio中src属性定义媒体资源
	一个画布API，绘制酷炫的效果
embed	定义外部的可交互的内容或插件如flash

(1) 音频

属性	值	说明
autoplay	autoplay	出现即生效，打开自动播放
controls	controls	出现即生效，显示控制控件，如播放暂停
loop	loop/-1	是否循环播放
muted	muted	是否静音播放
preload	preload	页面载入时执行预加载。优先级低于autoplay
src	url	资源位置

【说明】

• 支持3中音频格式： ogg、MP3、WAV
• 浏览器不支持audio时显示标签内部文字
• 可以使用标签解决浏览器格式兼容问题

（2）视频

标签	说明
autoplay	自动播放
controls	控制台，资源使用标签引入则控制台在视频口外
loop	播放次数。loop或-1表示无限循环
src	资源路径，若使用了，则该属性失效
width	视频播放器宽度
height	视频播放器高度

【说明】

• 支持格式 MP4，WebM，Ogg
• 可以使用标签解决浏览器格式兼容问题，用法同

3. 标签

  用于在网页上插入flash

 

三. web应用标签

1. 状态标签

标签	说明
	显示状态：气压，气温
	显示任务过程：安装，加载

（1）标签

  meter标签的max、min属性定义在最两边，low和high定义在中间。隔开三个区域。最终表现为三种色彩。optimum所在的区域显示绿色，相邻区域显示换色，相隔区域显示红色。

（2）标签

  可以使用在图片文件上传下载时，表现出一种loading的状态效果

  如果没有设置max，则value值应该在0-1之间。如果没有value值，进度是不确定的，表示任务正在进行中，滚动条会来回滑动（chrome），可以用作loading效果

// 只写max属性，会有加载的效果
您的浏览器不支持progress元素



// 修改默认样式

2.列表标签

标签	说明
	为input标定义一个下拉列表，配合option使用
	定义一个元素的详细信息，配合summary使用

(1)

 

（2）标签

    
标题描述区域
    
细节描述区域，可以对内容进行介绍。作为标题的一个可开关内容

 

四. 其他标签

1. 注释标签

| 标签 | 说明 |
| :---:｜:---: |
| | 定义注释或音标 |
| | 定义对ruby的注释内容文本 |
| | 不支持ruby元素的浏览器替换策略 |

    魑chi
    魅mei
    魍wang
    魉liang

2. 文本标记标签

标签	说明
mark	标记部分内容，显示黄色背景

你是猴子派来的救兵吗？

3. 输出标签

标签	说明
output	定义一类输出类型，计算表单结果，配合oninput使用

0
   100
   +
   =

 


    *
     = 
    

output输出结果

 

# 删除的标签

• 纯表现的元素：Basefont、big、center、font、s、strike、tt、u
• 对可用性产生负面影响的元素：frame、frameset、noframes（真要使用框架的话，请使用iframe）
• 产生混淆的元素：acronym、applet、isindex、dir
   

# 重新定义的标签

标签	说明
	内联文本，粗体
	内联文本，斜体
	表示主题结束，显示一条水平线
	表示用户界面菜单
	小字体，例如打印注释或者法律条款
	强调重要性