趕緊收藏，超詳細Web前端入門到精通必學的標籤及屬性大全

阿新 • • 發佈：2022-05-25

Web前端入門到精通必會的標籤及屬性，這是老師花時間總結了圖片上的內容，做成了網頁版，以便查詢使用，如果對你學習有幫助，記得收藏點贊評論關注支援哦

文件宣告，文件結構標籤，功能標籤

文件宣告：<!DOCTYPE>

文件結構標籤：html，head，head，body

功能標籤：mete

單詞表
分類	單詞	描述
文件宣告	<!DOCTYPE>	用於文件的宣告 <!DOCTYPE> 宣告位於文件中的最前面的位置，處於 <html> 標籤之前。用於告訴瀏覽器此文件的型別是什麼。目前開發中常用的宣告是 <!DOCTYPE html>，表示宣告一個HTML5文件。注意它不屬於HTML標籤，而是一條指令
文件結構標籤	html	每建立一個HTML檔案，都需要建立html標籤對。除了宣告文件型別的程式碼，其他的所有內容都存放在html標籤對中
	head	定義文件的頭部，用來包含網頁的配置（例如網頁的標題title，網頁的基礎配置meta都放在head中）
	title	定義網頁的標題，標題內容會顯示在瀏覽器的標籤欄上
	body	定義網頁的主體，例如：網頁中的圖片、文字等
功能標籤	meta	元標籤，用來表示網頁的基礎配置(如設定頁面關鍵字和描述，字元編碼的宣告)

塊級元素：

塊級元素可以獨佔一行，可以設定寬高。有關塊級元素以及後面的內聯元素，在學習了後面的css相關課程之後會有所瞭解

包含標籤：h1~h6，p，div，ul li，ol li，dl dt dd，figure，figcaption，form

單詞表
單詞	描述
h1	一級標題
h2	二級標題
h3	三級標題
h4	四級標題
h5	五級標題
h6	六級標題
p	段落標籤，用來描述網頁中的段落內容例如：一篇文章，每一個段落都可以使用一個p標籤；或者一段比較長的文字，也可以使用p標籤
div	用於頁面區域的劃分。它就像一個容器，用來放某一個區域的內容例如：整個網頁分成頭部、主體和尾部，那麼頭部、主體、尾部的內容，要分別放在一個單獨的div中
ul	定義無序列表
ol	定義有序列表
li	定義列表項，與ul或者ol配合使用。示例： <ul> <li>列表項一</li> <li>列表項二</li> </ul>
dl	定義列表標籤，配合dt和dd一起使用。示例： <dl> <dt></dt> <dd></dd> </dl>
dt	定義列表中的專案
dd	描述列表中的專案
figure	定義一段獨立的內容（不常用，瞭解即可）
figcaption	定義figure元素的標題（不常用，瞭解即可）
form	表單標籤，裡面包含很多蒐集資訊的表單元素，如輸入框，複選框等

內聯元素：

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

包含標籤：a，span，b，u，i，strong，em，mark，label，datalist

單詞表
單詞	描述
a	超連結標籤，用於從一張頁面連結到另一張頁面
span	用來組合文件中的行內元素，一般用來包裹文字
b	字型加粗標籤（不常用，瞭解即可）
u	下劃線文字標籤（不常用，瞭解即可）
i	斜體文字標籤（不常用，瞭解即可）
strong	用於強調文字的標籤，字型會加粗（不常用，瞭解即可）
em	用於強調文字的標籤，字型變成斜體（不常用，瞭解即可）
mark	突出顯示文字的標籤，字型會有背景顏色，預設的是黃色（不常用，瞭解即可）
label	為 input 元素定義標註（標記）。label可設定for屬性，用於把 label 繫結到另外一個元素。即讓label的for屬性值與input的id屬性值相同時（id屬性在後面會學到，暫時瞭解）。當點選label 元素時，瀏覽器就會自動將焦點轉到和標籤相關的input元素上。示例： <label for="male">Male</label> <input type="text" id="male" /> （上面的例子建議練習並在瀏覽器中測試，能更直觀的檢視效果）
datalist	標籤/控制元件，需要結合option標籤使用（不常用，瞭解即可）

特殊的內聯元素：

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

包含標籤：img，audio，video，input，select，option，textarea

單詞表
分類	單詞	描述
特殊的內聯元素（可以設定寬高，但不獨佔一行）	img	圖片標籤，用於在網頁中嵌入圖片
	audio	音訊標籤，用於在頁面中引入音訊
	video	視訊標籤，用於在頁面中引入視訊
	input	定義使用者可輸入資料的輸入欄位。例如登入頁面的使用者名稱和密碼框，都是使用input標籤
	select	定義下拉列表
	option （塊元素，寫在這裡是因為它需要跟select標籤一起使用）	定義下拉列表項，需要與select配合使用。option標籤中，可以設定value值。示例： <select> <option value ="html">html</option> <option value ="css">css</option> <option value="JavaScript">JavaScript</option> </select>
	textarea	定義多行文字框，常用於留言框、備註框等
標籤中的屬性	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；讓表格邊框合併，成為單線表格; table{ border-collapse: collapse; }
	colspan	表格標籤的屬性，實現跨列合併的效果，用來設定td或th跨列合併
	rowspan	表格標籤的屬性，實現跨列合併的效果，用來設定td或th跨行合併
	cellspacing	設定表格單元格內容與邊框之間的間隙（不常用，瞭解即可）
	cellpadding	設定兩個單元格之間的間隙（不常用，瞭解即可）

轉義字元：

單詞表
分類	單詞	描述
轉義字元		表示空格符號
	<	表示小於號“<”
	>	表示大於號“>”
	©	表示版權符號“©”

區塊標籤：

html5新增的語義化標籤

包含標籤：header，nav，main，aside，article，section，footer

單詞表
分類	單詞	描述
區塊標籤（html5新增的語義化標籤）	header	定義頁頭
	nav	定義導航
	main	定義頁面的主體區域
	aside	可用作文章的側欄
	article	可用作文章的內容
	section	可用作文件的區域塊，類似於div
	footer	定義頁尾

input元素中的屬性：

包含標籤：type，value，name，checked，placeholder，disabled，max，min，require

單詞表
分類	單詞	描述
input元素中的屬性	type	用來定義表單元素的型別。屬性值如下：（1）text：單行文字輸入框
		（2）radio：單選按鈕
		（3）checkbox：複選框
		（4）password：密碼框
		（5）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	表示必填欄位，約束某項內容是必填項，比如規定”使用者名稱“項，是必填項

表格標籤：

包含標籤：table，tr，td，th，thead，tbody，tfoot，caption

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

內聯文字語義標籤

單詞表
分類	單詞	描述
聯文字語義標籤	abbr	HTML Abbreviation 元素 (<abbr>) 表示，title屬性為縮寫提供擴充套件或描述。用法：<abbr title="世界衛生組織"> WHO </abbr>成立於1948年。
	mark	HTML 標記文字元素 (<mark>) 表示由於標記的段落在封閉上下文中的相關性或重要性而被標記或突出顯示以供引用或註釋的文字。用法： <p>arry老師是<mark>最帥</mark>的 ^_^</p>
	cite	HTML Citation 元素 (<cite>) 用於描述對所引用創意作品的引用，並且必須包含該作品的標題用法：<p><cite>Mona Lisa</cite> Painting by Leonardo da Vinci</p>
	small	獨立於其風格表示，HTML <small> 元素代表旁註和小字，例如版權和法律材料。預設情況下，它會將其中的文字呈現小一種字型大小，例如從小到 x-small。用法：<p><small>A very small piece of text.</small></p>
	time	HTML <time> 元素表示特定的時間段用法：<p>The library can be visited from <time>9:00</time> to <time>19:00</time> from monday to friday.</p>

接下來我會和大家分享更多前端的學習總結知識體系，希望大家喜歡！記得點贊收藏哦！

內容來自arry老師部落格：https://www.arryblog.com/guide/html5/#_1%E3%80%81%E6%96%87%E6%A1%A3%E5%A3%B0%E6%98%8E%E3%80%81%E6%96%87%E6%A1%A3%E7%BB%93%E6%9E%84%E3%80%81%E5%8A%9F%E8%83%BD%E6%A0%87%E7%AD%BE