html標(biāo)簽屬性和css屬性的優(yōu)先級哪個(gè)比較高

這篇文章給大家分享的是有關(guān)html標(biāo)簽屬性和css屬性的優(yōu)先級哪個(gè)比較高的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

蕉嶺網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站開發(fā)等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營維護(hù)。創(chuàng)新互聯(lián)于2013年成立到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。

html標(biāo)簽屬性和css屬性相比，css屬性的優(yōu)先級高。原因：W3C標(biāo)準(zhǔn)提倡使用CSS樣式，提倡用CSS樣式代替HTML標(biāo)簽屬性；網(wǎng)頁制作標(biāo)準(zhǔn)是標(biāo)簽跟樣式分離；且在標(biāo)簽屬性里設(shè)置樣式，重復(fù)使用比較難。

今天在看w3c的CSS教程中的尺寸(Dimension)那一節(jié)，進(jìn)行了如下實(shí)驗(yàn)：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title> 
<style>
html {height:100%;}
body {height:100%;}
img.normal {height:auto;}
img.big {height:50%;}
img.small {height:10%;}
</style>
</head>

<body>
<img class="normal" src="/attachments/cover/cover_css.png" width="95" height="84" /><br>
<img class="big" src="/attachments/cover/cover_css.png" width="95" height="84" /><br>
<img class="small" src="/attachments/cover/cover_css.png" width="95" height="84" />
</body>
</html>

運(yùn)行結(jié)果如下：

html標(biāo)簽屬性和css屬性的優(yōu)先級哪個(gè)比較高
當(dāng)時(shí)令我不解的是，為什么相比于img標(biāo)簽里的height屬性，反而是內(nèi)部樣式表中的img的height屬性起了作用，然后就進(jìn)行了各種的百度搜索。

最終得出了相關(guān)結(jié)論：
(1) 現(xiàn)在發(fā)現(xiàn)當(dāng)時(shí)的我把標(biāo)簽內(nèi)的屬性設(shè)置和內(nèi)聯(lián)樣式搞混了，所以剛開始才會那么驚訝無法理解，之后嘗試內(nèi)聯(lián)樣式

<img class="big" src="/attachments/cover/cover_css.png"  style="width:95px; height:84px" /><br>

實(shí)驗(yàn)結(jié)果表明還是內(nèi)聯(lián)樣式的優(yōu)先級高于內(nèi)部樣式表。

(2) 重新搞清楚概念后，再觀察會發(fā)現(xiàn)其實(shí)是內(nèi)部樣式表的樣式設(shè)置優(yōu)先級高于html標(biāo)簽屬性的樣式設(shè)置，隨后進(jìn)行了外部樣式表的實(shí)驗(yàn)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title> 
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<img src="cover_css.png" width="50px" height="84" />
</body>
</html>

發(fā)現(xiàn)外部樣式表的優(yōu)先級也高于img標(biāo)簽內(nèi)部的height屬性，由此可知，css的樣式會優(yōu)先于標(biāo)簽的屬性。

(3) W3C標(biāo)準(zhǔn)提倡使用CSS樣式，提倡用CSS樣式代替HTML標(biāo)簽屬性；網(wǎng)頁制作標(biāo)準(zhǔn)是標(biāo)簽跟樣式分離。因?yàn)樵跇?biāo)簽屬性里設(shè)置，重復(fù)使用比較難，個(gè)人猜測這可能就是css樣式優(yōu)先級高于標(biāo)簽屬性的原因。

(4) 雖然提倡使用CSS樣式，但是W3School中進(jìn)行了詳細(xì)的介紹：“為圖像指定 height 和 width 屬性是一個(gè)好習(xí)慣。如果設(shè)置了這些屬性，就可以在頁面加載時(shí)為圖像預(yù)留空間。如果沒有這些屬性，瀏覽器就無法了解圖像的尺寸，也就無法為圖像保留合適的空間，因此當(dāng)圖像加載時(shí)，頁面的布局就會發(fā)生變化?！?/p>

“請不要通過 height 和 width 屬性來縮放圖像。如果通過 height 和 width 屬性來縮小圖像，那么用戶就必須下載大容量的圖像（即使圖像在頁面上看上去很?。Ｕ_的做法是，在網(wǎng)頁上使用圖像之前，應(yīng)該通過軟件把圖像處理為合適的尺寸?！?/p>

“height 和 width 屬性的兩個(gè)值可以比實(shí)際的尺寸大一些或小一些，瀏覽器會自動(dòng)調(diào)整圖像，使其適應(yīng)這個(gè)預(yù)留空間的大小。但需要注意的是：瀏覽器還是必須要下載整個(gè)文件，不管它最終顯示的尺寸到底是多大，而且，如果沒有保持其原來的寬度和高度比例，圖像會發(fā)生扭曲。
使用 height 和 width 屬性的另外一種技巧，是可以非常容易地實(shí)現(xiàn)對頁面區(qū)域的填充，同時(shí)還可以改善文檔的性能。設(shè)想一下，如果你想在文檔中放置一個(gè)彩色的橫條。您不需要?jiǎng)?chuàng)建一個(gè)具有完整尺寸的圖像，相反，您只要?jiǎng)?chuàng)建一個(gè)寬度和高度都為 1 個(gè)像素的圖像，并把自己希望使用的顏色賦給它。然后使用 height 和 width 屬性把它擴(kuò)展到更大的尺寸?！?/p>

“如果提供了一個(gè)百分比形式的 width 值而忽略了 height，那么不管是放大還是縮小，瀏覽器都將保持圖像的寬高比例（因?yàn)椴辉O(shè)置height時(shí)的默認(rèn)值為auto自適應(yīng)）。這意味著圖像的高度與寬度之比將不會發(fā)生變化，圖像也就不會發(fā)生扭曲?！?/p>

就像露兜文章中一個(gè)ID為“于江水”的評論：“img 的 alt 屬性是必須的，width 和 height 是推薦的。因?yàn)?img 在網(wǎng)頁的加載是要比 p 這些結(jié)構(gòu)慢的，所以往往是結(jié)構(gòu)和文字先加載了，再加載的圖片。這時(shí)候，由于瀏覽器預(yù)先不知道圖片的尺寸大小，所以無法渲染圖片在網(wǎng)頁中的位置和尺寸。等圖片加載進(jìn)來之后，再進(jìn)行渲染，這時(shí)候就產(chǎn)生重繪（就是瀏覽器重新計(jì)算相關(guān)元素的位置，具體表現(xiàn)就是圖片出現(xiàn)了，圖片下面的文字跑到下面了，淘寶的商品介紹頁面，這里非常明顯。）
而帶有 width 和 height 的 img，瀏覽器會計(jì)算出來，留空，然后等待圖片加載，避免頁面重繪，提高前端性能和用戶體驗(yàn)，這里在知乎上多圖的答案可以看出來。

在響應(yīng)式布局（一個(gè)網(wǎng)站能夠兼容多個(gè)終端——而不是為每個(gè)終端做一個(gè)特定的版本；這個(gè)概念是為解決移動(dòng)互聯(lián)網(wǎng)瀏覽而誕生的）的圖片處理中，應(yīng)該對 img標(biāo)簽設(shè)置 max-width: 100%; height: auto; 這兩條屬性，才可以保證成比例拉伸?！?/strong>

html有什么特點(diǎn)

1、簡易性：超級文本標(biāo)記語言版本升級采用超集方式，從而更加靈活方便，適合初學(xué)前端開發(fā)者使用。 2、可擴(kuò)展性：超級文本標(biāo)記語言的廣泛應(yīng)用帶來了加強(qiáng)功能，增加標(biāo)識符等要求，超級文本標(biāo)記語言采取子類元素的方式，為系統(tǒng)擴(kuò)展帶來保證。  3、平臺無關(guān)性：超級文本標(biāo)記語言能夠在廣泛的平臺上使用，這也是萬維網(wǎng)盛行的一個(gè)原因。 4、通用性：HTML是網(wǎng)絡(luò)的通用語言，它允許網(wǎng)頁制作人建立文本與圖片相結(jié)合的復(fù)雜頁面，這些頁面可以被網(wǎng)上任何其他人瀏覽到，無論使用的是什么類型的電腦或?yàn)g覽器。

感謝各位的閱讀！關(guān)于“html標(biāo)簽屬性和css屬性的優(yōu)先級哪個(gè)比較高”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

名稱欄目：html標(biāo)簽屬性和css屬性的優(yōu)先級哪個(gè)比較高
轉(zhuǎn)載源于：http://bm7419.com/article16/gipjdg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、網(wǎng)站導(dǎo)航、軟件開發(fā)、微信公眾號、外貿(mào)建站、小程序開發(fā)

廣告

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