1. 網頁
1.1 什么是網頁
網站是指在因特網上根據一定的規則，使用HTML等制作的用于展示特定內容相關的網頁集合。
網頁是網站中的一“頁”，通常是HTML格式的文件，它要通過瀏覽器來閱讀
網頁是構成網站的基本元素。它通常由圖片，鏈接，文字，聲音，視頻等元素組成。通常我們看到的網頁，常見以.htm或.html后綴結尾的文件，因此將其俗稱為HTML文件
1.2 什么是HTML
HTML指的是超文本標記語言(Hyper Text Markup Language)，它是用來描述網頁的一種語言。HTML不是一種編程語言，而是一種標記語言(markup language)。
標記語言是一套標記標簽(markup tag)。
所謂超文本，有2層含義：
- 它可以加入圖片，聲音，動畫，多媒體等內容（超越了文本限制）。
- 它還可以從一個文件跳轉到另一個文件，與世界各地主機的文件連接（超鏈接文本）。
1.3 網頁的形成
網頁是由網頁元素組成的，這些元素是利用html標簽描述出來，然后通過瀏覽器解析來顯示給用戶的。
前端人員開發代碼—>瀏覽器顯示代碼（解析，渲染）—>生成最后的Web頁面
2. 常用瀏覽器
瀏覽器是網頁顯示，運行的平臺。常用的瀏覽器有edge，Firefox，chrome，safari，opera等。
瀏覽器內核
瀏覽器內核（渲染引擎）：負責讀取網頁內容，整理訊息，計算網頁的顯示方式并顯示頁面。
| 瀏覽器 | 內核 | 備注 |
|---|---|---|
| IE | Trident | IE、獵豹安全、360極速瀏覽器、百度瀏覽器 |
| Firefox | Gecko | 火狐瀏覽器內核 |
| Safari | Webkit | 蘋果瀏覽器內核 |
| Chrome/Opera | Blink | Chrome / Opera瀏覽器內核。Blink 其實是 WebKit 的分支。 |
| 目前國內瀏覽器一般采用Webkit和Blink內核 |
3. Web標準
Web標準是由W3C組織和其它標準化組織制定的一系列標準的集合。W3C（萬維網聯盟）是國際最著名的標準化組織。
3.1 為什么需要Web標準
遵循 Web 標準除了可以讓不同的開發人員寫出的頁面更標準、更統一外，還有以下優點：
- 讓 Web 的發展前景更廣闊。
- 內容能被更廣泛的設備訪問。
- 更容易被搜尋引擎搜索。
- 降低網站流量費用。
- 使網站更易于維護。
- 提高頁面瀏覽速度。
3.2 Web標準的構成
主要包括結構（Structure），表現（Presentation）和行為（Behavior）三個方面。
| 標準 | 說明 |
|---|---|
| 結構 | 結構用于對網頁元素進行整理和分類，現階段主要學的是HTML。 |
| 表現 | 表現用于設置網頁元素的版式、顏色、大小等外觀樣式，主要指的是CSS。 |
| 行為 | 行為是指網頁模型的定義及交互的編寫，現階段主要學的是 JavaScript。 |
| Web標準提出的最佳體驗方案：結構，樣式，行為向分離。 |
簡單理解：結構寫到HTML文件中，表現寫到CSS文件中，行為寫到JavaScript文件中。
1. HTML語法規范
1.1 基本語法概述
- HTML標簽是由尖括號包圍的關鍵詞，例如
<html> - HTML標簽通常是成對出現的，例如
<html>和</html>,我們稱為雙標簽。標簽對中的第一個標簽是開始標簽，第二個標簽是結束標簽。 - 有些特殊的標簽必須是單個標簽（極少情況），例如
<br />，我們稱之為單標簽
1.2 標簽關系
雙標簽關系可以分為兩類：包含關系和并列關系。
包含關系
<head>媽媽<title> </title>女兒
</head>
并列關系
<head> </head>
<body> </body>類似姐妹
2. HTML基本結構標簽
2.1 第一個HTML網頁
每個網頁都會有一個基本的結構標簽（也稱為骨架標簽），頁面內容也是在這些基本標簽上書寫。HTML頁面也稱為HTMl文檔。
| 標簽名 | 定義 | 說明 |
|---|---|---|
<html></html> | HTML標簽 | 頁面中最大的標簽，我們稱為根標簽。 |
<head></head> | 文檔的頭部 | 注意在head標簽中我們必須設置的標簽是title。 |
<title></title> | 文檔的標題 | 讓頁面擁有一個屬于自己的網頁標題。 |
<body></body> | 文檔的主體 | 元素包含文檔的所有內容，頁面內容基本都是放到body里面的。 |
HTML文檔的后綴名必須是.html或.htm，瀏覽器的作用是讀取HTML文檔，并以網頁的形式顯示出它們。
win + 左右箭頭快速調整
3. 網頁開發工具
3.1 文檔類型聲明標簽
<!DOCTYPE> 文檔類型聲明，作用就是告訴瀏覽器使用哪種HTML版本來顯示網頁
<!DOCYTPE html>
當前頁面采取的是HTML5版本來顯示網頁
注意：
- 聲明位于文檔中的最前面的位置，處于``標簽之前
- 不是一個HTML標簽，它就是文檔類型聲明標簽
3.2 lang語言種類
用來定義當前文檔顯示的語言
- en為英語
- zh-CN為中文
3.3 字符集
字符集（Character set）是多個字符的集合。以便計算機能夠識別和存儲各種文字。
在head 標簽內，可以通過 meta標簽的 charset屬性來規定HTML文檔應該使用哪種字符編碼。
<meta charset="UTF-8">
charset常用的值有：GB2312，BIG5，GBK和UTF-8，其中UTF-8也被稱為萬國碼，基本包含了全世界所有國家需要用到的字符。
4. HTML 常用標簽
4.1 標簽語義
學習標簽有技巧，重點記憶每個標簽的語義。即標簽的含義，該標簽用來干啥？
根據標簽的語義，在合適的地方給一個最為合理的標簽，可以讓頁面結構更清晰。
4.2 標題標簽<h1>-<h6>
為了使網頁更具有語義化，會在頁面中用到標題標簽。HTML提供了6個等級的標簽，即<h1>-<h6>
單詞head的縮寫，意為頭部，標題
標簽語義：作為標題使用，并且依據重要性遞減。
特點
- 加了標簽的文字會變得加粗，字號也會依次變大。
- 一個標題獨占一行。
4.3 段落和換行標簽
在網頁中，要把文字有條理的顯示出來，就需要將文字分段顯示。在HTML標簽中，p標簽用于定義段落，它可以將整個網頁分為若干區域。
標簽語義：可以把HTML文檔分割為若干段落。
特點：
- 文本在一個段落中會根據瀏覽器窗口的大小自動換行。
- 段落和段落之間保有空隙。
在HTML中，一個段落中的文字會從左到右依次排列，直到瀏覽器窗口的右端，然后才自動換行。如果希望某段文本強制換行顯示，就需要使用換行標簽<br />
單詞break的縮寫，意為打斷，換行。
標簽語義：強制換行。
特點：
- 是個單標簽
- 標簽只是簡單地開始新的一行，跟段落不一樣，段落之間會插入一些垂直的間距。
4.4 文本格式化標簽
在網頁中，有時需要為文字設置粗體，斜體或下劃線等效果，這時就需要用到HTML中的文本格式化標簽，使文字以特殊的方式顯示。
標簽語義：突出重要性，比普通文字重要。
| 語義 | 標簽 | 說明 |
|---|---|---|
| 加粗 | <strong></strong> 或 <b></b> | 更推薦使用 <strong> 標簽加粗，語義更強烈。 |
| 傾斜 | <em></em> 或 <i></i> | 更推薦使用 <em> 標簽傾斜，語義更強烈。 |
| 刪除線 | <del></del> 或 <s></s> | 更推薦使用 <del> 標簽刪除線，語義更強烈。 |
| 下劃線 | <ins></ins> 或 <u></u> | 更推薦使用 <ins> 標簽下劃線，語義更強烈。 |
4.5 <div>和<span標簽
<div>和<span>是沒有語義的，它們就是一個盒子，用來裝內容的。
div是division的縮寫，表示分割，分區，span意為跨度，跨距。
特點：
div標簽用來布局，但是現在一行只能放一個<div>。大盒子<span>標簽用來布局，一行上可以多個span，小盒子
4.6 圖像標簽和路徑（重點）
1.圖像標簽
在HTML標簽中，<img> 標簽用于定義HTML頁面中的圖像。
<img src = "圖像URL" />
src是<img>標簽的必須屬性，它用于指定圖像文件的路徑和文件名。
所謂屬性：就是屬于這個圖像標簽的特性。
圖像標簽的其它屬性：
| 屬性 | 屬性值 | 說明 |
|---|---|---|
| src | 圖片路徑 | 必須屬性 |
| alt | 文本 | 替換文本。圖像不能顯示的文字 |
| title | 文本 | 提示文本。鼠標放到圖像上，顯示的文字 |
| width | 像素 | 設置圖像的寬度 |
| height | 像素 | 設置圖像的高度 |
| border | 像素 | 設置圖像的邊框粗細 |
| 圖像標簽屬性注意點： | ||
| ① 圖像可以擁有多個屬性，必須寫在標簽名的后面。 | ||
| ② 屬性之間不分先后順序，標簽名與屬性，屬性與屬性之間均以空格分開 | ||
| ③ 屬性采取鍵值對的格式，即key=“value”的格式，屬性=“屬性值”。 |
2. 路徑
頁面中的圖片會非常多，通常我們會新建一個文件夾來存放這些圖像文件（例如 images），這時再查找圖像，就需要采用“路徑”的方式來指定圖像文件的位置。路徑可以分為：
- 相對路徑
- 絕對路徑
2.1 路徑之相對路徑
相對路徑：以引用文件所在位置為參考基礎，而建立出的目錄路徑。簡單來說，圖片相對于HTML頁面的位置。
| 相對路徑分類 | 符號 | 說明 |
|---|---|---|
| 同一級路徑 | 圖像文件位于HTML文件同一級 如 <img src="bing.gif" /> | |
| 下一級路徑 | / | 圖像文件位于HTML文件下一級 如 <img src="images/google.gif" /> |
| 上一級路徑 | ../ | 圖像文件位于HTML文件上一級 如 <img src="../bing.gif" /> |
相對路徑是從代碼所在的文件出發，去尋找目標文件的。我們所說的上一級、下一級和同一級就是圖片相對于HTML頁面的位置。
2.2 路徑之絕對路徑
絕對路徑：是指目錄下的絕對位置，直接到達目標位置，通常是從盤符開始的路徑。
例如：
"F:\html\emoij.png"- 完整的網絡地址
"https://www.bilibili.com/?page=Home"
3. 目錄文件夾和根目錄📁
實際工作中，我們的文件不能隨便亂放，否則用起來很難快速找到它們。因此，我們需要一個文件夾來管理它們。
- 目錄文件夾：就是普通文件夾，里面存放了我們做頁面所需要的相關素材，比如HTML文件、圖片等。
- 根目錄：打開目錄文件夾的第一層就是根目錄。
4. VSCode 打開目錄文件夾
在 VSCode 中，可以通過以下步驟打開目錄文件夾：
- 點擊 文件 菜單。
- 選擇 打開文件夾。
- 選擇您的目錄文件夾。
這種方式在后期非常方便管理文件。
4.7 超鏈接標簽
在HTML標簽中，<a>標簽用于定義超鏈接，作用是從一個頁面鏈接到另一個頁面。
鏈接的語法格式
<a href="跳轉目標" target="目標窗口的彈出方式"> 文本或圖像 </a>
單詞anchor的縮寫，意為：錨。
| 屬性 | 作用 |
|---|---|
| href | 用于指定鏈接目標的url地址，（必須屬性）當為標簽應用href屬性時，它就具有了超鏈接的功能。 |
| target | 用于指定鏈接頁面的打開方式，其中_self為默認值，_blank為在新窗口中打開方式。 |
鏈接的分類
- 外部鏈接：例如b站.
<a href="http://www.bing.com" target="_self">必應 </a> <!> --默認在當前頁面打開 <--!>
<a href="htttp://www.bing.com" target="_blank"> 必應 </a># 在新標簽頁打開
- 內部鏈接：網站內部頁面之間的相互鏈接。直接鏈接內部頁面名稱即可
<a href=""> xxx </a>
- 空鏈接：如果暫時沒有確定鏈接目標時
<a href="#">xxx</a>
- 下載鏈接：如果href里面地址是一個文件或者壓縮包，會下載這個文件。
<a href="img.zip">下載文件</a>
- 網頁元素鏈接：在網頁中的各種網頁元素，如文本，圖像，表格，音頻，視頻等都可以添加超鏈接
<a href="http://www.bing.com"><img src="emoij.png" /></a>
- 錨點鏈接：當點擊鏈接，可以快速定位到頁面中的某個位置。
- 在鏈接文本的href屬性中，設置屬性值為==#名字==的形式，如
<a href="#two">第二集</a> - 找到目標位置標簽，里面添加一個id屬性 = 剛才的名字，如：
h3 id="two">第二集介紹</h3>
- 在鏈接文本的href屬性中，設置屬性值為==#名字==的形式，如
<a href="#two">第二集</a>
<h3 id="two">第二集介紹</h3>
4.8 表格標簽
表格是實際開發中非常常用的標簽：
- 表格的主要作用
- 表格的基本語法
1.1 表格的主要作用
表格主要用于顯示，展示數據，因為它可以讓數據顯示的非常的規整，可讀性非常好。特別是后臺展示數據的時候，能夠熟練運用表格就顯得很重要。一個清爽簡約的表格就能把繁雜的數據表現得很有條理。
1.2 表格的基本語法
<table><tr><td>單元格內的文字</td>...</tr>...</table>
<table> </table>是用于定義表格的標簽；<tr> </tr>標簽用于定義表格中的行，必須嵌套在①的標簽中；<td> </td>用于定義表格中的單元格，必須嵌套在②的標簽中；- 字母td指表格數據（table data），即數據單元格的內容。
表格無列概念
1.3 表頭單元格標簽
一般表頭單元格位于表格的第一行或第一列，表頭單元格里面的文本內容加粗居中顯示。
<th>標簽表示HTML表格的表頭部分（table head的縮寫）
<table>
<tr>
<th> 姓名 </th>
...
</tr>
...
</table>
1.4 表格屬性
表格標簽這部分屬性實際開發不常用，后面通過CSS來設置
| 屬性名 | 屬性值 | 描述 | |
|---|---|---|---|
| align | left, center, right | 規定表格相對周圍元素的對齊方式 | |
| border | 1 或 “” | 規定表格單元是否擁有邊框，默認為""，表示沒有邊框 | |
| cellpadding | 像素值 | 規定單元格邊沿與其內容之間的空白，默認1像素 | |
| cellspacing | 像素值 | 規定單元格之間的空白，默認2像素 | |
| width | 像素值或百分比 | 規定表格的寬度 |
1.5 表格結構標簽
使用場景：因為表格可能很長，為了更好的表示表格的語義，可以將表格分割成表格頭部和表格主體兩大部分。
在表格標簽中，分別喲看那個：<thead>標簽 表格的頭部區域，<tbody>標簽 表格的主體區域。這樣可以更好的分清表結構。
<thead></thead>:用于定義表格的頭部。<thead>內部必須擁有<tr>標簽。一般是位于第一行<tbody></tbody>:用于定義表格的主體，主要用于放數據本體。- 以上標簽都是放在
<table></table>中
1.6 合并單元格
特殊情況下，可以把多個單元格合并為一個單元格。
- 合并單元格格式
- 目標單元格
- 合并單元格的步驟
合并單元格格式
- 跨行合并：rowspan=“合并單元格的個數”
- 跨列合并：colspan=“合并單元格的個數”
目標單元格：（寫合并代碼）
- 跨行：最上側單元格為目標單元格，寫合并代碼
- 跨列：最左側單元格為目標單元格，寫合并代碼
合并單元格三步曲：😎
- 先確定跨行還是跨列
- 找到目標單元格，寫上合并方式=合并的單元格數量
<td colspan="2"> </td>
- 刪除多余單元格
1.7 表格總結
- 表格的相關標簽
- 表格的相關屬性
- 合并單元格
4.9 列表標簽
表格是用來顯示數據的，那么列表就是用來布局的。
列表的最大特點就是整齊，整潔，有序，它作為布局會更加自由和方便。
根據使用情景不同，列表可以分為三大類：無序列表，有序列表和自定義列表。
1.1 無序列表（重點）
<ul>（unordered list）標簽表示HTML頁面中項目的無序列表，一般會以項目符號呈現列表項，而列表項使用<li>標簽定義。
<ul><li> 列表項1</li><li> 列表項2</li>...
</ul>
- 無序列表的各個列表之間沒有順序級別之分，是并列的。
<ul> </ul>中只能嵌套<li> </li>，直接在<ul> /<ul>標簽中輸入其它標簽或者文字的做法是不被允許的。<li>與</li>之間相當于一個容器，可以容納所有元素。- 無序列表會帶有自己的樣式屬性，但在實際使用時，我們會使用CSS來設置。
1.2 有序列表（理解）
有序列表即為有排列順序的列表，其各個列表項會按照一定的順序排列定義。
在HTML標簽中，<ol>（ordered list）標簽用于定義有序列表，列表排序以數字來顯示，并且使用<li>標簽來定義列表項。
<ol><li> 列表項1</li><li> 列表項2</li>...
</ol>
<ol> </ol>中只能嵌套<li> </li>，直接在<ol> /<ol>標簽中輸入其它標簽或者文字的做法是不被允許的。<li>與</li>之間相當于一個容器，可以容納所有元素。- 有序列表會帶有自己的樣式屬性，但在實際使用時，我們會使用CSS來設置。
1.3 自定義列表（重點）
自定義列表的使用場景
自定義列表常用于對術語或名詞進行解釋和描述，定義列表的列表項前沒有任何項目符號。
在HTML標簽中，<dl>標簽用于定義描述列表/定義列表（definition list），該標簽會與<dt>定義項目/名字（definition title）和<dd>描述每一個項目/名字一起使用（definition description）
其基本語法如下：
<dl><dt>名詞1</dt><dd>名詞1解釋1</dd><dd>名詞1解釋2</dd>
</dl>
<dl> </dl>里面只能包含<dt>和<dd>。<dt>和<dd>個數沒有限制，經常是一個<dt>對應多個<dd>。姐妹關系
1.4 列表總結
| 標簽名 | 定義 | 說明 |
|---|---|---|
<ul></ul> | 無序標簽 | 里面只能包含li 沒有順序，使用較多。li里面可以包含任何標簽 |
<ol></ol> | 有序標簽 | 里面只能包含li 有順序，使用相對較少，li里面可以包含任何標簽 |
<dl></dl> | 自定義列表 | 里面只能包含dt和dd，dt和dd里面可以放任何標簽 |
4.10 表單標簽
現實中的表單，去辦銀行卡填寫的單子。
1.1 為什么需要表單
使用表單目的是為了收集用戶信息
在網頁中，需要更用戶進行交互，收集用戶資料，此時就需要表單。
1.2 表單的組成
在HTML中，一個完整的表單通常由表單域，表單控件（也稱為表單元素）和提示信息3個部分構成。
1.3 表單域
表單域是一個包含表單元素的區域。
在HTML標簽中，<form>標簽用于定義表單域，以實現用戶信息的收集和傳遞。
<form>會把它范圍內的表單元素信息提交給服務器
<form action="url地址" method="提交方式" name="表單域名稱">
各種表單元素控件
</form>
常用屬性
| 屬性 | 屬性值 | 作用 |
|---|---|---|
| action | url地址 | 用于指定接收并處理表單數據的服務器程序的url地址 |
| method | get/post | 用于設置表單數據的提交方式，其取值為get或post |
| name | 名稱 | 用于指定表單的名稱，以區分同一個頁面中的多個表單域 |
要點：
- 寫表單元素之前，應該有個表單域把它們進行包含
- 表單域是form標簽
1.4 表單控件（表單元素）
在表單域中可以定義各種表單元素，這些表單元素就行允許用戶在表單中輸入或者選擇的內容控件。
1.4.1 <input>表單元素
在英文單詞中，input是輸入的意思，而在表單元素中<input>標簽用于收集用戶信息。
在<input>標簽中，包含一個type屬性，根據不同的type屬性值，輸入字段擁有很多種形式（可以是文本字段，復選框，掩碼后的文本控件，單選按鈕，按鈕等）。
<input type="屬性值" />
<input />標簽為單標簽- type屬性設置不同的屬性值用來指定不同的控件類型
除type屬性外，<input>標簽還要其它很多屬性，其常用屬性如下：
| 屬性 | 屬性值 | 描述 |
|---|---|---|
| name | 由用戶自定義 | 定義input元素的名稱 |
| value | 由用戶自定義 | 規定input元素的值 |
| checked | checked | 規定此input元素首次加載時應當被選中 |
| maxlength | 正整數 | 規定輸入字段中的字符的最大長度 |
- name和value是每個表單元素都有的屬性值，主要給后臺人員使用
- name表單元素的名字，要求單選按鈕和復選框要有相同的name值
- checked屬性主要針對于單選按鈕和復選框，主要作用——打開頁面，就要可以默認選中某個表單元素。
- maxlength是用戶可以在表單元素輸入的最大字符數，一般較少使用
| 屬性值 | 描述 |
|---|---|
| button | 定義可點擊按鈕（多數情況下，用于通過JavaScript啟動腳本 |
| checkbox | 定義復選框 |
| file | 定義輸入字段和“瀏覽”按鈕，供文件上傳 |
| hidden | 定義隱藏的輸入字段 |
| image | 定義圖像形式的提交按鈕 |
| password | 定義密碼字段，該字段中的字符被掩碼 |
| radio | 定義單選按鈕 |
| reset | 定義重置按鈕。重置按鈕會清除表單中的所有數據 |
| submit | 定義提交按鈕，提交按鈕會把表單數據發送到服務器 |
| text | 定義單行的輸入字段，用戶可以在其中輸入文本。默認寬度為20個字符 |
1.4.2 <label>標簽
<label>標簽為input元素定義標簽（標簽）
<label>標簽用于綁定一個表單元素，當點擊<label>標簽內的文本時，瀏覽器就會自動將焦點（光標）轉到或者選擇對應的表單元素上，用來增加用戶體驗。
<label for = "sex"> female </label>
<input type = "radio" name = "sex" id = "sex" />
1.4.3 內容控件
在表單域中可以定義各種表單元素，這些表單元素就是允許用戶在表單中輸入或者選擇的內容控件。
<select>表單元素
使用場景：在頁面中，如果有多個選項讓用戶選擇，并且想要節約頁面空間時，可以使用<select>標簽控件定義下拉列表。
語法：
<select><option>選項1</option><option>....</option>...
</select>
<select>中至少包含一對<option>- 在
<option>中定義selected = " selected"時，當前項即為默認選中項
<textarea>表單元素
使用場景：當用戶輸入內容較多的情況下，不能使用文本框表單了，此時可以使用<textarea>標簽。
在表單元素中，<textarea>標簽是用于定義多行文本輸入的控件。
使用多行文本輸入控件，可以輸入更多的文字，該控件常見于留言板，評論。
語法：
<textarea rows="3" cols="20">文本內容
</textarea>
- 通過
<textarea>標簽可以輕松地創建多行文本輸入框 - cols=“每行中的字符數”，rows=“顯示的行數”，在實際開發中不會使用，都是使用CSS來改變大小。
綜合案例-注冊頁面
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><h4>人生得意需盡歡，莫使金樽空對月</h4><table width="600"><!-- 第一行 --><tr><td>性別：</td><td><input type="radio" name="women" id="nv"> <label for="nv"><img src="images/"></label> girl<input type="radio" name="women" id="cs"><label for="cs"><img src="images/"></label>woman</td></tr><!-- 第二行 --><tr><td>生日：</td><td><select><option>--請選擇年份--</option><option>2025</option><option>2024</option><option>2023</option><option>2022</option></select><select><option>--請選擇月份--</option><option>1</option><option>2</option><option>3</option><option>4</option></select><select><option>--請選擇日--</option><option>5</option><option>6</option><option>7</option><option>8</option></select></td></tr><!-- 第三行 --><tr><td>所在地區</td><td><input type="text" value="Iceland"></td></tr><!-- 第四行 --><tr><td>婚姻狀況：</td><td><input type="radio" name="emotion">inlove <input type="radio" name="emotion" checked="checked">nope<input type="radio" name="emotion">broken</td></tr><!-- 第五行 --><tr><td>學歷：</td><td><input type="text" value="博士"></td></tr><!-- 第六行 --><tr><td>喜歡的類型：</td><td><input type="checkbox" name="love"> cute<input type="checkbox" name="love"> charm<input type="checkbox" name="love"> childsh<input type="checkbox" name="love" checked="checked"> all</td></tr><!-- 第七行 --><tr><td>自我介紹：</td><td><textarea>個人簡介</textarea></td></tr><!-- 第八行 --><tr><td></td><td><input type="submit" value="免費注冊"></td></tr><!-- 第九行 --><tr><td></td><td><input type="checkbox" checked="checked">我同意社區注冊條款和會員加入標準</td></tr><tr><td></td><td><a href="#">我是會員，立即登錄</a></td></tr><tr><td></td><td><h5>我承諾</h5><ul><li>I'm18</li><li>I'm serious</li><li>I'm sincerely</li></ul></td></tr></table>
