html中標籤個數不多,但是標籤的屬性非常之多,所以實際除非專業做前端的,否則沒必要把所有的屬性都記下來,需要查查w3c文檔即可,只需要掌握常見的用法,看得懂即可。詳細請查閱:W3C官網網站
表單用於蒐集不同類型的用戶輸入,表單由不同類型的標籤組成,相關標籤及屬性用法如下:
1、<form>標籤 定義整體的表單區域
- action屬性 定義表單數據提交地址
- method屬性 定義表單提交的方式,一般有“get”方式和“post”方式
2、<label>標籤 爲表單元素定義文字標註
3、<input>標籤 定義通用的表單元素
- type屬性
- type="text" 定義單行文本輸入框
- type="password" 定義密碼輸入框
- type="radio" 定義單選框
- type="checkbox" 定義複選框
- type="file" 定義上傳文件
- type="submit" 定義提交按鈕
- type="reset" 定義重置按鈕
- type="button" 定義一個普通按鈕
- type="image" 定義圖片作爲提交按鈕,用src屬性定義圖片地址
- type="hidden" 定義一個隱藏的表單域,用來存儲值
- value屬性 定義表單元素的值
- name屬性 定義表單元素的名稱,此名稱是提交數據時的鍵名
4、<textarea>標籤 定義多行文本輸入框
5、<select>標籤 定義下拉表單元素
6、<option>標籤 與<select>標籤配合,定義下拉表單元素中的選項
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單</title>
</head>
<body>
<h1>註冊表單</h1>
<!--1. form標籤定義一個表單區域,其action屬性定義表單數據提交的地址,form的method屬性定義提交方式,get/post-->
<form action="http://www.baidu.com/...." method="get">
<div>
<!-- 2. label標籤定義表單控件的文字標註,input標籤類型爲text定義了一個單行文本輸入框 -->
<label for="username">用戶名:</label>
<input type="text" name="username" id="username" />
</div>
<br>
<div>
<!--3. input類型爲password定義了一個密碼輸入框 -->
<label for="password">密 碼:</label>
<input type="password" name="password" id="password">
</div>
<br>
<div>
<!-- 4. input類型type爲radio定義了一個單選框 -->
<label>性 別:</label>
<input type="radio" name="gender" value="0" id="male"> <label for="male">男</label>
<input type="radio" name="gender" value="1" id="female"> <label for="female">女</label>
<input type="radio" name="gender" value="2" id="renyao"> <label for="renyao">中性</label>
</div>
<br>
<div>
<!-- 5 。input類型爲checkbox定義了複選框 -->
<label>愛 好:</label>
<input type="checkbox" name="like" value="study"> 學習
<input type="checkbox" name="like" value="python"> python
<input type="checkbox" name="like" value="frontend"> 前端
<input type="checkbox" name="like" value="beauty"> 美少女
</div>
<br>
<div>
<!-- 6 。input類型爲file定義上傳照片或文件等資源 -->
<label>美 照:</label>
<input type="file" name="">
</div>
<br>
<div>
<!-- 7. textarea定義多行文本輸入 -->
<label>個人介紹:</label>
<textarea name="introduce"></textarea>
</div>
<br>
<div>
<!--8. select定義下拉列表選擇 -->
<label>籍 貫:</label>
<select name="site">
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">河南</option>
<option value="3">河北</option>
<option value="4">廣州</option>
</select>
</div>
<br>
<input type="hidden" name="hid01" value="12">
<div>
<!--9. input類型爲submit定義提交按鈕 , 還可以用圖片控件代替submit按鈕提交,一般會導致提交兩次,不建議使用。如:-->
<input type="submit" name="" value="提交">
<!-- <input type="image" src="images/goods.jpg" name=""> -->
<!-- input類型爲reset定義重置按鈕 -->
<input type="reset" name="" value="重置">
</div>
<br/>
<div >
<!--<button> 元素定義可點擊的按鈕-->
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
</div>
</form>
</body>
</html>
效果如下:
2.html內嵌框架
html內嵌框架
<iframe>標籤會創建包含另外一個html文件的內聯框架(即行內框架),src屬性來定義另一個html文件的引用地址,frameborder屬性定義邊框,scrolling屬性定義是否有滾動條,代碼如下:
<iframe src="http://www..." frameborder="0" scrolling="no"></iframe>
內嵌框架與a標籤配合使用
a標籤的target屬性可以將鏈接到的頁面直接顯示在當前頁面的iframe中,代碼如下:
<a href="01.html" target="myframe">頁面一</a>
<a href="02.html" target="myframe">頁面二</a>
<a href="03.html" target="myframe">頁面三</a>
<iframe src="01.html" frameborder="0" scrolling="no" name="myframe"></iframe>