標籤：
1.HTML架構架構的作用就是把瀏覽器視窗劃分成多個子視窗，而且每個子視窗都可以載入各自的HTML文檔。
*注意：html框架組與body同級，因此不能同時出現！
架構結構標籤：<frameset>，每個標籤可定義行或列，rows和cols可設定每行或每列佔據視窗的值。
如果上下分割兩個視窗，兩行各佔據瀏覽器視窗的50%，範例程式碼如下：
<frameset rows="50%,50%"> <frame src="URL" name="架構名稱1"/> <frame src="URL" name="架構名稱2"/></frameset>
如果左右分割兩個視窗，兩列各佔據瀏覽器視窗的50%，範例程式碼如下：
<frameset cols="50%,50%"> <frame src="URL" name="架構名稱1"/> <frame src="URL" name="架構名稱2"/></frameset>
當瀏覽器不支援架構的時候顯示內容：（把<noframes>標籤插入到<frameset>標籤中，把文字放在<body>中）
<frameset> <noframes> <body>當前瀏覽器不支援架構</body> </noframes></frameset>
| 屬性 | 屬性值 | 說明 |
| rows | px,% | 上下分割視窗 |
| cols | px,% | 左右分割視窗 |
| src | url | 指定要載入到架構的頁面地址 |
| name | 名稱 | 架構的名稱 |
| scrolling | yes,no,auto | 是否使用捲軸 |
| noresize | true,false | 是否禁止改變架構的尺寸大小 |
| marginwidth | px | 架構內左右的空白地區 |
| marginheight | px | 架構內上下的空白地區 |
| frameborder | 1,0 | 是否顯示邊框 |
| framespacing | 0 | 架構與架構間保留的空白的距離 |
| border | 0 | 邊框 |
<iframe> 內嵌架構
基本結構：<iframe src="URL" name="架構名"></iframe>
<iframe>和<frame>的區別：
1、frame不能脫離frameset單獨使用，iframe可以；
2、frame不能放在body中，iframe可以；
3、嵌套在frameset中的iframe必需放在body中；
4、不嵌套在frameSet中的iframe可以隨意使用；
5、frame的高度只能通過frameset控制；iframe可以自己控制，不能通過frameset控制；
6、frame與iframe兩者可以實現的功能基本相同，不過iframe比frame具有更多的靈活性。 frame是整個頁面的架構，iframe是內嵌的網頁元素。
一般情況下在架構中的a連結使用target屬性實現架構內檔案跳轉時：
href(指向開啟的檔案路徑不需要變)
_self --> 自己架構頁面開啟“預設”
_blank --> 新頁面開啟
_top --> 頂級架構頁面開啟
_parent --> 到其父級架構頁面開啟
framename --> 將我們想要開啟的頁面在指定的架構中開啟
2.表單
表單使用<form>標籤定義，用於向伺服器傳輸資料。
表單包括：input文本域、textarea多行文本域、select下拉框、等等
基本結構：
<form action="" method="post" name=""> 使用者名稱：<input type="text" name="username" /> 密 碼：<input type="password" name="password" /></form>
form標籤的屬性說明：
1.name 指定表單的名稱
2.action 指定提交地址
3.method 指定資料提交的方式（get,post）
①get，將表單參數直接放在URL中，使用者可見，安全性低。但在編寫表單時可以使用，方便查看調試。
②post，將表單參數傳輸給伺服器進行處理時，可以採用加密的方法，安全性高。
4.enctype 規定在發送到伺服器之前應該如何對錶單資料進行編碼
5.target 指定開啟檔案
1）<input>輸入框
*所有input標籤都應該嵌套在<form>中，以保證顯示該有的效果。
| 屬性 | 說明 |
| type | input元素類型 |
| name | input元素名稱 |
| value | input元素的值 |
| size | input元素的寬度 |
| readonly | 是否唯讀 |
| maxlength | 輸入字元的字元長度 |
| disabled | 是否禁用 |
○ 文字框
使用者名稱：
<input type="text" name="username" value="" />
○ 密碼框
密碼：
<input type="password"name="password" value="" />
○ 選項按鈕
男 女
<input type="radio" name="sex" value="1"/>男<input type="radio" name="sex" value="0"/>女
○ 複選框
聽音樂 看電影 玩遊戲
<input type="checkbox" name="love" value="music" /> 聽音樂<input type="checkbox" name="love" value="movie"/> 看電影<input type="checkbox" name="love" value="game"/> 玩遊戲
○ 按鈕
普通按鈕：<input type="button" name="btn" value="確定"/>提交按鈕：<input type="submit" name="submit" value="提交"/>重設按鈕：<input type="reset" name="reset" value="重設"/>圖片按鈕：<input type="image" name="img_btn" src="URL"/>
○ 隱藏欄位
隱藏欄位用於在程式發送時沒必要讓使用者看到特定值的時候使用。
<input type="hidden" name="uid" value="10"/>
○ 上傳檔案
<input type="file" name="photo"/>
○ 數字鍵台
手機號碼：<input type="number" name="phone" />
○ 顏色選取器
<input type="color" name="color"/>
○ 日期選取器
<input type="date" name="date"/>
○ 時間選取器
<input type="time" name="time"/>
○ 日期時間選取器
<input type="datetime-local" name="datetime-local""/>
○ 月選取器
<input type="month" name="month"/>
○ 周選取器
<input type="week" name="week" />
○ E-mail地址文字框
<input type="email" name="email"/>
○ 滑動條
<input type="range" min="0" max="10" value="0"/>
○ 搜尋方塊
<input type="search" name="search" /><input type="submit" name="submit" value="搜尋"/>
○ 地址輸入框
<input type="url" name="url" /><input type="submit" name="submit" value="提交" />
○ 自動完成（HTML5新屬性，請自行複製代碼查看效果）
<input type="search" name="keywords" autocompulete="on"><input type="submit" name="submit" value="提交" />
*自動完成允許瀏覽器預測對欄位的輸入。當使用者在欄位開始鍵入時，瀏覽器基於之前鍵入過的值，應該顯示出在欄位中填寫的選項。
○ 自動焦點（HTML5新屬性，請自行複製代碼查看效果）
<input type="search" name="keywords" autofocus="on"/><input type="submit" name="submit" value="提交" />
*規定當頁面載入時按鈕應當自動地獲得焦點。
○ 提示文本（佔位文本）（HTML5新屬性，請自行複製代碼查看效果）
使用者名稱：<input type="text" name="username" placeholder="請輸入使用者名稱..." />
*該提示會在輸入欄位為空白時顯示，並會在欄位獲得焦點時消失。
○ 必填項（HTML5新屬性，請自行複製代碼查看效果）
2）<textarea>多行文本域
<textarea name="content" rows="5" cols="50"> </textarea>
*rows 指定文字框的高度， cols 指定文字框的寬度， 單位是字元。
3）<select>下拉框
請選擇 東莞 廣州
<select name="city"> <option value="0">請選擇</option> <option value="dg">東莞</option> <option value="gz">廣州</option></select>
*<select>元素中的<option>標籤用於定義列表中的可用選項。
| 屬性 | 說明 |
| name | 下拉式清單方塊的名稱 |
| size | 下拉式清單方塊的顯示行數 |
| multiple | 是否多選 |
| disabled | 是否禁用 |
| selected | 設定預設選中的選項 |
| value | 選項的值 |
4）<optgroup>下拉框分組
<optgroup> 標籤定義選項組，對相關的選項進行組合會使處理更加容易。
廣州 北京 深圳 珠海
<select name="city"> <optgroup label="主要城市"> <option value="1">廣州</option> <option value="2">北京</option> </optgroup> <optgroup label="其他城市"> <option value="3">深圳</option> <option value="4">珠海</option> </optgroup></select>
*label 指定組合選項名稱
5）<label>
<label>標籤的作用是將輸入項或選項及其標籤文字關聯起來。
男女
<input type="radio" name="sex" value="1" id="male" /><label for="male">男</label><input type="radio" name="sex" value="0" id="female" /><label for="female">女</label>
*注意：請把"for"屬性的值設定為相關元素的"id"屬性的值。
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
