說道HTML，首先不得不介紹一下兩個東西W3C 與 MDN

W3C全稱萬維網聯盟（World Wide Web Consortium），該組織制定了包括XML和CSS等的眾多影響深遠的標準規範，當然，該標準並非強制標準，而只是推薦標準。不過既然是入門，最後當然是按照推薦標準來學習。

w3.org/TR/html5/

裡面有HTML5各種詳細介紹，包括每個標籤的使用，是初學者自學的好地方，前提你要懂英文。

至於不懂英文也不用怕，下面我就介紹一下MDN

MDN(MDN Web Docs)是一個彙集眾多Mozilla基金會產品和網路技術開發文檔的免費網站。什麼標籤不會用，在谷歌搜索一下就有詳細介紹。

下面以<span>標籤為例

接下來我就介紹一下HTML5的幾個常用標籤

HTML5格式

<!DOCTYPE html>
<html>
<head>開頭</hear>
<body>正文</body>
</html>

快捷鍵!+ tab

特殊標籤

<div>塊元素容器，無默認樣式
<span>行內元素容器，無默認樣式

文本樣式

<b>加粗 <s>刪除線
<i>傾斜 <sub>上標
<u>下劃線 <sup>下標
<small>弱化標記 <strong>強調標記
<kbd>鍵盤鍵位標記

文本格式

<p>段落 <br>換行（空元素）
<hr>分割線（空元素）

標題

<h1>到<h6>，<h1>最大，<h6>最小。

結構標記

<header>頁頭
<nav>導航條
<section>文檔
<article>除文檔外的內容
<footer>頁腳
<aside>側邊欄，廣告欄，引用信息

鏈接

<a href="#" target="#"> <img src="#" alt="#" >
href寫網址，跳轉網頁，href寫id，定位改id錨點 src寫圖片的路徑
target="_blank",在新的標籤打開鏈接 alt，當你圖片載入不到會顯示該屬性的文字
target=「_self」,在該標籤打開鏈接

<video>插入視頻
<audio>插入音頻

列表

<ol><li>有序列表，兩個標籤要同時用
<ul><li>無序列表，也是要同時用

<dl>定義列表
<dt></dt>名詞
<dd></dd>名詞解釋
</dl>

輸入框

<input type="#"> 根據type不同創建的輸入框功能也不同
type="text" 文本輸入框 type="submit" 提交按鈕
type="password" 密碼框 type="reset" 重置按鈕
type="radio" 單選框 type="button" 普通按鈕
type="checkbox" 複選框 type="file" 文件選擇框
type="hidden" 隱藏域

選項框

<select>選項框
<option></option>菜單裏的選項
</select>

文本框

<textarea>

表格

<table>表格
<caption>##</caption>標題
<tr>表格行
<td>##</td>表格列
</tr>
</table>

輸入表單

<form> 輸入表單,必須含一個或者多個表單元素，如下：
<textarea></textrea>
<button></button>
<input>
</form>

介紹完常用標籤，我順便說說三個概念

1.元素

元素和標籤是不相同的東西

以<div class="XXX">你好</div>為例，其中<div class="XXX">是開始標籤，class="XXX"是屬性，「你好」是值，</div>是一個結束標籤，這整個就是元素

2.空元素

空元素，從MND概述中理解起來還是很抽象的，我也不在這裡複製一遍水字數了，我就說說我的理解，一般沒有值和結束標籤的元素就是空元素。

我查了一下，HTML 中的空元素有這些：

<area> <base> <br> <col> <embed> <hr> <img> <input>
<keygen> <link> <meta> <param> <source> <track> <wbr>

3.替換元素

顧名思義，就是瀏覽器顯示的不再是HTML的元素，而是被替換了，例如顯示ico，圖片，視頻，表單等等。一部分可替換元素可以用CSS來控制顯示出來的大小，但並不能控制這些元素本身（例如顏色，外觀，渲染等等）。


推薦閱讀：
相關文章