html的標籤，表單，內嵌框架

一. <a>標籤

0. 用圖片當連接，就是把圖片當成連接文字便可

<a href="http://www.baidu.com/" title="跳轉到百度">
  <img src='images/pic.jpg" alt="蘋果"/>
</a>

1. <a href="#">新聞標題</a>

這裏的#表示缺省值，會使連接跳到頁面頂部，若是寫成href="" ,效果同樣

若是想點連接啥都不作，須要寫成<a href="javascript:;">缺省值</a>

2. 連接時打開一個新網頁,使用target屬性，默認爲target="_self",修改成以下

說明：

target屬性規定了在何處打開超連接的文檔。 _blank使瀏覽器總在一個新打開、未命名的窗口中載入目標文檔。

3. 頁面內定義滾動跳轉,使用id屬性

例若有三個標題1，2，3，需求是想點擊連接名到指定標題位置

<a href="#mao1">標題1</a>
<a href="#mao2">標題2</a>
<a href="#mao3">標題3</a>
 
 
<h3 id="mao1">標題1</h3>
........
<h3 id="mao2">標題2</h3>
........
<h3 id="mao3">標題3</h3>

二. 表單

1. input爲text類型時，也能夠預先寫入值

<form action="form_action.asp" method="get">
name: <input type="text" name="username" value="George" /><br />
password: <input type="text" name="pwd" value="Bush" /><br />
<input type="submit" value="Submit form" />
</form>

注意：action的值爲提交地址

2. 互斥單選框，須要加上name屬性，而且值要相同，不然兩個都能選

<label>性別：</label>
<input type="radio" name="gender" value="0" />男
<input type="radio" name="gender" value="1" />女

3. checkbox爲多選框，name也要定義爲同樣的

<label>愛好：</label>
<input type="checkbox" name="like" value="game" />遊戲
<input type="checkbox" name="like" value="shopping" />購物
<input type="checkbox" name="like" value="study" />學習

4. 提交，重置表單項

<input type="submit" name="" value="提交">
 
<!-- input類型爲reset定義重置按鈕 -->
<input type="reset" name="" value="重置">

value屬性的定義和用法

value 屬性爲 input 元素設定值，對於不一樣的輸入類型，value 屬性的用法也不一樣：

type="button", "reset", "submit" - 定義按鈕上的顯示的文本
type="text", "password", "hidden" - 定義輸入字段的初始值
type="checkbox", "radio", "image" - 定義與輸入相關聯的值

注意：

<input type="checkbox"> 和 <input type="radio"> 中必須設置 value 屬性。

value 屬性沒法與 <input type="file"> 一同使用。

5. select定義下拉框

<label>籍貫：</label>
<select name="site">
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">廣州</option>
<option value="3">深圳</option>
</select>

6. input類型爲file定義上傳照片或文件等資源

<label>照片：</label>
<input type="file" name="person_pic">

效果以下

7. 定義多行文本，若是想精確控制能輸入多少字，須要css

<label>我的描述：</label>
<textarea name="about"></textarea>

8. label標籤中的for屬性，使值等於input中的id屬性，提升用戶體驗，點擊字就可選上選項

<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>

說明：value值的做用

1）. 若是form的提交方式爲get，提交的時候，name和value的值會被顯如今地址欄中，用於數據量小且非敏感信息，以下

2）. 對於密碼等敏感信息及數據量較大時，須要使用post方法，它用http協議報文進行提交

三. 內嵌框架，就是在一個網頁中會單獨有一個窗口顯示其餘網頁

<iframe src="http://www.baidu.com" width="900" height="500" frameborder="0" scrolling="no">
</iframe>

說明：

width, height用於定義窗口大小

frameborder用於設置邊框

scrolling用於設置滾動條

用途：

1）可內嵌多個框架來合成頁面

<iframe src="http://www.baidu.com" width="900" height="500" frameborder="0" scrolling="no">
</iframe>
<iframe src="001列表.html width="900" height="500" frameborder="0" scrolling="no">
</iframe>

2)進行頁面內跳轉

<a href="http://www.baidu.com" target="myframe">百度網</a>
<a href="http://www.itcast.cn" target="myframe">傳智播客</a>
<a href="http://www.qq.com" target="myframe">騰訊網</a>
<br />
<iframe src="http://www.baidu.com" width="900" height="500" frameborder="0" scrolling="no" name="myframe">
</iframe>

說明：

1. 實現要點是全部<a>標籤的target屬性值要和<iframe>標籤的name屬性值相同

2. 實現效果是，頁面初始顯示百度的內嵌窗口，點擊騰訊網連接會在內嵌窗口顯示騰訊網，效果以下