html教程入門的a標簽使用方法，幫你理清邏輯，入門就是快

家好，我是江湖哥，今天分享html教程入門級的部分,大神請繞道，小白請點贊，哈哈，言歸正傳：

Html教程：a標簽

知識要點：

1. a標簽的概念

2. a標簽屬性

一：什么是a標簽？

a標簽的作用：就是用于控制頁面與頁面之間的跳轉的

a標簽的格式：<a href="指定要跳轉的目標界面的鏈接">需要展示給用戶看見的內容</a>

<a href="https://www.toutiao.com/">江湖哥博客</a>

二：a標簽的屬性

a標簽中有一個target屬性，這個屬性的作用就是專門用于控制如何跳轉

值

描述

_blank

于在新的選項卡中跳轉，也就是新建頁面跳轉

_self

默認。在當前選項卡中打開被鏈接文檔，也就是不新建頁面跳轉

_parent

在父框架集中打開被鏈接文檔。

_top

在整個窗口中打開被鏈接文檔。

framename

在指定的框架中打開被鏈接文檔。

<a href="https://www.toutiao.com/">可見內容</a>
<a href="https://www.toutiao.com/" target=”_blank”>江湖可見博客</a>

a標簽中還有一個屬性，叫做title，a標簽中的title和img標簽中title一樣，都是用來控制鼠標懸停時顯示的提示文本內容的

<a href="https://www.toutiao.com/" target="_blank" title="點擊會跳轉到可見博客首頁">可見</a>

設置 target 屬性時， top 與 parent 的打開方式十分類似，需仔細區分。

比如網 A 中鑲嵌了 iframe 網頁 B，網頁 B 又鑲嵌了 iframe 網頁C。

· 如果網頁 C 中連接設置 target=_parent，則跳轉到網頁 B 去掉直接在 A 中嵌入網頁 C 中鏈接頁面。

· 如果網頁 C 中 target=_top ，則直接跳出所有 iframe 框架，直接轉向 C 中鏈接頁面

注意點：

1.a標簽不僅可以讓文字可以點擊，還可以讓圖片也能夠被點擊。

2.一個a標簽必須有一個href屬性，否則a標簽不知道要跳轉到什么地方

3.如果通過a標簽的href屬性指定一個URL地址，那么必須在地址前面加上http://或https://。

4.a標簽的href屬性除了可以綁定一個網絡地址以外，還可以指定一個本地的地址

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>a標簽的使用</title>
</head>
<body>
		<a name="top"></a>
		<a href="https://www.toutiao.com/">a是控制界面也頁面的跳轉</a><br><br>
		<a href="https://www.toutiao.com/" target="_blank">跳轉到新窗口打開</a><br><br>

		<a href="#name1">錨點跳轉1</a>&nssp;&nssp;&nssp;<a href="#name2">錨點跳轉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>

		這是一個錨點跳轉文字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>

		這是一個錨點跳轉文字2 <a name="name2"></a>   <a href="#top">返回頂部</a>
</body>
</html>

關注我，點擊下面鏈接，即可看視頻

天我們來看下html中<a></a>的特點與功能

一 .a標簽是超鏈接標簽，首先我們說一下它的特點：

1.在網頁中默認會有下劃線

2.不會繼承父級的顏色樣式

效果圖

詳細代碼

其中，自帶的下劃線不美觀，但我們可以用以下代碼解決，ctrl+s保存后，下劃線就沒有了

去掉下劃線

二 .下面我們來看看a標簽的幾個功能：

1.跳轉頁面

href 屬性要跳轉頁面的地址（沒地址的情況下可以寫一個#）,即可以給網絡的地址也可以給本地的地址

target 屬性

值：_blank在新頁面打開

_self 在本頁面打開（默認的）

跳轉頁面功能

2.錨點

作用：網頁太長時，通過點擊頁面某一個導航，頁面直接到達該內容，網頁還是該網頁，只是向下自己滑動。

實現方法：在 href 的值里寫上#name,name對應id的值

下面是一個簡單例子，點擊顏色就會跳轉到相應顏色區域

錨點例子

3.下載

作用：實現網頁的下載功能

實現方法：在 href 里寫上文件的地址就可以了

注意：如果你要下載的文件瀏覽器能夠讀出來，那它就不會被下載，而是會被直接打開。如果就想讓瀏覽器下載所有文件，那就在a標簽里添加一個屬性download（ h5 新增屬性，不兼容IE低版本），它的值寫上文件的名字加后綴名

下載功能

三.此外，介紹一下a標簽的顏色，給a標簽換顏色也是會經常用到的，但是怎么改呢？

這里用到了“偽類”，偽類：針對元素的某種狀態添加的不同樣式

a :link 未訪問鏈接的（顏色）狀態

:visited訪問過的鏈接的（顏色）狀態

:hover鼠標移入（懸停）（顏色）狀態

:active鼠標按下不動時候的（顏色）狀態

改變a標簽顏色

今天的a標簽就介紹到這里，你學到了嗎？

言

由于前端所設計的領域太多，每篇文章所能講述的知識點太多，對于讀者來說不太好消化，因此以后基本是采用一篇文章一個知識點來寫作。

今天這篇文章主要講解css中a標簽的高度和寬度問題。

css

問題描述

在采用div+css的方式布局頁面時，對于超鏈接a標簽，無法設置其高度和寬度，即使對其設置了width和height屬性，也不會生效。

我們通過如下例子來看看。

給a標簽設置了如下css屬性。

css屬性

但是從下圖可以看出，a標簽的高度和寬度沒有發生變化，仍然是122px*22px。

實際效果

問題原因

為什么會出現這個情況呢？

因為a標簽屬于行內元素，行內元素是無法直接設置高度和寬度的。

遇到這個問題，我們該怎么解決呢，主要有以下幾個方法。

解決方法1-設置塊級元素

既然行內元素無法設置高度和寬度，那么我們將其設置為塊級元素呢？

我們對a標簽設置以下的樣式。

設置display:block

我們可以看出a標簽的高度和寬度發生了變化，而且在設置為塊級元素后，占據了一整行的位置。

高度發生變化

解決方法2-設置浮動

通過將a標簽設置為浮動狀態，同樣可以改變其高度和寬度。

我們給a標簽設置以下css樣式。

設置為浮動元素

我們可以看出a標簽的高度和寬度發生了變化，并且其占據的寬度和設置的width屬性一樣，與方法1呈現的不一樣。

改為浮動元素

方法3-設置padding屬性

在設置padding屬性的時候，不能直接改變a標簽的高度和寬度，實際是一種模擬的狀態。

而且需要注意的是在設置padding-top和padding-bottom時是不生效的，即使從控制臺看元素顯示占據了空間，但不會影響頁面的布局。因此在設置padding屬性時，實際只會影響到a標簽的寬度。

我們給a標簽設置以下padding屬性。

設置padding屬性

我們可以看出a標簽占據的高度和寬度發生了變化，但是實際只是寬度占據的空間發生變化，高度不變。

設置padding屬性

結束語

今天這個簡單的知識點：設置a標簽的高度和寬度，大家都學會了嗎？

在線咨詢

上一篇：中心醫院三級公立績效指標及醫療質控平臺
下一篇：快速上手React

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。