一.< img/>圖片標(biāo)簽
- 格式：
<img width="60%" src="xxx.jpg" alt="圖片替代文案"/>
-
作用：
<img/>用于告訴瀏覽器向網(wǎng)頁(yè)中嵌入一幅圖像。 - 常用屬性：
| 屬性 | 作用 |
|---|---|
src屬性 |
用于規(guī)定顯示圖像的 URL |
alt屬性 |
用于規(guī)定圖像的替代文本，即用于告訴瀏覽器當(dāng)需要顯示的圖片找不到時(shí)顯示什么內(nèi)容 |
title屬性 |
用于告訴瀏覽器鼠標(biāo)懸停在圖片上時(shí)在彈出的描述框中顯示什么內(nèi)容 |
width/height屬性 |
定義圖片的寬高 |
-
注意點(diǎn)：
1.<img/>圖片標(biāo)簽必須包含src屬性和alt屬性。
2.src的url地址既可以是一個(gè)網(wǎng)絡(luò)地址也可以是一個(gè)本地路徑地址。
3.當(dāng)我們沒(méi)有設(shè)置<img/>圖片標(biāo)簽的width/height屬性時(shí)系統(tǒng)使用圖片默認(rèn)大小。若設(shè)置了width/height屬性則可以改變圖片的寬高大小，但有可能會(huì)讓圖片變形，所以此時(shí)我們只需要選擇設(shè)置width/height屬性其中一個(gè)的值，則可以讓圖片等比放大或縮小且不會(huì)變形。
4.width/height屬性取值既可以是像素值也可以是相對(duì)于父容器的百分比。 -
title 和 alt的區(qū)別
1.title屬性用于鼠標(biāo)懸停在元素上時(shí)顯示的提示信息，alt用于圖像無(wú)法顯示時(shí)，顯示在瀏覽器上的替代文本。
2.title既可以用于<a>標(biāo)簽也可用于<img><p>等。而alt只能用于<img>標(biāo)簽。
二.< a>超鏈接標(biāo)簽
- 格式：
<a target="_blank" >百度</a>
-
作用：
<a>標(biāo)簽定義超鏈接，用于從一張頁(yè)面鏈接到另一張頁(yè)面。 - 常用屬性：
| 屬性 | 作用 |
|---|---|
href屬性 |
規(guī)定鏈接指向的頁(yè)面的 URL |
target屬性 |
規(guī)定在何處打開(kāi)鏈接文檔 |
title屬性 |
用于告訴瀏覽器鼠標(biāo)懸停在鏈接上時(shí)在彈出的描述框中顯示什么內(nèi)容 |
- target屬性取值
| target取值： | 作用 |
|---|---|
| _self | 默認(rèn)，目標(biāo)地址在當(dāng)前選項(xiàng)卡打開(kāi)，替換當(dāng)前頁(yè)面。 |
| _blank | 目標(biāo)地址在新的選項(xiàng)卡打開(kāi)。 |
| _parent | 目標(biāo)地址在在父框架中打開(kāi)。 |
| _top | 目標(biāo)地址在在最頂層打開(kāi)。 |
| framename | 目標(biāo)地址在在新窗口打開(kāi)。 |
-
注意點(diǎn)：
1.開(kāi)始標(biāo)簽與結(jié)束標(biāo)簽之間是超鏈接顯示給用戶的信息，既可以是文字也可以是圖片，所以用戶既可以通過(guò)點(diǎn)擊文字鏈接也可以通過(guò)點(diǎn)擊圖片跳轉(zhuǎn)界面。
2.一個(gè)< a>標(biāo)簽必須要有一個(gè)href屬性。否則鏈接不知道跳轉(zhuǎn)到什么地方。href屬性的取值既可以是一個(gè)網(wǎng)絡(luò)地址，也可以是一個(gè)本地地址。
3.< a>標(biāo)簽中的title屬性與<img/>圖片標(biāo)簽中的title屬性一樣，也是用來(lái)當(dāng)鼠標(biāo)懸停在連接上時(shí)顯示提示文件信息。
三.與< a>標(biāo)簽相關(guān)的< base>標(biāo)簽
- 格式：
<head>
<base target="_blank" />
<base href="http://www.baidu.com /">
</head>
-
作用：
專門用來(lái)統(tǒng)一為頁(yè)面上的所有鏈接規(guī)定默認(rèn)地址或默認(rèn)目標(biāo)。 -
注意點(diǎn)：
1.< base>標(biāo)簽必須寫在< head>標(biāo)簽中。
2.< base>標(biāo)簽可以指定包括< a>、< img>、< link>、< form>標(biāo)簽中的 URL。
3.若超鏈接需要跳轉(zhuǎn)的要求不同，則可在該鏈接< a>標(biāo)簽中單獨(dú)設(shè)置屬性。瀏覽器會(huì)優(yōu)先按照< a>標(biāo)簽指定執(zhí)行。
四.假鏈接
-
定義
點(diǎn)擊之后不會(huì)跳轉(zhuǎn)的鏈接我們稱其為假鏈接。 -
格式：
點(diǎn)擊后跳轉(zhuǎn)到頁(yè)面頂部：
<a href="#">點(diǎn)擊回到頂部</a>
點(diǎn)擊后不會(huì)跳轉(zhuǎn)：
<a href="javascript:">點(diǎn)擊無(wú)反應(yīng)</a>
-
作用：
1.一個(gè)頁(yè)面過(guò)長(zhǎng)時(shí)底部設(shè)置空標(biāo)簽可直接回到頁(yè)面頂部。
2.在企業(yè)開(kāi)發(fā)前期，我們編寫HTML代碼時(shí)可能其它頁(yè)面還沒(méi)有寫出來(lái)，這時(shí)網(wǎng)頁(yè)中的超鏈接我們就不會(huì)知道它要跳轉(zhuǎn)到哪個(gè)地方，所以只能用假鏈接暫時(shí)代替。等其它頁(yè)面完成時(shí)，再把假鏈接換成真鏈接。
五.錨點(diǎn)
-
定義：
錨點(diǎn)是網(wǎng)頁(yè)制作中超級(jí)鏈接的一種，又叫錨記。錨記像一個(gè)迅速定位器一樣是一種頁(yè)面內(nèi)的超級(jí)鏈接，運(yùn)用相當(dāng)普遍。 -
格式：
跳轉(zhuǎn)到當(dāng)前頁(yè)面指定位置：
<h2 id="center">本頁(yè)面的h2標(biāo)題</h2>
<a href="#center">跳轉(zhuǎn)到本頁(yè)面的h2標(biāo)題處</a>
跳轉(zhuǎn)到其它頁(yè)面指定位置：
<h2 id="end">123.html頁(yè)面的h2標(biāo)題</h2>
<a href="123.html#end" target="_blank">跳轉(zhuǎn)到123.html頁(yè)面的h2標(biāo)題處</a>
-
作用：
當(dāng)一個(gè)頁(yè)面太長(zhǎng)，文本信息量非常大時(shí)，我們有時(shí)需要在頁(yè)面前面把頁(yè)面中所有段落的目錄單獨(dú)列出來(lái)做成鏈接方便用戶查看。此時(shí)用戶就可以點(diǎn)擊目錄鏈接直接跳轉(zhuǎn)到鏈接相對(duì)應(yīng)的文本處。 -
注意點(diǎn)：
1.由于我們需要跳轉(zhuǎn)的目標(biāo)位置標(biāo)簽屬性都一樣，比如都是用<h2>標(biāo)簽包裹的標(biāo)題。這時(shí)我們需要給跳轉(zhuǎn)目標(biāo)標(biāo)簽設(shè)置一個(gè)id名，然后才能在鏈接中的href屬性取值中加入對(duì)應(yīng)的id名，這樣才能準(zhǔn)確的跳轉(zhuǎn)。
2.< a>標(biāo)簽既可以跳轉(zhuǎn)到當(dāng)前頁(yè)面的指定位置，也可以跳轉(zhuǎn)到其它頁(yè)面的制定位置。通過(guò)設(shè)置target屬性可以選擇在本選項(xiàng)卡跳轉(zhuǎn)，也可以選擇在新的選項(xiàng)卡跳轉(zhuǎn)。
3.錨點(diǎn)的跳轉(zhuǎn)都是直接跳轉(zhuǎn)，中間無(wú)漸變屬性（頁(yè)面的滾動(dòng)過(guò)程）。
六.src與href有什么區(qū)別
-
src屬性：
1.src是source的縮寫，指向外部資源的位置，指向的內(nèi)容將會(huì)嵌入到文檔中當(dāng)前標(biāo)簽所在的位置。在請(qǐng)求src資源時(shí)會(huì)將其指向的資源下載并應(yīng)用到文檔中。如js腳本、img圖片和frame等元素。
2.例如：<script src=".js"></script>當(dāng)瀏覽器解析到該元素時(shí)，會(huì)暫停其他資源的下載和處理，直到該元素加載、編譯和執(zhí)行結(jié)束。因此js腳本應(yīng)放在底部而非頭部。 -
href屬性：
1.href是hypertext reference的縮寫。指向網(wǎng)絡(luò)資源所在的位置。用于在當(dāng)前文檔與引用資源之間確立聯(lián)系。
2.例如:<link href=".css" rel="stylesheet"/>瀏覽器會(huì)識(shí)別該文件是css文件，就會(huì)并行下載資源并且不會(huì)停止對(duì)當(dāng)前文檔的處理。
注：本段內(nèi)容出處鏈接
七.< iframe>標(biāo)簽
- 格式
插入另一個(gè)html文件
<iframe src="page.html"></iframe>
當(dāng)前頁(yè)面插入百度
<iframe src="http://www.baidu.com" name="myPage"></iframe>
點(diǎn)擊鏈接會(huì)在當(dāng)前頁(yè)面顯示W(wǎng)3C網(wǎng)站
<p><a target="myPage">W3C</a></p>
-
作用
iframe元素會(huì)創(chuàng)建包含另外一個(gè)文檔的內(nèi)聯(lián)框架（即行內(nèi)框架）。就是在一個(gè)頁(yè)面中嵌入另一個(gè)網(wǎng)頁(yè)。
八.引入文件的路徑問(wèn)題
-
路徑問(wèn)題的產(chǎn)生
當(dāng)我們使用src屬性和href屬性給當(dāng)前的HTML文件引入文件時(shí)，有時(shí)使用的是被引入目標(biāo)文件的網(wǎng)絡(luò)地址URL，此時(shí)只需要給src屬性和href屬性添加該文件的網(wǎng)絡(luò)地址即可，但有時(shí)我們也需要引入本地文件，那么怎么給src屬性和href屬性賦值，這就出現(xiàn)了路徑問(wèn)題。一般情況下引入本地目標(biāo)文件的地址有以下兩種方式： -
相對(duì)路徑與絕對(duì)路徑
相對(duì)路徑賦值：
1.同級(jí)
目標(biāo)文件與HTML文件處于同一個(gè)文件夾，二者是同級(jí)關(guān)系。用./目標(biāo)文件名表示當(dāng)前目錄，或者直接省略./也可。
格式：
<a href="./目標(biāo)文件名">文本</a> 或 <a href="目標(biāo)文件名">文本</a>
<img src="./目標(biāo)文件名" /> 或 <img src="目標(biāo)文件名" />
2.下級(jí)
目標(biāo)文件所在的文件夾與HTML文件處于同一個(gè)文件夾，目標(biāo)文件就是HTML文件的下級(jí)關(guān)系。用目標(biāo)文件夾名/目標(biāo)文件名表示。若目標(biāo)文件藏的比較深在下下級(jí)，則文件夾的名字可以一直往下延伸到找到目標(biāo)文件為止。
格式：
<a href="目標(biāo)文件夾名/目標(biāo)文件名">文本</a>
<img src="目標(biāo)文件夾名/目標(biāo)文件名" />
3.上級(jí)
目標(biāo)文件與HTML文件所在的文件夾處于同一個(gè)文件夾，目標(biāo)文件就是HTML文件的上級(jí)關(guān)系。用../目標(biāo)文件名表示。以此類推若是上上級(jí)就是../../目標(biāo)文件名
格式：
<a href="../../目標(biāo)文件名">文本</a>
<img src="../../目標(biāo)文件名" />
4.上下級(jí)搭配使用
例如目標(biāo)文件所在的文件夾在HTML文件的上上級(jí)，則我們可以先通過(guò)../../找到目標(biāo)文件所在的文件夾，然后再通過(guò)下級(jí)目標(biāo)文件夾名/目標(biāo)文件名找到目標(biāo)文件。
格式：
<a href="../../目標(biāo)文件夾名/目標(biāo)文件名">文本</a>
<img src="../../目標(biāo)文件夾名/目標(biāo)文件名" />
絕對(duì)對(duì)路徑賦值：
直接從指定的盤符開(kāi)始查找一直找到目標(biāo)文件。用/表示當(dāng)前磁盤根目錄
格式：
<a href="/目標(biāo)文件名">文本</a>
<img src="/目標(biāo)文件名" />
-
注意點(diǎn)：
1.路徑中盡量不要出現(xiàn)中文。即文件夾的名字盡量不要使用中文，因?yàn)榭赡軙?huì)照成不可預(yù)知的問(wèn)題。
2.用斜杠符號(hào)/時(shí)盡量統(tǒng)一標(biāo)準(zhǔn)用/，不要使用\.反斜杠。因?yàn)殚_(kāi)發(fā)中代碼可能會(huì)放到服務(wù)器上，而服務(wù)器統(tǒng)一標(biāo)準(zhǔn)都用的/。
3.一般在開(kāi)發(fā)中路徑使用最多的是相對(duì)路徑中的同級(jí)或下級(jí)。絕對(duì)路徑幾乎不會(huì)用到。因?yàn)榻^對(duì)路徑的可移植性不好，如代碼需要換個(gè)地方儲(chǔ)存時(shí)，利用當(dāng)前磁盤來(lái)賦值的絕對(duì)路徑就會(huì)失效。
4.不能夸盤符查找目標(biāo)文件。
*** 此文章著作權(quán)由饑人谷_劉沖和饑人谷(QQ 群: 222459918) 所有。轉(zhuǎn)載須說(shuō)明來(lái)源。***
