前端HTML基礎知識

1.HTML介紹

HTML(HyperText Markup Language，超文本標記語言)是構成網頁的基本元素，是一種用于創建網頁的標準化標記語言。HTML不是一種編程語言，而是一種標記語言，通過標簽來描述網頁的結構和內容。

超文本：超文本是指超越純文本的文本，這意味著HTML不僅能包含文本，還能包含圖片/表格/列表/鏈接/按鈕等內容。

標記語言：HTML 使用**標簽**來標記網頁內容。不同的標簽有不同的功能，學習HTML就是學習如何使用這些標簽來構建網頁。

標簽：也稱為標記或元素，用于在網頁中標記和定義內容。每個標簽有特定的語法和功能。標簽的基本語法是使用尖括號包圍標簽名，標簽名不區分大小寫，推薦使用小寫字母書寫。標簽通常分為雙標簽和單標簽兩類：

- 雙標簽(例如`<p></p>`)：用于定義一段內容，內容位于開始標簽和結束標簽之間。
- 單標簽(例如`<img/>`)：用于定義單一的元素或屬性，沒有結束標簽。

標簽屬性：每個屬性都為標簽添加了額外的信息或設置，讓瀏覽器知道如何正確處理內容。屬性書寫在開始標簽中，使用空格與標簽名隔開，屬性名與屬性值之間用等號連接，屬性值用引號括起來。例如圖片標簽：`<img src="image.jpg" alt="描述">`。

2.HTML基本框架

<!-- 輸入！+Tab鍵，會自動生成<!DOCTYPE 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>
</body>
</html>

基本框架內容說明

<!DOCTYPE html>
<!-- 告訴瀏覽器 按照html5的文檔規范去解析  --><html lang="en"><!-- 所有網頁最大的結構 網頁中所有的標簽存放在html標簽中 --><!-- lang屬性可以幫助搜索引擎了解網頁的主要語言，從而改善搜索結果的相關性。 --><!-- en為英文，zh-CN為中文 --><head>
<!-- 頭部存放頁面相關的關鍵配置或者引入資源--><meta charset="UTF-8"><!-- meta標簽：提供有關頁面的元信息，用來設置網頁的基本信息 --><!-- charset：表示網頁編碼格式瀏覽器打開網頁的時候會使用charset指定的編碼讀取整個HTML文
檔 --><!-- 告訴瀏覽器使用utf-8編碼 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 配置移動端信息 --><!-- viewport：用于控制網頁在不同設備上的顯示方式 --><!-- width=device-width：設置視口寬度為設備的寬度 --><!-- initial-scale=1.0：設置初始縮放比例為1.0 --><title>Document</title><!-- 網頁標題名稱，可自定義修改 -->
</head>
<body><!-- 自定義內容 -->
</body>
</html>

3.HTML文本標簽

3.1 標題標簽

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>基礎標簽</title>
</head>
<body>
<!-- 1.標題標簽
用于定義不同級別的標題，通常用于網頁的標題、章節標題等。
常見的標題標簽有<h1>到<h6>，其中<h1>是最高級別的標題，<h6>是最低級別的標題。--><h1>這是一級標題</h1><h2>這是二級標題</h2><h3>這是三級標題</h3><h4>這是四級標題</h4><h5>這是五級標題</h5><h6>這是六級標題</h6></body>
</html>

運行結果：

3.2?段落標簽

段落標簽由開始標簽<p>和結束標簽</p> 組成，開始和結束標簽之間的內容會被視為一個段落。段落與段落之間有一定的間距。這有助于使頁面內容更易讀，提升用戶體驗。段落標簽會獨占一整行的，在網頁當中我們有單獨顯示的一行文字我們也是可以使用到p標簽的。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>基礎標簽</title>
</head>
<body><!-- 2.段落標簽
用于定義段落文本，通常用于網頁的正文內容。
常見的段落標簽有<p>，其中<p>用于定義一個段落。--><p>北國風光，千里冰封，萬里雪飄。</p><!-- 添加換色與更改字體大小屬性 --><p style="color: red;font-size: 20px;">望長城內外，惟余莽莽；大河上下，頓失滔滔。</p>
<!-- <span></span>更改部分字體屬性 --><p>望長城內外，惟余莽莽；<span style="color: blue">大河上下</span>，頓失滔滔。</p></body>
</html>

運行結果：

3.3 其他標簽


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>基礎標簽</title>
</head>
<body><!-- 3.其他常用標簽換行標簽<br>粗體文本標簽<b></b>和<strong></strong>(強調作用) 斜體文本標簽<i></i>和<em></em>(強調作用)刪除線標簽<s></s>和<del></del>下劃線標簽<u></u>和<ins></ins>上標標簽<sup></sup>和下標標簽<sub></sub>--><p><i>北國風光</i>，<b>千里冰封</b>，<s>萬里雪飄</s>。<u>望長城內外，惟余莽莽</u></p><p>H<sub>2</sub>O</p><!-- 定義一個水的化學式 --><p>x<sup>2</sup>+y<sup>2</sup>=1</p><!-- 定義一個單位圓 --></body>
</html>

?運行結果：

4.?HTML特殊標簽

4.1 字符實體

在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><!-- 1.字符實體  特殊代碼  了解使用 &lt; 在頁面中呈現 "<"使用 &gt; 在頁面中呈現 ">"使用 &nbsp; 在頁面中呈現一個空格使用 &copy; 在頁面中呈現版權符號"?"使用 &yen; 在頁面中呈現人民幣符號"￥"-->&lt;hello world&gt;<br>&copy;&nbsp;&nbsp;&nbsp;&yen;648元</body>
</html>

運行結果：

4.2?容器標簽

<!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><!-- 2.容器標簽  div id屬性補充:段落標簽里面只能放span標簽以其他文本標簽,不能放段落標簽,也不能放容器標簽 !為什么用容器標簽來做分區呢?div標簽沒有默認樣式語義化標簽:<main></main>       頁面主要內容區域標簽<footer></footer>   頁面底部區域標簽<nav></nav>         頁面導航欄區域標簽<header></header>      頁面頂部區域標簽--><div id="header">頁面頂部區域</div><div id="main">頁面中部區域</div><div id="footer">頁面底部區域</div><p>我是第一個p標簽</p><p>我是第二個p標簽</p><!-- <p><div>錯誤寫法</div></p> --><header><div><p></p></div></header><nav></nav><main></main><footer></footer></body>
</html>

運行結果：

?4.3 圖片標簽

HTML使用 <img>入圖片，img是image的簡稱。<img>是單標簽，只包含屬性，沒有結束標簽。通過標簽屬性來要圖片在頁面上顯示。

屬性注意點：

標簽的屬性寫在開始標簽內部
標簽上可以同時存在多個屬性
屬性之間以空格隔開
屬性之間沒有順序之分

<!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><!-- 3.圖片標簽  img  單標簽
src屬性:圖片路徑,必須要填,圖片的后綴也要寫上   jpg,png,gif,webp....絕對路徑:網絡圖片地址,從電腦盤符(c或者d盤)觸發的一個完整路徑   相對路徑:./本層文件夾或者../ 
width 屬性：圖片寬度
height屬性：圖片高度
如果只設置一個,另一邊會根據圖片的寬高比自動進行縮放
alt屬性:圖片加載失敗的提示文字信息
title屬性:設置圖片標題(鼠標懸浮式顯示的文字)--><p>林丹照片</p><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.EQ2mZbBjqplkUZdbKMOKqgHaEH?w=322&h=180&c=7&r=0&o=5&dpr=2&pid=1.7" alt="" title="林丹照片"><!-- 絕對路徑: --><img src="./img1/image.png" width="300px" alt="圖片加載失敗" title="超級丹">
<!-- 相對路徑: --></body>
</html>

運行結果：

4.4 超鏈接標簽

超鏈接(Hyperlink)通常簡稱為鏈接(Link)，是指從一個網頁指向另一個目標的連接關系，這個目標可以是另一個網頁，也可以是當前網頁中的其它位置，還可以是圖片、文件、應用程序等。鏈接的兩端分別稱為源錨點和目標錨點，通過點擊源錨點即可以跳轉到目標錨點。

<!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><!-- 4.超鏈接標簽  a 點擊跳轉href:要跳轉到的地址target:指定打開方式取值:_self  在本頁面打開_blank   在新窗口打開_new   打開一個新的窗口,并將當前窗口作為新窗口的父窗口-->
<a href="http://www.jd.com" target="_blank">京東一下</a>
<a href="http://www.baidu.com" target="_blank">百度一下</a><!-- 怎么讓圖片變成超鏈接:a標簽把img標簽包裹起來 <a href="跳轉到的網址" target="跳轉類型指令"><img src="需要點擊的圖片" width="300px" alt="圖片加載失敗" title="懸浮名"></a>--><a href="https://cn.bing.com/images/search?q=%e6%9e%97%e4%b8%b9&form=HDRSC2&first=1" target="_blank"><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.EQ2mZbBjqplkUZdbKMOKqgHaEH?w=322&h=180&c=7&r=0&o=5&dpr=2&pid=1.7" width="300px" alt="圖片加載失敗" title="超級丹"></a></body>
</html>

5.?HTML列表標簽

5.1?無序列表

HTML無序列表是用于組織并展示列表項，其中列表項的順序不是特別重要，因此被稱為“無序”列表。使用圓點、方塊或其他符號來標記每個列表項。

<ul>標簽：標識了無序列表的開始和結束。所有的列表項都應包含在這個標簽內部。
<li>標簽：代表單個列表項，這是構成無序列表的基礎。每個<li>都會被自動添加一個標記，通常是一個圓點。

<!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><!-- 無序列表  順序不重要<ul><li></li></ul>樣式屬性   type:disc     默認,實心圓點circle   空心圓點square   實心方塊none     不顯示符號  --><h2>水果</h2><ul type="disc"><li>香蕉</li><li>蘋果</li><li>梨</li><li>西瓜</li></ul></body>
</html>

運行結果：

?5.2 有序列表

HTML有序列表用于組織一組需要按特定順序展示的列表項，因此被稱為“有序”列表。列表項前通常使用數字作為標記，表明各項的順序。

<ol>標簽：這個標簽定義了有序列表的開始和結束，是創建有序列表的容器。所有需要按順序展示的列表項都應該包含在這個標簽內部。
<li>標簽：代表有序列表中的單個列表項。與無序列表一樣，每個列表項都使用 <li>標簽來標記，但在有序列表中，每個<li>項前通常會自動添加一個數字，反映其在列表中的順序。

在使用有序列表時，也應遵循將<li>標簽直接嵌套在<ol>標簽內的規范，以保持結構清晰和語義準確。

<!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><!-- 有序列表   順序很重要  ol  litype: 1  默認,數字a,A i,Inone--><h2>比賽排名</h2><ol type="1"><li>冠軍</li><li>亞軍</li><li>季軍</li></ol></body>
</html>

運行結果：?