整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
家好，我是江湖哥，今天分享html教程入門(mén)級(jí)的部分,大神請(qǐng)繞道，小白請(qǐng)點(diǎn)贊，哈哈，言歸正傳：
知識(shí)要點(diǎn)：
1. a標(biāo)簽的概念
2. a標(biāo)簽屬性
a標(biāo)簽的作用：就是用于控制頁(yè)面與頁(yè)面之間的跳轉(zhuǎn)的
a標(biāo)簽的格式：<a href="指定要跳轉(zhuǎn)的目標(biāo)界面的鏈接">需要展示給用戶(hù)看見(jiàn)的內(nèi)容</a>
<a href="https://www.toutiao.com/">江湖哥博客</a>a標(biāo)簽中有一個(gè)target屬性，這個(gè)屬性的作用就是專(zhuān)門(mén)用于控制如何跳轉(zhuǎn)
值
描述
_blank
于在新的選項(xiàng)卡中跳轉(zhuǎn)，也就是新建頁(yè)面跳轉(zhuǎn)
_self
默認(rèn)。在當(dāng)前選項(xiàng)卡中打開(kāi)被鏈接文檔，也就是不新建頁(yè)面跳轉(zhuǎn)
_parent
在父框架集中打開(kāi)被鏈接文檔。
_top
在整個(gè)窗口中打開(kāi)被鏈接文檔。
framename
在指定的框架中打開(kāi)被鏈接文檔。
<a href="https://www.toutiao.com/">可見(jiàn)內(nèi)容</a>
<a href="https://www.toutiao.com/" target=”_blank”>江湖可見(jiàn)博客</a>a標(biāo)簽中還有一個(gè)屬性，叫做title，a標(biāo)簽中的title和img標(biāo)簽中title一樣，都是用來(lái)控制鼠標(biāo)懸停時(shí)顯示的提示文本內(nèi)容的
<a href="https://www.toutiao.com/" target="_blank" title="點(diǎn)擊會(huì)跳轉(zhuǎn)到可見(jiàn)博客首頁(yè)">可見(jiàn)</a>設(shè)置 target 屬性時(shí)， top 與 parent 的打開(kāi)方式十分類(lèi)似，需仔細(xì)區(qū)分。
比如網(wǎng) A 中鑲嵌了 iframe 網(wǎng)頁(yè) B，網(wǎng)頁(yè) B 又鑲嵌了 iframe 網(wǎng)頁(yè)C。
· 如果網(wǎng)頁(yè) C 中連接設(shè)置 target=_parent，則跳轉(zhuǎn)到網(wǎng)頁(yè) B 去掉直接在 A 中嵌入網(wǎng)頁(yè) C 中鏈接頁(yè)面。
· 如果網(wǎng)頁(yè) C 中 target=_top ，則直接跳出所有 iframe 框架，直接轉(zhuǎn)向 C 中鏈接頁(yè)面
1.a標(biāo)簽不僅可以讓文字可以點(diǎn)擊，還可以讓圖片也能夠被點(diǎn)擊。
2.一個(gè)a標(biāo)簽必須有一個(gè)href屬性，否則a標(biāo)簽不知道要跳轉(zhuǎn)到什么地方
3.如果通過(guò)a標(biāo)簽的href屬性指定一個(gè)URL地址，那么必須在地址前面加上http://或https://。
4.a標(biāo)簽的href屬性除了可以綁定一個(gè)網(wǎng)絡(luò)地址以外，還可以指定一個(gè)本地的地址
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>a標(biāo)簽的使用</title>
</head>
<body>
<a name="top"></a>
<a href="https://www.toutiao.com/">a是控制界面也頁(yè)面的跳轉(zhuǎn)</a><br><br>
<a href="https://www.toutiao.com/" target="_blank">跳轉(zhuǎn)到新窗口打開(kāi)</a><br><br>
<a href="#name1">錨點(diǎn)跳轉(zhuǎn)1</a>&nssp;&nssp;&nssp;<a href="#name2">錨點(diǎn)跳轉(zhuǎn)2</a>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
這是一個(gè)錨點(diǎn)跳轉(zhuǎn)文字1 <a name="name1"></a> <a href="#top">返回頂部</a>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
這是一個(gè)錨點(diǎn)跳轉(zhuǎn)文字2 <a name="name2"></a> <a href="#top">返回頂部</a>
</body>
</html>關(guān)注我，點(diǎn)擊下面鏈接，即可看視頻
天我們來(lái)看下html中<a></a>的特點(diǎn)與功能
一 .a標(biāo)簽是超鏈接標(biāo)簽，首先我們說(shuō)一下它的特點(diǎn)：
1.在網(wǎng)頁(yè)中默認(rèn)會(huì)有下劃線
2.不會(huì)繼承父級(jí)的顏色樣式
效果圖
詳細(xì)代碼
其中，自帶的下劃線不美觀，但我們可以用以下代碼解決，ctrl+s保存后，下劃線就沒(méi)有了
去掉下劃線
二 .下面我們來(lái)看看a標(biāo)簽的幾個(gè)功能：
1.跳轉(zhuǎn)頁(yè)面
href 屬性要跳轉(zhuǎn)頁(yè)面的地址（沒(méi)地址的情況下可以寫(xiě)一個(gè)#）,即可以給網(wǎng)絡(luò)的地址也可以給本地的地址
target 屬性
值：_blank在新頁(yè)面打開(kāi)
_self 在本頁(yè)面打開(kāi)（默認(rèn)的）
跳轉(zhuǎn)頁(yè)面功能
2.錨點(diǎn)
作用：網(wǎng)頁(yè)太長(zhǎng)時(shí)，通過(guò)點(diǎn)擊頁(yè)面某一個(gè)導(dǎo)航，頁(yè)面直接到達(dá)該內(nèi)容，網(wǎng)頁(yè)還是該網(wǎng)頁(yè)，只是向下自己滑動(dòng)。
實(shí)現(xiàn)方法：在 href 的值里寫(xiě)上#name,name對(duì)應(yīng)id的值
下面是一個(gè)簡(jiǎn)單例子，點(diǎn)擊顏色就會(huì)跳轉(zhuǎn)到相應(yīng)顏色區(qū)域
錨點(diǎn)例子
3.下載
作用：實(shí)現(xiàn)網(wǎng)頁(yè)的下載功能
實(shí)現(xiàn)方法：在 href 里寫(xiě)上文件的地址就可以了
注意：如果你要下載的文件瀏覽器能夠讀出來(lái)，那它就不會(huì)被下載，而是會(huì)被直接打開(kāi)。如果就想讓瀏覽器下載所有文件，那就在a標(biāo)簽里添加一個(gè)屬性download（ h5 新增屬性，不兼容IE低版本），它的值寫(xiě)上文件的名字加后綴名
下載功能
三.此外，介紹一下a標(biāo)簽的顏色，給a標(biāo)簽換顏色也是會(huì)經(jīng)常用到的，但是怎么改呢？
這里用到了“偽類(lèi)”，偽類(lèi)：針對(duì)元素的某種狀態(tài)添加的不同樣式
a :link 未訪問(wèn)鏈接的（顏色）狀態(tài)
:visited訪問(wèn)過(guò)的鏈接的（顏色）狀態(tài)
:hover鼠標(biāo)移入（懸停）（顏色）狀態(tài)
:active鼠標(biāo)按下不動(dòng)時(shí)候的（顏色）狀態(tài)
改變a標(biāo)簽顏色
今天的a標(biāo)簽就介紹到這里，你學(xué)到了嗎？
言
由于前端所設(shè)計(jì)的領(lǐng)域太多，每篇文章所能講述的知識(shí)點(diǎn)太多，對(duì)于讀者來(lái)說(shuō)不太好消化，因此以后基本是采用一篇文章一個(gè)知識(shí)點(diǎn)來(lái)寫(xiě)作。
今天這篇文章主要講解css中a標(biāo)簽的高度和寬度問(wèn)題。
css
問(wèn)題描述
在采用div+css的方式布局頁(yè)面時(shí)，對(duì)于超鏈接a標(biāo)簽，無(wú)法設(shè)置其高度和寬度，即使對(duì)其設(shè)置了width和height屬性，也不會(huì)生效。
我們通過(guò)如下例子來(lái)看看。
給a標(biāo)簽設(shè)置了如下css屬性。
css屬性
但是從下圖可以看出，a標(biāo)簽的高度和寬度沒(méi)有發(fā)生變化，仍然是122px*22px。
實(shí)際效果
問(wèn)題原因
為什么會(huì)出現(xiàn)這個(gè)情況呢？
因?yàn)閍標(biāo)簽屬于行內(nèi)元素，行內(nèi)元素是無(wú)法直接設(shè)置高度和寬度的。
遇到這個(gè)問(wèn)題，我們?cè)撛趺唇鉀Q呢，主要有以下幾個(gè)方法。
解決方法1-設(shè)置塊級(jí)元素
既然行內(nèi)元素?zé)o法設(shè)置高度和寬度，那么我們將其設(shè)置為塊級(jí)元素呢？
我們對(duì)a標(biāo)簽設(shè)置以下的樣式。
設(shè)置display:block
我們可以看出a標(biāo)簽的高度和寬度發(fā)生了變化，而且在設(shè)置為塊級(jí)元素后，占據(jù)了一整行的位置。
高度發(fā)生變化
解決方法2-設(shè)置浮動(dòng)
通過(guò)將a標(biāo)簽設(shè)置為浮動(dòng)狀態(tài)，同樣可以改變其高度和寬度。
我們給a標(biāo)簽設(shè)置以下css樣式。
設(shè)置為浮動(dòng)元素
我們可以看出a標(biāo)簽的高度和寬度發(fā)生了變化，并且其占據(jù)的寬度和設(shè)置的width屬性一樣，與方法1呈現(xiàn)的不一樣。
改為浮動(dòng)元素
方法3-設(shè)置padding屬性
在設(shè)置padding屬性的時(shí)候，不能直接改變a標(biāo)簽的高度和寬度，實(shí)際是一種模擬的狀態(tài)。
而且需要注意的是在設(shè)置padding-top和padding-bottom時(shí)是不生效的，即使從控制臺(tái)看元素顯示占據(jù)了空間，但不會(huì)影響頁(yè)面的布局。因此在設(shè)置padding屬性時(shí)，實(shí)際只會(huì)影響到a標(biāo)簽的寬度。
我們給a標(biāo)簽設(shè)置以下padding屬性。
設(shè)置padding屬性
我們可以看出a標(biāo)簽占據(jù)的高度和寬度發(fā)生了變化，但是實(shí)際只是寬度占據(jù)的空間發(fā)生變化，高度不變。
設(shè)置padding屬性
結(jié)束語(yǔ)
今天這個(gè)簡(jiǎn)單的知識(shí)點(diǎn)：設(shè)置a標(biāo)簽的高度和寬度，大家都學(xué)會(huì)了嗎？
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
