<!-- 作為註釋語句 -->
<!DOCTYPE html> <!--定義文件型別-->
<html> <!--定義一個 HTML 文件-->
<!--在 <head>元素中你可以插入指令碼（scripts）, 樣式檔案（CSS），及各種meta資訊。
可以新增在頭部區域的元素標籤為: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.-->
<head>
<!--為文件定義一個標題
1.定義了瀏覽器工具欄的標題
2.當網頁新增到收藏夾時，顯示在收藏夾中的標題
3.顯示在搜尋引擎結果頁面的標題
-->
<title>標題（標籤顯示的名字）</title>
<!-- 內部樣式表 css-->
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
<!-- META 元素通常用於指定網頁的描述，關鍵詞，檔案的最後修改時間，作者，和其他後設資料。
後設資料可以使用於瀏覽器（如何顯示內容或重新載入頁面），搜尋引擎（關鍵詞），或其他Web服務。-->
<meta charset="utf-8"> <!-- 中文編碼宣告-->
<meta name="keywords" content="html, css"> <!-- 為搜尋引擎定義關鍵詞-->
<meta name="description" content="learn html..."> <!-- 為網頁定義描述內容-->
<meta name="autor" content="cn_swords"> <!-- 定義網頁作者-->
<meta http-equiv="refresh" content="10"> <!-- 每10秒中重新整理當前頁面-->
<!-- 標籤定義了文件與外部資源之間的關係。-->
<link rel="stylesheet" type="text/css" href="_css.css"> <!-- 標籤通常用於連結到樣式表 (外部樣式表可以覆蓋內部樣式表，詳細見優先性)-->
<!-- 標籤用於載入指令碼檔案-->
<script type="text/javascript"></script>
<!-- 定義針對不支援客戶端指令碼的使用者的替代內容-->
<noscript>不支援javascript指令碼的使用者</noscript>
<!-- 標籤描述了基本的連結地址/連結目標，該標籤作為HTML文件中所有的連結標籤的預設連結-->
<base href="file:///C:/Users/%E7%AB%A0%E7%8F%89%E6%BA%90/Desktop/webwork/" target="_blank">
</head>
<!-- 定義文件的主體 -->
<body>
<h1>h1 </h1> <!-- 標題-->
<br> <!-- 換行-->
<h2>h2 </h2> <br>
<h3>h3 </h3> <br>
<h4>h4 </h4> <br>
<h5>h5 </h5> <br>
<h6>h6 </h6> <br>
<hr> <!-- 標籤在 HTML 頁面中建立水平線-->
<!-- ***********定義一個 HTML 段落***************-->
<p>
段落：<br>
對於 HTML，您無法通過在 HTML 程式碼中新增額外的空格或換行來改變輸出的效果。<br>
當顯示頁面時，瀏覽器會移除原始碼中多餘的空格和空行。所有連續的空格或空行都會被算作一個空格。<br>
需要注意的是，HTML 程式碼中的所有連續的空行（換行）也被顯示為一個空格。<br>
</p>
<hr>
<!-- ************定義一個 HTML 表單，用於使用者輸入***************-->
<form>
<label for="male">USER:</label> <!-- 定義 input 元素的標註-->
<input type="text" name="user"> <!-- 定義一個輸入控制元件-->
<br>
USER:<input type="text" list="maybe">
<!-- 規定了 input 元素可能的選項列表-->
<datalist id="maybe">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<br>
USER:<input type="text" name="usr_name">
加密:<keygen name="security">
<br>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="sex" id="female" value="female"><br>
<br>
<textarea>please input text</textarea> <!-- 定義多行的文字輸入控制元件-->
<br>
<button>button</button> <!-- 定義按鈕-->
<br>
<!-- 定義選擇列表（下拉選單）-->
<select>
<optgroup label="Week">
<option>sunday</option> <!-- 定義選擇列表中的選項-->
<option>monday</option>
</optgroup>
<optgroup label="Move">
<option>bike</option>
<option>car</option>
</optgroup>
</select>
<br>
<!-- 定義圍繞表單中元素的邊框-->
<fieldset>
<legend>Personalia:</legend> <!-- 定義 fieldset 元素的標題-->
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset>
<br>
</form>
<hr>
<!-- ************** 列表 ***************-->
<!-- 定義一個無序列表-->
<ul>
<li>en</li> <!-- 定義一個列表項-->
<li>he</li>
</ul>
<!-- 定義一個有序列表-->
<ol>
<li>en</li>
<li>he</li>
</ol>
<!-- 定義一個定義列表-->
<dl>
<dt>en</dt>
<dd>what is en</dd>
<dt>he</dt>
<dd>what is he</dd>
</dl>
<!-- 定義選單列表-->
<menu label="File">
<button type="button" onclick="file_new()">New...</button>
<button type="button" onclick="file_open()">Open...</button>
<button type="button" onclick="file_save()">Save</button>
</menu>
<hr>
<!-- ***************定義一個表格**************-->
<table border="1">
<colgroup> <!-- 定義表格中一個或多個列的屬性值-->
<col span="1" style="background-color:red"> <!-- 定義表格中供格式化的列組-->
<col style="background-color:yellow">
</colgroup>
<caption>Monthly savings</caption> <!-- 定義表格標題-->
<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>
<hr>
<!-- ************定義內聯框架***************-->
<iframe src="http://www.runoob.com" name="aaa"></iframe>
<a href="http://www.baidu.com" target="aaa"> baidu </a>
<hr>
<!-- ************定義影像****************-->
<img src="zmy.jpg" height="200" width="200">
<hr>
<!-- ************定義一個連結******************-->
<nav>
<a href="http://www.baidu.com">baidu</a> |
<a href="https://www.bilibili.com/">bilibili</a> |
<a href="http://blog.csdn.net/qq_33199236">csdn</a> |
</nav>
<hr>
<!-- ************文字格式標籤******************-->
<pre> <!-- 定義預格式文字-->
iiiii iiii
iiiiiiiii ii ii
</pre>
<br>
<address> Written by zmy </address> <!-- 定義文件作者或擁有者的聯絡資訊。-->
<br>
<bdo dir="rtl"> <!-- 定義文字的方向-->
right
<bdi>to</bdi> <!-- 使其脫離其父元素的文字方向設定-->
left
</bdo>
<br>
<blockquote cite="..."> ...... </blockquote> <!-- 定義塊引用-->
<br>
<cite> ...... </cite> <!-- 定義引用(citation)-->
<br>
<q>kownledge is power</q>??? <!-- 定義短的引用-->
<br>
<code> 程式碼 </code> <!-- 定義計算機程式碼文字-->
<br>
<samp> ?? </samp> <!-- 定義計算機程式碼樣本-->
<br>
<kbd> 鍵盤 </kbd> <!-- 定義鍵盤文字-->
<br>
<p>Do not forget to buy <mark>milk</mark> today.</p> <!-- 定義帶有記號的文字-->
<br>
<meter value="2" min="0" max="10"></meter><br> <!-- 定義度量衡-->
<meter value="0.6">60%</meter>
<br>
下載進度：<progress value="22" max="100"> </progress> <!-- 定義執行中的任務進度（程式）-->
<br>
<!-- 中文用的 <rp> <rt> <ruby>-->
<br>
<s> 刪除 </s> <!-- 定義加刪除線的文字-->
<br>
<u> 下劃線 </u> <!-- 定義下劃線文字-->
<br>
<ins> 插入 </ins> <!-- 定義被插入文字-->
<br>
<del> 被刪文字 </del> <!-- 定義被刪除文字-->
<br>
<dfn> 專案 </dfn> <!-- 定義定義專案-->
<br>
<em> 強調 </em> <!-- 定義強調文字-->
<br>
<strong> 強調 </strong> <!-- 定義語氣更為強烈的強調文字-->
<br>
<i> 斜體 </i> <!-- 定義斜體文字-->
<br>
<b>粗體</b> <!-- 粗體-->
<br>
<small> 小 </small> <!-- 定義小號文字-->
<br>
<abbr title="World Health Organization">WHO</abbr> <!-- 定義一個縮寫-->
<br>
<sub> 下標</sub>
<sup> 上標</sup>
<br>
</body>
</html>