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

本篇內(nèi)容介紹了“如何快速理解HTML5新增元素和css”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(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格式的，在瀏覽器中通過(guò)一些技術(shù)處理將其轉(zhuǎn)換成為了可識(shí)別的信息。HTML5在從前HTML4.01的基礎(chǔ)上進(jìn)行了一定的改進(jìn)，雖然技術(shù)人員在開發(fā)過(guò)程中可能不會(huì)將這些新技術(shù)投入應(yīng)用，但是對(duì)于該種技術(shù)的新特性，網(wǎng)站開發(fā)技術(shù)人員是必須要有所了解的。

HTML5是HTML最新的修訂版本，2014年10月由萬(wàn)維網(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

<header>…</header> 頭部

<nav>…</nav> 導(dǎo)航

<section>…</section>定義文檔中的節(jié)。比如章節(jié)、頁(yè)眉、頁(yè)腳或文檔中的其它部分

<aside>…</aside> 側(cè)邊欄

<footer>…</footer> 頁(yè)腳

<article>…</article>代表一個(gè)獨(dú)立的、完整的相關(guān)內(nèi)容塊，可獨(dú)立于頁(yè)面其它內(nèi)容使用。例如一篇完整的論壇帖子，一篇博客文章，一個(gè)用戶評(píng)論等

使用HTML5的新的結(jié)構(gòu)標(biāo)簽，做出上面的布局，代碼如下：

二、視頻和音頻

HTML5未出來(lái)之前，在線的音頻和視頻都是借助Flash或者第三方工具實(shí)現(xiàn)的，現(xiàn)在HTML5也支持了這方面的功能。在一個(gè)支持HTML5的瀏覽器中，不需要安裝任何插件就能播放音頻和視頻。原生的支持音頻和視頻，為HTML5注入了巨大的發(fā)展?jié)摿Α?/p>

2.1視頻

Video標(biāo)簽定義視頻，比如電影片段或其他視頻流。

2.2音頻

audio 標(biāo)簽定義聲音，比如音樂(lè)或其他音頻流。

2.3source

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

<source> 標(biāo)簽允許您規(guī)定可替換的視頻/音頻文件供瀏覽器根據(jù)它對(duì)媒體類型或者編解碼器的支持進(jìn)行選擇。

三、HTML5新增標(biāo)簽（了解）

3.1figure

用于對(duì)元素進(jìn)行組合。多用于圖片與圖片描述組合。

3.2details

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

3.3mark

主要用來(lái)在視覺上向用戶呈現(xiàn)那些需要突出的文字。<mark>標(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)程。可以使用 <progress> 標(biāo)簽來(lái)顯示 JavaScript 中耗費(fèi)時(shí)間的函數(shù)的進(jìn)程。

max：定義完成值

value：定義當(dāng)前值

3.6 datalist

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

datalist 及其選項(xiàng)不會(huì)被顯示出來(lái)，它僅僅是合法的輸入值列表。

請(qǐng)使用 input 元素的 list 屬性來(lái)綁定 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變的越來(lái)越雜亂，而且HTML頁(yè)面也越來(lái)越臃腫。于是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)有過(guò)一些統(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ā)終于走上正軌。有越來(lái)越多的成員參與其中，例如微軟公司的托馬斯·萊爾頓（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的工作組開始討論第一版中沒有涉及到的問(wèn)題。其討論結(jié)果組成了1998年5月出版的CSS規(guī)范第二版。

“如何快速理解HTML5新增元素和css”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

網(wǎng)頁(yè)標(biāo)題：如何快速理解HTML5新增元素和css
當(dāng)前網(wǎng)址：http://bm7419.com/article12/jdcgdc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、微信小程序、面包屑導(dǎo)航、App開發(fā)、虛擬主機(jī)、搜索引擎優(yōu)化

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容