HTML5 原理
伯斯塔尔法则：发送时要保守；接收时要开放。
1. 省掉不必要的复杂性。
<!Doctype html>
Doctype的内容是写给验证器看的，而不是浏览器。
<meta charset=”utf-8”>
<link rel=”stylesheet” href=”…” />
<script src=”…”></script>
2. 支持已有的内容
元素可以不关闭；属性值可以不加引号；元素可以不小写。
3. 解决现实的问题
允许一个链接包含多个块级元素
4. 求真务实
新增加了有语义的元素如header ,section ,footer等。
在html5中,只要建立一个新的内容块,section,article
,aside,nav还是别的元素，都可以在其中使用h1.现在可以把页面内容区想象成一个独立的，能够从页面中拿出来的部分。
5. 平稳退化
使用type属性增强表单。现有浏览器无法理解新增type值时，会将type的值解释为text.Video元素。
6. 最终用户优先
一旦遇到冲突，最终用户优先，其次是作者，其次是实现者，其次标准制定者，最后才是理论上的完满。
Html5不一定要求页面包含html,head,body标签。
给html5添加CSS
html5新增元素默认都是display:inline;
在IE浏览器里对html5添加样式。
页面中得包含body元素。然后使用document.createElement()创建所需的html5元素。只需创建一次，尽管该元素出现了多次。
Ie中不使用js对html5元素添加样式
1. header
标签不是必须要有的。包含的是一些介绍性内容或者全站导航。如果仅仅是标题，那么只需要将标题包含在<hgroup>而不再需要将hgroup包含在header中了。
2. header
可以包含一个段落的标题如(h1-h6)或者hrgroup,或者是一个段落的上目录，搜索表单，或者其他logo等相关信息。
3. header也可包含nav标签。但nav标签不一定要放在header标签中，具体情况根据页面的布局而考虑。
nav
1. <nav>是用来标识导航。（可以是一篇文章前面的目录）但不能是一堆友情链接等，或者是一个页面的搜索结果因为这是页面的主要内容。
2. 同<header>s,<footer>s一样，一个页面可以有多个<nav>
3. <nav>不是用来替代<ol>和<ul>的，它可包含<ol>和<ul>
4. <nav>可以包含一堆有序的链接，也可包含一堆无序的链接。
5. <nav>可以包含标题标签(h1-h6)
footer
1. 定义section或者document的页脚，包含了通常的隐私信息、条款和条件以及可访问性信息
2. 通常它会创作者的姓名，文档的创作日期，联系作息，版权等
3. 尽量避免”fat footer”，可以将一些额外的链接放置到<aside>中
4. 一个元素可以有多个footer(这么做的原因是：我们应该对相同的内容使用相同的元素，而不管它出现在何处。)倒如：
<body>
<footer><a href=”/”>Back to index...</a></footer>
<h1>Lorem ipsum</h1>
<p>Lorem ipsum</p>
<footer><a href=”/”>Back to index...</a></footer>
</body>
article
1. 定义页面中一个文档的组成部分。包括博客，教程，一个新的故事，或者一个视频的脚本，漫画。
2. 标题元素(h1-h6)应该包含于<article>中。
aside
可以用于摘录引用或边栏这样的排版效果，可以用于广告、一组导航元素，以及认为应该与页面的主内容区分开来的其他内容
time
1. 定义日期时间；
2. pubdate 属性，是一个逻辑属性。用来表示这个特定的<time>是一篇<article>或整个<body>内容的发布日期
a blog entry on a site that accepts user-submitted comments could represent the comments as article elements nested within the article element
for the blog entry
<article>和<section>的区别
article是一个独立的，单独的离散内容片段。（博客帖子上的评论是位于一个父<article>内的<article>）
“Block-level” links
在html5中一个链接可以包含一整个<article>。在firefox里会有不一样的解析。
section不是“文档，页面，应用程序或者站点中的一个自包含部分，并由此专用于独立地分类或复用 ”。它是将页面节分为不同主题区域的一种方法，或者是氢文章划分为节的一种方法。
我们可以让section 位于article中，可以让article位于article中，也可以让article位于section中。
（.eg. 想想一份报纸。报纸分成版块。有体育版块、房地产版块、家政服务版块，等等。每一个版块都包含文章，而这些文章又被划分成小节）
WAI-ARIA(web Accessibility Initiative’s Accessible Rich Internet Applications suite) 无障碍富互联网应用程序
它是一套独立的规范，帮助应用程序和网页变得更具有可访问性。
ARIA的目标是，通过引入浏览器和辅助性技术能够识别一系统 的新所属。
理论上来讲，可以给旧的html，添加aira属性。
如果在html4的页面上添加了aria属性，页面将不能通过验证。（因为html4比aria出现得要早。）
尽可能使用正确的标签，只有在标签的语义无法正确表示的时候才使用aria属性。（比如<nav>就不需要添加role=”navigation”）
arai定义了几种角色，告诉辅助性技术一个文档的重要部分和结构。（application、article、banner、complementary、contentinfo、document、form、heading、main、navigation、search.）
aside
由与aside元素周围的内容无关的内容所组成的一个页面的一节，也可认为该内容与周围的内容是分开独立的。这样的节往往在印刷排版中用边栏表示。该元素可以用于摘录引用
或者边栏这样的排版效果，用于广告、一组导航元素（但是不能是全站的导航），以及认为应该与页面的主要内容区分开来的其他内容。
aside有一个隐式的aria属性note，但我们也可以给它为role=”complementary”或者role=”search”(如果它包含的是一个搜索表单
details
该元素还没有被实现。
它提供了一个展开/收缩区域。模拟的details https://gist.github.com/370590
它采取如下形式：
它的后代元素summary可以聚焦的，并且充当一个控件，当鼠标或者键盘激活它，将扩展或收缩该元素的剩余内容。当鼠标经过或者激活键盘的时候，将收缩或展开剩余的内容。当没有找到summary元素的时候，浏览器将提供自己默认的文本或者图标以表示该文本是可收缩扩展的。
可以使用逻辑属性open来使页面在加载的时候文本处于展开状态。
该元素并没有严格地限制于纯文本标记，即它可以是一个登录表单、一段说明性的视频、以图形为源数据的一个表格，或者提供给使用辅助性技术的用户（有学习障碍，或者像我一样不识数）的一个表格式的结构说明。
figure
<figure>元素包含一幅图片或者一个视频或者一段代码，或者一段支持性引用而其标题则放到<figcaption>元素中
mark
mark出来的文本默认是黄色的背景黑色字体。
当在文档的主要文字中使用的时候，它表示文档中需要强调的部分，因为这部分很可能与用户的当前活动相关。
ruby
定义中文注音或字符
与rt一起使用。
<rt>定义的是需要提供的信息如注音
FF不支持，
ol
在html4中不可用start 属性，html5中支持。
start=”5”表示的是有序列表的数字从5开始。
reversed逻辑属性 有序列表的数字倒序。
dl
html5扩展了它的语义。包含一个或者多个名值对的一个相关的列表。（名值对，可以是术语和定义，元数据主题和值，等其他的。）
cite
html4中，可以用来标记演讲者的名字，在html5不被允许。
address
用于当前的<article>或文档的作者的详细联系方式，不能用该标签来描述邮政地址，除非这些信息是联系信息的组成部分。这些信息如e-mail地址、邮政地址或者任何其他形式，可以标记为微格式或者微数据。
在一个文档中可以有多个地址。每个article中一个地址，并且每个博客评论可以有其他评论者的<address>
em
em标记对一条句子的含义的细微变化处的强调
if the question is “Did you say you live in Paris?” the answer might be
marked up as
<p>No, my <em>name</em> is Paris. I live in
<em>Troy</em>.</p>
如果你有相对层级的重要性，可以嵌套em元素以使得内容得到额外强调。
i
i
表示处于一种交替语音或者语气的一段文本，或者与常规文本有偏差，例如分类名称、术语、其他语言语言的一个成语、一种思想、一艘船的名称，或者通常排版显示为斜体的某些其他文字 。
Strong 和b
代表的是重要的内容，它与em不同，没有要改变句子的意思。
<b>只是加粗文本，没有强调的意思。可以用于文档摘要中的关键字、评阅中的产品名称、或者排版显示为精体的一些其他文本段。
small
该元素已经完全重新定义了，从仅仅是一个通用的表现性元素，变成了使得文本显示得较小，实际上表示“附属细则”，它通常用来免责、警告、提出法限制或版权。附属细则有时候也用于表明权限，用于满足许可性需求。
如果一整个页面都是法律方面的，就不能使用small，在这种情况下,法律文本是主要内容，没有必要使用一个元素来区分法律内容。它只适用于较短的文本。
新增属性
contenteditable
逻辑属性，拥有该属性的元素它的内容是可编辑的。
progress
用来表示一个“进度条”，表示任务的完成情况，如下载文件任务。
<meter>表示一个已知范围内的度量单位，或者一个百分比值，例如，磁盘的使用、查询结果的匹配度，或者先挂一个特定假造人的投票人数的比例。
表单
增加了两个http请求方法update和delete.
表单字段不再要求放在form当中，可以是在页面的任意位置，可以通过新增的form属性指向字段所属表单的ID值，即可关联起来。
如：
<form id=foo>
<input tye=”text”>
</form>
<textarea form=foo></textare>
不识别新类型表单字段的浏览器，将默认为type=”text” type=”email”
如果用户输入的数据不是正确的邮件格式将不被允许提交，但他不检测是不是真的存在某个邮件地址。multiple属性，表示允许value值可以是一系列以逗号分隔的邮件地址列表。但不允许是用户手工输入的地址。
type=”url”
要求在文本框中输入格式正确的url地址，opeara中会自动在地址前面加http://
” type=”time” type=”datetime” type=”month” type=”week”
type=”date” opeara浏览器会弹出一个datapicker.
type=”time” 允许输入一个24小时制格式的时间。如果时大于24或者分大于59，会给出错误信息。
type=”datetime” 日期时间，不允许改变时区。
type=”month” 输入的月份可本地化。
type=”week” 第几个星期
type=”number” 输入一个数字。它有max ,min,step属性。
type=”range” 显示一个可拖动的滑块条，并可通过设定max/min/step值限定拖动范围，拖动时会反馈给value一个值。
type=”search”
type=”search”和type=”input”这两者之间的区别仅在于外表样式。
表示输入的将是一个搜索关键字，通过results=n可显示一个搜索小图标（chrome）
type=”tel”
表示输入一个电话号码，但实际上没有特殊的验证，与text类型没什么区别。
type=”color”
允许用户通过一个颜色选择器输入颜色将值反映给value.
新增的表单属性
autofocus
默认聚集属性，可在页面加载时使一个表单元素获得焦点，类似于js的focus()。
placeholder
表单元素没有焦点的显示提示信息，表单元素获得焦点的时候不显示提示信息。
对于较长的提示或其他特性文本，title属性更为合适。
list
需要配合<datalist>一起使用。list的值就是需要关联的那个datalist的id.
required
基于<textarea>和<input>可输入的input元素，如果required为真，将不允许提交含有空的表单字段值的表单，建议同时加上aria-required属性
multiple
允许有多个值
pattern
正则验证属性。在opera中需要指定name值。否则无效。
autocomplete
此属性是为表单提供自动完成功能，如果该属性为打开状态可很好地自动完成。一般来说，此属性必须启动浏览器的自动完成功能。
min,max,step
限制值的输入范围，以及值的输入渐进程序，比如可在number设定输入最大值最小值，或者在range中设定拖动阶梯。
<output>
该元素用来显示部分计算结果或者javascript的输出。表单元素 。
目前只有opera支持。
Using WAI-RAIA for transitional accessibility
在html5没有被普及之前，我们可以使用wai-raia的属性来使用sliders.只不过，会附着时间的问题，会产生一信重复的信息。
<input id=tap name="tap" type="range" min=1 max=10 value="0"
role="slider" aria-valuemin=1 aria-valuemax=11 aria-valuenow=0
οnchange="this.setAttribute('aria-valuenow',this.value)" />
aria-valuenow的属性需要js的setAttribute属性来更新。
video audio
<video>的出现，让用户观看视频将不再需要flash插件。
可以应用CSS样式，可以在鼠标悬停的时候应用CSS来调整大小。
可以通过js来重新显示和调整到<canvas>中去。
<video src=”” />
src
用来指写视频的地址。
poster
用来指定一张图片，在当前视频数据无效时显示。视频数据无效可能是正在加载或者地址错误。
<audio>不支持该属性
autoplay
告诉浏览器自动播放视频，但是一般对于移动设备或者屏幕阅读器的用户来说没有必要这么做，这样很占用带宽。
<video src=”” autoplay></video>
在html5中逻辑属性的值不是true 、false。要么直接写属性的名字，要么将它的值等于属性的名字，不写表示为false.
controls
用于向浏览器指明页面制作者没有使用脚本生成播放控制器，需要浏览器启用本身的播放控制栏。
播放控制栏包括播放/暂停控件，播放进度控制，音量控制等等。
height width
不适用于<audio>.
loop
是否循环播放。
preload
是否预加载。它有三个值 。none：不进行预加载。使用此属性值
，可能是页面制作者认为用户不期望此视频，或者减少htttp请求。metadata：部分预加载。使用此属性值，代表页面制作者认为用户不期望些视频，但为用户提供一些元数据（包括尺寸，第一帧，曲目列表，持续时间等等）。auto：全部预加载。
<source>
<video controls>
<source src=”” type=”video/ogg” ; codecs=”theora,vorbis”/>
<source src=”” type=”video/mp4”; codecs=”avc.42E01E,MP4A.40.2” />
<p>Your browser doesn’t support video.</p>
Please download the video in
<a href=leverage-a- synergy.ogv>Ogg</a> or
<a href=leverage-a-synergy.mp4>mp4</a> format.</p>
</video>
第一行告诉浏览器插入一个video并且使用默认的控制条。
第二行告诉浏览器提供的是ogg类型的video，使用何种编码。
第三行提供一个h.264的视频。
第四行，是一个向后兼容的处理方法，供不识别video元素，给出了两种格式的下载地址。
video元素里可以包含其他的标签。
html5 video for everyone
1.首先要增加 http://static.etianen.com/html5media/html5media/html5media.min.js
2.
<video
class="video" poster="demo/poster.jpg" width="352" height="264"
controls="" preload="">
<source src="demo/video.mp4">
<source src="demo/video.ogv">
</video>
media属性 浏览器根据设备屏幕调节视频的大小。
<video controls>
<source src=hi-res.ogv ... media=”(min-device-width:800px)”>
<source src=lo-res.ogv>
</video>
这里还是需要使用type属性和设置codecs参数。
本文来自 .Net 论坛 - .Net 开发者中文技术论坛 http://www.dotnetbbs.com ，原文地址：http://www.dotnetbbs.com/read.php?tid=321
8975
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
