当前位置: 首页 > 互联网 > 正文

《HTML5揭秘》笔记一

控件输入提示符: placeholder

自定义验证属性:oninput,属性值是验证该控件的javascript方法。比如:

[code lang=”html”]
<textarea id = "comments" oninput="validateComments(this)"></textarea>
[/code]

[code lang=”javascript”]
function validateComments(input) {
if(input.value.length<=0){
input.setCustomValidity("请填写此字段");
} else {
input.setCustomValidity("");
}
}
[/code]

控件验证提示方法:input.setCustomValidity(“…”);

表单输入控件必填与选填属性:required, optional。

输入控件的正则表达式验证属性:pattern。比如:关于邮政编码的正则表达式:

[code lang=”html”]
<input type="text" name="postcode" id="postcode" pattern="[0-9]{6}" placeholder="000000" />
[/code]

如果浏览器不支持Html5验证,这就需要通过自写javascript方法来完成表单的验证。Modernizr函数库可用于浏览器的HTML5及CSS3的支持验证。

指定特定类型的input控件属性,如:email,url,search,Tel,number,range,date,color等等,有利于各浏览器进行控件的输入适配,如ios/android的弹出的虚拟键盘,chrome的日期控件等等。

[code lang=”html”]
<label for="range">年龄</label>
<input type="number" name="age" id="age" min=18 max=100 />
[/code]

用datalist表示输入建议,也表示可以自由输入。比如:

[code lang=”html”]
<label for="favoriteAnimal">你最喜欢的动物</label>
<input id="favoriteAnimal" list="animalChioces" />
<datalist id="animalChioces">
<option value="zebra">Zebra</option>
<option value="cat">Cat</option>
<option value="elephant">Elephant</option>
<option value="pigeon">Pigeon</option>
<option value="panda">Panda</option>
</datalist>
[/code]

其它Html5控件:progress(进度条),meter(计量器)。

[code lang=”html”]
<progress value="0.25"></progress> <br />
<progress>Task in progress …</progress>

Your suitcase weighs:<meter min="5" max="70" value="98">98 pounds</meter>
[/code]

网页控件的两个奇怪属性:contentEditable与designMode。

[code lang=”html”]
<div id = "editableElement" contentEditable>You can edit this text!</div>
[/code]

音频audio控件:

[code lang=”html”]
<audio src="langlaile.mp3" controls></audio>
[/code]

属性controls:告诉浏览器要包含基本的播放控件。

属性preload:告诉浏览器如何下载音频。值auto就是让浏览器下载整个文件。值metadata告诉浏览器先获取音频文件开头的数据块,从而足以确定一些基本信息。值none告诉浏览器不必预先加载。

属性autoplay:告诉浏览器在加载完音频之后立即播放。

属性loop:告诉浏览器在音频到达末尾时,再从头开始重新播放。

视频video控件:

[code lang=”html”]
<video src="shipin.mp4" controls></video>
[/code]

除了与audio共有上述属性外,video还有height,width,poster属性。

属性poster:用于设置替换视频的图片。浏览器在三种情况下会使用这个图片:(1)视频第一帧未加载完毕;(2)把preload属性设置为none;(3)没有找到指定的视频文件。

多浏览器的html5音频或视频支持,就需要多种解码方式的文件组成类似一个source列表,如:

[code lang=”html”]
<audio controls>
<source src="langlaile.mp3" type="audio/mp3">
<source src="langlaile.ogg" type="audio/ogg">
</audio>

<video controls>
<source src="langlaile.mp4" type="video/mp4">
<source src="langlaile.ogv" type="video/ogg">
</video>
[/code]

本文固定链接: http://www.byhard.com/?p=1343 | 海纳百川

该日志由 byhard 于2015年04月13日发表在 互联网 分类下,
原创文章转载请注明: 《HTML5揭秘》笔记一 | 海纳百川
关键字: ,

报歉!评论已关闭.