html 入門標籤學習
目錄
Html4
1、物理字型
<b>…</b> 設定標記間的文字為粗體 blod face <i>…</i> 設定標記間的文字為斜體 italic <u>…</u> 設定標記間的文字帶下劃線 under line <sup>…</sup> 設定標記間的文字為上標 superscript <sub>…</sub> 設定標記間的文字為下標 subscript <del>…</del> 設定標記間的文字帶刪除線 delete line
2、邏輯字型
<em>…</em> 一般強調（emphasis），斜體 <strong>…</strong> 特別強調，黑體 <address>…</address> 表示地址 <q>…</q> 定義引用 <kbd>…</kbd> 使用者鍵入的文字，字型變細變輕 <cite>…</cite> 一段引用的文字，斜體。用於書名、電影名 <small>…</small> 字型變小 <big>…</big> 字型變大 <dfn>…</dfn> 定義術語 <code>…</code> 原始碼 <var>…</var> 變數
3、hr 標籤
<hr align="left" width="400" size="50" color="#ff0000">4、center 標籤
<center>…</center>
align="center"5、無序列表
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>type 取值可以是disc、square、circle，分別表示用實心圓點、實心方點、空心圓作為列表符號。
6、有序列表
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>type 取值可以是1、a、A、i、I，分別代表編號使用阿拉伯數字、小寫英文字母、大寫英文字母、小寫羅馬數字、大寫羅馬數字。
start 指定序號的起始值，只能取數字。
reversed 反向編號列表
7、定義列表
<dl>
<dt>計算機</dt>
<dd>用來計算的儀器 ... ...</dd>
<dt>顯示器</dt>
<dd>以視覺方式顯示資訊的裝置 ... ...</dd>
</dl>8、a 標籤
target 顯示連結的視窗或框架，可取以下值：
_self 在本視窗或本框架中開啟超連結
_parent 在上一級框架中開啟超連結
_top 在整個瀏覽器視窗中開啟超連結
target = "_blank" 在新視窗中開啟超連結
download filename 指定下載連結9、body 標籤
※ bgcolor 設定頁面背景顏色。
background 設定頁面的背景圖片的URL。
bgproperties 取fixed 值時設定背景不隨滾動條滾動，不設此屬性時背景隨滾動條滾動。
※ text 設定頁面非超連結文字基本顏色。10、img 標籤
src 設定影象檔案的URL。
alt 設定無法顯示時的替代顯示文字
height、width 設定影象高度、寬度
border 設定邊框粗細，預設0
align 設定影象及影象周圍內容的對齊方式
1、影象在頁面中的對齊方式：left、right
2、影象和文字的對齊方式：top、middle、bottom當設定 align 為 left 或 right 時，圖片和內容會顯示在一行；如果讓其它內容換行，可以使用 <br clear="all">
11、字元實體
顯示結果 描述 實體名 實體號
無間斷空格  
< 小於 < <
> 大於 > >
& and符號 & &
" 雙引號 " "
¢ 分 ¢ ¢
£ 英鎊 £ £
¥ 人民幣元 ¥ ¥
§ 章節 § §
© 版權 © ©
® 註冊 ® ®
× 乘號 × ×
÷ 除號 ÷÷
√ 對號 √ √12、表格
<table>
<caption>成績單</caption>
<tr><th>姓名</th> <th>英語</th></tr>
<tr><td>張三</td> <td>88</td></tr>
<tr><td>李四</td> <td>90</td></tr>
</table>
13、table 標籤
align 設定表格位置，可以為left、center、right。
width 設定表格的寬度。
height 設定表格的高度。
border 設定表格外框的粗細。
bordercolor 設定表格外框的顏色。
cellspacing 設定兩個單元格之間的間距。
cellpadding 設定單元格內文字與單元格邊框的間距。
background 設定表格的背景影象的URL。
bgcolor 設定表格的背景顏色。14、caption 標籤
align 設定標題列相對於表格的擺放位置（水平），可選值為： left, center, right, top, middle, bottom。
valign 設定標題列相對於表格的擺放位置（上下），可選值為： top, bottom。與align同時使用來實現標題列在表格下方偏右。
15、tr 標籤
bgcolor 設定表格行的背景色。
align 設定水平對齊方式，可取left、center、right。
valign 設定垂直對齊方式，可取top、middle、bottom。16、td 標籤
width 單元格寬度（通常設定在第一行）。
height 單元格高度（通常設定在第一列）。
rowspan 單元格佔用表格行數。
colspan 單元格佔用表格列數。
background 設定單元格背景影象。
bgcolor 設定單元格背景色。
align 設定內容水平對齊方式，可選left、center、right。
valign 設定內容垂直對齊方式，可選top、middle、bottom。17、iframe
src 指定框架顯示的HTML檔案的位置。
name 指定視窗的名稱。
width 指定框架的寬度
height 指定框架的高度
frameborder 是否顯示框架。0-不顯示，1-顯示；預設為1
scrolling 是否顯示滾動條。no-不顯示，yes-顯示，auto-自動設定；預設為auto。Html 5
1、<!DOCTYPE> 標籤
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文件標題</title>
</head>
<body>
文件內容......
</body>
</html>
2、<abbr> 標籤
用來表示一個縮寫詞或者首字母縮略詞（當滑鼠移動到縮略詞上面會出現全稱）
The<abbr title="World Health Organization ">WHO</abbr> was founded in 1948.
3、<article>標籤
標籤定義獨立的內容
<article>
<h1>Internet Explorer 9</h1>
<p>Windows Internet Explorer 9 在2011年3月14日21:00釋出。</p>
</article>
4、<aside> 標籤
通常用於顯示側邊欄或者補充的內容。例如：目錄、索引等。
<p>My family and I visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>
5、<address> 標籤
某個文件中所屬作者或者所有者的相關的聯絡資訊
<address>
Written by <a href="#">Jon Doe</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
6、<base> 標籤
規定頁面上所有連結的預設 URL 和預設目標
<head><base href="//statics.w3cschool.cn/images/w3c/" target="_blank"></head>
<body>
<img src="logo.png" width="24" height="39" alt="w3cschool">
<a href="logo.png">w3cschool logo</a>
</body>
7、<blockquote> 標籤和<q> 標籤
<blockquote> 用來引用大段的內容塊，處於該標籤內的文字會獨自分離出來，並且自動縮排；<q> 用於定義一個短引用，效果就是加了一對雙引號。
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
</blockquote>
<p>WWF's goal is to:
<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>8、<bdo> 標籤
改變顯示文字的方向
<p>該段落文字從左到右顯示</p>
<p><bdo dir="rtl">該段落文字從右到左顯示</bdo></p>9、<col> 標籤與<colgroup> 標籤
為表格中的三個列設定了背景色
span ： 表示 col 橫跨的列數
<table border="1">
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<tr>10、<del> 和 <ins>
一段帶有已刪除部分和新插入部分的文字
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>11、<details> 標籤
只有谷歌瀏覽器和Safari 6支援
<details> 標籤規定了使用者可見的或者隱藏的需求的補充細節。
<details> 標籤用來供使用者開啟關閉的互動式控制元件。任何形式的內容都能被放在 <details> 標籤裡邊。
<details> 元素的內容對使用者是不可見的，除非設定了 open 屬性。
與 <summary> 標籤配合使用可以為 details 定義標題。標題是可見的，使用者點選標題時，會顯示出 details。
<details>
<summary>Copyright 1999-2011.</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the company Refsnes Data.</p></details>12、<embed> 標籤
用來嵌入 flash 動畫片
<embed src="helloworld.swf">height pixels 規定嵌入內容的高度。
src URL 規定被嵌入內容的 URL。
type MIME_type 規定嵌入內容的 MIME 型別。
注：MIME = Multipurpose Internet Mail Extensions。
width pixels 規定嵌入內容的寬度。
13、<figure>和<figcaption> 標籤
使用 <figure> 元素標記文件中的一個影象， <figcaption> 表示標題
<figure>
<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig1. - A view of the pulpit rock in Norway.</figcaption>
</figure>14、<form>標籤的新屬性
novalidate 如果使用該屬性，則提交表單時不進行驗證。
15、<fieldset> 標籤和<legend> 標籤
disabled disabled 規定該組中的相關表單元素應該被禁用。
form form_id 規定 fieldset 所屬的一個或多個表單。
Name text 規定 fieldset 的名稱。
<legend>定義了標題
<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset>
</form>16、<hgroup> 標籤
對標題進行組合
<hgroup>
<h1>Welcome to my WWF</h1>
<h2>For a living planet</h2>
</hgroup>17、<input> 標籤
autocomplete on/off 規定 <input> 元素輸入欄位是否應該啟用自動完成功能
autofocus autofocus 屬性規定當頁面載入時 <input> 元素應該自動獲得焦點
list datalist_id 引用<datalist>元素，其中包含<input>元素的預定義選項
max numberdate 屬性規定 <input> 元素的最大值
min numberdate 屬性規定 <input> 元素的最小值
maxlength number 屬性規定 <input> 元素中允許的最大字元數。
minlength number 屬性規定 <input> 元素中允許的最小字元數。
multiple multiple 允許使用者輸入到 <input> 元素的多個值
pattern regexp 規定用於驗證 <input> 元素的值的正則表示式。
placeholder text input 裡面簡短的提示資訊
readonly readonly 只讀
required required 規定必需在提交表單之前填寫輸入欄位
size number 屬性規定以字元數計的 <input> 元素的可見寬度// max 與 min
<form action="/statics/demosource/demo-form.php">
輸入 1980-01-01 之前的日期:
<input type="date" name="bday" max="1979-12-31"><br>
輸入 2000-01-01 之後的日期:
<input type="date" name="lday" min="2000-01-02"><br>
數量 (在1和5之間):
<input type="number" name="quantity" min="1" max="5"><br>
<input type="submit">
</form>
// maxlength
<form action="demo-form.php">
Username: <input type="text" name="usrname" maxlength="10"><br>
<input type="submit" value="提交">
</form>屬性 type 的值：
button 定義可點選的按鈕（通常與 JavaScript 一起使用來啟動指令碼）。
checkbox 定義複選框。
color 定義拾色器。
date 定義 date 控制元件（包括年、月、日，不包括時間）。
datetime 定義 date 和 time 控制元件（包括年、月、日、時、分、秒、幾分之一秒，基於 UTC 時區）
datetime-local 定義 date 和 time 控制元件（包括年、月、日、時、分、秒、幾分之一秒，不帶時區）。
email 定義用於 e-mail 地址的欄位。
file 定義檔案選擇欄位和 "瀏覽..." 按鈕，供檔案上傳。
hidden 定義隱藏輸入欄位。
image 定義影象作為提交按鈕。
month 定義 month 和 year 控制元件（不帶時區）。
number 定義用於輸入數字的欄位。
password 定義密碼欄位（欄位中的字元會被遮蔽）。
radio 定義單選按鈕。
range 定義用於精確值不重要的輸入數字的控制元件（比如 slider 控制元件）。
reset 定義重置按鈕（重置所有的表單值為預設值）。
search 定義用於輸入搜尋字串的文字欄位。
submit 定義提交按鈕。
tel 定義用於輸入電話號碼的欄位。
text 預設。定義一個單行的文字欄位（預設寬度為 20 個字元）。
time 定義用於輸入時間的控制元件（不帶時區）。
url 定義用於輸入 URL 的欄位。
week 定義 week 和 year 控制元件（不帶時區）。18、<lable> 標籤
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male"><br>19、<mark> 標籤
部分文字高亮顯示
<p>Do not forget to buy <mark>milk</mark> today.</p>20、<nav> 標籤
用於製作導航欄
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>21、<noscript> 標籤
<script>
document.write("Hello World!")
</script>
<noscript>抱歉，你的瀏覽器不支援 JavaScript!</noscript>22、<option> 標籤和 <optgroup> 標籤
<option> 標籤的屬性：
disabled disabled 規定此選項應在首次載入時被禁用。
label text 定義當使用 <optgroup> 時所使用的標註。
selected selected 規定選項（在首次顯示在列表中時）表現為選中狀態。
value text 定義送往伺服器的選項值。
<optgourp>是用來對<option>進行分組的：
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>23、<progress> 標籤
用於表示進度條
<progress value="22" max="100"></progress>24、<section> 標籤
對文件中的內容進行分塊或分段
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>
<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
</section>25、<textarea> 標籤
cols number 規定文字區域可見的列數
rows number 規定文字區域可見的行數
maxlength number 規定文字區域允許的最大字元數