常用HTML標籤

比較全的學習前端網站MDN
還有國內的菜鳥教程 和 W3school

以上都是很全面的前端教程網站，可以免費學習。

什麼是 HTML?

HTML (HyperText Markup Language) 不是一門編程語言，而是一種用來告知瀏覽器如何組織頁面的標記語言。其實就像是我們現實中搭起來的架子，只要有這個架子纔可以很好支起高樓。

HTML基本結構

從上圖可以看出來，主要分爲：

• 聲明 ：必須是 HTML 文檔的第一行，位於 標籤之前。聲明不是 HTML 標籤；它是指示 web 瀏覽器關於頁面使用哪個 HTML 版本進行編寫的指令。
• < html >< /html> : 此元素可告知瀏覽器其自身是一個 HTML 文檔；限定了文檔的開始點和結束點，在它們之間是文檔的頭部和主體。正如您所瞭解的那樣，文檔的頭部由 < head > 標籤定義，而主體由 < body > 標籤定義。
• < head>< /head> : 用於定義文檔的頭部，它是所有頭部元素的容器。 中的元素可以引用腳本、指示瀏覽器在哪裏找到樣式表、提供元信息等等。這些標籤可用在 head 部分：< base>, < link>, < meta>, < script>, < style>, 以及 < title>。
• < body>< /body> : 元素定義文檔的主體，包含文檔所有內容（比如：文本、超鏈接，圖像、表格、列表、表單等…）

這是一個簡單的在線DEMO，也可以自己打開編輯器嘗試
在線編輯預覽的菜鳥編輯器

HTML常用標籤

HTML標籤主要分爲三大類：

1. 行內元素

   行內元素主要的特徵就是不能設置寬高，不會自動進行換行，對margin設置的上線間距無效。
   行內元素只能通過內部內容撐開標籤，多個行內元素是可以同行顯示。常見的行內元素有：span、em、i、a等

2. 塊級元素

   塊級元素有自己的寬，默認佔一行，所以它的寬默認就是100%的，不允許與其他元素共享一行。多個塊級元素寫在一起會自上而下排列。對margin、padding的樣式都有效。
   常用的塊級元素有：div、p、nav、aside、header、footer、section、article、ul、li、form等等

3. 行內塊

行內塊元素結合了行內與塊級元素的特性，可以同行展示，還可以有自己的寬高。
這種元素需要通過CSS樣式來修改，display: inline-block

a

行內元素
a標籤定義超鏈接，跳轉到另一個頁面。最重要的屬性是href，它指向鏈接目標地址。

<a href="https://www.baidu.com">這是跳向百度的鏈接</a>

span

行內元素
span標籤用來組合文檔中的行內元素，它沒有固定的格式表現，是一個純淨版的行內元素。如果不對 span 應用樣式，那麼 span 元素中的文本與其他文本不會任何視覺上的差異。

<span>這是span標籤</span>

em、i、var、del、b、strong、u

行內元素
以上都是短語元素。雖然這些標籤定義的文本大多會呈現特殊的樣式，但是實際都是有確切語義的。

<em>這是em，強調的內容</em>
<i>這是i，斜體 Italic</i>
<var>這是var，定義變量 variable</var>
<del>這是del，刪除線標籤 delete</del>
<u>這是u，下劃線 Underline</u>
<b>這是b，加粗標籤</b>
<strong>這是strong，加粗標籤</strong>

h1-h6

塊級元素
< h1> - < h6> 標籤可定義標題。< h1> 定義最大的標題。< h6> 定義最小的標題。

<h1>這是標題 1</h1>
<h2>這是標題 2</h2>
<h3>這是標題 3</h3>
<h4>這是標題 4</h4>
<h5>這是標題 5</h5>
<h6>這是標題 6</h6>

p

塊級元素
p標籤表示段落

<p>這是段落，可以有span、a、em等標籤包含在內<span>添加使用</span></p>

div

塊級元素
div標籤是一個純淨的塊級元素，沒有語義，也是最多用的一個標籤。

<div>
	<h1>這是標題</h1>
	<p>段落</p>
	<div>
		<h3>小標題</h3>
		<p>段落</p>
	</div>
</div>

header、nav、section、article、aside、footer

塊級元素
這是html5新增語義化標籤，可以讓人和瀏覽器更好的閱讀。

<header>定義一個頁面或是區域的頭部</header>
<nav>    <!--導航鏈接標籤-->
	<span>導航頁1</span>
	<span>導航頁2</span>
</nav>
<div>
	<section>定義一個區域</section>
	<aside>定義頁面內容的側邊框部分</aside>
	<article><!--文章塊div-->
	　　<h2>文章標題</h2>
	　　<p>文章內容文章內容文章內容文章內容文章內容文章內容</p>
	</article>
</div>
<footer>定義一個頁面或是區域的底部</footer>

img

行內塊
img標籤向網頁中嵌入一幅圖片

<img src="https://www.wangbase.com/blogimg/asset/201910/bg2019100907.jpg">

figure

塊級元素
規定獨立的流內容（圖片，圖表、照片、代碼等）

<figure>
  <p>黃浦江上的的盧浦大橋</p>
  <img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>

video、audio

< video> 元素 用於在HTML或者XHTML文檔中嵌入媒體播放器，用於支持文檔內的視頻播放。你也可以將 < video> 標籤用於音頻內容，但是 < audio> 元素可能在用戶體驗上更合適。

<video controls width="280" src="/media/examples/flower.mp4"></video>

<audio src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg" autoplay></audio>

ul-li 、ol-li

塊級元素
列表，ul爲無序列表、ol爲有序列表；
他們的配合元素只有li

<!-- 無序列表 -->
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
<!-- 有序列表 -->
<ol>
  <li>有序列表一</li>
  <li>有序列表二</li>
  <li>有序列表三</li>
</ol>

table、thead、tbody、tfooter、tr、th、td

定義HTML的表格，tbody表示表格主體，tbody 元素應該與 thead 和 tfoot 元素結合起來使用。thead 元素用於對 HTML 表格中的表頭內容進行分組，而 tfoot 元素用於對 HTML 表格中的表注（頁腳）內容進行分組。

<table border="1">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

form、input、textarea、button、label、select

表單標籤用於爲用戶輸入創建 HTML 表單。包含 input 元素，比如文本字段、複選框、單選框、提交按鈕等等。表單用於向服務器傳輸數據。

<form action="" method="post">
	<ul>
		<li>
			<input type="text" placeholder="這裏時text屬性" />
		</li>
		<li>
			<input type="password" name="pwd" placeholder="密碼"/>
		</li>
		<li>
			<input type="number"  placeholder="這裏時number屬性"/>
		</li>
		<li>
			<label for="male">Male</label>
			<input type="radio" name="sex" id="male" />
		  
			<label for="female">Female</label>
			<input type="radio" name="sex" id="female" />
		</li>
		<li>
			<label for="1">
				<input type="checkbox" name="vehicle" value="1" id="1"/>1
			</label>
			<label for="2">
				<input type="checkbox" name="vehicle" value="2" id="2"/>2
			</label>
			<label for="3">
				<input type="checkbox" name="vehicle" value="3" id="3"/>3
			</label>
		</li>
		<li>
			<input type="file" />
		</li>
		<li>
			<textarea rows="3" cols="20" placeholder="文本"></textarea>
		</li>
	</ul>
	<br>
	<input type="submit" value="submit"/>
	<button type="button">提交</button>
</form>