HTML學習-3.部分標籤介紹

語義化標籤

各類不一樣的標籤自身在網頁中就有其自帶的樣式，好比不一樣標籤內的字體大小、字體樣式各有不一樣，可是標籤的各種樣式咱們經過CSS進行改變，而且後期咱們爲了網頁的美觀或者達到某種要求，必定會用CSS從新進行樣式設置。所以，咱們在學習HTML標籤時，只須要重點記住標籤的語義便可，沒必要在乎它的具體樣式。

內容語義標籤

• 標題標籤（h1~h6)

h1 ~ h6 一共有六級標題,從 h1 ~ h6重要性遞減 ，h1最重要，h6最不重要，h1在網頁中的重要性僅次於title標籤，通常狀況下一個頁面中只會有一個h1（搜索引擎搜索網頁時，可能會經過標題來了解網頁內容，所以title和h1中通常放很是重要的內容），一般狀況下標題標籤只會使用到h1~ h3，h4 ~ h6不多用。另外，有些狀況下文章的兩級標題存在關聯性，例如咱們的文章標題HTML學習標題下有一個副標題3.部分標籤介紹。所以還存在一個標籤 hgroup 專門爲標題進行分組。

沒必要在乎樣式，只關注標籤語義便可。

• 段落標籤 （p）

p標籤表示頁面中的一個段落，就是咱們平時寫文章中的段落。

• 強調標籤（em 和 strong）

em標籤把文本定義爲強調的內容
strong標籤把文本定義爲語氣更強的強調的內容。

• 引用標籤（blockquote 和 q）

blockquote標籤訂義塊引用。blockquote中的全部文本都會從常規文本中分離出來，常常會在左、右兩邊進行縮進，並且有時會使用斜體。也就是說，塊引用擁有它們本身的空間。
q標籤訂義短的引用。瀏覽器常常在引用的內容周圍添加引號。

• 換行標籤（br）

br標籤可插入一個簡單的換行符（就是按一次回車）。br標籤是空標籤（意味着它沒有結束標籤，所以這是錯誤的：< b r> < / br >）

結構化語義標籤

結構化語義標籤即佈局標籤，主要是用於網頁的佈局。

• header 表示網頁的頭部
• main表示網頁的主體部分(一個頁面中只會有一個main)
• footer 表示網頁的底部
• nav表示網頁中的導航 aside 和主體相關的其餘內容（側邊欄）
• article 表示一個獨立的文章
• section表示一個獨立的區塊，上邊的標籤都不能表示時使用section

塊元素與行內元素

仔細觀察上面的例子咱們就會發現，有些標籤的內容即便很短它也會自動佔滿一行 即便後面有很大的空白也不會寫入內容，像標題標籤、段落標籤、長引用標籤等，而有些標籤的內容則不會單獨佔據一行，寫完以後仍然和其餘內容共處一行 ，例如強調標籤 、短引用標籤，這就是塊標籤和行內標籤的區別。
塊元素：獨佔一行，在網頁中通常經過塊元素來對頁面進行佈局。
行內元素：能夠多個標籤存在一行，行內元素主要用來包裹文字。
通常狀況下會在塊元素中放行內元素，而不會在行內元素中放塊元素。

非語義標籤

div：div標籤是一個塊元素，它沒有語義，幾乎能夠用全部塊元素的位置，所以是HTML文檔中使用最多的一個標籤。
span：span標籤是一個行內元素，它一樣沒有特定的語義，能夠用於大部分須要行內元素的位置。

[注] 本人也正在自學當中，文中若有理解不當或者錯誤表述之處，歡迎交流指正。