前端系列一：HTML

ACatSmiling發表於2024-09-17
前端HTML

Author: ACatSmiling

Since: 2024-09-10

HTML 4

HTML：HyperText Markup Language，超文字標記語言。

超文字的含義：是一種組織資訊的方式，透過超連結將不同空間的文字、圖片等各種資訊組織在一起，能從當前閱讀的內容，跳轉到超連結所指向的內容，如頁面、檔案、錨點、應用等。

相關國際組織：

  • IETF：Internet Engineering Task Force，國際網際網路工程任務組。成立於 1985 年底，是一個權威的網際網路技術標準化組織，主要負責網際網路相關技術規範的研發和制定，當前絕大多數國際網際網路技術標準均出自 IETF。官網：https://www.ietf.org。
  • W3C：World Wide Web Consortium，全球資訊網聯盟。建立於 1994 年，是目前 Web 技術領域，最具影響力的技術標準機構。共計釋出了 200 多項技術標準和實施指南，對網際網路技術的發展和應用起到了基礎性和根本性的支撐作用。官網：https://www.w3.org。
  • WHATWF：Web Hypertext Application Technology Working Group，網頁超文字應用技術工作小組。成立於 2004 年，是一個以推動網路 HTML 5 標準為目的而成立的組織。由 Opera、Mozilla 基金會、蘋果，等這些瀏覽器廠商組成。官網：https://whatwg.org/。

HTML 發展歷史：

image-20231204223848137

  • 目前 HTML 的最新標準是 HMTL 5。

標籤

標籤：又稱元素，是 HTML 的基本組成單位。

  • 標籤分為：雙標籤與單標籤，絕大多數都是雙標籤。

    • 單標籤：

      image-20231204224302800

    • 雙標籤：

      image-20231204224237792

  • 標籤名不區分大小寫，但推薦小寫，因為小寫更規範。

  • 標籤之間的關係：並列關係、巢狀關係，可以使用 tab 鍵進行縮排。

標籤屬性

標籤屬性：用於給標籤提供附加資訊，可以寫在起始標籤或單標籤中。

image-20231204224553202

  • 有些特殊的屬性，沒有屬性名，只有屬性值。例如：

    <input disabled>

  • 規範：

    • 不同的標籤，有不同的屬性；也有一些通用屬性，在任何標籤內都能寫。

    • 屬性名、屬性值不能亂寫，都是 W3C 規定好的。

    • 屬性名、屬性值，都不區分大小寫，但推薦小寫。

    • 雙引號，也可以寫成單引號，甚至不寫都行，但還是推薦寫雙引號。

    • 標籤中不要出現同名屬性，否則後寫的會失效。例如：

      <input type="text" type="password">

基本結構

在網頁中，透過點選滑鼠右鍵，選擇 "檢查"，可以檢視某段結構的具體程式碼。

"檢查" 和 "檢視網頁原始碼" 的區別：

  • "檢查" 看到的是：經過瀏覽器處理後的原始碼。
  • "檢視網頁原始碼" 看到的是：程式設計師編寫的原始碼。

網頁的基本結構如下：

  • 想要呈現在網頁中的內容寫在 body 標籤中。

  • head 標籤中的內容不會出現在網頁中。

  • head 標籤中的 title 標籤可以指定網頁的標題。

  • 圖示：

    image-20231204225242206

  • 程式碼：

    <html>
    <head>
    	<title>網頁標題</title>
    </head>
    
    <body>
    	......
    </body>
</html>

註釋

特點：註釋的內容會被瀏覽器所忽略，不會呈現到頁面中，但原始碼中依然可見。

作用：對程式碼進行解釋和說明。

寫法：

<!-- 下面的文字只能滾動一次 -->
<marquee loop="1">滾動一次</marquee>

<!-- 下面的文字可以無限滾動 -->
<marquee>無限滾動123</marquee>

註釋不可以巢狀，以下寫法是錯的：

<!--
	我是一段註釋
	<!-- 我是一段註釋 -->
-->

文件宣告

作用：告訴瀏覽器當前網頁的版本。

寫法（W3C 推薦使用 HTML 5 的寫法）：

<!DOCTYPE html>
或
<!DOCTYPE HTML>
或
<!doctype html>

注意：文件宣告，必須在網頁的第一行，且在 html 標籤的外側。

字元編碼

平時編寫程式碼時，統一採用 UTF-8 編碼。為了讓瀏覽器在渲染 html 檔案時，不犯錯誤，可以透過 meta 標籤配合 charset 屬性指定字元編碼：

<head>
	<meta charset="UTF-8"/>
</head>

設定語言

主要作用：

  • 讓瀏覽器顯示對應的翻譯提示。
  • 有利於搜尋引擎最佳化。

寫法：

<html lang="zh-CN">

擴充套件知識： lang 屬性的編寫規則。

  1. 第一種寫法（ 語言-國家/地區 ），例如：

    • zh-CN ：中文-中國大陸（簡體中文）。
    • zh-TW ：中文-中國臺灣（繁體中文）。
    • zh ：中文。
    • en-US ：英語-美國。
    • en-GB ：英語-英國。

  2. 第二種寫法（ 語言—具體種類），已不推薦使用，例如：

    • zh-Hans ：中文—簡體。

      zh-Hant ：中文—繁體。

  3. W3School 上的說明：《語言程式碼參考手冊》、《國家/地區程式碼參考手冊》。

  4. W3C 官網上的說明：《Language tags in HTML》。

標準結構

示例：

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>我是一個標題</title>
    </head>
    <body>
    </body>
</html>

輸入!，隨後回車即可快速生成標準結構。

使用 ! 符號，預設生成的是 lang="en"，可以透過以下設定：

image-20231205220032270

在存放程式碼的資料夾中，存放一個 favicon.ico 圖片，可配置網站圖示。示例：

image-20231205220755477

注意：新增圖片之後，可能需要清空快取，重新載入頁面。

排版標籤

標籤名 標籤語義 單/雙標籤
h1 ~ h6 標題 雙
p 段落 雙
div 沒有任何含義，用於整體佈局 雙
  • h1 最好寫一個， h2 ~ h6 能適當多寫。
  • h1 ~ h6 不能互相巢狀。例如：h1 標籤中不要寫 h2 標籤。
  • p 標籤很特殊！它裡面不能有：h1 ~ h6、p、div 標籤。

示例：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>HTML排版標籤</title>
</head>

<body>
    <!-- 
        <h1>我是一級標題</h1>
        <h2>我是二級標題</h2>
        <h3>我是三級標題</h3>
        <h4>我是四級標題</h4>
        <h5>我是五級標題</h5>
        <h6>我是六級標題</h6>
        <div>
            <p>我是一個段落</p>
            <p>我是一個段落</p>
            <p>我是一個段落</p>
        </div>
     -->
    <h1>把個人資訊“安全堤”築牢</h1>
    <h4>2022-06-21 07:34 · 1347條評論</h4>
    <div>
        <p>置身移動互聯時代，人們在享受智慧裝置帶來便利的同時，也在一些場景中面臨個人資訊洩露風險。隨著時間推移，這樣的風險日益呈現出新的表現形式。</p>
        <p>一些APP聲稱看影片、玩遊戲甚至走路都能賺錢，但使用者想提現卻難上加難，還容易洩露個人資訊；新型不法軟體圖示透明、沒有名稱，在手機螢幕上十分隱蔽，不僅不停推送廣告，還會收集並轉賣使用者隱私資訊；個人資訊保安和隱私保護話題引發關注，正說明其涉及群眾切身利益，問題不容小視。
        </p>
    </div>
</body>

</html>

語義化標籤

概念：用特定的標籤，去表達特定的含義。

原則：標籤的預設效果不重要，語義最重要！（後期可以透過 CSS 隨便控制預設效果）

舉例：對於 h1 標籤，效果是文字很大（不重要），語義是網頁主要內容（很重要）。

優點：

  • 程式碼結構清晰可讀性強。
  • 有利於 SEO（搜尋引擎最佳化）。
  • 方便裝置解析，如螢幕閱讀器、盲人閱讀器等。

塊級元素與行內元素

塊級元素：獨佔一行（排版標籤都是塊級元素）。

行內元素：不獨佔一行，例如： input。

使用原則：

  • 塊級元素中能寫行內元素和塊級元素（簡單記：塊級元素中幾乎什麼都能寫）。
  • 行內元素中能寫行內元素，但不能寫塊級元素。
  • 一些特殊的規則：
    • h1 ~ h6 不能互相巢狀。
    • p 中不要寫塊級元素。

Tips：

marquee 元素設計的初衷是：讓文字有動畫效果，但如今可以透過 CSS 來實現，而且還可以實現的更加炫酷，所以 marquee 標籤已經過時了（廢棄了），不推薦使用。

文字標籤

作用：用於包裹詞彙、短語等，通常寫在排版標籤裡面。文字標籤通常都是行內元素。

排版標籤更宏觀（大段的文字），文字標籤更微觀（詞彙、短語）。

常用：

標籤名 標籤語義 單/雙標籤
em 要著重閱讀的內容 雙
strong 十分重要的內容，語氣比 em 要強 雙
span 沒有語義，用於包裹短語的通用容器 雙

不常用：

標籤名 標籤語義 單/雙標籤
cite 作品標題（書籍、歌曲、電影、電視節目、繪畫、雕塑） 雙
dfn 特殊術語 ，或專屬名詞 雙
del 與 ins 刪除的文字【與】插入的文字 雙
sub 與 sup 下標文字【與】上標文字 雙
code 一段程式碼 雙
samp 從正常的上下文中，將某些內容提取出來，例如：標識裝置輸出 雙
kbd 鍵盤文字，表示文字是透過鍵盤輸入的，經常用在與計算機相關的手冊中 雙
abbr 縮寫，最好配合上 title 屬性 雙
bdo 更改文字方向，要配合 dir 屬性，可選值: ltr（預設值）、rtl。ltr 表示從左往右，rtl 表示從右往左。 雙
var 標記變數，可以與 code 標籤一起使用 雙
small 附屬細則，例如：包括版權、法律文字。—— 很少使用 雙
b 摘要中的關鍵字、評論中的產品名稱。—— 很少使用 雙
i 本意是：人物的思想活動、所說的話等等。現在多用於：呈現字型圖示。 雙
u 與正常內容有反差文字，例如：錯的單詞、不合適的描述等。—— 很少使用 雙
q 短引用 —— 很少使用 雙
blockquote 長引用 —— 很少使用 雙
address 地址資訊 雙
  • 這些不常用的文字標籤，編碼時不用過於糾結，酌情而定，不用也沒毛病。
  • blockquote 與 address 是塊級元素，其他的文字標籤，都是行內元素。
  • 有些語義感不強的標籤，我們很少使用，例如：small 、 b 、 u 、 q 、 blockquote。
  • HTML 標籤太多了！記住那些：重要的、語義感強的標籤即可。截止目前，有這些：h1 ~ h6 、 p 、 div 、 em 、 strong 、 span。

圖片標籤

標籤名 標籤語義 常用屬性 單/雙標籤
img 圖片 src：圖片路徑，又稱圖片地址，指圖片的具體位置。
alt：圖片描述。
width：圖片寬度，單位是畫素，例如： 200 px 或 200。
height：圖片高度， 單位是畫素，例如： 200 px 或 200。		 單
  • px表示畫素，是一種單位。
  • 儘量不同時修改圖片的寬和高，可能會造成比例失調。
  • 暫且認為 img 是行內元素。（學到 CSS 時，會認識一個新的元素分類，目前只知道：塊級元素和行內元素）
  • alt屬性的作用：
    • 搜尋引擎可以透過 alt 屬性，得知圖片的內容，這是最主要的作用。
    • 當圖片無法展示時候，有些瀏覽器會呈現 alt 屬性的值。
    • 盲人閱讀器會朗讀 alt 屬性的值。

相對路徑：以當前位置作為參考點，去建立路徑。

  • ./：同級，可以省略不寫。
  • /：下一級。
  • ../：上一級。
  • 相對路徑依賴的是當前位置，後期若調整了檔案位置，那麼檔案中的路徑也要修改。

絕對路徑：以根位置作為參考點，去建立路徑。

  • 本地絕對路徑：E:/a/b/c/奧特曼.jpg。
  • 網路絕對路徑：http://www.atguigu.com/images/index_new/logo.png。
  • 使用本地絕對路徑，一旦更換裝置，路徑處理起來比較麻煩，所以很少使用。
  • 使用網路絕對路徑，確實方便，但要注意：若伺服器開啟了防盜鏈，會造成圖片引入失敗。

示例：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>HTML_圖片標籤</title>
</head>

<body>
    <img width="200" src="奧特曼.jpg" alt="奧特曼，你相信光嗎？">
    <img width="200" src="奧特曼2.jpg" alt="奧特曼，你相信光嗎？">
</body>

</html>

常見圖片格式：

  • jpg格式：

    • 概述：副檔名為.jpg或.jpeg，是一種有損的壓縮格式（把肉眼不容易觀察出來的細節丟棄了）。
    • 主要特點：支援的顏色豐富、佔用空間較小、不支援透明背景、不支援動態圖。
    • 使用場景：對圖片細節沒有極高要求的場景。例如：網站的產品宣傳圖等 。（該格式在網頁中很常見）

  • png格式：

    • 概述：副檔名為.png，是一種無損的壓縮格式，能夠更高質量的儲存圖片。
    • 主要特點：支援的顏色豐富、佔用空間略大、支援透明背景、不支援動態圖。
    • 使用場景：想讓圖片有透明背景；想更高質量的呈現圖片。例如：公司 logo 圖、重要配圖等。

  • bmp格式：

    • 概述：副檔名為.bmp，不進行壓縮的一種格式，在最大程度上保留圖片更多的細節。
    • 主要特點：支援的顏色豐富、保留的細節更多、佔用空間極大、不支援透明背景、不支援動態圖。
    • 使用場景：對圖片細節要求極高的場景。例如：一些大型遊戲中的圖片 。（網頁中很少使用）

  • gif格式：

    • 概述：副檔名為.gif，僅支援 256 種顏色，色彩呈現不是很完整。
    • 主要特點：支援的顏色較少、支援簡單透明背景、支援動態圖。
    • 使用場景：網頁中的動態圖片。

  • webp格式：

    • 概述：副檔名為.webp，谷歌推出的一種格式，專門用來在網頁中呈現圖片。
    • 主要特點：具備上述幾種格式的優點，但相容性不太好，一旦使用務必要解決相容性問題。
    • 使用場景：網頁中的各種圖片。

  • base64格式：

    • 本質：一串特殊的文字，要透過瀏覽器開啟，傳統看圖應用通常無法開啟。

    • 原理：把圖片進行 base64 編碼，形成一串文字。

    • 如何生成：靠一些工具或網站。

    • 如何使用：直接作為 img 標籤的 src 屬性的值即可，並且不受檔案位置的影響。

    • 使用場景：一些較小的圖片，或者需要和網頁一起載入的圖片。

    • 示例：

      <!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>演示base64圖片</title>
</head>

<body>
    <img src="./奧特曼.jpg" alt="">
    <img src="./path_test/怪獸.jpg" alt="">

    <!-- base64圖片 -->
    <img src="data:image/png;base64,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"
        alt="">
</body>

</html>

圖片的格式非常多，上面這些，只是一些常見的、前端人員常接觸到的。

超連結

標籤名 標籤語義 常用屬性 單/雙標籤
a 超連結 href：指定要跳轉到的具體目標。
target：控制跳轉時如何開啟頁面。常用值如下：
_self：在本視窗開啟，預設值。
_blank：在新視窗開啟。
id：元素的唯一 標識，可用於設定錨點。
name：元素的名字，寫在 a 標籤中，也能設定錨點。		 雙

主要作用：從當前頁面進行跳轉。

可以實現：①跳轉到指定頁面、②跳轉到指定檔案（也可觸發下載）、③跳轉到錨點位置、④喚起指定應用。

示例：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>超連結_跳轉頁面</title>
</head>

<body>
    <a href="https://miaosha.jd.com/" target="_self">去秒殺</a>
    <a href="https://www.baidu.com/" target="_blank">去百度</a>
    <a href="./10_HTML排版標籤.html">去排版標籤</a>

    <a href="./10_HTML排版標籤.html">
        <img width="50" src="./奧特曼.jpg" alt="奧特曼">
    </a>
</body>

</html>

跳轉到頁面

示例：

<!-- 跳轉其他網頁 -->
<a href="https://www.jd.com/" target="_blank">去京東</a>

<!-- 跳轉本地網頁 -->
<a href="./10_HTML排版標籤.html" target="_self">去看排版標籤</a>

注意：

  • 程式碼中的多個空格、多個回車，都會被瀏覽器解析成一個空格！
  • 雖然 a 標籤是行內元素，但 a 標籤可以包裹除它自身外的任何元素！

跳轉到檔案

示例：

<!-- 瀏覽器能直接開啟的檔案 -->
<a href="./resource/自拍.jpg">看自拍</a>
<a href="./resource/小電影.mp4">看小電影</a>
<a href="./resource/小姐姐.gif">看小姐姐</a>
<a href="./resource/如何一夜暴富.pdf">點我一夜暴富</a>

<!-- 瀏覽器不能開啟的檔案，會自動觸發下載 -->
<a href="./resource/內部資源.zip">內部資源</a>

<!-- 強制觸發下載 -->
<a href="./resource/小電影.mp4" download="電影片段.mp4">下載電影</a>

注意：

  • 若瀏覽器無法開啟檔案，則會引導使用者下載。
  • 若希望強制觸發下載，請使用download屬性，屬性值即為下載檔案的名稱。

跳轉到錨點

錨點：網頁中的一個標記點。

使用方式：

  1. 第一步：設定錨點。

    <!-- 第一種方式：a標籤配合name屬性 -->
<a name="test1"></a>

<!-- 第二種方式：其他標籤配合id屬性，推薦 -->
<h2 id="test2">我是一個位置</h2>
    • 具有 href 屬性的 a 標籤是超連結，具有 name 屬性的 a 標籤是錨點。
    • name 和 id 都是區分大小寫的，且 id 最好別是數字開頭。

  2. 第二步：跳轉錨點。

    <!-- 跳轉到test1錨點，#不可省略 -->
<a href="#test1">去test1錨點</a>

<!-- 跳到本頁面頂部，頁面沒有變化，捲軸拉到頂部 -->
<a href="#">回到頂部</a>

<!-- 跳轉到其他頁面錨點 -->
<a href="demo.html#test1">去demo.html頁面的test1錨點</a>

<!-- 重新整理本頁面，頁面重新整理，然後回到頂部 -->
<a href="">重新整理本頁面</a>

<!-- 執行一段js (在:和;中間書寫js指令碼)，如果還不知道執行什麼，可以留空：javascript:; -->
<a href="javascript:alert(1);">點我彈窗</a>

示例：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>超連結_跳轉錨點</title>
</head>

<body>
    <a href="#htl">看灰太狼</a>
    <a href="#atm">看奧特曼</a>

    <p>我是一隻羊，一隻很肥美的羊</p>
    <img src="./path_test/a/喜羊羊.jpg" alt="喜羊羊">

    <a name="htl"></a>
    <p>我是一隻狼，一隻很邪惡的狼</p>
    <img src="./path_test/a/b/灰太狼.jpg" alt="灰太狼">

    <p id="atm">我是一隻奧特曼，一隻很能打的奧特曼</p>
    <img src="./奧特曼.jpg" alt="奧特曼">

    <p>我是一隻怪獸，一隻很醜的怪獸</p>
    <img src="./path_test/怪獸.jpg" alt="怪獸">

    <p>整體的介紹完畢了</p>
    <a href="#">回到頂部</a>
    <a href="">重新整理頁面</a>
    <a href="javascript:;">點我彈窗</a>
</body>

</html>

喚起指定應用

透過 a 標籤，可以喚起裝置上的應用程式。

<!-- 喚起裝置撥號 -->
<a href="tel:10010">電話聯絡</a>

<!-- 喚起裝置傳送郵件 -->
<a href="mailto:10010@qq.com">郵件聯絡</a>

<!-- 喚起裝置傳送簡訊 -->
<a href="sms:10086">簡訊聯絡</a>

示例：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>超連結_喚起指定應用</title>
</head>

<body>
    <a href="tel:10010">電話聯絡</a>
    <a href="mailto:1234567@qq.com">郵件聯絡</a>
    <a href="sms:10086">簡訊聯絡</a>
</body>

</html>

列表

有序列表

概念：有順序或側重順序的列表。

示例：

<h2>要把大象放冰箱總共分幾步</h2>
<ol>
    <li>把冰箱門開啟</li>
    <li>把大象放進去</li>
    <li>把冰箱門關上</li>
</ol>

無序列表

概念：無順序或不側重順序的列表。

示例：

<h2>我想去的幾個城市</h2>
<ul>
    <li>成都</li>
    <li>上海</li>
    <li>西安</li>
    <li>武漢</li>
</ul>

巢狀列表

概念：列表中的某項內容，又包含一個列表（注意：巢狀時，請務必把解構寫完整）。

示例：

<h2>我想去的幾個城市</h2>
<ul>
    <li>成都</li>
    <li>
        <span>上海</span>
        <ul>
            <li>外灘</li>
            <li>杜莎夫人蠟像館</li>
            <li>
            	<a href="https://www.opg.cn/">東方明珠</a>
            </li>
            <li>迪士尼樂園</li>
    	</ul>
    </li>
    <li>西安</li>
    <li>武漢</li>
</ul>

注意：li 標籤最好寫在 ul 或 ol 中，不要單獨使用。

自定義列表

概念：所謂自定義列表，就是一個包含術語名稱以及術語描述的列表。

示例：

<h2>如何高效的學習？</h2>
<dl>
    <dt>做好筆記</dt>
    <dd>筆記是我們以後複習的一個抓手</dd>
    <dd>筆記可以是電子版，也可以是紙質版</dd>
    <dt>多加練習</dt>
    <dd>只有敲出來的程式碼，才是自己的</dd>
    <dt>別怕出錯</dt>
    <dd>錯很正常，改正後並記住，就是經驗</dd>
</dl>
  • 一個dl就是一個自定義列表，一個dt就是一個術語名稱，一個dd就是術語描述（可以有多個）。

表格

基本結構

一個完整的表格由：表格標題、表格頭部、表格主體、表格腳註，四部分組成。

image-20231208224628843

表格涉及到的標籤：

  • tabl：表格。

  • caption：表格標題。

  • thead：表格頭部。

  • tr：每一行。

  • th、td：每一個單元格。（備註：表格頭部中用 th ，表格主體、表格腳註中用 td。）

    image-20231208224857966

    image-20231208225024172

    image-20231208225041298

示例：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>表格_整體結構</title>
</head>

<body>
    <table border="1">
        <!-- 表格標題 -->
        <caption>學生資訊</caption>
        <!-- 表格頭部 -->
        <thead>
            <tr>
                <th>姓名</th>
                <th>性別</th>
                <th>年齡</th>
                <th>民族</th>
                <th>政治面貌</th>
            </tr>
        </thead>
        <!-- 表格主體 -->
        <tbody>
            <tr>
                <td>張三</td>
                <td>男</td>
                <td>18</td>
                <td>漢族</td>
                <td>團員</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>女</td>
                <td>20</td>
                <td>滿族</td>
                <td>群眾</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>男</td>
                <td>19</td>
                <td>回族</td>
                <td>黨員</td>
            </tr>
            <tr>
                <td>趙六</td>
                <td>女</td>
                <td>21</td>
                <td>壯族</td>
                <td>團員</td>
            </tr>
        </tbody>
        <!-- 表格腳註 -->
        <tfoot>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>共計：4人</td>
            </tr>
        </tfoot>
    </table>
</body>

</html>

常用屬性

標籤名 標籤語義 常用屬性 單/雙標籤
table 表格 width：設定表格寬度。
height：設定表格最小高度，表格最終高度可能比設定的值大。
border：設定表格邊框寬度。
cellspacing： 設定單元格之間的間距。		 雙
thead 表格頭部 height：設定表格頭部高度。
align： 設定單元格的水平對齊方式，可選值如下：
left：左對齊
center：中間對齊
right：右對齊
valign：設定單元格的垂直對齊方式，可選值如下：
top：頂部對齊
middle：中間對齊
bottom：底部對齊		 雙
tbody 表格主體 常用屬性與 thead 相同。 雙
tfoot 表格腳註 常用屬性與 thead 相同。 雙
tr 行 常用屬性與 thead 相同。 雙
td 普通單元格 width：設定單元格的寬度，同列所有單元格全都受影響。
heigth：設定單元格的高度，同行所有單元格全都受影響。
align：設定單元格的水平對齊方式。
valign：設定單元格的垂直對齊方式。
rowspan：指定要跨的行數。
colspan：指定要跨的列數。		 雙
th 表頭單元格 常用屬性與 td 相同。 雙
  • <table>元素的 border 屬性可以控制表格邊框，但 border 值的大小，並不控制單元格邊框的寬度，只能控制表格最外側邊框的寬度，這個問題如何解決？—— 後期靠 CSS 控制。
  • 預設情況下，每列的寬度，得看這一列單元格最長的那個文字。
  • 給某個 th 或 td 設定了寬度之後，它們所在的那一列的寬度就確定了。
  • 給某個 th 或 td 設定了高度之後，它們所在的那一行的高度就確定了。

示例：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>表格_常用屬性</title>
</head>

<body>
    <table border="1" width="500" height="500" cellspacing="0">
        <!-- 表格標題 -->
        <caption>學生資訊</caption>
        <!-- 表格頭部 -->
        <thead height="50" align="center" valign="middle">
            <tr>
                <th width="50" height="50" align="right" valign="bottom">姓名</th>
                <th>性別</th>
                <th>年齡</th>
                <th>民族</th>
                <th>政治面貌</th>
            </tr>
        </thead>
        <!-- 表格主體 -->
        <tbody height="520" align="center" valign="middle">
            <tr height="50" align="center" valign="middle">
                <td>張三</td>
                <td>男</td>
                <td>18</td>
                <td>漢族</td>
                <td>團員</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>女</td>
                <td>20</td>
                <td>滿族</td>
                <td>群眾</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>男</td>
                <td>19</td>
                <td>回族</td>
                <td>黨員</td>
            </tr>
            <tr>
                <td align="right" valign="top">趙六</td>
                <td>女</td>
                <td>21</td>
                <td>壯族</td>
                <td>團員</td>
            </tr>
        </tbody>
        <!-- 表格腳註 -->
        <tfoot height="50" align="center" valign="middle">
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>共計：4人</td>
            </tr>
        </tfoot>
    </table>
</body>

</html>

跨行跨列

標籤：

  • rowspan：指定要跨的行數。
  • colspan：指定要跨的列數。

示例，課程表效果圖：

image-20231208230338754

示例：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>表格_跨行與跨列</title>
</head>

<body>
    <table border="1" cellspacing="0">
        <caption>課程表</caption>
        <thead>
            <tr>
                <th>專案</th>
                <th colspan="5">上課</th>
                <th colspan="2">活動與休息</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>星期</td>
                <td>星期一</td>
                <td>星期二</td>
                <td>星期三</td>
                <td>星期四</td>
                <td>星期五</td>
                <td>星期六</td>
                <td>星期日</td>
            </tr>
            <tr>
                <td rowspan="4">上午</td>
                <td>3-2</td>
                <td>3-3</td>
                <td>3-4</td>
                <td>3-5</td>
                <td>3-6</td>
                <td>3-7</td>
                <td rowspan="4">休息</td>
            </tr>
            <tr>
                <td>4-2</td>
                <td>4-3</td>
                <td>4-4</td>
                <td>4-5</td>
                <td>4-6</td>
                <td>4-7</td>
            </tr>
            <tr>
                <td>5-2</td>
                <td>5-3</td>
                <td>5-4</td>
                <td>5-5</td>
                <td>5-6</td>
                <td>5-7</td>
            </tr>
            <tr>
                <td>6-2</td>
                <td>6-3</td>
                <td>6-4</td>
                <td>6-5</td>
                <td>6-6</td>
                <td>6-7</td>
            </tr>
            <tr>
                <td rowspan="2">下午</td>
                <td>7-2</td>
                <td>7-3</td>
                <td>7-4</td>
                <td>7-5</td>
                <td>7-6</td>
                <td>7-7</td>
                <td rowspan="2">休息</td>
            </tr>
            <tr>
                <td>8-2</td>
                <td>8-3</td>
                <td>8-4</td>
                <td>8-5</td>
                <td>8-6</td>
                <td>8-7</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

其他常用標籤

標籤名 標籤語義 單/雙標籤
br 換行 單
hr 分隔 單
pre 按原文顯示，一般用於在頁面中嵌入大段程式碼 雙
  • 不要用<br>來增加文字之間的行間隔，應使用<p>元素，或後面即將學到的 CSS margin 屬性。
  • <hr>的語義是分隔，如果不想要語義，只是想畫一條水平線，那麼應當使用 CSS 完成。

示例：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>補充幾個常用的標籤</title>
</head>

<body>
    <!-- 換行標籤 -->
    <a href="https://www.baidu.com">去百度</a>
    <br>
    <a href="https://www.jd.com">去京東</a>
    <!-- 分割線 -->
    <div>第一章</div>
    <p>xxxxxx，就這樣最後王子和公主就在一起了！</p>
    <hr>
    <div>第二章</div>
    <p>一個月黑風高的晚上，xxxxxxxxxxxxxx</p>
    <!-- 按原文顯示 -->
    <pre>
        I      Love      You
           I   Love   You
               Love
    </pre>
</body>

</html>

pre 元素中的內容，多個空格都保留了原樣。

表單

概念：一個包含互動的區域，用於收集使用者提供的資料。

基本結構

標籤名 標籤語義 常用屬性 單/雙標籤
form 表單 action：用於指定表單的提交地址（需要與後端人員溝通後確定）
target：用於控制表單提交後，如何開啟頁面，常用值如下：
_self：在本視窗開啟，預設值
_blank：在新視窗開啟
method：用於控制表單的提交方式，暫時只需瞭解，詳見Ajax		 雙
input 輸入框 type：設定輸入框的型別，目前用到的值是 text ，表示普通文字
name：用於指定提交資料的名字（需要與後端人員溝通後確認）		 單
button 按鈕 詳見後文 雙

示例：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>表單_基本結構</title>
</head>

<body>
    <form action="https://www.baidu.com/s">
        <input type="text" name="wd">
        <button>去百度搜尋</button>
    </form>
    <hr>
    <form action="https://search.jd.com/search" target="_self" method="get">
        <input type="text" name="keyword">
        <button>去京東搜尋</button>
    </form>
    <hr>
    <a href="https://search.jd.com/search?keyword=手機">搜尋手機</a>
</body>

</html>

input標籤的 name 屬性值，對應後臺請求引數名，不能隨意定義。

常用表單控制元件

文字輸入框
<input type="text">

常用屬性：

  • name屬性：資料的名稱。

  • value屬性：輸入框的預設輸入值。

  • maxlength屬性：輸入框最大可輸入長度。

密碼輸入框
<input type="password">

常用屬性：

  • name屬性：資料的名稱。
  • value屬性：輸入框的預設輸入值（一般不用，無意義）。
  • maxlength屬性：輸入框最大可輸入長度。
單選框
<input type="radio" name="sex" value="female">女
<input type="radio" name="sex" value="male">男

常用屬性：

  • name屬性：資料的名稱。注意：想要單選效果，多個 radio 的 name 屬性值要保持一致。
  • value屬性：提交的資料值。
  • checked屬性：讓該單選按鈕預設選中。
核取方塊
<input type="checkbox" name="hobby" value="smoke">抽菸
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="perm">燙頭

常用屬性：

  • name屬性：資料的名稱。
  • value屬性：提交的資料值。
  • checked屬性：讓該核取方塊預設選中。
文字域
<textarea name="msg" rows="22" cols="3">我是文字域</textarea>

常用屬性：

  • rows屬性：指定預設顯示的行數，會影響文字域的高度。
  • cols屬性：指定預設顯示的列數，會影響文字域的寬度。
  • 不能編寫 type 屬性，其他屬性，與普通文字輸入框一致。
下拉框
<select name="from">
    <option value="黑">黑龍江</option>
    <option value="遼">遼寧</option>
    <option value="吉">吉林</option>
    <option value="粵" selected>廣東</option>
</select>

常用屬性：

  • name屬性：指定資料的名稱。
  • option標籤設定value屬性， 如果沒有 value 屬性，提交的資料是 option 中間的文字；如果設定了 value 屬性，提交的資料就是 value 的值（建議設定 value 屬性）。
  • option 標籤設定了selected屬性，表示預設選中。
隱藏域
<input type="hidden" name="tag" value="100">

使用者不可見的一個輸入區域，作用是： 提交表單的時候，攜帶一些固定的資料。

  • name屬性：指定資料的名稱。

  • value屬性：指定的是真正提交的資料。

提交按鈕
<input type="submit" value="點我提交表單">

<button>點我提交表單</button>

注意：

  • button 標籤 type 屬性的預設值是submit。
  • button 不要指定 name 屬性。（input 方式也不要指定 name 屬性）
  • input 標籤編寫的按鈕，使用 value 屬性指定按鈕文字。
重置按鈕
<input type="reset" value="點我重置">

<button type="reset">點我重置</button>

注意：

  • button 不要指定 name 屬性。（input 方式也不要指定 name 屬性）
  • input 標籤編寫的按鈕，使用 value 屬性指定按鈕文字。
普通按鈕
<input type="button" value="普通按鈕">

<button type="button">普通按鈕</button>

注意：

  • 普通按鈕的 type 值為 button，若不寫，button 元素的 type 屬性值預設是 submit，點選會引起表單的提交。
示例
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>表單_常用控制元件</title>
</head>

<body>
    <form action="https://search.jd.com/search">
        <!-- 文字輸入框 -->
        賬戶：<input type="text" name="account" value="zhangsan" maxlength="10"><br>
        <!-- 密碼輸入框 -->
        密碼：<input type="password" name="pwd" value="123" maxlength="6"><br>
        <!-- 單選框 -->
        性別：
        <input type="radio" name="gender" value="male">男
        <input type="radio" name="gender" value="female" checked>女<br>
        <!-- 多選框 -->
        愛好：
        <input type="checkbox" name="hobby" value="smoke" checked>抽菸
        <input type="checkbox" name="hobby" value="drink">喝酒
        <input type="checkbox" name="hobby" value="perm" checked>燙頭<br>
        <!-- 文字域 -->
        其他：
        <textarea name="other" cols="23" rows="3"></textarea><br>
        <!-- 下拉框 -->
        籍貫：
        <select name="place">
            <option value="冀">河北</option>
            <option value="魯">山東</option>
            <option value="晉" selected>山西</option>
            <option value="粵">廣東</option>
        </select>
        <!-- 隱藏域 -->
        <input type="hidden" name="from" value="toutiao">
        <br>
        <!-- 確認按鈕_第一種寫法 -->
        <button type="submit">確認</button>
        <!-- 確認按鈕_第二種寫法 -->
        <!-- <input type="submit" value="確認"> -->
        <!-- 重置按鈕_第一種寫法 -->
        <!-- <button type="reset">重置</button> -->
        <!-- 重置按鈕_第二種寫法 -->
        <input type="reset" value="點我重置">
        <!-- 普通按鈕_第一種寫法 -->
        <input type="button" value="檢測賬戶是否被註冊">
        <!-- 普通按鈕_第二種寫法 -->
        <!-- <button type="button">檢測賬戶是否被註冊</button> -->
    </form>
</body>

</html>

禁用表單控制元件

給表單控制元件的標籤設定disabled，既可禁用表單控制元件。

input、textarea、button、select、option 都可以設定 disabled 屬性。

示例：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>表單_禁用表單控制元件</title>
</head>

<body>
    <form action="https://search.jd.com/search">
        <!-- 文字輸入框 -->
        賬戶：<input disabled type="text" name="account" value="zhangsan" maxlength="10"><br>
        <!-- 密碼輸入框 -->
        密碼：<input type="password" name="pwd" value="123" maxlength="6"><br>
        <!-- 單選框 -->
        性別：
        <input type="radio" name="gender" value="male">男
        <input type="radio" name="gender" value="female" checked>女<br>
        <!-- 多選框 -->
        愛好：
        <input type="checkbox" name="hobby" value="smoke" checked>抽菸
        <input type="checkbox" name="hobby" value="drink">喝酒
        <input type="checkbox" name="hobby" value="perm" checked>燙頭<br>
        其他：
        <textarea name="other" cols="23" rows="3"></textarea><br>
        籍貫：
        <select name="place">
            <option value="冀">河北</option>
            <option value="魯">山東</option>
            <option value="晉" selected>山西</option>
            <option value="粵">廣東</option>
        </select>
        <!-- 隱藏域 -->
        <input type="hidden" name="from" value="toutiao">
        <br>
        <!-- 確認按鈕_第一種寫法 -->
        <button type="submit">確認</button>
        <!-- 確認按鈕_第二種寫法 -->
        <!-- <input type="submit" value="確認"> -->
        <!-- 重置按鈕_第一種寫法 -->
        <!-- <button type="reset">重置</button> -->
        <!-- 重置按鈕_第二種寫法 -->
        <input type="reset" value="點我重置">
        <!-- 普通按鈕_第一種寫法 -->
        <input disabled type="button" value="檢測賬戶是否被註冊">
        <!-- 普通按鈕_第二種寫法 -->
        <!-- <button type="button">檢測賬戶是否被註冊</button> -->
    </form>
</body>

</html>

  • 注意檢視 "賬戶" 輸入框和 "檢測賬戶是否被註冊" 按鈕，二者使用了 disabled 屬性，頁面上被置灰不可用。

    image-20231209214817955

label 標籤

label標籤可與表單控制元件相關聯，關聯之後點選文字，與之對應的表單控制元件就會獲取焦點。

兩種與 label 關聯方式如下：

  1. 讓 label 標籤的 for 屬性的值，等於表單控制元件的 id。
  2. 把表單控制元件套在 label 標籤的裡面。

示例：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>表單_label標籤</title>
</head>

<body>
    <form action="https://search.jd.com/search">
        <label for="zhanghu">賬戶：</label>
        <input id="zhanghu" type="text" name="account" maxlength="10"><br>
        <label>
            密碼：
            <input id="mima" type="password" name="pwd" maxlength="6">
        </label>
        <br>
        性別：
        <input type="radio" name="gender" value="male" id="nan">
        <label for="nan">男</label>
        <label>
            <input type="radio" name="gender" value="female" id="nv">女
        </label>
        <br>
        愛好：
        <label>
            <input type="checkbox" name="hobby" value="smoke">抽菸
        </label>
        <label>
            <input type="checkbox" name="hobby" value="drink">喝酒
        </label>
        <label>
            <input type="checkbox" name="hobby" value="perm">燙頭
        </label><br>
        <label for="qita">其他：</label>
        <textarea id="qita" name="other" cols="23" rows="3"></textarea><br>
        籍貫：
        <select name="place">
            <option value="冀">河北</option>
            <option value="魯">山東</option>
            <option value="晉">山西</option>
            <option value="粵">廣東</option>
        </select>
        <input type="hidden" name="from" value="toutiao">
        <br>
        <input type="submit" value="確認">
        <input type="reset" value="點我重置">
        <input type="button" value="檢測賬戶是否被註冊">
    </form>
</body>

</html>

fieldset 與 legend 的使用

fieldset可以為表單控制元件分組，legend標籤是分組的標題。

示例：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>表單_label標籤</title>
</head>

<body>
    <form action="https://search.jd.com/search">
        <label for="zhanghu">賬戶：</label>
        <input id="zhanghu" type="text" name="account" maxlength="10"><br>
        <label>
            密碼：
            <input id="mima" type="password" name="pwd" maxlength="6">
        </label>
        <br>
        性別：
        <input type="radio" name="gender" value="male" id="nan">
        <label for="nan">男</label>
        <label>
            <input type="radio" name="gender" value="female" id="nv">女
        </label>
        <br>
        愛好：
        <label>
            <input type="checkbox" name="hobby" value="smoke">抽菸
        </label>
        <label>
            <input type="checkbox" name="hobby" value="drink">喝酒
        </label>
        <label>
            <input type="checkbox" name="hobby" value="perm">燙頭
        </label><br>
        <label for="qita">其他：</label>
        <textarea id="qita" name="other" cols="23" rows="3"></textarea><br>
        籍貫：
        <select name="place">
            <option value="冀">河北</option>
            <option value="魯">山東</option>
            <option value="晉">山西</option>
            <option value="粵">廣東</option>
        </select>
        <input type="hidden" name="from" value="toutiao">
        <br>
        <input type="submit" value="確認">
        <input type="reset" value="點我重置">
        <input type="button" value="檢測賬戶是否被註冊">
    </form>
</body>

</html>

效果：

image-20231209215944175

框架標籤

標籤名 標籤語義 屬性 單/雙標籤
iframe 框架（在網頁中嵌入其他檔案） name：框架名稱，可以與 target 屬性配置
width：框架的寬度
height：框架的高度
frameborder：是否顯示邊框，值為 0 或者 1		 雙

iframe 標籤的實際應用：

  1. 在網頁中嵌入廣告。
  2. 與超連結或表單的 target 配合，展示不同的內容。

示例：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>框架標籤</title>
</head>

<body>
    <!-- 利用iframe嵌入一個普通網頁 -->
    <iframe src="https://www.toutiao.com" width="900" height="300" frameborder="0"></iframe>
    <br>

    <!-- 利用iframe嵌入一個廣告網頁 -->
    <!-- <iframe width="300" height="250" src="https://pos.baidu.com/xchm?conwid=300&conhei=250&rdid=5841072&dc=3&di=u5841072&s1=2619619085&s2=735691552&dri=1&dis=0&dai=24&ps=2557x1059&enu=encoding&exps=110283,110277,110273,110261,110254,110011&ant=0&psi=ec321235870ce038&dcb=___adblockplus_&dtm=HTML_POST&dvi=0.0&dci=-1&dpt=none&tpr=1675046784135&ti=%E7%BD%91%E6%98%93%E6%96%B0%E9%97%BB&ari=2&ver=0129&dbv=2&drs=4&pcs=1519x763&pss=1519x11348&cfv=0&cpl=5&chi=2&cce=true&cec=UTF-8&tlm=1675046701&prot=2&rw=763&ltu=https%3A%2F%2Fnews.163.com%2F&ecd=1&fpt=TSqlzRKQUoc9+DbwoBg+b3cB10ATMyxUj3wjiV0jemwIVBo7z2ECouhUiVZq9IXN5cuofEzg/QDLSl5smhScYpTN+HQc3+QhnKv3H8MhzCYvAEcKDXAQAxK1FTXUdEd7J70MlzGWjb5DY6rlVbwmYbud1lCLmHxH5enja3K/dBHQzpLvsZCQqnanh/vBkkBTauX5z2jCEQvudlFgU1sHGA2kmnPoF0fHQA756T+sNKjATCqWL62CuVSrPm52Es2xtwueTF6sREr61IdA4wcZwEObe67hCIHPeGk5UX48Fw06RMTjgGDr6oQhyEpAeW3u9Gi0qHTYg8wBI1yoBmmwhuh0MpxtrJcLm0tGY4ODYGriOVhYwo/vU1cGOPrxvZG39yCve9+xcc7sVW4DBkCezA==|2UoaY428DIL/VGPLaRon4l5i5WbAevIWwjj0W0sj4LU=|10|d42cad75cac5486feb0f88674f9a220a&dft=0&uc=1536x834&pis=-1x-1&sr=1536x864&tcn=1675046784&qn=75c4f389da0f062c&ft=1" frameborder="0"></iframe> -->
    <br>

    <!-- 利用iframe嵌入其他內容，例如圖片（瀏覽器能開啟的，都可以嵌入，無法開啟的會提示下載，如.zip檔案） -->
    <iframe src="./resource/小姐姐.gif" frameborder="0"></iframe>
    <br>

    <!-- 與超連結的target屬性配合使用 -->
    <a href="https://www.toutiao.com" target="container">點我看新聞</a>
    <a href="https://www.taobao.com" target="container">點我看淘寶</a><br>
    <!-- 與表單的target屬性配合使用 -->
    <form action="https://so.toutiao.com/search" target="container">
        <input type="text" name="keyword">
        <input type="submit" value="搜尋">
    </form>

    <!-- 超連結或者表單的target屬性，與iframe的name屬性相同，配合使用以展示不同的內容 -->
    <iframe name="container" frameborder="0" width="900" height="300"></iframe>

</body>

</html>

字元實體

在 HTML 中，我們可以用一種特殊的形式的內容，來表示某個符號，這種特殊形式的內容，就是 HTML 字元實體。比如小於號 < 是用於定義 HTML 標籤的開始，如果我們希望瀏覽器正確地顯示 > 這種字元，就必須在 HTML 原始碼中插入字元實體。

字元實體由三部分組成：一個&和 一個實體名稱（或者一個#和 一個實體編號），最後加上一個分號;。

常見字元實體：

image-20231209231259002

完整實體列表，參考：https://html.spec.whatwg.org/multipage/named-characters.html#named-character-references

示例：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>HTML字元實體</title>
</head>

<body>
    <div>我 美女</div>
    <div>我&nbsp;&nbsp;&nbsp;&nbsp;美女</div>
    <div>我&#160;&#160;&#160;&#160;美女</div>
    <div>我們學習過很多的標題標籤，其中&lt;h1&gt;是最厲害的一個！</div>
    <div>我們今天學習了一個可以表示空格的字元實體，它是：&amp;nbsp;</div>
    <div>我們今天學習了一個可以表示&的字元實體，它是：&amp;amp;</div>
    <div>當前商品的價格是：￥199</div>
    <div>當前商品的價格是：¥199</div>
    <div>當前商品的價格是：&yen;199</div>
    <div>©版權所有</div>
    <div>&copy;版權所有</div>
    <div>2 * 2 = 4</div>
    <div>2 x 2 = 4</div>
    <div>2 × 2 = 4</div>
    <div>2 &times; 2 = 4</div>
    <div>2 / 2 = 1</div>
    <div>2 ÷ 2 = 1</div>
    <div>2 &divide; 2 = 1</div>
</body>

</html>

全域性屬性

常用的全域性屬性：

屬性名 含義
id 給標籤指定唯一標識，注意：id 是不能重複的
作用：可以讓 label 標籤與表單控制元件相關聯；也可以與 CSS 、 JavaScript 配合使用
不能在以下 HTML 元素中使用：<head>、<html>、<meta>、<script>、<style>、<title>
class 給標籤指定類名，隨後透過 CSS 就可以給標籤設定樣式
style 給標籤設定 CSS 樣式
dir 內容的方向，值：ltr 、 rtl
不能在以下 HTML 元素中使用：<head>、<html>、<meta>、<script>、<style>、<title>
title 給標籤設定一個文字提示，一般超連結和圖片用得比較多。
lang 給標籤指定語言
不能在以下 HTML 元素中使用：<head>、<html>、<meta>、<script>、<style>、<title>

完整的全域性屬性，參考：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes

示例：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>HTML全域性屬性</title>
    <style>
        .student {
            color: red;
        }
    </style>
</head>

<body>
    <div id="hello1">你好啊！</div>
    <div id="hello2">你好啊2！</div>
    <div class="student">張三</div>
    <div class="student">李四</div>
    <div style="color:green">旺財</div>
    <bdo dir="rtl">你是年少的歡喜</bdo>
    <div dir="rtl">你是年少的歡喜</div>
    <div title="英雄聯盟">LOL</div>
    <a href="https://www.baidu.com" title="去百度">去百度</a>
    <div lang="en">hello</div>
</body>

</html>

meta 元資訊

meta 元資訊，也就是網頁的基本資訊，常見的有：

  • 配置字元編碼：

    <meta charset="utf-8">

  • 針對 IE 瀏覽器的相容性配置：

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

  • 針對移動端的配置：

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

  • 配置網頁關鍵字：

    <meta name="keywords" content="8-12個以英文逗號隔開的單詞/詞語">

  • 配置網頁描述資訊：

    <meta name="description" content="80字以內的一段話，與網站內容相關">

  • 針對搜尋引擎爬蟲配置：

    <meta name="robots" content="此處可選值見下表">
    值 描述
    index 允許搜尋爬蟲索引此頁面
    noindex 要求搜尋爬蟲不索引此頁面
    follow 允許搜尋爬蟲跟隨此頁面上的連結
    nofollow 要求搜尋爬蟲不跟隨此頁面上的連結
    all 與 index，follow 等價
    none 與 noindex，nofollow 等價
    noarchive 要求搜尋引擎不快取頁面內容
    nocache noarchive 的替代名稱

  • 配置網頁作者：

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

  • 配置網頁生成工具：

    <meta name="generator" content="Visual Studio Code">

  • 配置定義網頁版權資訊：

    <meta name="copyright" content="2023-2027©版權所有">

  • 配置網頁自動重新整理：

    <meta http-equiv="refresh" content="10;url=http://www.baidu.com">

    content 中的引數，10 表示每隔 10 秒，url 表示跳轉到的地方，如果不配做 url，則是每隔 10 秒，重新整理當前頁面一次。

完整的網頁元資訊，參考：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta

示例：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <!-- 配置字元編碼 -->
    <meta charset="UTF-8">
    <!-- 針對IE瀏覽器的一個相容性設定 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 針對移動端的一個配置 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 配置網頁的關鍵字 -->
    <meta name="keywords" content="網上購物,電商購物,皮鞋,化妝品">
    <!-- 配置網頁描述資訊 -->
    <meta name="description" content="哈哈購物網成立於2003年，致力於打造國內優質的電商購物平臺....">
    <!-- 自動重新整理 -->
    <meta http-equiv="refresh" content="3">
    <title>meta元資訊</title>
</head>

<body>
    <h1>你好啊</h1>
</body>

</html>

HTML 5

HTML 5 是新一代的 HTML 標準，2014 年 10 月，由全球資訊網聯盟（ W3C ）完成標準制定。

官網地址：

  • W3C 提供：https://www.w3.org/TR/html/index.html

  • WHATWG 提供：https://whatwg-cn.github.io/html/multipage

  • 二者之間存在一些差異，開發時一般選擇二者都有的標籤。

HTML 5 在狹義上是指新一代的 HTML 標準，在廣義上是指整個前端。

優勢：

  • 針對 JavaScript，新增了很多可操作的介面。
  • 新增了一些語義化標籤、全域性屬性。
  • 新增了多媒體標籤，可以很好的替代 flash。
  • 更加側重語義化，對於 SEO 更友好。
  • 可移植性好，可以大量應用在移動裝置上。

相容性：

  • 支援：Chrome、Safari、Opera、Firefox 等主流瀏覽器。
  • IE 瀏覽器必須是 9 及以上版本才支援 HTML 5，且 IE 9 僅支援部分 HTML 5 新特性。

新增語義化標籤

新增佈局標籤

標籤名 語義 單/雙標籤
header 整個頁面，或部分割槽域的頭部 雙
footer 整個頁面，或部分割槽域的底部 雙
nav 導航 雙
article 文章、帖子、雜誌、新聞、部落格、評論等 雙
section 頁面中的某段文字，或文章中的某段文字（裡面文字通常裡面會包含標題） 雙
aside 側邊欄 雙
main 文件的主要內容（WHATWG 中沒有語義，IE 不支援），幾乎不用 雙
hgroup 包裹連續的標題，如文章主標題、副標題的組合 （W3C 將其刪除），幾乎不用 雙

關於 article 和 section：

  1. article 裡面可以有多個 section。
  2. section 強調的是分段或分塊，如果你想將一塊內容分成幾段的時候，可使用 section 元素。
  3. article 比 section 更強調獨立性，一塊內容如果比較獨立、比較完整，應該使用 article 元素。

示例：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>01_新增佈局標籤</title>
</head>

<body>
    <!-- 頭部 -->
    <header class="page-header">
        <h1>尚品彙</h1>
    </header>
    <hr>
    <!-- 主導航 -->
    <nav>
        <a href="#">首頁</a>
        <a href="#">訂單</a>
        <a href="#">購物車</a>
        <a href="#">我的</a>
    </nav>
    <!-- 主要內容 -->
    <div class="page-content">
        <!-- 側邊欄導航 -->
        <aside style="float: right;">
            <nav>
                <ul>
                    <li><a href="#">秒殺專區</a></li>
                    <li><a href="#">會員專區</a></li>
                    <li><a href="#">領取優惠券</a></li>
                    <li><a href="#">品牌專區</a></li>
                </ul>
            </nav>
        </aside>
        <!-- 文章 -->
        <article>
            <h2>《如何一夜暴富》</h2>
            <section>
                <h3>第一種方式：透過做夢</h3>
                <p>你要這麼做夢：xxxxxxxxxxxxxxxxxxxxxxx</p>
            </section>
            <section>
                <h3>第二種方式：透過買彩票</h3>
                <p>你要這麼買彩票：xxxxxxxxxxxxxxxxxxxxxxx</p>
            </section>
            <section>
                <h3>第三種方式：透過學習前端</h3>
                <p>你要這麼學前端：xxxxxxxxxxxxxxxxxxxxxxx</p>
            </section>
        </article>
    </div>
    <hr>
    <footer>
        <nav>
            <a href="#">友情連結1</a>
            <a href="#">友情連結2</a>
            <a href="#">友情連結3</a>
            <a href="#">友情連結4</a>
        </nav>
    </footer>
</body>

</html>

新增狀態標籤

meter 標籤

語義：定義已知範圍內的標量測量，也被稱為 gauge（尺度），雙標籤。例如：電量、磁碟用量等。

常用屬性：

屬性名 值 描述
high 數值 規定高值
low 數值 規定低值
max 數值 規定最大值
min 數值 規定最小值
optimum 數值 規定最優值
value 數值 規定當前值
  • 加上 optimum 和不加 optimum，是不同的效果。
progress 標籤

語義：顯示某個任務完成的進度的指示器，一般用於表示進度條，雙標籤。例如：工作完成進度等。

常用屬性：

屬性名 值 描述
max 數值 規定目標值
value 數值 規定當前值
示例
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>02_新增狀態標籤</title>
    <style>
        progress {
            width: 50px;
        }
    </style>
</head>

<body>
    <span>手機電量：</span>
    <!-- 增加和刪除optimum標籤，再變化value值，檢視效果變化 -->
    <meter max="100" min="0" value="90" low="10" high="20" optimum="90"></meter>
    <br>
    <span>當前進度：</span>
    <progress max="100" value="20"></progress>
</body>

</html>

效果圖：

image-20231225222440699

新增列表標籤

標籤名 語義 單/雙標籤
datalist 用於搜尋框的關鍵字提示 雙
details 用於展示問題和答案，或對專有名詞進行解釋 雙
summary 寫在 details 的裡面，用於指定問題或專有名詞 雙

示例：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>03_新增列表標籤</title>
</head>

<body>
    <form action="#">
        <input type="text" list="mydata">
        <button>搜尋</button>
    </form>
    <datalist id="mydata">
        <option value="周杰倫">周杰倫</option>
        <option value="周冬雨">周冬雨</option>
        <option value="馬冬梅">馬冬梅</option>
        <option value="溫兆倫">溫兆倫</option>
    </datalist>
    <hr>
    <details>
        <summary>如何一夜暴富？</summary>
        <p>來學習前端</p>
    </details>
</body>

</html>

新增文字標籤

文字注音
標籤名 語義 單/雙標籤
ruby 包裹需要注音的文字 雙
rt 寫注音，rt 標籤寫在 ruby 的裡面 雙
文字標記
標籤名 語義 單/雙標籤
mark 標記 雙
  • 注意：W3C 建議 mark 用於標記搜尋結果中的關鍵字。
示例
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>04_新增文字標籤</title>
</head>

<body>
    <ruby>
        <span>魑魅魍魎</span>
        <rt>chī mèi wǎng liǎng </rt>
    </ruby>
    <hr>
    <div>
        <ruby>
            <span>魑</span>
            <rt>chī</rt>
        </ruby>
        <ruby>
            <span>魅</span>
            <rt>mèi</rt>
        </ruby>
    </div>
    <hr>
    <p>Lorem ipsum <mark>dolor</mark> sit amet consectetur adipisicing elit. Laboriosam, nemo?</p>
</body>

</html>

新增表單功能

表單控制元件新增屬性

屬性名 功能
placeholder 提示文字，適用於文字輸入類的表單控制元件
注意：不是預設值，預設值是 value
required 表示該輸入項必填， 適用於除按鈕外其他表單控制元件
autofocus 自動獲取焦點，適用於所有表單控制元件
autocomplete 自動完成，可以設定為 on 或 off，適用於文字輸入類的表單控制元件
注意：密碼輸入框、多行輸入框不可用
pattern 填寫正規表示式，適用於文字輸入類表單控制元件
注意：多行輸入不可用，且空的輸入框不會驗證，往往與 required 配合

示例：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>01_新增的表單控制元件屬性</title>
</head>

<body>
    <form action="">
        賬號：<input type="text" name="account" placeholder="請輸入賬號" required autofocus autocomplete="on" pattern="\w{6}">
        <br>
        密碼：<input type="password" name="pwd" placeholder="請輸入密碼" required pattern="\w{6}">
        <br>
        性別：
        <input type="radio" value="male" name="gender" required>男
        <input type="radio" value="female" name="gender">女
        <br>
        愛好：
        <input type="checkbox" value="smoke" name="hobby">抽菸
        <input type="checkbox" value="drink" name="hobby" required>喝酒
        <input type="checkbox" value="perm" name="hobby">燙頭
        <br>
        其他：<textarea name="other" placeholder="請輸入密碼" required pattern="\w{6}"></textarea>
        <br>
        <button>提交</button>
    </form>
</body>

</html>

input 新增屬性值

屬性名 功能
email 郵箱型別的輸入框，表單提交時會驗證格式，輸入為空則不驗證格式
url url 型別的輸入框，表單提交時會驗證格式，輸入為空則不驗證格式
number 數字型別的輸入框，表單提交時會驗證格式，輸入為空則不驗證格式
search 搜尋型別的輸入框，表單提交時不會驗證格式
tel 電話型別的輸入框，表單提交時不會驗證格式，在移動端使用時，會喚起數字鍵盤
range 範圍選擇框，預設值為 50，表單提交時不會驗證格式
color 顏色選擇框，預設值為黑色，表單提交時不會驗證格式
date 日期選擇框，預設值為空，表單提交時不會驗證格式
month 月份選擇框，預設值為空，表單提交時不會驗證格式
week 周選擇框，預設值為空，表單提交時不會驗證格式
time 時間選擇框，預設值為空，表單提交時不會驗證格式
datetime-local 日期 + 時間選擇框，預設值為空，表單提交時不會驗證格式

示例：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>02_input新增的type屬性值</title>
</head>

<body>
    <form action="" novalidate>
        郵箱：<input type="email" required name="email">

        <!-- url：<input type="url" required name="url"> -->

        <!-- 數值：<input type="number" required name="number" step="2" max="80" min="20"> -->

        <!-- 搜尋：<input type="search" required name="keyword"> -->

        <!-- 電話：<input type="tel" required name="phone"> -->

        <!-- 光照強度：<input type="range" name="range" max="80" min="20" value="22"> -->

        <!-- 顏色：<input type="color" name="color"> -->

        <!-- 日期：<input type="date" required name="date"> -->

        <!-- 月份：<input type="month" required name="month"> -->

        <!-- 周：<input type="week" required name="week"> -->

        <!-- 時間：<input type="time" required name="time"> -->

        <!-- 日期+時間：<input type="datetime-local" required name="time2"> -->

        <br>
        <button>提交</button>
    </form>
</body>

</html>

form 標籤新增屬性

屬性名 功能
novalidate 如果給 form 標籤設定了該屬性，表單提交的時候不再進行驗證

新增多媒體標籤

影片標籤

<video>：用來定義影片，雙標籤。

屬性名 值 描述
src URL 地址 影片地址
width 畫素值 設定影片播放器的寬度
height 畫素值 設定影片播放器的高度
controls - 向使用者顯示影片控制元件（比如播放/暫停按鈕）
muted - 影片靜音
autoplay - 影片自動播放
loop - 迴圈播放
poster URL 地址 影片封面
preload auto / metadata / none 影片預載入，如果使用 autoplay，則忽略該屬性
auto：可以下載整個影片檔案，即使使用者不希望使用它
metadata：僅預先獲取影片的後設資料（例如長度）
none：不預載入影片

示例：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>01_新增影片標籤</title>
    <style>
        video {
            width: 600px;
        }
    </style>
</head>

<body>
    <video src="./小電影.mp4" controls muted loop poster="./封面.png" preload="auto"></video>
</body>

</html>

音訊標籤

<audio>：用來定義音訊，雙標籤。

屬性名 值 描述
src URL 地址 音訊地址
controls - 向使用者顯示音訊控制元件（比如播放/暫停按鈕）
autoplay - 音訊自動播放
muted - 音訊靜音
loop - 迴圈播放
preload auto / metadata / none 音訊預載入，如果使用 autoplay，則忽略該屬性
auto：可以下載整個音訊檔案，即使使用者不希望使用它
metadata：僅預先獲取音訊的後設資料（例如長度）
none：不預載入音訊

示例：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>02_新增音訊標籤</title>
    <style>
        audio {
            width: 600px;
            /* height: 500px; */
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <audio src="./小曲.mp3" controls loop preload="metadata"></audio>
</body>

</html>

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>03_音訊案例</title>
    <style>
        audio {
            width: 600px;
        }

        .mask {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: rgba(0, 0, 0, 0.727);
        }

        .dialog {
            position: absolute;
            width: 400px;
            height: 400px;
            background-color: green;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            font-size: 40px;
            text-align: center;
            line-height: 400px;
        }

        span {
            border: 1px solid white;
            color: white;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <audio id="music" src="./小曲.mp3" controls></audio>
    <div class="mask" id="mask">
        <div class="dialog">
            <span>點我登入</span>
            <span onclick="go()">隨便聽聽</span>
        </div>
    </div>

    <script>
        function go() {
            music.play()
            mask.style.display = 'none'
        }
    </script>
</body>

</html>

新增全域性屬性（瞭解）

屬性名 功能
contenteditable 表示元素是否可被使用者編輯，可選值如下：
true：可編輯
false：不可編輯
draggable 表示元素可以被拖動，可選值如下：
true：可拖動
false：不可拖動
hidden 隱藏元素
spellcheck 規定是否對元素進行拼寫和語法檢查，可選值如下：
true：檢查
false：不檢查
contextmenu 規定元素的上下文選單，在使用者滑鼠右鍵點選元素時顯示
data-* 用於儲存頁面的私有定製資料

示例：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>新增的全域性屬性</title>
    <style>
        div {
            width: 600px;
            height: 200px;
            border: 1px solid black;
            font-size: 20px;
            margin-bottom: 10px;
        }

        .box1 {
            background-color: skyblue;
        }

        .box2 {
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="box1" spellcheck="true" contenteditable="true">Lorem ipsum dolor sit amet.</div>
    <div class="box2" draggable="true" hidden data-a="1" data-b="2" data-c="3">Lorem ipsum dolor sit amet.</div>
    <h1>hello</h1>

</body>

</html>

HTML 5 相容性處理

方式一：新增元資訊，讓瀏覽器處於最優渲染模式。

<!--設定IE總是使用最新的文件模式進行渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<!--優先使用 webkit ( Chromium ) 核心進行渲染, 針對360等殼瀏覽器-->
<meta name="renderer" content="webkit">

方式二：使用html5shiv讓低版本瀏覽器認識 HTML 5 的語義化標籤。

<!--[if lt ie 9]>
<script src="../sources/js/html5shiv.js"></script>
<![endif]-->

擴充套件：

  • lt：小於。
  • lte：小於等於。
  • gt：大於。
  • gte：大於等於。
  • !：邏輯非。

用法：

<!--[if IE 8]>僅IE8可見<![endif]-->

<!--[if gt IE 8]>僅IE8以上可見<![endif]—>

<!--[if lt IE 8]>僅IE8以下可見<![endif]—>

<!--[if gte IE 8]>IE8及以上可見<![endif]—>

<!--[if lte IE 8]>IE8及以下可見<![endif]—>

<!--[if !IE 8]>非IE8的IE可見<![endif]-->

示例：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>相容性處理</title>
    <!-- 讓IE瀏覽器處於一個最優的渲染模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 針對一些國產的“雙核”瀏覽器的設定，讓瀏覽器優先使用webkit核心去渲染網頁 -->
    <meta name="render" content="webkit">
    <!--[if lt ie 9]>
    <script src="./html5shiv.js"></script>
    <![endif]-->
    <style>
        header {
            background-color: orange;
        }

        footer {
            height: 100px;
            line-height: 100px;
            text-align: center;
            background-color: green;
        }
    </style>
</head>

<body>
    <!-- 頭部 -->
    <header class="page-header">
        <h1>尚品彙</h1>
    </header>
    <hr>
    <!-- 主導航 -->
    <nav>
        <a href="#">首頁</a>
        <a href="#">訂單</a>
        <a href="#">購物車</a>
        <a href="#">我的</a>
    </nav>
    <!-- 主要內容 -->
    <div class="page-content">
        <!-- 側邊欄導航 -->
        <aside style="float: right;">
            <nav>
                <ul>
                    <li><a href="#">秒殺專區</a></li>
                    <li><a href="#">會員專區</a></li>
                    <li><a href="#">領取優惠券</a></li>
                    <li><a href="#">品牌專區</a></li>
                </ul>
            </nav>
        </aside>
        <!-- 文章 -->
        <article>
            <h2>《如何一夜暴富》</h2>
            <section>
                <h3>第一種方式：透過做夢</h3>
                <p>你要這麼做夢：xxxxxxxxxxxxxxxxxxxxxxx</p>
            </section>
            <section>
                <h3>第二種方式：透過買彩票</h3>
                <p>你要這麼買彩票：xxxxxxxxxxxxxxxxxxxxxxx</p>
            </section>
            <section>
                <h3>第三種方式：透過學習前端</h3>
                <p>你要這麼學前端：xxxxxxxxxxxxxxxxxxxxxxx</p>
            </section>
        </article>
    </div>
    <hr>
    <!-- 頁尾 -->
    <footer>
        <nav>
            <a href="#">友情連結1</a>
            <a href="#">友情連結2</a>
            <a href="#">友情連結3</a>
            <a href="#">友情連結4</a>
        </nav>
    </footer>
</body>

</html>

原文連結

https://github.com/ACatSmiling/zero-to-zero/blob/main/FrontEnd/html-css.md

相關文章