本文根據慕課網視頻整理：http://www.imooc.com/code/49
以下標籤是基礎標籤：
| 標籤 | 使用示例 | 備註 |
|---|---|---|
<p> |
<p>段落文本</p> |
將文字進行段落劃分 |
<hx> |
<h1>標題</h1> |
x取值範圍1-6，文字逐級減小，代表不同等級的標題 |
<em> |
<em>會變斜體的文字</em> |
表示強調，被包裹的文字會變斜體 |
<strong> |
<strong>會加粗的文字</strong> |
表示更加強烈的強調，被包裹的文字會變粗體 |
<span> |
<span>文字</span> |
爲了設置單獨的樣式 |
<q> |
<q>被引用的文本</q> |
用於短文本/句子引用，被引用的對象會自動加上雙引號 |
<blockquote> |
<blockquote>被引用的段落</blockquote> |
用於長文本的引用，被引用的文本左右會有縮進 |
<hr>或<hr /> |
空標籤，無需成對存在，表示分割線，其中<hr />是html1.0版本寫法 <hr>是html4.01版本寫法 |
|
<address> |
<address>地址信息</address> |
展示地址信息，被包裹的文本會變斜體 |
<code> |
<code>一行代碼</code> |
插入一行代碼 |
<pre> |
<pre>多行代碼</pre> |
插入多行代碼，會保留代碼區中的換行和空格 |
<ul> |
<ul><li>條目</li></ul> |
添加無序列表，每項li前會自帶一個黑點 |
<ol> |
<ol><li>條目</li></ol> |
添加有序列表，每項li前會自帶有序標籤1. 2. 3. |
<div> |
<div id="goods"><h2>商品種類<h2><ol><li>蘋果</li><li>橘子</li><ol></div> |
邏輯劃分，將網頁各部分劃分爲不同的邏輯塊 |
<table> |
<table>...</table> |
整個表格以<table>開始，以</table>結束 |
<tbody> |
<tbody>...</tbody> |
如果表格內容沒有被<tbody>標籤包裹，表格會下載一點顯示一點，但如果加上<tbody>標籤後，這個表格就要等表格內容全部下載完纔會顯示 |
<tr> |
<tr>...</tr> |
表格中的一行，有幾對<tr>就代表表格有幾行 |
<td> |
<td>...</td> |
表格的一個單元格，一行中包含幾對<td>，說明一行中就有幾列 |
<th> |
<th>...</th> |
表格的頭部的一個單元格，表格表頭，表頭內字體會加粗居中 |
<summary> |
<table summary="摘要"></table> |
給表格添加摘要，摘要的內容是不會在瀏覽器中顯示出來的。它的作用是增加表格的可讀性(語義化)，使搜索引擎更好的讀懂表格內容，還可以使屏幕閱讀器更好的幫助特殊用戶讀取表格內容 |
<caption> |
<table><caption>標題<caption></table> |
給表格添加標題 |
<a> |
<a href="http://www.baidu.com" title="點擊進入百度" target="_blank">百度網址</a> |
添加超鏈接,target="_blank"代表在新窗口打開網頁 |
<a> |
<a mailto="郵件地址?cc=郵件地址&bcc=郵件地址&subject=郵件主題&body=郵件內容">點我發郵件</a> |
注意：mailto後面同時有多個參數的話，第一個參數必須以“?”開頭，後面的參數每一個都以“&”分隔<cc>代表抄送地址，如果有多個用”;”隔開。<bcc>代表密件抄送地址，如果有多個用”;”隔開。<subject>代表郵件主題。<body>代表郵件內容 |
<img> |
<img src="圖片地址" alt="加載失敗後的替換文本" title="提示文本"> |
圖像可以是GIF，PNG，JPEG格式的圖像文件 |