快速指南
本章節提供了 HTML 最常用标簽的簡單實用示例。
你可以将其當做速查手冊。
基礎
<!DOCTYPE html>
<html>
<head>
<title>這是文章标題</title>
</head>
<body>
<!-- 這是注釋 -->
<h1>這是标題 1</h1>
<h2>這是标題 2</h2>
<h3>這是标題 3</h3>
<h4>這是标題 4</h4>
<h5>這是标題 5</h5>
<h6>這是标題 6</h6>
<p>這是段落</p>
<br> <!-- 這是換行 -->
<hr> <!-- 這是分割線 -->
</body>
</html> 樣式
<b>粗體文本</b>
<i>斜體文本</i>
<u>下劃線文本</u>
<em>定義着重文字</em><br />
<strong>定義加重語氣</strong><br />
<ins>定義插入字</ins><br />
<sub>定義删除字</sub><br />
<sub>上标</sub>
<sup>下标</sup>
<!-- 計算機樣式 -->
<pre>預格式文本</pre>
<code>一段電腦代碼</code>
<dfn>定義項目</dfn>
<kbd>鍵盤輸入</kbd>
<samp>計算機樣本</samp>
<var>變量</var>
<!-- 特殊含義的樣式 -->
<address>
Written by <a href="mailto:[email protected]">Jon Doe</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
<!-- 該段落文字從左到右顯示 -->
<bdo dir="rtl">該段落文字從右到左顯示</bdo>
<!-- 長的引用語 -->
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works
in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
</blockquote>
<!-- 短的引用語 -->
WWF's goal is to: <q>Build a future where people live in harmony with nature.</q>
<!-- 定義引用、引證 -->
<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>
<dfn>定義項目</dfn> 連結、錨點、圖檔
<a href="http://www.example.com/">This is a Link</a>
<a href="http://www.example.com/"><img src="URL" alt="Alternate Text"></a>
<a href="mailto:[email protected]">Send e-mail</a>A named anchor:
<a name="tips">Useful Tips Section</a>
<a href="#tips">Jump to the Useful Tips Section</a> 清單
<!-- 無序清單 -->
<ul>
<li>First item</li>
<li>Next item</li>
</ul>
<!-- 有序清單 -->
<ol>
<li>First item</li>
<li>Next item</li>
</ol>
<!-- 自定義清單 -->
<dl>
<dt>First term</dt>
<dd>Definition</dd>
<dt>Next term</dt>
<dd>Definition</dd>
</dl> 表單
<form action="http://www.example.com/test.asp" method="post/get">
<input type="text" name="lastname"
value="Nixon" size="30" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit">
<input type="reset">
<input type="hidden">
<select>
<option>Apples
<option selected>Bananas
<option>Cherries
</select>
<textarea name="Comment" rows="60" cols="20"></textarea>
</form> 表格
<table border="1">
<caption>Monthly Savings</caption>
<colgroup>
<col span="1" style="background-color:#dcdcdc">
<col style="background-color:#00bfff">
</colgroup>
<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> 區塊
<div style="color:#0000FF">
<h3>這是一個在 div 元素中的标題。</h3>
<p>這是一個在 div 元素中的文本。</p>
</div>
<p><span style="color:red">some text.</span>some other text.</p> 架構
<iframe src="http://www.runoob.com">
<p>您的浏覽器不支援 iframe 标簽。</p>
</iframe> ![HTML常見标簽總結[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)