如何快速理解HTML5新增元素和css

本篇內容介紹了“如何快速理解HTML5新增元素和css”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

　　一、HTML5新增布局標簽

　　HTML5是Web中核心語言HTML的規范，用戶使用任何手段進行網頁瀏覽時看到的內容原本都是HTML格式的，在瀏覽器中通過一些技術處理將其轉換成為了可識別的信息。HTML5在從前HTML4.01的基礎上進行了一定的改進，雖然技術人員在開發過程中可能不會將這些新技術投入應用，但是對于該種技術的新特性，網站開發技術人員是必須要有所了解的。

　　HTML5是HTML最新的修訂版本，2014年10月由萬維網聯盟（W3C）完成標準制定。

　　1993年HTML的草案發布，在html5版本之前，html共有4個版本。2.0版、3.2版、4.0版，再到1999年的4.01版。

　　在HTML5出現之前，我們一般采用DIV+CSS布局我們的頁面。但是這樣的布局方式不僅使我們的文檔結構不夠清晰，而且不利于搜索引擎爬蟲對我們頁面的爬取。為了解決上述缺點，HTML5新增了很多新的語義化標簽

　　Div+css布局

　　HTML5

　　<header>&hellip;</header>     頭部

　　<nav>&hellip;</nav>           導航

　　<section>&hellip;</section>定義文檔中的節。比如章節、頁眉、頁腳或文檔中的其它部分

　　<aside>&hellip;</aside>        側邊欄

　　<footer>&hellip;</footer>       頁腳

　　<article>&hellip;</article>代表一個獨立的、完整的相關內容塊，可獨立于頁面其它內容使用。例如一篇完整的論壇帖子，一篇博客文章，一個用戶評論等

　　使用HTML5的新的結構標簽，做出上面的布局，代碼如下：

　　二、視頻和音頻

　　HTML5未出來之前，在線的音頻和視頻都是借助Flash或者第三方工具實現的，現在HTML5也支持了這方面的功能。在一個支持HTML5的瀏覽器中，不需要安裝任何插件就能播放音頻和視頻。原生的支持音頻和視頻，為HTML5注入了巨大的發展潛力。

　　2.1視頻

　　Video標簽定義視頻，比如電影片段或其他視頻流。

　　2.2音頻

　　audio 標簽定義聲音，比如音樂或其他音頻流。
 

　　2.3source

　　<source> 標簽為媒介元素（比如 <video> 和 <audio>）定義媒介資源。

　　<source> 標簽允許您規定可替換的視頻/音頻文件供瀏覽器根據它對媒體類型或者編解碼器的支持進行選擇。

　　三、HTML5新增標簽（了解）

　　3.1figure

　　用于對元素進行組合。多用于圖片與圖片描述組合。

　　3.2details

　　details 用于描述文檔或文檔的某個部分的細節，類似于下拉列表，兼容性較差，chrome與Safari支持。

　　3.3mark

　　主要用來在視覺上向用戶呈現那些需要突出的文字。<mark>標簽的一個比較典型的應用就是在搜索結果中向用戶高亮顯示搜索關鍵詞。

　　3.4meter

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

　　low:最低臨界點

　　high：最高臨界點

　　Min：最小值

　　Max：最大值

　　Value：當前值

　　3.5 progress

　　運行中的進程。可以使用 <progress> 標簽來顯示 JavaScript 中耗費時間的函數的進程。

　　max：定義完成值

　　value：定義當前值

　　3.6 datalist

　　定義可選數據的列表。與 input 元素配合使用，就可以制作出輸入值的下拉列表。

　　datalist 及其選項不會被顯示出來，它僅僅是合法的輸入值列表。

　　請使用 input 元素的 list 屬性來綁定 datalist。

　　3.7canvas

　　定義圖形，比如圖表和其他圖像。這個 HTML 元素是為了客戶端矢量圖形而設計的。它自己沒有行為，但卻把一個繪圖 API 展現給客戶端 JavaScript 以使腳本能夠把想繪制的東西都繪制到一塊畫布上。

　　四、CSS介紹

　　4.1 為什么需要CSS

　　使用css的目的就是讓網頁具有美觀一致的頁面，另外一個最重要的原因是內容與格式分離，在沒有CSS之前，我們想要修改HTML元素的樣式需要為每個HTML元素單獨定義樣式屬性，當HTML內容非常多時，就會定義很多重復的樣式屬性，并且修改的時候需要逐個修改，費心費力。是時候做出改變了，所以CSS就出現了。

　　4.2 CSS概念

　　CSS（Cascading Style Sheets）層疊樣式表，又叫級聯樣式表，簡稱樣式表

　　1、用于HTML文檔中元素樣式的定義

　　實現了將內容與表現分離

　　提高代碼的可重用性和可維護性

　　2、文件后綴是。css
 

　　4.3 CSS發展史

　　1990年，Tim Berners-Lee和Robert Cailliau共同發明了Web。1994年，Web真正走出實驗室。

　　從HTML被發明開始，樣式就以各種形式存在。不同的瀏覽器結合它們各自的樣式語言為用戶提供頁面效果的控制。最初的HTML只包含很少的顯示屬性。

　　隨著HTML的成長，為了滿足頁面設計者的要求，HTML添加了很多顯示功能。但是隨著這些功能的增加，HTML變的越來越雜亂，而且HTML頁面也越來越臃腫。于是CSS便誕生了。

　　1994年哈坤&middot;利提出了CSS的最初建議。而當時伯特&middot;波斯（Bert Bos）正在設計一個名為Argo的瀏覽器，于是他們決定一起設計CSS。

　　其實當時在互聯網界已經有過一些統一樣式表語言的建議了，但CSS是第一個含有“層疊”豐意的樣式表語言。在CSS中，一個文件的樣式可以從其他的樣式表中繼承。讀者在有些地方可以使用他自己更喜歡的樣式，在其他地方則繼承或“層疊”作者的樣式。這種層疊的方式使作者和讀者都可以靈活地加入自己的設計，混合每個人的愛好。

　　哈坤于1994年在芝加哥的一次會議上第一次提出了CSS的建議，1995年的www網絡會議上CSS又一次被提出，博斯演示了Argo瀏覽器支持CSS的例子，哈肯也展示了支持CSS的Arena瀏覽器。

　　同年，W3C組織（World WideWeb Consortium）成立，CSS的創作成員全部成為了W3C的工作小組并且全力以赴負責研發CSS標準，層疊樣式表的開發終于走上正軌。有越來越多的成員參與其中，例如微軟公司的托馬斯&middot;萊爾頓（Thomas Reaxdon），他的努力最終令Internet Explorer瀏覽器支持CSS標準。哈坤、波斯和其他一些人是這個項目的主要技術負責人。1996年底，CSS初稿已經完成，同年12月，層疊樣式表的第一份正式標準（Cascading style Sheets Level 1）完成，成為w3c的推薦標準。

　　1997年初，W3C組織負責CSS的工作組開始討論第一版中沒有涉及到的問題。其討論結果組成了1998年5月出版的CSS規范第二版。

“如何快速理解HTML5新增元素和css”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！