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屬性爲縮寫提供擴展或描述。 |
|
mark |
HTML 標記文本元素 (<mark>) 表示由於標記的段落在封閉上下文中的相關性或重要性而被標記或突出顯示以供引用或註釋的文本。 |
|
|
cite |
HTML Citation 元素 (<cite>) 用於描述對所引用創意作品的引用，並且必須包含該作品的標題 |
|
|
small |
獨立於其風格表示，HTML <small> 元素代表旁註和小字，例如版權和法律材料。默認情況下，它會將其中的文本呈現小一種字體大小，例如從小到 x-small。 |
|
|
time |
HTML <time> 元素表示特定的時間段 |
|
接下來我會和大家分享更多前端的學習總結知識體系，希望大家喜歡！記得點贊收藏哦！
