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:webimglogo.gif" 或完整的網絡地址 "http://www.itcast.cn/images/logo.gif"
演示：
根據上面地址的路徑可以知道: src 的路徑是 （C:Users123Desktopday01gtx.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 target="_self">百度</a>
新的頁面打開騰訊
<a 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 >< 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{
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頁面中，一些特殊的富豪很難或者不方便直接使用，此時我們就可以使用下面的字符來替代
主要演示：空格，大于號，小于號，其他，可以在需要時，自行引入
演示代碼：
演示效果：
其他特殊字符，可以自行體驗~，常用就會記住
每天打氣：萬丈高樓平地起，地基還得自己起，剛開始的繁瑣簡單，會為成就未來的你
總結
以上是生活随笔為你收集整理的H5（08常用标签02，绝对，相对路径）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 二氧化硅和水反应
- 下一篇： 好看的微信网名88个