HTML5系列：HTML5与HTML4的区别
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的文本輸入框。
<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" />總結
以上是生活随笔為你收集整理的HTML5系列：HTML5与HTML4的区别的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： AWS EC2 增加多个弹性 IP
- 下一篇： 判断访问浏览器版本