語義化標籤以及經常使用標籤

_版權聲明：本文爲博主原創文章，轉載請註明出處。
https://github.com/ZhengMaste...

一開始接觸到頁面這個東西，毫無疑問你們首頁看到的是html這玩意。我對html有了初步的認識是在我大二上數據結構這門課程的時候老師講課之餘就給咱們講講深度學習，網頁設計之類的簡單知識。自從那之後就斷斷續續在W3school以及MDN學習它，如下內容是對以前的學習作個較爲簡單的總結。👇

經常使用標籤

html標籤又稱爲html元素，html元素分爲行內(內聯)元素、行內塊級元素以及塊級元素。

行內元素的特色

• 這些行內元素自己的屬性display:inline，而行內塊級元素則爲display:inline-block;
• 和其餘行內元素從左到右在一行顯示，給它設置的寬高值無效，但能夠設置內外邊距的值(左右有效，上下無效)
• 行內元素的寬高是由自己內容的大小決定（文字、圖片等）
• 行內元素只能容納文本或者其餘內聯元素，不要在行內元素嵌套塊級元素

常見的行內元素
「span」 標籤，一般用於放一些文字和icon圖標之類做爲內斂容器等
」script「 標籤，經常使用於引入外部文件，嵌入代碼等
「a」 標籤，經常使用於超連接，錨點等方面
「img」 標籤，用於引入外部圖像文件
「br」 標籤用於換行
「input」 標籤，用於表單控件
「button" 標籤，頁面按鈕
」label「 標籤，一般結合input來使用，至關命名標籤
「select」 標籤，選項標籤
」textarea「 標籤， 文本區域
「i」 標籤，呈現斜體文本，此外許多框架用它製做頁面小圖標等
「b" 標籤，加粗文本，新的標準出來不推薦使用
「em」 標籤，用於將文本進行強調
」strong「 標籤， 用於將文本進行強調加粗
「big」 標籤， 大字體文本
」small「 標籤， 小字體文本

常見的行內塊級元素

行內塊級元素的特徵

1. 不自動換行,若是超出父元素(不爲行內元素)width則換行
2. 能夠設置寬高
3. 在一行內從左到右依次排列

在HTML5中，開發者能夠自定義標籤，在任意定義標籤中，設置display:block屬性便可變爲塊級元素，display:inline就爲行內元素，display:inline-block則爲行內塊級。絕大多數標籤都是能夠互相轉換的。

常見的塊級元素

塊級元素的特徵

1. 能夠設置寬高，內外邊距等
2. 能夠內嵌其餘元素（無論是塊級的內聯的仍是行內塊級的元素）
3. 獨佔每一個塊級元素默認一行，能夠自動換行，默認排列方式爲從上至下

div - 經常使用塊級容易，也是 css layout 的主要標籤
p - 段落標籤主要用於文章段落，多行文字方面
ul - 無序列表
ol - 有序列表
form - 交互表單
h1~h6 標題標籤
hr - 水平分割線
dl - 定義列表
address - 地址
blockquote - 塊引用
center - 舉中對齊塊， 等等其餘不經常使用的標籤
**

HTML5中新增常見的標籤以及其語義化(如下順序不分前後)

**
header 🔼 頁眉（網頁（部分區域）的頭部 頂部 導航區域等等） 塊級元素
nav 🔼 導航連接部分 塊級元素
section 🔼 標籤訂義網頁中的區域（部分）。好比章節、頁眉、頁腳或文檔中的其餘部分。塊級元素
article 🔼 內容是引用其餘地方的。一個區域中的，另一部份內容；塊級元素
aside 🔼 和article 是一塊兒使用；是輔助 article 區域的內容。也能夠理解爲整個網頁的 輔助區域
footer 🔼 頁腳（網頁（部分區域）的底部|版權區域等等） 塊級元素
audio 🔼 播放聲音文件，好比音樂或其它音頻流 行內元素
video 🔼 播放視頻文件，好比電影或其它視頻流 行內元素
canvas 🔼 定義圖形，好比圖表和其餘圖像 有着默認寬高 行內元素
hgroup 給標題分組，爲標題或者子標題進行分組 塊級元素
figure 對多個元素進行組合 塊級元素
figcaption 定義 figure 元素的標題 塊級元素
output 定義輸出的一些類型。
details 定義元素的細節
command 定義命令按鈕
summary 爲 details 元素定義可見的標題
mark 主要用來在視覺上向用戶呈現那些須要突出的文字 高亮字體
meter 🔼 標籤訂義度量衡。僅用於已知最大和最小值的度量。必須定義度量的範圍，既能夠在元素的文本中，也能夠在 min/max 屬性中定義。
progress 定義任何類型的任務的進度 標籤運行中的進程。可使用 標籤來顯示 JavaScript 中耗費時間的函數的進程
time 🔼 定義日期或時間，或者二者 行內元素
datalist 🔼 定義可選數據的列表。與 input 元素配合使用，就能夠製做出輸入值的下拉列表 行內元素
embed 定義嵌入的內容，好比插件。用來插入各類多媒體，格式能夠是MIDI、MP3等 行內元素 有默認寬高
keygen 定義生成密鑰
source 🔼 爲媒介元素（好比 video 和 audio）指定多個播放格式與編碼，瀏覽器會自動選擇第一個能夠識別的格式 行內元素

查看所有標籤或者進一步瞭解這些標籤的屬性以及如何請移步☞http://www.w3school.com.cn/ta...