本文详细介绍了HTML5新增的各种元素及属性，包括语义化的标签、表单元素、媒体播放等，旨在帮助开发者更好地理解并运用这些新特性。
语义化
【推出的理由及其目标】
浏览器兼容性很低
文档结构不够明确
web应用程序的功能收到了限制
【语法的改变】
doctype类型----<!DOCTYPE html> 简化了
指定字符编码的改变-----<meta chartset="UTF-8">
可以省略标记的元素
具有boolean值的属性----不指定值为true，空为true，省略为true，不写为false【checked，checked="checked",checked=""】为true，不写为false
省略引号---checked=checked
【新增的元素】
【article元素】
强调内容，强调独立性，相对独立完整
【section元素】
不要设置样式的容器，如果article,nav,aside更符合请不要使用section，不要对没有标题的内容区域块使用section
【nav元素】
传统导航条，侧边栏导航条，页内导航，翻页操作
nav-ul-li
【aside元素】
页面文章附属引用部分
【time和pubdate】
***************【新增加非主体结构元素】***************
【header元素】
块中标题
<header><h1><nav><ul><li>
【footer和hgroup】
页面中footer，article中的footer，使用类似header
hgroup将标题和子标题进行分组
hgroup-h1-h2 h2是h1的子标题的时候二者用hgroup包裹起来
【address】
呈现文档中呈现联系信息，包括文档作者文档维护者的名字，他们的网站链接，电子邮箱，地址，电话等等
【文档结构】
大纲编排规则，h1-h6，块用section
***************【新增表单元素与属性】***************
【fom属性和formaction属性】
form="formid"
formaction 单击不同的按钮提交到不同的action
<input type='submit' formction='xxx.action'>
<input type='submit' formction='yyy.action'>【formmethod属性和formenctype属性】
<input type='submit' formction='xxx.action' formmethod='post'>
<input type='submit' formction='yyy.action' formmethod='get'>formenctype指定不同的编码方式
<input type='submit' formction='xxx.action' formmethod='post' formenctype='test/plain'>
<input type='submit' formction='yyy.action' formmethod='get' formenctype='mulitpart/form-data'>
<input type='submit' formction='yyy.action' formmethod='get' formenctype='application/x-www-form-urlencoded'>【formtarget属性和autofocus属性】
每个submit对应打开方式
_blank,_self,_parent,_top,framename
autofocus自动获取焦点
<input type="text" autofocus>【required属性和labels属性】
<input type="text" required>labels块
【标签的control属性和placeholder属性】
标签内部放置一个表单元素，可以通过该标签的control属性来反问该表单元素
var labels=$("#label");
var textbox=labels.control;
textbox.value="123123123";
placeholder属性，默认显示值，模糊显示值，光标获取焦点消失
【list属性和AutoComplete】
<input name="xxxx" list="greeting">
<datalist id="greeting">
<option value="1111">1111</option>
<option value="2222">2222</option>
</datalist>autocomplete属性，帮助输入所用的自动完成功能
<input name="xxxx" list="greeting" autocomplete="on/off">
<datalist id="greeting">
<option value="1111">1111</option>
<option value="2222">2222</option>
</datalist>【pattern属性和SelectionDirection】
pattern满足正则表达式，校验功能，
SelectionDirection（crome不支持），获取用户正向反向选取表单的值
【indeterminate属性】
复选框不明确的选中状态
<input type="checkbox" indeterminate id="idc">【image】
<input type="image" src="xx.png" width="50" height="50">【改良的input元素种类】
【url,email,date,time,datetime.datetime-local,month,week,number,range,search,Tel,color】
type="xxx"
<input type="number" id="num1" min="10" max="100" step="10"><input type="number" id="num1">
+
<input type="number" id="num2">
=
<input type="number" id="result" readonly>
<input type="button" id="计算" onclick="sum()">function sum(){
var n1=document.getElementById("num1").valueAsNumber;
var n2=document.getElementById("num2").valueAsNumber;
document.getElementById("result").valueAsNumber=n1+n2;
}取数字要用 valueAsNumber
range指定范围
<input name="range" type="range" value="25" min="0" max="100" step="5">search搜索
color颜色选取器
<input type="color" onchange="document.body.style.backgroundColor=document.getElementById('currentColor').textContent=this.value">
<span id="currentColor"></span>output元素的追加(配合range使用)
<input id="range" type="range" min="0" max="100" step="5" value="10" onchange="value_change()">
<ountput id="output">10</output>function value_change(){
var number=document.getElementById("range").value;
document.getElementById("output").value=number;
}【表单验证】
<form id="testform" onsubmit="" novalidate="true">
<label for="">Email</label>
<input nme="email" type="email" id="email"><br/>
<input type="submit">
</form>function check(){
var eamil=document.getElementById("email");
if(email.value==""){
alert("请输入邮箱地址")
}else if(!email.checkValidity()){
alert("请输入正确的邮箱地址")
}
}【HTML5增强的页面元素】
新增的figure元素和figcaption元素
figure-里面放视频图片，音频视频插件，统计表格，代码示例
figure内部只能放置一个figcaption元素，用来描述
<figure>
<img>
<img>
<img>
<figcaption>
</figure>新增的details元素和summary元素
details表示内容可以展开，true为展开false为合并
summary从属于details用来点击展开details元素，如果没有summary元素会指定默认文字用来单机展开
<details>
<summary id="detail" onclick="detailclick(this)">
<p id="p" style="visibility:hidden">啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
</details>function detailclick(detail){
var p=$("#p");
if(detail.open){
p.style.visibility="hidden";
}else{
p.style.visibility="visible";
}
}新增的mark元素
mark高亮的效果
新增的progress元素
代表任务完成进度
<section>
<h2>
<p>完成百分比<progress id="p" style="background0color:@269abc" max=100><span>0</span>%</progress></p>
<input type="button" onclick="" value="单击">
</h2>
</section>function btn(){
// for(var i=0;i<=100;i++){
// setTimeout(function(){
// updateprogress(i);
// },2000)
// }
//for循环里有延时的话是先走完for循环，再一步一步走延时
var i=0 ；
function threadone(){
if(i<=100){
i++;
updateprogress(i);
}
}
setInterval(threadon,100);
}
function updateprogress(newValue){
var progressBar=$("#p");
progressBar.value=newValue;
progressBar.getElementByTagName("span")[0].testContent=newValue;
}新增的meter元素
进度，百分比等等
<meter value="40" min="0" max="100" low="10" height="90" optimum="80"></meter>改良的ol列表
<ol start="5" reversed>
<li></li>
</ol>改良的dl列表
多个名字的列表项，每一项都带有名字的dt用来表示术语，dt后面紧跟一个或者多个dd,不允许有相同名字的dt元素不允许有相同名字的术语
<dl>
<dt>hello</dt>
<dd>你好</dd>
<dt>aaa</dt>
<dd>aaaa</dd>
</dl>加以严格限制的cite元素和重新定义的small元素
cite标题
<p>我最喜欢的电影是<cite>啦啦啦</cite></p>small小字引述体，版权信息等等
【range对象】
表示页面上一段连续区域，通过range对象可以获取或者修改网页上任何区域
火狐能够选取多段
<inpt type="button" value="点击我" onclick="rangetest() ">
<div id="showrange"><div>function rangetest(){
var html;
showrangediv=$("#showrange");
selection=document.getSelection();
if(selection.rangeCount>0){
html="您选取了"+selection.rangeCount+"内容<br/>" ;
for(var i=0;i<selection.rangeCount;i++){
var range=selection.getRangeAt(i);
html=html+"第"+(i+1)+"段内容，内容为："+range+"<br/>";
}
showrangediv.innerHTML=html;
}
}selectNode,selectNodeContents,deleteContents
selectNode----选取的是当前选取内容对应的标签
selectNodeContents-----选取的内容
deleteContents----删除内容或者删除标签
<div>元素汇总的内容元素汇总的内容元素汇总的内容</div>var div=$("#div");
var rangeObj=document.createRange();
rangeObj.selectNodeContents(div);
rangeObj.selectNode(div);
rangeObj.deleteContents();setStartsetEnd setStart setEnd setStartBefore setStartAfter setEndBefore setEndAfter
【音频视频】
音频播放
Audio提供播放音频文件标准
control添加播放暂停音量控制
audio定义声音
source规定多媒体资源可以是多个
<audio id="audio">
var a=$("#audio");
function c(a.p){
if(a.paused){
a.paly();
}else{
a.pause();
}
}编解码工具
视频播放
<video id="video" controls="controls">
<source src="xx.mp4">
</video>
var a=$("#video");
//播放暂停
function c(a.p){
if(a.paused){
a.paly();
}else{
a.pause();
}
}【HTML5拖放】
ondrag
ondrop
【canvas标签】
【canvas使用路径】
【渐变图形与变形图形】
【canvas图形绘制处理】
【canvas应用】
【SVG】
-
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
-
SVG 用于定义用于网络的基于矢量的图形
-
SVG 使用 XML 格式定义图形
-
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
-
SVG 是万维网联盟的标准
未完待续
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
