主页 > 云开发 > HTML5 > 正文

后台-体系设置-扩展变量-手机广告位-内容正文顶部

HTML5根底入门教程

HTML5
HTML5教程

什么是HTML5?

HTML5 将成为HTML、XHTML 以及HTML DOM 的新规范。

HTML 的上一个版别诞生于1999 年。自从那以后,Web 国际现已阅历了剧变。

HTML5 仍处于完善之中。可是,大部分现代浏览器现已具有了某些HTML5 支撑。

你是不是多少有了解一点,可是你却对这个不精啊!

HTML5 是怎样起步的?

HTML5 是W3C 与WHATWG 协作的成果。

编者注:W3C 指World Wide Web Consortium,万维网联盟。

编者注:WHATWG 指Web Hypertext Application Technology WorkingGroup。

WHATWG 致力于web 表单和运用程序,而W3C 专心于XHTML 2.0。在2006 年,双

方决议进行协作,来创立一个新版别的HTML。

为HTML5 树立的一些规矩:

• 新特性应该根据HTML、CSS、DOM 以及JavaScript。

• 削减对外部插件的需求(比方Flash)

• 更优异的过错处理

• 更多替代脚本的符号

• HTML5 应该独立于设备

• 开发进程应对大众通明

新特性

HTML5 中的一些风趣的新特性:

• 用于绘画的canvas 元素

• 用于前言回放的video 和audio 元素

• 对本地离线存储的更好的支撑

• 新的特别内容元素,比方article、footer、header、nav、section

• 新的表单控件,比方calendar、date、time、email、url、search

浏览器支撑

最新版别的Safari、Chrome、Firefox 以及Opera 支撑某些HTML5 特性。Internet Explorer

9 将支撑某些HTML5 特性。

HTML 5 视频

许多时尚的网站都供给视频。HTML5 供给了展现视频的规范。

Web 上的视频

直到现在,依然不存在一项旨在网页上显现视频的规范。

今日,大多数视频是经过插件(比方Flash)来显现的。可是,并非一切浏览器都具有相同

的插件。

HTML5 规矩了一种经过video 元从来包含视频的规范办法。

视频格局

当时,video 元素支撑两种视频格局:

Internet Explorer Firefox 3.5 Opera 10.5Chrome 3.0 Safari 3.0

Ogg X X X

MPEG 4 X X

Ogg = 带有Thedora 视频编码和Vorbis 音频编码的Ogg 文件

MPEG4 = 带有H.264 视频编码和AAC 音频编码的MPEG 4 文件

怎样作业

如需在HTML5 中显现视频,您一切需求的是:

<video src="movie.ogg"controls="controls">

</video>

control 特点供增加播映、暂停和音量控件。

包含宽度和高度特点也是不错的主见。

<video> 与</video> 之间刺进的内容是供不支撑video 元素的浏览器显现的:

实例

<video src="movie.ogg"width="320" height="240" controls="controls">

Your browser does not support the video tag.

</video>

上面的比方运用一个Ogg 文件,适用于Firefox、Opera 以及Chrome 浏览器。

要保证适用于Safari 浏览器,视频文件有必要是MPEG4 类型。

video 元素答应多个source 元素。source 元素可以链接不同的视频文件。浏览器将运用第

一个可辨认的格局:

实例

<video width="320"height="240" controls="controls">

<source src="movie.ogg"type="video/ogg">

<source src="movie.mp4"type="video/mp4">

Your browser does not support the video tag.

</video>

Internet Explorer

Internet Explorer 8 不支撑video 元素。在IE 9 中,将供给对运用MPEG4 的video 元素

的支撑。

<video> 标签的特点

特点值描绘

autoplay autoplay 假如呈现该特点,则视频在安排妥当后马上播映。

controls controls 假如呈现该特点,则向用户显现控件,比方播映按钮。

height pixels 设置视频播映器的高度。

loop loop 假如呈现该特点,则当时言文件完结播映后再次开端播映。

preload preload

假如呈现该特点,则视频在页面加载时进行加载,并准备播映。

假如运用"autoplay",则疏忽该特点。

src url 要播映的视频的URL。

width pixels 设置视频播映器的宽度。

HTML 5 音频

HTML5 供给了播映音频的规范。

Web 上的音频

直到现在,依然不存在一项旨在网页上播映音频的规范。

今日,大多数音频是经过插件(比方Flash)来播映的。可是,并非一切浏览器都具有相同

的插件。

HTML5 规矩了一种经过audio 元从来包含音频的规范办法。

audio 元素可以播映声响文件或许音频流。

视频格局

当时,audio 元素支撑三种音频格局:

Internet Explorer Firefox 3.5 Opera 10.5Chrome 3.0 Safari 3.0

Ogg Vorbis X X X

MP3 X X

Wav X X X

怎样作业

如需在HTML5 中播映音频,您一切需求的是:

<audiosrc="song.ogg" controls="controls">

</audio>

control 特点供增加播映、暂停和音量控件。

<audio> 与</audio> 之间刺进的内容是供不支撑audio 元素的浏览器显现的:

实例

<audio src="song.ogg"controls="controls">

Your browser does not support the audio tag.

</audio>

上面的比方运用一个Ogg 文件,适用于Firefox、Opera 以及Chrome 浏览器(读者注:国产的许多浏览器也可以)。

要保证适用于Safari 浏览器,音频文件有必要是MP3 或Wav 类型。

audio 元素答应多个source 元素。source 元素可以链接不同的音频文件。浏览器将运用榜首个可辨认的格局:

实例

<audio controls="controls">

<source src="song.ogg"type="audio/ogg">

<source src="song.mp3"type="audio/mpeg">

Your browser does not support the audio tag.

</audio>

Internet Explorer

Internet Explorer 8 不支撑audio 元素。在IE 9 中,将供给对audio 元素的支撑。

<audio> 标签的特点

特点值描绘

autoplay autoplay 假如呈现该特点,则音频在安排妥当后马上播映。

controls controls 假如呈现该特点,则向用户显现控件,比方播映按钮。

preload preload

假如呈现该特点,则音频在页面加载时进行加载,并准备播映。

假如运用"autoplay",则疏忽该特点。

src url 要播映的音频的URL。

HTML 5 Canvas

canvas 元素用于在网页上制作图形。

什么是Canvas?

HTML5 的canvas 元素运用JavaScript 在网页上制作图画。

画布是一个矩形区域,您可以操控其每一像素。

canvas 具有多种制作途径、矩形、圆形、字符以及增加图画的办法。

创立Canvas 元素

向HTML5 页面增加canvas 元素。

规矩元素的id、宽度和高度:

<canvas id="myCanvas"width="200" height="100"></canvas>

经过JavaScript 来制作

canvas 元素本身是没有绘图才能的。一切的制作作业有必要在JavaScript 内部完结:

<scripttype="text/javascript">

varc=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

cxt.fillStyle="#FF0000";

cxt.fillRect(0,0,150,75);

</script>

JavaScript 运用id 来寻觅canvas 元素:

varc=document.getElementById("myCanvas");

然后,创立context 方针:

var cxt=c.getContext("2d");

getContext("2d") 方针是内建的HTML5 方针,具有多种制作途径、矩形、圆形、字符以及增加图画的办法。

下面的两行代码制作一个赤色的矩形:

cxt.fillStyle="#FF0000";

cxt.fillRect(0,0,150,75);

fillStyle 办法将其染成赤色,fillRect 办法规矩了形状、方位和尺度。

了解坐标

上面的fillRect 办法具有参数(0,0,150,75)。

意思是:在画布上制作150x75 的矩形,从左上角开端(0,0)。

如下图所示,画布的X 和Y 坐标用于在画布上对绘画进行定位。

实例:把鼠标悬停在矩形上可以看到坐标

更多Canvas 实例

下面的在canvas 元素上进行绘画的更多实例:

实例- 线条

经过指定从何处开端,在何处完毕,来制作一条线:

JavaScript 代码:

<scripttype="text/javascript">

varc=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

cxt.moveTo(10,10);

cxt.lineTo(150,50);

cxt.lineTo(10,50);

cxt.stroke();

</script>

canvas 元素:

<canvas id="myCanvas"width="200" height="100" style="border:1px solid#c3c3c3;">

Your browser does not support the canvaselement.

</canvas>

亲身试一试

实例- 圆形

经过规矩尺度、色彩和方位,来制作一个圆:

JavaScript 代码:

<scripttype="text/javascript">

varc=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

cxt.fillStyle="#FF0000";

cxt.beginPath();

cxt.arc(70,18,15,0,Math.PI*2,true);

cxt.closePath();

cxt.fill();

</script>

canvas 元素:

<canvas id="myCanvas"width="200" height="100" style="border:1px solid#c3c3c3;">

Your browser does not support the canvaselement.

</canvas>

亲身试一试

实例- 突变

运用您指定的色彩来制作突变布景:

JavaScript 代码:

<scripttype="text/javascript">

varc=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

var grd=cxt.createLinearGradient(0,0,175,50);

grd.addColorStop(0,"#FF0000");

grd.addColorStop(1,"#00FF00");

cxt.fillStyle=grd;

cxt.fillRect(0,0,175,50);

</script>

canvas 元素:

<canvas id="myCanvas"width="200" height="100" style="border:1px solid#c3c3c3;">

Your browser does not support the canvaselement.

</canvas>

亲身试一试

实例- 图画

把一幅图画放置到画布上:

JavaScript 代码:

<scripttype="text/javascript">

varc=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

var img=new Image()

img.src="flower.png"

cxt.drawImage(img,0,0);

</script>

canvas 元素:

<canvas id="myCanvas"width="200" height="100" style="border:1px solid#c3c3c3;">

Your browser does not support the canvaselement.

</canvas>

HTML 5 Web 存储

在客户端存储数据

HTML5 供给了两种在客户端存储数据的新办法:

localStorage - 没有时刻束缚的数据存储

sessionStorage - 针对一个session 的数据存储

之前,这些都是由cookie 完结的。可是cookie 不适合很多数据的存储,由于它们由每个

对服务器的恳求来传递,这使得cookie 速度很慢而且功率也不高。

在HTML5 中,数据不是由每个服务器恳求传递的,而是只要在恳求时运用数据。它使在

不影响网站功用的情况下存储很多数据成为或许。

关于不同的网站,数据存储于不同的区域,而且一个网站只能拜访其本身的数据。

HTML5 运用JavaScript 来存储和拜访数据。

localStorage 办法

localStorage 办法存储的数据没有时刻束缚。第二天、第二周或下一年之后,数据依然可用。

怎样创立和拜访localStorage:

实例

<scripttype="text/javascript">

localStorage.lastname="Smith";

document.write(localStorage.lastname);

</script>

下面的比方对用户拜访页面的次数进行计数:

实例

<script type="text/javascript">

if (localStorage.pagecount)

{

localStorage.pagecount=Number(localStorage.pagecount)+1;

}

else

{

localStorage.pagecount=1;

}

document.write("Visits "+localStorage.pagecount + " time(s).");

</script>

sessionStorage 办法

sessionStorage 办法针对一个session 进行数据存储。当用户封闭浏览器窗口后,数据会被

删去。

怎样创立并拜访一个sessionStorage:

实例

<scripttype="text/javascript">

sessionStorage.lastname="Smith";

document.write(sessionStorage.lastname);

</script>

下面的比方对用户在当时session 中拜访页面的次数进行计数:

实例

<scripttype="text/javascript">

if (sessionStorage.pagecount)

{

sessionStorage.pagecount=Number(sessionStorage.pagecount)+1;

}

else

{

sessionStorage.pagecount=1;

}

document.write("Visits"+sessionStorage.pagecount+" time(s) this session.");

</script>

HTML5 Input 类型

HTML5 新的Input 类型

HTML5 具有多个新的表单输入类型。这些新特性供给了更好的输入操控和验证。

本章全面介绍这些新的输入类型:

email

url

number

range

Date pickers (date, month, week, time,datetime, datetime-local)

search

color

浏览器支撑

Input type IE Firefox Opera Chrome Safari

email No No 9.0 No No

url No No 9.0 No No

number No No 9.0 No No

range No No 9.0 4.0 4.0

Date pickers No No 9.0 No No

search No No No No No

color No No No No No

注释:Opera 对新的输入类型的支撑最好。不过您现已可以在一切干流的浏览器中运用它们

了。即便不被支撑,依然可以显现为惯例的文本域。

Input 类型- email

email 类型用于应该包含e-mail 地址的输入域。

在提交表单时,会主动验证email 域的值。

实例

E-mail: <input type="email"name="user_email" />

提示:iPhone 中的Safari 浏览器支撑email 输入类型,并经过改动触摸屏键盘来合作它(添

加@ 和.com 选项)。

Input 类型- url

url 类型用于应该包含URL 地址的输入域。

在提交表单时,会主动验证url 域的值。

实例

Homepage: <input type="url"name="user_url" />

提示:iPhone 中的Safari 浏览器支撑url 输入类型,并经过改动触摸屏键盘来合作它(添

加.com 选项)。

Input 类型- number

number 类型用于应该包含数值的输入域。

您还可以设定对所承受的数字的限制:

实例

Points: <input type="number"name="points" min="1" max="10" />

请运用下面的特点来规矩对数字类型的限制:

特点值描绘

max number 规矩答应的最大值

min number 规矩答应的最小值

step number 规矩合法的数字距离(假如step="3",则合法的数是-3,0,3,6 等)

value number 规矩默许值

提示:iPhone 中的Safari 浏览器支撑number 输入类型,并经过改动触摸屏键盘来合作它

(显现数字)。

Input 类型- range

range 类型用于应该包含必定范围内数字值的输入域。

range 类型显现为滑动条。

您还可以设定对所承受的数字的限制:

实例

<input type="range"name="points" min="1" max="10" />

请运用下面的特点来规矩对数字类型的限制:

特点值描绘

max number 规矩答应的最大值

min number 规矩答应的最小值

step number 规矩合法的数字距离(假如step="3",则合法的数是-3,0,3,6 等)

value number 规矩默许值

Input 类型- DatePickers(数据检出器)

HTML5 具有多个可供选取日期和时刻的新输入类型:

date - 选取日、月、年

month - 选取月、年

week - 选取周和年

time - 选取时刻(小时和分钟)

datetime - 选取时刻、日、月、年(UTC 时刻)

datetime-local - 选取时刻、日、月、年(本地时刻)

下面的比方答应您从日历中选取一个日期:

实例

Date: <input type="date"name="user_date" />

输入类型"month":

输入类型"week":

输入类型"time":

输入类型"datetime":

输入类型"datetime-local":

Input 类型- search

search 类型用于查找域,比方站点查找或Google 查找。

search 域显现为惯例的文本域。

HTML5 表单元素

HTML5 的新的表单元素:

HTML5 具有若干触及表单的元素和特点。

本章介绍以下新的表单元素:

datalist

keygen

output

浏览器支撑

Input type IE Firefox Opera Chrome Safari

datalist No No 9.5 No No

keygen No No 10.5 3.0 No

output No No 9.5 No No

datalist 元素

datalist 元素规矩输入域的选项列表。

列表是经过datalist 内的option 元素创立的。

如需把datalist 绑定到输入域,请用输入域的list 特点引证datalist 的id:

实例

Webpage: <input type="url"list="url_list" name="link" />

<datalist id="url_list">

<option label="W3School"value="http://www.W3School.com.cn" />

<option label="Google"value="http://www.google.com" />

<option label="Microsoft"value="http://www.microsoft.com" />

</datalist>

提示:option 元素永久都要设置value 特点。

keygen 元素

keygen 元素的作用是供给一种验证用户的牢靠办法。

keygen 元素是密钥对生成器(key-pairgenerator)。当提交表单时,会生成两个键,一个是

私钥,一个公钥。

私钥(private key)存储于客户端,公钥(public key)则被发送到服务器。公钥可用于之后

验证用户的客户端证书(client certificate)。

现在,浏览器对此元素的糟糕的支撑度不足以使其成为一种有用的安全规范。

实例

<form action="demo_form.asp"method="get">

Username: <input type="text"name="usr_name" />

Encryption: <keygenname="security" />

<input type="submit" />

</form>

output 元素

output 元素用于不同类型的输出,比方核算或脚本输出:

实例

<output id="result"onforminput="resCalc()"></output>

HTML5 表单特点

HTML5 的新的表单特点

本章解说触及<form> 和<input> 元素的新特点。

新的form 特点:

• autocomplete

• novalidate

新的input 特点:

• autocomplete

• autofocus

• form

• form overrides (formaction, formenctype,formmethod, formnovalidate, formtarget)

• height 和width

• list

• min, max 和step

• multiple

• pattern (regexp)

• placeholder

• required

浏览器支撑

Input type IE Firefox Opera Chrome Safari

autocomplete 8.0 3.5 9.5 3.0 4.0

autofocus No No 10.0 3.0 4.0

form No No 9.5 No No

form overrides No No 10.5 No No

height and width 8.0 3.5 9.5 3.0 4.0

list No No 9.5 No No

min, max and step No No 9.5 3.0 No

multiple No 3.5 No 3.0 4.0

novalidate No No No No No

pattern No No 9.5 3.0 No

placeholder No No No 3.0 3.0

required No No 9.5 3.0 No

autocomplete 特点

autocomplete 特点规矩form 或input 域应该具有主动完结功用。

注释:autocomplete 适用于<form> 标签,以及以下类型的<input> 标签:text, search,url,

telephone, email, password, datepickers,range 以及color。

当用户在主动完结域中开端输入时,浏览器应该在该域中显现填写的选项:

实例

<form action="demo_form.asp"method="get" autocomplete="on">

First name: <input type="text"name="fname" /><br />

Last name: <input type="text"name="lname" /><br />

E-mail: <input type="email"name="email" autocomplete="off" /><br />

<input type="submit" />

</form>

注释:在某些浏览器中,您或许需求启用主动完结功用,以使该特点收效。

autofocus 特点

autofocus 特点规矩在页面加载时,域主动地取得焦点。

注释:autofocus 特点适用于一切<input> 标签的类型。

实例

User name: <input type="text"name="user_name" autofocus="autofocus" />

form 特点

form 特点规矩输入域所属的一个或多个表单。

注释:form 特点适用于一切<input> 标签的类型。

form 特点有必要引证所属表单的id:

实例

<form action="demo_form.asp"method="get" id="user_form">

First name:<input type="text"name="fname" />

<input type="submit" />

</form>

Last name: <input type="text"name="lname" form="user_form" />

注释:如需引证一个以上的表单,请运用空格分隔的列表。

表单重写特点

表单重写特点(form override attributes)答应您重写form 元素的某些特点设定。

表单重写特点有:

formaction - 重写表单的action 特点

formenctype - 重写表单的enctype 特点

formmethod - 重写表单的method 特点

formnovalidate - 重写表单的novalidate 特点

formtarget - 重写表单的target 特点

注释:表单重写特点适用于以下类型的<input> 标签:submit 和image。

实例

<form action="demo_form.asp"method="get" id="user_form">

E-mail: <input type="email"name="userid" /><br />

<input type="submit"value="Submit" />

<br />

<input type="submit"formaction="demo_admin.asp" value="Submit as admin" />

<br />

<input type="submit"formnovalidate="true" value="Submit without validation"/>

<br />

</form>

注释:这些特点关于创立不同的提交按钮很有协助。

height 和width 特点

height 和width 特点规矩用于image 类型的input 标签的图画高度和宽度。

注释:height 和width 特点只适用于image 类型的<input> 标签。

实例

<input type="image"src="img_submit.gif" width="99" height="99" />

list 特点

list 特点规矩输入域的datalist。datalist 是输入域的选项列表。

注释:list 特点适用于以下类型的<input> 标签:text, search,url, telephone, email, date pickers,

number, range 以及color。

实例

Webpage: <input type="url"list="url_list" name="link" />

<datalist id="url_list">

<option label="W3Schools" value="http://www.w3school.com.cn"/>

<option label="Google"value="http://www.google.com" />

<option label="Microsoft"value="http://www.microsoft.com" />

</datalist>

min、max 和step 特点

min、max 和step 特点用于为包含数字或日期的input 类型规矩限制(束缚)。

max 特点规矩输入域所答应的最大值。

min 特点规矩输入域所答应的最小值。

step 特点为输入域规矩合法的数字距离(假如step="3",则合法的数是-3,0,3,6 等)。

注释:min、max 和step 特点适用于以下类型的<input> 标签:date pickers、number 以及

range。

下面的比方显现一个数字域,该域承受介于0 到10 之间的值,且步进为3(即合法的值

为0、3、6 和9):

实例

Points: <input type="number"name="points" min="0" max="10" step="3"/>

multiple 特点

multiple 特点规矩输入域中可选择多个值。

注释:multiple 特点适用于以下类型的<input> 标签:email 和file。

实例

Select images: <inputtype="file" name="img" multiple="multiple" />

novalidate 特点

novalidate 特点规矩在提交表单时不应该验证form 或input 域。

注释:novalidate 特点适用于<form> 以及以下类型的<input> 标签:text, search, url,

telephone, email, password, date pickers,range 以及color.

实例

<form action="demo_form.asp"method="get" novalidate="true">

E-mail: <input type="email"name="user_email" />

<input type="submit" />

</form>

pattern 特点

pattern 特点规矩用于验证input 域的形式(pattern)。

形式(pattern) 是正则表达式。您可以在咱们的JavaScript 教程中学习到有关正则表达式

的内容。

注释:pattern 特点适用于以下类型的<input> 标签:text, search,url, telephone, email 以及

password。

下面的比方显现了一个只能包含三个字母的文本域(不含数字及特别字符):

实例

Country code: <input type="text"name="country_code"

pattern="[A-z]{3}"title="Three letter country code" />

placeholder 特点

placeholder 特点供给一种提示(hint),描绘输入域所等待的值。

注释:placeholder 特点适用于以下类型的<input> 标签:text, search,url, telephone, email 以

及password。

提示(hint)会在输入域为空时显现呈现,会在输入域取得焦点时消失:

实例

<input type="search"name="user_search" placeholder="Search W3School" />

required 特点

required 特点规矩有必要在提交之前填写输入域(不能为空)。

注释:required 特点适用于以下类型的<input> 标签:text, search,url, telephone, email,

password, date pickers, number, checkbox,radio 以及file。

实例

Name: <input type="text"name="usr_name" required="required" />

HTML 5 参考手册

W3C 在1 月22 日发布了最新的HTML 5 作业草案。HTML 5 作业组包含AOL, Apple,

Google, IBM, Microsoft, Mozilla, Nokia, Opera以及数百个其他的开发商。HTML 5 中的一些

新特性:嵌入音频、视频、图片的函数、客户端数据存储,以及交互式文档。其他特性包

括新的页面元素,比方<header>, <section>,<footer>, 以及<figure>。

经过拟定怎样处理一切HTML 元素以及怎样从过错中康复的准确规矩,HTML 5 改进了互

操作性,并削减了开发本钱。

按字母顺序排列

• 4: 指示在HTML 4.01 中是否界说了该元素

• 5: 指示在HTML 5 中是否界说了该元素

标签描绘4 5

<!--...--> 界说注释。4 5

<!DOCTYPE> 界说文档类型。4 5

<a> 界说超链接。4 5

<abbr> 界说缩写。4 5

<acronym> HTML 5 中不支撑。界说首字母缩写。4

<address> 界说地址元素。4 5

<applet> HTML 5 中不支撑。界说applet。4

<area> 界说图画映射中的区域。4 5

<article> 界说article。5

<aside> 界说页面内容之外的内容。5

<audio> 界说声响内容。5

<b> 界说粗体文本。4 5

<base> 界说页面中一切链接的基准URL。4 5

<basefont> HTML 5 中不支撑。请运用CSS 替代。4

<bdo> 界说文本显现的方向。4 5

<big> HTML 5 中不支撑。界说大号文本。4

<blockquote> 界说长的引证。4 5

<body> 界说body 元素。4 5

<br> 刺进换行符。4 5

<button> 界说按钮。4 5

<canvas> 界说图形。5

<caption> 界说表格标题。4 5

<center> HTML 5 中不支撑。界说居中的文本。4

<cite> 界说引证。4 5

<code> 界说核算机代码文本。4 5

<col> 界说表格列的特点。4 5

<colgroup> 界说表格列的分组。4 5

<command> 界说指令按钮。5

<datalist> 界说下拉列表。5

<dd> 界说界说的描绘。4 5

<del> 界说删去文本。4 5

<details> 界说元素的细节。5

<dfn> 界说界说项目。4 5

<dir> HTML 5 中不支撑。界说目录列表。4

<div> 界说文档中的一个部分。4 5

<dl> 界说界说列表。4 5

<dt> 界说界说的项目。4 5

<em> 界说着重文本。4 5

<embed> 界说外部交互内容或插件。5

<fieldset> 界说fieldset。4 5

<figcaption> 界说figure 元素的标题。5

<figure> 界说前言内容的分组,以及它们的标题。5

<font> HTML 5 中不支撑。4

<footer> 界说section 或page 的页脚。5

<form> 界说表单。4 5

<frame> HTML 5 中不支撑。界说子窗口(结构)。4

<frameset> HTML 5 中不支撑。界说结构的集。4

<h1> to <h6> 界说标题1 到标题6。4 5

<head> 界说关于文档的信息。4 5

<header> 界说section 或page 的页眉。5

<hgroup> 界说有关文档中的section 的信息。5

<hr> 界说水平线。4 5

<html> 界说html 文档。4 5

<i> 界说斜体文本。4 5

<iframe> 界说行内的子窗口(结构)。4 5

<img> 界说图画。4 5

<input> 界说输入域。4 5

<ins> 界说刺进文本。4 5

<keygen> 界说生成密钥。5

<isindex> HTML 5 中不支撑。界说单行的输入域。4

<kbd> 界说键盘文本。4 5

<label> 界说表单控件的标示。4 5

<legend> 界说fieldset 中的标题。4 5

<li> 界说列表的项目。4 5

<link> 界说资源引证。4 5

<map> 界说图画映射。4 5

<mark> 界说有记号的文本。5

<menu> 界说菜单列表。4 5

<meta> 界说元信息。4 5

<meter> 界说预界说范围内的衡量。5

<nav> 界说导航链接。5

<noframes> HTML 5 中不支撑。界说noframe 部分。4

<noscript> 界说noscript 部分。4 5

<object> 界说嵌入方针。4 5

<ol> 界说有序列表。4 5

<optgroup> 界说选项组。4 5

<option> 界说下拉列表中的选项。4 5

<output> 界说输出的一些类型。5

<p> 界说阶段。4 5

<param> 为方针界说参数。4 5

<pre> 界说预格局化文本。4 5

<progress> 界说任何类型的使命的进展。5

<q> 界说短的引证。4 5

<rp> 界说若浏览器不支撑ruby 元素显现的内容。5

<rt> 界说ruby 注释的解说。5

<ruby> 界说ruby 注释。5

<s> HTML 5 中不支撑。界说加删去线的文本。4

<samp> 界说样本核算机代码。4 5

<script> 界说脚本。4 5

<section> 界说section。5

<select> 界说可选列表。4 5

<small> 界说小号文本。4 5

<source> 界说前言源。5

<span> 界说文档中的section。4 5

<strike> HTML 5 中不支撑。界说加删去线的文本。4

<strong> 界说着重文本。4 5

<style> 界说款式界说。4 5

<sub> 界说下标文本。4 5

<summary> 界说details 元素的标题。5

<sup> 界说上标文本。4 5

<table> 界说表格。4 5

<tbody> 界说表格的主体。4 5

<td> 界说表格单元。4 5

<textarea> 界说textarea。4 5

<tfoot> 界说表格的脚注。4 5

<th> 界说表头。4 5

<thead> 界说表头。4 5

<time> 界说日期/时刻。5

<title> 界说文档的标题。4 5

<tr> 界说表格行。4 5

<tt> HTML 5 中不支撑。界说打字机文本。4

<u> HTML 5 中不支撑。界说下划线文本。4

<ul> 界说无序列表。4 5

<var> 界说变量。4 5

<video> 界说视频。5

<xmp> HTML 5 中不支撑。界说预格局文本。4

HTML 5 规范特点

一切HTML 5 标签均支撑下面列出的特点,仅有少量破例。

HTML 5 规范特点

NEW:HTML 5 中新的规范特点。

注释:HTML 4.01 不再支撑accesskey 特点:

特点值描绘

accesskey character 规矩拜访元素的键盘快捷键

class classname 规矩元素的类名(用于规矩款式表中的类)。

contenteditabl

e

• true

• false 规矩是否答运用户修正内容。

contextmenu menu_id 规矩元素的上下文菜单。

data-yourvalue value

创作者界说的特点。

HTML 文档的创作者可以界说他们自己的特点。

有必要以"data-" 最初。

dir

• ltr

• rtl 规矩元素中内容的文本方向。

draggable

• true

• false

• auto 规矩是否答运用户拖动元素。

hidden hidden 规矩该元素是无关的。被躲藏的元素不会显现。

id id 规矩元素的仅有ID。

item

• empty

• url 用于组合元素。

itemprop

• url

• group

value 用于组合项目。

lang language_code规矩元素中内容的言语代码。言语代码参考手册。

spellcheck

• true

• false 规矩是否有必要对元素进行拼写或语法查看。

style style_definition规矩元素的行内款式。

subject id 规矩元素对应的项目。

tabindex number 规矩元素的tab 键操控次第。

title text 规矩有关元素的额定信息。

HTML 5 事情特点

规范事情特点

HTML 4 增加了经过事情触发浏览器中行为的才能,比方当用户点击某个元素时发动一段

JavaScript。

下面的表格列出了可刺进HTML 5 元素中以界说事情行为的规范事情特点。

Window 事情特点

window 方针触发的事情。

适用于<body> 标签:

特点值描绘

onafterprint script 在打印文档之后运转脚本

onbeforeprint script 在文档打印之前运转脚本

onbeforeonload script 在文档加载之前运转脚本

onblur script 当窗口失掉焦点时运转脚本

onerror script 当过错发作时运转脚本

onfocus script 当窗口取得焦点时运转脚本

onhaschange script 当文档改动时运转脚本

onload script 当文档加载时运转脚本

onmessage script 当触发音讯时运转脚本

onoffline script 当文档离线时运转脚本

ononline script 当文档上线时运转脚本

onpagehide script 当窗口躲藏时运转脚本

onpageshow script 当窗口可见时运转脚本

onpopstate script 当窗口历史记录改动时运转脚本

onredo script 当文档履行再履行操作(redo)时运转脚本

onresize script 当调整窗口巨细时运转脚本

onstorage script 当文档加载加载时运转脚本

onundo script 当文档履行吊销操作时运转脚本

onunload script 当用户脱离文档时运转脚本

表单事情

由HTML 表单内部的动作触发的事情。

适用于一切HTML 5 元素,不过最常用于表单元素中:

特点值描绘

onblur script 当元素失掉焦点时运转脚本

onchange script 当元素改动时运转脚本

oncontextmenu script 当触发上下文菜单时运转脚本

onfocus script 当元素取得焦点时运转脚本

onformchange script 当表单改动时运转脚本

onforminput script 当表单取得用户输入时运转脚本

oninput script 当元素取得用户输入时运转脚本

oninvalid script 当元素无效时运转脚本

onreset script 当表单重置时运转脚本。HTML 5 不支撑。

onselect script 当选取元素时运转脚本

onsubmit script 当提交表单时运转脚本

键盘事情

由键盘触发的事情。

适用于一切HTML 5 元素:

特点值描绘

onkeydown script 当按下按键时运转脚本

onkeypress script 当按下并松开按键时运转脚本

onkeyup script 当松开按键时运转脚本

鼠标事情

由鼠标货类似的用户动作触发的事情。

适用于一切HTML 5 元素:

特点值描绘

onclick script 当单击鼠标时运转脚本

ondblclick script 当双击鼠标时运转脚本

ondrag script 当拖动元素时运转脚本

ondragend script 当拖动操作完毕时运转脚本

ondragenter script 当元素被拖动至有用的拖放方针时运转脚本

ondragleave script 当元素脱离有用拖放方针时运转脚本

ondragover script 当元素被拖动至有用拖放方针上方时运转脚本

ondragstart script 当拖动操作开端时运转脚本

ondrop script 当被拖动元素正在被拖放时运转脚本

onmousedown script 当按下鼠标按钮时运转脚本

onmousemove script 当鼠标指针移动时运转脚本

onmouseout script 当鼠标指针移出元素时运转脚本

onmouseover script 当鼠标指针移至元素之上时运转脚本

onmouseup script 当松开鼠标按钮时运转脚本

onmousewheel script 当翻滚鼠标滚轮时运转脚本

onscroll script 当翻滚元素翻滚元素的翻滚条时运转脚本

前言事情

由视频、图画以及音频等前言触发的事情。

适用于一切HTML 5 元素,不过在前言元素(比如audio、embed、img、object 以及video)

中最常用:

特点值描绘

Onabort    script     当发作中指事情时运转脚本

Oncanplay  script     当时言可以开端播映但或许因缓冲而需求中止时运转脚本

Oncanplaythrough  script  当时言可以无需因缓冲而中止即可播映至完毕时运转脚本

Ondurationchange   script      当时言长度改动时运转脚本

Onemptied  script   当时言资源元素忽然为空时(网络过错、加载过错等)运转脚本

Onended   script     当时言已抵达完毕时运转脚本

Onerror    script     当在元素加载期间发作过错时运转脚本

Onloadeddata script  当加载前言数据时运转脚本

Onloadedmetadata  script 当时言元素的持续时刻以及其他前言数据已加载时运转脚本

Onloadstart  script   当浏览器开端加载前言数据时运转脚本

Onpause   script   当时言数据暂停时运转脚本

Onplay     script   当时言数据即将开端播映时运转脚本

Onplaying  script      当时言数据已开端播映时运转脚本

Onprogress    script     当浏览器正在取前言数据时运转脚本

Onratechange      script     当时言数据的播映速率改动时运转脚本

onreadystatechange    script   当安排妥当状况(ready-state)改动时运转脚本

Onseeked   script    当时言元素的定位特点[1] 不再为真且定位已完毕时运转脚本

Onseeking  script    当时言元素的定位特点为真且定位已开端时运转脚本

Onstalled   script     当取回前言数据过程中(推迟)存在过错时运转脚本

Onsuspend script     当浏览器已在取前言数据但在取回整个前言文件之前中止时运转脚本

Ontimeupdate     script     当时言改动其播映方位时运转脚本

Onvolumechange   script    当时言改动音量亦或当音量被设置为静音时运转脚本

Onwaiting   script       当时言已中止播映但计划持续播映时运转脚本

[1]:定位特点的英文译文是:seekingattribute。
文章来历:,作者:。假如您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:william.shi#bm88rs.com(邮箱中#请改为@)进行告发,并供给相关依据,一经查实,本社区将马上删去涉嫌侵权内容。
后台-体系设置-扩展变量-手机广告位-内容正文底部

引荐文章

抢手标签

    抢手文章 最新文章 文章云

站内导航

全站查找