HTML5学习笔记简明版
发布时间：2015-12-08, 16:12:04 分类：HTML | 编辑 off 网址 | 辅助
图集1/2
正文 39984字数 858,374阅读
HTML5学习笔记简明版（1）：HTML5介绍与语法HTML5介绍
HTML5是继HTML4以后的下一代HTML标准规范，它提供了一些新的元素和属性（例如<nav>网站导航块和<footer>）。新型的标签有利于搜索引擎和语义分析，同时更好地帮助小屏幕装置和视障人士使用，除此之外，也提供了一些新的功能，比如视频音频用的<video>和<audio>，总结而言，有如下几大特点：
取消了一些HTML4里过时的元素和属性标记
其中包括纯粹显示效果的标记，如<font>和<center>，它们已经被CSS取代。HTML5 吸取了XHTML2 一些建议，包括一些用来改善文档结构的功能，比如，新的HTML 标签 header, footer, dialog, aside, figure 等的使用，将使内容创作者更加语义地创建文档，之前的开发者在实现这些功能时一般都是使用div。
内容与展示分离
b 和 i 标签依然保留，但它们的意义和之前有所不同，这些标签的意义只是为了将一段文字标识出来，而不是为了为它们设置粗体或斜体式样。u，font，center，strike 这些标签则被完全去掉了。
新增加一些全新的表单输入对象
包括日期，URL，Email 地址，其它的对象则增加了对非拉丁字符的支持。HTML5 还引入了微数据，这一使用机器可以识别的标签标注内容的方法，使语义Web 的处理更为简单。总的来说，这些与结构有关的改进使内容创建者可以创建更干净，更容易管理的网页，这样的网页对搜索引擎，对读屏软件等更为友好。
全新的、更合理的标签
多媒体对象将不再全部绑定在 object 或 embed Tag 中，而是视频有视频的Tag，音频有音频的 Tag。
本地存储
这个功能将内嵌一个本地的SQL 数据库，以加速交互式搜索，缓存以及索引功能。同时，那些离线Web 程序也将因此获益匪浅。不需要插件的富动画。
Canvas对象
将给浏览器带来直接在上面绘制矢量图的能力，这意味着用户可以脱离Flash 和Silverlight，直接在浏览器中显示图形或动画。
新的API扩展
为HTMLDocument和HTMLElement借口提供了新的API扩展。
HTML5取代Flash和Silverlight
语法(Syntax)
1 文档媒体类型
HTML5定义的HTML语法大部分都兼容于HTML4和XHTML1，但是也有一部分不兼容。大多数的HTML文档都是保存成text/html媒体类型。
HTML5为HTML语法定义了详细的解析规则（包括错误处理），用户必须遵守这些规则将它保存成text/html媒体类型。如下是一个符合HTML语法规范的例子：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Example document</title>
</head>
<body>
<p>Example paragraph</p>
</body>
</html>
Run code
Cut to clipboard
HTML5为HTML语法也定义了一个text/html-sandboxed媒体类型，以便可以host不信任的内容。
其它能够用在HTML5的语法是XML，它兼容于XHTML1。用XML语法的话需要将文档保存成XML媒体类型，并且根据XML的规范需要设置命名空间（namespace）为http://www.w3.org/1999/xhtml。
下面的例子文档符合HTML5里的XML语法规范，需要注意的是XML文档必须保存成XML媒体类型的，例如application/xhtml+xml或者application/xml。
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example document</title>
</head>
<body>
<p>Example paragraph</p>
</body>
</html>
Run code
Cut to clipboard
2 Character Encoding
HTML5的HTML语法里，有三种形式可以声明字符串的encoding类型：
在传输级别（transport level）上，在HTTP实例的header里设置Content-Type。
在文件的开头设置一个Unicode的Byte Order Mark(BOM)，该字符为文件的encoding方式提供了一个签名。
在文档的前1024个byte之前的内容里，使用带有charset属性的meta元素来声明encoding方式。例如：<meta charset="UTF-8">表明该文档是UTF-8格式的。它是替换原有的<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">语法声明，尽管原有的语法依然可用，但在HTML5里不推荐使用。
对于HTML5里的XML语法，依然和以前的XML语法声明式一样的。
3 DOCTYPE
HTML5的HTML语法要求文档必须声明DOCTYPE以确保浏览器可以在标准模式下展示页面。这个DOCTYPE没有其它的目的，并且在XML里是可选项，因为XML媒体格式的文档一直就是在标准模式下处理的。
DOCTYPE的声明方式是<!DOCTYPE html>，不区分大小写。HTML的早期版本声明的DOCTYPE需要很长是因为HTML语言是建立在SGML的基础上，所以需要关联引用一个相对应的DTD。HTML5和之前的版本不一样了，仅仅需要声明DOCTYPE就可以告诉文档启用的是HTML5语法标准了，浏览器会为<!DOCTYPE html>做剩余的工作的。
4 MathML和SVG
HTML5的HTML语法允许在文档里使用MathML（数学标记语言）和SVG（可伸缩矢量图）元素。例如，一个非常简单的HTML页面包含一个svg元素画出的圆：
<!doctype html>
<title>SVG in text/html</title>
<p>
A green circle:
<svg> <circle r="50" cx="50" cy="50" fill="green"/> </svg>
</p>
Run code
Cut to clipboard
更多复杂的组合标记也是支持的，比如使用svg的foreignObject元素你可以嵌套MathML, HTML，或者自身嵌套。
5 其它
HTML5已经原生支持IRI了，尽管这些IRI只能在UTF-8和UTF-16的文档里使用。
lang属性如果设置的不合法，将会更新为空字符串，以告诉浏览器是一个未知的语言，作用和XML里的xml:lang一样。
HTML5学习笔记简明版（2）：新元素之section,article,aside
section
section元素描绘的是一个文档或者程序里的普通的section节，一般来说一个section包含一个head和一个content内容块。section可以表示成一个小节，或者tab页面里的一个tab下的box块。一个页面里可以拆分成多个section，分别代表introduction, news items和contact information。
如果元素的内容集中到一起显示可以表达相应的意思的话，那就可以定义成article元素，而没必要使用section元素。
section元素不是一般的容器元素，所以如果一个元素需要定义相应的style或者script脚本的话，那推荐使用div元素，section的使用条件是确保这个元素的内容能够明确地展示在文档的大纲里。
下面的例子代码来自苹果网站页面的一部分，代码里包含了2个短小的section：
<article>
<hgroup>
<h1>Apples</h1>
<h2>Tasty, delicious fruit!</h2>
</hgroup>
<p>The apple is the pomaceous fruit of the apple tree.</p>
<section>
<h1>Red Delicious</h1>
<p>These bright red apples are the most common found in many supermarkets.</p>
</section>
<section>
<h1>Granny Smith</h1>
<p>These juicy, green apples make a great filling for apple pies.</p>
</section>
</article>
Run code
Cut to clipboard
可以看到，在section里可以任意使用h1元素，而不用考虑这个section是顶级的，还是二级或者三级元素。
下面的代码是一个毕业典礼的页面，包含2个section，一个是显示将要毕业人的名单，一个是显示毕业典礼的形式。
<!DOCTYPE Html>
<html>
<head>
<title>Graduation Ceremony Summer 2022</title>
</head>
<body>
<h1>Graduation</h1>
<section>
<h1>Ceremony</h1>
<p>Opening Procession</p>
<p>Speech by Validactorian</p>
<p>Speech by Class President</p>
<p>Presentation of Diplomas</p>
<p>Closing Speech by Headmaster</p>
</section>
<section>
<h1>Graduates</h1>
<ul>
<li>Molly Carpenter</li>
<li>Anastasia Luccio</li>
<li>Ebenezar McCoy</li>
<li>Karrin Murphy</li>
<li>Thomas Raith</li>
<li>Susan Rodriguez</li>
</ul>
</section>
</body>
</html>
Run code
Cut to clipboard
article
article代表了一个文档内容的独立片段，例如，博客条目或报纸文章，<article>标签的内容独立于文档的其余部分。
article 是一个特殊的 section 标签，它比 section 具有更明确的语义, 它代表一个独立的、完整的相关内容块。一般来说， article 会有标题部分(通常包含在 header 内)，有时也会 包含 footer 。虽然 section 也是带有主题性的一块内容，但是无论从结构上还是内容上来说，article 本身就是独立的、完整的。
当 article 内嵌 article 时，原则上来说，内部的 article 的内容是和外层的 article 内容是相关的。例如，一篇博客文章中，包含用户提交的评论的 article 就应该潜逃在包含博客文章 article 之中。
<article>
<a href="http://www.apple.com">Safari 5 released</a><br />
7 Jun 2010. Just after the announcement of the new iPhone 4 at WWDC,
Apple announced the release of Safari 5 for Windows and Mac......
</article>
Run code
Cut to clipboard
aside
HTML5提供的<aside>元素标签用来表示当前页面或文章的附属信息部分，可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别与主要内容的部分。
根据目前的规范，<aside>元素有两种使用方法：
n 被包含在<article>中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的引用、词汇列表等。
n 在<article>之外使用，作为页面或站点全局的附属信息部分；最典型的形式是侧边栏(sidebar)，其中的内容可以是友情链接、附属导航或广告单元等。
下面的代码示例综合了以上两种使用方法：
<body>
<header>
<h1>My Blog</h1>
</header>
<article>
<h1>My Blog Post</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
<aside>
<!-- Since this aside is contained within an article, a parser
should understand that the content of this aside is directly related
to the article itself. -->
<h1>Glossary</h1>
<dl>
<dt>Lorem</dt>
<dd>ipsum dolor sit amet</dd>
</dl>
</aside>
</article>
<aside>
<!-- This aside is outside of the article. Its content is related
to the page, but not as closely related to the above article -->
<h2>Blogroll</h2>
<ul>
<li><a href="#">My Friend</a></li>
<li><a href="#">My Other Friend</a></li>
<li><a href="#">My Best Friend</a></li>
</ul>
</aside>
</body>Run code
Cut to clipboard
HTML5学习笔记简明版（3）：新元素之hgroup,header,footer,address,nav
hgroup
<hgroup> 标签用于对网页或区段（section）的标题进行组合。
<hgroup>
<h1>Welcome to my WWF</h1>
<h2>For a living planet</h2>
</hgroup>
<p>The rest of the content...</p>
Run code
Cut to clipboard
header
header元素是一种具有引导和导航作用的辅助元素。通常，header元素可以包含一个区块的标题(如h1至h6，或者hgroup元素标签)，但也可以包含其他内容，例如数据表格、搜索表单或相关的logo图片。
我们可以使用该元素来写整个页面的标题部分：
<header>
<h1>The most important heading on this page</h1>
</header>
Run code
Cut to clipboard
同一个页面中，每一个内容区块都可以有自己的<header>元素，例如：
<header>
<h1>The most important heading on this page</h1>
</header>
<article>
<header>
<h1>Title of this article</h1>
</header>
<p>...Lorem Ipsum dolor set amet...</p>
</article>
Run code
Cut to clipboard
<header>元素通常包含一个标题标签(h1至h6)或是hgroup。另外，也可以包含其他内容，例如数据表格、搜索表单或相关的logo图片；根据最新的W3C HTML5规范更新，<nav>元素标签也可以在<header>中使用。
footer
footer元素可以作为其直接父级内容区块或是一个根区块的结尾。footer通常包括其相关区块的附加信息，如作者、相关阅读链接以及版权信息等。
过去(及目前)，我们通常使用类似下面这样的代码来写页面的页脚：
<div id="footer">
<ul>
<li>copyright</li>
<li>sitemap</li>
<li>contact</li>
<li>to top</li>
</ul>
<div>
Run code
Cut to clipboard
在HTML5中，我们可以不使用div，而用更加语义化的footer来写：
<footer>
<ul>
<li>copyright</li>
<li>sitemap</li>
<li>contact</li>
<li>to top</li>
</ul>
</footer>
Run code
Cut to clipboard
在同一个页面中可以使用多个<footer>元素，即可以用作页面整体的页脚，也可以作为一个内容区块的结尾，例如，我们可以将<footer>直接写在<section>或是<article>中：
<section>
Section content appears here.
<footer>
Footer information for section.
</footer>
</section>
<article>
Article content appears here.
<footer>
Footer information for article.
</footer>
</article>
Run code
Cut to clipboard
address
address元素用来在文档中呈现联系信息，包括文档创建者的名字、站点链接、电子邮箱、真实地址、电话号码等；address不只是用来呈现电子邮箱或真实地址这样的“地址”概念，而应该包括与文档创建人相关的各类联系方式信息。
根据以上定义，我们可以使用下面的代码来展示一些志愿者的名字及主页链接：
The HTML5 Doctor is run by the following group of volunteers:
<address>
<a href="http://html5doctor.com/author/jacko">Jack Osborne</a>,
<a href="http://html5doctor.com/author/richc">Rich Clark</a>,
<a href="http://html5doctor.com/author/miker">Mike Robinson</a>,
</address>
Run code
Cut to clipboard
下面是另一个范例，同时还使用到了<footer>及<time> 元素：
<footer>
<div class="vcard"> by
<address class="author">
<em class="fn"><a title="Posts by Jack Osborne" href="#">Jack Osborne</a></em>
</address> on
<time datetime="2009-11-04" class="published updated">November 4th, 2009</time>
</div>
</footer>
Run code
Cut to clipboard
如果我们确实需要在页面中显示某些与当前文档创建者联系方式无关的联系人信息，那么可以使用hCard微格式：
<div class="vcard">
<p class="fn"><a class="url" href="#">Dr. Jack Osborne</a><p>
<p class="adr">
<span class="street-address">HTML5 Hospital</span>
<span class="region">Doctorville</span>
<span class="postal-code">Postal Code</span>
<span class="country-name">Great Britain</span>
</p>
<p class="tel">+44 (0)XXXX XXXXXX</p>
</div>
Run code
Cut to clipboard
nav
nav元素是一个可以用来作为页面导航的链接组；其中的导航元素链接到其他页面或当前页面的其他部分。并不是所有的链接组都要被放进<nav>元素；例如，在页脚中通常会有一组链接，包括服务条款、首页、版权声明等；这时使用<footer>元素是最恰当的，而不需要<nav>元素。
一直以来，我们都习惯用如下这种方式来定义导航条：
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/blog/">Blog</a></li>
</ul>
</nav>
Run code
Cut to clipboard
下面是W3C给出的一个代码示例：
<body>
<h1>The Wiki Center Of Exampland</h1>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/events">Current Events</a></li>
...more...
</ul>
</nav>
<article>
<header>
<h1> Demos in Exampland</h1>
<p>Written by A. N. Other.</p>
</header>
<nav>
<ul>
<li><a href="#public">Public demonstrations</a></li>
<li><a href="#destroy">Demolitions</a></li>
...more...
</ul>
</nav>
<div>
<section id="public">
<h1>Public demonstrations</h1>
<p> ...more...</p>
</section>
<section id="destroy">
<h1>Demolitions</h1>
<p>...more...</p>
</section>
...more...
</div>
<footer>
<p><a href="?edit">Edit</a> | <a href="?delete">Delete</a> | <a href="?Rename">Rename</a></p>
</footer>
</article>
<footer>
<p><small>© copyright 1998 Exampland Emperor</small></p>
</footer>
</body>Run code
Cut to clipboard
HTML5学习笔记简明版（4）：新元素之video,audio,meter,datalist,keygen,output
video
通过<video>标签，我们可以抛弃最近不怎么讨好的Flash，直接在页面中播放视频文件。视频文件自然是最符合语义化的文件格式，但该元素标签同样支持音频与图片。
过去(及目前)，我们通常要使用类似下面这样繁冗丑陋的代码来将视频放置在页面中，但这种方式要求浏览器安装有Flash插件，并支持JavaScript：
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="src" value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" />
<param name="allowfullscreen" value="true" />
<embed type="application/x-shockwave-flash" width="425" height="344"
src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true">
</embed>
</object>
Run code
Cut to clipboard
HTML5的方式：
<video width="640" height="360" src="http://www.youtube.com/demo/google_main.mp4" controls autobuffer>
<p>
Try this page in Safari 4! Or you can
<a href="http://www.youtube.com/demo/google_main.mp4">download the video</a>
instead.
</p>
</video>
Run code
Cut to clipboard
<video>标签有如下几个常用属性：
Autoplay: 用来设定视频是否在页面加载后自动播放。
Src: 为视频指定文件链接或下载路径，当浏览器不支持<video>标签或发生某种播放错误时，可以提供给用户进行下载。
Autobuffer: 用来设定视频是否自动缓冲；如果设定，那么页面加载之后，视频会自动下载缓冲，当用户点击播放按钮后，至少已经有一部分视频可以直接观看而无需等待了。
Poster: 用来为视频设置一个“相框默认图片”性质的背景图片；当视频无法正常加载播放时可以向用户呈现。
Controls: 用来设置是否为视频添加控制条，例如“播放”、“暂停”等；控制条的外观可以自定义。
Loop: 用来设置视频是否循环播放。
Width , Height: 用来控制视频的宽度与高度。
虽然<video>元素备受关注且大有潜力，不过距离被主流浏览器全面支持仍有待时日；目前，如果一定有必要使用<video> 标签，我们可以使用类似如下不伦不类的代码组合方式：
<video width="640" height="360" src="http://www.youtube.com/demo/google_main.mp4" autobuffer controls poster="whale.png">
<object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" width="640"height="360"
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param value="http://www.youtube.com/demo/google_main.mp4">
<param value="true">
<param value="false">
<embed src="http://www.youtube.com/demo/google_main.mp4" width="640"height="360"
autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/">
</embed>
</object>
</video>
Run code
Cut to clipboard
audio
HTML5中的新元素标签<audio>是被大家等待已久的，它有原生支持音频播放的功能，而不需要浏览器安装额外的扩展；目前支持<audio>元素的浏览器主要有Safari 4，Firefox 3.5和Chrome 3。
<audio>元素标签的一些常用属性：
src：音频文件路径。
autobuffer：设置是否在页面加载时自动缓冲音频。
autoplay：设置音频是否自动播放。
loop：设置音频是否要循环播放。
controls：设置是否显示播放控制面板。
可以看到这些属性和<video>元素标签的属性很类似。下面我们来看一个代码范例：
<audio src="elvis.ogg" controls autobuffer></audio>
这段代码可以在Firefox 3.5和Chrome 3中正常工作，对于Safari 4来说要使用ogg格式的音频文件替换掉mp3文件。不过，鉴于W3C的HTML5定义规范并没有最终完成，这些格式限制也许在将来会有所变化。
根据定义规范，以下几种API方法是可以使用的：
play()：播放音频
pause()：暂停播放
canPlayType()：命令浏览器判断当前音频文件是否可以被播放
buffered()：设定文件需要缓冲部分的开始与结束时间点。
另外，我们可以使用<source>元素标签来配合<audio>；<source>用来指定多个音频文件，如果当前浏览器不支持第一个文件，那么<audio>会自动尝试播放下面一个<source>中指定的文件；我们还可以在它们后面加上目前常规的<embed>代码来加载Flash播放器，作为后备方案；范例如下：
<audio controls autobuffer>
<source src="elvis.ogg" />
<source src="elvis.mp3" />
<!-- now include flash fall back -->
</audio>
Run code
Cut to clipboard
meter
meter元素标签用来表示范围已知且可度量的等级标量或分数值，如磁盘使用量比例、关键词匹配程度等。需要注意的是，<meter>不可以用来表示那些没有已知范围的任意值，例如重量、高度，除非已经设定了它们值的范围。<meter>元素共有6个属性：
Value：表示当前标量的实际值；如果不做指定，那么<meter>标签中的第一个数字就会被认为是其当前实际值，例如<meter>2 out of 10</meter>中的“2”；如果标签内没有数字，那么标量的实际值就是0。
Min：当前标量的最小值；如不做指定则为0。
Max：当前标量的最大值；如不做指定则为1；如果指定的最大值小于最小值，那么最小值会被认为是最大值。
Low：当前标量的低值区；必须小于或等于标量的高值区数字；如果低值区数字小于标量最小值，那么它会被认为是最小值。
High：当前标量的高值区。
Optimum：最佳值；其范围在最小值与最大值区间当中，并且可以处于高值区。
来看一些代码范例；首先，不设定任何属性的状况：
<p>Your score is: <meter>2 out of 10</meter></p>Run code
Cut to clipboard
然后呢，可以增加最大值与最小值的属性设定：
<p>Your score is: <meter min="0" max="10">2 out of 10</meter></p>Run code
Cut to clipboard
增加了低值区、高值区和最佳值的属性设定：
<p>Your score is: <meter value="91" min="0" max="100" low="40" high="90" optimum="100">A+</meter></p>Run code
Cut to clipboard
这时<meter>的最大值会被认为是100%或1。
下面这段代码可以用作节日倒计时：
<p>Christmas is in <meter value ="30" min="1" max="366" title="days">30 days!</p>Run code
Cut to clipboard
<meter>标签中的内容可以不包含任何数字，这时最大值会被认为是1；可以参考以下的代码：
<p><meter value="0.5">Moderate activity,</meter> Usenet, 618 subscribers</p>
<p><meter value="0.25">Low activity,</meter> Usenet, 22 subscribers</p>
<p><meter value="0.25">Low activity,</meter> Usenet, 66 subscribers</p>
Run code
Cut to clipboard
datalist
datalist 与 input 的新属性list一起使用可以创建组合框，双击input的时候可以提供选项让用户选择，类似历史记录一样。
<input list="browsers">
<datalist id="browsers">
<option value="Safari">
<option value="Internet Explorer">
<option value="Opera">
<option value="Firefox">
</datalist>
Run code
Cut to clipboard
keygen
<keygen> 标签规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器。
<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>
Run code
Cut to clipboard
output
<output> 标签定义不同类型的输出，比如脚本的输出。例如：
<form action="" method="get">
<p>
10 + 5 = <output name="sum"></output>
</p>
<button type="submit">计算</button>
</form>
<script type="text/javascript">
(function() {
var f = document.forms[0];
if ( typeof f['sum'] !== 'undefined' ) {
f.addEventListener('submit', function(e) {
f['sum'].value = 15;
e.preventDefault();
}, false);
} else {
alert('你的浏览器尚未准备好！');
}
})();
</script>Run code
Cut to clipboard
HTML5学习笔记简明版（5）：input的type超级类型
原文 http://www.cnblogs.com/TomXu/archive/2011/12/12/2269079.htmlRun code
Cut to clipboard
HTML5为input的type类型增加了多种枚举值，用来表达不同的意思，同事具有验证功能，如果格式不对，浏览器将原始提供错误提示，堪称超级牛X啊，具体如下：
学习至此，大叔发现mhtml5网站上已经有很多现成的资料了，所以如下的一些新元素请大家自行参考该网站的资料学习，大叔将着重继续学习HTML5在现有元素上的更新改变。
figure元素
figcaption元素
track元素
embed元素
mark元素
progress元素
time元素
ruby, rt和rp元素
bdi元素
wbr元素
canvas元素
command元素
details元素Run code
Cut to clipboard
HTML5学习笔记简明版（6）：新增属性（1）
a和area下的media属性
为了和link元素保存一致性，a元素和area元素也都增加了media属性，只有在href存在时菜有效。media属性的意思是目标 URL 是为何种媒介/设备优化的，默认值是all，详细语法规范请访问：
http://dev.w3.org/csswg/css3-mediaqueries/#media0Run code
Cut to clipboard
代码示例：
<a href="att_a_media.asp?output=print" media="print and (resolution:300dpi)">
HTML5 a media attribute.
</a>
Run code
Cut to clipboard
area下的hreflang, type, rel属性
为了保存和a元素以及link元素的一致性，area元素增加了hreflang, type, rel等属性。
base下的target属性
base下的target属性和a的target属性是一样的，目的很多老版本浏览器早就一起支持了。
注1：target必须在所有连接元素之前声明。
注2：如果声明多个，以第一个为准。
<!DOCTYPE html>
<html>
<head>
<title>This is an example for the <base> element</title>
<base href="http://www.example.com/news/index.html">
</head>
<body>
<p>Visit the <a href="archives.html">archives</a>.</p>
</body>
</html>
点击上面的连接，将跳转到http://www.example.com/news/archives.html。Run code
Cut to clipboard
meta下的charset属性
charset是用来定义文档的encoding方式的，如果在XML里定义了该属性，则charset的值必须是不区分大小写的ASCII以便match UTF-8，因为XML文档强制使用UTF-8作为encoding方式的。
注：meta属性上的charset属性在XML文档里是不起作用的，仅仅是为了方便与XHTML直接互相迁移。
不能声明多个带有charset属性的meta元素。
在HTML4里，我们不得不这样定义：
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
Run code
Cut to clipboard
在HTML5里，我们这样定义就行了：
<meta charset="ISO-8859-1">
Run code
Cut to clipboard
autofocus属性
HTML5为input, select, textarea和button元素增加了一个autofocus属性（hidden的input不能使用），它提供了一种声明式的方式来定义当页面load以后，焦点自动作用于当前元素上。使用autofocus可以提高用户体验，比如我们在登录页面设置，页面load以后自动将焦点设置到用户名的textbox上。
<input maxlength="256" name="loginName" value="" autofocus>
<input type="submit" value="Login">Run code
Cut to clipboard
注1：一个页面声明一次autofocus属性。
注2：一个页面里不是必须要设置autofocus的。
placeholder属性
input和textarea元素新增加了placeholder属性，该属性是提升用户输入内容。当用户点击的时候，该内容文本自动消失，离开焦点并且值为空的话，再次显示。以前我们都是使用JavaScript代码来实现，其实蛮复杂的，有了placeholder属性就爽了，直接写成下面下这样的代码：
<input type="username" placeholder="请输入你的用户名">
Run code
Cut to clipboard
form属性
form属性（不是<form>元素），是一个划时代的属性，它允许你将<form>表单里的表单控件声明在表单外门，只需要在相应的控件上设置form属性为指定的<form>表单的id就行了，不需要非得把元素声明在<form>元素里了，解放啦。
代码如下：
<label>Email:
<input type="email" form="foo" name="email">
</label>
<form id="foo"></form>
Run code
Cut to clipboard
支持该属性的元素有：input, output, select, textarea, button, label, object和fieldset。
required属性
required属性是一个验证属性，表明该控件是必填项，在submit表单之前必须填写。可用的元素是：input, select和textarea（例外： type类型为hidden, image或类似submit的input元素）。
如果在select上使用required属性，那就得设置一个带有空值的占位符option。代码如下：
<label>Color: <select name=color required>
<option value="">Choose one
<option>Red
<option>Green
<option>Blue
</select></label>
Run code
Cut to clipboard
fieldset下的disabled属性
当fieldset的设置disabled属性时，其所有的子控件都被禁用掉了，但不包括legend里的元素。name属性是用来脚本访问的。
代码1：
<form>
<fieldset name="clubfields" disabled>
<legend> <label>
<input type=checkbox name=club onchange="form.clubfields.disabled = !checked">
Use Club Card
</label> </legend>
<p><label>Name on card: <input name=clubname required></label></p>
<p><label>Card number: <input name=clubnum required pattern="[-0-9]+"></label></p>
<p><label>Expiry date: <input name=clubexp type=month></label></p>
</fieldset>
</form>
Run code
Cut to clipboard
当点击legend里的checkbox的时候，会自动切换fieldset子元素的disabled状态。
代码2：
<form>
<fieldset name="clubfields">
<legend>
<label>
<input type="checkbox" name="club" onchange="form.clubfields.disabled = !checked">
Use Club Card
</label>
</legend>
<p>
<label>
Name on card:
<input name="clubname" required></label></p>
<fieldset name="numfields">
<legend>
<label>
<input type="radio" checked name="clubtype" onchange="form.numfields.disabled = !checked">
My card has numbers on it
</label>
</legend>
<p>
<label>
Card number:
<input name="clubnum" required pattern="[-0-9]+"></label></p>
</fieldset>
<fieldset name="letfields" disabled>
<legend>
<label>
<input type="radio" name="clubtype" onchange="form.letfields.disabled = !checked">
My card has letters on it
</label>
</legend>
<p>
<label>
Card code:
<input name="clublet" required pattern="[A-Za-z]+"></label></p>
</fieldset>
</fieldset>
</form>
Run code
Cut to clipboard
在这个例子，当你外面的 "Use Club Card" checkbox没有选中的时候，里面的子控件都是被禁用的，如果选中了，两个radiobutton都可用了，然后可以选择哪一个子fieldset你想让它可用。
input下的新属性(autocomplete, min, max, multiple, pattern, step)
input下增加了几个用于约束输入内容的属性（autocomplete, min, max, multiple, pattern和step），目前只有部分浏览器支持required和autocomplete属性，其它属性尚未支持。
autocomplete 属性规定输入字段是否应该启用自动完成功能, 自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。
<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>
Run code
Cut to clipboard
注释：autocomplete 属性适用于 <form>，以及下面的 <input> 类型：text, search, url, telephone, email, password, datepickers, range 以及 color。
另外也可以声明一个list属性，用来和存放数据的datalist元素关联：
<form>
<label>Homepage: <input name=hp type=url list=hpurls></label>
<datalist id=hpurls>
<option value="http://www.google.com/" label="Google">
<option value="http://www.reddit.com/" label="Reddit">
</datalist>
</form>
Run code
Cut to clipboard
当input为空的时候，双击它，就会弹出提示选项（选项内容就是定义的label（Google/Reddit））。选择一个label就会将对应的value地址更新到input里（目前FF支持）。
datalist的声明形式可以有多种：
<datalist id="breeds">
<option value="Abyssinian">
<option value="Alpaca">
<!-- ... -->
</datalist>Run code
Cut to clipboard
或者
<datalist id="breeds">
<label>
or select one from the list:
<select name="breed">
<option value=""> (none selected)
<option>Abyssinian
<option>Alpaca
<!-- ... -->
</select>
</label>
</datalist>
Run code
Cut to clipboard
另外，当input的type为image的时候，input还支持width和height属性用来指定图片的大小。
HTML5学习笔记简明版（7）：新增属性（2）
dirname属性
input 和 textarea 元素有了一个新元素 dirname，用于用户所设置的提交的方向性的控制(译注，即书写的方向性，ltr或rtl)。
<form action="addcomment.cgi" method=post>
<p><label>Comment: <input type=text name="comment" dirname="comment.dir" required></label></p>
<p><button name="mode" type=submit value="add">Post Comment</button></p>
</form>
Run code
Cut to clipboard
用户提交的时候，浏览器会接收到3个参数，分别是：comment, comment.dir和mode，类似下面这样：comment=Hello&comment.dir=ltr&mode=add
如果是阿拉伯文的浏览器，输入的是阿拉伯文مرحبًا的话，那传回的参数就应该是这样的：
comment=%D9%85%D8%B1%D8%AD%D8%A8%D9%8B%D8%A7&comment.dir=rtl&mode=add
Run code
Cut to clipboard
textarea下的maxlength和wrap属性
textarea新增的maxlength和input的maxlength是一样的，都是限制最大长度的。
新增的wrap属性为枚举值（soft/hard），意思分别是：
hard：自动硬回车换行，换行标记一同被传送到服务器中去，必须与cols同时使用才能判断多少字符换行；
soft：自动软回车换行，换行标记不会传送到服务器中去
form下的novalidate属性
新增属性novalidate的意思是允许form表单不验证即可提交（不用管form里的元素是否有验证条件，例如required, min, max等）。
例子代码：
<form action="demo_form.asp" novalidate="novalidate">
E-mail: <input type="email" name="user_email" />
<input type="submit" />
</form>
Run code
Cut to clipboard
还有一种用法是，同一个form里有多个submit按钮，可以针对某个按钮设置formnovalidate属性来忽略验证，例如：
<form action="editor.cgi" method="post">
<p><label>Name: <input required name=fn></label></p>
<p><label>Essay: <textarea required name=essay></textarea></label></p>
<p><input type=submit name=submit value="Submit essay"></p>
<p><input type=submit formnovalidate name=save value="Save essay"></p>
<p><input type=submit formnovalidate name=cancel value="Cancel"></p>
</form>
Run code
Cut to clipboard
该form只有在点击Submit essay按钮的时候才验证表单，另外2个按钮不验证。
input与button下的新属性
input和button元素新增加了几个新属性（formaction, formenctype, formmethod, formnovalidate和formtarget），如果这些设置这些属性的话，那所对应的form属性值将被覆盖，即input或button所属的form元素的action, enctype, method, novalidate和target属性的值将被覆盖。
例子代码：
<form action="demo_form.asp" method="get">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="Submit" />
<input type="submit" formmethod="post" formaction="demo_post.asp" value="Submit" />
</form>
<form action="demo_form.asp" method="get">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="Submit" /><br />
<input type="submit" formaction="demo_admin.asp" value="Submit as admin" />
</form>
<form action="demo_form.asp" method="get">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="Submit" />
<input type="submit" formtarget="_blank" value="Submit" />
</form>
Run code
Cut to clipboard
menu下的type和label属性
menu 元素有了两个新属性：type 和 label。它们允许元素转化成典型用户界面里的菜单，并结合全局 contextmenu 属性提供上下文菜单。
style下的scoped属性
style 元素有了一个新的 scoped 属性，用来启用限定作用范围的样式表。在一个这样的 style 元素里的样式规则只应用到当前style元素的父元素根下的子树，即兄弟树。
<!-- 这个article正常使用head里声明的style -->
<article>
<h1>Blah Title Blah</h1>
<p>Blah blah article blah blah.</p>
</article>
<article>
<!-- 这里声明的style只能让该article以及子元素使用 -->
<style scoped>
h1 { color: hotpink; }
article { border: solid 1px hotpink; }
</style>
<h1>Blah Title Blah</h1>
<p>Blah blah article blah blah.</p>
</article>
Run code
Cut to clipboard
script下的async属性
async属性可以让script加载的脚步异步执行（即必须是src引用文件的形式才可以用），例如：
<script type="text/javascript" src="demo_async.js" async="async"></script>
有多种执行外部脚本的方法：
如果 async="async"：脚本相对于页面的其余部分异步执行（当页面继续进行解析时，脚本将被执行）
如果不使用 async 且 defer="defer"：脚本将在页面完成解析时执行
如果既不使用 async 也不使用 defer：在浏览器继续解析页面之前，立即读取并执行脚本
html下的manifest属性
html 元素有了一个新属性 manifest，指向一个用于结合离线Web应用API的应用程序缓存清单。
首先，需要先创建manifest文件
CACHE MANIFEST
#This is a comment
CACHE #需要缓存的文件
index.html
style.css
NETWORK: #不需要缓存的文件
search.php
login.php
FALLBACK: #资源不可用的情况下，重定向的地址
/api offline.html
然后加该文的地址加到html属性里：
<html manifest="/offline.manifest">
例子：http://www.mangguo.org/create-offline-html5-web-apps-in-5-easy-steps/
Run code
Cut to clipboard
link下的sizes属性
link 元素有了一个新的属性 sizes。可以结合 icon 的关系(通过设置 rel 属性，可被用于如网站图示)一起使用来表明被引用图标的大小。因此允许了不同的尺寸的图标。
例子代码：
<link rel="icon" href="demo_icon.gif" type="image/gif" sizes="16x16" />
Run code
Cut to clipboard
ol下的reversed属性
ol 元素有了一个新属性 reversed。当其存在时，代表列表中的顺序为降序。
iframe下的sanddbox, seamless和srcdoc属性
iframe 元素有了三个新属性分别是 sandbox, seamless, 和 srcdoc，用以允许沙箱内容，例如，博客评论。
例子代码：
<iframe sandbox src="http://usercontent.example.net/getusercontent.cgi?id=12193"></iframe>
<iframe sandbox="allow-same-origin allow-forms allow-scripts"
src="http://maps.example.com/embedded.html"></iframe>
Seamless:
<nav><iframe seamless src="nav.include.html"></iframe></nav>
Run code
Cut to clipboard
video和audio的play属性
HTML5也使得所有来自HTML4的事件处理属性（那些形如 onevent-name 的属性）变成全局属性，并为其定义的新的事件添加了几个新的事件处理属性。比如，媒体元素(video 和 audio)API所使用的 play 事件。
HTML5学习笔记简明版（8）：新增的全局属性
contenteditable属性
任何元素使用contenteditable属性的话，代表该元素是一个可编辑的区域。用户可以改变元素的内容以及操作标记。例如：
<p contenteditable="true">这是一段可编辑的段落。请试着编辑该文本。</p>
Run code
Cut to clipboard
该属于有3种值可选：true, false和空字符，空字符代表true。
而对<iframe id="editor"></iframe>框架页面可以通过JS程序代码来实现：editor.document.designMode="on" 。
contextmenu属性
contextmenu属性用来指向一个作者提供的上下文目录，例如：
<form name="npc" action="">
<label>Character name: <input type=text contextmenu=namemenu required></label>
<menu type=context id=namemenu>
<command label="Pick random name" onclick="document.forms.npc.elements.char.value = getRandomName()">
<command label="Prefill other fields based on name" onclick="prefillFields(document.forms.npc.elements.char.value)">
</menu>
</form>
Run code
Cut to clipboard
data-*属性
开发人员可以在任何元素上定义他们想要的任何属性，只要他们在其之前加上 data- 的前缀，以此避免与未来的HTML版本的冲突，asp.net MVC下的jQuery验证就是采用这种方式，例如：data-val=”true”。
draggable和dropzone属性
draggable 和 dropzone 属性可以与新的拖放API一起使用，draggable为是否允许拖放，dropzone代表可以拖放到哪个区域。
<p draggable="true" dropzone="div1">test</p>
hidden属性
不显示定义了hidden属性的元素。但与表现层的比如tab切换隐藏图层不同，hidden后的元素针对所有的显示，比如屏幕阅读器。与form里的hidden域相似。
role和aria-*属性
HTML5把WAI-ARIA当作是合法的语言增加，用来做辅助作用。
spellcheck属性
spellcheck 属性规定是否对元素内容进行拼写检查。例如：
<p contenteditable="true" spellcheck="true">这是可编辑的段落。请试着编辑文本。</p>
Run code
Cut to clipboard
HTML5学习笔记简明版（9）：变化的元素和属性
改变的元素（Element）
以下元素在HTML5里的用法稍作修改以便能在web里更好的使用或者起到更大作用：
没有href属性的a元素将显示成一个占位符，而且a元素内部现在支持flow content类型的元素了（例如：article, input, span等）。
address可以被article, aside, nav, section限定范围了，以前只能作用于全局范围。
b元素现在描述为在普通文章中仅从文体上突出的不包含任何额外的重要性的一段文本。例如：文档概要中的关键字，评论中的产品名。或者代表强调的排版方式。另外，根据HTML5的规范，标题文本应使用<h1>到<h6>，强调文本使用<em>，重要文本使用<strong>，标记高亮文本使用<mark>，其它方面的才使用<b>。
cite是用来标明引言的，所谓引言，就是对一本书、一篇报告或其它出版的来源资料的引用。可使用该标签对参考文献的引用进行定义，比如书籍或杂志的标题，HTML4里该意思（一个人的名字）将不再适用。
dl元素表示为包含多个name-value的group，不再仅仅表示为HTML4原来的意思。
head元素不再允许包含object子元素。
hr元素定义内容中的主题变化，并显示为一条水平线，不再仅仅是水平线的意思。
i元素现在描述为在普通文章中突出不同意见或语气或其他的一段文本，例如：一个分类名称，一个技术术语，一个外语中的谚语，一个想法等。或者代表斜体的排版方式
label元素，浏览器不再将焦点从label移动到控件上，除非底层的平台用户接口进行了标准化。
menu元素进行了重新定义，在toolbars和context menus下更有用。
s元素标记的内容不再是精确和重要的，不建议使用，建议使用<del>。
small元素将旁注呈现为小型文本，免责声明、注意事项、法律限制或版权声明的特征通常都是小型文本。小型文本有时也用于新闻来源、许可要求。对于由 em 元素强调过的或由 strong 元素标记为重要的文本，small 元素不会取消对文本的强调，也不会降低这些文本的重要性。
strong元素表示为重要的文本，而不再是语气更重的强调文本。
u元素表示下划线，内容是一段模糊不清的文本，或者是错误但是依然需要显示的文本，或者是专有名词（比如汉语词汇）。
改变的属性（Attribute）
li元素的value属性重新启用，在4.0里被限制了，但HTML5里开始重新使用这个属性，同样ol的 start属性也被重新启用了。注：value值只是索引值，而不是排序值。
例如：
<figure>
<figcaption>The top 10 movies of all time</figcaption>
<ol>
<li value="10"><cite>Josie and the Pussycats</cite>, 2001</li>
<li value="9"><cite lang="sh">Црна мачка, бели мачор</cite>, 1998</li>
<li value="8"><cite>A Bug's Life</cite>, 1998</li>
<li value="7"><cite>Toy Story</cite>, 1995</li>
<li value="6"><cite>Monsters, Inc</cite>, 2001</li>
<li value="5"><cite>Cars</cite>, 2006</li>
<li value="4"><cite>Toy Story 2</cite>, 1999</li>
<li value="3"><cite>Finding Nemo</cite>, 2003</li>
<li value="2"><cite>The Incredibles</cite>, 2004</li>
<li value="1"><cite>Ratatouille</cite>, 2007</li>
</ol>
</figure>
Run code
Cut to clipboard
上面的代码也可以使用ol元素的reversed属性来实现：
<figure>
<figcaption>The top 10 movies of all time</figcaption>
<ol reversed>
<li><cite>Josie and the Pussycats</cite>, 2001</li>
<li><cite lang="sh">Црна мачка, бели мачор</cite>, 1998</li>
<li><cite>A Bug's Life</cite>, 1998</li>
<li><cite>Toy Story</cite>, 1995</li>
<li><cite>Monsters, Inc</cite>, 2001</li>
<li><cite>Cars</cite>, 2006</li>
<li><cite>Toy Story 2</cite>, 1999</li>
<li><cite>Finding Nemo</cite>, 2003</li>
<li><cite>The Incredibles</cite>, 2004</li>
<li><cite>Ratatouille</cite>, 2007</li>
</ol>
</figure>
Run code
Cut to clipboard
a和area元素的target属性重新启用，因为在web程序里非常有用，比如和iframe一起使用。
script和style元素的type属性不在是必须项，如果脚本是符合ECMAScript的，或者style语言是CSS。
table元素的border属性值，只允许设置为"1"或者空字符串。
下面的一些属性依然允许使用，但是建议使用更好的替代方案：
script元素的language属性使用的时候必须设置为“JavaScript”（不区分大小写），并且不能和type属性冲突，用户可以忽略这个属性。
a元素的name属性，用户可以使用id代替。
img元素和其他所有元素的width和height属性不在允许设置值为百分比数字。
HTML5学习笔记简明版（10）：废弃的元素和属性
废弃的元素（Element）
这个小节里列出的元素在HTML5里将不再使用，现有文档升级到 HTML5的话可以使用一些替代方案。例如parser section 可以处理isindex 元素的功能。
下面的元素被废弃的原因是用CSS处理可以更好地替代他们：
basefont
big
center
font
strike
ttRun code
Cut to clipboard
下面的元素被废弃的原因是他们的使用破坏了可使用性和可访问性：
frame
frameset
noframesRun code
Cut to clipboard
下面的元素被废弃的原因是不经常使用他们，也会引起混乱，而且其它元素也可以很好地实现他们的功能：
acronym被废弃是因为它经常使页面错乱，可以使用abbr代替
applet被废弃是因为可以使用object代替
isindex被废弃是因为使用表单控件代替
dir被废弃是因为使用ul代替
最后，noscript元素只能在HTML里使用，而不能在XML里使用。
废弃的属性（Attribute）
HTML4里的一些属性不会再被允许在HTML5里使用了，规范里详细说明了如何处理现有的文档，并且以后新文档不能再使用这些属性，因为他们会标记成不合法的属性。
HTML5的规范里有对这些属性的代替方案，点击访问。
（支付宝）给作者钱财以资鼓励 （微信）→
暂无评论 »