基礎認知

HTML標簽的結構

<strong>文字變粗</strong>

＜開始標簽＞內容＜結束標簽＞

結構說明：

• 標簽由<、>、1、英文單詞或字母組成。并且把標簽中<>包括起來的英文單詞或字母稱為標簽名。
• 常見標簽由兩部分組成，我們稱之為雙標簽前部分叫開始標簽，后部分叫結束標簽，兩部分之間包裹內容。
• 少數標簽由一部分組成，我們稱之為：單標簽。自成一體，無法包裹內容。

HTML標簽學習

排版標簽

標題標簽

<h>系列標簽(<h1><h2><h3>...)

語義：1~6級標題，重要程度依次遞減

特點:文字加粗變大，并且獨占一行

段落標簽

場景：在新聞和文章的頁面中，用于分段顯示
代碼：
<p>我是一段文字</p>
語義：段落
特點：段落之間存在間隙，獨占一行

換行標簽

<br>

水平線標簽

<hr>

文本格式化標簽

場景：需要讓文字加粗、下劃線、傾斜、刪除線等效果

?

?有利于機器解析，對搜索引擎(SEO) 有幫助

圖片標簽

場景：在網頁中顯示圖片

代碼：<img src="./ 1.jpg" alt="替換文本 " title="鼠標懸停時顯示的文本">

sre，title與alt間都有空格

特點：單標簽，img標簽需要展示對應的效果，需要借助標簽的屬性進行設置!

注意點:

標簽的屬性寫在開始標簽內部

標簽上可以同時存在多個屬性

屬性之間以空格隔開

標簽名與屬性之間必須以空格隔開

屬性之間沒有順序之分

屬性名：src

屬性值：目標圖片的路徑

注意點：當前網頁和目標圖片在同一個文件夾中，路徑直接寫目標圖片的名字即可（包括后綴名）

屬性名:alt

屬性值:如果圖片加載出錯，顯示的替換圖片的文本

注意點:如果圖片正常不會顯示文本

屬性名:title

屬性值:鼠標懸停時顯示的文字

注意點：title屬性不僅僅可以用于圖片標簽，還可以用于其他標簽

屬性名:width和height

屬性值：寬度和高度（數字）

注意點：

如果只設置width或height中的一個，另一個沒設置的會自動等比例縮放（此時圖片不會變形）

如果同時設置了width和height兩個，若設置不當此時圖片可能會變形

路徑

相對路徑(常用)

從當前文件開始出發找目標文件的過程

同級目錄

"./"表當前層級

假設目標文件與當前文件在同一級目錄

<img src="目標圖片.gif">或者<img src="./目標圖片.gif">

下級目錄

<img src="./文件夾/目標圖片.gif">

上級目錄

"../"返回上一級目錄

<img src="../目標圖片.gif">

絕對路徑

從盤符開始(C:/1.jpg)

音頻標簽

<audio src="./music.mp3"controls></audio>

常見屬性：

?注意點：

音頻標簽目前支持三種格式：MP3、Wav、Ogg

視頻標簽

<video src="./video.mp4”controls></video>

常見屬性：

?注意點：

視頻標簽目前支持三種格式：MP4、WebM、Ogg

鏈接標簽

場景：點擊之后，從一個頁面跳轉到另一個頁面

稱呼：a標簽、超鏈接、錨鏈接

代碼：<a href="./目標網頁.html>替換文字</a>

特點：雙標簽，內部可以包裹內容，如果需要a標簽點擊之后去指定頁面，需要設置a標簽的href屬性

類似于這是一個超鏈接

?屬性名:target

屬性值：目標網頁的打開形式

取值:

• _self? ? ?默認值，在當前窗口中跳轉 （覆蓋原網頁）
• _blank? ?在新窗口中跳轉 （保留原網頁）

<a href="https://www.baidu.com/"target="_blank">百度一下</a>