整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
鏈接在現(xiàn)代網(wǎng)頁設(shè)計(jì)中發(fā)揮著不可或缺的作用。HTML中，href屬性在anchor標(biāo)簽中扮演著關(guān)鍵角色，使得用戶可以輕松地跳轉(zhuǎn)到其他頁面或特定部分。在本文中，我們將探討href屬性的基本使用方法以及一些高級(jí)技巧，幫助您提升網(wǎng)站用戶體驗(yàn)。
HTML中，anchor標(biāo)簽用于創(chuàng)建超鏈接，其基本結(jié)構(gòu)如下：
<a href="鏈接地址">鏈接文本</a>
其中，href屬性指定了跳轉(zhuǎn)的目標(biāo)地址，而鏈接文本則是用戶在頁面上看到的可點(diǎn)擊的文本。
絕對(duì)路徑和相對(duì)路徑是href屬性中常見的兩種取值類型。
外部鏈接指向不同域名的頁面，而內(nèi)部鏈接則是指向同一域名內(nèi)的頁面或部分。在創(chuàng)建鏈接時(shí)，確保使用正確的協(xié)議（如http://或https://）以避免鏈接無法正常跳轉(zhuǎn)。
通過使用target屬性，您可以控制超鏈接的打開方式。常見的取值有：
rel屬性用于在超鏈接中添加關(guān)聯(lián)信息，如：
為了提升網(wǎng)站的訪問性和 SEO 排名，請(qǐng)確保鏈接文本清晰、描述性，避免使用過于短的單詞（如 "點(diǎn)擊這里"）。此外，使用有意義的 URL 以便搜索引擎更好地理解您的網(wǎng)頁內(nèi)容。
通過CSS，您可以對(duì)超鏈接進(jìn)行樣式定義，使其與網(wǎng)站設(shè)計(jì)相一致。例如，更改鏈接的顏色、字體、下劃線等。
掌握href屬性的使用方法和技巧，您可以創(chuàng)建更加易于導(dǎo)航且訪問性較好的網(wǎng)站。在提升用戶體驗(yàn)的同時(shí)，還能夠?yàn)樗阉饕嫣峁└嚓P(guān)于網(wǎng)頁內(nèi)容的信息，從而提高網(wǎng)站的 SEO 排名。
置字符編碼
屬性：http-equiv 值：Content-Type 內(nèi)容：text/html; charset=utf-8
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />設(shè)置有效期
設(shè)置網(wǎng)頁的有效期之后, 過期網(wǎng)頁將無法脫機(jī)瀏覽, 只有重新登錄并連接該網(wǎng)頁才可以再次瀏覽。
屬性：http-equiv 值：expires 內(nèi)容：Sun,1 Dec 2012 12:00:00 GMT
<meta http-equiv="Expires" content="Sun,1 Dec 2012 12:00:00 GMT" />
<meta http-equiv="Expires" content="<?php gmdate('D, d M Y H:i:s',time()+3600).' GMT'; ?>" />設(shè)置禁止緩存
網(wǎng)頁制作者希望隨時(shí)都能查看到最新的網(wǎng)頁內(nèi)容，則可以設(shè)置禁止頁面緩存
屬性：http-equiv 值：cache-control 內(nèi)容：no-cache
<meta http-equiv="cache-control" content="no-cache" />設(shè)置自動(dòng)刷新
設(shè)置頁面自動(dòng)刷新，以實(shí)現(xiàn)信息的自動(dòng)實(shí)時(shí)顯示(秒)
屬性：http-equiv 值：refresh 內(nèi)容：5
<meta http-equiv="Refresh" content="5" />設(shè)置自動(dòng)跳轉(zhuǎn)
屬性：http-equiv 值：refresh 內(nèi)容：5;url=http://www.xxx.com/
<meta http-equiv="Refresh" content="5;URL=http://www.xxx.com/" />設(shè)置網(wǎng)頁關(guān)鍵詞
屬性：name 值：keywords 內(nèi)容：油漆，涂料，涂料行業(yè)，汽車涂料
<meta name="keywords" content="油漆，涂料，涂料行業(yè)，汽車涂料" />設(shè)置搜索限制
屬性：name 值：robots 內(nèi)容：All
All 表示能搜索當(dāng)前網(wǎng)頁與其鏈接的網(wǎng)頁，系統(tǒng)默認(rèn)設(shè)置
Index 表示能搜素當(dāng)前頁面
Nofollow 表示不能搜素與當(dāng)前網(wǎng)頁鏈接的網(wǎng)頁
Noindex 表示不能搜素當(dāng)前網(wǎng)頁
None 表示不能搜索當(dāng)前網(wǎng)頁與其鏈接的網(wǎng)頁
<meta name="robots" content="All" />
設(shè)置網(wǎng)頁說明
屬性：name 值：description 內(nèi)容：中國(guó)油漆網(wǎng)--您的油漆專家
<meta name="description" content="中國(guó)油漆網(wǎng)--您的油漆專家" />設(shè)置網(wǎng)頁的作者
屬性: name 值: author 內(nèi)容: LAMP Brother UI Team
<meta name="author" content="LAMP Brother UI Team" />設(shè)置網(wǎng)頁的版權(quán)
屬性: name 值: copyright 內(nèi)容: 2012-2014 EDU.
<meta name="copyright" content="2012-2014 EDU." />設(shè)置移動(dòng)網(wǎng)站
<meta http-equiv="mobile-agent" content="format=html5;url=http://www.xxxxxx.com/mobile/"><base> 標(biāo)簽
base 元素可規(guī)定頁面中所有鏈接的基準(zhǔn) URL。
通常情況下，瀏覽器會(huì)從當(dāng)前文檔的 URL 中提取相應(yīng)的元素來填寫相對(duì) URL 中的空白。
使用 <base> 標(biāo)簽可以改變這一點(diǎn)。瀏覽器隨后將不再使用當(dāng)前文檔的 URL，而使用指定的基本 URL 來解析所有的相對(duì) URL。
這其中包括 <a>、<img>、<link>、<form> 標(biāo)簽中的 URL。
<base href="文件路徑" target="目標(biāo)窗口"/>必需的屬性
href URL 規(guī)定頁面中所有鏈接的基準(zhǔn) URL。
target _blank 在何處打開頁面中所有的鏈接。可通過在每個(gè)鏈接中使用 target 屬性來覆蓋此屬性。
_parent
_self
_top
_blank 在一個(gè)新的未命名的窗口載入文檔
_self 在相同的框架或窗口中載入目標(biāo)文檔
_parent 把文檔載入父窗口或包含了超鏈接引用的框架的框架集
_top 把文檔載入包含該超鏈接的窗口,取代任何當(dāng)前正在窗口中顯示的框架
實(shí)例:
<base target="_blank"/>可以將該頁面的所有<a>鏈接的默認(rèn)屬性設(shè)置為_blank
<base href="http://www.xxxxxx.com" />在網(wǎng)頁出現(xiàn)的相對(duì)鏈接"test.html"將對(duì)應(yīng)htp://www.xxxxxx.com/test.html的頁面
<basefont face="" size="" color=""/>face屬性可以用于設(shè)置文字的名稱,可以是宋體、隸書、楷體等;
size屬性用于設(shè)置字號(hào)的大小(單位:字號(hào)),從 1 到 7 的數(shù)字,或h1-h6。瀏覽器默認(rèn)值是 3。
color用于設(shè)置字體的顏色
近因?yàn)橐恍┚W(wǎng)頁的需要，需要比較深入的使用了CSS 的「?jìng)卧亍? Pseudo Element )，發(fā)現(xiàn)原來不只是用用before或after 而已，可以玩的東西還真是不少，所以就來篇文章，把這些比較不常玩的用法歸納整理下，希望對(duì)你的日常工作有所幫助。
「?jìng)卧亍怪苑Q作「?jìng)巍梗擞⑽膹摹窹seudo」翻譯過來之外，就是因?yàn)樗⒉皇钦嬲W(wǎng)頁里的元素，但行為與表現(xiàn)又和真正網(wǎng)頁元素一樣，也可以對(duì)其使用CSS 操控。
跟偽元素類似的還有「?jìng)晤悺? Pseudo classes )，在W3C的定義里總共有五個(gè)偽元素(其他仍在測(cè)試階段)，分別是::before、::after、::first-line、::first-letter和::selection，為了和偽類區(qū)分，偽元素使用兩個(gè)冒號(hào)「::」開頭，而偽類使用一個(gè)冒號(hào)「:」開頭(像是:hover、:target...等)。
雖然現(xiàn)在的瀏覽器就算寫一個(gè)冒號(hào)也可以正常運(yùn)作，不過為了方便區(qū)分，用兩個(gè)冒號(hào)還是比較好的，而且不論瀏覽器是什么，::selection必須是兩個(gè)冒號(hào)才能正常運(yùn)作。
參考：MDN Pseudo-elements、偽類child和of-type
::before、::after大概是最常使用的偽元素，兩者都是以display:inline-block的屬性存在，::before是在原本的元素「之前」加入內(nèi)容，::after則是在原本的元素「之后」加入內(nèi)容，同時(shí)偽元素也會(huì)「繼承」原本元素的屬性，如果原本文字是黑色，偽元素的文字也會(huì)是黑色。
舉例來說，下面這段程式碼，有一個(gè)div 內(nèi)容是「大家好，我是div」，使用::before、::after 之后，會(huì)在原本div 的前后各添加一段文字，并且讓這兩段文字都呈現(xiàn)紅色。
div::before{
content:"我是 before";
color:red;
}
div::after{
content:"我是 after";
color:red;
}
上述的內(nèi)容乍看之下很容易理解，比較需要注意的是一定要具備content的屬性，就算是只有content:"";都可以，因?yàn)闆]有content的偽元素是不會(huì)出現(xiàn)在畫面上的，然而content是個(gè)很特別的屬性，它可以使用attr直接獲取內(nèi)容元素的屬性值( attribute )，舉例來說，在HTML里有一個(gè)超連結(jié)，點(diǎn)擊后會(huì)彈出新視窗并連結(jié)至Google：
<a target="_blank">google</a>
使用下列的程式碼用法，將會(huì)把超連結(jié)的href 內(nèi)容與target 內(nèi)容，透過偽元素一前一后的顯示出來。
a::before{
content: attr(href);
color:red;
}
a::after{
content: attr(target);
color:green;
}
此外content內(nèi)容是可以「相加」的，不過用法不像JavaScript使用+號(hào)來相連，而是直接用一個(gè)空白鍵就可以不斷的累加下去，以下面的程式碼來說，可以在剛剛擷取的超連結(jié)文字后方和target屬性前方，加入標(biāo)點(diǎn)符號(hào)。
a::before{
content: "( " attr(href) " ) < ";
color:red;
}
a::after{
content: " > ( " attr(target) " ) ";
color:green;
}
content 甚至可以使用url 放入圖片的功能，下列的程式碼會(huì)呈現(xiàn)出三張圖片。
div::before{
content:url(圖片網(wǎng)址) url(圖片網(wǎng)址) url(圖片網(wǎng)址);
}
通過調(diào)整border的屬性，我們可以實(shí)現(xiàn)上下左右的三角形，再結(jié)合偽元素before，after，content可以繪制多種多邊形，筆者在這篇文章有過介紹，感興趣的可以看看 ：只用1個(gè)div，你能用CSS繪制：正3、4、5、6、7、8邊形嗎？
在CSS里有個(gè)不常用的屬性就是quotes，這是做為定義「括號(hào)格式」的屬性，也就是如果在一段文字被包住，這段文字的前后就會(huì)出現(xiàn)自定義的標(biāo)簽替換（可以是括號(hào)、特殊符合、文字等），而且quotes支持多層嵌套，也就是你可以一層層的寫下去，以下面這段HTML文字舉例：
最外層<q>第一層<q>第二層</q><q>第二層<q>第三層</q></q></q>
quotes 的屬性如果只寫一層，就會(huì)看到只出現(xiàn)一種括號(hào)，前后括號(hào)使用空白分隔，兩組為一個(gè)單位，前后可以不同符號(hào)。
q{
quotes: ' < ' ' > ';
}
如果寫了三層，就會(huì)看到出現(xiàn)三種括號(hào)，也會(huì)把文字當(dāng)作括號(hào)使用。
q{
quotes: ' < ' ' > ' ' ya ' ' ya ' ' ( ' ' ) ' ;
}
（請(qǐng)注意開合標(biāo)簽的就近分配原則）
同樣的道理，我們可以應(yīng)用在content里面，而且通過偽元素::before和::after處于前后的預(yù)設(shè)位置，甚至不用就實(shí)現(xiàn)前后括號(hào)的效果，以下面這段HTML文字舉例，把剛剛的q全部換成span：
最外層<span>第一層<span>第二層</span><span>第二層<span>第三層</span></span></span>
CSS的部分比較特別，在偽元素content里使用了open-quote (啟始括號(hào))和close-quote (結(jié)束括號(hào))這兩個(gè)有趣的值，換句話說open-quote對(duì)應(yīng)到，close-quote對(duì)應(yīng)到，此外也由于括號(hào)是在偽元素內(nèi)，就可以指定不同的顏色或樣式了。
span{
quotes: ' < ' ' > ' ' ya ' ' ya ' ' ( ' ' ) ' ;
}
span::before{
content:open-quote;
color:red;
}
span::after{
content:close-quote;
color:#aaa;
}
文章來源：https://www.oxxostudio.tw/articles/201706/pseudo-element-1.html
原文作者：oxxostudio
由于網(wǎng)頁為繁體內(nèi)容，術(shù)語描述和標(biāo)點(diǎn)話術(shù)的差異的問題，筆者在保證不改變?cè)獾幕A(chǔ)上做了調(diào)整，并且內(nèi)容頁進(jìn)行了驗(yàn)證確認(rèn)無誤，歡迎大家指正。
雖然說偽元素很好用，但偽元素的內(nèi)容實(shí)際上不存在網(wǎng)頁里( 如果打開瀏覽器的開發(fā)者工具，是看不到內(nèi)容的)，所以如果在里頭塞了太多的重要的內(nèi)容，反而會(huì)影響到SEO 的成效，因此對(duì)于使用偽元素的定位，還是當(dāng)作「輔助」性質(zhì)會(huì)比較恰當(dāng)。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
