標籤：box rdf 表單 body image 定義 har pos div
HTML1.HTML結構
<!DOCTYPE html> <!--文法開始--><html lang="en"><head> <!--頭部資訊，如title標籤定義的網頁標題--> <meta charset="UTF-8"> <title>Title</title></head><body> <!--主體資訊，包含網頁顯示的內容--></body></html> <!--文法結束-->
2.HTML文法
3.HTML標籤
1.文檔結構標籤
<html>...</html>：表示HTML文檔的起始和終止。
<head>...</head>：標識HTML文檔的頭部地區。
<body>...<body>：標識HTML文檔的主體地區。
2.文字格式設定標籤
<title>...</title>：標識網頁標題。
<hi>...</hi>：標識標題文本，其中i表示1,2,3,4,5,6分別表示一級，二級，三級等標題。
<p>...</p>：標識段落文本，並且空一行。
<pre>...<pre>：標識預定義文本。
<blockquote>...</blockquote>：標識引用文本
3.字元格式設定標籤
<b>...</b>：標識強調文本，以加粗效果顯示。
<i>...</i>：標識引用文本，以斜體效果顯示。
<sup>...</sup>：標識上標文本，以上標效果顯示。
<sub>...</sub>：標識上標文本，以上標效果顯示。
<cite>...</cite>：標識引用文本，以引用效果顯示。
<html><head><meta http-equiv="Content-Type" content="text/html; charset="UTF-8"><title>範例程式碼</title></head><body><p>例如，針對下面這個一元二次方程：</p><p><i>x</i><sup>2</sup>-<b>5</b><i>x</i>+<b>4</b>=0</p><p>我們使用<big><b>分解因式法<b><big>來示範解題思路如下：</p><p><small>由：</small>(<i>x</i>-1)(<i>x</i>-4)=0</p><p><small>得：</small><br/><i>x</i><sub>1</sub>=1<br/><i>x</i><sub>2</sub>=4</p></body></html>
4.列表標籤
HTML文檔中，列表結構可以分為兩種類型：有序列表和無序列表。無序列表使用項目符號來識別欄位表，而有序列表則使用
編號來識別欄位表的項目順序。
<ul>...</ul>：標識無序列表。
<ol>...<ol/>：標識有序列表。
<li>...</li>：識別欄位表項目。
另外，還可以定義定義列表。定義列表是一種特殊的結構，它包括詞條和解釋兩塊內容。包含的標籤說明如下。
<dl>...</dl>：標識定義列表。
<dt>...</dt>：標識詞條。
<dd>...</dd> ：標識解釋。
5.連結標籤
<a>...</a>：標識超連結
<!DOCTYPE html> <html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <a href="http://www.baidu.com">點我進入百度</a></body></html>
<a>標籤還可以定義錨點。錨點是一類特殊的超連結，它可以定位到網頁中某個具體的位置。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <a href="#btm">跳轉到底部</a> <div id="box" style="height: 2000px;border:solid 1px red;" >撐開瀏覽器捲軸</div> <span id="btm">底部錨點位置</span></body></html>
6.多媒體標籤
<img>：內嵌影像。
<embed>...</embed>：嵌入多媒體。
<object>...</object>：嵌入多媒體。
7.表格標籤
<table>...</table>：定義表格結構。
<caption>...</caption>：定義表格標題。
<th>...</th>：定義表頭。
<tr>...</tr>：定義表格行。
<td>...</td>：定義表格儲存格。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <table summary="ASCII編碼對應表，共5行3列"> <caption>ASCII字元集（節選）</caption> <tr> <th>十進位</th> <th>十六進位</th> <th>字元</th> </tr> <tr> <th>9</th> <th>9</th> <th>TAB（定位字元）</th> </tr> <tr> <th>10</th> <th>A</th> <th>換行</th> </tr> <tr> <th>13</th> <th>D</th> <th>斷行符號</th> </tr> <tr> <th>32</th> <th>20</th> <th>空格</th> </tr> </table></body></html>
8.表單標籤
<form>...</form>：定義表單結構。
<input/>：定義文本域，按鈕和複選。
<textarea>...</textarea>：定義多行文字框。
<select>...</select>：定義下拉式清單。
<option>...</option> ：定義下拉式清單中的選擇項目。
<html><head><meta http-equiv="Content-Type" content="text/html; charset="UTF-8"><title>範例程式碼</title></head><body><form id="form1" name="form1" method="post" action=""><p>單行文字域：<input type="text" name="textfield" id="textfield " /></p><p>密碼域：<input type="password" name="passwordfield" id="passwordfield" /></p><p>多行文本域：<textarea name="textareafield" id="textareafield"></textarea></p><p>複選框：複選框1<input name="checkbox1" type="checkbox" value="" /> 複選框2<input name="checkbox2" type="checkbox" value="" /></p><p>選項按鈕：<input name="radio1" type="radio" value="" />按鈕1<input name="radio2" type="radio" value="" />按鈕2</p><p>下拉式功能表：<select name="selectlist"><option value="1">選項1</option><option value="2">選項2</option><option value="3">選項3</option></select></p><p><input type="submit" name="bottom" id="bottom" value="提交" /></p></form></body></html>
1.web前端之路：HTML基礎
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
