顯示具有 html5 標籤的文章。 顯示所有文章
顯示具有 html5 標籤的文章。 顯示所有文章

2010年6月15日

HTML 5 参考手册

HTML 5 参考手册

HTML5草案的前身名为Web Applications 1.0,是在2004年由WHATWG提出,再于2007年获W3C接纳,并成立了新的HTML工作团队。
在2008年1月22日,第一份正式草案发布。WHATWG表示该规范是目前仍在进行的工作,仍须多年的努力。目前Firefox、Google Chrome、Opera及Safari(版本 4 以上)已支持HTML5。

HTML 5提供了一些新的元素和属性。其中有些是技术上类似<div>和<span>标签,但有一定含义,例如<nav>(网站导航块)和<footer>。这种标签将有利于搜索引擎的索引整理、小屏幕装置和视障人士使用。
同时为其他浏览要素提供了新的功能,通过一个标准接口,如<audio>和<video>标记。
一些过时的HTML 4标记将取消,其中包括纯粹用作显示效果的标记,如<font>和<center>,因为它们已经被CSS取代。


按字母顺序排列

  • HTML4: 指示在 HTML 4.01 中是否定义了该元素
  • HTML5: 指示在 HTML 5 中是否定义了该元素
标签 描述 HTML4 HTML5
<!--...--> 定义注释。 4 5
<!DOCTYPE>  定义文档类型。 4 5
<a> 定义超链接。 4 5
<abbr> 定义缩写。 4 5
<acronym> 定义首字母缩写。HTML5废弃。 4
<address> 定义地址元素。 4 5
<applet> 定义java applet。HTML5废弃。 4
<area> 定义图像映射中的区域。 4 5
<article> 定义 article。 5
<aside> 定义页面内容之外的内容。 5
<audio> 定义声音内容。 5
<b> 定义粗体文本。 4 5
<base> 定义页面中所有链接的基准 URL。 4 5
<basefont> 请使用 CSS 代替。HTML5废弃。 4
<bdo> 定义文本显示的方向。 4 5
<big> 定义大号文本。HTML5废弃。 4
<blockquote> 定义长的引用。 4 5
<body> 定义 body 元素。 4 5
<br> 插入换行符。 4 5
<button> 定义按钮。 4 5
<canvas> 定义图形。 5
<caption> 定义表格标题。 4 5
<center> 定义居中的文本。HTML5废弃。 4
<cite> 定义引用。 4 5
<code> 定义计算机代码文本。 4 5
<col> 定义表格列的属性。 4 5
<colgroup> 定义表格列的分组。 4 5
<command> 定义命令按钮。 5
<datagrid> 定义树列表 (tree-list) 中的数据。 5
<datalist> 定义下拉列表。 5
<datatemplate> 定义数据模板。 5
<dd> 定义定义的描述。 4 5
<del> 定义删除文本。 4 5
<details> 定义元素的细节。 5
<dialog> 定义对话(会话)。 5
<dir> 定义目录列表。HTML5废弃。 4
<div> 定义文档中的一个部分。 4 5
<dfn> 定义定义项目。 4 5
<dl> 定义定义列表。 4 5
<dt> 定义定义的项目。 4 5
<em> 定义强调文本。 4 5
<embed> 定义外部交互内容或插件。 5
<event-source> 为服务器发送的事件定义目标。 5
<fieldset> 定义 fieldset。 4 5
<figure> 定义媒介内容的分组,以及它们的标题。 5
<font> 定义文本的字体、尺寸和颜色。HTML5不提倡。 4
<footer> 定义 section 或 page 的页脚。 5
<form> 定义表单。 4 5
<frame> 定义子窗口(框架)。HTML5废弃。 4
<frameset> 定义框架的集。HTML5废弃。 4
<h1> to
<h6>
定义标题 1 到标题 6。 4 5
<head> 定义关于文档的信息。 4 5
<header> 定义 section 或 page 的页眉。 5
<hr> 定义水平线。 4 5
<html> 定义 html 文档。 4 5
<i> 定义斜体文本。 4 5
<iframe> 定义行内的子窗口(框架)。 4 5
<img> 定义图像。 4 5
<input> 定义输入域。 4 5
<ins> 定义插入文本。 4 5
<isindex> 定义单行的输入域。HTML5废弃。 4
<kbd> 定义键盘文本。 4 5
<label> 定义表单控件的标注。 4 5
<legend> 定义 fieldset 中的标题。 4 5
<li> 定义列表的项目。 4 5
<link> 定义资源引用。 4 5
<m> 定义有记号的文本。 5
<map> 定义图像映射。 4 5
<menu> 定义菜单列表。 4 5
<meta> 定义元信息。 4 5
<meter> 定义预定义范围内的度量。 5
<nav> 定义导航链接。 5
<nest> 定义数据模板中的嵌套点。 5
<noframes> 定义 noframe 部分。HTML5废弃。 4
<noscript> 定义 noscript 部分。HTML5废弃。 4
<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
<rule> 为升级模板定义规则。 5
<s> 定义加删除线的文本。HTML5废弃。 4
<samp> 定义样本计算机代码。 4 5
<script> 定义脚本。 4 5
<section> 定义 section。 5
<select> 定义可选列表。 4 5
<small> 定义小号文本。HTML5废弃。 4 5
<source> 定义媒介源。 5
<span> 定义文档中的 section。 4 5
<strike> 定义加删除线的文本。HTML5废弃。 4
<strong> 定义强调文本。 4 5
<style> 定义样式定义。 4 5
<sub> 定义上标文本。 4 5
<sup> 定义下标文本。 4 5
<table> 定义表格。 4 5
<tbody> 定义表格的主体。 4 5
<td> 定义表格单元。 4 5
<textarea> 定义 textarea。 4 5
<tfoot> 定义表格的脚注。 4 5
<th> 定义表头。 4 5
<thead> 定义表头。 4 5
<time> 定义日期/时间。 5
<title> 定义文档的标题。 4 5
<tr> 定义表格行。 4 5
<tt> 定义打字机文本。HTML5废弃。 4
<u> 定义下划线文本。HTML5废弃。 4
<ul> 定义无序列表。 4 5
<var> 定义变量。 4 5
<video> 定义视频。 5
<xmp> 定义预格式文本。HTML5废弃。 4 5



給網頁設計師的30個HTML5學習資源

新聞來源:NTT.cc

早在幾個星期前,Adobe就發佈了Dreamweaver CS5 HTML5 Pack的預覽版下載。眾所周知,HTML5在網際網路領域掀起了一場大論戰,並讓Adobe的日子很難熬。HTML5致 力於為前端開發提供全面的標記語 言。

以下30多個資源可幫你開始學習HTML5。



Blowing up HTML5 video and mapping it into 3D space(將HTML5視訊吹散並組成3D效果)最近我研究了HTML 5中的Canvas 和Video 標籤,並發現了一些很酷的特性。其中之一就是Canvas.drawImage() api。此為詳細介紹。

Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3(用HTML5 和CSS3 打造向下相容的網頁)HTML5更加語義化,使用HTML5 我們不必在網頁上佈滿沒有意義的div。它引入了有意義的tag,比如 navigations 和 footers 使語法更有意義也更接近自然語言。

Coding A HTML 5 Layout From Scratch(HTML 5 佈局)
這 篇文章將教你

  • 用原有技術將元素放置在特定位置
  • 最新的技術潮流
  • Microformats與HTML5協同使用
  • 介紹HTML5與CSS3的新特性
Coding a CSS3 and HTML5 One Page Website Template(製作CSS3和 HTML5 一頁式網站樣板)這篇文章介紹了如何利用CSS3 和jQuery的新特性製作HTML5 網頁模版。 HTML5 仍在完善當中,你也可以選擇性的下載XHTML版。

Comprehensive video tutorial on HTML5(全面的HTML5視訊指南)這 是一個叫Brad Neuberg的工程師製作的HTML5教學視訊。

Create modern Web sites using HTML5 and CSS3(用HTML5與CSS3打造時尚網站)這篇文章介紹了許多HTML5的功能和語法及API,還有CSS3的新的選擇器,效果和特性。最 後, 還將教你如何利用這些新特性開發一個網頁。當你讀完這篇文章,你就能用HTML5和CSS3開發一個自己的網站啦。

Designing a blog with html5(用html5設計部落格)許多HTML5 特性要結合JavaScript API一起使用,以增加網頁的互動性。但仍有一些新元素可讓傳統的Web1.0頁面更加語義化。為了學習這些,我們來看怎樣建立一個部落格。

Designing for the Future with HTML5 and CSS3 : Tutorials and Best Practices(為未來設計:HTML 5 和 CSS3 指南與最佳案例)這篇文章將介紹用 HTML5和CSS3搭建的幾個最佳網站。

Design and Code a Cool iPhone App Website in HTML5(用HTML5設計和實現一個超酷 iPhone App 網站)

Have a Field Day with HTML5 Forms(建立HTML 5表格)這篇文站將教 你 如果用HTML 5 和進階CSS技術與最新的CSS3技術建立一個漂亮的表格。

How To Create A Nice Blog Design Touching The Future(不用photoshop,完成網頁設計)

How to Make All Browsers Render HTML5 Mark-up Correctly – Even IE6(怎樣讓所有瀏覽器都渲染HTML5標記——即使是IE6)這篇文章將教你如何用JavaScript和CSS,使 HTML5頁面向下相容,即使是IE6也不例外。

How to Make an HTML5 iPhone App(製作HTML5 iPhone 應用)這 是 一篇針對iPhone的指導,但是許多技術也可用在相容HTML5的手機瀏覽器上。

HTML 5 and CSS 3: The Techniques You』ll Soon Be Using(HTML 5 和CSS 3:你將用到的技術)這篇文章使用HTML 5和CSS 3 搭建部落格頁面。如果你已經熟悉html 和CSS,將很容易跟上。

HTML5 for Beginners. Use it now, its easy!(HTML 5初學指南)給 所有具有基礎HTML知識的初學者的HTML 5 入門指南

HTML5 Presentation這篇文章介紹了HTML5 的發展歷史和它的基本特性

HTML5 Tutorial – Getting Started(HTML 5 入門指導)

How to Build Web Pages With HTML 5(怎樣建立HTML 5網頁)

Simple Website Layout Tutorial Using HTML 5 and CSS 3(HTML5和CSS3佈局指南)HTML5最令人期待的新標籤包括
HTML5最令人期待的新標籤包括header, footer, aside, nav,audio,同時它還包括畫圖,線下存儲資料,拖放等API。頁面佈局將會更易理解。這裡將介紹一個最簡單的HTML 5 佈局頁面,用CSS3 設定樣式。最終結果如下

Structural Tags in HTML5(HTML 5 結構標籤)HTML5 有許多標籤幫助網頁結構化,這能省去以網頁中許多div

HTML5 Boilerplates(HTML 5樣板)此文介紹了一些你能拿來就用的HTML5 樣板檔案

HTML 5 canvas – the basics(HTML 5 基礎——Canvas)對HTML 5 Canvas使用方法的全面指導

HTML 5 Tutorials(HTML 5 指南)

Implementing HTML5 Drag and Drop: New Premium Tutorial(HTML 5 拖放)HTML5 的一個新特性就是拖放,不過IE早在5.5時代就支援拖放了,而HTML 5 的拖放也是基於IE的。本例將教你如果用拖放實現一個簡單的購物車界面。

Preview of HTML 5這是一篇比較老的文章,介紹了HTML5的特性和優點。

The HTML 5 Canvas For Flash Developers : Drawing(HTML 5 Canvas 的畫圖功能)

The Power of HTML 5 and CSS 3介紹了HTML 5 與CSS3能創造的各種效果。

View Source Tutorial: Sticky Notes With HTML5 and CSS3(HTML5 和CSS3 打造便利貼效果)

webOS HTML5 Database Storage Tutorial(webOS HTML5 資料存儲指南)HTML5 的本機存儲功能將使資料存儲十分簡便。

Yes, You Can Use HTML 5 Today!本文介紹了一些現已被支援的HTML 5 特性,對初學者十分有用。