重學前端之HTML(一)HTML總體概述及元素分類

  這一系列的文章是在學習winter的重學前端(極客時間上的課程)的過程當中,梳理一下本身的前端知識體系。文章不是嚴格按照winter的每一節來寫的,而是將某一類(如HTML)相關課程都看完後,再結合本身已有的知識體系進行相關梳理,最後產生了這一系列文章。winter提出的一些問題,我會在思考中寫入,但答案並非按照winter的原話來寫,而是說在網上進行一些資料查找或者結合本身的知識體系來進行回答。若是我有什麼回答不對的地方,但願你們指出,謝謝。
  HTML系列文章主要是涉及HTML標籤,會列出HTML標籤的分類、HTML佈局語義化標籤、比較經常使用的標籤、一些常見的問題以及winter提出的問題。這系列文章主要的理論來源是 MDN,裏面關於HTML講得很詳細,強烈建議一些以爲本身基礎不牢的同窗學習一下。

HTML的總體概述及細節

  超文本標記語言 (英語：Hypertext Markup Language，簡稱：HTML ): 是一種用來結構化 Web 網頁及其內容的標記語言。HTML 不是一門編程語言，而是一種用於定義內容結構的標記語言。HTML 由一系列的元素（elements）組成，這些元素能夠用來包圍不一樣部分的內容，使其以某種方式呈現或者工做。
  HTML標籤的特色: HTML標籤不區分大小寫,也就是說輸入標籤時既可使用大寫字母也可使用小寫字母。例如,標籤<title>寫做<title>、<Title>、<TITLE>、<TiTle>等等都是能夠正常工做的,不過從一致性、可讀性等各方面來講,最好僅使用小寫字母。
  元素內的空白(空白字符、換行): 當渲染這些代碼的時候，HTML解釋器會將連續出現的空白字符減小爲一個單獨的空格符。因此在HTML中的空白字符應當使用實體字符來表示。
  HTML註釋: 註釋標籤 <!-- 註釋內容 --> 用於在HTML插入註釋。
  自定義組件名: W3C規範中的自定義組件名(字母全小寫且必須包含一個連字符),能夠避免和之前以及將來的HTML元素相沖突。

HTML元素的定義

  HTML元素: 指的是開始標籤、結束標籤與內容相結合，即是一個完整的元素。
  HTML 元素語法:
    1) 開始標籤（Opening tag）：包含元素的名稱，被左、右角括號所包圍。表示元素從這裏開始或者開始起做用。HTML元素以開始標籤起始
    2) 結束標籤（Closing tag）：與開始標籤類似，只是其在元素名以前包含了一個斜槓。這表示着元素的結尾。HTML元素以結束標籤終止
    3) 內容（Content）：是開始標籤與結束標籤之間的內容。
    4) 某些 HTML 元素具備空內容（empty content）
    5) 空元素在開始標籤中進行關閉（以開始標籤的結束而結束）
    6) 大多數HTML元素可擁有屬性

  剖析一個 HTML 元素

  圖片來源MDN,侵權刪

HTML元素的分類

  空元素: 沒有內容的HTML元素被稱爲空元素。空元素是在開始標籤中關閉的。在開始標籤中添加斜槓，好比 <br />，是關閉空元素的正確方法，HTML、XHTML 和 XML 都接受這種方式。即便 <br> 在全部瀏覽器中都是有效的，但使用 <br /> 實際上是更長遠的保障。(w3school)
  相關標籤: <img />、<input />、<hr />、 <br />、 <link>、 <meta>等。

  塊級元素:
    1、特色:
      1) 塊級元素會獨佔一行,默認狀況下寬度100%
      2) 能夠設置width、height、padding、margin、border
    2、相關標籤: <header>、<nav>/<main>、<article>、<section>、<aside>、 <footer>、<address>、<div>、<p>、<ul>、<ol>、<li>、<h1>~<h6>、<table>、<thead>、<tbody>、<tfoot>、<tr>、<td>、<th>、<form>、<fieldset>、<blockquote>、<hr>等。
  行內塊級元素:
    1、特色:
      1) 同一行顯示
      2) 能夠設置width、height、padding、margin、border
    2、相關標籤: <img >、<input>、<button>、<textarea>、<video>等。

  行內元素:
    1、特色:
      1) 同一行顯示
      2) 不能設置width、height、margin的上下,能夠設置margin-left、margin-right、padding、border
      2、相關標籤:<span>、<q>、<a>、<i>、<b>、<em>、<strong>等
  替換元素:
    1、特色
      專業的講: 可替換元素的展示效果不是有CSS來控制的,是一種外部對象,它們外觀的渲染,是獨立於CSS的。它們的內容不受到當前文檔的樣式的影響,CSS能夠影響可替換元素的位置,但不會影響到可替換元素自己的內容。CSS 能對可替換元素產生的惟一影響在於，部分屬性支持控制元素內容在其框中的位置或定位方式。都是使用 src 屬性來引用文件。
      通俗的說: 可替換元素就是瀏覽器根據元素的標籤和屬性,來決定元素的具體顯示內容,而不可替換元素則是將內容直接展示出來。如<img src="test.png">,<img>的內容會根據src屬性的值來決定要顯示的內容;不可替換元素則是將內容直接展示出來,如<h1>瀏覽器直接顯示標籤內的文本。
    2、相關標籤:
      典型的有: <img>、<video>、<audio>、<embed>、<iframe>、<input type="image">
      有些元素僅在特定狀況下被做爲可替換元素處理，例如： <option>、<audio>、<canvas>
來源: 替換元素詳解MDN

  表象元素: 出現於人們要在文本中使用粗體、斜體、下劃線但CSS仍然不被徹底支持的時期。像這樣的元素，僅僅影響表象並且沒有語義,而且不該該再被使用。如<b>、<i>、<u>。
    使用經驗:
      <i>: 被用來傳達傳統上用斜體表達的意義：外國文字，分類名稱，技術術語，一種思想
      <b>: 被用來傳達傳統上用粗體表達的意義：關鍵字，產品名稱，引導句
      <u>: 被用來傳達傳統上用下劃線表達的意義：專有名詞，拼寫錯誤
來源:MDN

  以上內容若有不對,但願你們指出,謝謝。