< section > < / section > 相当与是div
< article > < / article > 相当于是内容左侧
< aside > < / aside > 相当于是内容右侧
< header > < / header > 相当于是头部
< hgroup > < / hgroup > 相当于内容标题
< footer > < / footer > 相当于是底部
< nav > < / nav > 相当于是导航
< figure > 新增独立流内容单元(文档内的流内容单元)
< figcaption > 标题 < / figcaption >
< / figure >
视频标签
< video src = "movie.ogg" controls = "controls" > < / video >
音频标签
< audio src = "movie.wav" > < / audio >
多媒体格式标签
< embed src = "mbvie.wav" / >
用于文字高亮(如搜索结果)
< mark > < / mark >
显示进程(如显示js中耗费的时间)
< progress > < / progress >
日期或者时间
< time > < / time >
表示文本注释(中文注音或者字符)
< ruby > < / ruby >
< ruby > han < rt > < rp > (汗) < / rp > < / rt > < / ruby >
表示字符
< rt > < / rt >
< ruby > han < rt > < rp > (汗) < / rp > < / rt > < / ruby >
定义ruby元素不支持的浏览器显示的内容
< rp > < / rp >
< ruby > han < rt > < rp > (汗) < / rp > < / rt > < / ruby >
自动换行
< wbr >
图形标签
< canvas id = "mycanvas" width = "200" height = "200" > < / canvas >
单选复选按钮
< command onclick = "cut();" lable = "cut" / >
details细节信息标签
summary就是里面的第一个子元素
< details >
< summary > html5 < / summary >
内容
< / details >
数据列表(配合input使用,制作出输入值的下拉列表)
< datalist > < / datalist >
可选的数据列表(以树形列表形式显示)
< datagrid > < / datagrid >
生成密匙
< keygen / >
不同类型的输出(如脚本输出)
< output > < / output >
定义video与audio的媒介资源
< source / >
菜单列表
< menu > < / menu >
input的属性
email邮件类型
url网址类型
number数值类型
range一定范围内的数值
Date Pickers日期时间输入
date日月年
month月年
week周年
time时分
datetime时间日月年(uct时间)
datatime - local选取时间日月年(本地时间)
input新增属性
autofocus 在页面打开时为text,select,textarea与button自动获得焦点
placeholder
为text与textarea指定输入提示
form
为input,output,select,textarea,button,fieldset指定他们属于那个表单
required
自动在提交时候检测表单是否有值
novalidate
当input,button,form增加了这个元素的话,将不对表单验证值,直接提交
a标签新增属性
media
规定目标utl为什么类型(媒介类型),只能在有href存在才生效
hreflang与rel
为area保持与a元素,link元素的一致
sizes
为link指定icon元素的大小(配合rel使用)
target
为base保持以a标签一致
hidden使所有的标签元素都不显示
html5写时结构注意
< ! doctype html >
< html >
< head >
<!--自适应手机版屏幕代码-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">
< style type = "text/css" >
/*追加block申明, 兼容浏览器*/
article,aside,dialog,figure,footer,header,legend,nav,section{display : block}
/*增加搜索框圆角兼容*/
inpyt[type = 'search' ]{ - webkit - appearance : textfield;}
/*meter标签ie6,7,8的兼容*/
< ! -- [ if IE] >
< script type = "text/javascript" src = "http://HTML 5shiv.googlecode.com/svn/trunk/HTML 5.js" > < / script >
< ! [ endif ] -- >
< / style >
< script type = "text/javascript" >
//兼容浏览器
document.createElement( 'header' );
document.createElement( 'nav' );
document.createElement( 'article' );
document.createElement( 'footer' );
< / script >
< / head >
< body >
< header >
< p > < / p >
< nav > < / nav >
< / header >
< section >
< article >
< / article >
< aside >
< / aside >
< / section >
< footer >
< p > < / p >
< / footer >
< / body >
< / html >
表单新增属性
form可以指定id(这样页面有多个表单,id不同,input写在任何地方,只要注明id为那个form的提交就会是那个form)
formmenthod虽然form指定了method的传输方式,但是input声明了这个属性可以单独的指定其传输方式,
placeholder相当于input中的输入提示
autofocus表单自动获得光标焦点
search搜索表单
tel电话输入
url网址输入
email邮箱输入
number数值输入(有min与max属性)
range滑动条输入范围(有min与max属性)
color颜色选择输入
file文件上传(multiple多文件上传,可以指定MIME的类型给accept属性)
Date Pickers日期时间输入
date日月年
month月年
week周年
time时分
datetime时间日月年(uct时间)
datatime - local选取时间日月年(本地时间)
multiple对file表单增加多文件上传
例 :
< script language = javascript >
function ShowFileName()
{
var file;
//document.getElementById("file").files返回FileList文件列表对象
for ( var i = 0 ;i < document.getElementById( "file" ).files.length;i ++ )
{
//file对象为用户选择的单个文件
file = document.getElementById( "file" ).files[i];
//此处您可以针对FileList文件列表中每个文件进行多种处理，本例中只弹出文件名
alert(file.name);
}
}
< / script >
选择文件：
< input type = "file" id = "file" multiple size = "80" / >
< input type = "button" onclick = "ShowFileName();" value = "文件上传" / >
表单验证
required验证不许为空
pattern正则的表达式输入
checkValidity方法验证form,input,select,textarea的元素内容值验证
例 :
< script language = "javascript" >
function check()
{
var email = document.getElementById( "email" );
if (email.value == "" )
{
alert( "请输入Email地址" );
return false;
}
else if ( ! email.checkValidity())
alert( "请输入正确的Email地址" );
else
alert( "您输入的Email地址有效" );
}
< / script >
< form id = testform onsubmit = "return check();" >
< label for = email > Email < / label >
< input name = email id = email type = email / > < br / >
< input type = submit >
< / form >
novalidate让form表单忽略所有的验证,直接提交值
details点击展开或者缩放的方法
例 :
< details >
< summary > 点击我 < / summary >
< p > 我是隐藏显示的哦 < / p >
< / details >
mark页面字符高亮
例 :
< p > 我叫 < mark > html5 < / mark > ,新技术哦 < / p >
progress实时显示进度(用于如安装进度等)
value完成多少量
max总共多少量
例 :
< script >
var progressBar = document.getElementById( 'p' );
function button_onclick()
{
var progressBar = document.getElementById( 'p' );
progressBar.getElementsByTagName( 'span' )[ 0 ].textContent = "0" ;
for ( var i = 0 ;i < = 100 ;i ++ )
updateProgress(i);
}
function updateProgress(newValue)
{
var progressBar = document.getElementById( 'p' );
progressBar.value = newValue;
progressBar.getElementsByTagName( 'span' )[ 0 ].textContent = newValue;
}
< / script >
< section >
< h2 > progress元素的使用示例 < / h2 >
< p > 完成百分比 : < progress id = "p" max = 100 > < span > 0 < / span > % < / progress > < / p >
< input type = "button" onclick = "button_onclick()" value = "请点击" / >
< / section >
meter比例显示(用于如投票记录的显示)
value当前的量(默认 0 ,可以是小数点)
min最小值(默认 0 ,不能小于 0 )
max最大值(默认 1 )
low规定的值区间(min > low < max)
optimum最佳值
例 :
< meter value = "40" min = "0" max = "160" low = "" high = "90" optimum = "100" > gb < / meter >
ie6 / 7 / 8 的兼容
< ! -- [ if IE] >
< script type = "text/javascript" src = "http://HTML 5shiv.googlecode.com/svn/trunk/HTML 5.js" > < / script >
< ! [ endif ] -- >