注釋
格式 ``````
<!--下面一行代碼, 代表著告訴瀏覽器鄭伊健這三個字是標(biāo)題-->
<h1>鄭伊健</h1>
快捷鍵:ctrl + /
img 標(biāo)簽
img 是 Image 的縮寫
作用:告訴瀏覽器我們需要顯示一張圖片
img 標(biāo)簽的格式
<img src="">**
img 標(biāo)簽中的 src 是英文 source 的縮寫
所以 img 標(biāo)簽中的 src 就是用來告訴 img 標(biāo)簽,需要顯示的圖片名稱
注意點
- img 不獨占一行
- 如果我們手動指定了 img 標(biāo)簽顯示圖片的寬度和高度,有可能會導(dǎo)致圖片變形,那么如果又想指定寬高,又不想圖片變形,我們可以指定寬度和高度其中一個值
- 只要指定了高度,系統(tǒng)會自動根據(jù)告訴計算出寬度,等比拉伸不會變形
img 中的其他屬性
width 寬度
height 高度
<img src=""* width="211">*這兩個屬性用來告訴 Img 標(biāo)簽將來顯示的圖片有多寬有多高,如果 img 標(biāo)簽沒有指定需要顯示的圖片的寬高,那么系統(tǒng)會按照圖片默認(rèn)的寬高來顯示;如果 img 標(biāo)簽指定了寬高,那么系統(tǒng)會按照指定的寬高來顯示
title: 用于告訴瀏覽器,當(dāng)鼠標(biāo)懸停在圖片上時需要在彈出的描述框中顯示什么內(nèi)容
<img src=""* title="這是什么圖片">*alt 其實時英文 alternate 的縮寫,它的作用就是用于告訴瀏覽器,當(dāng)需要顯示的圖片找不到時顯示什么內(nèi)容
<img alt="這沒有圖片">
br 標(biāo)簽
br 標(biāo)簽的作用: 換行
br 標(biāo)簽的格式: <br>
br 標(biāo)簽的注意點
- 多個 br 標(biāo)簽可以連續(xù)使用,使用了多少個 br 標(biāo)簽就會換多少行
- 由于 html 的作用就是用來給文本添加語義,而 br 標(biāo)簽的語義是不另起一個段落換行,而在企業(yè)開發(fā)中一般情況下需要換行都是因為需要另起段落,所以在企業(yè)開發(fā)中很少使用 br 標(biāo)簽
路徑問題
想給 src 賦值有兩種方式
- 通過相對路徑賦值(掌握),相對路徑就是每次都從 .html 文件所在的文件夾開始查找,我們稱之為相對路徑
- 同級
同級就是“圖片”和“ .html 文件”存儲在同一個文件夾中
格式:
src="QRCode.jpg"
含義:
在 .html 文件所在的文件夾中查找名稱叫做 QRCode.jpg 的圖片 - 下級
下級就是“存儲圖片的文件夾”和“ . html 文件” 在同一個文件夾中
格式:
src="images/QRCode.jpg"
含義:
在 .html 文件所在的文件夾中找到名稱叫做 images 的文件夾 然后再在 Images 文件夾中找到名稱叫做 QRCode.jpg 的圖片 - 上級
上級就是“存儲圖片的位置”和“存儲代碼的文件夾”在同一個文件夾中
格式:
src="../QRCode.jpg"
含義:
在 .html 文件所在的文件夾中找到這個文件夾的上一級文件夾,然后再在上一級文件夾中找到名稱叫做
QRCode.jpg 其中 ../ 代表找到當(dāng)前文件夾的上一級文件夾 - 通過絕對路徑賦值(了解)
絕對路徑就是每次都從指定的盤符開始查找
格式:
src="C:\Users\Jonathan_Lee\Desktop\HTML基礎(chǔ)\QRCode.jpg"
含義:在 C 盤下找到 Users文件夾,然后在 Users 文件夾中找到 Jonathan_Lee 文件夾,然后在 Jonathan_Lee 文件夾中找到 Desktop 文件夾,然后在 Desktop 文件夾中找到 HTML 基礎(chǔ)文件夾,然后在 HTML基礎(chǔ)文件夾中找到名稱叫阻礙哦 QRCode.jpg 的圖片
注意 - 路徑中不要出現(xiàn)中文,否則可能出現(xiàn)為止問題
- 如果是通過“相對路徑”來指定圖片,不能跨盤符
例如 .html 文件在 C 盤,那么不能去查找 D 盤圖片
img src="QRCode.jpg"
img src="images/QRCode.jpg"
img src="../QRCode.jpg"
img src="C:\Users\Jonathan_Lee\Desktop\HTML基礎(chǔ)\QRCode.jpg"
a 標(biāo)簽的基本使用
a 標(biāo)簽
作用:
就是用于控制頁面與頁面之間跳轉(zhuǎn)的
a 標(biāo)簽的格式:
<a href="指定需要跳轉(zhuǎn)的目標(biāo)界面">需要展現(xiàn)給用戶查看的內(nèi)容</a>
<a >糯米</a>
- a 標(biāo)簽中有一個叫做 target 屬性,這個屬性的作用就是專門用于控制如何跳轉(zhuǎn)的,包含兩個值
- _self
用于在當(dāng)前選項卡中跳轉(zhuǎn),也就是不新建界面跳轉(zhuǎn),默認(rèn)值為 _self
<a href="xxx" target="_self"></a> - _blank
用于在新的選項卡中跳轉(zhuǎn),也就是新建界面跳轉(zhuǎn)
<a href="xxx" target="_blank"></a> - a 標(biāo)簽中還有一個屬性,叫做 title ,a 標(biāo)簽中的 title 和 img 標(biāo)簽中的 title 一樣,都是用來控制鼠標(biāo)懸停時顯示的提示文本的
<a target="_blank" title="江哥提示會轉(zhuǎn)到百度糯米首頁">糯米</a>
注意點
- a 標(biāo)簽不僅可以讓文字可以點擊,還可以讓圖片也能夠被點擊
<a href="images/QRCode.jpg" width="150"></a> - 一個 a 標(biāo)簽必須有一個 href 屬性,否則 a 標(biāo)簽不知道要跳轉(zhuǎn)到什么地方
- 如果通過 a 標(biāo)簽的 href 屬性指定一個 URL 地址,那么 必須在地址前面加上 http:// 或者 https://
- a 標(biāo)簽的 href 屬性除了可以指定一個網(wǎng)絡(luò)地址以外,還可以指定一個本地地址
<a href="08-br標(biāo)簽.html">08-br標(biāo)簽</a>
<a href="text/demo/10-路徑練習(xí).html">10-路徑練習(xí).html</a>
base 標(biāo)簽
因為目前網(wǎng)頁多為超鏈接所以在給所有超鏈接設(shè)置是新窗口打開還是在本窗口打開會造成繁雜的工作
base標(biāo)簽就是專門用來統(tǒng)一的指定當(dāng)前網(wǎng)頁中所有的超鏈接 (a 標(biāo)簽)需要如何打開
注意點
- base 標(biāo)簽必須寫在 head 標(biāo)簽的開始標(biāo)簽和結(jié)束標(biāo)簽之間
- 如果即在 base 中制訂了 target 又在 a標(biāo)簽中指定了 target ,那么瀏覽器會按照 a 標(biāo)簽中指定的來執(zhí)行
<head>
<meta charset="UTF-8" />
<title>11-base 標(biāo)簽</title>
<base target="_blank">
</head>
假鏈接
- 點擊之后不會跳轉(zhuǎn)的鏈接我們稱之為假鏈接
-
假鏈接的意義:
在企業(yè)開發(fā)前期,其它界面都沒有寫出來,那么我們就不知道應(yīng)該跳轉(zhuǎn)到什么地方,所以就只能使用假鏈接來代替,當(dāng)項目后期其它界面都已經(jīng)完成時,再將假鏈接替換為真鏈接 - 假鏈接的格式:
<a herf="#">xx</a><a herf="javascript:">xx</a>- 兩者之間的區(qū)別:# 的假鏈接會自動回到網(wǎng)頁的頂端,而 Javascript: 的假鏈接不會自動會到網(wǎng)頁頂端
錨點
- 要想通過 a 標(biāo)簽跳轉(zhuǎn)到指定的位置,那么必須告訴 a 標(biāo)簽一個獨一無二的身份證號碼,這樣 a 標(biāo)簽才能在當(dāng)前界面中找到需要跳轉(zhuǎn)的目標(biāo)搶位置
- 在 html 中,每一個標(biāo)簽都有一個名稱叫做 id 的屬性,這個屬性就是用來給標(biāo)簽指定一個獨一無二的身份證號碼的
- 所以要想實現(xiàn)通過 a 標(biāo)簽跳轉(zhuǎn)到指定的位置分為兩步
- 給目標(biāo)位置的標(biāo)簽添加一個 id 屬性
然后制定一個獨一無二的值 - 告訴 a 標(biāo)簽?zāi)阈枰D(zhuǎn)到的飆標(biāo)簽對應(yīng)的獨一無二的身份證號碼是多少
格式:
<a href="#center">跳轉(zhuǎn)到中部</a>
<h2 id="center">我是中部</h2>
注意點
- 通過我們的 a 標(biāo)簽跳轉(zhuǎn)到指定的位置是沒有過度動畫的,是直接一下子就跳轉(zhuǎn)到了指定位置
- a 標(biāo)簽除了可以跳轉(zhuǎn)到當(dāng)前界面的指定位置外,還可以跳轉(zhuǎn)到其他界面的時候直接跳轉(zhuǎn)到其他界面的指定位置
格式
<a href="13-錨點測試界面.html#bottm" target="_blank">跳轉(zhuǎn)到錨點測試界面</a>
<h2 id="bottom">我是錨點測試界面3333</h2>