1、檔案宣告、檔案結構、功能標簽

注：

HTML/HTML5 骨架相關基礎標簽

檔案宣告

 	<!DOCTYPE>

用于告訴瀏覽器此檔案的型別是什么
處于<html>標簽之前，用于告訴瀏覽器此檔案的型別是什么，目前開發中常用的宣告是<!DOCTYPE html>，表示宣告一個 HTML5 檔案，
它不屬于 HTML 標簽，而是一條指令

功能標簽

meta

元標簽，用來表示網頁的基礎配置

2、塊級元素

注：

塊級元素可以獨占一行，默認自上而下排列，可以設定寬高.

標簽名稱	描述
h1 ~ h6	一級標題 ~ 六級標題
p	段落標簽，用來描述網頁中的段落內容
div	用于頁面區域的劃分，它就像一個容器，用來放某一個區域的內容
ul，ol	定義無序串列，定義有序串列
li	定義串列項，與 ul 或者 ol 配合使用
dt，dd	定義串列中的專案，描述串列中的專案
figure	定義一段獨立的內容（不常用，了解即可）
figcaption	定義 figure 元素的標題（不常用，了解即可）
form	表單標簽，里面包含很多搜集資訊的表單元素，如輸入框，復選框等
table，canvas	定義 HTML 表格，通過腳本（通常是 JavaScript）來繪制圖形
pre	預格式化的文本

3、區塊標簽(新增語意化標簽)

標簽名稱	描述
header	定義頁頭
nav	定義導航
main	定義頁面的主體區域
aside	可用作文章的側欄
article	可用作文章的內容
section	可用作檔案的區域塊，類似于 div
footer	定義頁腳

4、行內元素

注：

行內元素不會自占一行，與其他行內元素在同一行顯示，且寬高由內容撐起，

標簽名稱	描述
a	超鏈接標簽，用于從一張頁面鏈接到另一張頁面
span	用來組合檔案中的行內元素，一般用來包裹文字
label	為 input 元素定義標注（標記）label 可設定 for 屬性
b，u	字體加粗標簽，下劃線文本標簽（不常用，了解即可）
i，strong	斜體文本標簽，用于強調文本的標簽字體會加粗（不常用，了解即可）
em	用于強調文本的標簽，字體變成斜體（不常用，了解即可）
mark	突出顯示文本的標簽，字體會有背景顏色，默認的是黃色（不常用，了解即可）
datalist	標簽/控制元件，需要結合 option 標簽使用（不常用，了解即可）

5、特殊行內元素

注：

可以設定寬高，但不獨占一行

標簽名稱	描述
img	圖片標簽，用于在網頁中嵌入圖片
audio	音頻標簽，用于在頁面中引入音頻
video	視頻標簽，用于在頁面中引入視頻
input	定義用戶可輸入資料的輸入欄位，例如登錄頁面的用戶名和密碼框，都是使用 input 標簽
select	定義下拉串列
option	定義下拉串列項，需要與 select 配合使用（塊元素，寫在這里是因為它需要跟 select 標簽一起使用）
textarea	定義多行文本框，常用于留言框、備注框等

6、轉義字符

標簽名	描述
	表示空格符號
`<`	表示小于號“<”
`>`	表示大于號“>”
`?`	表示著作權符號“?”

7、表格標簽

標簽名	描述
table	表格標簽
tr	表格行
td	表格列
th	標簽，可替代 td 標簽，用來設定表格的標題
thead	定義表格頭部
tbody	定義表格主體內容
tfoot	定義表格尾部
caption	設定表格的標題

8、標簽中的屬性

屬性名	描述
lang	html 標簽的屬性，用來標記網頁的語言；常見屬性值有："en"和"zh"；en 代表英語, zh 代表中文
charset	meta 標簽的屬性，宣告頁面檔案使用的字符編碼型別，常用的屬性值有：UTF-8 和 GB2312
type	修改無序串列與有序串列默認的前導樣式（已被廢棄，了解即可） 1、type 屬性寫在無序串列中，屬性值有：（1）disc：默認值，實心圓樣式（2）circle：空心圓樣式（3）square：實心方塊樣式 2、type 屬性寫在有序串列中，屬性值有：（1）1：默認值，數字編號（2）A：大寫英文編號（3）i：小寫羅馬數字編號（4）I：大寫羅馬數字編號（5）a：小寫英文編號
start	有序串列的屬性，指定串列編號的起始值，能修改有序串列標簽默認的前導樣式（不常用，了解即可）
reversed	有序串列的屬性，指定串列中的條目是否倒序排列的（不常用，了解即可）
src	（1）img 標簽的屬性，指定圖片的路徑（2）audio 標簽和 video 標簽也可以設定 src 屬性，指定音頻、視頻的路徑
alt	img 標簽的屬性，用來對引入的圖片進行文本描述
width	規定元素的寬度，此屬性不常用，了解即可，后續學習 css，會使用 css 樣式設定元素寬度
height	規定元素的高度，此屬性不常用，了解即可，后續學習 css，會使用 css 樣式設定元素高度，注意，height 或者 width 如果省略其中一個屬性，則按照圖片原始比例縮放圖片
href	a 標簽屬性，規定該鏈接要跳轉到目標頁面的地址
title	a 標簽屬性，設定滑鼠懸停的文本
target	a 標簽屬性，規定在何處打開鏈接檔案；如果屬性值為 blank 或_blank，會打開新的標簽頁
controls	audio/video 的屬性，用于顯示播放控制元件
autoplay	audio/video 的屬性，設定音頻/視頻自動播放
loop	audio/video 的屬性，設定音頻/視頻可以回圈播放
class	所有標簽都可以使用這個屬性，用來定義元素的類名（后續學習 css，會有詳細的講解）
action	form 標簽的屬性，用來設定 form 表單的資料要提交到哪個地址，提交到哪個地址，后端開發會告訴我們（不常用，了解一下，提交資料常用 ajax，后面會學習到的）
method	form 標簽的屬性，用來設定表單的提交方式，常用的方式有 get 或 post（不常用，了解即可）
rows	textarea 標簽屬性，設定多行文本框有多少行
cols	textarea 標簽屬性，設定多行文本框有多少列
list	datalist 控制元件的屬性，二者結合，可以與輸入框系結，為輸入框設定備選項（不常用，了解即可）
border	邊框屬性，可為 table 添加邊框
border-collapse	css 樣式，通常給表格設定 border-collapse：collapse；讓表格邊框合并，成為單線表格;
colspan	表格標簽的屬性，實作跨列合并的效果，用來設定 td 或 th 跨列合并
rowspan	表格標簽的屬性，實作跨行合并的效果，用來設定 td 或 th 跨行合并
cellspacing	設定表格單元格內容與邊框之間的間隙（不常用，了解即可）
cellpadding	設定兩個單元格之間的間隙（不常用，了解即可）

9、input 元素中的屬性

屬性名稱	描述
type	用來定義表單元素的型別，屬性值如下：（1）text：單行文本輸入框（2）radio：單選按鈕（3）checkbox：復選框（4）password：密碼框（5）button：普通按鈕，也可以直接寫成 button 按鈕，例如：`<button>按鈕標簽</button>` （6）submit：提交按鈕（7）reset：重置按鈕（8）color：顏色控制元件（不常用，了解即可）（9）date：日期控制元件（10）time：時間控制元件（11）email：電子郵件輸入控制元件（12）file：檔案選擇控制元件，需要上傳本地檔案時，可以使用它（13）number：表示數字輸入控制元件（14）range：表示拖拽條（不常用，了解即可）（15）search：t 表示搜索框（不常用，了解即可）（16）url：表示網址輸入控制元件
value	用于為 input 元素設定值，value 值一般是給后端發送資料時使用，后續學習了相關課程就會了解
name	規定 input 元素的名稱
checked	用來設定單選按鈕、多選按鈕的默認選中項
placeholder	表示提示文本，用來設定輸入框的提示資訊，告訴用戶該輸入框需要輸入什么內容
disabled	用于禁用 input 元素，表示只讀
max	max 表示最大值，表示數字輸入控制元件（即 type="number"的 input 元素）允許輸入的最大值
min	min 表示最小值，最小值，表示數字輸入控制元件（即 type="number"的 input 元素）允許輸入的最小值
require	表示必填欄位，約束某項內容是必填項，比如規定”用戶名“項，是必填項

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/505339.html

標籤：其他

上一篇：前端面試題每日3題——2022-09-06

下一篇：根據輸入的最新資料對兩列進行排序

HTML核心標簽和屬性