文章目錄
本文參考：W3school
HTML 簡介
HTML
- HTML是一種用於描述網頁的語言
- HTML 指的是超文本標記語言 (Hyper Text Markup Language)，標記語言是一套標記標籤 (markup tag)，HTML 使用標記標籤來描述網頁
HTML標籤
- HTML標籤是由尖括號括起來的關鍵詞，如<p>，<br>等
- HTML 標籤通常是成對出現的，比如 <h1> 和 <h1>
- 前面的標籤稱爲開始標籤或開放標籤，後面的標籤稱爲結束標籤或閉合標籤
HTML文檔
- HTML文檔也被稱爲網頁，其中包含HTML標籤和純文本
- HTML文檔常用來描述網頁
HTML 編輯器
能編輯HTML的編輯器有很多，這裏就只講最簡單的一種：
- 打開記事本
- 在記事本中輸入HTML 代碼
- 在保存時講記事本的.txt後綴改爲.html
- 用瀏覽器打開該HTML文件
HTML 元素
HTML元素是從開始標籤到結束標籤之間的所有代碼：
-
如，<p>i’m a paragraph</p>中i’m a paragraph就是元素
-
某些元素可以是空
-
元素可以擁有屬性
-
HTML 元素可以嵌套(元素中包含另一個元素)
如標籤body中嵌套標籤p
<body> <p>This is a paragraph.</p> </body>
HTML 屬性
- HTML標籤可以含有屬性，屬性對標籤進行更具體的描述
- 屬性總是以名稱-值形式出現，如id=“qw”
- 屬性總是在開始標籤中定義
注意
- 屬性和屬性值對大小寫不敏感(大小寫均可)， 推薦使用小寫
- 屬性值中用雙引號或單引號，如屬性值本身含有雙引號則必須使用單引號，反之亦然
常見的屬性值及其含義
| 屬性值 | 含義 |
|---|---|
| class | 規定元素的類名（classname） |
| id | 規定元素的唯一 id(常用於區分元素) |
| style | 規定元素的行內樣式（inline style） |
| title | 規定元素的額外信息（可在工具提示 |
HTML 標題
HTML中用<h1>到<h6>分別代表不同大小的標題
<h1> 對應最大的標題，<h6> 對應最小的標題。
注意
- 瀏覽器會自動在標題前面添加空行
- 確保標題是有意義的，搜索引擎回根據你編寫的網頁結構和內容進行編制索引，用戶會通過標題快速瀏覽網頁
- 推薦做法，h1做主標題(最重要的)，h2次標題(次重要的)，依次類推
HTML 水平線
HTML中<hr/>表示在網頁中創建水平線
<hr/>常用於分割不同內容
HTML 註釋
HTML中用<!-- -->來表示註釋內容，註釋的效果我就不累述了
注意
- 註釋不會再網頁中顯示
- <!–text–> 中的text纔是註釋的內容
HTML 段落
HTML中用標籤<p>定義段落(類似文章中的段落)
注意
- 網頁被解析的時候，會自動在段落前面加上空行
HTML 換行
HTML中用<br/>來表示纔不產生新段落的情況下換行
注意
- 雖然<br> 與 <br />均可表示換行，這裏推薦使用<br />
- HTML代碼被解析時，會省略源代碼中多餘的空白字符（空格或回車等）
HTML 樣式
HTML中使用屬性style來改變HTML元素的樣式
常用屬性與其作用
| 屬性 | 作用 |
|---|---|
| text-align | 文本的水平對齊方式 |
| bgcolor | 背景顏色 |
| color | 文本顏色 |
注意
- 屬性值均在引號中以名:值形式存在
- 多個屬性間用分號;隔開
HTML 文本格式化
常見的文本格式化標籤及其作用
| 標籤 | 作用 | 例子 |
|---|---|---|
| <b> | 加粗字體 | b |
| <small> | 小號字體 | small |
| <big> | 大號字體 | big |
| <em> | 強調字體 | em |
| <i> | 斜體字體 | i |
| <strong> | 加重語氣 | strong |
| <sub> | 下標字 | sub |
| <sup> | 上標字 | sup |
| <ins> | 插入字 | ins |
| <del> | 刪除字 |
HTML 計算機代碼
| 標籤 | 作用 |
|---|---|
| <code> | 用於顯示計算機代碼(不保留多餘的空行和換行) |
| <kbd> | 用於顯示鍵盤碼 |
| <samp> | 用於顯示計算機代碼樣本 |
| <tt> | 用於顯示打字機代碼 |
| <var> | 用於顯示變量 |
| <pre> | 用於顯示預格式文本 |
HTML 引用
| 標籤 | 作用 |
|---|---|
| <abbr> | 定義縮寫 |
| <acronym> | 定義首字母縮寫 |
| <address> | 定義地址 |
| <bdo> | 定義文字方向 |
| <blockquote> | 定義長的引用 |
| <q> | 定義短的引用語 |
| <cite> | 定義引用、引證 |
| <dfn> | 定義一個定義項目 |
address
<address> 標籤用於定義文檔或文章的聯繫信息（作者/擁有者）
cite
HTML <cite> 標籤用於定義著作的標題。
abbr、acronym
bdo
blockquote、q
dfn
使用有點複雜，感興趣的可以自行查看W3school HTML 引用
HTML 鏈接
- 鏈接也稱爲超鏈接，超鏈接可以是一個字、一個詞或一段話、一張圖片，可以用過點擊它們來跳轉到另一個界面
- HTML中使用標籤<a>創建鏈接，標籤<a>的三種屬性：
href屬性： 指向另一個網頁的鏈接
語法：直接在href後面寫出網頁的鏈接即可
<a href="http://www.w3school.com.cn/">Visit W3School</a>
arget屬性： 定義被鏈接的文檔在何處顯示，如果把鏈接的 target 屬性設置爲 “_blank”，該鏈接會在新窗口中打開
語法：新建target屬性並填值
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
name屬性：
- 規定錨（anchor）的名稱，
- 可用於創建本網頁內跳轉的書籤，書籤不會以任何特殊方式顯示，它對讀者是不可見的
- 當使用命名錨（named anchors）時，我們可以創建直接跳至該命名錨（比如頁面中某個小節）的鏈接，這樣使用者就無需不停地滾動頁面來尋找他們需要的信息了。
命名錨的語法：
<a name="label">錨（顯示在頁面上的文本）</a>
使用步驟
-
對錨進行命名(創建一個書籤)
<!--這裏的錨就是 提示書籤--> <a name="tips">提示書籤</a> -
在網頁中創建指向該錨的鏈接
<!--最終在網頁上顯示的就是 提示--> <a href="#tips">提示</a>
演示
HTML 圖像
<img>
- HTML中用<img>標籤表示圖像
- <img>是空標籤，它只包含屬性沒有閉合標籤
- src屬性：用於顯示圖像，值爲圖像的URL地址(圖像的地址)
- alt屬性：爲圖像預備的文本信息，如果圖像無法顯示則顯示alt中的文本信息
定義簡單圖像的語法：
<img src="url" />
定義加alt屬性圖像的語法：
<img src="url" alt="text"/>
<map>
- <map>用於定義一個圖像映射(帶有可點擊區域的圖像)
- <area>總是鑲嵌在<map>中，用於定義圖像映射中的區域
- 必須爲每個<map>指定一個唯一的id或name(根據瀏覽器)，一般將兩者值設爲一致
- W3school map實例
HTML 表格
HTML用<table>來定義表格，用<tr>來定義表格的行，用<td>來定義表格的單元格，單元格里可以含有文本、圖片、列表、表格等
邊框
用 border屬性定義邊框
表頭
用 <th> 標籤定義表頭
空單元格
推薦使用<td> </td>來表示空單元格
表格標題
用 <caption> 標籤定義表頭
HTML 列表
無序列表
- 無序列表中元素用小黑圓圈進行標記
- 用 <ul> 標籤定義無序列表，用 <li>定義每個列表項
- 列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等。
定義語法：
<ul>
<li>li1</li>
<li>li2</li>
</ul>
有序列表
- 有序列表中用數字進行標記
- 用 <ol> 標籤定義有序列表，用 <li>定義每個列表項
- 列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等。
定義語法：
<ol>
<li>li1</li>
<li>li2</li>
</ol>
