HTML學習筆記（四）_HTML5常用元素與屬性

1.HTML5新增的通用屬性：            (1).contentEditable屬性：
       HTML5爲大部分HTML元素都增加了contentEditable屬性，如果該屬性設爲true，那麼瀏覽器將會允許開發者直接編輯該HTML元素裏的內容。此處的HTML元素並不是值那些原本就允許用戶輸入的表單元素，如文本框、文本域之類的，而是可以把<table../>,<div../>等元素變成可編輯狀態。
      contentEditable具有“可繼承”的特點：如果一個HTML元素的父元素是“可編輯”的，那麼它默認也是可編輯的，除非顯示的指定值爲false。
  (2).designMode屬性：
       designMode屬性相當於一個全局的contentEditable屬性，如果把整個頁面的designMode屬性設置爲on時，該頁面上所有可支持contentEditable屬性的元素都變成可編輯狀態，designMode默認是false。
       在js代碼中只能修改整個HTML頁面的designMode屬性（body）。
  (3).hidden屬性：
       支持true、false兩個值，一旦包某個HTML元素的hidden設爲true，就意味着通知瀏覽器不現實該組件，瀏覽器不會保留該組件所佔用的空間。此實行可以代替css樣式單中的display屬性，設置hidden爲true相當於在css中設置display：none；
  (4).spellcheck屬性：
      HTML爲input、textarea等元素增加了此屬性，支持true、false兩種屬性值，如果設置true，瀏覽器將會負責對用戶的輸入的文本內容執行輸入檢查，如果檢查不通過，瀏覽器會對平措的單詞進行提示。

2.HTML5新增的文檔結構元素：
  (1).<article>:用於代表頁面上獨立的、完整的一篇“文章”，該元素表示的內容可以是一個帖子、一篇blog文章、一篇短文、一條完整的回覆等。總之，只要是一篇獨立的文檔內容，就應該使用此元素，簡單規則如下：
       可使用header標籤定義文章“標題”部分，可使用“footer”定義文章“腳註”部分。可使用多個section把文章內容分成幾個“段落”，可嵌套多個article作爲它的附屬“文章”，比如一篇blog文章後面可以有多篇回覆文章。
  (2).<section>:用來對頁面內容分塊，建議此元素包含一個標題，可以包含多個article元素，表示該“分塊”內容包含多篇分塊文章，此元素也可以嵌套section元素，用來包含多個“子分塊”。
    （div元素只是一個通用的容器，而section元素則是一個負責“分塊”的HTML組件）。
    （article和section這兩個元素很容易混淆，因爲他們都可以包含很多子元素，而且可以互相嵌套，但article和section的側重點不同：article側重於表達一段獨立的、完整的文章，而section則側重於對頁面內容進行分塊，換句話說，如果想表達一段獨立的、完整的文章，則用section；如果想把一塊內容分爲幾個部分，則應該使用section元素）。
  (3).<nav>:該元素專門用於定義頁面上的“導航條”，包括頁面上方的“主導航條”，側邊的“邊框導航”、頁面內部的“頁面導航”、頁面下方的“底部導航”等，html5推薦將這些導航鏈接分別放在相應的nav元素中進行管理。
  (4).<aside>:專門用於定義當前頁面或當前文章的附屬信息，通常來說，推薦aside元素使用css渲染成側邊欄。
       將此元素放在body內部，表明爲整個頁面添加“邊欄”；放在其他父元素內部，表明爲父元素添加“邊欄”。
  (5).<header>:定義文章“頭部”信息，該元素內部可包含多個標題元素，也可包含hgroup元素，還可以包含普通的p、span等元素。
  (6).<hgroup>:用於組織多個標題元素，當header不要包含多個標題元素時，可以考慮使用hgroup把他們組成一組。
  (7).<footer>:定義“腳註”部分，包括版權信息、作者授權信息等。
  (8).<figure>:表示一塊獨立的“圖片區域”，該元素內部可包含一個或多個img元素所代表的圖片。初次之外，還可包含一個figcaption（最多隻能包含一個），用於定義該“圖9片區域”的標題。
  (9).<figcaption>:通常放在figure內部，用於定義“圖片區域”的標題。

3.HTML5新增的語義相關元素：
  (1).<mark>:用於顯示頁面中需要重點“關注”的內容，瀏覽器通常會用黃色顯示mark標識的內容。（此元素非常適合用於“高亮顯示”全文檢索時的關鍵字）
  (2).<time>:用來顯示被標註的內容分是日期，時間或者日期時間

4. HTML5新增的兩個特殊功能的元素：
   (1).<meter>:用於表示一個已知最大值和最小值的技術儀表，比如電池電量、速度表等。
   (2).<processs>:用於表示一個進度條，可指定如下屬性：
         max：指定進度條完成時的值。
         value：指定進度條當前完成的進度值。


5.HTML5頭部和元信息：
  使用<head../>元素可以定義HTML文檔頭，該元素可以包含如下子元素。
  (1).<script>：用於包含js腳本。
  (2).<style>:定義內部css樣式。
  (3).<link>:鏈接外部css樣式資源。
  (4).<title>：定義文檔標題。
  (5).<base>:用於指定該頁面中所有鏈接的記住鏈接。
       此元素必須是空元素，可指定一下兩個屬性：
          href：指定所有鏈接的基準鏈接。
          target：指定超鏈接默認在哪個窗口打開鏈接。該屬性值只能是_blank,_parent_self和_top。
  (6).<meta>:用於指定該頁面中的元數據。
       定義元數據也就是指定一些name-value對，還可以指定一下屬性：
       http-equiv：指定元信息的名稱，該屬性指定的名稱具有特殊意義，它可以向瀏覽器傳回一些有用的信息，幫助瀏覽器正確地處理網頁內容。支持的值主要有：
           Expiress：指定網頁的過期時間。一旦網頁過期，必須重新從服務器上下載。
           Pragma：指定禁止I瀏覽器從本地磁盤緩存中調閱頁面內容，瀏覽器一旦離開該網頁就無法脫機訪問該頁面。content=“no-cache”；
           Refresh：指定瀏覽器多長時間後自動刷新指定頁面，例如：
                <meta http-equiv="Refresh" content=“5" />  //設置五秒後自動刷新本頁面
                <meta http-equiv="Refresh" content="2;URL=http://www.baidu.com" />  //設置兩秒後自動刷新百度頁面
           Set-Cookie：設置Cookie，如果網頁過期，那麼客戶端上的cookie也將被刪除。
           Content-Type：設置該頁面的內容類型和所用的字符集。
       name：指定元信息的名稱，該屬性值可以隨意指定，比如作者，版權，關鍵字等。（爲網頁指定有效的關鍵字有利於搜索引擎收錄本站點）
       content：指定元信息的值。