注意點(diǎn)：

• 路徑問(wèn)題
• 相對(duì)路徑如果是查找上級(jí)烂完，有可能運(yùn)行會(huì)不顯示膏斤，可以直接打開(kāi)文件查看
• 絕對(duì)路徑不要出現(xiàn)中文名稱
• 一般企業(yè)開(kāi)發(fā)中不適用絕對(duì)路徑俊扭，可移植性比較差

HTML注釋(Annotation)

• 什么是注釋?

• 注釋是在所有計(jì)算機(jī)語(yǔ)言中都非常重要的一個(gè)概念已添，從字面上看朝巫，就是注解鸿摇、解釋的意思

• 注釋可以用來(lái)解釋某一段程序或者某一行代碼是什么意思，方便直接或程序員之間的交流

• 為什么要使用注釋?

• 適當(dāng)?shù)淖⑨尯赐幔軌蜃屛覀兊某绦蚋涌勺x户辱，所以用中文提示自己，這里的程序是干什么的

• 注釋格式

<!--被注釋的內(nèi)容-->

• 注意點(diǎn):

  • 被注釋的內(nèi)容不會(huì)在瀏覽器中顯示, 注釋是寫(xiě)給我們自己看的
  • 注釋不能嵌套使用

<!--<!--被注釋的內(nèi)容-->-->

• 快捷鍵: ctrl + /

img標(biāo)簽(image)

• 作用: 在網(wǎng)頁(yè)上插入一張圖片

• 格式:

![](圖片路徑)

• 標(biāo)簽的屬性

  寫(xiě)在標(biāo)簽中K="V"這種格式的文本我們稱之為標(biāo)簽屬性

Paste_Image.png

• 注意點(diǎn):

• img標(biāo)簽添加的圖片默認(rèn)不是占一整行空間

• 如果想讓圖片等比拉伸, 只寫(xiě)高度或者寬度即可

br標(biāo)簽(Break)

• 作用:

• 讓內(nèi)容換行

• 格式:

<br/>

• 注意點(diǎn):

• br的意思是不另起一個(gè)段落進(jìn)行換行, 而網(wǎng)頁(yè)中99.99%需要換行時(shí)都是因?yàn)榱砥鹆艘粋€(gè)段落, 所以應(yīng)該用p來(lái)做

相對(duì)路徑和絕對(duì)路徑

• 圖片路徑分為兩種, 一種是絕對(duì)路徑, 一種是相對(duì)路徑, 我們重點(diǎn)學(xué)習(xí)相對(duì)路徑, 因?yàn)樵谄髽I(yè)級(jí)開(kāi)發(fā)中沒(méi)有人使用絕對(duì)路徑

• 絕對(duì)路徑

• 從電腦的具體盤(pán)符開(kāi)始尋找我們需要的資源

![](C:\作業(yè)\code\user/1.png)

• 相對(duì)路徑

• 一個(gè)文件相對(duì)于另外一個(gè)文件的位置尋找我們需要的資源

 ![](images/1.png)

• 同級(jí)

  • 直接編寫(xiě), 例如: girl.png
  • 加上./ 編寫(xiě), 例如./girl.png
  • ./代表當(dāng)前目錄, ./girl.png代表在當(dāng)前目錄下查找

• 下級(jí)

• 直接編寫(xiě), 例如abc/girl.png

• 加上./ 編寫(xiě), 例如./abc/girl.png

• 相對(duì)當(dāng)前目錄有幾個(gè)文件夾,就在后面依次補(bǔ)全幾個(gè)文件夾名稱即可, 例如 abc/bbb/ccc/ddd/girl.png或./abc/bbb/ccc/ddd/girl.png

• 上級(jí)

• ../代表訪問(wèn)上級(jí)目錄

• 假設(shè)a文件夾下面有b文件夾, 圖片存放在a文件夾中, html文件存放在b文件夾中, 那么路徑為../girl.png
  因?yàn)閔tml文件在b文件夾中, 所以路徑是相對(duì)于b文件夾的, 所以../代表訪問(wèn)b文件夾的上一級(jí)目錄, b文件夾的上一級(jí)目錄是a文件夾, 所以../girl.png就代表在a文件夾查找girl.png
  注意事項(xiàng):

• 注意事項(xiàng):

• 相對(duì)路徑不會(huì)出現(xiàn)這種格式aaa/../bbb/girl.png

• 雖然可以顯示, 但是企業(yè)開(kāi)發(fā)中千萬(wàn)不要這么寫(xiě)

a標(biāo)簽(anchor)

• 格式:

 <a >百度</a>

• 作用: 用于從一個(gè)頁(yè)面鏈接到另一個(gè)頁(yè)面

• 注意事項(xiàng):

• 在a標(biāo)簽之間一定要寫(xiě)上文字, 如果沒(méi)有, 那么在頁(yè)面上找不到這個(gè)標(biāo)簽

• a標(biāo)簽也叫做超級(jí)鏈接或超鏈接

• a標(biāo)簽的屬性

Paste_Image.png

• base標(biāo)簽和a標(biāo)簽結(jié)合使用
  如果每個(gè)a標(biāo)簽都想在新頁(yè)面中打開(kāi),那么逐個(gè)設(shè)置a標(biāo)簽的target屬性比較麻煩, 這時(shí)我們可以使用base和a標(biāo)簽結(jié)合的方式,一次性設(shè)置有a標(biāo)簽都在新頁(yè)面中打開(kāi)
• 格式:

<base target="_blank" />

• 注意事項(xiàng):
• base必須嵌套在head標(biāo)簽里面
• 如果標(biāo)簽上指定了target,base中也指定了target,那么會(huì)按照標(biāo)簽上指定的來(lái)執(zhí)行

a標(biāo)簽其它用法

• 假鏈接(本質(zhì)是跳轉(zhuǎn)到當(dāng)前頁(yè)面)
• 格式

• 格式

• 跳轉(zhuǎn)到當(dāng)前頁(yè)面指定位置(錨點(diǎn)鏈接)
  2.1.格式

<a href="#location">跳轉(zhuǎn)到指定位置</a>

• 2.2.在頁(yè)面的指定位置給任意標(biāo)簽添加一個(gè)id屬性
  例如

<p id="location">這個(gè)是目標(biāo)</p>

• 跳轉(zhuǎn)到指定頁(yè)面的指定位置

格式:

<a href="01-錨點(diǎn)鏈接.html#location">跳轉(zhuǎn)到指定位置</a>

只需要在01-錨點(diǎn)鏈接.html頁(yè)面添加一個(gè)id位置即可

• 下載(極力不推薦使用)
  例如<a href="girl.zip">下載福利資源<a/>

列表標(biāo)簽

無(wú)序列表(unordered list)

• 作用: 給一堆內(nèi)容添加無(wú)序列表語(yǔ)義(一個(gè)沒(méi)有先后順序整體), 列表中的條目是不分先后
• 格式:

Paste_Image.png

li 英文是 list item, 翻譯為列表項(xiàng)

• ul應(yīng)用場(chǎng)景:

• 導(dǎo)航條

• 商品列表等

• 新聞列表

• 注意事項(xiàng):
• 這里指的無(wú)序是指對(duì)于主體來(lái)說(shuō)內(nèi)容沒(méi)有先后之分, 例如主題是"選擇居住城市(CN)"北京上海都是中國(guó)的城市, 無(wú)論誰(shuí)放在前面它都還是中國(guó)的城市的. 如果標(biāo)題改為"中國(guó)霧霾排行", 那么就必須有嚴(yán)格的排名,北京必須寫(xiě)在前面
• 瀏覽器會(huì)給無(wú)需列表自動(dòng)添加先導(dǎo)符號(hào)但是一定一定千萬(wàn)千萬(wàn)要記住, ul的作用并不是給文字添加小圓點(diǎn), 而是增加無(wú)序列表的語(yǔ)義
  • 其實(shí)ul還有一個(gè)type屬性, 可以修改先導(dǎo)符號(hào)的樣式, 取值有disc糙臼、square庐镐、circle幾種
    但是由于樣式將來(lái)都是通過(guò)css來(lái)完成, 所以這里就不給大家介紹了
    ul是一個(gè)組標(biāo)簽, 一定是一坨一坨的出現(xiàn), 也就是說(shuō)li標(biāo)簽不能單獨(dú)存在, 必須包裹在ul里面
  • 由于ul和li是一個(gè)整體, 所以u(píng)l里面不推薦包裹其它標(biāo)簽, 永遠(yuǎn)記住ul里面最好只寫(xiě)li標(biāo)簽
  • 雖然ul中推薦只能寫(xiě)li標(biāo)簽, 但是li標(biāo)簽是一個(gè)容器標(biāo)簽, li標(biāo)簽中可以添加任意標(biāo)簽,
    甚至可以添加ul標(biāo)簽

Paste_Image.png