H5（08常用標籤02，絕對，相對路徑）
常用標籤複習：
標題標籤：<h1>~<h6> 語義化標題
段落標籤: <p> 將整個網頁分為若干個段落
換行標籤: <br /> 文字強制換行顯示
繼續學習常用標籤：
文字格式化標籤：
在網頁中，有時需要為文字設定粗體，斜體或下劃線等效果，
這時就需要用到HTML中的文字格式化標籤，使文字以特殊的方式顯示。
標籤語義：突出重要性，比普通文字更重要。
| 語義 | 標籤 | 說明 |
| 加粗 | <strong></strong>或者<b></b> | 更推薦使用<strong>標籤加粗 語義更強烈 |
| 傾斜 | <em></em>或者<i></i> | 更推薦使用<em>標籤加粗語義更強烈 |
| 刪除線 | <del></del>或者<s></s> | 更推薦使用<del>標籤加粗語義更強烈 |
| 下劃線 | <ins></ins>或者<u></u> | 更推薦使用<ins>標籤加粗語義更強烈 |
重點記住 加粗和傾斜
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>文字格式化標籤</title> </head> <body> <p>我是<strong>加粗</strong>的文字</p> <p>我是<b>加粗</b>的文字</p> <p>我是<em>傾斜</em>的文字</p> <p>我是<i>傾斜</i>的文字</p> <p>我是<del>刪除線</del></p> <p>我是<s>刪除線</s></p> <p>我是<ins>下劃線</ins></p> <p>我是<u>下劃線</u></p> </body> </html>
瀏覽器開啟：
div和span標籤：
<div>和<span>是沒有語義的，它們就是一個盒子，用來裝內容的
div：是 division 的縮寫，表示分割，分割槽。
span：意為跨度，跨距。
區別：
div標籤用來佈局，但是現在一行只能放一個<div>。大盒子
span標籤用來佈局，一行上可以多個<span>。小盒子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>div和span標籤</title> </head> <body> <div>我是一個div標籤我一個人單獨佔一行</div> <div>我是一個div標籤我一個人單獨佔一行</div> <span>百度</span> <span>新浪</span> <span>搜狐</span> </body> </html>
效果：div 標籤獨佔一行， span標籤一行可以有多個
影象標籤和路徑（重點）：
1.影象標籤：（單標籤）
在HTML標籤中，<img>標籤用於定義HTML頁面中的影象，單詞image的縮寫以為影象
<img src="影象URL" />
影象標籤注意：
src是<img>標籤的必須屬性，它用於指定影象檔案的路徑和檔名
alt 屬性：
<img />標籤不是獨佔一行的
所謂屬性：簡單理解就是屬於這個影象標籤的特性。
使用：（此處先按照我的方法體驗一下img標籤的使用，路徑後面會詳細說明）
1.建立img.html 檔案 和圖片並列放在一起
2.在src下輸入路徑：
效果：可以看出，img 標籤不是獨佔一行的
加入獨佔一行的標題元素讓頁面排版有語義化且更好看：
效果：
影象標籤的其他屬性：
| 屬性 | 屬性值 | 說明 |
| src | 圖片路徑 | 必須屬性 |
| alt | 文字 | 替換文字，影象不是顯示的文字 |
| title | 文字 | 顯示文字，滑鼠放到影象上，顯示的文字 |
| width | 畫素 | 設定影象的寬高 |
| height | 畫素 | 設定影象的高度 |
| border | 畫素 | 設定影象的邊框粗細 |
影象標籤屬性注意點：
1.影象標籤可以擁有多個屬性，必須解除安裝標籤的後面
2.屬性之間不分先後順序，標籤名與屬性，屬性與屬性之間均以分格分開
3.屬性採取鍵值對的格式，即key= “value” 的格式，屬性 =“屬性值”
4.一般圖片的寬度和高度只需要設定其中一個即可，不然容易變形
重點掌握：
請說出影象標籤哪個屬性是必須要寫的？
答：src 路徑
請說出 影象標籤中 alt 和 title 屬性區別
答：alt 是替換文字，當圖片不顯示是才顯示
title是顯示文字，滑鼠放到圖片上會顯示文字
<h4>alt 替換文字 影象顯示不出來的時候用文字替換：</h4>
<img src="gtx1.jpg" alt="我是鋼鐵俠" />
<h4>title 提示文字 滑鼠放到影象上，提示的文字：</h4>
<img src="gtx.jpg" alt="我是鋼鐵俠" title="鋼鐵俠是我" />
<h4> width 給影象設定寬度：</h4>
<img src="gtx.jpg" alt="我是鋼鐵俠" title="鋼鐵俠是我" width="200" />
<h4>height 給影象設定高度</h4>
<img src="gtx.jpg" alt="我是鋼鐵俠" title="鋼鐵俠是我" height="200" />
<h4>border 給影象設定邊框：</h4>
<img src="gtx.jpg" alt="我是鋼鐵俠" title="鋼鐵俠是我" width="200" border="15px">
效果：
路徑（前期鋪墊知識）
1)目錄資料夾和根目錄
實際工作中，我們的檔案不能隨便亂放，否則用起來很難找到它們，因此我們需要一個資料夾來管理他們
目錄資料夾：就把普通的資料夾，只不過存放了我們做頁面所需要的相關素材，比如html檔案，圖片等。
根目錄：開啟目錄資料夾的第一層就是根目錄
再雙擊開啟 images 資料夾 就不是根目錄了：
所以這幅圖就很好理解了：
目錄資料夾：day1
開啟day1 資料夾：
2）用vscode 開啟根目錄資料夾
好處：後期可以非常方便的進行管理
1.選單欄到在資料夾開啟
2.選擇需要開啟的目錄資料夾
3.可以在根目錄下隨意新建刪除檔案
新建：demo.html
刪除：demo.html
快捷方式：
這樣就在vscode中打開了目錄檔案夾了
路徑：
頁面中的圖片回非常多，通常我們會新建一個資料夾來存放這些影象檔案（imgaes）,
這時再查詢影象，就需要採用“路徑”的方式指定檔案的位置。
路徑可以分為：
路徑之相對路徑:
以引用檔案所在位置為參考基礎，而建立出的目錄路徑。
這裡簡單來說，圖片相對於HTML頁面的位置
| 相對路徑分類 | 符號 | 說明 |
| 同一級路徑 | 影象檔案位於HTML檔案同一級 如<img src="baidu.gif" /> | |
| 下一級路徑 | / | 影象檔案位於HTML檔案下一級 如<img src="images.baidu.gif" /> |
| 上一級路徑 | ../ | 影象檔案位於HTML檔案上一級 如<img src="../baidu.gif" /> |
同一級路徑：（出發點都是 引用影象的html 檔案）
目錄結構： 同一級路徑.html 應用 同個目錄下的 gtx.jpg
講解：
同一級路徑.html
gtx.jpg
同處於根目錄下，可以直接引用
<img src="gtx.jpg">
下一級路徑：（出發點都是 引用影象的html 檔案）
目錄結構
講解：
gtx1.jpg 在 images 資料夾裡，images 和 下一級路徑.html 處在同一級目錄即：
下一級路徑.html
和
images/gtx1.jpg （這個寫法表示images資料夾下的gtx1.jpg)
處在同一根目錄下
<h4>寫法1: ./表示當前資料夾，也可以省略</h4>
<img src="./images/gtx1.jpg">
<h4>寫法2：省略 ./</h4>
<img src="images/gtx1.jpg"><br />
上一級路徑：（出發點都是 引用影象的html 檔案）
目錄結構
講解：
gtx.jpg 和 html資料夾 處於 同一級目錄，需要從html 檔案 向下找 上一級路徑.html
即：gtx.jpg 位於上一級路徑.html 的上一級
因此需要 html 檔案 向上走一步到html資料夾（../）即： ../
再訪問gtx.jpg 即： ../gtx.jpg
<img src="../gtx.jpg">
路徑之絕對路徑：
是指目錄下的絕對位置，直接到達目標位置，通常是從盤開始的路徑.
例如, "D:\web\img\logo.gif" 或完整的網路地址 "http://www.itcast.cn/images/logo.gif"
演示：
根據上面地址的路徑可以知道: src 的路徑是 （C:\Users\123\Desktop\day01\gtx.jpg），可以自己嘗試一下
程式碼輸出一下
正常輸出
再例如：src 的路徑是：https://c-ssl.duitang.com/uploads/item/201605/10/20160510135316_f2ewy.thumb.1000_0.jpeg（從網上隨便找的圖片）
演示：
輸出：
超連結標籤（重點）：
在HTML標籤中，<a>標籤用於定義超連結，作用是從一個頁面連結到另一個頁面（就是跳轉）
1.連結的語法格式
<a href="跳轉目標" target="目標視窗的彈出方式">文字或者影象</a>
單詞anchor的縮寫，意為：錨。
兩個屬性的作用如下：
| 屬性 | 作用 |
| href | 用於指定連結目標的url地址，（必須屬性）當為標籤應用href屬性時，它就具有了超連結的功能 |
| target | 用於指定連結頁面開啟的方式，其中_self為預設值，_blank為在新視窗中開啟方式 |
href 路徑填寫，和圖片src 路徑是相同的
場景：騰訊新聞中，點選不同的主題進入專欄，就是超連結做的
連結分類：
1.外部連結，（對於我們的網站屬於外部網站，所以是外部連結）
例如 ：（新建頁面，建立外部連結.html檔案，貼上一下程式碼進去，進行測試）
當前頁面開啟百度
<a href="http://www.baidu.com" target="_self">百度</a>
新的頁面開啟騰訊
<a href="http://www.qq.com" target="blank">騰訊</a>
href 表示的是跳轉的地址
target 預設開啟方式 是 _self 本視窗開啟
2.內部連結，(網站內部頁面之間的相互連結)
例如：(新建頁面，建立內部連結.html檔案目錄結構如下)
超連結.html
因為兩個檔案處於同一級路徑，所以可以直接訪問，路徑問題詳細可以參照圖片引入的路徑
gongshijianjie.html
演示：
3.空連結：# ，當還沒想好頁面跳轉到哪個頁面的時候可以這樣做 在href 屬性中填入#，是空連線，有超連結的形式，沒有跳轉
<a href="#">公司地址</a>
4.下載連結：如果 href 裡面地址是一個檔案或者壓縮包，會下載這個檔案。
如：檔案 .exe 或者是 zip 等
演示：
本次以一張圖片來做演示
把圖片壓縮成 .zip 格式
這樣就準備好了
程式碼分析：由於下載連結.html 和gtx.zip 處於同一級目錄下，可以直接引用
接下來，瀏覽器開啟進行點選即可：
奧利給！！！
5.網頁元素連結：在網頁中的各種網頁元素，如文字，影象，表格，音訊，視訊等都可以新增超連結
例如：
<a href="http://www.baidu,com">< img src="gtx.jpg" /></a>
成功跳轉即可：
錨點連結：我們點選連結，可以快速定位到頁面中的某個位置
1.在連結文字的 href 屬性中，設定屬性值為 #名字 的形式
如：
<a href="#two">第二集</a>
2.找到目標位置標籤，裡面新增一個 id 屬性 = 剛才的名字
如
<h3 id="two">第二集介紹</h3>
錨點案例：（寫了個簡單的案例，我們只需要知道怎麼使用即可，後面學會了css可以做出更好看的介面）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 清除預設樣式 */
*{
margin: 0;
padding: 0;
}
/* 讓擁有.box 這個類的盒子
寬度 980畫素，
高度 800畫素
盒子居中
文字居中對齊
*/
.box{
width: 980px;
height: 800px;
margin: 0 auto;
text-align:center;
}
/* 設定背景顏色 */
.one{
background: antiquewhite;
}
.two{
background: aqua;
}
.three{
background: beige;
}
.four{
background: blueviolet;
}
.five{
background: cornflowerblue;
}
/* 使用 fixed 定位定位 .fix 這個類的盒子，讓其在右側中部懸浮顯示 */
.fix{
position:fixed;
right: 20px;
top: 50%;
}
</style>
</head>
<body>
<div class="fix">
<!--設定 href 屬性 的 名字 -->
<p><a href="#one">跳轉第1層</a></p>
<p><a href="#two">跳轉第2層</a></p>
<p><a href="#three">跳轉第3層</a></p>
<p><a href="#four">跳轉第4層</a></p>
<p><a href="#five">跳轉第5層</a></p>
</div>
<div class="one box">
<!-- id 名字 與 href 名字相同 來實現目標位置跳轉 -->
<h3 id="one">第1層</h3>
</div>
<div class="two box">
<h3 id="two">第2層</h3>
</div>
<div class="three box">
<h3 id="three">第3層</h3>
</div>
<div class="four box">
<h3 id="four">第4層</h3>
</div>
<div class="five box">
<h3 id="five">第5層</h3>
</div>
</body>
</html>
可以複製程式碼，瀏覽器開啟進行體驗
注意點:(關注瀏覽器url地址的變化)
1.剛載入的頁面：
2.點選之後（所以說用錨點，會讓瀏覽器url產生變化）
註釋標籤和特殊字元標籤：
註釋標籤：
如果需要再HTML文件中新增一些便於閱讀和理解但又不需要顯示再頁面中的註釋文字，就需要使用註釋標籤
HTML 中的註釋以 " <!-- " 開頭， 以 "-->"結束。
一句話：註釋標籤裡面的內容是給開發者看的，這個程式碼是不執行不顯示到頁面中的
註釋是為了更好的解釋程式碼的功能，便於相關開發人員理解和閱讀程式碼，程式是不會執行註釋內容的
（就如同上面我寫的錨點案例，程式碼中很多註釋都是為了解釋程式碼的功能）
註釋標籤演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--註釋標籤，不會顯示再瀏覽器 -->
<p>我是段落標籤</p>
</body>
</html>
果然，瀏覽器看不見
vsCode註釋的快捷方式：
按下後：同樣實現了註釋
特殊字元：
在HTML頁面中，一些特殊的富豪很難或者不方便直接使用，此時我們就可以使用下面的字元來替代
主要演示：空格，大於號，小於號，其他，可以在需要時，自行引入
演示程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h4>有時候需要特意的多幾個空格，然而就瀏覽器只會預設一個</h4>
<p>我要空5個 格</p>
<p>我要空5個格</p>
<h4>如果想再瀏覽器輸出p標籤</h4>
<p>我是標籤<p></p>
</body>
</html>
演示效果：
其他特殊字元，可以自行體驗~，常用就會記住
每天打氣：萬丈高樓平地起，地基還得自己起，剛開始的繁瑣簡單，會為成就未來的你