本篇內(nèi)容介紹了“如何快速理解HTML5新增元素和css”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！
目前創(chuàng)新互聯(lián)已為千余家的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬主機(jī)、網(wǎng)站運(yùn)營(yíng)、企業(yè)網(wǎng)站設(shè)計(jì)、深州網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。
一、HTML5新增布局標(biāo)簽
HTML5是Web中核心語(yǔ)言HTML的規(guī)范，用戶使用任何手段進(jìn)行網(wǎng)頁(yè)瀏覽時(shí)看到的內(nèi)容原本都是HTML格式的，在瀏覽器中通過一些技術(shù)處理將其轉(zhuǎn)換成為了可識(shí)別的信息。HTML5在從前HTML4.01的基礎(chǔ)上進(jìn)行了一定的改進(jìn)，雖然技術(shù)人員在開發(fā)過程中可能不會(huì)將這些新技術(shù)投入應(yīng)用，但是對(duì)于該種技術(shù)的新特性，網(wǎng)站開發(fā)技術(shù)人員是必須要有所了解的。
HTML5是HTML最新的修訂版本，2014年10月由萬維網(wǎng)聯(lián)盟（W3C）完成標(biāo)準(zhǔn)制定。
1993年HTML的草案發(fā)布，在html5版本之前，html共有4個(gè)版本。2.0版、3.2版、4.0版，再到1999年的4.01版。
在HTML5出現(xiàn)之前，我們一般采用DIV+CSS布局我們的頁(yè)面。但是這樣的布局方式不僅使我們的文檔結(jié)構(gòu)不夠清晰，而且不利于搜索引擎爬蟲對(duì)我們頁(yè)面的爬取。為了解決上述缺點(diǎn)，HTML5新增了很多新的語(yǔ)義化標(biāo)簽
Div+css布局
HTML5
導(dǎo)航
側(cè)邊欄
頁(yè)腳
使用HTML5的新的結(jié)構(gòu)標(biāo)簽，做出上面的布局，代碼如下：
二、視頻和音頻
HTML5未出來之前，在線的音頻和視頻都是借助Flash或者第三方工具實(shí)現(xiàn)的，現(xiàn)在HTML5也支持了這方面的功能。在一個(gè)支持HTML5的瀏覽器中，不需要安裝任何插件就能播放音頻和視頻。原生的支持音頻和視頻，為HTML5注入了巨大的發(fā)展?jié)摿Α?/p>
2.1視頻
Video標(biāo)簽定義視頻，比如電影片段或其他視頻流。
2.2音頻
audio 標(biāo)簽定義聲音，比如音樂或其他音頻流。
2.3source
三、HTML5新增標(biāo)簽（了解）
3.1figure
用于對(duì)元素進(jìn)行組合。多用于圖片與圖片描述組合。
3.2details
details 用于描述文檔或文檔的某個(gè)部分的細(xì)節(jié)，類似于下拉列表，兼容性較差，chrome與Safari支持。
3.3mark
主要用來在視覺上向用戶呈現(xiàn)那些需要突出的文字。標(biāo)簽的一個(gè)比較典型的應(yīng)用就是在搜索結(jié)果中向用戶高亮顯示搜索關(guān)鍵詞。
3.4meter
定義度量衡。僅用于已知最大和最小值的度量
low:最低臨界點(diǎn)
high：最高臨界點(diǎn)
Min：最小值
Max：最大值
Value：當(dāng)前值
3.5 progress
運(yùn)行中的進(jìn)程。可以使用
max：定義完成值
value：定義當(dāng)前值
3.6 datalist
定義可選數(shù)據(jù)的列表。與 input 元素配合使用，就可以制作出輸入值的下拉列表。
datalist 及其選項(xiàng)不會(huì)被顯示出來，它僅僅是合法的輸入值列表。
請(qǐng)使用 input 元素的 list 屬性來綁定 datalist。
3.7canvas
定義圖形，比如圖表和其他圖像。這個(gè) HTML 元素是為了客戶端矢量圖形而設(shè)計(jì)的。它自己沒有行為，但卻把一個(gè)繪圖 API 展現(xiàn)給客戶端 JavaScript 以使腳本能夠把想繪制的東西都繪制到一塊畫布上。
四、CSS介紹
4.1 為什么需要CSS
使用css的目的就是讓網(wǎng)頁(yè)具有美觀一致的頁(yè)面，另外一個(gè)最重要的原因是內(nèi)容與格式分離，在沒有CSS之前，我們想要修改HTML元素的樣式需要為每個(gè)HTML元素單獨(dú)定義樣式屬性，當(dāng)HTML內(nèi)容非常多時(shí)，就會(huì)定義很多重復(fù)的樣式屬性，并且修改的時(shí)候需要逐個(gè)修改，費(fèi)心費(fèi)力。是時(shí)候做出改變了，所以CSS就出現(xiàn)了。
4.2 CSS概念
CSS（Cascading Style Sheets）層疊樣式表，又叫級(jí)聯(lián)樣式表，簡(jiǎn)稱樣式表
1、用于HTML文檔中元素樣式的定義
實(shí)現(xiàn)了將內(nèi)容與表現(xiàn)分離
提高代碼的可重用性和可維護(hù)性
2、文件后綴是。css
4.3 CSS發(fā)展史
1990年，Tim Berners-Lee和Robert Cailliau共同發(fā)明了Web。1994年，Web真正走出實(shí)驗(yàn)室。
從HTML被發(fā)明開始，樣式就以各種形式存在。不同的瀏覽器結(jié)合它們各自的樣式語(yǔ)言為用戶提供頁(yè)面效果的控制。最初的HTML只包含很少的顯示屬性。
隨著HTML的成長(zhǎng)，為了滿足頁(yè)面設(shè)計(jì)者的要求，HTML添加了很多顯示功能。但是隨著這些功能的增加，HTML變的越來越雜亂，而且HTML頁(yè)面也越來越臃腫。于是CSS便誕生了。
1994年哈坤·利提出了CSS的最初建議。而當(dāng)時(shí)伯特·波斯（Bert Bos）正在設(shè)計(jì)一個(gè)名為Argo的瀏覽器，于是他們決定一起設(shè)計(jì)CSS。
其實(shí)當(dāng)時(shí)在互聯(lián)網(wǎng)界已經(jīng)有過一些統(tǒng)一樣式表語(yǔ)言的建議了，但CSS是第一個(gè)含有“層疊”豐意的樣式表語(yǔ)言。在CSS中，一個(gè)文件的樣式可以從其他的樣式表中繼承。讀者在有些地方可以使用他自己更喜歡的樣式，在其他地方則繼承或“層疊”作者的樣式。這種層疊的方式使作者和讀者都可以靈活地加入自己的設(shè)計(jì)，混合每個(gè)人的愛好。
哈坤于1994年在芝加哥的一次會(huì)議上第一次提出了CSS的建議，1995年的www網(wǎng)絡(luò)會(huì)議上CSS又一次被提出，博斯演示了Argo瀏覽器支持CSS的例子，哈肯也展示了支持CSS的Arena瀏覽器。
同年，W3C組織（World WideWeb Consortium）成立，CSS的創(chuàng)作成員全部成為了W3C的工作小組并且全力以赴負(fù)責(zé)研發(fā)CSS標(biāo)準(zhǔn)，層疊樣式表的開發(fā)終于走上正軌。有越來越多的成員參與其中，例如微軟公司的托馬斯·萊爾頓（Thomas Reaxdon），他的努力最終令I(lǐng)nternet Explorer瀏覽器支持CSS標(biāo)準(zhǔn)。哈坤、波斯和其他一些人是這個(gè)項(xiàng)目的主要技術(shù)負(fù)責(zé)人。1996年底，CSS初稿已經(jīng)完成，同年12月，層疊樣式表的第一份正式標(biāo)準(zhǔn)（Cascading style Sheets Level 1）完成，成為w3c的推薦標(biāo)準(zhǔn)。
1997年初，W3C組織負(fù)責(zé)CSS的工作組開始討論第一版中沒有涉及到的問題。其討論結(jié)果組成了1998年5月出版的CSS規(guī)范第二版。
“如何快速理解HTML5新增元素和css”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！
重慶分公司
重慶分公司
