HTML5

来源：互联网发布：新浪微博安全域名编辑：程序博客网时间：2024/05/03 04:59

显示视频
<vedio src="视频源地址" contros="contros"></vedio>controls属性供添加播放.暂停.音量的控件,video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式：<vedio><source src="movie.ogg" type="vedio/ogg"><source src="movie.mp4" type="vedio/mp4">如果视频不能显示将显示这几个字</vedio>
音频播放
<audio src="音频源地址" controls="controls"></audio>同样的,audio元素允许多个source元素,source元素可以链接多个音频,浏览器识别第一个可用的音频.
拖放

<!DOCTYPE HTML><html><head><script type="text/javascript">function allowDrop(ev){ev.preventDefault();}function drag(ev){ev.dataTransfer.setData("Text",ev.target.id);}function drop(ev){ev.preventDefault();var data=ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data));}</script></head><body><div id="div1" ondrop="drop(event)"ondragover="allowDrop(event)"></div><img id="drag1" src="img_logo.gif" draggable="true"ondragstart="drag(event)" width="336" height="69" /></body></html>转自w3shcool

draggable=”true”,允许拖动
ondragstart=”drag(event)”,拖动的数据类型text,和数据的值
ondrop=”drop(event)”,执行放置动作
ondragover=”allowDrop(event)”,拖动到此处,阻止默认情况,允许放置

4.新input类型,html5中input标签多了一些类型:

email:提交表单时自动验证email域的值
url:提交表单时自动验证url域的值
number:包含数字的输入域,可设置属性,max,min,step(间隔),value(默认值)
range:一定范围内的数字域的输入,range为滑动条,同样拥有number的属性
date/month/week….:日期选择器,输入时间
search:搜索域,用于搜索,显示为常规的文本域

5.新表单元素,html5新增了几个表单元素:datalist,keygen,output
datalist:

<!DOCTYPE HTML><html><body><form action="/example/html5/demo_form.asp" method="get">Webpage: <input type="url" list="url_list" name="link" /><datalist id="url_list">    <option label="W3School" value="http://www.w3school.com.cn" />    <option label="Google" value="http://www.google.com" />    <option label="Microsoft" value="http://www.microsoft.com" /></datalist><input type="submit" /></form></body></html>

datalist的id的值一定要为input中list的值,option中value的值一定不能缺,类似于百度搜索记录的提示一样,单击input文本框时,会给出3个option中的value值供选择.

keygen(key-pair generator密钥对生成器),生成一个私钥和一个公钥,私钥用于客户端存储,公钥发送到服务端,由于各浏览器的支持不够好,目前这个元素安全性有待考究

output,顾名思义,用于不同类型的输出,比如计算机或脚本输出

<!DOCTYPE HTML><html><head><script type="text/javascript">function resCalc(){numA=document.getElementById("num_a").value;numB=document.getElementById("num_b").value;document.getElementById("result").value=Number(numA)+Number(numB);}</script></head><body><p>使用 output 元素的简易计算器：</p><form onsubmit="return false"> <input id="num_a" /> + <input id="num_b" /> = <output id="result" onforminput="resCalc()"></output></form></body></html>

6.form表单属性:

novalidate 属性

novalidate 属性规定在提交表单时不应该验证 form 或 input 域。

注释：novalidate 属性适用于以及以下类型的标签：text, search, url, telephone, email, password, date pickers, range 以及 color.

placeholder 属性

placeholder 属性提供一种提示（hint），描述输入域所期待的值。

注释：placeholder 属性适用于以下类型的标签：text, search, url, telephone, email 以及 password。

提示（hint）会在输入域为空时显示出现，会在输入域获得焦点时消失

required 属性

required 属性规定必须在提交之前填写输入域（不能为空）。

注释：required 属性适用于以下类型的标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file

pattern 属性

pattern 属性规定用于验证 input 域的模式（pattern）。

模式（pattern）是正则表达式。您可以在我们的 JavaScript 教程中学习到有关正则表达式的内容。

注释：pattern 属性适用于以下类型的<input> 标签：text, search, url, telephone, email 以及 password

0 0