HTML5概述

HTML5基本特征

向前兼容

H5向前兼容H4,H4可以直接在H5環境下運行,瀏覽器若不支持H5的新特新則會替換成相應的H4。
如表單輸入類型若不支持新的type則轉換為text類型。

跨平臺運行

PC,手機,平板等支持H5的都可以無障礙運行H5運用,對H5游戲開發特別有利

簡單易用

提供更加簡單易用的特性。如屬性可以大寫可以小寫,屬性值可以用單引號也可以用雙引號(推薦使用小寫屬性,屬性值用雙引號括起)

用戶友好性

H5的新特性提升了用戶的友好性和體驗程度。
多媒體標簽,canvas標簽等元素,地理位置服務,本地數據存儲,文件上傳和離線應用等。

H5新功能

簡化的DOC TYPE聲明

H4對DOC TYPE的聲明:

  • 嚴格版:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3c.org/TR/html4/strict.dtd">
  • 過渡板:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/html4/loose.dtd">
  • 框架版:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3c.org/TR/html4/frameset.dtd">

H5中的定義:<!DOCTYPE html>

簡化的編碼字符集

H4中:<meta http="Content-Type" content="text/html;charset=utf-8">
H5中:<meta charseet="utf-8">

簡化腳本和樣式的引入

H5中引入:

<link rel="stylesheet" href="path/to/target.css" />
<script src="target.js"></script>
```

## 新增的全局屬性
contenteditable:用于將HTML元素設置為可編輯狀態,讓用戶可以實時編輯HTML元素。值有 true 和 false 。true為可編輯

spellcheck:對用戶的輸入進行拼寫檢查,語法檢查不通過事瀏覽器使用下劃線來提示。值有 true 和 false。

draggable:元素是否可拖動。值為 true 和 false

dropzone:規定被拖動元素被拖動時發生的動作。值為 copy,link,move:copy創建一個拖動元素的副本,move拖動元素移動到一個新的位置,link 創建拖動元素的一個鏈接

hidden:隱藏HTML元素。值為 hidden

## 語義化標簽之文檔元素
* header。定義文檔結構的頁眉,通常和Hn hgroup標簽組合表示一個內容快的標題。或者包含一個搜索框,導航欄,logo等欄目
* footer。定義文檔頁腳,表示文檔作者信息、相關鏈接、版權資料等。
* hgroup。定義文檔中的標題組。內容快由主標題和多個副標題組成
* nav。 定義文檔導航區域,用于文檔的主導航,對于側邊欄目錄搜索樣式或者上一篇下一篇等不適用。
* article。定義文檔中自成一體的內容。
* section。 定義文檔結構中的章節內容。與article可相互嵌套。
* aside。 通常作為article標簽中主要內容的附屬信息部分,比如文章里面的參考文獻

## 語義化標簽之文本元素
* b。 定義加粗文本。
* i。定義斜體文本。
* u。定義下劃線文本。
* code。定義代碼段。
* q。定義引用文本。
* cite。定義引用文本,不過通常是書記或雜志的標題。
* time。時間顯示文本,datetime屬性表示具體的時間戳,pubdate=“pubdate”表示是否為特定文檔的發布時間。
* blockquote。 標記長引用文本。
* pre。定義預定義格式化文本。保留空格和換行
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,412評論 6 532
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,514評論 3 416
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,373評論 0 374
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,975評論 1 312
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,743評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,199評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,262評論 3 441
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,414評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,951評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,780評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,983評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,527評論 5 359
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,218評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,649評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,889評論 1 286
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,673評論 3 391
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,967評論 2 374

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,776評論 1 92
  • 學習要點: 1.HTML5 的歷史2.HTML5 的功能3.HTML5 的特點4.課程學習問題 主講教師:李炎恢 ...
    愛上小媳婦閱讀 563評論 0 6
  • HTML5 是繼 HTML4.01 和 XHTML1.0 之后的超文本標記語言的最新版本。它是由一群 自由思想者組...
    阿甘筆記閱讀 709評論 0 3
  • 一、HTML5 發展史為了支持新的 Web 應用,同時克服現有缺點,HTML 迫切需要添加新功能,制定新規范。20...
    linda102閱讀 580評論 0 0
  • 前段時間聲名大噪的一部喜劇作品,看下來覺得還不錯,笑點很足,不過其他的也沒有什么很大的驚喜。 主題不算出彩,明明坐...
    蘊_Caroline閱讀 264評論 0 0