HTML5規範保持了對現有HTML的最大兼容,並保留了絕大部分元素和屬性,HTML推薦使用CSS來控制HTML文檔樣式
HTML保留的基本元素有以下幾個: html
<!-- -->: 定義HTML註釋 前端
<html>:HTML5文檔的根元素 java
<head>:定義HTML5文檔的頁面頭部分 android
<title>:定義HTML5文檔的標題 程序員
<body>:定義HTML5文檔的主體部分 web
<style>:用於引入樣式定義 編程
<h1>到<h6>:定義標題一到標題六 瀏覽器
<p>:定義段落 緩存
提示:幾乎全部的HTML元素均可指定id、style和class屬性,其中id屬性用於爲HTML元素指定一個惟一標識,該標識是經過DOM訪問HTML元素的重要途徑,class和style屬性是CSS樣式相關屬性。
<br>:插入一個換行 服務器
<hr>:定義水平線
<div>:定義文檔中的節,也就是咱們說的區塊,會佔滿一行
<span>:與<div>基本類似,定義的是一個行內標籤樣式
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>基本標籤</title> </head> <body> <!-- 採用標題一到標題六來輸出文本 --> <h1>瘋狂Java講義</h1> <h2>瘋狂Android講義</h2> <h3>輕量級Java EE企業應用實戰</h3> <h4>瘋狂XML講義</h4> <h5>瘋狂Ajax講義</h5> <h6>經典Java EE企業應用實戰</h6> <!-- 輸出一條水平線 --> <hr /> <!-- 使用三個span定義三節 --> <span>TOmcat</span><span>Jetty</span><span>Resin</span> <!-- 輸出換行 --> <br /> <!-- 使用三個div定義三節 --> <div>Tomcat</div><div>Jetty</div><div>Resin</div> <!-- 使用三個p定義三個段落--> <p>Tomcat</p><p>Jetty</p><p>Resin</p> </body> </html>
<b>:定義粗體文本
<i>:定義斜體文本
<em>:定義強調文本,實際效果與斜體文本差很少
<strong>:定義粗體文本
<small>:定義小號字體文本,一般用來標註免責聲明、注意事項、法律規定和版權
<sup>: 定義上標文本
<sub>: 定義下標文本
<bdo>:定義文本顯示方向,該標籤可指定dir屬性,屬性值只能是ltr或rtl
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>格式化標籤</title> </head> <body> <span><b>加粗文本</b></span><br /> <span><i>斜體文本</i></span><br /> <span><b><i>粗斜體文本</i></b></span><br /> <span><em>被強調的文本</em></span><br /> <p><strong>加粗文本</strong></p> <small><span>小號字體文本</span></small><br /> <div>普通文本<sup>上標文本</sup></div> <span>普通文本<strong><sub>下標加粗文本</sub></strong></span><br /> <!-- 指定文本從左到右(正常狀況)排列 --> <bdo dir="ltr">從左到右排列的文本</bdo><br /> <!-- 指定文本從右向左排列 --> <bdo dir="rtl">從右向左排列的文本</bdo><br /> </body> </html>
<abbr>:用於表示一個縮寫,可指定title屬性,該屬性指定該縮寫所表明的全稱
<address>:用於表示一個地址,斜體顯示文本。
<blockquote>:用於定義一段長的引用文本,瀏覽器會使用縮進的方式顯示,該標籤可指定cite屬性,該屬性指定該引用文本所引用的網址URL
<q>:用於定義一段短的引用文本,瀏覽器會爲這段被引用的文本添加引號
<cite>:用於表示做品的標題,斜體顯示
<code>:表示一段計算機代碼
<dfn>:用於定義一個專業術語,瀏覽器會使用粗體或斜體顯示
<del>:定義文檔中被刪除的文本。
<ins>:定義文檔中插入的文本,瀏覽器一般會使用下劃線顯示
<pre>:表示該元素所包含的文本已進行了「預格式化」
<samp>:用於定義示範文本內容
<kdb>:用於定義鍵盤文本
<var>:用於表示一個變量。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>語義相關元素</title> </head> <body> <!-- 使用q表示一段短的引用文本 --> <p>瘋狂Java的精神是<q cite="http://www.fkjava.org">瘋狂源自夢想,技術成就輝煌。</q>這也是全部Java程序員的夢想</p> <div> <!-- 使用blockquote表示一段長的引用文本 --> <blockquote> 景色無故五十鉉,一炫一柱思年華。<br /> 莊生曉夢迷蝴蝶,望帝春心託杜鵑。<br /> 滄海月明珠有淚,藍田日暖玉生煙。<br /> 此情可待成追憶,只是當時已惘然。 </blockquote> 是唐朝詩人李商隱的表明做,詩中影藏着一種淡淡的憂傷,讓人沒法言說,但又沒法釋懷。 </div> <p> <cite>《芙蓉鎮》</cite>、<cite>《藍風箏》</cite>是國內導演拍攝的最有思考深度的兩部電影。 </p> <p> 下面定義了一個Java類:<br /> <code> public class Cat<br /> {<br /> private int name = "garfield";<br /> }<br /> </code> </p> <!-- pre元素包含的內容是"預格式化"文本 --> <pre> public class Cat { private int name = "garfield"; } </pre> <p> <!-- 使用abbr定義縮寫 --> 瘋狂Java教育中心的縮寫是:<abbr title="瘋狂Java教育">fkjava</abbr> <!-- 使用address定義地址 --> 瘋狂軟件地址是:<address>廣州市天河區車坡大綱路4號馮弘大廈306-3011</address> <!-- 使用dfn定義專業術語 --> <p> <dfn>HTML</dfn>是一種廣爲人知的標記語言。 </p> <p> 可經過輸入以下命令:<br /> <kbd>list -l</kbd><br /> 在Linux的Shell窗口查看當前目錄下全部文件、目錄的詳細信息。 </p> <p> 若是您在閱讀瘋狂Java體系圖書時,遇到有任何沒法理解的技術問題,<br /> 請登錄www.fkjava.org發帖提問,可按以下示例內容發帖:<br /> <!-- 使用samp定義示範文本內容 --> <samp> 我在閱讀XXX圖書的第X章、第X節時,遇到一個XXX問題,<br /> 錯誤提示信息是:XXX。 </samp> </p> <!-- 使用var定義變量 --> <var>i</var>、<var>j</var>、<var>k</var>一般用於做爲循環計數器變量。 <!-- 使用del和ins表示修訂 --> <p>Android是一個<del>開發</del><ins>開放</ins>式的手機、平板電腦操做系統</p> </p> </body> </html>
HTML5保留了定義超連接的<a.../>元素,它有以下3個重要的屬性:
href:指定超連接所關聯的另外一個資源
target:指定使用哪一種框架來裝載資源,有_self、_blank、_top、 _parent四個值
media:指定目標URL所引用的媒體類型,默認爲all,它是HTML5新 增的屬性
<ul>:定義無序列表
<ol>:定義有序列表,該元素還能夠指定如下三個屬性:
start:指定列表項的起始數字
type:指定使用哪一種類型的編號
reversed:該屬性指定是否將排序反轉
<li>:定義列表項目
<dl>:也用於定義列表,只能包含<dt>和<dd>兩個子元素
<dt>:用於定義列表,只能包含<dd>子元素
<dd>:定義普通列表項
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>列表相關標籤</title> </head> <body> <!-- 定義無序列表 --> <ul> <li>瘋狂Java講義</li> <li>輕量級Java EE 企業應用實戰</li> <li>瘋狂Android講義</li> </ul> <!-- 定義有序列表 --> <ol start="2" type="I"> <li>瘋狂Java講義</li> <li>輕量級Java EE 企業應用實戰</li> <li>瘋狂Android講義</li> </ol> <!-- 定義列表 --> <dl> <!-- 定義標題列表項 --> <dt>瘋狂Java體系</dt> <dd>瘋狂Java講義</dd> <dd>輕量級Java EE企業應用實戰</dd> <dd>瘋狂Android講義</dd> <!-- 定義標題列表項 --> <dt>做者其餘圖書</dt> <dd>Struts 2.1 權威指南</dd> <dd>基於J2EE的Ajax寶典</dd> </dl> </body> </html>
HTML5保留了<img.../>元素在頁面中定義圖像,它是一個空元素,它必須制定如下兩個屬性:
src:指定圖片文件所在的位置,能夠是相對或絕對路徑
alt:指定一段文本,做爲圖片的提示信息
<img>的兩個可選屬性:
height:圖片高度
width:圖片寬度
與<img>相關的標籤:
<map>:定義圖片映射
<area>:定義圖片映射的內部區域
<table>:用於定義表格,它能夠指定以下屬性:
cellpadding:指定單元格內容和單元格邊框之間的間距
cellspacing:指定單元格時間的間距
width:指定表格的寬度
注意:HTML5建議將表格的全部屬性都放到CSS中定義
<caption>:用於定義表格標題
<tr>:定義表格行
<td>:定義單元格,它能夠指定以下幾個屬性:
colspan:指定該單元格跨多少列
rowspan:指定單元格可橫跨的行數
height:指定該單元格的高度
width:指定該單元格的寬度
<th>:定義表格頁眉的單元格
<tbody>:定義表格的主體
<thead>:定義表格頭
<tfoot>:定義表格腳
注意:若是使用<thead.../>和<tfoot.../>標籤,建議使用以下次序使用它們: <thead.../>、<tfoot.../>、<tbody.../>,瀏覽器會自動將<tfoot.../>呈如今最下面
<col>:該元素爲表格中的一個或多個列指定屬性值
<colgroup>:該元素用於爲表格中的一個或多個列指定屬性值
HTML5再也不推薦在頁面中使用框架集,但保留了<iframe.../>元素,它有 一個屬性src,
該屬性指定一個URL,指定該iframe將裝載那個頁面
HTML5爲大部分HTML元素增長了contentEditable屬性,若是將該屬性的值設爲true,那麼瀏覽器容許開發者直接編輯該HTML元素裏的內容,而且它具備可繼承性
HTML5爲容許設置contentEditable屬性的元素提供了isContentEditable屬性,當元素可編輯則返回true,不然false
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>contentEditable屬性</title> </head> <body> <!-- 直接指定contentEditable=「true」代表該元素是可編輯的 --> <div contenteditable="true" style="width: 500px; border:1px solid black"> 瘋狂Java講義 <!-- 該元素的父元素有contentEditable=「true」,所以該表格也是能夠編輯的 --> <table style="width: 420px; border-collapse: collapse;" border="1"> <tr> <td>瘋狂Java講義</td> <td>瘋狂Android講義</td> </tr> <tr> <td>輕量級Java EE企業應用實戰</td> <td>經典Java EE企業應用實戰</td> </tr> </table> </div> <hr /> <!-- 這個表格默認是不可編輯的,雙擊以後該表格變爲 --> <table id="target" ondblclick="this.contentEditable=true" style="width: 420px; border-collapse: collapse;" border="1"> <tr> <td>Java</td> <td>Ruby</td> </tr> <tr> <td>C/C++</td> <td>Python</td> </tr> </table> </body> </html>
designMode屬性至關於一個全局的contentEditable屬性,若是把整個頁面的designMode屬性設置爲on,則該頁面上全部可支持contentEditable屬性的元素都編程可編輯狀態
document.designMode = "on";
HTML5爲全部元素提供一個hidden屬性,若是某元素的hidden設爲true, 則瀏覽器不顯示該組件,且不保留該組件所佔空間
<div id="target" hidden="true" style="height: 80px;">文字內容</div> <button onclick="var target=document.getElementById('target'); target.hidden=!target.hidden;">顯示/隱藏</button>
HTML5爲<input.../>、<textarea.../>等元素增長了spellcheck屬 性,該屬性支持 true和false兩個值,若是爲true,則瀏覽器會對用戶 的輸入進行語法檢
<!-- 指定執行拼寫檢查 --> <textarea spellcheck="true" rows="3" cols="40"></textarea>
<article>:該元素定義頁面上一篇獨立、完整的「文章」.
<article.../>能夠包含<header.../>做爲頭部
<article.../>能夠包含<footer.../>做爲尾部
<article.../>能夠包含<section.../>做爲文章的分段
<article.../>能夠包含<article.../>做爲文章的附屬文章
<section>:該元素用於對頁面上的內容進行分塊
建議使用<h1>-<h6>做爲<section.../>的標題
<section.../>能夠包含<article.../>
<section.../>也能夠包含<section.../>
注意:<article.../>和<section.../>很容易混淆,它們能夠包含不少子元素,也能夠相互嵌套。通常 使用<article.../>表達一篇獨立、完整的文章,而使用<section.../>對頁面內容進行分塊。
<nav>:該屬性用於定義頁面上的「導航條」
<aside>:該屬性用於定義頁面內容的附屬信息,推薦此屬性配合CSS渲染成側邊欄
<header>:該屬性主要爲<article.../>定義頭部信息
<hgroup>:該元素組織多個<h1>~<h6>這樣的標題元素
<footer>:該元素主要爲<article>定義腳註信息
<figure>:該元素用於表示一塊獨立的「圖片區域」,它能夠包含一個或多個由<img>元素組成的圖片,除此以外,它還能夠包含一個<figcaption>元素,用於表示該圖片區域的標題
<figcaption>:一般放在<figure>元素裏,用於表示圖片區域的標題
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML5新增元素 - article</title> </head> <body> <article> <!-- 帖子的「頭部」 --> <header> <h1>學習Android,必須先學習Java嗎?</h1> <div>做者:crazystu</div> </header> <p> 學習Android,必須先學習Java嗎? Android上的應用程序只能用Java編寫嗎?能夠用C++嗎? </p> <!-- 帖子的「回覆」部分,用section元素表示 --> <section> <article> <!-- 回覆的頭部 --> <header> <h2>仍是得學習Java</h2> <div>做者:kongyeeku</div> </header> <p> 雖然Android不必定要使用Java開發,還能夠選擇JavaScript<br /> 或NDK開發,但Java畢竟是Android主要的開發語言,<br /> 所以建議學習Android以前仍是學習Java </p> </article> <!-- 每個article表明一個回覆 --> <article> <!-- 回覆的頭部 --> <header> <h2>Java是基礎</h2> <div>做者:kuan008</div> </header> <p> Java是基礎,學好Java再去學習Android事半功倍。 </p> </article> </section> <!-- 帖子的」腳註「 --> <footer> 以上帖子和回覆只表明我的觀點,不表明瘋狂Java聯盟的觀點或立場 </footer> </article> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML5新增元素 - aside</title> </head> <body> <article> <!-- 帖子的頭部 --> <header> <h1>學習Android,必須先學習Java嗎?</h1> <div>做者:crazystu</div> </header> <p> 學習Android,必須先學習Java嗎? Android上的應用程序只能用Java編寫嗎?能夠用C++嗎? </p> <!-- 帖子的「回覆」部分,用section元素表示 --> <section> <!-- 回覆的頭部 --> <header> <h2>仍是得學習Java</h2> <div>做者:kongyeeku</div> </header> <p> 雖然Android不必定要使用Java開發,還能夠選擇JavaScript<br /> 或NDK開發,但Java畢竟是Android主要的開發語言,<br /> 所以建議學習Android以前仍是學習Java </p> </section> </article> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML5新增結構元素 - figure</title> </head> <body> <figure style="border:2px solid black; padding:5px; width:500px;"> <figcaption><b>瘋狂Java體系圖書</b></figcaption> <img src="images/java.png" alt="瘋狂Java"> <img src="images/android.png" alt="瘋狂Android"> <img src="images/ee.png" alt="輕量級Java EE"> </figure> </body> </html>
HTML5提供瞭如下兩個語義相關的元素:
<mark>:用於顯示頁面中須要重點關注的內容,瀏覽器一般會使用黃色來標註,好比搜索結果中用戶輸入的關鍵字
<time>:用於顯示被標註的內容是日期、時間或日期時間,該元素有一個datatime屬性,用於向機器提供時間
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>新增的語義相關元素 - mark和time</title> </head> <body> <article> <header> <h2>瘋狂軟件即將引入<mark>HTML5</mark>相關課程</h2> </header> <p> <mark>HTML5</mark>是下一代的HTML規範。<br /> <mark>HTML5</mark>即將把前端開發者從繁重的開發中解放出來<br /> 爲了把握技術潮流的脈搏,瘋狂軟件教育計劃在 <time datetime="2012-04-21">2012年4月</time>引入<mark>HTML5</mark>相關課程 </p> </article> </body> </html>
<details>:用於顯示一段詳細信息或某個主題的細節,一般它會跟<summary>元素結合使用,把<summary>放在<details>中,爲其定義摘要信息,當用戶點擊摘要信息時,瀏覽器會顯示出詳細內容。目前只有Chrome瀏覽器支持這兩個屬性
<details> <summary>芙蓉鎮</summary> 《芙蓉鎮》是一部極好的電影,每一箇中國人都不該該錯過。 </details>
<meter>:用於表示一個已知最大值和最小值的計數儀表,它能夠指定以下屬性:
value:指定計數儀表的當前值,默認爲0
min:指定計數儀表的最小值,默認爲0
max:指定計數儀表的最大值,默認爲1
low:指定計數儀表制定範圍的最小值,它必須大於min
high:指定計數儀表指定範圍的最大值,它必須小於max
optimum:指定計數儀表有效範圍的最佳值
<progress>:用於表示一個進度條,它能夠指定以下屬性:
max:指定進度條完成時的值
HTML5使用<head.../>元素定義文檔頭,該元素能夠包含以下子元素:
<script>:該元素用於包含JavaScript腳本
<style>:該元素用於定義內部CSS樣式
<link>:該元素用於連接外部CSS樣式資源
<title>:該元素定義文檔標題
<base>:該元素用於指定該頁面中全部連接的基準連接
<meta>:該元素用於定義HTML頁面的元數據,也就是一些name-value對,它能夠指定以下屬性
http-equiv:指定元信息的名稱
name:指定元信息的名稱,能夠隨意指定
content:指定元信息的值
<head> <title>我是標題</title> <meta name="author" content="Yeeku.H.Lee"> <meta name="websit" content="http://www.xxx.org"> <meta name="copyright" content="2001-2008 xxx.org"> <meta name="Keywords" content="Java論壇, Java技術論壇"> </head>
http-equiv屬性能夠指定以下值:
Expires:指定頁面的過時時間,一旦過時必須從服務器下載
<meta http-equiv="Expires" content="Sat Sep 27 16:12:36 CST 2008">
Progma:指定禁止瀏覽器從本地磁盤緩存中調閱頁面內容
<meta http-equiv="Progma" content="no-cache">
Refresh:指定瀏覽器多長時間後自動刷新指定頁面
<!-- 設置2秒後自動刷新本頁面 --> <meta http-equiv="Refresh" content="2" /> <!-- 設置2秒後自動刷新http://www.xxx.org --> <meta http-equiv="Refresh" content="2;URL= / >
Set-Cookie:設置Cookie,若是網頁過時,那麼Cookie也將被刪除
<meta http-equiv="Set-Cookie" content="name=value expires=Sat Sep 27 16:12:36 CST 2008, path=" />
content-Type:設置該頁面的內容類型和所用的字符集
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
HTML5新增的拖放API,可讓HTML頁面的任意元素變得能夠被拖放,經過它能夠開發出更友好的人機交互界面
在HTML5中,把須要拖動的元素的draggable屬性設置爲true,就表示它能夠被拖動了,但此時它未攜帶數據,因此用戶是看不到效果的,爲了讓拖動操做能攜帶數據,應該爲被拖動元素的ondragstart事件指定監聽器。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>可拖動的DIV</title> </head> <body> <div id="source" style="width:80px;height:80px;border:1px solid black;background-color:#bbb;" draggable="true">可拖動的Div</div> <script> var source = document.getElementById('source'); source.ondragstart = function (evt) { evt.dataTransfer.setData('text/plain', 'www.xxx.org'); } </script> </body> </html>
爲了讓document接受「放」操做,應該爲document的ondragover事件指定監聽器,在監聽器中取消document對拖動事件的默認行爲
document.ondragover = function (evt) { //取消事件的默認行爲 return false; }但Firefox和Chrome對此操做有不一樣的反應,因此須要對document的ondrop事件設置監聽器
document.ondrop = function (evt) { //取消事件的默認行爲 return false; }下表是用戶在拖放HTML元素時可能會觸發的事件
事件 | 事件源 | 描述 |
ondragstart | 被拖動的HTML元素 | 開始拖動操做時觸發該事件 |
ondrag | 被拖動的HTML元素 | 拖動過程當中會不斷的觸發該事件 |
ondragend | 被拖動的HTML元素 | 拖動結束時觸發該事件 |
ondragenter | 拖動時鼠標通過的元素 | 被拖動的元素進入本元素的範圍內時候 |
ondragover | 拖動時鼠標通過的元素 | 被拖動的元素進入本元素的範圍內拖動時會不斷觸發該事件 |
ondragleave | 拖動時鼠標通過的元素 | 被拖動的元素離開本元素時觸發該事件 |
ondrop | 拖動時鼠標通過的元素 |
其餘元素被放到了本元素中時觸發該事件 |
下面的代碼實現了一個能夠自由拖動的<div>元素
<!DOCTYPE html> <html> <head> <meat charset="utf-8"> <title></title> <style> div#source { width: 80px; height: 80px; background-color: #bbb; } </style> </head> <body> <div id="source" draggable="true">可拖動Div</div> <script> var source = document.getElementById('source'); source.ondragstart = function (evt) { evt.dataTransfer.setData('text/plain', 'www.baidu.com'); } document.ondragover = function (evt) { return false; //取消事件默認行爲 } document.ondrop = function (evt) { source.style.position = 'absolute'; source.style.left = evt.pageX + 'px'; source.style.top = evt.pageY + 'px'; return false; //取消事件默認行爲 } </script> </body> </html>