HTML5   发布时间:2022-04-25  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了html5学习教程大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

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> 标记定义表单里一个@L_874_75@的键值(加密信息传送)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中的意义

html5学习教程

 

 

6.   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

 

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才有效

 

 

 

VideoAPI方法

方法       属性       事件

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();

 

 

VideoAPI属性

 

 

属性       说明

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对象)

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

@H_361_8@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 的宽度。

 

 

CanvasAPI-canvas主要属性方法

 

 

方法       描述

save()      保存当前环境的状态

restore()  返回之前保存过的路径状态和属性

createEvent() 

getContext()   返回一个对象,指出访问绘图功能必要的API

toDataURL()   返回canvas图像的URL

 

 

CanvasAPI-颜色、样式和阴影属性方法

 

属性       描述

fillStyle   设置或返回用于填充绘画的颜色、渐变或模式

strokeStyle     设置或返回用于笔触的颜色、渐变或模式

shadowColor   设置或返回用于阴影的颜色

shadowBlur    设置或返回用于阴影的模糊级别

shadowOffsetX      设置或返回阴影距形状的水平距离

shadowOffsetY      设置或返回阴影距形状的垂直距离

 

方法       描述

createLinearGradient()   创建线性渐变(用在画布内容上)

createPattern()       在指定的方向上重复指定的元素

createRadialGradient()   创建放射状/环形的渐变(用在画布内容上)

addColorStop()      规定渐变对象中的颜色和停止位置

 

CanvasAPI-线条样式属性方法

 

属性       描述

lineCap   设置或返回线条的结束端点样式

lineJoin   设置或返回两条线相交时,所创建的拐角类型

lineWidth       设置或返回当前的线条宽度

@H_361_8@miterLimit      设置或返回最大斜接长度

 

 

CanvasAPI-矩形方法

 

方法       描述

rect()      创建矩形

fillRect() 绘制"被填充"的矩形

strokeRect()    绘制矩形(无填充)

clearRect()      在给定的矩形内清除指定的像素

 

 

 

 

CanvasAPI-路径方法

 

 

方法       描述

fill()       填充当前绘图(路径)

stroke()   绘制已定义的路径

beginPath()     起始一条路径,或重置当前路径

@H_361_8@moveTo()       把路径移动到画布中的指定点,不创建线条

closePath()     创建从当前点回到起始点的路径

lineTo()   添加一个新点,创建从该点到最后指定点的线条

clip()      从原始画布剪切任意形状和尺寸的区域

quadraticCurveTo() 创建二次贝塞尔曲线

bezierCurveTo()     创建三次方贝塞尔曲线

arc()       创建弧/曲线(用于创建圆形或部分圆)

arcTo()    创建两切线之间的弧/曲线

isPoinTinPath()       如果指定的点位于当前路径中,返回布尔值

 

 

CanvasAPI-转换方法

 

 

 

方法       描述

scale()     缩放当前绘图至更大或更小

rotate()    旋转当前绘图

translate()       重新映射画布上的 (0,0) 位置

transform()     替换绘图的当前转换矩阵

setTransform()       将当前转换重置为单位矩阵。然后运行 transform()

 

 

 

 

CanvasAPI-文本属性方法

 

属性       描述

font 设置或返回文本内容的当前字体属性

textAlign 设置或返回文本内容的当前对齐方式

textBaseline    设置或返回在绘制文本时使用的当前文本基线

 

 

方法       描述

fillText() 在画布上绘制"被填充的"文本

strokeText()    在画布上绘制文本(无填充)

@H_361_8@measureText() 返回包含指定文本宽度的对象

 

 

CanvasAPI-图像绘制方法

 

 

方法       描述

drawImage()   向画布上绘制图像、画布或视频  chrome不支持

 

 

CanvasAPI-像素操作方法属性

 

属性       描述

width      返回 ImageData 对象的宽度

height     返回 ImageData 对象的高度

data 返回一个对象,其包含指定的 ImageData 对象的图像数据

 

方法       描述

createImageData()  创建新的、空白的ImageData 对象

getImageData()      返回 ImageData 对象,该对象为画布上指定的矩形复制像素数据

putImageData()      把图像数据(从指定的ImageData 对象)放回画布上

 

 

CanvasAPI-图像合成属性

 

 

属性       描述

globalAlpha    设置或返回绘图的当前 alpha 或透明值

globalCompositeOperation    设置或返回新图像如何绘制到已有的图像上

 

 

CanvasAPI-其他方法

 

 

属性       描述

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"  @L_874_75@一个颜色选择表单

 

 

新增的表单属性

 

 

 

属性       值    说明

required required  表单拥有该属性表示其内容不能为空,必填

placeholder     @L_450_246@文本       表单的@L_450_246@信息,存在认值将不显示

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的使用

 

<formoninput="res.value=no1.value*no2.value“ >

       <inputtype="text" name="no1">

       <inputtype="text" name="no2">

       <outputname="res"></output>

</form>

大佬总结

以上是大佬教程为你收集整理的html5学习教程全部内容,希望文章能够帮你解决html5学习教程所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。