1. 新的文档声明
<!doctype html>
2. 新增的HTML5标签
结构标签:(块状元素)有意义的div
<article> 标记定义一篇文章
<header> 标记定义一个页面或一个区域的头部
<nav> 标记定义导航链接
<section> 标记定义一个区域
<aside> 标记定义页面内容部分的侧边栏
<hgroup> 标记定义文件中一个区块的相关信息
<figure> 标记定义一组媒体内容以及它们的标题
<figcaption> 标签定义 figure 元素的标题。
<footer> 标记定义一个页面或一个区域的底部
<dialog> 标记定义一个对话框(会话框)类似微信
新的结构标签带来的是网页布局的改变及提升对搜索引擎的友好
多媒体交互标签
<video> 标记定义一个视频
<audio> 标记定义音频内容
<source>标记定义媒体资源
<canvas> 标记定义图片
<embed> 标记定义外部的可交互的内容或插件 比如flash
HTML5的多媒体标签的出现意味着富媒体的发展以及支持不使用插件的情况下即可操作媒体文件,极大地提升了用户体验
Web应用标签
<menu>命令列表
<menuitem>menu命令列表标签 FF(嵌入系统)
<command> menu标记定义一个命令按钮
<meter>状态标签(实时状态显示:气压、气温)C、O
<progress>状态标签 (任务过程:安装、加载) C、F、O
<datalist> 为input标记定义一个下拉列表,配合option F、O
<details> 标记定义一个元素的详细内容 ,配合dt、dd C
注释标签
<ruby> 标记定义注释或音标
<rp> 告诉那些不支持 Ruby元素的浏览器如何去显示
<rt> 标记定义对ruby的注释内容文本
其他标签
<keygen> 标记定义表单里一个生成的键值(加密信息传送)O、F
<mark> 标记定义有标记的文本 (黄色选中状态)
<output> 标记定义一些输出类型,计算表单结果配合oninput事件
<time> 标记定义一个日期/时间 目前所有主流浏览器都不支持
3. 删除的HTML标签
纯表现的元素:
basefont,big,center,font, s,strike,tt,u;
对可用性产生负面影响的元素:
frame,frameset,noframes;
产生混淆的元素:
acronym ,applet,isindex,dir。
4. 重新定义的HTML标签
HTML元素 HTML5中的意义
<b> 代表内联文本,通常是粗体,没有传递表示重要的意思
<i> 代表内联文本,通常是斜体,没有传递表示重要的意思
<dd> 可以同details与figure一同使用,定义包含文本,dialog也可用
<dt> 可以同details与figure一同使用,汇总细节,dialog也可用
<hr> 表示主题结束,而不是水平线,虽然显示相同
<menu> 重新定义用户界面的菜单,配合commond或者menuitem使用
<small> 表示小字体,例如打印注释或者法律条款
<strong> 表示重要性而不是强调符号
5. 崭新新的页面布局
HTML元素 HTML5中的意义
6. HTML5支持的视频格式
Ogg =带有Theora视频编码+Vorbis音频编码的Ogg文件
支持的浏览器:F、C、O
MEPG4=带有H.264视频编码+AAC音频编码的MPEG4文件
支持的浏览器: S、C
WebM=带有VP8视频编码+Vorbis音频编码的WebM格式 支持的浏览器: I、F、C、O
7. <Video>的使用
<video src="文件地址"controls="controls"></video>
<video src="文件地址"controls="controls">
您的浏览器暂不支持video标签。播放视频
</ video >
< video controls="controls" width="300">
<sourcesrc="move.ogg" type="video/ogg" >
<sourcesrc="move.mp4" type="video/mp4" >
您的浏览器暂不支持video标签。播放视频
</ video >
Video的常见属性
属性 值 描述
Autoplay Autoplay 视频就绪自动播放
controls controls 向用户显示播放控件
Width Pixels(像素) 设置播放器宽度
Height Pixels(像素) 设置播放器高度
Loop Loop 播放完是否继续播放该视频,循环播放
Preload Proload 是否等加载完再播放
Src url 视频url地址
Poster Imgurl 加载等待的画面图片
Autobuffer Autobuffer 设置为浏览器缓冲方式,不设置autoply才有效
Video的API方法
方法 属性 事件
play() currentSrc play
pause() currentTime pause
load() videoWidth progress
canPlayType videoHeight error
全屏 退出全屏
Webkit
(Safari5.1 /Chrome 15) element.webkitRequestFullScreen(); document.webkitCancelFullScreen();
Firefox
(works in nightly) element.mozRequestFullScreen(); document.mozCancelFullScreen();
W3C提议 element.requestFullscreen(); document.exitFullscreen();
Video的API属性
属性 说明
audioTracks 返回可用的音轨列表(MultipleTrackList对象)
autoplay 媒体加载后自动播放
buffered 返回缓冲部件的时间范围(TimeRanges对象)
controller 返回当前的媒体控制器(MediaController对象)
controls 显示播控控件
crossOrigin CORS设置
currentSrc 返回当前媒体的URL
currentTime 当前播放的时间,单位秒 (快进快退10秒)
defaultMuted 缺省是否静音
defaultPlaybackRate 播控的缺省倍速
duration 返回媒体的播放总时长,单位秒
ended 返回当前播放是否结束标志
error 返回当前播放的错误状态
initialTime 返回初始播放的位置
loop 是否循环播放
mediaGroup 当前音视频所属媒体组 (用来链接多个音视频标签)
muted 是否静音
networkState 返回当前网络状态
paused 是否暂停
playbackRate 播放的倍速(加速、减速播放)
played 当前播放部件已经播放的时间范围(TimeRanges对象)
preload 页面加载时是否同时加载音视频
readyState 返回当前的准备状态
seekable 返回当前可跳转部件的时间范围(TimeRanges对象)
seeking 返回用户是否做了跳转操作
src 当前音视频源的URL
startOffsetTime 返回当前的时间偏移(Date对象)
textTracks 返回可用的文本轨迹(TextTrackList对象)
videoTracks 返回可用的视频轨迹(VideoTrackList对象)
volume 音量值
Video的常用事件\
事件 描述
abort 当音视频加载被异常终止时产生该事件
canplay 当浏览器可以开始播放该音视频时产生该事件
canplaythrough 当浏览器可以开始播放该音视频到结束而无需因缓冲而停止时产生该事件
durationchange 当媒体的总时长改变时产生该事件
emptied 当前播放列表为空时产生该事件
ended 当前播放列表结束时产生该事件
error 当加载媒体发生错误时产生该事件
loadeddata 当加载媒体数据时产生该事件
loadedmetadata 当收到总时长,分辨率和字轨等metadata时产生该事件
loadstart 当开始查找媒体数据时产生该事件
8. HTML5支持的音频格式
HTML5支持的音频格式:
Ogg 免费 支持的浏览器:C、F、O
MP3 收费 支持的浏览器: I、C、S
Wav 收费 支持的浏览器: F、O、S
<audio>的使用
的浏览器: I、C、S
<audio src="文件地址"controls="controls"></audio>
< audio src="文件地址"controls="controls">
您的浏览器暂不支持audio标签。播放视频
</ video >
< audiocontrols="controls" >
<sourcesrc="happy.MP3" type="video/mpeg" >
<sourcesrc="happy.ogg" type="video/ogg" >
您的浏览器暂不支持audio标签。播放视频
</ audio>
audio的常见属性
属性 值 描述
autoplay autoplay 如果出现该属性,则音频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
loop loop 如果出现该属性,则每当音频结束时重新开始播放。
preload preload 如果出现该属性,则音频在页面加载时进行加载,并预备播放。
如果使用"autoplay",则忽略该属性。
src url 要播放的音频的 URL。
9. Canvas的使用
<canvas id="canvas" height="300"width="300">
您的浏览器不支持canvas标签
</canvas>
canvas标签在页面中只显示一个设定背景色的画布,如果要产生新内容或
者进行画图操作,需要借助canvasAPI(HTML5的内置对context 对象)和
javascript操作实现画图或者其他图像操作
canvas的常见属性
属性 值 描述
height pixels 设置 canvas 的高度。
width pixels 设置 canvas 的宽度。
Canvas的API-canvas主要属性和方法
方法 描述
save() 保存当前环境的状态
restore() 返回之前保存过的路径状态和属性
createEvent()
getContext() 返回一个对象,指出访问绘图功能必要的API
toDataURL() 返回canvas图像的URL
Canvas的API-颜色、样式和阴影属性和方法
属性 描述
fillStyle 设置或返回用于填充绘画的颜色、渐变或模式
strokeStyle 设置或返回用于笔触的颜色、渐变或模式
shadowColor 设置或返回用于阴影的颜色
shadowBlur 设置或返回用于阴影的模糊级别
shadowOffsetX 设置或返回阴影距形状的水平距离
shadowOffsetY 设置或返回阴影距形状的垂直距离
方法 描述
createLinearGradient() 创建线性渐变(用在画布内容上)
createPattern() 在指定的方向上重复指定的元素
createRadialGradient() 创建放射状/环形的渐变(用在画布内容上)
addColorStop() 规定渐变对象中的颜色和停止位置
Canvas的API-线条样式属性和方法
属性 描述
lineCap 设置或返回线条的结束端点样式
lineJoin 设置或返回两条线相交时,所创建的拐角类型
lineWidth 设置或返回当前的线条宽度
miterLimit 设置或返回最大斜接长度
Canvas的API-矩形方法
方法 描述
rect() 创建矩形
fillRect() 绘制"被填充"的矩形
strokeRect() 绘制矩形(无填充)
clearRect() 在给定的矩形内清除指定的像素
Canvas的API-路径方法
方法 描述
fill() 填充当前绘图(路径)
stroke() 绘制已定义的路径
beginPath() 起始一条路径,或重置当前路径
moveTo() 把路径移动到画布中的指定点,不创建线条
closePath() 创建从当前点回到起始点的路径
lineTo() 添加一个新点,创建从该点到最后指定点的线条
clip() 从原始画布剪切任意形状和尺寸的区域
quadraticCurveTo() 创建二次贝塞尔曲线
bezierCurveTo() 创建三次方贝塞尔曲线
arc() 创建弧/曲线(用于创建圆形或部分圆)
arcTo() 创建两切线之间的弧/曲线
isPointInPath() 如果指定的点位于当前路径中,返回布尔值
Canvas的API-转换方法
方法 描述
scale() 缩放当前绘图至更大或更小
rotate() 旋转当前绘图
translate() 重新映射画布上的 (0,0) 位置
transform() 替换绘图的当前转换矩阵
setTransform() 将当前转换重置为单位矩阵。然后运行 transform()
Canvas的API-文本属性和方法
属性 描述
font 设置或返回文本内容的当前字体属性
textAlign 设置或返回文本内容的当前对齐方式
textBaseline 设置或返回在绘制文本时使用的当前文本基线
方法 描述
fillText() 在画布上绘制"被填充的"文本
strokeText() 在画布上绘制文本(无填充)
measureText() 返回包含指定文本宽度的对象
Canvas的API-图像绘制方法
方法 描述
drawImage() 向画布上绘制图像、画布或视频 chrome不支持
Canvas的API-像素操作方法和属性
属性 描述
width 返回 ImageData 对象的宽度
height 返回 ImageData 对象的高度
data 返回一个对象,其包含指定的 ImageData 对象的图像数据
方法 描述
createImageData() 创建新的、空白的ImageData 对象
getImageData() 返回 ImageData 对象,该对象为画布上指定的矩形复制像素数据
putImageData() 把图像数据(从指定的ImageData 对象)放回画布上
Canvas的API-图像合成属性
属性 描述
globalAlpha 设置或返回绘图的当前 alpha 或透明值
globalCompositeOperation 设置或返回新图像如何绘制到已有的图像上
Canvas的API-其他方法
属性 描述
globalAlpha 设置或返回绘图的当前 alpha 或透明值
globalCompositeOperation 设置或返回新图像如何绘制到已有的图像上
10. 创建易用的Web表单
HTML5中为了方便排版,可以使from中的表单标签脱离from的嵌套。
方法:from指定ID,所有表单标签均添加from=id属性。
<form action="" method="post"id="register" >
</form>
<input type="text" name="user"form="register" />
<selectname="year" form="register" >
<optionvalue="1999"></option>
</select>
<textareaname="ext" form="register" ></textarea>
<buttontype="submit" form="register" >提交</button>
智能表单的使用和规范
Input表单的type新属性值
Type="email" 限制用户输入必须为Email类型
Type="url" 限制用户输入必须为URL类型
Type="date" 限制用户输入必须为日期类型
Type="time" 限制用户输入必须为时间类型O
Type="month" 限制用户输入必须为月类型O
Type="week" 限制用户输入必须为周类型O
Type="number" 限制用户输入必须为数字类型
Type="range" 产生一个滑动条的表单
Type="search" 产生一个搜索意义的表单 配合results="n"属性 C
Type="color" 生成一个颜色选择表单
新增的表单属性
属性 值 说明
Required required 表单拥有该属性表示其内容不能为空,必填
placeholder 提示文本 表单的提示信息,存在默认值将不显示
Autofocus autofocus 自动聚焦属性,页面加载完成自动聚焦到指定表单
Pattern 正则表达式 输入的内容必须匹配到指定正则
Autocomplete列表
Datalist标签配合option标签实现的自动填充表单功能:
<input type="search"name="move" list="search" >
<datalist id="search" >
<option>11111</option>
<option>22222</option>
<option>333333</option>
</datalist>
output的使用
<formοninput="res.value=no1.value*no2.value“ >
<inputtype="text" name="no1">
<inputtype="text" name="no2">
<outputname="res"></output>
</form>