HTML5系列:HTML5與HTML4的區別

libingql發表於2015-04-05

1. 語法的改變

1.1 DOCTYPE宣告

  DOCTYPE宣告在HTML檔案中必不可少,位於檔案第一行。

  HTML4中宣告方法:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  HTML5中宣告方法:

<!DOCTYPE html>

1.2 字元編碼

  HTML4指定方式:

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

  HTML5指定方式: 

<meta charset="utf-8" />

1.3 元素標記

  不允許寫結束標記的元素:br、embed、hr、img、input、link、meta、param。

  不允許寫結束標記的元素是指不允許使用開始標記與結束標記將元素括起來的形式,只允許使用<元素/>。

  示例:

  錯誤方式:<br></br>    正確方式:<br/>

1.4 具有boolean值的屬性

<!--只寫屬性不寫屬性值,屬性為true-->
<input type="checkbox" checked />
<!--不寫屬性,屬性為false-->
<input type="checkbox" />
<!--屬性值=屬性名,屬性為true-->
<input type="checkbox" checked="checked" />
<!--屬性值=空字串,屬性為true-->
<input type="checkbox" checked="" />

2. HTML5新增元素

2.1 HTML5新增結構元素

  在HTML5中新增的結構元素:

  section元素

  section元素表示頁面中的一個內容區塊,如章節、頁首或頁面中的其他部分,可以與h1、h2、h3、h4、h5、h6等元素結合使用,標示文件結構。

<section></section>

  article元素

  article元素表示頁面中的一塊與上下文不相關的獨立內容,如部落格中的一篇文章或報紙中的一篇文章。

<article></article>

  aside元素

  aside元素表示article元素的內容之外的、與article元素的內容相關的輔助資訊。

<aside></aside>

  header元素

  header元素表示頁面中一個內容區塊或整個頁面的標題。

<header></header>

  hgroup元素

  hgroup元素用於對整個頁面中一個內容區塊的標題進行組合。

<hgroup></hgroup>

  footer元素 

  footer元素表示整個頁面或頁面中一個內容區塊的腳註。一般會包含作者姓名、創作日期以及作者聯絡方式等。

<footer></footer>

  section、article、aside、header、hgroup、footer都對應於HTML4中的div元素。

  nav元素

  nav元素表示頁面中導航連結的部分。

  HTML5示例:

<nav></nav>

  HTML4示例:

<ul></ul>

  figure元素

  figure元素表示一段獨立的流內容,一般表示文件主題流內容的一個獨立單元。使用figcaption元素為figure元素組新增標題。

<figure>
    <figcaption></figcaption>
    <p></p>
</figure>

2.2 HTML5新增的其他元素

  video元素

  video元素定義視訊。

<video src="" controls="controls">Video元素</video>

  audio元素 

  audio元素定義音訊

<audio src="">audio元素</audio>

   embed元素

  embed元素用於插入各種多媒體,格式可以是Midi、wav、MP3等。

<embed src="" />

  mark元素

  mark元素主要用來在視覺上向使用者呈現需要突出或高亮顯示是文字。mark元素的一個比較經典的應用是在搜尋結果中向使用者高亮顯示搜尋關鍵詞,與HTML4中span使用方式相同。

<mark></mark>

  time元素

  time元素表示日期、時間或同時表示日期時間。與HTML4中span使用方式相同。

<time></time>

  canvas元素

  canvas元素表示圖形,如圖表或影象。這個元素本身沒有行為,僅提供一塊畫布,它把一個繪製API展現給JavaScript,以使JavaScript能夠進行繪製。

<canvas id="id" width="200" height="200"></canvas>

  details元素

  details元素表示使用者要求得到並且可以得到的細節資訊。可以與summary元素配合使用。summary元素提供標題或圖例。summary元素是details元素的第一個子元素。

<details>
    <summary>HTML5</summary>
    Content
</details>

  datalist元素

  datalist元素表示可選資料的列表,與input元素配合使用,可以製作出輸入值的下拉選單。

<datalist></datalist>

  datagrid元素

  datagrid元素表示可選資料的列表,可以樹形列表的形式來顯示。

<datagrid></datagrid>

  menu元素

  menu元素表示選單列表。

<menu>
    <li></li>
    <li></li>
</menu>

2.3 新增input元素的型別

  email

  email型別表示必須輸入Email的文字輸入框。

<input type="email" />

  url

  url型別表示必須輸入URL的文字輸入框。

  number

  number型別表示必須輸入數值的文字輸入框。

  range

  range型別表示必須輸入一定範圍內數字值的文字輸入框。

  Date Pickers

  date 選取日、月、年

  month 選取月、年

  week 選取周、年

  time 選取時間(小時、分鐘)

  datetime 選取時間、日、月、年(UTC時間)

  datetime-local 選取時間、日、月、年(本地時間)

3. HTML5新增屬性

3.1 新增表單屬性

   autofocus屬性

  對input(type=text)、select、textarea元素設定autofocus屬性,讓元素在頁面開啟時自動獲得焦點。

<input type="text" autofocus />

  placeholder屬性

  對input(type=text)、textarea元素設定placeholder屬性,提示使用者可以輸入的內容。

<input type="text" placeholder="請輸入" />

  required屬性

  對input(type=text)、textarea元素設定required屬性,檢查必須輸入。

<input type="text" required="required" />

相關文章