IT兄弟連 HTML5教程 了解HTML5的主流應用1

• 2019 年 10 月 5 日
• 筆記

版權聲明：本文為部落客原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接和本聲明。

本文鏈接：https://blog.csdn.net/ITXDL123/article/details/98682273

在很多人眼裡，HTML5與互聯網營銷密切相關，但其實從開發者的角度而言，它是一種網頁標準，定義了瀏覽器語言的編寫規範。伴隨HTML5標準塵埃落定，瀏覽器對HTML5特性的逐步支援，再加上中國對HTML5大力的推廣與應用，又出現了各種各樣的HTML5平台，現在已經是一個富含多元化的市場機會，它強大的Web應用開發能力才讓人們不得不轉換固有的互聯網思維，尋找新的網頁解決方案。開始由技術應用轉向整個行業的良性生態化，而且還存在巨大的上升空間。現在HTML５會從廣告行業逐漸往遊戲行業、廣播電視行業和媒體行業轉型，不遠的未來還能把觸角伸得更遠。本節將對HTML5進行全面的分析，讓讀者了解HTML5是什麼？能做什麼？學什麼？HTML5和其它技術的關係?以及HTML5的行業發展等。希望讀者可以讀完本章，掌握了宏觀印象會對後面的學習很有幫助。

了解HTML5的主流應用

HTML5是WEB開發世界的一次重大改變，它代表的是未來WEB開發趨勢。介紹使用HTML5和它的優勢文章太多了。它看起來很神秘，很多感覺它像噴氣背包或者飛行汽車，就像被「神化」了，在Web世界只要跟「炫酷」沾上邊的都說是HTML5開發的，先不管這樣的說法對不對，我們先來了解目前一些主流HTML5的應用，看看HTML5的能力。

1 表單的強大

表單在Web頁面中是最常用的了，在HTML4中的表單功能單一，例如一個表單只能將數據提交到一個伺服器位置，當然使用JavaScript也可以實現提交到多個位置，不過程式碼就很羅嗦了。而且表單驗證什麼的都要在JavaScript裡面寫，當然用前端框架驗證可能也會很簡單，但卻避免不了瀏覽器載入JavaScript程式碼緩慢等問題。所以HTML4的表單實際使用時非常依賴JavaScript，用起來不是很方便。而HTML5告訴我們可以不用那麼依賴JavaScript了，種種問題HTML5提供的新功能都可以解決了。另外，HTML5還專為移動平台訂製了一系列表單元素，也只需要使用HTML5中新增加的特定標籤屬性，就可以完成對不同樣式鍵盤的調用，簡捷方便。如圖1所示：

圖1 HTML5表單示例

2 響應式頁面布局

網站是由網頁組成，網頁則是用來呈現內容和用戶互動，而內容的擺放可不能太隨意，在配色、字體以及布局排版方面要精心設計，這才能夠很好的製作出很漂亮的網站，讓用戶和搜索引擎喜歡。頁面的布局也經歷了幾次發展，從最早的表格排版，到使用DIV+CSS標準化網頁布局，再到現在使用HTML5來實現，每一次的變革都是由於新技術的使用有著明顯的優勢所決定的。除了有利於搜索引擎抓取內容外，HTML5做頁面布局的優勢主要有易用性、程式碼清晰和功能強大三個方面。

一、易用性

使用HTML5創建網站更加簡單，主要是因為新的HTML標籤像<header>、<footer>、<nav>、<section>和<aside>等等，這樣的語義標籤可以使閱讀者更加容易去訪問內容。而上一代布局技術DIV+CSS的使用中，即使你定義了class或者id，你的閱讀者也沒有辦法去了解給出的一個div究竟是什麼。使用新的語義標籤，你可以更好的了解HTML文檔，並且創建一個更好的使用體驗。如圖2所示：

圖2 HTML5中的語義標籤布局展示

二、程式碼清晰

如果你對於簡潔，優雅，容易閱讀的程式碼有所偏好的話，HTML5絕對是一個為你量身定做的。HTML5允許你寫出簡單清晰富於描述的程式碼，符合語義學的程式碼允許你分開樣式和內容。還有就是DOCTYPE沒有更多內容了，不需要拷貝粘貼一堆無法理解的程式碼，也沒有多餘的head標籤。除了簡單，最大的好消息在於它能在每一個瀏覽器中正常工作即使是名聲狼藉的IE6。

三、功能強大

HTML5支援響應式頁面布局，不管您的用戶使用何種終端訪問您的網站，都能夠自動識別適應終端設備的解析度以及寬度，讓您的網站在眾多設備中無縫瀏覽(包括顯示器、隨身設備、電視機，等等)。對於智慧手機和平板電腦的逐漸普及，普通的網站對於這些持有移動設備的用戶來說，訪問無疑是困難的，他們必須在設備上放大和縮小整個網頁，以便能夠閱讀適合字體大小，稍不小心可能會點錯進入別的區域，這種狀況在響應式網頁設計中會有所改善。響應式布局是就是一個網站能夠兼容多個終端，而不是為每個終端做一個特定的版本。這個概念是為解決移動互聯網瀏覽而誕生的，響應式布局可以為不同終端的用戶提供更加舒適的介面和更好的用戶體驗，而且隨著目前大螢幕移動設備的普及，可以說響應式的布局是大勢所趨，現在越來越多的網站開始採用響應式的布局方案。如圖3所示：

圖3 Web響應式布局