Html5是HTML的新一代標准,現在仍處於發展階段。Html5添加了許多新的語法特征,其中包括<video>, <audio>, 和<canvas>元素,同時集成了SVG內容。這些元素是為了更容易的在網頁中添加和處理多媒體和圖片內容而添加的。其它新的元素包括<section>, <article>,<header>, 和<nav>,是為了豐富文檔的數據內容。新的屬性的添加也是為了同樣的目的。同時也有一些屬性和元素被移除掉了。
詳見Jeremy Keith在 Fronteers 2010 上的主題演講The Design of Html5,中文翻譯見李松峰老師的翻譯Html5設計原理。
最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9支持某些 HTML5 特性。具體可查看http://Html5test.com/results/desktop.Html。
對於ie9以下的IE浏覽器,可以使用Html5shiv使其支持Html5標簽,將下面代碼插入到<head>標簽中即。
<!--[if lt IE 9]><script src="http://Html5shiv.googlecode.com/svn/trunk/Html5.JS"></script><![endif]-->
DOCTYPE,或者稱為 Document Type Declaration(文檔類型聲明,縮寫 DTD)。最初是XML的概念,即通過一種特定的語法,作為一種元數據,來描述XML文檔中允許出現的元素,以及各元素的組成、嵌套規則等。參考wiki。
在HTML中,DOCTYPE聲明位於文檔中的最前面的位置,處於 <html> 標簽之前。浏覽器需要在解析 Html 文檔之前就確定當前文檔的類型,以決定其需要采用的渲染模式,不同的渲染模式會影響到浏覽器對於 CSS 代碼甚至 JavaScript 腳本的解析。如果沒有DOCTYPE,浏覽器會進入一種被稱為Quirks模式(又叫混雜模式,怪異模式,Quirks mode)渲染模式,在該模式下,浏覽器的盒模型、樣式解析、布局等都與標准規定的存在差異。
沒有聲明DOCTYPE情況:
<html><head> <title>document</title></head><body><script>document.write(document.compatMode); //BackCompat</script></body></Html>
聲明DOCTYPE情況:
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>document</title></head><body><script>document.write(document.compatMode); //CSS1Compat</script></body></Html>
document.compatMode 最先出現在 IE6 中,它的值標示了浏覽器的工作模式,這是一個只讀的屬性,返回一個字符串,只可能存在兩種返回值:
BackCompat:標准兼容模式(Standards-compliant mode)未開啟CSS1Compat:標准兼容模式(又叫嚴格模式,Standards mode 或者 Strict mode)已開啟
需要注意的是:在後來出現的接近標准模式中,document.compatMode 的返回值與標准模式一致,為CSS1Compat。也就是說,不能通過 document.compatMode 來詳細區分浏覽器的工作模式,只能用來判斷浏覽器是否工作在Quirks模式下。因為“標准模式”與“接近標准模式”之間的差異並不大,所以這個方法至今仍被廣泛使用。
注意:
Html 4.01的標准中指定了3種DOCTYPE:
嚴格模式:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">過渡模式:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">框架模式:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/Html4/frameset.dtd">
在Html4的標准中,每一個DOCTYPE對應的dtd文件都是有合法的URL指定的,可以通過互聯網進行下載。浏覽器可以根據URL獲得到dtd的具體內容,並根據內容的規定來解析文檔。
XHtml 1.0 規定了三種 XML 文檔類型:Strict、Transitional 以及 Frameset。
嚴格模式:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">過渡模式:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">框架模式:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xHtml1-frameset.dtd">
HTML5具有更簡單的DOCTYPE,在Html5中,只需要寫<!DOCTYPE Html>就可以了。所有的主流浏覽器都將這種DOCTYPE視為標准模式。這樣寫的好處:
<!DOCTYPE Html>
注:DOCTYPE大小寫不敏感。
新增加的英文標簽不翻譯了,直接看英文理解更准確些。
//Sections<section> Defines a section in a document<nav> Defines a section that contains only navigation links<article> Defines self-contained content that could exist independantly of the rest of the content<aside> Defines some content set aside from the rest of page content. If it is removed, the remaining content still make sense.<hgroup> Groups a set of <h1> to <h6> elements when a heading has multiple levels<header> Defines the header of a page or section. It often contains a logo, the title of the Web site and a navigational table of content.<footer> Defines the footer for a page or section. It often contains a copyright notice, some links to legal information or addresses to give feedback.<main> Defines the main or important content in the document. There is only one <main> element in the document.//Grouping content<figure> Represents a figure illustrated a part of the document.<figcaption> Represents the legend of a figure.//Text-level semantics<data> Associates to its content a Machine-readable equivalent. (This element is only in the WHATWG version of the HTML standard, and not in the W3C version of Html5).<time> Represents a date and time value, eventually with a Machine-readable equivalent.<mark> Represents text highlighted for reference purposes, that is for its relevance in another context.<ruby> Represents content to be marked with ruby annotations, short runs of text presented alongside the text. This is often used in conjunction with East Asian language where the annotations act as a guide for pronunciation, like the Japanese furigana.<rt> Represents the text of a ruby annotation.<rp> Represents parenthesis around a ruby annotation, used to display the annotation in an alternate way by browsers not supporting the standard display for annotations.<bdi> Represents text that must be isolated from its surrounding for bidirectional text formatting. It allows to embed span of text with a different, or unknown, directionality.<wbr> Represents a line break opportunity, that is a suggested wrapping point in order to improve readability of text split on several lines.//Embedded content<embed> Represents a integration point for an external, often non_Html, application or interactive content.<video> Represents a video, and its associated audio files and captions, with the necessary interface to play it.<audio> Represents a sound, or an audio stream.<source> Allows authors to specify alternative media resources for media elements like <video> or <audio>.<track> Allows authors to specify timed text track for media elements like <video> or <audio>.<canvas> Represents a bitmap area that scripts can be used to render graphics, like graphs, game graphics, any visual images on the fly.<svg> Defines an embedded vectorial image.<math> Defines a mathematical formula.//Forms<datalist> Represents a set of predefined options for other controls.<keygen> Represents a key pair generator control.<output> Represents the result of a calculation.<progress> Represents the completion progress of a task.<meter> Represents a scalar measurement (or a fractional value), within a known range//Interactive elements<details> Represents a widget from which the user can obtain additional information or controls.<summary> Represents a summary, caption, or legend for a given <details>.<command> Represents a command that the user can invoke.<menu> Represents a list of commands.
a
strict
yes
Hyperlink
超鏈接
abbr
strict
yes
Abbreviation
定義縮寫
acronym
strict
-
Acronym
Html 5 中不支持。定義首字母縮寫。
address
strict
yes
Contact information
定義地址元素
applet
transitional
-
Java applet
Html 5 中不支持,定義 applet
area
strict
yes
Image map region
定義圖像映射中的區域
article
-
yes
Independent section
顯示一個獨立內容,如一篇完整的論壇帖子,一則網站新聞,一篇博客文章,一個用戶評論等。
aside
-
yes
Auxiliary section
定義頁面內容之外的內容,如側邊欄
audio
-
yes
Audio stream
定義聲音內容
b
strict
yes
Bold text
定義粗體文本
base
strict
yes
Document base URI
定義頁面中所有鏈接的基准 URL
basefont
transitional
-
Base font style
Html 5 中不支持,請使用 CSS 代替。
bb
-
yes
Browser button
定義文本的文本方向,使其脫離其周圍文本的方向設置。
bdo
strict
yes
Bi-directional text override
定義文本顯示的方向
bgsound
-
-
Html 5 中不支持。
big
strict
-
Html 5 中不支持,定義大號文本。
blink
-
-
Html 5 中不支持。
blockquote
strict
yes
Long quotation
定義長的引用。
body
strict
yes
Main content
定義 body 元素。
br
strict
yes
Line break
換行符。
button
strict
yes
Push button control
定義按鈕。
canvas
-
yes
Bitmap canvas
定義圖形,比如圖表和其他圖像
caption
strict
yes
Table caption
定義表格標題
center
transitional
-
Html 5 中不支持,定義居中的文本
cite
strict
yes
Citation
定義引用
code
strict
yes
Code fragment
定義計算機代碼文本
col
strict
yes
Table column
定義表格列的屬性
colgroup
strict
yes
Table columngroup
定義表格列的分組
command
-
yes
Command that a user can invoke
定義命令按鈕
datagrid
-
yes
Interactive tree, list or tabulardata
定義下拉列表
datalist
-
yes
Predefined control values
dd
strict
yes
Description description
定義定義的描述。
del
strict
yes
Deletion
定義刪除文本
details
-
yes
Additional information
定義元素的細節
dfn
strict
yes
Defining instance of a term
定義定義項目
dialog
-
yes
Conversation
dir
transitional
-
Html 5 中不支持,定義目錄列表
div
strict
yes
Generic division
dl
strict
yes
Description list
定義定義列表
dt
strict
yes
Description term
定義定義的項目
em
strict
yes
Stress emphasis
定義強調文本
embed
-
yes
Embedded application
定義外部交互內容或插件
fIEldset
strict
yes
Form controlgroup
定義 fIEldset
figure
-
yes
A figure with a caption.
定義媒介內容的分組,以及它們的標題
font
transitional
-
Font style
Html 5 中不支持
footer
-
yes
Section footer
定義 section 或 page 的頁腳
form
strict
yes
Form
定義表單。
frame
frameset
-
Html 5 中不支持。定義子窗口(框架)
frameset
frameset
-
Html 5 中不支持,定義框架的集。
h1
strict
yes
Heading level 1
一級標題
h2
strict
yes
Heading level 2
二級標題
h3
strict
yes
Heading level 3
三級標題
h4
strict
yes
Heading level 4
四級標題
h5
strict
yes
Heading level 5
五級標題
h6
strict
yes
Heading level 6
head
strict
yes
Document head
六級標題
header
-
yes
Section header
定義 section 或 page 的頁眉。
hr
strict
yes
Separator
定義水平線。
Html
strict
yes
Document root
定義 Html 文檔
i
strict
yes
Italic text
定義斜體文本
iframe
transitional
yes
Inline frame
定義行內的子窗口(框架)
img
strict
yes
Image
定義圖像
input
strict
yes
Form control
定義輸入域
ins
strict
yes
Insertion
定義插入文本
isindex
transitional
-
Html 5 中不支持,定義單行的輸入域
kbd
strict
yes
User input
定義鍵盤文本
label
strict
yes
Form control label
定義表單控件的標注
legend
strict
yes
Explanatory title or caption
定義 fIEldset 中的標題
li
strict
yes
List item
定義列表的項目。
link
strict
yes
Link to resources
定義資源引用
listing
-
-
Preformatted text
Html 5 中不支持
map
strict
yes
ClIEnt-side image map
定義圖像映射
mark
-
yes
Marked or highlighted text
定義有記號的文本
marquee
-
-
Html 5 中不支持
menu
transitional
yes
Command menu
定義菜單列表
meta
strict
yes
Metadata
定義元信息
meter
-
yes
Scalar measurement
定義預定義范圍內的度量
nav
-
yes
Navigation
定義導航鏈接
nobr
-
-
Html 5 中不支持
noembed
-
-
Html 5 中不支持
noframes
frameset
-
Html 5 中不支持。
noscript
strict
yes
Alternative content for no script support
定義 noscript 部分
object
strict
yes
Generic embedded resource
定義嵌入對象
ol
strict
yes
Ordered list
定義有序列表
optgroup
strict
yes
Option group
定義選項組
option
strict
yes
Selection choice
定義下拉列表中的選項
output
-
yes
Output control
定義輸出的一些類型
p
strict
yes
Paragraph
定義段落
param
strict
yes
Plugin parameter
為對象定義參數
plaintext
-
-
Preformatted text
Html 5 中不支持
pre
strict
yes
Preformatted text
定義預格式化文本
progress
-
yes
Progress of a task
定義任何類型的任務的進度
q
strict
yes
Inline quotation
定義短的引用
rp
-
yes
Ruby parenthesis
定義若浏覽器不支持 ruby 元素顯示的內容
rt
-
yes
Ruby text
定義 ruby 注釋的解釋
ruby
-
yes
Ruby annotation
定義 ruby 注釋
s
transitional
-
Html 5 中不支持,定義加刪除線的文本
samp
strict
yes
Sample output
定義樣本計算機代碼
script
strict
yes
Linked or embedded script
定義腳本
section
-
yes
Document section
定義 section
select
strict
yes
Selection control
定義可選列表
small
strict
yes
Small print
將旁注 (side comments) 呈現為小型文。
source
-
yes
Media resource
定義媒介源
spacer
-
-
Html 5 中不支持
span
strict
yes
Generic inline container
strike
transitional
-
Html 5 中不支持,定義加刪除線的文本
strong
strict
yes
Strong importance
定義強調文本。
style
strict
yes
Embedded stylesheet
定義樣式定義
sub
strict
yes
Subscript
定義下標文本
sup
strict
yes
Superscript
定義上標文本
table
strict
yes
Table
定義表格
tbody
strict
yes
Table body
定義表格的主體
td
strict
yes
Table cell
定義表格單元
textarea
strict
yes
Multi-line text control
定義 textarea
tfoot
strict
yes
Table footer
定義表格的腳注
th
strict
yes
Table header cell
定義表頭單元格
thead
strict
yes
Table head
定義表頭
time
-
yes
Date and/or time
定義日期/時間
title
strict
yes
Document title
定義文檔的標題
tr
strict
yes
Table row
定義表格行
u
transitional
-
Html 5 中不支持。定義下劃線文本
ul
strict
yes
Unordered list
定義無序列表
var
strict
yes
Variable
定義變量。
video
-
yes
Video or movIE
定義視頻
wbr
-
-
Html 5 中不支持
xmp
-
-
Preformatted text
Html 5 中不支持。定義預格式文本
Html5引入了新API,新的API的意義:
Html5新增API: