DIV CSS 佈局教程網

html5概覽
編輯:HTML5詳解     

一、簡介

Html5是HTML的新一代標准,現在仍處於發展階段。Html5添加了許多新的語法特征,其中包括<video>, <audio>, 和<canvas>元素,同時集成了SVG內容。這些元素是為了更容易的在網頁中添加和處理多媒體和圖片內容而添加的。其它新的元素包括<section>, <article>,<header>, 和<nav>,是為了豐富文檔的數據內容。新的屬性的添加也是為了同樣的目的。同時也有一些屬性和元素被移除掉了。

1.1 Html5設計原理

  • 避免不必要的復雜性
  • 支持已有的內容
  • 解決現實的問題
  • 平穩退化
  • 最終用戶優先

詳見Jeremy Keith在 Fronteers 2010 上的主題演講The Design of Html5,中文翻譯見李松峰老師的翻譯Html5設計原理。

1.2 浏覽器支持性況:

最新版本的 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

2.1 DOCTYPE 簡介

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模式下。因為“標准模式”與“接近標准模式”之間的差異並不大,所以這個方法至今仍被廣泛使用。

注意:

  • 對於IE6-9,如果DOCTYPE前存在注釋,會進入Quirks模式。
  • 對於IE6,如果DOCTYPE前存在一個XML聲明,會進入Quirks模式。

2.2 Html4 的DOCTYPE

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的具體內容,並根據內容的規定來解析文檔。

2.3 XHtml DOCTYPE

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">

2.4 Html5 DOCTYPE

HTML5具有更簡單的DOCTYPE,在Html5中,只需要寫<!DOCTYPE Html>就可以了。所有的主流浏覽器都將這種DOCTYPE視為標准模式。這樣寫的好處:

  1. 你可以輕松的寫下這個DOCTYPE,而不用擔心會寫錯;
  2. 它是向後兼容的。
<!DOCTYPE Html>

注:DOCTYPE大小寫不敏感。

三、標簽

3.1 新增的Html5 標簽

新增加的英文標簽不翻譯了,直接看英文理解更准確些。

//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.

3.2 HTML 4.01的和Html5標簽比較

Element HTML 4.01/XHtml 1.0 Html5 Short Description 中文描述 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 中不支持。定義預格式文本

四、API

Html5引入了新API,新的API的意義:

  • 增強了Html原生功能
  • 豐富動畫效果,增強web表現力
  • 強大的後台運算和通信支持

Html5新增API:

  • 離線 & 存儲(OFFLINE & STORAGE)
    • Offline resources: 離線資源:應用程序緩存
    • Online and offline events:在線和離線事件,可以讓應用程序和擴展檢測是否存在可用的網絡連接,以及在連接建立和斷開時能感知到。
    • WEB Storage(又名 DOM Storage):sessionStorage 和 localStorage。
    • IndexedDB:是一個為了能夠在浏覽器中存儲大量結構化數據,並且能夠在這些數據上使用索引進行高性能檢索的 web 標准。
    • Using files from web applications
  • 設備訪問(DEVICE Access)
    • Using the Camera API:允許使用和操作計算機的攝像頭,並從中存取照片。
    • Touch events:對用戶按下觸控屏的事件做出反應的處理程序。
    • Geolocation:讓浏覽器使用地理位置服務定位用戶的位置,用戶可共享地理位置,並在Web應用的協助下享用位置感知服務。
    • Detecting device orIEntation:檢測設備方向,讓用戶在運行浏覽器的設備變更方向時能夠得到信息。
    • Pointer Lock API
  • 連通性(CONNECTIVITY)
    • Web Sockets:允許在頁面和服務器之間建立持久連接並通過這種方法來交換非 Html 數據。
    • Server-sent events:允許服務器向客戶端推送事件,而不是僅在響應客戶端請求時服務器才能發送數據的傳統范式。
    • WebRTC:這項技術,其中的 RTC 代表的是即時通信,允許連接到其他人,直接在浏覽器中控制視頻會議,而不需要一個插件或是外部的應用程序。
  • 多媒體(MULTIMEDIA)
    • Audio and Video: Html5 音頻與視頻:Html5裡新增的元素,它們為開發者提供了一套通用的、集成的、腳本式的處理音頻與視頻的API,而無需安裝任何插件。
    • Camera API:允許使用,操作計算機攝像頭,並從中存儲圖像。
    • Track 和 WebVTT: 元素支持字幕和章節。WebVTT 一個文本軌道格式。
  • 3D, 圖像 & 效果(3D, GRAPHICS & EFFECTS)
    • Canvas:有關動態產出與渲染圖形、圖表、圖像和動畫的API。
    • SVG: 一個基於 XML 的可以直接嵌入到 Html 中的矢量圖像格式。
    • WebGL:WebGL 通過引入了一套非常地符合 OpenGL ES 2.0 並且可以用在 Html5 <canvas> 元素中的 API 給 web 帶來了 3D 圖像功能。
  • 性能 & 集成(PERFORMANCE & INTEGRATION)
    • Web Workers:把JavaScript 計算委托給後台線程,通過允許這些活動以防止使交互型事件變得緩慢。
    • XMLHttpRequest Level 2
    • History API:允許對浏覽器歷史記錄進行操作。這對於那些交互地加載新信息的頁面尤其有用。
    • conentEditable 屬性:Html5 已經把 contentEditable 屬性標准化了。
    • Drag and drop:Html5 的拖放 API 能夠支持在網站內部和網站之間拖放項目。
    • Fullscreen API:為一個網頁或者應用程序控制使用整個屏幕,而不顯示浏覽器界面。

擴展閱讀

  • Doctype
    • dev.w3.org/Html5/markup/syntax.Html#doctype-syntax
    • www.w3help.org/zh-cn/kb/001#common_dtd
    • w3help.org/zh-cn/casestudIEs/002
    • hsivonen.iki.fi/doctype/
    • otakustay.com/learning-Html5-doctype/
  • Html5
    • Html5 Reference
    • Html5 differences from Html4
    • Html5 - MDN
    • Html5設計原理
    • dev.w3.org/Html5/
    • www.w3.org/html/ig/zh/wiki/Html5
    • www.w3help.org/zh-cn/kb/001#common_dtd
    • zh.wikipedia.org/zh-cn/Html5
    • Html5 logo
    • developer.mozilla.org/en-US/docs/HTML/Html5/Html5_element_list
    • Html5doctor.com/element-index/
    • modernizr
    • [Html5shiv]:(github.com/aFarkas/Html5shiv)
  • demo
    • Html 5 Demos and Examples
    • Html5ROCKS
    • www.apple.com/Html5/
    • developer.mozilla.org/en-US/demos/tag/tech:Html5/
  • Html5 無障礙
    • Html5 Accessibility
    • Html5 無障礙
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved