HTML5 新增标签（二）

1.新增标签

progress

显示数据的进度

属性   value     当前值

        max       最大值

        0（默认）最小值

例子：

10:00开始<progress value="22" max="100"></progress>12;00结束
 section

 定义文档中的节或定义文章（一般带标题）

例子：

<section>
    <h1>PRC</h1>
    <p>The People's Republic of China was born in 1949...</p>
</section>
 video

 定义视频。

属性  src 引入资源

        controls    视频控制控件

<source>定义多媒体资源

可在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息

例子：

<video src="res/01_jQuery_基础.mp4" controls="controls">
    你的浏览器不支持
</video>

目前支持的视频类型，其他格式如avi需要转换

video/ogg

video/mp4

video/webm（webm也是一种媒体格式）

例子：

<input type="text" list="car"/>
<video controls="controls">
    <source src="res/01_jQuery_基础.ogg" type="video/ogg">
    <source src="res/01_jQuery_基础.mp4" type="video/mp4">
    你的浏览器不支持
</video>
 audio

 定义声音。

属性  src 引入资源

        controls    视频控制控件

<source>定义多媒体资源

目前支持的音频类型

audio/ogg

audio/mpeg

可在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息

例：

<audio controls="controls">
    <source src="res/MUSIC.ogg" type="audio/ogg">
    <source src="res/MUSIC.mp3" type="audio/mpeg">
    你的浏览器不支持 audio标签
</audio>
 datalist

 提示了可能的值。

datalist及其选项不会被显示出来，它仅仅是合法的输入值列表。

使用input元素的list属性来绑定datalist。

option在select下是两个option之间的值会被显示出来；

而在datalist中，最好写在value中，单独写在option中不会显示。

例：

<datalist id="car">
    <option value="宝马">宝马</option>
    <option value="奔驰">奔驰</option>
    <option value="丰田">丰田</option>
    <option value="大众1"></option>
    <option value="">大众2</option>
</datalist>
<select name="" id="">
    <option value="宝马">宝马</option>
    <option value="奔驰">奔驰</option>
    <option value="丰田">丰田</option>
    <option value="大众1"></option>
    <option value="">大众2</option>
</select>
 embed

 定义嵌入的内容，比如插件、flash、之间不要加内容，和video不同，会显示出来。

例：

<embed src="res/demo.svf" type="application/x-shockwave-flash"/>
 canvas

 只是容器，可通过控制坐标在canvas上绘制图像。

一般配合js使用能实现非常复杂的动画效果。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增标签</title>
</head>
<body>
    10:00开始<progress value="22" max="100"></progress>12;00结束
    <hr/>
    <section>
        <h1>PRC</h1>
        <p>The People's Republic of China was born in 1949...</p>
    </section>
    <hr/>
    <video controls="controls">
        <source src="res/01_jQuery_基础.ogg" type="video/ogg">
        <source src="res/01_jQuery_基础.mp4" type="video/mp4">
        你的浏览器不支持video标签
    </video>
    <hr/>
    <audio controls="controls">
        <source src="res/MUSIC.ogg" type="audio/ogg">
        <source src="res/MUSIC.mp3" type="audio/mpeg">
        你的浏览器不支持 audio标签
    </audio>
    <hr/>
    <input type="text" list="car"/>
    <datalist id="car">
        <option value="宝马">宝马</option>
        <option value="奔驰">奔驰</option>
        <option value="丰田">丰田</option>
        <option value="大众1"></option>
        <option value="">大众2</option>
    </datalist>
    <select name="" id="">
        <option value="宝马">宝马</option>
        <option value="奔驰">奔驰</option>
        <option value="丰田">丰田</option>
        <option value="大众1"></option>
        <option value="">大众2</option>
    </select>
    <hr/>
<!--    <embed src="res/demo.svf" type="application/x-shockwave-flash"/>-->
    <hr/>
    <canvas id="myCanvas">你的浏览器不支持canvas</canvas>
    <script type="text/javascript">
        var canvas=document.getElementById('myCanvas');
        var ctx=canvas.getContext('2d');
        ctx.fillStyle='#FF0000';
        ctx.fillRect(0,0,80,100);
    </script>
    <hr/>
</body>
</html>
新增标签

 

posted @ 2019-07-08 23:43  C_XingM  阅读(189)  评论(0)    收藏  举报