欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

HTML5超鏈接的創(chuàng)建方法

  發(fā)布時間：2025-02-17 16:01:29   作者：小知閑閑   我要評論
本文介紹了HTML5超鏈接的創(chuàng)建方法,包括基本語法、創(chuàng)建圖像超鏈接的邊框去除方法以及錨點(diǎn)鏈接的使用,還討論了超鏈接的四種不同狀態(tài)（link、visited、hover、active）的CSS樣式控制，感興趣的朋友一起看看吧

       超鏈接是網(wǎng)頁中最常用的元素，每個網(wǎng)頁通過超鏈接關(guān)聯(lián)在一起，構(gòu)成一個完整的網(wǎng)站。超鏈接可以是網(wǎng)頁中的任何元素，只有通過超鏈接定義的對象，才能再單擊后進(jìn)行跳轉(zhuǎn)。

一、創(chuàng)建超鏈接

1、用<a></a>標(biāo)簽環(huán)繞需要被鏈接的對象。

1>、基本語法格式：<a href="跳轉(zhuǎn)目標(biāo)" target="目標(biāo)窗口彈出方式">文本或圖像</a>

        i、href：用于指定鏈接目標(biāo)的url（網(wǎng)址）地址，當(dāng)<a>標(biāo)簽應(yīng)用href屬性時，他就具有了超鏈接功能。

        ii、target：用于指定鏈接打開方式，_self為原窗口打開，_blank為新窗口打開。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>超鏈接</title>
</head>
<body>
	<a  target="_self">站酷</a> target="_self"原窗口打開<br/>
	<a  target="_blank">百度</a> target="_blank"新窗口打開<br/>
</body>
</html>

ps:1、超鏈接標(biāo)簽本身帶有默認(rèn)顯示樣式。

2、暫時沒有鏈接目標(biāo)時，href的屬性值可定義為“#”，意為空鏈接。

2>、圖像超鏈接出現(xiàn)邊框解決辦法：

        創(chuàng)建圖像超鏈接時，在某些瀏覽中，圖像會自動添加邊框效果，影響頁面美觀。去掉邊框最直接的方法是將邊框設(shè)置為0，具體代碼如下：

        <a href="#"><img src="圖像url"   border="0"/></a>

二、錨點(diǎn)鏈接

        通過創(chuàng)建錨點(diǎn)鏈接，用戶能夠直接跳到指定位置的內(nèi)容，提高信息檢索速度。

1、基本語法格式：<a href="#id名">內(nèi)容</a>

2、href="#id名"，只要單擊創(chuàng)建了超鏈接的對象就會跳到指定位置。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>錨點(diǎn)鏈接</title>
</head>
<body>
	<ul>
		<li><a href="#one">李四光</a></li>
		<li><a href="#two">袁隆平</a></li>
		<li><a href="#three">屠呦呦</a></li>
		<li><a href="#four">南仁東</a></li>
		<li><a href="#five">孫家棟</a></li>
	</ul>
	<h3 id="one">李四光</h3>
	<p>李四光1889年出生于湖北黃岡，是中國地質(zhì)力學(xué)的創(chuàng)立者、現(xiàn)代地球科學(xué)和地質(zhì)工作的奠基人。</p>
	<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
	<h3 id="two">袁隆平</h3>
	<p>袁隆平1930年出生于北京，被譽(yù)為“世界雜交水稻之父”。發(fā)明了“三系法”秈型雜交水稻，“兩系法”雜交水稻。</p>
	<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
	<h3 id="three">屠呦呦</h3>
	<p>屠呦呦1930年出生于浙江寧波，是中國第一位獲得諾貝爾科學(xué)獎的本土科學(xué)家，也是第一位獲得諾貝爾醫(yī)學(xué)獎的華人科學(xué)家。</p>
	<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
	<h3 id="four">南仁東</h3>
	<p>南仁東1945年出生于吉林遼源，被譽(yù)為中國“天眼之父”。擔(dān)任FAST工程首席科學(xué)家兼總工程師。</p>
	<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
	<h3 id="five">孫家棟</h3>
	<p>孫家棟1929年出生于遼寧瓦房店，被譽(yù)為中國航天的“大總師”，“中國衛(wèi)星之父”。</p>
</body>
</html>

三、鏈接偽類控制超鏈接

1、超鏈接的四種不同狀態(tài)：

超鏈接標(biāo)簽<a>的偽類描述
a:link{CSS樣式規(guī)則；}超鏈接默認(rèn)樣式
a:visited{CSS樣式規(guī)則；}超鏈接被訪問之后的樣式
a:hover{CSS樣式規(guī)則；}鼠標(biāo)指針經(jīng)過、懸停時超鏈接的樣式
a:active{CSS樣式規(guī)則；}鼠標(biāo)單擊不放時超鏈接的樣式

ps：4種偽類順序也需按上表排列，否則定義樣式可能不起作用。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>鏈接偽類選擇器</title>
	<style type="text/css">
		a{margin-right: :20px;}/*設(shè)置右邊距為20px*/
		a:link,a:visited{
			color:#000;        /*設(shè)置默認(rèn)和被訪問之后的顏色為黑色*/
			text-decoration:none;   /*設(shè)置<a>自帶下劃線效果為無*/
		}
		a:hover{
			color:#093;       /*默認(rèn)樣式顏色為綠色*/
			text-decoration: underline; /*設(shè)置鼠標(biāo)指針懸停時顯示下劃線*/
		}
		a:active{color:#FC0;}    /*設(shè)置鼠標(biāo)單擊不放時顏色為黃色*/
	</style>
</head>
<body>
	<a href="#">公司首頁</a>
	<a href="#">公司簡介</a>
	<a href="#">產(chǎn)品介紹</a>
	<a href="#">聯(lián)系我們</a>
</body>
</html>

到此這篇關(guān)于HTML5超鏈接的創(chuàng)建的文章就介紹到這了,更多相關(guān)HTML5超鏈接的創(chuàng)建內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論