首页 > 代码库 > html5学习笔记
html5学习笔记
HTML5 的新标记
（转自http://www.vaikan.com/html5-new-old-semantics/）设计者们需要完成的任务是要给HTML5开发一个更丰富的和更有含义的语义 – 当然可以想象这种新方案将会是很灵活和很高效的，同时与所有的现代互联网标准相适应。下面就是一些将要在HTML5里新加入的标记.
- <article> 标记 定义一篇文章
- <aside> 标记 定义页面内容部分的侧边栏
- <audio> 标记 定义音频内容
- <canvas> 标记 定义图片
- <command> 标记 定义一个命令按钮
- <datalist> 标记 定义一个下拉列表
- <details> 标记 定义一个元素的详细内容
- <dialog> 标记 定义一个对话框(会话框)
- <embed> 标记 定义外部的可交互的内容或插件
- <figure> 标记 定义一组媒体内容以及它们的标题
- <footer> 标记 定义一个页面或一个区域的底部
- <header> 标记 定义一个页面或一个区域的头部
- <hgroup> 标记 定义文件中一个区块的相关信息
- <keygen> 标记 定义表单里一个生成的键值
- <mark> 标记 定义有标记的文本
- <meter> 标记 定义 measurement within a
predefined range - <nav> 标记 定义导航链接
- <output> 标记 定义一些输出类型
- <progress> 标记 定义任务的过程
- <rp> 标记是用在Ruby annotations 告诉那些不支持 Ruby 元素的浏览器如何去显示
- <rt> 标记 定义对ruby
annotations的解释 - <ruby> 标记 定义 ruby annotations.
- <section> 标记 定义一个区域
- <source> 标记 定义媒体资源
- <time> 标记 定义一个日期/时间
- <video> 标记 定义一个视频
希望所有的这些标记都能成为真正”有生命力“的和有用的标记，而不是只是今天看来是很酷的标记。
HTML5 的减负 – 旧的标记，永别了…
你是否很记得那个古老的年代，HTML3被当成一种只能在Netscape里运行的神奇的东西？是的，那就是互联网时代的黎明初现。我们当然不会忘记那段历史，但向一些优秀的却陈旧的东西说再见也是合乎情理的（特别是当它们目前不被认为那么好用，或已没有人再注意它们的时候时）。
因此，HTML5的设计者们废除了一些老的标记，因为这些标准只有那些HTML怪才才会使用，也因为这些标记已经完全失去用处，新的HTML标记里将不会再包括它们 – 我想我们应该就此感谢这些设计者们。 毕竟是这些标记实在是太老旧了，以至于可以想象，20年后我们的孩子们会认为只有莎士比亚在他的十四行诗里才会用到。不管怎样，还是让我们到互联网博物馆里再看它们一眼吧（真有这样的博物馆吗？）。
- <acronym> 标记 定义 an acronym.
- <applet> 标记 定义 an embedded applet.
- <basefont> tag specifies a default
font-color, font-size, or font-family for all the text in a document. - <big> tag is used to format the text one
size bigger, and can be in relation to your <font> or
<basefont> size, if you’ve specified either one. - <center> tag is used to center text.
- <dir> tag is used to list directory titles.
- <font> tag specifies the font face, font
size, and font color of text. - <frame> 标记 定义 one particular window
(frame) within a frameset. - <frameset> 标记 定义 a frameset. The
frameset element holds two or more frame elements. Each frame element
holds a separate document. - <s> and <strike> tags
define strikethrough text. - <tt> tag is used for “typetype” text, or
fixed-width typewriter-type font. Other than the different type style,
it has normal font characteristics - <u> tag is used to underline text.
这些标记基本上都没有什么用处了（也许你会觉得有几个标记和HTML5里的新标记有些相似）。其中一些我们在早期的旧版的浏览器里使用过，但如今已经失去其作用，而另一些标记的功能已经被CSS功能所取代了（例如设置字体和文本样式的标记）。
关于 <DIV> 标记的重要问题
使用新标记替换掉 <div> 标记是HTML5在语义方面的主要成就。这 <div> 标记是HTML4里是一个重要的（现在仍是）的标记，在HTML里被广泛使用，但是它所表达的语义太弱，在声明网页组织结构里不同的区块的任务面前它毫无用武之地。新的HTML5标记 – 例如 <article>, <aside>, <nav>, <figure>,<header>, <footer> – 会更有用和更方便，这些标记能够让你指明网页不同区域的用途，清楚的显示网站的结构。这意味着即使你是个新手或中等的程序员，仅依据HTML代码就能清楚的了解整个页面的结构 – 更值得一提的是搜索引擎将会因为能如此方便的解析页面的结构而会高兴的发狂的。
对我们有什么好处？
关于新标记和语义的价值的讨论已经很多，有些人认为这些语义以及可视化表现方式没有任何意义 – 因为它们带来的是更复杂的代码，创造了使用这些新HTML代码犯新错误的机会，HTML5新语义的价值在于提升了网站用户和这些技术之间的交互和协作的水平，这是使互联网前进的原因。
同样的道理 – 我们应该明白，就像HTML5给我们的感觉是那样酷一样，人们在其上付出了很多的努力，对未来5年互联网的发展寄予厚望。 今天，这些新标记和语义看起来的确是很棒，我们都很喜欢，但别忘了，任何东西都是在不断变化着来适应人们的需求，新的语言特征必须依赖于人们的使用，互联网社区的大量使用 – 只有这样才能使单纯的新事物变成有用的新事物。
HTML4和HTML5之间的10个主要不同
（转自http://www.vaikan.com/10-essential-differences-between-html4-and-html5/）事实上，HTML5并没有对HTML4做什么重大的修改，它们很多东西都是相似的。
可是，其中有一些很重要的区别你需要知道。下面列出的就是一些HTML4和HTML5之间主要的不同之处(并不是全部，全部列出来是不可能的)：
1. HTML5标准还在制定中
这头一个不同之处显而易见，但非常重要，我需要先从它开始。也许你已经注意到了关于HTML5很酷的言论到处都是，但是事实情况是，HTML5是一个还未完成的标准。HTML4已经有10岁了，但它仍是当前正式的标准的事实没有改变。
另一方面，HTML5仍处在早期阶段，以后的修改会不断的出现。你必须考虑到这些，因为你在网站上使用的这些新增加或修改的网页元素会每年都出现一些变化，你需要不停的更新升级你的网站，这可不是你希望的。这就是目前为止，你最好在产品里使用HTML4，只在实验里使用HTML5的原因。
2. 简化的语法
更简单的doctype声明是HTML5里众多新特征之一。现在你只需要写<!doctype html>，这就行了。HTML5的语法兼容HTML4和XHTML1，但不兼容SGML。
3. 一个替代Flash的新 <canvas> 标记
对于Web用户来说，Flash既是一个惊喜，也是一种痛苦。有很多的Web开发人员对HTML5对Flash产生的威胁很不满。但对于那些忍受着要花几年时间加载和运行的臃肿的Flash视频的人来说，用新的 <canvas> 标记生成视频的技术已经到来。
目前， <canvas> 标记并不能提供所有的Flash具有的功能，但假以时日，Flash必将从web上淘汰。我们拭目以待，因为很多人还并不认同这种观点。
4. 新的 <header> 和 <footer> 标记
HTML5的设计是要更好的描绘网站的解剖结构。这就是为什么这些<header> 和
<footer> 等新标记的出现，它们是专门为标志网站的这些部分设计的。
在开发网站时，你不在需要用<div>标记来标注网页的这些部分。
5. 新的 <section> 和 <article> 标记
跟<header> 和 <footer>标记类似，HTML5中引入的新的<section> 和 <article> 标记可以让开发人员更好的标注页面上的这些区域。
据推测，除了让代码更有组织外，它也能改善SEO效果，能让搜索引擎更容易的分析你的页面。
6. 新的 <menu> 和 <figure> 标记
新的<menu>标记可以被用作普通的菜单，也可以用在工具条和右键菜单上，虽然这些东西在页面上并不常用。
类似的，新的 <figure> 标记是一种更专业的管理页面上文字和图像的方式。当然，你可以用样式表来控制文字和图像，但使用HTML5内置的这个标记更适合。
7. 新的 <audio> 和 <video> 标记
新的<audio> 和 <video> 标记可能是HTML5中增加的最有用处的两个东西了。正如标记名称，它们是用来嵌入音频和视频文件的。
除此之外还有一些新的多媒体的标记和属性，例如<track>，它是用来提供跟踪视频的文字信息的。有了这些标记，HTML5使Web2.0特征变得越来越友好。问题在于，在HTML5还未被广泛的接受之前，Web2.0还是老的Web2.0。
8. 全新的表单设计
新的 <form> 和 <forminput> 标记对原有的表单元素进行的全新的修改，它们有很多的新属性(以及一些修改)。如果你经常的开发表单，你应该花时间更详细的研究一下。
9. 不再使用 <b> 和 <font> 标记
对我个人来说，这是一个让我不太理解的改动。我并不认为去除 <b> 和 <font>标记会带来多大的好处。我知道，官方的指导说这些标记可以通过CCS来做更好的处理，但这样一来，为了在文章一两个地方出现的这种标记，你就需要在独立的css和文本两个地方来实现这一的功能，岂不笨拙。也许我们以后会习惯这种方法。
10. 不再使用 <frame>, <center>, <big> 标记
事实上，我已经记不清曾经何时用过这些标记了，所以，我并不为去除这些标记感到悲哀。相同的原因，有更好的标记能实现它们的功能——这很好，任何作废的标记从标准中剔除都是受欢迎的。
这10个HTML5和HTML4之间的不同只是整个新的规范中的一小部分。除了这些主要的变动外，我还可以略提一下一些次要的改动，比如修改了<ol> 标记的属性，让它能够倒排序，对<u>标记也做了修改。
所有这些次要的改动数量众多。而且新的修改也在不断的增加，因此，如果你想实时跟踪最新的动向，你需要经常的查看w3.org的HTML4 和 HTML5之间的不同这个页面。如果你很心急，想在你的工作中使用这些新的标记和属性，我劝告你最好只是做实验，原因已经说的很清楚了，这些新标记和新属性在将来也许会有很大的改变，所以，除非你不断的更新你的代码，它们很可能会过期失效。
尽管如今大多数流行的浏览器的最新版都支持HTML5，但有些新的(或修改的)标记和属性它们并不支持，所以你的网页在用户的屏幕上有可能前后显示的不一致。耐心等待，等待HTML5真正可以实用时候。目前还不是时候。
html5学习笔记