更多課程 選擇中心

Web培訓
美國上市教育機構

400-111-8989

Web培訓

學習web前端要了解的HTML5知識有哪些?

  • 發布:Web前端培訓
  • 來源:Web開發教程
  • 時間:2020-03-23 14:45

今天小編要跟大家分享的文章是關于學習web前端要了解的HTML5知識有哪些?隨著智能手機、平板電腦等移動終端設備越來越普及,用戶在移動端花的時間也越來越長。H5開始火熱起來,以文字、圖片、動畫、聲音等相結合的自媒體出現,給用戶帶來了全新體驗,技術本身帶來的新奇感讓人們心生向往。正在學習web前端知識的小伙伴們下面我們就來聊一聊H5入門的一些知識吧!

學習web前端要了解的HTML5知識有哪些?

一、什么是H5?

H5即HTML5,是指“HTML”的第5個版本,而“HTML”,則是指描述網頁的標準語言。因此,HTML5,是第5個版本的“描述網頁的標準語言”。

二、H5特性

H5 是 W3C 與 WHATWG 合作的結果,WHATWG 指 Web Hypertext Application Technology Working Group。WHATWG 致力于 web 表單和應用程序,而 W3C 專注于 XHTML 2.0。在 2006 年,雙方決定進行合作,來創建一個新版本的 HTML。

三、H5 中的一些有趣的新特性:

· 用于繪畫的 canvas 元素

· 用于媒介回放的 video 和 audio 元素

· 對本地離線存儲的更好的支持

· 新的特殊內容元素,比如 article、footer、header、nav、section

· 新的表單控件,比如 calendar、date、time、email、url、search

四、H5的改進:

· 新元素

· 新屬性

· 完全支持 CSS3

· Video 和 Audio

· 2D/3D 制圖

· 本地存儲

· 本地 SQL 數據

· Web 應用

五、H5語義元素

<article> 定義頁面獨立的內容區域。

<aside> 定義頁面的側邊欄內容。

<bdi> 允許您設置一段文本,使其脫離其父元素的文本方向設置。

<command> 定義命令按鈕,比如單選按鈕、復選框或按鈕

<details> 用于描述文檔或文檔某個部分的細節

<dialog> 定義對話框,比如提示框

<summary> 標簽包含 details 元素的標題

<figure> 規定獨立的流內容(圖像、圖表、照片、代碼等等)。

<figcaption> 定義

<figure> 元素的標題

<footer> 定義 section 或 document 的頁腳。

<header> 定義了文檔的頭部區域

<mark> 定義帶有記號的文本。

<meter> 定義度量衡。僅用于已知最大和最小值的度量。

<nav> 定義導航鏈接的部分。

<progress> 定義任何類型的任務的進度。

<ruby> 定義 ruby 注釋(中文注音或字符)。

<rt> 定義字符(中文注音或字符)的解釋或發音。

<rp> 在 ruby 注釋中使用,定義不支持 ruby 元素的瀏覽器所顯示的內容。<section> 定義文檔中的節(section、區段)。

<time> 定義日期或時間。

<wbr> 規定在文本中的何處適合添加換行符。

六、H5瀏覽器支持

最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 將支持某些 HTML5 特性。

IE9 以下版本瀏覽器兼容HTML5的方法

<!--[if lt IE 9]> <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script><![endif]-->

載入后,初始化新標簽的CSS:

/*html5*/article,aside,dialog,footer,header,section,nav,figure,menu{display:block}

七、 H5代碼規范

1. HTML5 元素名可以使用大寫和小寫字母。

但推薦你使用小寫字母:

· 混合了大小寫的風格是非常糟糕的。

· 開發人員通常使用小寫 (類似 XHTML)。

· 小寫風格看起來更加清爽。

· 小寫字母容易編寫。

2. 在 HTML5 中, 你不一定要關閉所有元素 (例如 <p> 元素),但建議你每個元素都要添加關閉標簽。

3. HTML5 屬性值可以不用引號。

屬性值我們推薦使用引號:

· 如果屬性值含有空格需要使用引號。

· 混合風格不推薦的,建議統一風格。

· 屬性值使用引號易于閱讀。

4. 圖片通常使用 alt 屬性。在圖片不能顯示時,它能替代圖片顯示。

5. 等號前后可以使用空格。

6. 使用 HTML 編輯器,左右滾動代碼是不方便的。

每行代碼盡量少于 80 個字符。

7. 不要無緣無故添加空行。

為每個邏輯功能塊添加空行,這樣更易于閱讀。

縮進使用兩個空格,不建議使用 TAB。

比較短的代碼間不要使用不必要的空行和縮進。

8. 樣式表使用簡潔的語法格式:

· 將左花括號與選擇器放在同一行。

· 左花括號與選擇器間添加一個空格。

· 使用兩個空格來縮進。

· 冒號與屬性值之間添加一個空格。

· 逗號和符號之后使用一個空格。

· 每個屬性與值結尾都要使用分號。

· 只有屬性值包含空格時才使用引號。

· 右花括號放在新的一行。

· 每行最多 80 個字符。

以上就是小編今天為大家分享的關于學習web前端要了解的HTML5知識有哪些的文章,希望本篇文章能夠對正在從事web前端工作或者學習的小伙伴們有所幫助。想要了解更多web前端知識記得關注達內web培訓官網。最后祝愿小伙伴們工作順利!

【免責聲明:本文圖片及文字信息均由小編轉載自網絡,旨在分享提供閱讀,版權歸原作者所有,如有侵權請聯系我們進行刪除。】

預約申請免費試聽課

填寫下面表單即可預約申請免費試聽!怕錢不夠?可就業掙錢后再付學費! 怕學不會?助教全程陪讀,隨時解惑!擔心就業?一地學習,可全國推薦就業!

上一篇:學習Web前端要看哪些書籍?
下一篇:前端實戰項目直播| 1小時如何打造出一款游戲類APP?今晚免費在線分享~

學習web前端要了解的HTML5知識有哪些?

學習Web前端要看哪些書籍?

Web前端初學者要知道的Web學習路線

一個小時用前端技術做個抖音APP!今晚達內Web前端直播間大咖免費教你做項目~

選擇城市和中心
黑龍江省

吉林省

河北省

貴州省

云南省

廣西省

海南省

开心激情五月天