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扩展了以下标签。
 
  【注意事项】

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

  优于

二. 多媒体标签

(1) 音频标签

             //autoplay="autoplay"代表自动播放  下面有图片讲解

【说明】

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

<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 src="./video/demo1.mp4" autoplay="autoplay" controls="control">
  当前浏览器不支持HTML5标签
video>

【说明】

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

3. 标签

用于在网页上插入flash动画

<embed src="./falsh/demo1/swf" width="400" height="300">embed>

三. web应用标签

1. 状态标

下面的progress是进度条的意思

（1）标签

<meter value="70" min="0" max="100" low="60" high="80" optimum="75">

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

讲解： 如下图所示，当optimumhigh时，high到max之间的区域就是绿色

（2）标签
  可以使用在图片文件上传下载时，表现出一种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()是一个定时函数
            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.列表标签

(1) 标签
  原生的样式已经比较好看，可以替代select使用，且拥有select没有的效果

<input placeholder="请选择学习的语言" list="langage"/>
<datalist id="langage">
    <option value="c++">c++option>
    <option value="c#">c#option>
    <option value="java">javaoption>
    <option value="javascript">javascriptoption>
datalist>

（2）标签

<details open="open">
    <summary>标题描述区域summary>
    <p>细节描述区域，可以对内容进行介绍。作为标题的一个可开关内容p>
details>

四. 其他标签

1. 注释标签

定义注释或音标 , 定义对ruby的注释内容文本, 不支持ruby元素的浏览器替换策略

效果如下图所示：

<p>
    <ruby>魑<rt>chirt>ruby>
    <ruby>魅<rt>meirt>ruby>
    <ruby>魍<rt>wangrt>ruby>
    <ruby>魉<rt>liangrt>ruby>
p>

2. 文本标记标签

<p>你是猴子派来的<mark>救兵mark>吗？p>

3. 输出标签

<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>

重新定义的标签

本文转载自：https://www.jianshu.com/p/36dddfad4606