# 前言
H5 的雏形形成于 2004 年, 在 2008 年发布正式版, 并于 2014 年定稿. 目前支持 IE9 + 及绝大多数市场浏览器. 同时, 它是唯一一个支持 PC,Mac,iPhone,Android 等主流平台的 跨平台语言. 用 H5 开发的移动软件对比于原生 App 应用得名 "webAPP". 各自优缺参半. 对比一下
# <!DOCTYPE > 改变
- <!DOCTYPE>
- 必须是在 html 文档的第一行, 它不是 HTML 标签, 而是指示 Web 浏览器对页面使用哪个 HTML 版本进行指令的编写 // html4.01
- 框架版 doctype
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
- // html4.01 严格版 doctype
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//en" "http://www.w3.org/TR/html4/strict.dtd">
- // HTML 5 版本不需要 DTD
- <!DOCTYPE HTML>
- # 新增功能
新增离线存储, 更丰富的表单, JS 线程, socket, 标准扩展 embed,CSS3, 流媒体多媒体引擎 (Audio,Video,Canvas,webgl 等)
# 新增标签
一. 结构标签
H5 之前, 有意义的结构标签就是 div,H5 扩展了以下标签.
标签 | 说明 |
---|---|
<article> | 标记一篇文章 |
<header> | 一个区域的头部 |
<nav> | 一个导航链接 |
<section> | 一块区域 |
<aside> | 页面的内容部分的侧边栏,如菜单栏 |
<hgroup> | 定义 section 中的相关信息 |
<figure> | 定义一组包裹多媒体内容以及他们的标题 |
<figcaption> | figure 元素的标题 |
<footer> | 标记一个区域的底部 |
<dialog> | 定义一个对话框(会话框)类似微信 |
[注意事项]
不要滥用结构标签
<header> <section> <aside> <article> <footer > 这些标签不要嵌套自身
标签使用级别:
<header> <section> <footer>
优于
<aside> <article> <figure> <hgroup> <anv>
优于 <div> <figcaption>
二. 多媒体标签
标签 | 说明 |
---|---|
<video> | 定义一个视频 |
<audio> | 定义音频内容 |
<source> | 替代 audio 中 src 属性定义媒体资源 |
<canvas> | 一个画布 API,绘制酷炫的效果 |
embed | 定义外部的可交互的内容或插件如 flash |
(1) 音频 < audio > 标签
<audio src="./audio/demo.mp3" autoplay="autoplay" loop="-1" contrils="controls="controls">
当前浏览器暂不支持, 建议您更换浏览器
</audio>
属性 | 值 | 说明 |
---|---|---|
autoplay | autoplay | 出现即生效,打开自动播放 |
controls | controls | 出现即生效,显示控制控件,如播放暂停 |
loop | loop/-1 | 是否循环播放 |
muted | muted | 是否静音播放 |
preload | preload | 页面载入时执行预加载。优先级低于 autoplay |
src | url | 资源位置 |
[说明]
支持 3 中音频格式: ogg,MP3,WAV
浏览器不支持 audio 时显示标签内部文字
可以使用 < source > 标签解决浏览器格式兼容问题
- <audio autoplay="autoplay" loop="loop" controls="controls">
- <source src="./audio/demo.mp3" type="audio/mpeg">
- <source src="./audio/demo.ogg" type="audio/ogg">
- <source src="./audio/demo.wav" type="audio/wav">
建议您更换浏览器
</audio>
(2) 视频 < video > 标签
<video src="./video/demo1.mp4" autoplay="autoplay" controls="control">
当前浏览器不支持 HTML5 标签
</video>
标签 | 说明 |
---|---|
autoplay | 自动播放 |
controls | 控制台,资源使用 & lt;source> 标签引入则控制台在视频口外 |
loop | 播放次数。loop 或 - 1 表示无限循环 |
src | 资源路径,若使用了 & lt;source>,则该属性失效 |
width | 视频播放器宽度 |
height | 视频播放器高度 |
[说明]
支持格式 MP4,WebM,Ogg
可以使用 < sourc > 标签解决浏览器格式兼容问题, 用法同 < audio>
3. <embed > 标签
用于在网页上插入 flash
<embed src="./falsh/demo1/swf" width="400" height="300"></embed>
三. Web 应用标签
1. 状态标签
标签 | 说明 |
---|---|
<meter> | 显示状态:气压,气温 |
<progress> | 显示任务过程:安装,加载 |
(1)<meter > 标签
<meter value="70" min="0" max="100" low="60" high="80" optimum="75">
meter 标签的 max,min 属性定义在最两边, low 和 high 定义在中间. 隔开三个区域. 最终表现为三种色彩. optimum 所在的区域显示绿色, 相邻区域显示换色, 相隔区域显示红色.
(2)<progress > 标签
可以使用在图片文件上传下载时, 表现出一种 loading 的状态效果
如果没有设置 max, 则 value 值应该在 0-1 之间. 如果没有 value 值, 进度是不确定的, 表示任务正在进行中, 滚动条会来回滑动 (Chrome), 可以用作 loading 效果
- // 只写 max 属性, 会有加载的效果
- <progress value="0" max="100"> 您的浏览器不支持 progress 元素 </progress>
- <input type="button" value="开始" onclick="goprogress()"/>
- <script>
- function goprogress(){
- var pro=document.getElementsByTagName("progress")[0];
- gotoend(pro,0);
- }
- function gotoend(pro,value){
- var value=value+1;
- pro.value=value;
- if(value<100) {
- setTimeout(function(){gotoend(pro, value);},20)
- }else{
- setTimeout(function(){alert("任务完成")},20);
- }
- }
- </script>
- // 修改默认样式
- <style>
- progress {
- background:orange;
- border:1px solid red;
- border:2px solid #000;
- width:300px;
- height:50px;
- -webkit-appearance: none;
- }
- ::-webkit-progress-bar{
- background:orange;
- }
- </style>
2. 列表标签
标签 | 说明 |
---|---|
<datalist> | 为 input 标定义一个下拉列表,配合 option 使用 |
<details> | 定义一个元素的详细信息,配合 summary 使用 |
(1) <datalist > 标签
- <datalist > 原生的样式已经比较好看, 可以替代 select 使用, 且拥有 select 没有的效果
- <input placeholder="请选择学习的语言" list="langage"/>
- <datalist id="langage">
- <option value="c++">c++</option>
- <option value="c#">c#</option>
- <option value="java">java</option>
- <option value="javascript">JavaScript</option>
- </datalist>
(2)<detail > 标签
- <details open="open">
- <summary > 标题描述区域 </summary>
- <p > 细节描述区域, 可以对内容进行介绍. 作为标题的一个可开关内容 </p>
- </details>
四. 其他标签
1. 注释标签
| 标签 | 说明 |
| :---:|:---: |
| <Ruby> | 定义注释或音标 |
| <rt> | 定义对 Ruby 的注释内容文本 |
| <rp> | 不支持 Ruby 元素的浏览器替换策略 |
- <p>
- <Ruby > 魑 < rt>chi</rt></Ruby>
- <Ruby > 魅 < rt>mei</rt></Ruby>
- <Ruby > 魍 < rt>wang</rt></Ruby>
- <Ruby > 魉 < rt>liang</rt></Ruby>
- </p>
2. 文本标记标签
标签 | 说明 |
---|---|
mark | 标记部分内容,显示黄色背景 |
<p > 你是猴子派来的 < mark > 救兵 </mark > 吗?</p>
3. 输出标签
标签 | 说明 |
---|---|
output | 定义一类输出类型,计算表单结果,配合 oninput 使用 |
- <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
- <input type="range" id="a" value="50">100
- +<input type="number" id="b" value="50">
- =<output name="x" for="a b"></output>
- </form>
- <form oninput="totalPrice.value = parseInt(price.value) * parseInt(number.value)">
- <input type="text" id="price" value="5000">*
- <input type="text" id="number" value="1"> =
- <output name="totalPrice" for="price number"></output>
- </form>
output 输出结果
# 删除的标签
纯表现的元素: Basefont,big,center,font,s,strike,tt,u
对可用性产生负面影响的元素: frame,frameset,noframes(真要使用框架的话, 请使用 iframe)
产生混淆的元素: acronym,applet,isindex,dir
# 重新定义的标签
标签 | 说明 |
---|---|
<b> | 内联文本,粗体 |
<i> | 内联文本,斜体 |
<hr> | 表示主题结束,显示一条水平线 |
<menu> | 表示用户界面菜单 |
<small> | 小字体,例如打印注释或者法律条款 |
<strong> | 强调重要性 |
来源: http://www.jianshu.com/p/36dddfad4606