HTML Day02

Day02

0. 引言
1. 文本格式化
- 1.1 HTML文本格式化標簽
- 1.2 HTML"計算機輸出"標簽
- 1.3 HTML 引文，引用及標簽定義
2. HTML鏈接
- 2.1鏈接跳轉原理（有點亂可跳過）
- 2.2 HTML超鏈接
- 2.3 target屬性
- 2.4 id屬性
- - 2.4.1 id屬性在頁面內和不同頁面的定位
- 2.5 空鏈接
3.HTML頭部
- 3.1 title元素
- 3.2 base元素
- 3.3 link元素
- 3.4 style元素
- 3.5 meta元素
- 3.6 script元素

0. 引言

我發現HTML和CSS嵌套太多，然后HTML5又新增和刪除很多特性，因為初學HTML，大多數是填鴨式學習，即看了，問了，解答了，再忘了。所以博客很多東西都是一知半解，只能做做擴充知識點，后面會一直更新修改重新布局，現在只是當作二次手記學習過程，如果看到這里，我這個引言沒刪，說明寫的不夠好，至少不是終極版本。（點個關注激勵一下是可以的嘻嘻）

1. 文本格式化

????文本格式化指的是對字體進行不同形式的修飾。例如：

<!DOCTYPE html>      <!聲明文檔類型為 HTML5，告訴瀏覽器以 HTML5 標準解析頁面。>
<html>				<!HTML 文檔的根標簽，所有其他 HTML 元素都包含在其中。>
<head>				<!頭部標簽，包含文檔元數據（如字符編碼、頁面標題），不直接顯示在頁面上。>
<meta charset="utf_8">		<!設置頁面字符編碼為 UTF-8，確保中文等特殊字符能正確顯示。>
<title>菜鳥教程</title>		<!設置瀏覽器標簽頁和收藏夾中顯示的頁面標題>
</head>						<!頭部標簽結束><body>						<!頁面顯示><b>加粗文本</b><br><br>         <!br是換行>
<i>斜體文本</i><br><br>
<code>電腦自動輸出</code><br><br>
這是<sub>下標</sub>和<sup>上標</sup></body>                  
</html>

預覽效果如圖：

下面是一些常用的標簽以及用途。 ?? ??

1.1 HTML文本格式化標簽

HTML的常用文本格式化標簽

標簽	描述
$< b >$	定義粗體文字
$< e m >$	定義著重文字
$< i >$	定義斜體字
$< s ma ll >$	定義小號字
$< s t ro n g >$	定義加重語氣
$< s u b >$	定義下標字
$< s u p >$	定義上標字
$< in s >$	定義插入字
$< d e l >$	定義刪除字

<!DOCTYPE html>          	<!聲明文檔類型為 HTML5。告訴瀏覽器使用 HTML5 標準解析頁面，確保兼容性。必須放在 HTML 文件的第一行。>
<html>						<!HTML 文檔的根標簽（起始標簽）。所有HTML元素都要在其后>
<head>						<!頭部標簽（起始標簽），包含文檔元數據。元數據不直接顯示在頁面上，用于描述文檔（如編碼、標題、引入資源）。>
<meta charset="utf-8">		<!UTF-8 是現代網頁的標準編碼>
<title>菜鳥教程(runoob.com)</title>			<!設置頁面標題。顯示在瀏覽器標簽頁和收藏夾中。>
</head>
<body>
<b>這個文本是加粗的</b>
<br />                  <!換行>
<strong>這個文本是加粗的</strong>
<br/>
<em>定義著重字體</em>
<br />
<big>這個文本字體放大</big>
<br />
<em>這個文本是斜體的</em>
<br />
<i>這個文本是斜體的</i>
<br />
<small>這個文本是縮小的</small>
<br/>
<ins>定義插入字</ins>
<br/>
<del>定義刪除字</del>
<br />
這個文本包含
<sub>下標</sub>
<br />
這個文本包含
<sup>上標</sup>
<br/></body>
</html>

效果圖預覽：

1.2 HTML"計算機輸出"標簽

HTML"計算機輸出“標簽

標簽	描述
$< co d e >$	定義計算機代碼
$< kb d >$	定義鍵盤碼
$< s am p >$	定義計算機代碼樣本
$< v a r >$	定義變量
$< p re >$	定義預格式文本

<!DOCTYPE html>          	<!聲明文檔類型為 HTML5。告訴瀏覽器使用 HTML5 標準解析頁面，確保兼容性。必須放在 HTML 文件的第一行。>
<html>						<!HTML 文檔的根標簽（起始標簽）。所有HTML元素都要在其后>
<head>						<!頭部標簽（起始標簽），包含文檔元數據。元數據不直接顯示在頁面上，用于描述文檔（如編碼、標題、引入資源）。>
<meta charset="utf-8">		<!UTF-8 是現代網頁的標準編碼>
<title>菜鳥教程(runoob.com)</title>			<!設置頁面標題。顯示在瀏覽器標簽頁和收藏夾中。>
</head>
<body><code> 定義計算機代碼</code>   <!作用是標記一段計算機代碼，通常是等寬字體><br/>							<!換行><kbd>定義鍵盤碼</kbd>		<!標記用戶需要通過鍵盤輸入的內容,通常是灰色圓角背景><br/><samp>定義計算機代碼樣本</samp>		<!標記計算機程序的輸出或示例結果,通常使用等寬字體，與 < c o d e > 類似。><br/><var>定義變量</var>			<!標記數學公式、編程中的變量或占位符。><br/><pre>定義預格式文本</pre>		<!：保留文本的原始格式（如空格、換行）></body>
</html>

這幾個標簽在瀏覽器顯示大差不差，不知道為什么，但是在csdn編輯器倒是很不一樣，放上兩個的對比：

csdn:

$代碼： < co d e > 定義計算機代碼 < / co d e > ：$
預覽：定義計算機代碼
$代碼： < kb d > 鍵盤碼 < / kb d > ， < kb d > c t r l < / kb d > + < kb d > c < / kb d >$
預覽：鍵盤碼，ctrl+c
$代碼： < s am p > 計算機代碼 : “ h e ll o w or l d ” < / s am p >$
預覽：計算機代碼:“hello world”
$代碼： < v a r > 變量， x ， y < / v a r >$
預覽：變量，x，y
$< p re > 定義預格式文本 < / p re >$
預覽：

定義預格式文本

瀏覽器:
預覽：

1.3 HTML 引文，引用及標簽定義

HTML 引文，引用，及標簽定義

標簽	描述
$< abb r >$	定義縮寫
$< a dd ress >$	定義地址
$< b d o >$	定義文字方向
$< b l oc k q u o t e >$	定義長的引用
$< q >$	定義短的引用語
$< c i t e >$	定義引用，引證
$< df n >$	定義一個定義項目

<!DOCTYPE html>          	<!聲明文檔類型為 HTML5。告訴瀏覽器使用 HTML5 標準解析頁面，確保兼容性。必須放在 HTML 文件的第一行。>
<html>						<!HTML 文檔的根標簽（起始標簽）。所有HTML元素都要在其后>
<head>						<!頭部標簽（起始標簽），包含文檔元數據。元數據不直接顯示在頁面上，用于描述文檔（如編碼、標題、引入資源）。>
<meta charset="utf-8">		<!UTF-8 是現代網頁的標準編碼>
<title>菜鳥教程(runoob.com)</title>			<!設置頁面標題。顯示在瀏覽器標簽頁和收藏夾中。>
</head>
<body><p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>     <!p是段落標簽，abbr是縮寫標簽，而title屬性是讓當鼠標停留到abbr定義的縮寫文本時會展開全寫><address>Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>   <!a是創建超鏈接的標簽，href屬性用于指定鏈接>Visit us at:<br>Example.com<br>Box 564, Disneyland<br>USA</address><br/><p>該段落文字從左到右顯示。</p>  
<p><bdo dir="rtl">該段落文字從右到左顯示。</bdo></p>   <!bdo是定義文字方向的標簽，dir屬性用于指定文字方向，rtl是右到左，ltr是左到右，auto是自動檢查方向><h1>About WWF</h1>     				<!h1是一級標題標簽><p>Here is a quote from WWF's website:</p><blockquote cite="https://www.worldwildlife.org/who/index.html">      <!blockquote是定義長引用標簽，可選屬性，指定引用內容的原始 URL。注：該 URL 不會顯示在頁面上，但供搜索引擎或工具使用。>For 50 years, WWF has been protecting the future of nature. The world’s leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</blockquote><h1>引用</h1><p>在這個示例中，第一個和第二個引用使用了 blockquote 標簽，因為它們較長，需要獨立的塊來展示；而第三個引用使用了 q 標簽，因為它比較短，可以內聯顯示。</p>  <blockquote><p>Life is what happens when you're busy making other plans.</p><footer>— John Lennon</footer>      <!footer 標簽定義了一個頁腳區域，內容為 “— John Lennon”。></blockquote><blockquote><p>If you want to know what a man's like, take a good look at how he treats his inferiors, not his equals.</p><footer>— J.K. Rowling, Harry Potter and the Goblet of Fire</footer></blockquote><p>In his famous quote, Einstein said: <q>E=mc2</q>     <!q是短的引用></p>
</body>
</html>

圖片預覽：

2. HTML鏈接

????

HTML鏈接

定義：html鏈接用于網頁之間的跳轉。

2.1鏈接跳轉原理（有點亂可跳過）

????首先，HTML用標簽 $< a >$ 來定義目標地址，當我們點擊其內的鏈接時。會發生以下步驟：

解析目標地址（URL/路徑）
??URL是包含一系列信息的字符串，可以直接定位網絡資源。其由以下幾個部分組成：
$協議（ h ttp ， f tp ， h ttp s 等） + 域名（ cs d n . co m, g oo g l e . co m 等） + 路徑（資源在服務器上的位置，如 / ima g es / l o g o . p n g)$
比如:https://editor.csdn.net/md?not_checkout=1&articleId=148231018就是一個URL，這是我現在寫博客的鏈接hh，而且是一個絕對URL。那么有絕對的，就有相對的。相對 URL是相對于當前頁面的 URL，不包含協議和域名，僅依賴路徑信息。

具體的：

絕對URL：完整地址直接指向互聯網上的資源，瀏覽器通過 DNS 解析域名，向服務器發起 HTTP/HTTPS 請求獲取目標內容。
相對URL：如（./about.html）或（../contact）
基于當前頁面的 URL 計算目標地址。
若當前頁面為 https://example.com/blog/post
則相對路徑 (./comment )解析為 (https://example.com/blog/comment)，
相對路徑 (../about) 解析為( https://example.com/about)。
這是怎么來的呢? 頁面為 https://example.com/blog/post
.表示當前目錄（也就是當前 URL 路徑的最后一級目錄（不包含文件名）。），即post所在的目錄 /blog/。當前目錄路徑 /blog/ + 剩余路徑 comment = /blog/comment。最終 URL：https://example.com/blog/comment。`
..表示向上一級目錄：從當前目錄 /blog/post 向上一級到 /blog/ 的父級目錄 /（網站根目錄）。拼接規則：上級目錄路徑 / + 剩余路徑 about = /about。最終 URL：https://example.com/about。

提示：如果 URL 以 / 結尾（如 https://example.com/blog/），則當前目錄是最后一個 / 后的空路徑，即 /blog/。
如果 URL 不以 / 結尾（如 https://example.com/blog/post），則當前目錄是最后一個 / 前的路徑，即 /blog/（此時 post 被視為 “文件”）。

符號	描述	作用
`./`	當前目錄	指向當前目錄
`../`	向上一級	向上跳轉一級
`../../`	向上兩級	向上跳轉兩級
`../../../`	向上三級	向上跳轉三級

案例：…/ 的組數決定跳轉層級，但最多只能到達根目錄 /。不會出現 “超出根目錄” 的錯誤，多余的 …/ 會被自動忽略。

當前路徑	相對路徑	解析結果	說明
`/blog/post`	`./comment`	`/bolg/comment`	`./`省略拼接`comment`
`/blog/post`	`../about`	`/about`	一組 `../` 跳到 `/`
`/blog/category/post`	`../../home`	`/home`	兩組`../`跳到 `/`
`/blog/post`	`../../images`	`/images`	兩級 `../` 跳到 `/`，不再向上

瀏覽器觸發行為
瀏覽器會在當前窗口或標簽頁中加載目標地址。
服務器響應與頁面渲染

若目標為服務器端資源（如 .html、.php 文件），瀏覽器向服務器發送請求，服務器返回對應文件內容，瀏覽器解析并渲染新頁面。
若目標為前端路由（如單頁應用 SPA 的 /#/home），則由前端 JavaScript 攔截跳轉，通過 history.pushState() 等 API 實現無刷新頁面更新（AJAX 加載內容）。

2.2 HTML超鏈接

HTML超鏈接

????定義：HTML使用標簽 $< a >$ 來設置超文本鏈接。在標簽 $< a >$ 中使用了 href 屬性來描述鏈接的地址

href
href是定義鏈接目標的屬性。這鏈接的目的地可以是一個網頁，一個文件，一個郵件等等。

$< ah re f = “ h ttp s : // www . e x am pl e . co m " > 訪問 E x am pl e < / a >$

定義鏈接的打開方式

元素	描述
_blank	在新窗口或新標簽頁打開鏈接
_self	在當前窗口或標簽頁打開鏈接
_parent	在父框架中打開鏈接
_top	在整個窗口打開鏈接，取消任何框架

$a href=“https://www.example.com" target=“\_blank" rel=“noopener">新窗口打開 Example</a>$

rel：定義鏈接與目標頁面的關系
nofollow: 表示搜索引擎不應跟蹤該鏈接，常用于外部鏈接。
noopener 和 noreferrer: 防止在新標簽中打開鏈接時的安全問題，尤其是使用 target=“_blank” 時。
noopener: 防止新的瀏覽上下文（頁面）訪問window.opener屬性和open方法。
noreferrer: 不發送referer header（即不告訴目標網站你從哪里來的）。
noopener noreferrer: 同時使用noopener和noreferrer。例子: 安全鏈接

$a href=“https://www.example.com" target=“\_blank" \:\:rel=“noopener noreferrer">安全鏈接</a>$

download：提示瀏覽器下載鏈接目標而不是導航到該目標。

$< ah re f = “ f i l e . p df " d o w n l o a d = “ e x am pl e . p df " > 下載文件 < / a >$

title：定義鏈接的額外信息，當鼠標懸停在鏈接上時顯示的工具提示。

$< ah re f = “ h ttp s : // www . e x am pl e . co m " t i tl e = “ 訪問 E x am pl e 網站 " > 訪問 E x am pl e < / a >$

id：用于鏈接錨點，通常在同一頁面中跳轉到某個特定位置。

下個標題會詳細解釋

hreflang: 指定鏈接的目標URL的語言

$< ah re f = “ h ttp s : // www . e x am pl e . co m / es " h re f l an g = “ es " > 訪問西班牙語網站 < / a >$

type: 指定鏈接資源的MIME類型

$< ah re f = “ s t y l e . css " t y p e = “ t e x t / css " > 樣式表 < / a >$

class: 用于指定元素的類名（CSS中定義）

$< ah re f = “ h ttp s : // www . e x am pl e . co m " c l a ss = “ e x t er na l ? l ink " > 外部鏈接 < / a >$

style: 直接在元素上定義CSS樣式

$< ah re f = “ h ttp s : // www . e x am pl e . co m " s t y l e = “ co l or : re d; " > 紅色鏈接 < / a >$

2.3 target屬性

target屬性

???? 定義被鏈接的文檔在何處顯示。

<a href="https://www.runoob.com/" target="_blank" rel="noopener noreferrer">訪問菜鳥教程!</a>

target屬性有很多值可以選擇，此文章上面有_blank，_self等等

2.4 id屬性

id屬性

???? id屬性創建的 “書簽” 本質是錨點（Anchor），用于標記頁面中的特定位置，方便鏈接跳轉。id 屬性可用于創建一個 HTML 文檔書簽。`提示`: 書簽不會以任何特殊方式顯示，即在 HTML 頁面中是不顯示的，所以對于讀者來說是隱藏的。

什么是書簽？
????HTML 書簽通過給元素添加唯一的id屬性實現(詳細見代碼）

<div id="section-top">錨點位置就是這行！</div>     <!id是屬性名，"section_top"是屬性值。div是html元素>

作用就是為頁面的某個位置分配一個唯一標識符，運行通過鏈接（如href=“#section-top”）直接定位到此地。好比，你去電影院，知道電影廳號，電影廳號就是頁面，而電影廳里面還有很多座位，具體的位置（比如3排23座）就是一個標識符，能讓你定位找到具體的位置，而且這個標識符是唯一的，即不可能在同一個電影廳內找到兩個3排23座。

2.4.1 id屬性在頁面內和不同頁面的定位

同頁面跳轉
通過href="#id"鏈接到當前頁面的錨點。

<!-- 導航鏈接 -->
<a href="#tips">查看提示</a><!-- 錨點位置（書簽） -->
<h2 id="tips">提示</h2>
<p>這里是提示內容...</p>

跨頁面跳轉
在 URL 中添加#id，從其他頁面直接跳轉到目標頁面的錨點。

<!-- 從外部鏈接跳轉到某頁面的"tips"錨點 -->
<a href="https://example.com/article.html#tips">查看文章中的提示</a>    <!瀏覽器解析 URL 時，會先加載article.html，再定位到id="tips"的元素。>

2.5 空鏈接

空鏈接

定義：在 HTML 中，空鏈接是指沒有實際目標地址的鏈接。

方法	作用	是否跳轉	適用場景
href=“#”	定位到頁面頂部	是	占位符，捕獲點擊事件
href=“javascript:void(0)”	阻止默認行為，不刷新頁面	否	阻止跳轉，配合JS使用
href=“”	刷新當前頁面	是	需要頁面刷新時
href=“about:blank”	打開空白頁面	是	新窗口打開空白頁面
role=“button”	鏈接表現為按鈕，無默認行為	否	配合JS實現按鈕功能，無跳轉

3.HTML頭部

????頭部元素就是位于 $< h e a d >$ 標簽內的元數據標簽，用于定義文檔的基本信息（如標題、字符集、樣式表、腳本引用等）。這些標簽不會直接顯示在網頁內容中，但對網頁的性能、兼容性、搜索引擎優化（SEO）和用戶體驗至關重要。
????HTML $< h e a d >$ 元素包含了所有的頭部標簽元素。 $< h e a d >$ 元素中你可以插入腳本（scripts）, 樣式文件（CSS），及各種meta信息。
????可以添加在頭部區域的元素標簽為: $< t i tl e >, < s t y l e >, < m e t a >, < l ink >, < scr i pt >, < n oscr i pt >$ 和 $< ba se >$ 。

標簽	描述
$< h e a d >$	定義了文檔的信息
$< t i tl e >$	定義了文檔的標題
$< ba se >$	定義了頁面鏈接標簽的默認鏈接地址
$< l ink >$	定義了一個文檔和外部資源之間的關系
$< m e t a >$	定義了HTML文檔中的數據
$< scr i pt >$	定于了客戶端的腳本文件
$< s t y l e >$	定義了HTML文檔內的樣式文件

BUT 在此之前，先給個之前發過的代碼簡單看一下腦袋頭部標簽內部的元素有哪些。

<!DOCTYPE html>          	<!聲明文檔類型為 HTML5。告訴瀏覽器使用 HTML5 標準解析頁面，確保兼容性。必須放在 HTML 文件的第一行。>
<html>						<!HTML 文檔的根標簽（起始標簽）。所有HTML元素都要在其后>
<head>						<!頭部標簽（起始標簽），包含文檔元數據。元數據不直接顯示在頁面上，用于描述文檔（如編碼、標題、引入資源）。>
<meta charset="utf-8">		<!UTF-8 是現代網頁的標準編碼>
<title>菜鳥教程(runoob.com)</title>			<!設置頁面標題。顯示在瀏覽器標簽頁和收藏夾中。>
</head>                      <!頭部結束>

3.1 title元素

<title> 標簽定義了不同文檔的標題。
<title> 在 HTML/XHTML 文檔中是必需的。
<title> 元素:
1.定義了瀏覽器工具欄的標題
2.當網頁添加到收藏夾時，顯示在收藏夾中的標題
3.顯示在搜索引擎結果頁面的標題

舉例：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>我這個標題取得好嗎？</title>
</head><body>
文檔內容......
</body></html>

打開.html文件，瀏覽器打開，點擊收藏，去書簽界面，如下圖：

在這里插入圖片描述
顯然標簽頁的名字和收藏夾內頁面的名稱都是title內定義的名字。

3.2 base元素

$< ba se >$ 標簽在 HTML 中用于為文檔內的所有相對 URL 設置基準路徑和默認打開方式。
1. 設置基準URL:

<head>
<base href="www.runoob.com/">
</head>

作用： 頁面中的所有相對鏈接都會自動以http://www.runoob.com/為前綴，最終解析為:www.runoob.com/page.html
比如:

<base href="https://example.com/"> <img src="images/logo.png"> <a href="/">首頁</a>

2. 統一鏈接打開方式

<base target="_blank">

作用： 所有鏈接默認在新標簽頁打開，無需為每個鏈接單獨添加 target="_blank"。

比如:

<base target="_blank"> <a href="page.html">關于我們</a>

但是注意，如果鏈接已經是絕對路徑了，那么base屬性將沒有意義。

3.3 link元素

$< l ink >$ 標簽定義了文檔與外部資源之間的關系，常用于鏈接到樣式表。也就是引入外部資源（如 CSS、圖標、字體等）。

<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>

解釋一下：

rel=“stylesheet”：聲明資源類型為樣式表（CSS）
type=“text/css”：指定資源的 MIME 類型
href=“mystyle.css”：指定 CSS 文件的路徑（本例為相對路徑，表示與當前 HTML 文件同級目錄下的 mystyle.css）。

3.4 style元素

$< s t y l e >$ 標簽定義了HTML文檔的樣式文件引用地址。在 $< s t y l e >$ 元素中你也可以直接添加樣式來渲染 HTML 文檔。

<head> <style type="text/css"> body {background-color:yellow; } p {color:blue } </style> </head>

3.5 meta元素

$< m e t a >$ 標簽提供了元數據.元數據也不顯示在頁面上，但會被瀏覽器解析。通常用于指定網頁的描述，關鍵詞，文件的最后修改時間，作者，和其他元數據。
例如：
為搜索引擎定義關鍵詞：

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

為網頁定義描述內容：

<meta name="description" content="免費 Web & 編程教程">

定義網頁作者：

<meta name="author" content="Runoob">

每30s刷新當前頁面：

<meta http-equiv="refresh" content="30">

3.6 script元素

$< scr i pt >$ 標簽用于加載腳本文件，如： JavaScript。

后續看明天！