一.< img/>圖片標(biāo)簽
- 格式：
<img width="60%" src="xxx.jpg" alt="圖片替代文案"/>
-
作用：
<img/>用于告訴瀏覽器向網(wǎng)頁中嵌入一幅圖像倒脓。 - 常用屬性：
| 屬性 | 作用 |
|---|---|
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)我們沒有設(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用于圖像無法顯示時(shí)，顯示在瀏覽器上的替代文本泪姨。
2.title既可以用于<a>標(biāo)簽也可用于<img><p>等游沿。而alt只能用于<img>標(biāo)簽。
二.< a>超鏈接標(biāo)簽
- 格式：
<a target="_blank" >百度</a>
-
作用：
<a>標(biāo)簽定義超鏈接肮砾，用于從一張頁面鏈接到另一張頁面诀黍。 - 常用屬性：
| 屬性 | 作用 |
|---|---|
href屬性 |
規(guī)定鏈接指向的頁面的 URL |
target屬性 |
規(guī)定在何處打開鏈接文檔 |
title屬性 |
用于告訴瀏覽器鼠標(biāo)懸停在鏈接上時(shí)在彈出的描述框中顯示什么內(nèi)容 |
- target屬性取值
| target取值： | 作用 |
|---|---|
| _self | 默認(rèn)，目標(biāo)地址在當(dāng)前選項(xiàng)卡打開唇敞，替換當(dāng)前頁面蔗草。 |
| _blank | 目標(biāo)地址在新的選項(xiàng)卡打開咒彤。 |
| _parent | 目標(biāo)地址在在父框架中打開疆柔。 |
| _top | 目標(biāo)地址在在最頂層打開咒精。 |
| framename | 目標(biāo)地址在在新窗口打開。 |
-
注意點(diǎn)：
1.開始標(biāo)簽與結(jié)束標(biāo)簽之間是超鏈接顯示給用戶的信息旷档，既可以是文字也可以是圖片模叙，所以用戶既可以通過點(diǎn)擊文字鏈接也可以通過點(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屬性一樣渠啊，也是用來當(dāng)鼠標(biāo)懸停在連接上時(shí)顯示提示文件信息。
三.與< a>標(biāo)簽相關(guān)的< base>標(biāo)簽
- 格式：
<head>
<base target="_blank" />
<base href="http://www.baidu.com /">
</head>
-
作用：
專門用來統(tǒng)一為頁面上的所有鏈接規(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)到頁面頂部：
<a href="#">點(diǎn)擊回到頂部</a>
點(diǎn)擊后不會(huì)跳轉(zhuǎn)：
<a href="javascript:">點(diǎn)擊無反應(yīng)</a>
-
作用：
1.一個(gè)頁面過長(zhǎng)時(shí)底部設(shè)置空標(biāo)簽可直接回到頁面頂部典唇。
2.在企業(yè)開發(fā)前期，我們編寫HTML代碼時(shí)可能其它頁面還沒有寫出來胯府，這時(shí)網(wǎng)頁中的超鏈接我們就不會(huì)知道它要跳轉(zhuǎn)到哪個(gè)地方介衔，所以只能用假鏈接暫時(shí)代替。等其它頁面完成時(shí)盟劫，再把假鏈接換成真鏈接夜牡。
五.錨點(diǎn)
-
定義：
錨點(diǎn)是網(wǎng)頁制作中超級(jí)鏈接的一種，又叫錨記侣签。錨記像一個(gè)迅速定位器一樣是一種頁面內(nèi)的超級(jí)鏈接塘装，運(yùn)用相當(dāng)普遍。 -
格式：
跳轉(zhuǎn)到當(dāng)前頁面指定位置：
<h2 id="center">本頁面的h2標(biāo)題</h2>
<a href="#center">跳轉(zhuǎn)到本頁面的h2標(biāo)題處</a>
跳轉(zhuǎn)到其它頁面指定位置：
<h2 id="end">123.html頁面的h2標(biāo)題</h2>
<a href="123.html#end" target="_blank">跳轉(zhuǎn)到123.html頁面的h2標(biāo)題處</a>
-
作用：
當(dāng)一個(gè)頁面太長(zhǎng)影所，文本信息量非常大時(shí)蹦肴，我們有時(shí)需要在頁面前面把頁面中所有段落的目錄單獨(dú)列出來做成鏈接方便用戶查看。此時(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)前頁面的指定位置，也可以跳轉(zhuǎn)到其它頁面的制定位置议忽。通過設(shè)置target屬性可以選擇在本選項(xiàng)卡跳轉(zhuǎn)懒闷，也可以選擇在新的選項(xiàng)卡跳轉(zhuǎn)。
3.錨點(diǎn)的跳轉(zhuǎn)都是直接跳轉(zhuǎn)栈幸，中間無漸變屬性（頁面的滾動(dòng)過程）愤估。
六.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)前頁面插入百度
<iframe src="http://www.baidu.com" name="myPage"></iframe>
點(diǎn)擊鏈接會(huì)在當(dāng)前頁面顯示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è)頁面中嵌入另一個(gè)網(wǎng)頁秃流。
八.引入文件的路徑問題
-
路徑問題的產(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)了路徑問題嚣伐。一般情況下引入本地目標(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í)醋火，則我們可以先通過../../找到目標(biāo)文件所在的文件夾悠汽，然后再通過下級(jí)目標(biāo)文件夾名/目標(biāo)文件名找到目標(biāo)文件箱吕。
格式：
<a href="../../目標(biāo)文件夾名/目標(biāo)文件名">文本</a>
<img src="../../目標(biāo)文件夾名/目標(biāo)文件名" />
絕對(duì)對(duì)路徑賦值：
直接從指定的盤符開始查找一直找到目標(biāo)文件。用/表示當(dāng)前磁盤根目錄
格式：
<a href="/目標(biāo)文件名">文本</a>
<img src="/目標(biāo)文件名" />
-
注意點(diǎn)：
1.路徑中盡量不要出現(xiàn)中文柿冲。即文件夾的名字盡量不要使用中文茬高，因?yàn)榭赡軙?huì)照成不可預(yù)知的問題。
2.用斜杠符號(hào)/時(shí)盡量統(tǒng)一標(biāo)準(zhǔn)用/假抄，不要使用\.反斜杠怎栽。因?yàn)殚_發(fā)中代碼可能會(huì)放到服務(wù)器上，而服務(wù)器統(tǒng)一標(biāo)準(zhǔn)都用的/宿饱。
3.一般在開發(fā)中路徑使用最多的是相對(duì)路徑中的同級(jí)或下級(jí)熏瞄。絕對(duì)路徑幾乎不會(huì)用到。因?yàn)榻^對(duì)路徑的可移植性不好谬以，如代碼需要換個(gè)地方儲(chǔ)存時(shí)强饮，利用當(dāng)前磁盤來賦值的絕對(duì)路徑就會(huì)失效。
4.不能夸盤符查找目標(biāo)文件为黎。
*** 此文章著作權(quán)由饑人谷_劉沖和饑人谷(QQ 群: 222459918) 所有邮丰。轉(zhuǎn)載須說明來源。***
