菜鸟教程学习——HTML5 video，audio,input(各种新元素)，output,datalist

<video> 元素支持三种视频格式： MP4, WebM, 和 Ogg:即

MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

但是Hbuilder中有这八个选项：

网站示例：

可以暂停，放大。

同时可以添加这几个方法对视频进行操作：

<script> 
var myVideo=document.getElementById("video1"); 

function playPause()
{if (myVideo.paused) myVideo.play(); 
 else myVideo.pause(); }
 
function makeBig()
{ myVideo.width=560; } 

function makeSmall()
{ myVideo.width=320; } 

function makeNormal()
{ myVideo.width=420; } 
</script>

Audio属性同上。

接下来是input：color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week

<body>

<form action="">
    选择你喜欢的颜色: <input type="color" name="favcolor">
  <input type="submit"><br /><!--选择颜色-->
    生日: <input type="date" name="bday">
  <input type="submit"><br /><!--get年月日-->
    生日 (日期和时间): <input type="datetime" name="bdaytime">
  <input type="submit"><br /><!--没效果IE-->
   生日 (日期和时间): <input type="datetime-local" name="bdaytime">
  <input type="submit"><br /><!--get年月日和时间-->
  E-mail: <input type="email" name="usremail">
  <input type="submit"><br /><!--检查邮件格式是否正确-->
    生日 ( 月和年 ): <input type="month" name="bdaymonth">
  <input type="submit"><br /><!--get某年某月-->
    数量 ( 1 到 5 之间): <input type="number" name="quantity" min="1" max="5">
  <input type="submit"><br /><!--get某一范围内的数字-->
  <input type="number" name="points" min="0" max="10" step="3" value="6">
  <input type="submit"><br /><!--某一范围内，以step为3，每次进三的值，初始值为6value-->
 Points: <input type="range" name="points" min="1" max="10">
<input type="submit"><br /><!--某一数字范围内，的滑块-->
   Search Google: <input type="search" name="googlesearch">
  <input type="submit"><br><!--搜索框，没用IE-->
    电话号码: <input type="tel" name="usrtel">
  <input type="submit"><br>
   选择时间: <input type="time" name="usr_time">
  <input type="submit"><br /><!--get时间，几点几分-->
    添加你的主页: <input type="url" name="homepage">
  <input type="submit"><br><!--检测url是否格式正确-->
    选择周: <input type="week" name="year_week">
  <input type="submit"><!--get某年的第几个周-->
   
</form>

效果图展示：

扫描二维码关注公众号，回复： 5939964 查看本文章

对数字类型的限定：

属性	描述
disabled	规定输入字段是禁用的
max	规定允许的最大值
maxlength	规定输入字段的最大字符长度
min	规定允许的最小值
pattern	规定用于验证输入字段的模式
readonly	规定输入字段的值无法修改
required	规定输入字段的值是必需的
size	规定输入字段中的可见字符数
step	规定输入字段的合法数字间隔
value	规定输入字段的默认值

output：

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

datalist:

<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

菜鸟教程学习——HTML5 video，audio,input(各种新元素)，output,datalist

猜你喜欢