大佬教程收集整理的这篇文章主要介绍了html5学习教程,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
<!doctype html>
<figcaption> 标签定义 figure 元素的标题。
<embed> 标记定义外部的可交互的内容或插件 比如flash
HTML5的多媒体标签的出现意味着富媒体的发展以及支持不使用插件的情况下即可操作媒体文件,极大地提升了用户体验
<menu>命令列表
<menuitem>menu命令列表标签 FF(嵌入系统)
<progress>状态标签 (任务过程:安装、加载) C、F、O
<datalist> 为input标记定义一个下拉列表,配合option F、O
<details> 标记定义一个元素的详细内容 ,配合dt、dd C
<ruby> 标记定义注释或音标
<keygen> 标记定义表单里一个@L_874_75@的键值(加密信息传送)O、F
<output> 标记定义一些输出类型,计算表单结果配合oninput事件
<time> 标记定义一个日期/时间 目前所有主流浏览器都不支持
纯表现的元素:
basefont,big,center,font,s,Strike,tt,u;
对可用性产生负面影响的元素:
frame,frameset,noframes;
产生混淆的元素:
acronym ,applet,isindex,dir。
HTML元素 HTML5中的意义
<b> 代表内联文本,通常是粗体,没有传递表示重要的意思
<i> 代表内联文本,通常是斜体,没有传递表示重要的意思
<dd> 可以同details与figure一同使用,定义包含文本,dialog也可用
<dt> 可以同details与figure一同使用,汇总细节,dialog也可用
<menu> 重新定义用户界面的菜单,配合commond或者menuitem使用
<small> 表示小字体,例如打印注释或者法律条款
<strong> 表示重要性而不是强调符号
HTML元素 HTML5中的意义
Ogg =带有Theora视频编码+Vorbis音频编码的Ogg文件
支持的浏览器:F、C、O
@H_361_8@mEPG4=带有H.264视频编码+AAC音频编码的MPEG4文件支持的浏览器: S、C
WebM=带有VP8视频编码+Vorbis音频编码的WebM格式 支持的浏览器: I、F、C、O
<video src="文件地址"controls="controls"></video>
<video src="文件地址"controls="controls">
</ video >
< video controls="controls" width="300">
<sourcesrc="move.ogg" type="video/ogg" >
<sourcesrc="move.mp4" type="video/mp4" >
</ video >
属性 值 描述
Autoplay Autoplay 视频就绪自动播放
Width Pixels(像素) 设置播放器宽度
Height Pixels(像素) 设置播放器高度
Loop loop 播放完是否继续播放该视频,循环播放
Preload Proload 是否等加载完再播放
Src url 视频URL地址
Autobuffer Autobuffer 设置为浏览器缓冲方式,不设置autoply才有效
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();
属性 说明
audioTracks 返回可用的音轨列表(MultipleTrackList对象)
autoplay 媒体加载后自动播放
buffered 返回缓冲部件的时间范围(TimeRanges对象)
controller 返回当前的媒体控制器(MediaController对象)
controls 显示播控控件
crossOrigin CORS设置
currentSrc 返回当前媒体的URL
currentTime 当前播放的时间,单位秒 (快进快退10秒)
defaultMuted 缺省是否静音
defaultPlayBACkRate 播控的缺省倍速
duration 返回媒体的播放总时长,单位秒
ended 返回当前播放是否结束标志
error 返回当前播放的错误状态
initialTime 返回初始播放的位置
loop 是否循环播放
@H_361_8@mediaGroup 当前音视频所属媒体组 (用来链接多个音视频标签)@H_761_19@muted 是否静音
networkState 返回当前网络状态
paused 是否暂停
playBACkRate 播放的倍速(加速、减速播放)
played 当前播放部件已经播放的时间范围(TimeRanges对象)
preload 页面加载时是否同时加载音视频
readyState 返回当前的准备状态
seekable 返回当前可跳转部件的时间范围(TimeRanges对象)
src 当前音视频源的URL
startOffsetTime 返回当前的时间偏移(Date对象)
textTracks 返回可用的文本轨迹(TextTrackList对象)
videoTracks 返回可用的视频轨迹(VideoTrackList对象)
volume 音量值
事件 描述
abort 当音视频加载被异常终止时产生该事件
canplay 当浏览器可以开始播放该音视频时产生该事件
canplaythrough 当浏览器可以开始播放该音视频到结束而无需因缓冲而停止时产生该事件
durationchange 当媒体的总时长改变时产生该事件
emptied 当前播放列表为空时产生该事件
ended 当前播放列表结束时产生该事件
error 当加载媒体发生错误时产生该事件
loadeddata 当加载媒体数据时产生该事件
loadedMetadata 当收到总时长,分辨率和字轨等Metadata时产生该事件
loadstart 当开始查找媒体数据时产生该事件
HTML5支持的音频格式:
Ogg 免费 支持的浏览器:C、F、O
@H_361_8@mP3 收费 支持的浏览器: I、C、SWav 收费 支持的浏览器: F、O、S
的浏览器: I、C、S
<audio src="文件地址"controls="controls"></audio>
< audio src="文件地址"controls="controls">
</ video >
< audiocontrols="controls" >
<sourcesrc="happy.MP3" type="video/mpeg" >
<sourcesrc="happy.ogg" type="video/ogg" >
</ audio>
属性 值 描述
autoplay autoplay 如果出现该属性,则音频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
loop loop 如果出现该属性,则每当音频结束时重新开始播放。
preload preload 如果出现该属性,则音频在页面加载时进行加载,并预备播放。
如果使用"autoplay",则忽略该属性。
src url 要播放的音频的 URL。
<canvas id="canvas" height="300"width="300">
</canvas>
canvas标签在页面中只显示一个设定背景色的画布,如果要产生新内容或
者进行画图操作,需要借助canvasAPI(HTML5的内置对context 对象)和
javascript操作实现画图或者其他图像操作
属性 值 描述
height pixels 设置 canvas 的高度。
width pixels 设置 canvas 的宽度。
方法 描述
save() 保存当前环境的状态
restore() 返回之前保存过的路径状态和属性
createEvent()
getContext() 返回一个对象,指出访问绘图功能必要的API
toDataURL() 返回canvas图像的URL
属性 描述
fillStyle 设置或返回用于填充绘画的颜色、渐变或模式
strokeStyle 设置或返回用于笔触的颜色、渐变或模式
shadowColor 设置或返回用于阴影的颜色
shadowBlur 设置或返回用于阴影的模糊级别
shadowOffsetX 设置或返回阴影距形状的水平距离
shadowOffsetY 设置或返回阴影距形状的垂直距离
方法 描述
createLinearGradient() 创建线性渐变(用在画布内容上)
createPattern() 在指定的方向上重复指定的元素
createRadialGradient() 创建放射状/环形的渐变(用在画布内容上)
addColorStop() 规定渐变对象中的颜色和停止位置
属性 描述
lineCap 设置或返回线条的结束端点样式
lineJoin 设置或返回两条线相交时,所创建的拐角类型
lineWidth 设置或返回当前的线条宽度
@H_361_8@miterLimit 设置或返回最大斜接长度
方法 描述
rect() 创建矩形
fillRect() 绘制"被填充"的矩形
strokeRect() 绘制矩形(无填充)
clearRect() 在给定的矩形内清除指定的像素
方法 描述
fill() 填充当前绘图(路径)
stroke() 绘制已定义的路径
beginPath() 起始一条路径,或重置当前路径
@H_361_8@moveTo() 把路径移动到画布中的指定点,不创建线条closePath() 创建从当前点回到起始点的路径
lineTo() 添加一个新点,创建从该点到最后指定点的线条
clip() 从原始画布剪切任意形状和尺寸的区域
quadraticCurveTo() 创建二次贝塞尔曲线
bezierCurveTo() 创建三次方贝塞尔曲线
arc() 创建弧/曲线(用于创建圆形或部分圆)
arcTo() 创建两切线之间的弧/曲线
isPoinTinPath() 如果指定的点位于当前路径中,返回布尔值
方法 描述
scale() 缩放当前绘图至更大或更小
rotate() 旋转当前绘图
translate() 重新映射画布上的 (0,0) 位置
transform() 替换绘图的当前转换矩阵
setTransform() 将当前转换重置为单位矩阵。然后运行 transform()
属性 描述
textAlign 设置或返回文本内容的当前对齐方式
textBaseline 设置或返回在绘制文本时使用的当前文本基线
方法 描述
fillText() 在画布上绘制"被填充的"文本
strokeText() 在画布上绘制文本(无填充)
@H_361_8@measureText() 返回包含指定文本宽度的对象
方法 描述
drawImage() 向画布上绘制图像、画布或视频 chrome不支持
属性 描述
width 返回 ImageData 对象的宽度
height 返回 ImageData 对象的高度
data 返回一个对象,其包含指定的 ImageData 对象的图像数据
方法 描述
createImageData() 创建新的、空白的ImageData 对象
getImageData() 返回 ImageData 对象,该对象为画布上指定的矩形复制像素数据
putImageData() 把图像数据(从指定的ImageData 对象)放回画布上
属性 描述
globalAlpha 设置或返回绘图的当前 alpha 或透明值
globalCompositeOperation 设置或返回新图像如何绘制到已有的图像上
属性 描述
globalAlpha 设置或返回绘图的当前 alpha 或透明值
globalCompositeOperation 设置或返回新图像如何绘制到已有的图像上
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" >
</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="range" 产生一个滑动条的表单
Type="search" 产生一个搜索意义的表单 配合results="n"属性 C
Type="color" @L_874_75@一个颜色选择表单
属性 值 说明
required required 表单拥有该属性表示其内容不能为空,必填
placeholder @L_450_246@文本 表单的@L_450_246@信息,存在默认值将不显示
Autofocus autofocus 自动聚焦属性,页面加载完成自动聚焦到指定表单
Pattern 正则表达式 输入的内容必须匹配到指定正则
Datalist标签配合option标签实现的自动填充表单功能:
<input type="search"name="move" list="search" >
<datalist id="search" >
<option>11111</option>
<option>22222</option>
<option>333333</option>
</datalist>
<formoninput="res.value=no1.value*no2.value“ >
<inputtype="text" name="no1">
<inputtype="text" name="no2">
<outputname="res"></output>
</form>
以上是大佬教程为你收集整理的html5学习教程全部内容,希望文章能够帮你解决html5学习教程所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。