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 發展歷史:
- 目前 HTML 的最新標準是 HMTL 5。
標籤
標籤
:又稱元素,是 HTML 的基本組成單位。
-
標籤分為:雙標籤與單標籤,絕大多數都是雙標籤。
-
單標籤:
-
雙標籤:
-
-
標籤名不區分大小寫,但推薦小寫,因為小寫更規範。
-
標籤之間的關係:並列關係、巢狀關係,可以使用 tab 鍵進行縮排。
標籤屬性
標籤屬性
:用於給標籤提供附加資訊,可以寫在起始標籤或單標籤中。
-
有些特殊的屬性,沒有屬性名,只有屬性值。例如:
<input disabled>
-
規範:
-
不同的標籤,有不同的屬性;也有一些通用屬性,在任何標籤內都能寫。
-
屬性名、屬性值不能亂寫,都是 W3C 規定好的。
-
屬性名、屬性值,都不區分大小寫,但推薦小寫。
-
雙引號,也可以寫成單引號,甚至不寫都行,但還是推薦寫雙引號。
-
標籤中不要出現同名屬性,否則後寫的會失效。例如:
<input type="text" type="password">
-
基本結構
在網頁中,透過點選滑鼠右鍵,選擇 "檢查",可以檢視某段結構的具體程式碼。
"檢查" 和 "檢視網頁原始碼" 的區別:
- "檢查" 看到的是:經過瀏覽器處理後的原始碼。
- "檢視網頁原始碼" 看到的是:程式設計師編寫的原始碼。
網頁的基本結構
如下:
-
想要呈現在網頁中的內容寫在 body 標籤中。
-
head 標籤中的內容不會出現在網頁中。
-
head 標籤中的 title 標籤可以指定網頁的標題。
-
圖示:
-
程式碼:
<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 屬性的編寫規則。
第一種寫法( 語言-國家/地區 ),例如:
- zh-CN :中文-中國大陸(簡體中文)。
- zh-TW :中文-中國臺灣(繁體中文)。
- zh :中文。
- en-US :英語-美國。
- en-GB :英語-英國。
第二種寫法( 語言—具體種類),已不推薦使用,例如:
zh-Hans :中文—簡體。
zh-Hant :中文—繁體。
W3School 上的說明:《語言程式碼參考手冊》、《國家/地區程式碼參考手冊》。
W3C 官網上的說明:《Language tags in HTML》。
標準結構
示例:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我是一個標題</title>
</head>
<body>
</body>
</html>
輸入
!
,隨後回車即可快速生成標準結構。
使用 ! 符號,預設生成的是 lang="en",可以透過以下設定:
在存放程式碼的資料夾中,存放一個 favicon.ico 圖片,可配置網站圖示。示例:
注意:新增圖片之後,可能需要清空快取,重新載入頁面。
排版標籤
標籤名 | 標籤語義 | 單/雙標籤 |
---|---|---|
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
屬性,屬性值即為下載檔案的名稱。
跳轉到錨點
錨點
:網頁中的一個標記點。
使用方式:
-
第一步:設定錨點。
<!-- 第一種方式:a標籤配合name屬性 --> <a name="test1"></a> <!-- 第二種方式:其他標籤配合id屬性,推薦 --> <h2 id="test2">我是一個位置</h2>
- 具有 href 屬性的 a 標籤是超連結,具有 name 屬性的 a 標籤是錨點。
- name 和 id 都是區分大小寫的,且 id 最好別是數字開頭。
-
第二步:跳轉錨點。
<!-- 跳轉到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
就是術語描述(可以有多個)。
表格
基本結構
一個完整的表格由:表格標題、表格頭部、表格主體、表格腳註,四部分組成。
表格涉及到的標籤:
-
tabl
:表格。 -
caption
:表格標題。 -
thead
:表格頭部。 -
tr
:每一行。 -
th
、td
:每一個單元格。(備註:表格頭部中用 th ,表格主體、表格腳註中用 td。)
示例:
<!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
:指定要跨的列數。
示例,課程表效果圖:
示例:
<!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 屬性,頁面上被置灰不可用。
label 標籤
label
標籤可與表單控制元件相關聯,關聯之後點選文字,與之對應的表單控制元件就會獲取焦點。
兩種與 label 關聯方式如下:
- 讓 label 標籤的 for 屬性的值,等於表單控制元件的 id。
- 把表單控制元件套在 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>
效果:
框架標籤
標籤名 | 標籤語義 | 屬性 | 單/雙標籤 |
---|---|---|---|
iframe | 框架(在網頁中嵌入其他檔案) | name :框架名稱,可以與 target 屬性配置width :框架的寬度height :框架的高度frameborder :是否顯示邊框,值為 0 或者 1 |
雙 |
iframe 標籤的實際應用:
- 在網頁中嵌入廣告。
- 與超連結或表單的 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<u=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 原始碼中插入字元實體。
字元實體由三部分組成:一個&
和 一個實體名稱
(或者一個#
和 一個實體編號
),最後加上一個分號;
。
常見字元實體:
完整實體列表,參考: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>我 美女</div>
<div>我    美女</div>
<div>我們學習過很多的標題標籤,其中<h1>是最厲害的一個!</div>
<div>我們今天學習了一個可以表示空格的字元實體,它是:&nbsp;</div>
<div>我們今天學習了一個可以表示&的字元實體,它是:&amp;</div>
<div>當前商品的價格是:¥199</div>
<div>當前商品的價格是:¥199</div>
<div>當前商品的價格是:¥199</div>
<div>©版權所有</div>
<div>©版權所有</div>
<div>2 * 2 = 4</div>
<div>2 x 2 = 4</div>
<div>2 × 2 = 4</div>
<div>2 × 2 = 4</div>
<div>2 / 2 = 1</div>
<div>2 ÷ 2 = 1</div>
<div>2 ÷ 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:
- article 裡面可以有多個 section。
- section 強調的是分段或分塊,如果你想將一塊內容分成幾段的時候,可使用 section 元素。
- 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>
效果圖:
新增列表標籤
標籤名 | 語義 | 單/雙標籤 |
---|---|---|
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