HTML 5 从入门到精通-中文学习教程<!DOCTYPE> 标签 86<abbr > 标签 91<acronym > 标签 92<address > 标签 93<applet > 标签 95<area > 标签 95<article > 标签 98<aside > 标签 100<audio > 标签 100<b > 标签 101<base > 标签 102<basefont > 标签 103<bdo > 标签 104<blockquote > 标签 105<body > 标签 105<br /> 标签 106<button > 标签 107<canvas > 标签 109<caption > 标签 111<center > 标签 113<em > <strong > <dfn > <code > <samp > <kbd > <var > <cite > 标签 113<col > 标签 114<colgroup > 标签 117<command > 标签 119<datalist > 标签 120<dd > 标签 121<del > 标签 123<details > 标签 124<dir > 标签 125<div > 标签 125<dl > 标签 126<dt > 标签 128<embed > 标签 130<fieldset > 标签 131<figcaption > 标签 133<figure > 标签 134<font > 标签 135<footer > 标签 135<form > 标签 137<frame > 标签 139<frameset > 标签 139<h1 > 至 <h6 > 标签 140<head > 标签 141<header > 标签 143<hgroup > 标签 144<hr > 标签 146<html > 标签 147<i > 标签 149<iframe > 标签 150<img > 标签 151<input > 标签 155<ins > 标签 162<keygen > 标签 164<em > <strong > <dfn > <code > <samp > <kbd > <var > <cite > 标签 165<label > 标签 168<legend > 标签 170<li > 标签 172<link > 标签 177<map > 标签 179<mark > 标签 181<menu > 标签 182<meta > 标签 183<meter > 标签 188<nav > 标签 190<noframes > 标签 191<object > 标签 196<ol > 标签 197<optgroup > 标签 200<option > 标签 201<output > 标签 204<p > 标签 205<param > 标签 209<pre > 标签 210<progress > 标签 212<q > 标签 213<rp > 标签 214<rt > 标签 216<ruby > 标签 217<s > 标签 218<script > 标签 219 221 222 225 225 226 227 227 230 231 232 242 244 246 248 250 253 254 256 257 258 258 259 260 4 页, 总 261 页 05 -16 -2011 1.0 。於 2004 年被 WHATWG 提出，於 2007 年被 W3C 接纳， 并成立了新的 HTML 工作团队。在 2008 年 1 月 22 日，第一份正式草案已公布,预计将在 2010 年 9 月正式 向公众推荐。WHATWG 表示该规范是目前正在进行的工作，仍须多年的努力。"movie.ogg" controls="controls" >/video> th>6 7 8 9 3.5 5 页, 总 261 页 05 -16 -2011 3.5 , 3.6 4 3 3 , 4 , 5 6 10.5 10.5 10.6 11 3.1 , 4 , 5 3.1 3.1 , 4 , 5 3.5 3.5 , 3.6 4 3 3 , 4 , 5 6 10.5 10.5 10.6 11 3.5 3.5 , 3.6 4 6 页, 总 261 页 05 -16 -2011 3 3 , 4 , 5 10.5 10.5 10.6 11 4.4 4.4 + 3 ,4 ) Safari 1 ,2 ）不支持 HTML5 视频 3.2 ) Safari 2.1 , 2.2 2.3 .264 视频编码和 AAC 音频编码的 MPEG 4 文件。5 音频"someaudio.wav" >/audio> canvas><script type ="text/javascript" > var canvas=document.getElementById('myCanvas' );var ctx=canvas.getContext('2d' );'#FF0000' ;0 ,0 ,80 ,100 ); </script > <!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 5 4 5 4 5 5 11 页, 总 261 页 05 -16 -2011 4 5 5 中不支持。定义加删除线的文本。 4 4 5 4 5 4 5 5 4 5 4 5 4 5 4 5 4 5 4 5 4 5 4 5 5 4 5 4 5 5 中不支持。定义打字机文本。 4 5 中不支持。定义下划线文本。 4 4 5 var > 定义变量。 4 5 5 5 中不支持。定义预格式文本。 4 5 正在改变 Web5 并非 仅仅 用来表示 Web 内容，它的使命是将 Web 带入一个成熟的应用平台，在这个平台上，视频，音频，图象，动画， 以及同电脑的交互都被标准化。尽管 HTML 5 的实现还有很长的路要走，但 HTML 5 正在改变 Web。1999 年 12 月发布的 HTML 4.01 。自那以后，发生了很多事。最初的浏 览器战争已经结束，Netscape 灰飞烟灭，IE5 作为赢家后来又发展到 IE6, IE7,IE8 到 IE9。Mozilla Firefox 从 Netscape 的 死 灰 中 诞 生 ， 并跃居 第二 位。苹 果和 Google 各 自推出 自己 的浏览 器， 而小家 碧玉 的 Opera 仍然嘤嘤嗡嗡地活着，并以推动 Web 标准为己命。我们甚至在手机和游戏机上有了真正的 Web 体验，感谢 Opera，iPhone 以及 Google 已经推出的 Android。5 和其它标准被束之高阁，结果，HTML 5 一直以来都是以草案的面目示人。5 。这个 组织 独立 于 W3C，成员来自 Mozilla， KHTML/Webkit 项目组，Google，Apple，Opera 以及微软。尽管 HTML 5 草案不会在短期内获得认可，但 HTML 5 总算得以延续。12 页, 总 261 页 05 -16 -2011 5 将带来什么？以下是 HTML 5 草案中最激动人心的部分：5 是培育新 Web 标准的土壤，让各种设想在他的组织者之间 分享，但 HTML 5 目前仍处于试验阶段。5 是一个被寄予厚望的概念，它既是 WHATWG 组 织的实验田，又是 W3C 的标准之路。5 工作组中非常活跃， 我们对一些早期的细则进行实验并将成熟的结果提交 W3C。5 运动肇始于对 W3C 的不耐烦，Web 标准中的很多进展都因 W3C 将重点从5 的新实验在 Firefox 以及 基于 Webkit 的 Safari 和 Chrome 浏览器中逐渐得到强化， 但仍有不少问题。5 的本地数据库功能在 Chrome 的初期版本中并没有实现。因为 Chrome 的 沙箱机制和 Webkit 的数据库功能有冲突。5 类似的离线功能。5 对新浏览器来说是非常好的东西，但绝 大多数用户还使用旧浏览器。Gears 可以让那些旧浏览器也获得这样的 API，我们正在为 HTML 5 版 API 提供兼容。5 带向人们桌面的另外一条途径。5 。但 IE8 可能会做出改变。13 页, 总 261 页 05 -16 -2011 5 的一些提议感到担忧。 我觉得工作组的所有成员都会承认我们还有很多事要做。5 的诸多新功能。它拥有一个跨文档消息系统，本地 存储，以及一些离线事件来检测网络的中断。但还有些功能还未提上议程，如 Canvas。5 非常庞大，仍处在开发阶段，我认为浏览器厂商应当尽快达成一致，而每个浏览器的具体 实现时间可以自己选择。Web 开发者和浏览器厂商会同意 Wilson 的下面这句话，这确切无疑是一个 激动人心的时刻，我们希望看到 Web 成为新的应用平台。5 是下一代的 HTML。5 中的新特性，以及每种标签的使用。 每一章中的实例<html > <body > <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 > </body > </html > <!DOCTYPE HTML> <html > <body > <video width ="320" height ="240" controls ="controls" > <source src ="/i/movie.ogg" type ="video/ogg" > <source src ="/i/movie.mp4" type ="video/mp4" > Your browser does not support the video tag.</video > </body > </html > <video src ="movie.ogg" controls ="controls" > </video > <!DOCTYPE HTML> <html > <body > <video src ="/i/movie.ogg" width ="320" height ="240" controls ="controls" > Your browser does not support the video tag.</video > </body > </html > <video > 与 </video > 之间插入的内容是供不支持 video 元素的浏览器显示的： 实例<video src ="movie.ogg" width ="320" height ="240" controls ="controls" > Your browser does not support the video tag.</video > <!DOCTYPE HTML> <html > <body > <video width ="320" height ="240" controls ="controls" > <source src ="/i/movie.ogg" type ="video/ogg" > <source src ="/i/movie.mp4" type ="video/mp4" > Your browser does not support the video tag.</video > </body > </html > <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 > <!DOCTYPE HTML> <html > <body > <video width ="320" height ="240" controls ="controls" > <source src ="/i/movie.ogg" type ="video/ogg" > <source src ="/i/movie.mp4" type ="video/mp4" > Your browser does not support the video tag.</video > </body > </html > Internet Explorer<video > 标签的属性<video > 标签--http://www.w3school.com.cn/HTML 5/HTML 5_video.asp<audio src ="song.ogg" controls ="controls" > </audio > <audio > 与 </audio > 之间插入的内容是供不支持 audio 元素的浏览器显示的： 实例<audio src ="song.ogg" controls ="controls" > Your browser does not support the audio tag.</audio > TIY<!DOCTYPE HTML> <html > <body > <audio src ="/i/song.ogg" controls ="controls" > Your browser does not support the audio element.</audio > </body > </html > <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 > TIY<!DOCTYPE HTML> <html > <body > <audio controls ="controls" > <source src ="/i/song.ogg" type ="audio/ogg" > <source src ="/i/song.mp3" type ="audio/mpeg" > Your browser does not support the audio element.</audio > </body > </html > Internet Explorer<audio > 标签的属性<audio > 标签--http://www.w3school.com.cn/HTML 5/HTML 5_audio.asp<canvas id ="myCanvas" width ="200" height ="100" > </canvas > <script type ="text/javascript" > var c=document.getElementById("myCanvas" ); var cxt=c.getContext("2d" ); cxt.fillStyle="#FF0000" ; cxt.fillRect(0 ,0 ,150 ,75 ); </script > <!DOCTYPE HTML> <html > <head > <style type ="text/css" > body {font-size :70 %第 26 页, 总 261 页 05-16-2011 :verdana,helvetica,arial,sans-serif ;} </style > <script type ="text/javascript" > function cnvs_getCoordinates (e) "xycoordinates" ).innerHTML="Coordinates: (" + x + "," + y + ")" ;function cnvs_clearCoordinates () "xycoordinates" ).innerHTML="" ; </script > </head > <body style ="margin:0px;" > <p > 把鼠标悬停在下面的矩形上可以看到坐标：</p > <div id ="coordiv" style ="float:left;width:199px;height:99px;border:1px solid #c3c3c3" onmousemove ="cnvs_getCoordinates(event)" onmouseout ="cnvs_clearCoordinates()" > </div > <br /> <br /> <br /> <div id ="xycoordinates" > </div > </body > </html > <script type ="text/javascript" > var c=document.getElementById("myCanvas" ); var cxt=c.getContext("2d" ); cxt.moveTo(10 ,10 );150 ,50 ); cxt.lineTo(10 ,50 ); cxt.stroke();28 页, 总 261 页 05 -16 -2011 </script > canvas 元素：<canvas id ="myCanvas" width ="200" height ="100" style ="border:1px solid #c3c3c3;" > Your browser does not support the canvas element.</canvas > <!DOCTYPE HTML> <html > <body > <canvas id ="myCanvas" width ="200" height ="100" style ="border:1px solid #c3c3c3;" > Your browser does not support the canvas element.</canvas > <script type ="text/javascript" > var c=document.getElementById("myCanvas" ); var cxt=c.getContext("2d" ); cxt.moveTo(10 ,10 );150 ,50 ); cxt.lineTo(10 ,50 ); cxt.stroke();</script > </body > </html > <script type ="text/javascript" > var c=document.getElementById("myCanvas" ); var cxt=c.getContext("2d" ); cxt.fillStyle="#FF0000" ;70 ,18 ,15 ,0 ,Math .PI*2 ,true ); cxt.closePath();</script > canvas 元素：<canvas id ="myCanvas" width ="200" height ="100" style ="border:1px solid #c3c3c3;" > Your browser does not support the canvas element.</canvas > <!DOCTYPE HTML> <html > <body > <canvas id ="myCanvas" width ="200" height ="100" style ="border:1px solid #c3c3c3;" > Your browser does not support the canvas element.</canvas > <script type ="text/javascript" > var c=document.getElementById("myCanvas" ); var cxt=c.getContext("2d" ); cxt.fillStyle="#FF0000" ;70 ,18 ,15 ,0 ,Math .PI*2 ,true ); cxt.closePath();</script > </body > </html > <script type ="text/javascript" > var c=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;0 ,0 ,175 ,50 );</script > canvas 元素：<canvas id ="myCanvas" width ="200" height ="100" style ="border:1px solid #c3c3c3;" > </canvas > <!DOCTYPE HTML> <html > <body > <canvas id ="myCanvas" width ="200" height ="100" style ="border:1px solid #c3c3c3;" > Your browser does not support the canvas element.</canvas > <script type ="text/javascript" > var c=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;33 页, 总 261 页 05 -16 -2011 0 ,0 ,175 ,50 );</script > </body > </html > <script type ="text/javascript" > var c=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 canvas element.</canvas > <!DOCTYPE HTML> <html > <body > <canvas id ="myCanvas" width ="200" height ="100" style ="border:1px solid #c3c3c3;" > Your browser does not support the canvas element.</canvas > <script type ="text/javascript" > var c=document.getElementById("myCanvas" ); var cxt=c.getContext("2d" );var img=new Image() img.src="/i/eg_flower.png" cxt.drawImage(img,0 ,0 );</script > </body > <canvas > 标签--http://www.w3school.com.cn/HTML 5/HTML 5_canvas.asp<script type ="text/javascript" > 36 页, 总 261 页 05 -16 -2011 "Smith" ; document.write(localStorage.lastname);</script > <!DOCTYPE HTML> <html > <body > <script type ="text/javascript" > "Smith" ;"Last name: " + localStorage.lastname);</script > </body > </html > 下面的例子对用户访问页面的次数进行计数： 实例<script type ="text/javascript" > if (localStorage.pagecount)37 页, 总 261 页 05 -16 -2011 Number (localStorage.pagecount) +1 ;else 1 ;"Visits " + localStorage.pagecount + " time(s)." ); </script > <!DOCTYPE HTML> <html > <body > <script type ="text/javascript" > localStorage.lastname="Smith" ;"Last name: " + localStorage.lastname); </script > </body > </html > sessionStorage 方法<script type ="text/javascript" > sessionStorage.lastname="Smith" ; document.write(sessionStorage.lastname); </script > <!DOCTYPE HTML> <html > <body > <script type ="text/javascript" > if (localStorage.pagecount)Number (localStorage.pagecount) +1 ;else 1 ;"Visits: " + localStorage.pagecount + " time(s)." ); </script > <p > 刷新页面会看到计数器在增长。</p > <p > 请关闭浏览器窗口，然后再试一次，计数器会继续计数。</p > </body > </html > <script type ="text/javascript" > if (sessionStorage.pagecount)Number (sessionStorage.pagecount) +1 ;else 1 ;"Visits " +sessionStorage.pagecount+" time(s) this session." ); </script > <!DOCTYPE HTML> <html > <body > <script type ="text/javascript" > if (sessionStorage.pagecount)Number (sessionStorage.pagecount) +1 ;else 1 ;"Visits " + sessionStorage.pagecount + " time(s) this session." ); </script > <p > 刷新页面会看到计数器在增长。</p > <p > 请关闭浏览器窗口，然后再试一次，计数器已经重置了。</p > </body > </html > <input type ="email" name ="user_email" /> <!DOCTYPE HTML> <html > <body > <form action ="/example/HTML 5/demo_form.asp" method ="get" > E-mail: <input type ="email" name ="user_email" /> <br /> <input type ="submit" /> </form > </body > </html > <input type ="url" name ="user_url" /> <!DOCTYPE HTML> <html > <body > <form action ="/example/HTML 5/demo_form.asp" method ="get" > Homepage: <input type ="url" name ="user_url" /> <br /> <input type ="submit" /> </form > </body > </html > <input type ="number" name ="points" min ="1" max ="10" /> <!DOCTYPE HTML> <html > <body > <form action ="/example/HTML 5/demo_form.asp" method ="get" > Points: <input type ="number" name ="points" min ="1" max ="10" /> <input type ="submit" /> </form > </body > </html > <!DOCTYPE HTML> <html > <body > <form action ="/example/HTML 5/demo_form.asp" method ="get" > <input type ="number" name ="points" min ="0" max ="10" step ="3" value ="6" /> <input type ="submit" /> </form > </body > </html > <input type ="range" name ="points" min ="1" max ="10" /> <!DOCTYPE HTML> <html > <body > <form action ="/example/HTML 5/demo_form.asp" method ="get" > Date: <input type ="date" name ="user_date" /> <input type ="submit" /> </form > </body > </html > <input type ="date" name ="user_date" /> <!DOCTYPE HTML> <html > <body > <form action ="/example/HTML 5/demo_form.asp" method ="get" > Date: <input type ="date" name ="user_date" /> <input type ="submit" /> </form > </body > </html > <!DOCTYPE HTML> <html > <body > <form action ="/example/HTML 5/demo_form.asp" method ="get" > Month: <input type ="month" name ="user_date" /> <input type ="submit" /> </form > </body > </html > <!DOCTYPE HTML> <html > <body > <form action ="/example/HTML 5/demo_form.asp" method ="get" > Week: <input type ="week" name ="user_date" /> <input type ="submit" /> </form > </body > </html > <!DOCTYPE HTML> <html > <body > <form action ="/example/HTML 5/demo_form.asp" method ="get" > Time: <input type ="time" name ="user_date" /> <input type ="submit" /> </form > </body > </html > <!DOCTYPE HTML> <html > <body > <form action ="/example/HTML 5/demo_form.asp" method ="get" > Date and time: <input type ="datetime" name ="user_date" /> <input type ="submit" /> </form > </body > </html > <!DOCTYPE HTML> <html > <body > <form action ="/example/HTML 5/demo_form.asp" method ="get" > Date and time: <input type ="datetime-local" name ="user_date" /> <input type ="submit" /> </form > </body > </html > <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 > <!DOCTYPE HTML> <html > <body > <form action ="/example/HTML 5/demo_form.asp" method ="get" > 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 > <input type ="submit" /> </form > </body > </html > <form action ="demo_form.asp" method ="get" > Username: <input type ="text" name ="usr_name" /> <keygen name ="security" /> <input type ="submit" /> </form > <!DOCTYPE HTML> <html > <body > <form action ="/example/HTML 5/demo_form.asp" method ="get" > Username: <input type ="text" name ="usr_name" /> <keygen name ="security" /> <input type ="submit" /> </form > </body > </html > <output id ="result" onforminput ="resCalc()" > </output > <!DOCTYPE HTML> <html > <head > <script type ="text/javascript" > function resCalc () "num_a" ).value; numB=document.getElementById("num_b" ).value; document.getElementById("result" ).value=Number (numA)+Number (numB); </script > </head > <body > <p > 使用 output 元素的简易计算器：</p > <form onsubmit ="return false" > <input id ="num_a" /> +<input id ="num_b" /> =<output id ="result" onforminput ="resCalc()" > </output > </form > </body > </html > <form > 和 <input > 元素的新属性。 新的 form 属性：<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 /> <input type ="text" name ="lname" /> <br /> <input type ="email" name ="email" autocomplete ="off" /> <br /> <input type ="submit" /> </form > <!DOCTYPE HTML> <html > <body > <form action ="/example/HTML 5/demo_form.asp" method ="get" autocomplete ="on" > First name:<input type ="text" name ="fname" /> <br /> <input type ="text" name ="lname" /> <br /> <input type ="email" name ="email" autocomplete ="off" /> <br /> <input type ="submit" /> </form > <p > 请填写并提交此表单，然后重载页面，来查看自动完成功能是如何工作的。</p > <p > 请注意，表单的自动完成功能是打开的，而 e-mail 域是关闭的。</p > </body > </html > 注释：在某些浏览器中，您可能需要启用自动完成功能，以使该属性生效。 autofocus 属性<input > 标签的类型。 实例<input type ="text" name ="user_name" autofocus ="autofocus" /> <!DOCTYPE HTML> <html > <body > <form action ="/example/HTML 5/demo_form.asp" method ="get" > <input type ="text" name ="user_name" autofocus ="autofocus" /> <input type ="submit" /> </form > </body > </html > 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 > <input type ="text" name ="lname" form ="user_form" /> <!DOCTYPE HTML> <html > <body > <form action ="/example/HTML 5/demo_form.asp" method ="get" id ="user_form" > First name:<input type ="text" name ="fname" /> <input type ="submit" /> </form > <p > 下面的输入域在 form 元素之外，但仍然是表单的一部分。</p > <input type ="text" name ="lname" form ="user_form" /> </body > </html > 注释：如需引用一个以上的表单，请使用空格分隔的列表。 表单重写属性<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 > <!DOCTYPE HTML> <html > <body > <form action ="/example/HTML 5/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 ="/example/HTML 5/demo_admin.asp" value ="Submit as admin" /> <br /> <input type ="submit" formnovalidate ="true" value ="Submit without validation" /> <br /> </form > </body > </html > 注释：这些属性对于创建不同的提交按钮很有帮助。 height 和 width 属性<input > 标签。<input type ="image" src ="img_submit.gif" width ="99" height ="99" /> <!DOCTYPE HTML> <html > <body > <form action ="/example/HTML 5/demo_form.asp" method ="get" > User name: <input type ="text" name ="user_name" /> <br /> <input type ="image" src ="/i/eg_submit.jpg" width ="99" height ="99" /> </form > </body > </html > <input > 标签：text, search, url, telephone, email, date pickers, number, range 以及 color。<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 > <!DOCTYPE HTML> <html > <body > <form action ="/example/HTML 5/demo_form.asp" method ="get" > 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 > <input type ="submit" /> </form > </body > </html > <input > 标签：date pickers、number 以及 range。 下面的例子显示一个数字域，该域接受介于 0 到 10 之间的值，且步进为 3（即合法的值为 0、3、6 和 9）： 实例<input type ="number" name ="points" min ="0" max ="10" step ="3" /> <!DOCTYPE HTML> <html > <body > <form action ="/example/HTML 5/demo_form.asp" method ="get" > <input type ="number" name ="points" min ="0" max ="10" step ="3" /> <input type ="submit" /> </form > </body > </html > <input > 标签：email 和 file。 实例<input type ="file" name ="img" multiple ="multiple" /> <!DOCTYPE HTML> <html > <body > <form action ="/example/HTML 5/demo_form.asp" method ="get" > <input type ="file" name ="img" multiple ="multiple" /> <input type ="submit" /> </form > <p > 当您浏览文件时，请试着选择多个文件。</p > </body > </html > <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 > <!DOCTYPE HTML> <html > <body > <form action ="/example/HTML 5/demo_form.asp" method ="get" novalidate ="true" > E-mail: <input type ="email" name ="user_email" /> <input type ="submit" /> </form > </body > </html > <input > 标签： text, search, url, telephone, email 以及 <input type ="text" name ="country_code" pattern ="[A-z]{3}" title ="Three letter country code" /> <!DOCTYPE HTML> <html > <body > <form action ="/example/HTML 5/demo_form.asp" method ="get" > <input type ="text" name ="country_code" pattern ="[A-z]{3}" title ="Three letter country code" /> <input type ="submit" /> </form > </body > </html > <input > 标签：text, search, url, telephone, email 以及<input type ="search" name ="user_search" placeholder ="Search W3School" /> <!DOCTYPE HTML> <html > <body > <form action ="/example/HTML 5/demo_form.asp" method ="get" > <input type ="search" name ="user_search" placeholder ="Search W3School" /> <input type ="submit" /> </form > </body > </html > <input > 标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。<input type ="text" name ="usr_name" required ="required" /> <!DOCTYPE HTML> <html > <body > <form action ="/example/HTML 5/demo_form.asp" method ="get" > Name: <input type ="text" name ="usr_name" required ="required" /> <input type ="submit" /> </form > </body > </html > <nav > , <header > , <footer > 以及 <figure > 等等。<!DOCTYPE> <a > <abbr > <acronym > <address > <applet > <area > <article > <aside > <audio > <b > <base > <basefont > <bdo > <big > <blockquote > <body > <br > <button > <canvas > <caption > <center > <cite > <code > <col > <colgroup > <command > <datalist > <dd > <del > <details > <dfn > <dir > <div > <dl > <dt > <em > <embed > <fieldset > <figcaption > <figure > <font > <footer > <form > <frame > <frameset > <h1 > to <h6 > <head > <header > <hgroup > <hr > <html > <i > <iframe > <img > <input > <ins > <keygen > <isindex > <kbd > <label > <legend > <li > <link > <map > <mark > <menu > <meta > <meter > <nav > <noframes > <noscript > <object > <ol > <optgroup > <option > <output > <p > <param > <pre > <progress > <q > <rp > <rt > <ruby > <s > <samp > <script > 4 5 75 页, 总 261 页 05 -16 -2011 5 4 5 4 5 5 4 5 5 中不支持。定义加删除线的文本。 4 4 5 4 5 4 5 5 4 5 4 5 4 5 4 5 4 5 4 5 4 5 76 页, 总 261 页 05 -16 -2011 4 5 5 4 5 4 5 5 中不支持。定义打字机文本。 4 5 中不支持。定义下划线文本。 4 4 5 var > 4 5 5 5 中不支持。定义预格式文本。 4 77 页, 总 261 页 05 -16 -2011 class classname 规定元素的类名（用于规定样式表中的类）。true false "data-" 开头。true false 78 页, 总 261 页 05 -16 -2011 5 标准属性5 标签均支持下面列出的属性，仅有少数例外。5 标准属性5 中新的标准属性。4.01 不再支持 accesskey 属性：5 事件属性4 增加了通过事件触发浏览器中行为的能力，比如当用户点击某个元素时启动一段 JavaScript。 如果需要学习更多有关使用这些事件进行编程的内容，请学习我们的 JavaScript 教程 和 DHTML 教程。 下面的表格列出了可插入 HTML 5 元素中以定义事件行为的标准事件属性。79 页, 总 261 页 05 -16 -2011 80 页, 总 261 页 05 -16 -2011 5 元素，不过最常用于表单元素中：81 页, 总 261 页 05 -16 -2011 5 不支持。5 元素：5 元素：82 页, 总 261 页 05 -16 -2011 5 元素，不过在媒介元素（诸如 audio、embed、img、object 以及 video）中最常用：83 页, 总 261 页 05 -16 -2011 1 ] 不再为真且定位已结束时运行脚本84 页, 总 261 页 05 -16 -2011 1 ]：定位属性的英文译文是：seeking attribute。5 标签4.01 与 HTML 5 之间的差异<p > This is a regular paragraph</p > <html > <body > <p > 这是一段普通的段落。</p > </body > </html > <!DOCTYPE> 标签<!DOCTYPE> 声明必须位于 HTML 5 文档中的第一行，也就是位于 <html > 标签之前。该标签告知浏览 器文档所使用的 HTML 规范。<!DOCTYPE HTML> <html > <head > <title > Title of the document</title > </head > <body > </body > </html > <!DOCTYPE HTML> <html > <head > <title > Title of the document</title > </head > <body > </body > </html > <!DOCTYPE HTML> <!DOCTYPE> 标签没有结束标签！ 提示：<!DOCTYPE> 对大小写不敏感。 属性<a > 标签定义超链接，用于从一个页面链接到另一个页面。<a > 元素最重要的属性是 href 属性，它指定链接的目标。 在所有浏览器中，链接的默认外观是： 未被访问的链接带有下划线而且是蓝色的 已被访问的链接带有下划线而且是紫色的 活动链接带有下划线而且是红色的<a href ="http://www.sina.com.cn" > Sina</a > <!DOCTYPE HTML> <html > <body > <a href =" http://www.sina.com.cn " > Visit sina.com.cn!</a > </body > </html > <a > 标签既可以是超链接，也可以是锚。这取决于是否描述了 href 属性。 在 HTML 5 中，<a > 是超链接，但是假如没有 href 属性，它仅仅是超链接的一个占位符。 HTML 5 有一些新的属性，同时不再支持一些 HTML 4.01 的属性。<a > 标签支持 HTML 5 中的标准属性。 事件属性<a > 标签支持 HTML 5 中的事件属性。<abbr > 标签<abbr > 标签最初是在 HTML 4.0 中引入的，表示它所包含的文本是一个更长的单词或短语的缩写形式。<abbr > 标签中包含的文本还没有任何处理方式，但是我们无法预测将来的版本将会如何实现该标签。 实例<abbr title ="People's *" > PRC</abbr > was founded in 1948.<!DOCTYPE HTML> <html > <body > <abbr title ="People's *" > PRC</abbr > was founded in 1949.</body > </html > <abbr > 标签支持 HTML 5 中的标准属性。 事件属性<abbr > 标签支持 HTML 5 中的事件属性。<acronym > 标签<acronym > 标签定义首字母缩写词，比如 "NASA"。通过对只取首字母缩写进行标记，您就能够为浏览器、 拼写检查程序、翻译系统以及搜索引擎分度器提供有用的信息。<acronym > 。请使用 <abbr > 代替。 例子：<acronym title ="World Wide Web" > WWW</acronym > <address > 标签<address > 标签定义文档作者或拥有者的联系信息。<address > 元素位于 <article > 元素内部，则它表示该文章作者或拥有者的联系信息。 实例<address > <br /> <a href ="mailto:us@example.org" > Email us</a > <br /> Address: Box 564, Disneyland<br /> </address > <!DOCTYPE HTML> <html > <body > <address > <br /> <a href ="mailto:us@example.org" > Email us</a > <br /> <br /> </address > </body > </html > <article > 标签，因此在 HTML 4.01 中 <address > 标签永远定义文档作者或拥有 者的联系信息。<address > 标签来描述邮政地址，除非这些信息是联系信息的组成部分。 注释：<address > 元素通常呈现为斜体。大多数浏览器会在该元素的前后添加换行。 标准属性<address > 标签支持 HTML 5 中的标准属性。 事件属性<address > 标签支持 HTML 5 中的事件属性。<applet > 标签<applet > 定义嵌入的 applet。 HTML 4.01 与 HTML 5 之间的差异<object > 代替。<area > 标签<area > 标签定义图像映射中的区域。<img src ="planets.gif" alt ="Planets" usemap ="#planetmap" /> <map id ="planetmap" > <area shape ="rect" coords ="0,0,82,126" href ="sun.htm" alt ="Sun" /> <area shape ="circle" coords ="90,58,3" href ="mercur.htm" alt ="Mercury" /> <area shape ="circle" coords ="124,58,8" href ="venus.htm" alt ="Venus" /> </map > <html > <body > <p > 请点击图像上的星球，把它们放大。</p > <img /i /eg_planets.jpg "border ="0" usemap ="#planetmap" alt ="Planets" /> <map name ="planetmap" id ="planetmap" > <area ="/example/html/venus.html" target ="_blank" alt ="Venus" /> <area ="/example/html/mercur.html" target ="_blank" 97 页, 总 261 页 05-16-2011 alt ="Mercury" /> <area ="/example/html/sun.html" target ="_blank" alt ="Sun" /> </map > <p > <b > 注释：</b > img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏 览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p > </body > </html > <article > 标签<article > 标签定义外部的内容。<article > <a href ="http://www.apple.com" > Safari 5 released</a > <br /> </article > <!DOCTYPE HTML> <html > <body > <article > <a href ="http://www.apple.com" > Safari 5 released</a > <br /> </article > </body > </html > <article > 标签是 HTML 5 的新标签。 提示和注释：<article > 标签的内容独立于文档的其余部分。 标准属性<article > 标签支持 HTML 5 中的标准属性。 事件属性<article > 标签支持 HTML 5 中的事件属性。<aside > 标签<aside > 标签定义 article 以外的内容。aside 的内容应该与 article 的内容相关。 实例<p > Me and my family visited The Epcot center this summer.</p > <aside > <h4 > Epcot Center</h4 > </aside > <aside > 标签是 HTML 5 的新标签。 提示和注释：<aside > 的内容可用作文章的侧栏。 标准属性<article > 标签支持 HTML 5 中的标准属性。 事件属性<article > 标签支持 HTML 5 中的事件属性。<audio > 标签<audio > 标签定义声音，比如音乐或其他音频流。 实例<audio src ="someaudio.wav" > </audio > <audio > 标签是 HTML 5 的新标签。 提示和注释<b > 标签<b > 标签定义粗体的文本。<b > 标签定义了文本中的部分比其余的部分更重要，并呈现为粗体。 实例<b > red</b > door<b > 标签定义文本中更重要的部分。<base > 标签<base > 标签为页面上的所有链接规定默认地址或默认目标。 通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。<base > 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL，而使用指定的基本 URL 来解 析所有的相对 URL。这其中包括 <a > 、<img > 、<link > 、<form > 标签中的 URL。<base > 标签必须位于 head 元素内部。 实例<img src ="http://www.w3school.com.cn/i/pic.gif" /> <base > 标签，规定页面中所有链接的基准 url：<head > <base href ="http://www.w3school.com.cn/i/" /> </head > <img src ="pic.gif" /> <head > <base href ="http://www.w3school.com.cn/css/" target ="_blank" /> </head > <body > <a href ="default.asp" > W3School's CSS Tutorial</a > </body > <base > 标签排在 head 元素中第一个元素的位置，这样 head 中其他元素就可以利用<base > 元素中的信息了。<base > 元素。 属性<basefont > 标签<basefont > 标签定义基准字体。<basefont > 标签。请用 CSS 代替。<bdo > 标签<bdo > 标签覆盖默认的文本方向。 实例<bdo dir ="rtl" > Here is some text</bdo > <bdo > 标签支持 HTML 5 中的标准属性。 事件属性<bdo > 标签支持 HTML 5 中的事件属性。<big > 标签 定义和用法<big > 标签制作更大的文本。<big > 标签。请用 CSS 代替。<blockquote > 标签<blockquote > 标签定义摘自另一个源的块引用。<blockquote > 与 </blockquote > 之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行 缩进，而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。<blockquote > 帝国主义都是纸老虎 ... </blockquote > <q > 元素。 注释：blockquote 只应该应用于来自另一个源的引用。<blockquote > 标签支持 HTML 5 中的标准属性。 事件属性<blockquote > 标签支持 HTML 5 中的事件属性。<body > 标签<body > 元素定义文档的主体。<body > 元素包含文档的所有内容，比如文本、超链接、图像、表格、列表等等。 实例<html > <head > <title > 文档的标题</title > </head > <body > </body > </html > <body > 的特殊属性。而那些属性在 HTML 4.01 中是不被赞成使用的。 标准属性<body > 标签支持 HTML 5 中的标准属性。 事件属性<body > 标签支持 HTML 5 中的事件属性。<br /> 标签<br /> 标签插入简单的换行符。<br /> 标签是一个空标签，意味着它没有结束标签。所以这样是错误的：<br > </br > 实例<br /> a line break<br /> 标签来输入空行，而不是分隔段落。 标准属性<br /> 标签支持 HTML 5 中的标准属性。 事件属性<br /> 标签支持 HTML 5 中的事件属性。<button > 标签<button > 标签定义按钮。<button type ="button" > Click Me!</button > <button > 标签支持 HTML 5 中的标准属性。 事件属性<button > 标签支持 HTML 5 中的事件属性。<canvas > 标签<canvas > 标签定义图形，比如图表和其他图像。 实例<canvas id ="myCanvas" > </canvas > <script type ="text/javascript" > var canvas=document.getElementById('myCanvas' ); var ctx=canvas.getContext('2d' ); ctx.fillStyle='#FF0000' ;0 ,0 ,80 ,100 ); </script > <canvas > 标签是 HTML 5 中的新标签。<canvas > 的历史<canvas > 标记由 Apple 在 Safari 1.3 Web 浏览器中引入。对 HTML 的这一根本扩展的原因在于， HTML 在 Safari 中的绘图能力也为 Mac OS X 桌面的 Dashboard 组件所使用，并且 Apple 希望有一种 方式在 Dashboard 中支持脚本化的图形。<canvas > 标记。 我们甚至可以在 IE 中使用 <canvas > 标记，并在 IE 的 VML 支持的基础上用开源的 JavaScript 代码<canvas > 的标准化的努力由一个 Web 浏览器厂商的非正式协会在推进，目前 <canvas > 已经成为<canvas > 标记和 SVG 以及 VML 之间的差异<canvas > 标记和 SVG 以及 VML 之间的一个重要的不同是，<canvas > 有一个基于 JavaScript 的绘 图 API，而 SVG 和 VML 使用一个 XML 文档来描述绘图。<canvas > 标记中移除元素，往往需要擦掉绘图重新绘制它。 如何使用 <canvas > 标记绘图<canvas > 元素本身上，而是定义在通过画布的 getContext() 方 法获得的一个“绘图环境”对象上。<canvas > 图形，必须要么自己绘制它再用位图图像合并它，或者在 <canvas > 上方使用 CSS 定位来覆盖 HTML 文 本。<canvas > 标签支持 HTML 5 中的标准属性。 事件属性<canvas > 标签支持 HTML 5 中的事件属性。 参阅<caption > 标签<caption > 标签定义表格标题。<caption > 标签必须紧随 <table > 标签之后。 <table > <caption > This is a caption</caption > <tr > <td > Cell 1</td > <td > Cell 2</td > </tr > </table > 属性<center > 标签<center > 标签对其包围的文本进行水平居中处理。 HTML 4.01 与 HTML 5 之间的差异<em > <strong > <dfn > <code > <samp > <kbd > <var > <cite > 标签 定义和用法 以下元素都是短语元素。并不返回使用它们，但是通过使用样式表，可能取得更丰富的效果。<em > 呈现为被强调的文本。<strong > 定义重要的文本。<dfn > 定义一个定义项目。<code > 定义计算机代码文本。<samp > 定义样本文本。<kbd > 定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。<var > 定义变量。您可以将此标签与 <pre > 及 <code > 标签配合使用。<cite > 定义引用。可使用该标签对参考文献的引用进行定义，比如书籍或杂志的标题。<strong > 定义语气更重的强调文本，但是在 HTML 5 中，<strong > 定义重要的文本。 属性<col > 标签<col > 标签为表格中的一个或多个列定义属性值。您只能在表格或列组中使用该元素。 HTML 4.01 与 HTML 5 之间的差异<colgroup > 元素。 例子：<table > <col style ="color:blue" /> <col span ="2" style ="color:yellow" /> <tr > <td > 1</td > <td > 2</td > <td > 3</td > <td > 4</td > </tr > <tr > <td > 1</td > <td > 2</td > <td > 3</td > <td > 4</td > </tr > </table > 属性<col > 应当横跨的列数。 4 5<colgroup > 标签<colgroup > 标签定义表格列的组。通过此标签，您可以对列进行组合，以便格式化。该元素只有在 <table > 中 才是合法的。<table > <colgroup span ="3" style ="color:blue" > </colgroup > <tr > <td > 1</td > <td > 2</td > <td > 3</td > <td > 4</td > </tr > <tr > <td > 1</td > <td > 2</td > <td > 3</td > <td > 4</td > </tr > </table > 属性<colgroup > 应当横跨的列数。 4 5<command > 标签<command > 标签定义命令按钮，比如单选按钮、复选框或按钮。 实例<menu > <command type ="command" > Click Me!</command > </menu > 亲自试一试<command > 标签是 HTML 5 中的新标签。 属性<command > 标签支持 HTML 5 中的标准属性。 事件属性<command > 标签支持 HTML 5 中的事件属性。<datalist > 标签<datalist > 标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。 datalist 及其选项不会被想显示出来，它仅仅是合法的输入值列表。<input id ="myCar" list ="cars" /> <datalist id ="cars" > <option value ="BMW" > <option value ="Ford" > <option value ="Volvo" > </datalist > 亲自试一试<datalist > 标签是 HTML 5 中的新标签。 标准属性<datalist > 标签支持 HTML 5 中的标准属性。 事件属性<datalist > 标签支持 HTML 5 中的事件属性。<dd > 标签<dd > 标签定义一个定义列表中对项目的描述。 HTML 4.01 与 HTML 5 之间的差异<dl > <dt > Coffee</dt > <dd > Black hot drink</dd > <dt > Milk</dt > <dd > White cold drink</dd > </dl > 属性 标准属性<html > <body > <h2 > 一个定义列表：</h2 > <dl > <dt > 计算机</dt > <dd > 用来计算的仪器 ... ...</dd > <dt > 显示器</dt > <dd > 以视觉方式显示信息的装置 ... ...</dd > </dl > </body > </html > 本例演示一个定义列表。<del > 标签<del > 标签定义文档中已删除的文本。 实例<del > 21</del > 12 pieces 亲自试一试<!DOCTYPE HTML> <html > <body > <p > a dozen is <del > 21</del > 12 pieces</p > </body > </html > <ins > 一起使用，描述文档中的更新和修正。 属性<del > 标签支持 HTML 5 中的标准属性。 事件属性<del > 标签支持 HTML 5 中的事件属性。<details > 标签<details > 标签用于描述文档或文档某个部分的细节。 实例<details > This document was written in 2010.</details > 亲自试一试<!DOCTYPE HTML> <html > <body > <details > This document was written in 2010.</details > </body > </html > <details > 标签是 HTML 5 中的新标签。 提示和注释<summary > 标签配合使用可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details。<details > 标签支持 HTML 5 中的标准属性。 事件属性<details > 标签支持 HTML 5 中的事件属性。<dir > 标签<dir > 标签定义目录列表。<dir > 标签。 HTML 5 不支持 <dir > 标签。请用 CSS 代替。<div > 标签<div > 标签定义文档中的 division/section。 HTML 4.01 与 HTML 5 之间的差异<div > 标签对块级元素进行组合，这样就可以使用样式对它们进行格式化。 属性<dl > 标签<dl > 标签定义一个定义列表。 HTML 4.01 与 HTML 5 之间的差异 无。<dl > <dt > Coffee</dt > <dd > Black hot drink</dd > <dt > Milk</dt > <dd > White cold drink</dd > </dl > 属性<html > <body > <h2 > 一个定义列表：</h2 > <dl > <dt > 计算机</dt > <dd > 用来计算的仪器 ... ...</dd > <dt > 显示器</dt > <dd > 以视觉方式显示信息的装置 ... ...</dd > </dl > </body > </html > <dt > 标签<dt > 标签定义一个定义列表中的一个项目，以及 dialog 中的角色。 HTML 4.01 与 HTML 5 之间的差异<dialog > 标签。在 dialog 中，<dt > 标签定义句子所属的角色。参见例子 2。 例子<dl > <dt > Coffee</dt > <dd > Black hot drink</dd > <dt > Milk</dt > <dd > White cold drink</dd > </dl > 例子 2<dialog > <dt > 老师</dt > <dd > 2+2 等于？</dd > <dt > 学生</dt > <dd > 4</dd > <dt > 老师</dt > <dd > 答对了！</dd > </dialog > <html > <body > <h2 > 一个定义列表：</h2 > <dl > <dt > 计算机</dt > <dd > 用来计算的仪器 ... ...</dd > <dt > 显示器</dt > <dd > 以视觉方式显示信息的装置 ... ...</dd > </dl > </body > </html > <embed > 标签<embed > 标签定义嵌入的内容，比如插件。 实例<embed src ="helloworld.swf" /> 亲自试一试<!DOCTYPE HTML> <html > <body > <embed src ="/i/helloworld.swf" /> </body > </html > <embed > 标签是 HTML 5 中的新标签。 提示和注释<embed > 标签必须有 src 属性。<audio > 和<video > 。 属性<embed > 标签支持 HTML 5 中的标准属性。 事件属性<embed > 标签支持 HTML 5 中的事件属性。<fieldset > 标签<fieldset > 标签将表单内容的一部分打包，生成一组相关表单的字段。<fieldset > 标签没有必需的或唯一的 属性。<fieldset > 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效 果，或者甚至可创建一个子表单来处理这些元素。<html > <body > <fieldset > <legend > 健康信息：</legend > <form > <label > 身高：<input type ="text" /> </label > <label > 体重：<input type ="text" /> </label > </form > </fieldset > <p > 如果表单周围没有边框，说明您的浏览器太老了。</p > </body > </html > <figcaption > 标签<figcaption > 标签定义 figure 元素的标题。<figure > <figcaption > PRC</figcaption > <p > The People's * was born in 1949...</p > </figure > TIY 实例<!DOCTYPE HTML> <html > <body > <figure > <figcaption > PRC</figcaption > <p > The People's * was born in 1949...</p > </figure > </body > </html > <figcaption > 标签是 HTML 5 中的新标签。 提示和注释<figcaption > 标签支持 HTML 5 中的标准属性。 事件属性<figcaption > 标签支持 HTML 5 中的事件属性。<figure > 标签<figure > 标签用于对元素进行组合。 实例<figure > <h1 > PRC</h1 > <p > The People's * was born in 1949...</p > </figure > TIY 实例<!DOCTYPE HTML> <html > <body > <figure > <h1 > PRC</h1 > <p > The People's * was born in 1949...</p > </figure > </body > </html > <figure > 标签是 HTML 5 中的新标签。 提示和注释<figcaption > 元素为元素组添加标题。 标准属性<figure > 标签支持 HTML 5 中的标准属性。 事件属性<figure > 标签支持 HTML 5 中的事件属性。<font > 标签<font > 标签规定文本的字体外观、字体尺寸和字体颜色。不要使用该元素，请使用 CSS 向元素添加样式。 HTML 4.01 与 HTML 5 之间的差异<footer > 标签<footer > 标签定义 section 或 document 的页脚。<footer > This document was written in 2010</footer > 亲自试一试代码：<!DOCTYPE HTML> <html > <body > <footer > This document was written in 2010.</footer > </body > </html > <footer > 标签是 HTML 5 中的新标签。 提示和注释<address > 元素。 标准属性<footer > 标签支持 HTML 5 中的标准属性。 事件属性<footer > 标签支持 HTML 5 中的事件属性。<form > 标签<form > 标签创建供用户输入的表单。 form 元素包含一个或多个表单元素： button<form action ="form_action.asp" > <input type ="text" name ="fname" value ="Mickey" /> <br /> Last name:<input type ="text" name ="lname" value ="Mouse" /> <br /> <input type ="submit" value ="Submit" /> </form > 亲自试一试代码：<!DOCTYPE HTML> <html > <body > <form action ="/html5/form_action.asp" > <input type ="text" name ="fname" value ="Mickey" /> <br /> <input type ="text" name ="lname" value ="Mouse" /> <br /> <input type ="submit" value ="Submit" /> </form > <p > 点击"提交"按钮，输入的数据会发送到服务器上名为 "form_action.asp" 的页面。</p > </body > </html > <form > 标签支持 HTML 5 中的标准属性。 事件属性<form > 标签支持 HTML 5 中的事件属性。<frame > 标签<frame > 标签定义子窗口（框架）。<frame > 标签没有得到支持。 HTML 4.01 与 HTML 5 之间的差异<frame > 标签。<frameset > 标签<frameset > 标签定义框架集。它用于组织多个窗口（框架）。每个框架存在一个独立的文档。在最简单的应用 中，frameset 元素仅仅声明框架集中存在的列或行的数目。<frameset > 标签没有得到支持。 HTML 4.01 与 HTML 5 之间的差异<frameset > 标签。<h1 > 至 <h6 > 标签<h1 > - <h6 > 标签可定义标题。<h1 > 定义最大的标题。<h6 > 定义最小的标题。<h1 > 这是标题 1</h1 > <h1 > 这是标题 2</h1 > <h2 > 这是标题 3</h2 > <h4 > 这是标题 4</h4 > <h5 > 这是标题 5</h5 > <h6 > 这是标题 6</h6 > 亲自试一试代码：<!DOCTYPE HTML> <html > <body > <h1 > This is header 1</h1 > <h2 > This is header 2</h2 > <h3 > This is header 3</h3 > <h4 > This is header 4</h4 > <h5 > This is header 5</h5 > <h6 > This is header 6</h6 > </body > </html > <h1 > - <h6 > 标签支持 HTML 5 中的标准属性。 事件属性<h1 > - <h6 > 标签支持 HTML 5 中的事件属性。<head > 标签<head > 内部的元素可以包含脚本、指引浏览器找到样式表、提供元信 息，等等。<base > <link > <meta > <script > <title > 实例<html > <head > <title > 文档的标题</title > </head > <body > </body > </html > 亲自试一试代码：<!DOCTYPE HTML> <html > <head > <title > 文档的标题</title > </head > <body > </body > </html > <head > 标签支持 HTML 5 中的标准属性。<header > 标签<header > 标签定义文档的页眉（介绍信息）。 实例<header > <h1 > Welcome to my homepage</h1 > <p > My name is Donald Duck</p > </header > <p > The rest of my home page...</p > 亲自试一试代码：<!DOCTYPE HTML> <html > <body > <header > <h1 > Welcome to my homepage</h1 > <p > My name is Donald Duck</p > </header > <p > The rest of my home page...</p > </body > </html > <header > 标签是 HTML 5 中的新标签。 标准属性<header > 标签支持 HTML 5 中的标准属性。 事件属性<header > 标签支持 HTML 5 中的事件属性。<hgroup > 标签<hgroup > 标签用于对网页或区段（section）的标题进行组合。 实例<hgroup > 标签对网页或区段（section）的标题进行组合：<hgroup > <h1 > Welcome to my WWF</h1 > <h2 > For a living planet</h2 > </hgroup > <p > The rest of the content...</p > TIY 代码：<!DOCTYPE HTML> <html > <body > <hgroup > <h1 > Welcome to my WWF</h1 > <h2 > For a living planet</h2 > </hgroup > <p > The rest of the content...</p > </body > </html > <hgroup > 标签是 HTML 5 中的新标签。 提示和注释<figcaption > 元素为元素组添加标题。<hgroup > 标签支持 HTML 5 中的标准属性。 事件属性<hgroup > 标签支持 HTML 5 中的事件属性。<hr > 标签<hr > 标签水平线，它应该定义内容中的主题变化。 HTML 4.01 与 HTML 5 之间的差异<hr > 标签定义内容中的主题变化，并显示为一条水平线。 在 HTML 4.01 中，它仅仅显示为一条水平线。<html > <body > <p > hr 标签定义水平线：</p > <hr /> <p > 这是段落。</p > <hr /> <p > 这是段落。</p > <hr /> <p > 这是段落。</p > </body > </html > <html > 标签<html > 标签告知浏览器这是一个 HTML 文档。 html 元素是 HTML 文档中最外层的元素。 html 元素也可称为根元素。<!DOCTYPE HTML> <html > <head > <title > Title of the document</title > </head > <body > </body > </html > 亲自试一试<HTML > 标签支持 HTML 5 中的标准属性。 事件属性<HTML > 标签支持 HTML 5 中的事件属性。<i > 标签<i > 标签呈现斜体的文本。<i > 标签定义与文本中其余部分不同的部分，并把这部分文本呈现为斜体文本。在没有其他元素可以使用时， 比如 <b > , <cite > , <dfn > , <em > , <q > , <small > , <strong > ，请使用 <i > 标签。<i > 标签把部分文本定义为某种类型，而不只是利用它在布局中所呈现的样式。<p > The <i class ="taxonomy" > Felis silvestris catus</i > is cute.</p > <p > The term <i > prose content</i > is defined above.</p > <p > There is a certain <i lang ="fr" > je ne sais quoi</i > in the air.</p > 属性<iframe > 标签<iframe > 标签创建包含另一个文档的行内框架。 HTML 4.01 与 HTML 5 之间的差异<iframe src ="/index.html" > </iframe > 属性<html > <body > <iframe src ="/i/eg_landscape.jpg" > </iframe > <p > 一些老的浏览器不支持 iframe。</p > <p > 如果得不到支持，iframe 是不可见的。</p > </body > </html > <img > 标签<img > 标签定义图像。<img src ="smile.gif" alt ="smile" /> 属性<map > 和<area > 标签，了解其工作原理。 4 5<html > <body > <p > <img src ="/i/eg_cute.gif" align ="left" > </p > <p > <img src ="/i/eg_cute.gif" align ="right" > </p > </body > </html > 调整图像尺寸,本例演示如何将图片调整到不同的尺寸。<html > <body > <img src ="/i/eg_mouse.jpg" width ="50" height ="50" > <br /> <img src ="/i/eg_mouse.jpg" width ="100" height ="100" > <br /> <img src ="/i/eg_mouse.jpg" width ="200" height ="200" > <p > 通过改变 img 标签的 "height" 和 "width" 属性的值，您可以放大或缩小图像。</p > </body > </html > <html > <body > <p > <a href ="/example/html/lastpage.html" > <img border ="0" src ="/i/eg_buttonnext.gif" /> </a > </p > </body > </html > 创建图像地图,本例显示如何创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。<html > <body > <p > 请点击图像上的星球，把它们放大。</p > <img /i /eg_planets.jpg "border ="0" usemap ="#planetmap" alt ="Planets" /> <map name ="planetmap" id ="planetmap" > <area ="/example/html/venus.html" 154 页, 总 261 页 05-16-2011 target ="_blank" alt ="Venus" /> <area ="/example/html/mercur.html" target ="_blank" alt ="Mercury" /> <area ="/example/html/sun.html" target ="_blank" alt ="Sun" /> </map > <p > <b > 注释：</b > img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所 以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p > </body > </html > <input > 标签<input > 标签定义输入字段，用户可在其中输入数据。 HTML 4.01 与 HTML 5 之间的差异<html > <body > <form > <input type ="text" name ="firstname" > <br /> <input type ="text" name ="lastname" > </form > </body > </html > <html > <body > <form > <input type ="text" name ="user" > <br /> <input type ="password" name ="password" > </form > <p > </p > </body > </html > <html > <body > <form > <input type ="checkbox" name ="Bike" > <br /> <input type ="checkbox" name ="Car" > </form > </body > </html > <html > <body > <form > <input type ="radio" checked ="checked" name ="Sex" value ="male" /> <br /> <input type ="radio" name ="Sex" value ="female" /> </form > <p > 当用户点击一个单选按钮时，该按钮会变为选中状态，其他所有按钮会变为非选中状态。</p > </body > </html > <html > <body > <form > <input type ="button" value ="Hello world!" > </form > </body > </html > <html > <body > <form action ="/example/html/form_action.asp" method ="get" > <p > First name: <input type ="text" name ="fname" /> </p > <p > Last name: <input type ="text" name ="lname" /> </p > <input type ="submit" value ="Submit" /> </form > <p > 请单击确认按钮，输入会发送到服务器上名为 "form_action.asp" 的页面。</p > </body > </html > <html > <body > <form name ="input" action ="/html/html_form_action.asp" method ="get" > I have a bike:<input type ="checkbox" name ="vehicle" value ="Bike" checked ="checked" /> <br /> <input type ="checkbox" name ="vehicle" value ="Car" /> <br /> <input type ="checkbox" name ="vehicle" value ="Airplane" /> <br /> <br /> <input type ="submit" value ="Submit" /> </form > <p > 如果您点击 "Submit" 按钮，您将把输入传送到名为 html_form_action.asp 的新页面。</p > </body > </html > <html > <body > <form name ="input" action ="/html/html_form_action.asp" method ="get" > Male:<input type ="radio" name ="Sex" value ="Male" checked ="checked" > <br /> Female:<input type ="radio" name ="Sex" value ="Female" > <br /> <input type ="submit" value ="Submit" > </form > <p > 如果您点击 "Submit" 按钮，您将把输入传送到名为 html_form_action.asp 的新页面。</p > </body > </html > <ins > 标签<ins > 标签定义文档的其余部分之外的插入文本。 HTML 4.01 与 HTML 5 之间的差异<del > 标签一起使用，来描述对文档的更新和修正。 属性<html > <body > <p > 一打有 <del > 二十</del > <ins > 十二</ins > 件。</p > <p > 大多数浏览器会改写为删除文本和下划线文本。</p > <p > 一些老式的浏览器会把删除文本和下划线文本显示为普通文本。</p > </body > </html > <keygen > 标签<keygen > 标签定义生成密钥。 HTML 4.01 与 HTML 5 之间的差异 keygen 是 HTML 中的新元素。<keygen > 标签支持 HTML 5 中的标准属性。 事件属性<keygen > 标签支持 HTML 5 中的事件属性。<em > <strong > <dfn > <code > <samp > <kbd > <var > <cite > 标签<em > 呈现为被强调的文本。<strong > 定义重要的文本。<dfn > 定义一个定义项目。<code > 定义计算机代码文本。<samp > 定义样本文本。<kbd > 定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册 中。<var > 定义变量。您可以将此标签与 <pre > 及 <code > 标签配合使用。<cite > 定义引用。可使用该标签对参考文献的引用进行定义，比如书籍或杂志的标题。<strong > 定义语气更重的强调文本，但是在 HTML 5 中，<strong > 定义重要的文本。<html > <body > <b > This text is bold</b > <br /> <strong > This text is strong</strong > <br /> <big > This text is big</big > <br /> <em > This text is emphasized</em > <br /> <i > This text is italic</i > <br /> <small > This text is small</small > <br /> <sub > subscript</sub > <br /> <sup > superscript</sup > </body > </html > <html > <body > <code > Computer code</code > <br /> <kbd > Keyboard input</kbd > <br /> <tt > Teletype text</tt > <br /> <samp > Sample text</samp > <br /> <var > Computer variable</var > <br /> <p > <b > 注释：</b > 这些标签常用于显示计算机/编程代码。</p > </body > </html > <label > 标签<label > 标签定义控件的标注。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标 签时，浏览器就会自动将焦点转到和标签相关的表单控件上。<html > <body > <p > 请点击文本标记之一，就可以触发相关控件：</p > <form > <label for ="male" > Male</label > <input type ="radio" name ="sex" id ="male" /> <br /> <label for ="female" > Female</label > <input type ="radio" name ="sex" id ="female" /> </form > </body > </html > <legend > 标签<legend > 标签为 <fieldset > 、<figure > 以及 <details > 元素定义标题。 HTML 4.01 与 HTML 5 之间的差异<legend > 仅用于 <fieldset > 元素。<legend > 标签应用于 <fieldset > 、<figure > 以及 <details > 元素。 在 HTML 5 中，不支持 align 属性。请使用 CSS 代替。<fieldset > <legend > 健康信息：</legend > <form > <label > 身高：<input type ="text" /> </label > <label > 体重：<input type ="text" /> </label > </form > </fieldset > 属性 标准属性<html > <body > <fieldset > <legend > 健康信息：</legend > <form > <label > 身高：<input type ="text" /> </label > <label > 体重：<input type ="text" /> </label > </form > </fieldset > <p > 如果表单周围没有边框，说明您的浏览器太老了。</p > </body > </html > <li > 标签<li > 标签定义列表项，有序列表和无序列表中都使用 <li > 标签。 HTML 4.01 与 HTML 5 之间的差异<ol > 元素一起使用。 提示和注释<ol > <li > Coffee</li > <li > Tea</li > </ol > <ol > <li value ="8" > Coffee</li > <li > Tea</li > </ol > <ul > <li > Coffee</li > <li > Tea</li > </ul > 属性<html > <body > <h4 > 一个无序列表：</h4 > <ul > <li > 咖啡</li > <li > 茶</li > <li > 牛奶</li > </ul > </body > </html > 上例演示一个无序列表。 有序列表<html > <body > <h4 > 一个有序列表：</h4 > <ol > <li > 咖啡</li > <li > 茶</li > <li > 牛奶</li > </ol > </body > </html > 上例演示一个有序列表。 嵌套列表<html > <body > <h4 > 一个嵌套列表：</h4 > <ul > <li > 咖啡</li > <li > 茶<ul > <li > 红茶</li > <li > 绿茶</li > </ul > </li > <li > 牛奶</li > </ul > </body > </html > 上例演示如何嵌套列表。 嵌套列表 2,<html > <body > <h4 > 一个嵌套列表：</h4 > <ul > <li > 咖啡</li > <li > 茶<ul > <li > 红茶</li > <li > 绿茶<ul > <li > 中国茶</li > <li > 非洲茶</li > </ul > </li > </ul > </li > <li > 牛奶</li > </ul > </body > </html > 上例演示更复杂的嵌套列表。<link > 标签<link > 标签定义两个连接文档之间的关系。 HTML 4.01 与 HTML 5 之间的差异<link > 来链接外部样式表：<head > <link rel ="stylesheet" type ="text/css" href ="c3.css" /> </head > 属性<link > 标签链接到一个外部样式表。<html > <head > <link rel ="stylesheet" type ="text/css" href ="/html/csstest1.css" > </head > <body > <h1 > 我通过外部样式表进行格式化。</h1 > <p > 我也一样！</p > </body > </html > <map > 标签<map > 标签定义客户端的图像映射。图像映射是带有可点击区域的图像。 HTML 4.01 与 HTML 5 之间的差异<html > <body > <p > 请点击图像上的星球，把它们放大。</p > <img src ="/i/eg_planets.jpg" border ="0" usemap ="#planetmap" alt ="Planets" /> <map name ="planetmap" id ="planetmap" > <area shape ="circle" coords ="180,139,14" href ="/example/html/venus.html" target ="_blank" alt ="Venus" /> <area shape ="circle" coords ="129,161,10" href ="/example/html/mercur.html" target ="_blank" alt ="Mercury" /> <area shape ="rect" coords ="0,0,110,260" href ="/example/html/sun.html" target ="_blank" alt ="Sun" /> </map > <p > <b > 注释：</b > img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所 以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p > </body > </html > <mark > 标签 <mark > 标签定义带有记号的文本。请在需要突出显示文本时使用 <m > 标签。 <p > Do not forget to buy <mark > milk</mark > today.</p > <!DOCTYPE HTML> <html > <body > <p > Do not forget to buy <mark > milk</mark > today.</p > </body > </html > <mark > 标签是 HTML 5 中的新标签。 标准属性<mark > 标签支持 HTML 5 中的标准属性。 事件属性<mark > 标签支持 HTML 5 中的事件属性。<menu > 标签<menu > 标签定义菜单列表。当希望列出表单控件时使用该标签。 HTML 4.01 与 HTML 5 之间的差异<menu > <li > <input type ="checkbox" /> Red</li > <li > <input type ="checkbox" /> blue</li > </menu > 属性<meta > 标签<meta > 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。<meta > 标签位于文档的头部，不包含任何内容。<meta > 标签的属性定义了与文档相关联的名称/值对。 HTML 4.01 与 HTML 5 之间的差异<meta http-equiv ="content-type" content ="text/html; charset=ISO-8859-1" > 在 HTML 5 中，这样就够了：<meta charset ="ISO-8859-1" > 提示和注释<meta name ="keywords" content ="HTML, CSS, XML, XHTML, JavaScript" /> 定义对页面的描述：<meta name ="description" content ="免费的 web 技术教程。" /> 定义页面的最新版本：<meta name ="revised" content ="David, 2008/8/8/" /> 每 5 秒刷新一次页面：<meta http-equiv ="refresh" content ="5" /> 属性<html > <head > <meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" /> <meta name ="author" content ="w3school.com.cn" > <meta name ="revised" content ="David Yang,8/1/07" > <meta name ="generator" content ="Dreamweaver 8.0en" > </head > <body > <p > 本文档的 meta 属性标识了创作者和编辑软件。</p > </body > </html > <html > <head > <meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" /> <meta name ="description" content ="HTML examples" > <meta name ="keywords" 186 页, 总 261 页 05-16-2011 content ="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript" > </head > <body > <p > 本文档的 meta 属性描述了该文档和它的关键词。</p > </body > </html > <html > <head > <meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" /> <meta http-equiv ="Refresh" content ="5;url=http://www.w3school.com.cn" > </head > <body > <p > <a href ="http://www.w3school.com.cn" > http://www.w3school.com.cn</a > </p > <p > 您将在 5 秒内被重定向到新的地址。</p > <p > 如果超过 5 秒后您仍然看到本消息，请点击上面的的链接。</p > </body > </html > 这个例子演示：在网址已经变更的情况下，将用户重定向到另外一个地址。<meter > 标签<meter > 标签定义度量衡。仅用于已知最大和最小值的度量。 实例<meter min ="0" max ="20" > 5</meter > <meter > 2 out of 10</meter > <meter > 30%</meter > TIY<!DOCTYPE HTML> <html > <body > <meter min ="0" max ="10" > 2</meter > <br /> <meter > 2 out of 10</meter > <br /> <meter > 20%</meter > </body > </html > <meter > 标签是 HTML 5 中的新标签。 提示和注释<meter > 标签支持 HTML 5 中的标准属性。 事件属性<meter > 标签支持 HTML 5 中的事件属性。<nav > 标签<nav > 标签定义导航链接的部分。 实例<nav > <a href ="index.asp" > Home</a > <a href ="html5_meter.asp" > Previous</a > <a href ="html5_noscript.asp" > Next</a > </nav > TIY<!DOCTYPE HTML> <html > <body > <nav > <a href ="/html5/index.asp" > Home</a > <a href ="/html5/html5_meter.asp" > Previous</a > <a href ="/html5/html5_noscript.asp" > Next</a > </nav > </body > </html > <nav > 标签是 HTML 5 中的新标签。 提示和注释<nav > 元素中。 标准属性<nav > 标签支持 HTML 5 中的标准属性。 事件属性<nav > 标签支持 HTML 5 中的事件属性。<noframes > 标签<noframes > 标签向浏览器显示无法处理框架的提示文本。noframes 元素位于 frameset 元素中。 由于该标签对网页可用性的负面影响，在 HTML 5 中 <noframes > 标签没有得到支持。<noscript > 标签 定义和用法<script > 标签但无法支持其中脚本的浏览器。 HTML 4.01 与 HTML 5 之间的差异191 页, 总 261 页 05 -16 -2011 "text/javascript" > </script > <noscript > Your browser does not support JavaScript!</noscript > </body > VBScript<body > <script type ="text/vbscript" > "Hello World!" ) '--> </script > <noscript > Your browser does not support VBScript!</noscript > </body > <noframes > 标签。<noscript > 标签 定义和用法<script > 标签但无法支持其中脚本的浏览器。 HTML 4.01 与 HTML 5 之间的差异193 页, 总 261 页 05 -16 -2011 "text/javascript" > </script > <noscript > Your browser does not support JavaScript!</noscript > </body > VBScript<body > <script type ="text/vbscript" > "Hello World!" ) '--> </script > <noscript > Your browser does not support VBScript!</noscript > </body > <html > <head > <meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" /> <meta http-equiv ="Content-Language" content ="zh-cn" /> </head > <body > <script type ="text/javascript" > "如果显示了这段文字，那么您的浏览器支持 </script > <noscript > No JavaScript support!</noscript > <p > </p > </body > </html > 本例演示如何对付不支持脚本的浏览器。<object > 标签<object > 与 </object > 之间的文本是替换文本， 针对不支持此标签的浏览器。<param > 标签可定义用于对象的 run-time 设置。<img > 标签代替 <object > 标签。 提示：至少必须定义 "data" 和 "type" 属性之一。<ol > 标签<ol > 标签定义有序列表。<ol > <li > Coffee</li > <li > Tea</li > </ol > <ol > <li start ="60" > Coffee</li > <li > Tea</li > </ol > 属性<html > <body > <h4 > 一个有序列表：</h4 > <ol > <li > 咖啡</li > <li > 茶</li > <li > 牛奶</li > </ol > </body > </html > 本例演示一个有序列表。<optgroup > 标签<optgroup > 标签定义选项组。此元素允许您组合选项。当您使用一个长的选项列表时，对相关的选项进行组合 会使处理更加容易。<select > <optgroup label ="Swedish Cars" > <option value ="volvo" > Volvo</option > <option value ="saab" > Saab</option > </optgroup > <optgroup label ="German Cars" > <option value ="mercedes" > Mercedes</option > <option value ="audi" > Audi</option > </optgroup > </select > 属性<option > 标签<option > 标签定义下拉列表中的一个选项。 HTML 4.01 与 HTML 5 之间的差异<option > 标签也用于新元素 <datalist > 中。 提示和注释<option > 标签能够在不带任何属性的情况下使用，但是通常需要 value 属性，该属性定义了发送到服 务器的数据。<select > 或 <datalist > 标签结合使用。在其他地方，<option > 标签是无意义的。 例子<select > <option value ="volvo" > Volvo</option > <option value ="saab" > Saab</option > <option value ="opel" selected ="selected" > Opel</option > <option value ="audi" > Audi</option > </select > 属性<optgroup > 时所使用的标注。 4 5<html > <body > <form > <select name ="cars" > <option value ="volvo" > Volvo</option > <option value ="saab" > Saab</option > <option value ="fiat" > Fiat</option > <option value ="audi" > Audi</option > </select > </form > </body > </html > <html > <body > <form > <select name ="cars" > <option value ="volvo" > Volvo</option > <option value ="saab" > Saab</option > <option value ="fiat" selected ="selected" > Fiat</option > <option value ="audi" > Audi</option > </select > </form > </body > </html > 本例演示如何创建一个简单的带有预选值的下拉列表。（注：预选值指预先指定的首选项。）<output > 标签<output > 标签定义不同类型的输出，比如脚本的输出。 实例<form action ="form_action.asp" method ="get" name ="sumform" > <output name ="sum" > </output > </form > TIY<!DOCTYPE HTML> <html > <head > <script type ="text/javascript" > function write_sum () 5 y=3 "sumform" ]["sum" ].value=x+y </script > </head > <body onload ="write_sum()" > <form action ="form_action.asp" method ="get" name ="sumform" > <output name ="sum" > </output > </form > </body > </html > <output > 标签是 HTML 5 中的新标签。 属性<output > 标签支持 HTML 5 中的标准属性。 事件属性<output > 标签支持 HTML 5 中的事件属性。<p > 标签<p > 标签定义段落。<html > <body > <p > 这是段落。</p > <p > 这是段落。</p > <p > 这是段落。</p > <p > 段落元素由 p 标签定义。</p > </body > </html > 此例演示：段落元素中的文字如何被浏览器显示。 更多的段落<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html > <body > <p > 这个段落 在源代码中 包含许多行 但是浏览器</p > <p > 这个段落</p > <p > 段落的行数依赖于浏览器窗口的大小。如果调节浏览器窗口的大小，将改变段落中的行数。</p > </body > </html > 本例演示段落元素的某些缺省的行为。 “诗歌”问题<html > <body > <h1 > 春晓</h1 > <p > </p > <p > 注意，浏览器忽略了源代码中的排版（省略了多余的空格和换行）。</p > </body > </html > <param > 标签<object > 标签提供参数。<object id ="Slider1" width ="100" height ="50" > <param name ="BorderStyle" value ="1" /> <param name ="MousePointer" value ="0" /> <param name ="Enabled" value ="1" /> <param name ="Min" value ="0" /> <param name ="Max" value ="10" /> </object > 属性<pre > 标签<pre > 标签的一个常见应用就是用来表示计算机的源代码。 HTML 4.01 与 HTML 5 之间的差异<pre > 标签来显示非常规的格式化内容，或者某类计算机代码。 属性<html > <body > <pre > 这是</pre > <p > pre 标签很适合显示计算机代码：</p > <pre > </pre > </body > </html > <progress > 标签<progress > 标签定义运行中的进度（进程）。<progress > 标签来显示 JavaScript 中耗费时间的函数的进度。 实例<progress > <span id ="objprogress" > 85</span > %</progress > TIY<!DOCTYPE HTML> <html > <body > <progress > <span id ="objprogress" > 76</span > %</progress > </body > </html > <progress > 标签是 HTML 5 中的新标签。 提示和注释<progress > 标签来显示下载的进度。 属性<progress > 标签支持 HTML 5 中的标准属性。 事件属性<progress > 标签支持 HTML 5 中的事件属性。<q > 标签<q > 标签定义一个短的引用。 浏览器经常会在这种引用的周围插入引号。 实例<p > WWF's goal is to:<q cite ="http://www.wwf.org" > </q > we hope they succeed.</p > 亲自试一试<q > 标签支持 HTML 5 中的标准属性。 事件属性<q > 标签支持 HTML 5 中的事件属性。<rp > 标签<rp > 标签在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容。 ruby 注释是中文注音或字符。<ruby > 以及 <rt > 标签一同使用：<ruby > <rt > <rp > (</rp > ㄏㄢˋ<rp > )</rp > </rt > </ruby > TIY<!DOCTYPE HTML> <html > <body > <ruby > <rt > <rp > (</rp > ㄏㄢˋ<rp > )</rp > </rt > </ruby > </body > </html > <rp > 标签是 HTML 5 的新标签。 提示和注释<rp > 标签支持 HTML 5 中的标准属性。<rp > 标签支持 HTML 5 中的事件属性。<rt > 标签<rt > 标签定义字符（中文注音或字符）的解释或发音。 ruby 注释是中文注音或字符。 在东亚使用，显示的是东亚字符的发音。<ruby > 以及 <rt > 标签一同使用：<ruby > <rt > ㄏㄢˋ </rt > </ruby > TIY<!DOCTYPE HTML> <html > <body > <ruby > <rt > ㄏㄢˋ </rt > </ruby > </body > </html > <rt > 标签是 HTML 5 的新标签。 提示和注释<rt > 标签支持 HTML 5 中的标准属性。 事件属性<rt > 标签支持 HTML 5 中的事件属性。<ruby > 标签<ruby > 标签定义 ruby 注释（中文注音或字符）。 在东亚使用，显示的是东亚字符的发音。<ruby > 以及 <rt > 标签一同使用：<ruby > <rt > <rp > (</rp > ㄏㄢˋ<rp > )</rp > </rt > </ruby > TIY<!DOCTYPE HTML> <html > <body > <ruby > <rt > ㄏㄢˋ </rt > </ruby > </body > </html > <ruby > 标签是 HTML 5 的新标签。 提示和注释<ruby > 标签支持 HTML 5 中的标准属性。 事件属性<ruby > 标签支持 HTML 5 中的事件属性。<s > 标签<s > 标签定义加删除线的文本。HTML 5 中不再支持这个标签。请使用 CSS 代替。 HTML 4.01 与 HTML 5 之间的差异<s > 标签。 在 HTML 5 中不支持 <s > 标签。<del > 标签代替。<script > 标签"text/javascript" > document.write("Hello World!" ) </script > 亲自试一试<!DOCTYPE HTML> <html > <body > <script type ="text/javascript" > document.write("Hello World!" ) </script > </body > </html > <script > 标签必须是空的。5 中不支持。220 页, 总 261 页 05 -16 -2011 5 中不支持。5 中的标准属性。 事件属性5 中的事件属性。<h1 > PRC</h1 > <p > The People's * was born in 1949...</p > </section > TIY<!DOCTYPE HTML> <html > <body > <section > <h1 > PRC</h1 > <p > The People's * was born in 1949...</p > </section > </body > </html > <section > 标签是 HTML 5 中的新标签。 属性<section > 标签支持 HTML 5 中的标准属性。 事件属性<section > 标签支持 HTML 5 中的事件属性。<select > 标签<select > 标签创建下拉列表。 HTML 4.01 与 HTML 5 之间的差异<select > <option value ="volvo" > Volvo</option > <option value ="saab" > Saab</option > <option value ="opel" > Opel</option > <option value ="audi" > Audi</option > </select > 属性<html > <body > <form > <select name ="cars" > <option value ="volvo" > Volvo</option > <option value ="saab" > Saab</option > <option value ="fiat" > Fiat</option > <option value ="audi" > Audi</option > </select > </form > </body > </html > <html > <body > <form > <select name ="cars" > <option value ="volvo" > Volvo</option > <option value ="saab" > Saab</option > <option value ="fiat" selected ="selected" > Fiat</option > <option value ="audi" > Audi</option > </select > </form > </body > </html > 本例演示如何创建一个简单的带有预选值的下拉列表。（注：预选值指预先指定的首选项。）<small > 标签<small > 标签制作更小字号的文本。 HTML 4.01 与 HTML 5 之间的差异<small > 标签。<source > 标签<source > 标签为媒介元素（比如 <video > 和 <audio > ）定义媒介资源。 HTML 4.01 与 HTML 5 之间的差异<source > 标签是 HTML 5 中的新标签。 属性<source > 标签支持 HTML 5 中的标准属性。 事件属性<source > 标签支持 HTML 5 中的事件属性。<span > 标签<span > 标签用于对文档中的行内元素进行组合。 HTML 4.01 与 HTML 5 之间的差异<p > This is a paragraph <span style ="color:#00ff00;" > This is a paragraph</span > This is a paragraph</p > <strike > 标签<strike > 标签定义加删除线的文本。HTML 5 中不再支持这个标签。请使用 CSS 代替。 HTML 4.01 与 HTML 5 之间的差异<strike > 标签。 在 HTML 5 中不支持 <strike > 标签。 提示和注释<del > 标签代替。<style > 标签style > 标签定义 HTML 文档的样式信息。style 元素中，您规定的是 HTML 元素如何在浏览器中呈现。 实例HTML 文档中使用 style 元素：html >head >style type ="text /css "> h1 {color :red }p {color :blue }-16-2011 </style > </head > <body > <h1 > Header-1</h1 > <p > This is a paragraph.</p > </body > </html > 亲自试一试<!DOCTYPE HTML> <html > <head > <style type ="text/css" > h1 {color :red }p {color :blue } </style > </head > <body > <h1 > Header-1</h1 > <p > This is a paragraph.</p > </body > </html > <link > 标签。 提示：如需学习更多有关样式表的知识，请访问相关的 CSS 教程。 注释：如果未定义 scoped 属性，那么 <style > 元素必须位于 <head > 部分中。 属性type text /css 定义内容类型。media screen tty tv projection handheld print braille aural all scoped scoped 如果使用该属性，则样式仅仅应用到 style 元素的父元素及其子元素。style > 标签支持 HTML 5 中的标准属性。 事件属性style > 标签支持 HTML 5 中的事件属性。-16-2011 sub > 和 <sup > 标签sub > 标签可定义下标文本。<sup > 可定义上标文本。 HTML 4.01 与 HTML 5 之间的差异sub >下标</sub >sup >上标</sup > 属性class , contenteditable , contextmenu , dir , draggable , id , irrelevant , lang , ref , registrationmark , tabindex , template , title HTML 5 中标准属性。 事件属性onabort , onbeforeunload , onblur , onchange , onclick , oncontextmenu , ondblclick , ondrag , ondragend , ondragenter , ondragleave , ondragover , ondragstart , ondrop , onerror , onfocus , onkeydown , onkeypress , onkeyup , onload , onmessage , onmousedown , onmousemove , onmouseover , onmouseout , onmouseup , onmousewheel , onresize , onscroll , onselect , onsubmit , onunload HTML 5 中事件属性。 TIY 实例html >body >-16-2011 p >This text contains <sub >subscript </sub >p >p >This text contains <sup >superscript </sup >p >body >html >sup 和 sub 元素。summary > 标签summary > 标签包含 details 元素的标题，"details " 元素用于描述有关文档或文档片段的详细信息。 实例details >summary >HTML 5</summary >This document teaches you everything you have to learn about HTML 5.details > 亲自试一试DOCTYPE HTML >html >-16-2011 body >details >summary >HTML 5</summary >This document teaches you everything you have to learn about HTML 5.details >body >html >HTML 4.01 与 HTML 5 之间的差异summary > 标签是 HTML 5 中的新标签。 提示和注释details > 标签一起使用。标题是可见的，当用户点击标题时会显示出详细信息。 注释："summary " 元素应该是 "details " 元素的第一个子元素。summary > 标签支持 HTML 5 中的标准属性。 事件属性summary > 标签支持 HTML 5 中的事件属性。table > 标签table > 标签可定义表格。在 <table > 标签内部，你可以放置表格的标题、表格行、表格列、表格单元以及其 他的表格。HTML 4.01 与 HTML 5 之间的差异-16-2011 HTML 4.01 中，不赞成使用 "align " 和 "bgcolor " 属性。 在 HTML 5 中，不支持 <table > 标签的任何属性。table >tr >td >Cell A </td >td >Cell B </td >tr >table > 属性 标准属性class , contenteditable , contextmenu , dir , draggable , id , irrelevant , lang , ref , registrationmark , tabindex , template , title HTML 5 中标准属性。 事件属性onabort , onbeforeunload , onblur , onchange , onclick , oncontextmenu , ondblclick , ondrag , ondragend , ondragenter , ondragleave , ondragover , ondragstart , ondrop , onerror , onfocus , onkeydown , onkeypress , onkeyup , onload , onmessage , onmousedown , onmousemove , onmouseover , onmouseout , onmouseup , onmousewheel , onresize , onscroll , onselect , onsubmit , onunload HTML 5 中事件属性。 TIY 实例html >body >-16-2011 p >每个表格由 table 标签开始。</p >p >每个表格行由 tr 标签开始。</p >p >每个表格数据由 td 标签开始。</p >h4 >一列：</h4 >table border ="1">tr >td >100</td >tr >table >h4 >一行三列：</h4 >table border ="1">tr >td >100</td >td >200</td >td >300</td >tr >table >h4 >两行三列：</h4 >table border ="1">tr >-16-2011 td >100</td >td >200</td >td >300</td >tr >tr >td >400</td >td >500</td >td >600</td >tr >table >body >html >HTML 文档中创建表格。 表格中的标题(Headings )html >body >h4 >表头：</h4 >table border ="1">tr >th >姓名</th >th >电话</th >-16-2011 th >电话</th >tr >tr >td >Bill Gates </td >td >555 77 854</td >td >555 77 855</td >tr >table >h4 >垂直的表头：</h4 >table border ="1">tr >th >姓名</th >td >Bill Gates </td >tr >tr >th >电话</th >td >555 77 854</td >tr >tr >th >电话</th >td >555 77 855</td >tr >table >-16-2011 body >html > 本例演示如何显示表格标题。 空单元格html >body >table border ="1">tr >td >Some text </td >td >Some text </td >tr >tr >td ></td >td >Some text </td >tr >table >p >正如您看到的，其中一个单元没有边框。这是因为它是空的。在该单元中插入一个空格后，仍然没有边框。p >p >我们的技巧是在单元中插入一个 no-breaking 空格。</p >-16-2011 p >no-breaking 空格是一个字符实体。如果您不清楚什么是字符实体，请阅读关于字符实体的章节。</p >p >no-breaking 空格由和号开始 ("&")，然后是字符"nbsp "，并以分号结尾(";")。</p >body >html >nbsp ;" 处理没有内容的单元格。 带有标题的表格html >body >h4 >这个表格有一个标题，以及粗边框：</h4 >table border ="6">caption >我的标题</caption >tr >td >100</td >td >200</td >td >300</td >tr >tr >td >400</td >-16-2011 td >500</td >td >600</td >tr >table >body >caption ) 的表格 跨行或跨列的表格单元格html >body >h4 >横跨两列的单元格：</h4 >table border ="1">tr >th >姓名</th >th colspan ="2">电话</th >tr >tr >td >Bill Gates </td >td >555 77 854</td >td >555 77 855</td >tr >table >-16-2011 h4 >横跨两行的单元格：</h4 >table border ="1">tr >th >姓名</th >td >Bill Gates </td >tr >tr >th rowspan ="2">电话</th >td >555 77 854</td >tr >tr >td >555 77 855</td >tr >table >body >html > 本例演示如何定义跨行或跨列的表格单元格。 表格内的标签 本例演示如何在不同的元素内显示元素。html >body >-16-2011 table border ="1">tr >td >p >这是一个段落。</p >p >这是另一个段落。</p >td >td >这个单元包含一个表格：table border ="1">tr >td >A </td >td >B </td >tr >tr >td >C </td >td >D </td >tr >table >td >tr >tr >td >这个单元包含一个列表：ul >li >苹果</li >-16-2011 li >香蕉</li >li >菠萝</li >ul >td >td >HELLO </td >tr >table >body >html >tbody > 标签 定义和用法 定义一段表格主体（正文）。tbody > 标签，可以将表格分为一个单独的部分。<tbody > 标签可将表格中的一行或几行合成一组。tbody > 标签，但是我们建议最好在表格中没有tbody > 标签。tbody > 标签中，只有 <tr > 标签可以定义表格行。并且一旦定义，一个 <tbody > 标签就是表格中的一个 独立的部分。例如不能从一个 <tbody > 跨越到另一个 <tbody > 中。thead 、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时，您也许希望拥有一 个标题行，一些带有数据的行，以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和 页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。HTML 4.01 与 HTML 5 之间的差异HTML 5 中，不支持 <tbody > 标签的任何属性。 提示和注释：-16-2011 thead > 内部必须拥有 <tr > 标签！thead 、tfoot 以及 tbody 元素，您就必须使用全部的元素。它们的出现次序是：thead 、 tfoot 、tbody ，这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。table >thead >tr >td >THEAD 中的文本</td >tr >thead >tfoot >tr >td >TFOOT 中的文本</td >tr >tfoot >tbody >tr >td >TBODY 中的文本</td >tr >tbody >-16-2011 table > 属性 标准属性class , contenteditable , contextmenu , dir , draggable , id , irrelevant , lang , ref , registrationmark , tabindex , template , title HTML 5 中标准属性。 事件属性onabort , onbeforeunload , onblur , onchange , onclick , oncontextmenu , ondblclick , ondrag , ondragend , ondragenter , ondragleave , ondragover , ondragstart , ondrop , onerror , onfocus , onkeydown , onkeypress , onkeyup , onload , onmessage , onmousedown , onmousemove , onmouseover , onmouseout , onmouseup , onmousewheel , onresize , onscroll , onselect , onsubmit , onunload HTML 5 中事件属性。td > 标签td > 标签定义表格中的一个单元格。 HTML 4.01 与 HTML 5 之间的差异HTML 4.01 中，td 元素的 "bgcolor "、"height "、"width " 以及 "nowrap " 是不被赞成使用的。 在 HTML 5 中，仅仅支持 "colspan " 和 "rowspan " 属性。table >tr >td >Cell A </td >td >Cell B </td >tr >-16-2011 table > 属性abbr abbr_text 规定单元格中内容的缩写版本。不支持。 4 align left right center justify char 规定单元格内容的水平排列方式。不支持。请使用 CSS 代替。 4 axis category_names 为单元格定义一个名字。不支持。 4 bgcolor rgb (x ,x ,x )#xxxxxx colorname 规定单元格的背景颜色。不支持。请使用 CSS 代替。 4 char character 规定根据哪个字符来进行文本对齐。不支持。请使用 CSS 代替。 4 charoff pixels CSS 代替。 4 colspan number 规定此单元格可横跨的列数。 4 5headers header_cells '_id 空格分隔的单元格 ID 列表。不支持。 4 height pixels 规定表格单元格的高度。不支持。请使用 CSS 代替。 4 nowrap nowrap 是否禁用或启用单元格中的文本环绕。不支持。请使用 CSS 代替。 4 rowspan number 规定此单元格可横跨的行数。 4 5scope col colgroup row rowgroup 规定此单元格是否为以下部分提供表头信息：包含此单元格的行 row ) 的其余部分，包含此单元格的列 (col ) 的其余部分，包含此单 元格的行组 (rowgroup ) 的其余部分，包含此单元格的列组 (colgroup ) 的其余部分。不支持。 4 -16-2011 valign top middle bottom baseline 规定单元格内容的垂直排列方式。不支持。请使用 CSS 代替。 4 width pixels CSS 代替。 4 class , contenteditable , contextmenu , dir , draggable , id , irrelevant , lang , ref , registrationmark , tabindex , template , title HTML 5 中标准属性。 事件属性onabort , onbeforeunload , onblur , onchange , onclick , oncontextmenu , ondblclick , ondrag , ondragend , ondragenter , ondragleave , ondragover , ondragstart , ondrop , onerror , onfocus , onkeydown , onkeypress , onkeyup , onload , onmessage , onmousedown , onmousemove , onmouseover , onmouseout , onmouseup , onmousewheel , onresize , onscroll , onselect , onsubmit , onunload HTML 5 中事件属性。 TIY 实例(见 table 标签)textarea > 标签text-area ) （一个多行的文本输入区域）。用户可在此文本区域中写文本。在一个文本区 中，您可输入无限数量的文本。文本区中的默认字体是等宽字体 (fixed pitch )。HTML 4.01 与 HTML 5 之间的差异HTML 5 中有一些新属性，同时不再支持 HTML 4.01 中的一些属性。 例子textarea rows ="3" cols ="30">-16-2011 textarea > 属性autofocus true false 在页面加载时，使这个 textarea 获得焦点。 5cols number 规定文本区内可见的列数。 4 5disabled true false 当此文本区首次加载时禁用此文本区。 4 5form true false 定义该 textarea 所属的一个或多个表单。 5inputmode inputmode 定义该 textarea 所期望的输入类型。 5name name_of_textarea 为此文本区规定的一个名称。 4 5readonly true false 指示用户无法修改文本区内的内容。 4 5required true false 定义为了提交该表单，该 textarea 的值是否是必需的。 5rows number 规定文本区内可见的行数。 4 5class , contenteditable , contextmenu , dir , draggable , id , irrelevant , lang , ref , registrationmark , tabindex , template , title HTML 5 中标准属性。 事件属性onabort , onbeforeunload , onblur , onchange , onclick , oncontextmenu , ondblclick , ondrag , ondragend , ondragenter , ondragleave , ondragover , ondragstart , ondrop , onerror , onfocus , onkeydown , onkeypress , onkeyup , onload , onmessage , onmousedown , onmousemove , onmouseover , onmouseout , onmouseup , onmousewheel , onresize , onscroll , onselect , onsubmit , onunload -16-2011 HTML 5 中事件属性。 TIY 实例Textarea ,如何创建 textarea 。html >body >p >This example cannot be edited because our editor uses a textarea for input ,and your browser does not allow a textarea inside a textarea .p >textarea rows ="10" cols ="30">The cat was playing in the garden .tfoot > 标签 定义和用法 定义表格的页脚（脚注）。thead 、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时，您也许希望拥有一 个标题行，一些带有数据的行，以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和 页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。HTML 4.01 与 HTML 5 之间的差异-16-2011 HTML 5 中，不支持 <tfoot > 标签的任何属性。 提示和注释：tfoot > 内部必须拥有 <tr > 标签！thead 、tfoot 以及 tbody 元素，您就必须使用全部的元素。它们的出现次序是：thead 、 tfoot 、tbody ，这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。table >thead >tr >td >THEAD 中的文本</td >tr >thead >tfoot >tr >td >TFOOT 中的文本</td >tr >tfoot >tbody >tr >td >TBODY 中的文本</td >tr >-16-2011 tbody >table > 属性 标准属性class , contenteditable , contextmenu , dir , draggable , id , irrelevant , lang , ref , registrationmark , tabindex , template , title HTML 5 中标准属性。 事件属性onabort , onbeforeunload , onblur , onchange , onclick , oncontextmenu , ondblclick , ondrag , ondragend , ondragenter , ondragleave , ondragover , ondragstart , ondrop , onerror , onfocus , onkeydown , onkeypress , onkeyup , onload , onmessage , onmousedown , onmousemove , onmouseover , onmouseout , onmouseup , onmousewheel , onresize , onscroll , onselect , onsubmit , onunload HTML 5 中事件属性。th > 标签th > 标签定义表格内的表头单元格。此 th 元素内部的文本通常会呈现为粗体。 HTML 4.01 与 HTML 5 之间的差异HTML 4.01 中，th 元素的 "bgcolor "、"height "、"width " 以及 "nowrap " 属性是不被赞成使用的。 在 HTML 5 中，仅仅支持 "colspan " 、 "rowspan " 以及 "scope " 属性。table >tr >th >Header 1</th >th >Header 2</th >-16-2011 tr >tr >td >Cell A </td >td >Cell B </td >tr >table > 属性abbr abbr_text 规定单元格中内容的缩写版本。不支持。 4 align left right center justify char 规定单元格内容的水平排列方式。不支持。请使用 CSS 代替。 4 axis category_names 为单元格定义一个名字。不支持。 4 bgcolor rgb (x ,x ,x )#xxxxxx colorname 规定单元格的背景颜色。不支持。请使用 CSS 代替。 4 char character 规定根据哪个字符来进行文本对齐。不支持。请使用 CSS 代 替。 4 charoff pixels CSS 代替。 4 colspan number 规定此单元格可横跨的列数。 4 5headers header_cells '_id 空格分隔的单元格 ID 列表。不支持。 4 -16-2011 height pixels 规定表格单元格的高度。不支持。请使用 CSS 代替。 4 nowrap nowrap 是否禁用或启用单元格中的文本环绕。不支持。请使用 CSS 代 替。 4 rowspan number 规定此单元格可横跨的行数。 4 5scope col colgroup row rowgroup 规定此单元格是否为以下部分提供表头信息：包含此单元格的 行 row ) 的其余部分，包含此单元格的列 (col ) 的其余部分， 包含此单元格的行组 (rowgroup ) 的其余部分，包含此单元格 的列组 (colgroup ) 的其余部分。不支持。 4 5valign top middle bottom baseline 规定单元格内容的垂直排列方式。不支持。请使用 CSS 代替。 4 width pixels CSS 代替。 4 class , contenteditable , contextmenu , dir , draggable , id , irrelevant , lang , ref , registrationmark , tabindex , template , title HTML 5 中标准属性。 事件属性onabort , onbeforeunload , onblur , onchange , onclick , oncontextmenu , ondblclick , ondrag , ondragend , ondragenter , ondragleave , ondragover , ondragstart , ondrop , onerror , onfocus , onkeydown , onkeypress , onkeyup , onload , onmessage , onmousedown , onmousemove , onmouseover , onmouseout , onmouseup , onmousewheel , onresize , onscroll , onselect , onsubmit , onunload HTML 5 中事件属性。 TIY 实例(见标签 table )-16-2011 thead > 标签thead 、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时，您也许希望拥有一 个标题行，一些带有数据的行，以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和 页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。HTML 4.01 与 HTML 5 之间的差异HTML 5 中，不支持 <thead > 标签的任何属性。 提示和注释：thead > 内部必须拥有 <tr > 标签！thead 、tfoot 以及 tbody 元素，您就必须使用全部的元素。它们的出现次序是：thead 、 tfoot 、tbody ，这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。table >thead >tr >td >THEAD 中的文本</td >tr >thead >tfoot >tr >td >TFOOT 中的文本</td >-16-2011 tr >tfoot >tbody >tr >td >TBODY 中的文本</td >tr >tbody >table > 属性 标准属性class , contenteditable , contextmenu , dir , draggable , id , irrelevant , lang , ref , registrationmark , tabindex , template , title HTML 5 中标准属性。 事件属性onabort , onbeforeunload , onblur , onchange , onclick , oncontextmenu , ondblclick , ondrag , ondragend , ondragenter , ondragleave , ondragover , ondragstart , ondrop , onerror , onfocus , onkeydown , onkeypress , onkeyup , onload , onmessage , onmousedown , onmousemove , onmouseover , onmouseout , onmouseup , onmousewheel , onresize , onscroll , onselect , onsubmit , onunload HTML 5 中事件属性。time > 标签time > 标签定义日期或时间，或者两者。-16-2011 p >time >9:00 </time > 开始营业。p >p >time datetime ="2008-02-14 ">情人节</time > 有个约会。p > TIY DOCTYPE HTML >html >body >p >time >9:00 </time > 开始营业。p >p >time datetime ="2010-02-14 ">情人节</time > 有个约会。p >body >html >HTML 4.01 与 HTML 5 之间的差异-16-2011 time > 标签是 HTML 5 中的新标签。 属性datetime datetime 定义元素的日期和时间。time > 标签支持 HTML 5 中的标准属性。 事件属性time > 标签支持 HTML 5 中的事件属性。title > 标签title > 标签定义文档的标题。 HTML 4.01 与 HTML 5 之间的差异 没有。title > 元素。 例子html >head >title >HTML 5 Tag Reference </title >head >body >-16-2011 The content of the document ......body >html > 属性 标准属性class , contenteditable , contextmenu , dir , draggable , id , irrelevant , lang , ref , registrationmark , tabindex , template , title HTML 5 中标准属性。tr > 标签tr > 标签定义表格中的行。HTML 4.01 与 HTML 5 之间的差异HTML 5 中，不支持 <tr > 标签的任何属性。 例子table >tr >td >Cell A </td >td >Cell B </td >tr >table > 属性 标准属性-16-2011 class , contenteditable , contextmenu , dir , draggable , id , irrelevant , lang , ref , registrationmark , tabindex , template , title HTML 5 中标准属性。 事件属性onabort , onbeforeunload , onblur , onchange , onclick , oncontextmenu , ondblclick , ondrag , ondragend , ondragenter , ondragleave , ondragover , ondragstart , ondrop , onerror , onfocus , onkeydown , onkeypress , onkeyup , onload , onmessage , onmousedown , onmousemove , onmouseover , onmouseout , onmouseup , onmousewheel , onresize , onscroll , onselect , onsubmit , onunload HTML 5 中事件属性。 TIY 实例(见 table )tt > 标签tt > 标签定义打字机文本。HTML 5 中不再支持该标签。请使用 CSS 代替。 HTML 4.01 与 HTML 5 之间的差异HTML 5 中不支持 <tt > 标签。 提示和注释CSS 向元素添加样式。u > 标签u > 标签定义下划线文本。HTML 5 中不再支持该标签。 HTML 4.01 与 HTML 5 之间的差异HTML 4.01 中不赞成使用 <u > 标签。 在 HTML 5 中不支持 <u > 标签。-16-2011 ul > 标签ul > 标签定义无序列表。HTML 4.01 与 HTML 5 之间的差异HTML 4.01 中，ul 元素的 "compact " 和 "type " 属性是不被赞成使用的。在 HTML 5 中，不再支持这两个 属性。CSS 来定义列表的类型。 例子ul >li >Coffee </li >li >Tea </li >ul > 属性 标准属性class , contenteditable , contextmenu , dir , draggable , id , irrelevant , lang , ref , registrationmark , tabindex , template , title HTML 5 中标准属性。 事件属性onabort , onbeforeunload , onblur , onchange , onclick , oncontextmenu , ondblclick , ondrag , ondragend , ondragenter , ondragleave , ondragover , ondragstart , ondrop , onerror , onfocus , onkeydown , onkeypress , onkeyup , onload , onmessage , onmousedown , onmousemove , onmouseover , onmouseout , onmouseup , onmousewheel , onresize , onscroll , onselect , onsubmit , onunload HTML 5 中事件属性。 TIY 实例(见标签 li )-16-2011 video > 标签video > 标签定义视频，比如电影片段或其他视频流。 实例HTML5 视频：video src ="movie .ogg " controls ="controls "> 您的浏览器不支持 video 标签。video > TIY DOCTYPE HTML >html >body >video src ="/i /movie .ogg " controls ="controls "> your browser does not support the video tag video >body >html >HTML 4.01 与 HTML 5 之间的差异video > 标签是 HTML 5 的新标签。 提示和注释-16-2011 autoplay autoplay 如果出现该属性，则视频在就绪后马上播放。controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。height pixels 设置视频播放器的高度。loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。preload preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。autoplay "，则忽略该属性。src url 要播放的视频的 URL 。width pixels 设置视频播放器的宽度。video > 标签支持 HTML 5 中的标准属性。 事件属性video > 标签支持 HTML 5 中的事件属性。-16-2011 