溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了html中為什么用i標(biāo)簽<i></i>作小圖標(biāo)，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶大家一起來研究并學(xué)習(xí)一下“html中為什么用i標(biāo)簽<i></i>作小圖標(biāo)”這篇文章吧。
html的全稱為超文本標(biāo)記語言，它是一種標(biāo)記語言，包含了一系列標(biāo)簽．通過這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個(gè)邏輯整體，html文本是由html命令組成的描述性文本，html命令可以說明文字，圖形、動(dòng)畫、聲音、表格、鏈接等，主要和css+js配合使用并構(gòu)建優(yōu)雅的前端網(wǎng)頁。
用 <i> 元素做圖標(biāo)在語義上是不正確的（雖然看起來像 icon 的縮寫）；
<i> 比 <span> 短，但 gzip 后差異很小，不過打字可以少按三個(gè)鍵；
多數(shù)圖標(biāo)用的是空 <i> 元素，配合 ::before 偽元素實(shí)現(xiàn)，因?yàn)闆]有內(nèi)容，讀屏器不會(huì)朗讀（這樣即使有特殊處理也跳過了），機(jī)器理解起來應(yīng)該也沒什么影響。
綜合來看，從實(shí)用性上暫時(shí)沒看出有什么缺陷，所以目前用不用 <i> 取決于你對(duì)于遵循規(guī)范有多潔癖。
:before 和 :after 偽元素編碼非常簡(jiǎn)單(和大多數(shù)的css屬性一樣不需要一大堆的前綴)。這里是一個(gè)簡(jiǎn)單的例子。
#example:before { content: "#";}#example:after { content: ".";} 這個(gè)例子中提到了兩件事情，第一，我們用#example:before和#example:after來目標(biāo)鎖定相同的元素.嚴(yán)格的說，在代碼中他們是偽元素。
第二，在內(nèi)容模塊中提到，偽元素如果沒有設(shè)置“content”屬性，偽元素是無用的。
在這個(gè)例子中，擁有屬性id的元素將有一個(gè)"哈希符號(hào)"放置內(nèi)容之前，和一個(gè)"句號(hào)"在內(nèi)容之后。
你可以設(shè)置content屬性值為空，并且僅僅把他當(dāng)做一個(gè)內(nèi)容很少的盒子。像這樣:
#example:before { content: "";
display: block; width: 100px; height: 100px;} 然而，你不可以完全的移除content屬性，如果你移除了，偽元素將不會(huì)起作用。至少，content屬性需要空引用作為它的值(即:content:“”)。
你也許注意到，你也可以用兩個(gè)冒號(hào)(::before 和 ::after) 寫偽元素，這個(gè)我以前討論過的。簡(jiǎn)短的解釋是，對(duì)于這兩種語法沒有什么不同，僅僅一點(diǎn)的不同是，偽元素(雙冒號(hào))，css3中的偽類是（單冒號(hào)）
最后就語法而言。從技術(shù)上講，你可以普遍的應(yīng)用偽元素，不是放在特殊的元素上，像這樣：
:before { content: "#";} 雖然上面是有效的，但是它十分的沒用。代碼會(huì)在DOM里的每個(gè)元素的內(nèi)容之前插入散列符號(hào)。即使你刪除了<body>標(biāo)簽和它的所有內(nèi)容，你仍會(huì)在頁面上看見兩個(gè)散列符號(hào)：一個(gè)在<html>里，另一個(gè)在<body>標(biāo)簽里，瀏覽器會(huì)自動(dòng)創(chuàng)建哪一個(gè)。
正如前面提及的，插入的內(nèi)容在頁面的源碼里是不可見的，只能在css里可見。
同時(shí)，插入的元素在默認(rèn)情況下是內(nèi)聯(lián)元素（或者，在html5中，在文本語義的類別里）。因此，為了給插入的元素賦予高度，填充，邊距等等，你通常必須顯式地定義它是一個(gè)塊級(jí)元素。
這會(huì)是對(duì)如何設(shè)計(jì)偽元素的一個(gè)簡(jiǎn)要的說明，看我下面文本編輯器的這幅圖
在這個(gè)例子中，我高亮的樣式將被應(yīng)用到元素里插入到目標(biāo)元素內(nèi)容的前面和后面。
還要注意的是典型的CSS繼承規(guī)則適用于插入的元素。例如，你有字體系列黑體，宋體，無襯線字體應(yīng)用到body元素里，然后偽元素會(huì)像其他元素一樣繼承這些字體系列。
同樣的，偽元素不會(huì)繼承沒有自然繼承自父元素(如 padding and margins)的樣式。
你的直覺是：before和：after偽元素可能是 插入的內(nèi)容會(huì)被注入到目標(biāo)元素的前或后注入？但是，正如上面提到的，不是這樣的。
注入的內(nèi)容將是有關(guān)聯(lián)的目標(biāo)元素的子元素，content指向的內(nèi)容會(huì)被置于子元素的“前”或“后”。
為了證明這一點(diǎn)，看看下面的代碼。首先，在HTML：
<p class="box">Other content.</p>
下面是插入偽元素的css：
p.box {
width: 300px;
border: solid 1px white;
padding: 20px;}p.box:before {
content: "#";
border: solid 1px white;
padding: 2px;
margin: 0 10px 0 0;
} 在此html里，你所看的一段文字帶有的是一個(gè)類的box，還有這樣的文字“Other content”在里面（像你所會(huì)看到的一樣，如果你看見了首頁的源代碼）。在css中，這段內(nèi)容被設(shè)置了寬度，以及一些padding和可見的邊框
然后我們有了偽元素。在這個(gè)例子中，它是一個(gè)散列符號(hào)插入到該段內(nèi)容之前。隨后css給了它一個(gè)邊框以及一些padding和margins。
這里是瀏覽器中查看的結(jié)果：
外面的盒子是這個(gè)段落。圍繞有散列符號(hào)的邊框表示偽元素的邊界。所以，不是插入“before”到段落，而是偽元素被置于到此段落的“Other content”的前面。
我簡(jiǎn)要的提醒，你可以把屬性的值置為空字符串或是插入文本內(nèi)容。你基本上有屬性的值要包含什么的兩個(gè)額外的選擇
首先，你可以包含一個(gè)指向一個(gè)圖像的URL，就像在css里包含一個(gè)背景圖像一樣做你能做的
p:before { content: url(image.jpg);} 注意不能使用引號(hào)。如果你將URL用引號(hào)括起來，那么它會(huì)變成一個(gè)字符串和插入文本“url(image.jpg)”作為其內(nèi)容，插入的而不是圖像本身。
當(dāng)然，你可以包含一個(gè)Data URI代替圖像引用，正如你可以用css背景一樣。
你還可以選擇attr(X)中的函數(shù)的形式。此功能，根據(jù)規(guī)范 ，“把X屬性的值以字符串的形式返回”
下面是一個(gè)例子：
a:after { content: attr(href);} attr（）函數(shù)的功能是什么？它得到特定屬性的值并把它作為插入的文本成為一個(gè)偽元素。
上面的代碼會(huì)導(dǎo)致頁面上的每一個(gè)<a>元素的href值立即被放置在每個(gè)各自的<a>元素的后面。在文檔被打印時(shí)，它可以用作一個(gè)包含所有URl的打印樣式表。
你也可以用這個(gè)函數(shù)去獲取元素的title屬性，或者甚至是microdata的值。當(dāng)然，并不是所有的例子都符合自己的實(shí)際，但根據(jù)不同的情況，一個(gè)特定的屬性值作為一個(gè)偽元素可以是實(shí)際的。
然而，獲取title或者圖像的alt的值并作為實(shí)際的偽元素顯示在頁面上是不可能的。記住偽元素必須是被應(yīng)用元素的子元素。圖像，這是void(或者是空元素)，沒有子元素，所以它在這個(gè)列子中不可用，同樣也適用于其他空元素，例如：<input>。
任何前端技術(shù)的發(fā)展勢(shì)頭，第一個(gè)問題就是瀏覽器的支持。在這種情況之下，它不是個(gè)很大的問題。
瀏覽器支持:before 和 :after 偽元素棧，像這樣：
Chrome 2+,
Firefox 3.5+ (3.0 had partial support),
Safari 1.3+,
Opera 9.2+,
IE8+ (with some minor bugs),
幾乎所有的移動(dòng)瀏覽器。
唯一真正的問題是沒有獲得支持的（不用奇怪）IE6和IE7。所以，如果你的愛好者是在良好合適的web開發(fā)（或者其他具有較低IE版本的市場(chǎng)），你可以繼續(xù)自由地使用偽元素。
幸運(yùn)的是，缺少偽元素不會(huì)造成大問題。大多數(shù)情況下，偽元素一般修飾（或者幫助）內(nèi)容，不會(huì)給不支持的瀏覽器造成問題。所以，如果你的支持者具有較高的IE版本，你仍然可以在某種程度上使用它們。
以上就是關(guān)于“html中為什么用i標(biāo)簽<i></i>作小圖標(biāo)”的內(nèi)容，如果改文章對(duì)你有所幫助并覺得寫得不錯(cuò)，勞請(qǐng)分享給你的好友一起學(xué)習(xí)新知識(shí)，若想了解更多相關(guān)知識(shí)內(nèi)容，請(qǐng)多多關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼