前端系列一:HTML

ACatSmiling發表於2024-09-17

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:每一行。

  • thtd:每一個單元格。(備註:表格頭部中用 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

相關文章