HTML5——新增元素及属性HTML5阶段内容 HTML5新增元素、属性表单元素 CSS3高级特效以及CSS3动画 v

HTML5阶段内容

HTML5新增元素、属性

表单元素

CSS3高级特效以及CSS3动画

video、audio

canvas

本地存储、离线缓存

HTML5应用场景

酷炫网站制作

游戏开发

移动开发

应用开发

什么是HTML5

HTML5是用于取代HTML和XHTML的标准版本

新特性

新的语义化标签，比如 header、footer、nav

新的表单控件，比如 email、url、search

用于绘画的 canvas 元素

用于媒介回放的 video 和 audio 元素

HTML5新增结构元素


header	页面或页面中某一个区块的页眉，通常是一些引导和导航信息
nav	可以作为页面导航的链接组
section	页面中的一个内容区块，通常由内容及其标题组成
article	代表一个独立的、完整的相关内容块，可独立于页面其它内容使用
aside	非正文的内容，与页面的主要内容是分开的，被删除而不会影响到网页的内容
footer	页面或页面中某一个区块的脚注

分析页面布局

HTML5新增网页元素


video	定义视频，如电影片段或其他视频流
audio	定义音频，如音乐或其他音频流
canvas	定义图形
datalist	定义可选数据的列表
time	标签定义日期或时间
mark	在视觉上向用户呈现那些需要突出的文字

HTML5废除的元素

能用css替代的元素：big、center、font、strike等

不再使用frame框架

只有部分浏览器支持的元素：applet、bgsound、marquee等

其他被废除的元素：rb、dir、isindex、listing、nextid等

HTML5新增全局属性

属性	说明
contentEditable	规定是否允许用户编辑内容
designMode	规定整个页面是否可编辑
hidden	规定对元素进行隐藏
spellcheck	规定是否必须对元素进行拼写或语法检查
time	标签定义日期或时间
tabindex	规定元素的tab键迭制次序

HTML5废除的属性

table部分属性：bgcolor、border、cellpadding、width等

html的version属性

a元素或者link元素的charset属性

br的clear属性、img的align属性

CSS3高级选择器

选择器	描述
first-of-type	p:first-of-type选择属性其父元素的首个元素的每个元素
last-of-type	p:last-of-type选择属性其父元素的最后元素的每个元素
only-of-type	p:only-of-type 选择属于其父元素唯一的元素的每个元素
first-child	p:first-child选择属性其父元素第一个子元素的每个元素
last-child	p:last-child选择属性其父元素最后一个子元素的每个元素
nth-child(n)	p:nth-child(n)选择属性其父元素的第n个子元素的每个元素
:before	p:before在每个元素的内容之前插入内容
:after	p:after在每个元素的内容之后插入内容

优先级算法

优先级就近原则，同权重情况下样式定义最近者为准

载入样式以最后载入的定位为准

!important > id > class > tag

!important 比内联优先级高，但内联比 id 要高

HTML5表单的应用场景

HTML5新增input类型

类型	说明
email	电子邮件地址文本框，提交表单时会自动验证email的值
url	网页的URL，提交表单时会自动验证url的值
color	主要用于选取颜色
search	用于搜索引擎（搜索框）
number	只包含数值的字段，能够设定对所接受的数字的限定
range	滑动条，特定值范围内的数值选择器
Date pickers	拥有多个可供选取日期的新输入类型

HTML5新增input类型—number

<input type="number" name= "num" min="3" max="20" step="3" value="3"/>

属性	值	说明
max	number	规定允许的最大值
min	number	规定允许的最小值
step	number	规定合法的数字间隔
value	number	规定的默认值

HTML5新增input类型—range

<input type="range" name= "point" min="2" max="15" step="1" value="3"/>

属性	值	说明
max	number	规定允许的最大值
min	number	规定允许的最小值
step	number	规定合法的数字间隔
value	number	规定的默认值

HTML5新增input类型—Date pickers

类型	说明
date	选择日、月、年
month	选择月、年
week	选择周和年
time	选择时间（小时和分钟）
datetime	选择时间、日、月、年（UTC时间）
datetime-local	选择时间、日、月、年（本地时间）

HTML5新增表单元素

元素	说明
datalist	标签定义选项列表。与 input 元素配合使用该元素，来定义 input 可能的值
keygen	规定用于表单的密钥对生成器字段
output	标签定义不同类型的输出，比如脚本的输出

HTML5新增form属性

属性	说明
autocomplete	规定form或input域应该拥有自动完成功能
novalidate	规定在提交表单时不应该验证form或input域

HTML5新增input属性

属性	说明
autofocus	页面加载时自动获得焦点
required	规定输入域不能为空
placeholder	提供一种提示，描述输入域所期待的值
pattern	规定验证input域的模式（正则表达式）
height、width	仅适用于image类型的input标签的图像高度和宽度

HTML5——新增元素及属性