H5 之「标签大全」

2019-05-19 本文已影响4人果汁凉茶丶

# 前言

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	控制台，资源使用<source>标签引入则控制台在视频口外
loop	播放次数。loop或-1表示无限循环
src	资源路径，若使用了<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>	强调重要性