HTML 連接、表單【實用】

這一章的核心是HTTP

iframe 新開一個窗口

用了它頁面可能會卡...
想嵌套頁面的時候用（iframe默認 高度50 寬度100）【是可替換標籤】

第一種寫法：

<iframe src="https://www.baidu.com/" frameborder="0"></iframe>

第二種寫法：name要和a一塊兒用

<iframe name="xxx" src="#" frameborder="0"></iframe>
<a target='xxx' href="http://qq.com">QQ</a>
<a target='xxx' href="http://baidu.com">QQ</a>

a 標籤的 download 屬性

<a href="http://baidu.com" download>下載</a>

不加 download 也會下載 加和不加的區別：

1. 由HTTP響應決定：HTTP響應的是 Content-type:application/octet-stream 那麼 瀏覽器會如下載的形式接收請求 而不是在頁面展現
2. 若是寫的是 Content-type:text/html 又想在頁面下載 那就加個download 強制下載

a 標籤的 href 屬性寫法

<a href="" target='_blank'>123</a>
<a href="" target='_self'>123</a>
<a href="" target='_top'>123</a>
<a href="" target='_parent'>123</a>

_blank 空
_self 本身
_top 頂級
_parent 父級

<a href="//baidu.com" download>下載</a>

<!-- 無協議 -->
<a href="//qq.com">000</a>

<!-- 能夠直接寫# ？ 相對路徑 -->
<a href="#xxx">000</a>
<a href="？name=qqq">000</a>
<a href="./xxx.html">000</a>

<!-- 能夠接代碼 -->
<a href="javascript:aler(1)）;">000</a>

<!-- 能夠接代碼； 表示什麼也不作  javascript：是協議   ;是代碼 -->
<a href="javascript:;">000</a>

a 標籤和 form 標籤的區別 【重要】

a 標籤通常都是發起 get 請求
form 標籤通常都是發起 post 請求

---

form 提交

若是form表單中沒有提交按鈕 你就沒法提交 除非用js

<form action="users" method='post'><!-- form和a標籤同樣 都有target='_xxxxx' 標籤 -->
    <input type="text" name='username'>
    <input type='password' name='password'>
    <input type='submit' value='提交'>
</form>

form 提交按鈕 -- button

若是form裏面只有一個按鈕button 而且沒有寫 type='button' 那麼 它會自動升級爲提交按鈕
若是 type='button' 說明這個form表單沒有提交按鈕
submit是惟一能肯定 這個form表單能不能提交的按鈕

<form action="users" method='post'>
    <button>提交按鈕</button><!-- 自動升級爲 提交按鈕 -->
    <button type='button'>只是按鈕</button><!-- 只是按鈕 -->
    
    <input type='button' value='只是按鈕'><!-- 只是按鈕 -->
    <input type='submit' value='提交按鈕'><!-- 提交按鈕-->
</form>

form 提交按鈕 -- checkbox 【劃重點 敲黑板】

<!-- 記得把id改了省的報錯 -->


<form action="users" method='post'>
    <input type='checkbox'>選我!
    <!-- 點選我 不能選中checkbox 只能點checkbox的小框框 -->

    <input type='checkbox' id='ID的名字'><label for='ID的名字'>選我!</lable>
    <!-- 點選我 能夠選中checkbox -->
</form>

<!-- 記得把id改了省的報錯 -->


<form action="users" method='post'>
    <label for='ID的名字'>用戶名：</label><input type='text' name='xxx' id='ID的名字'>
    <!-- 點 用戶名：光標直接移入input裏 -->

    <label for='ID的名字'>密碼：</label><input type='text' name='xxx' id='ID的名字'>
    <!-- 點 密碼：光標直接移入input裏 -->
</form>

老司機寫法：【劃重點 敲黑板】
name 必需要寫
name 必需要寫
name 必需要寫
沒有name 提交的時候不會帶上這個值

<!-- 不寫id的狀況下 label 和 input 就不能產生關聯 但用 label 包住 input 則會自動產生關聯 -->

<form action="users" method='post'>
    <label>用戶名：<input type='text' name='xxx'></label>
    <label>密碼：<input type='text' name='xxx'></label>
</form>

綜合以上 寫個較爲完整的表單

<form action='usres' method='get' target='bbb'>
    <label>用戶名：<input type='text' name='username'></label>
    <label>密碼：<input type='password' name='password' ></label>
    <br/>
    
    喜歡的水果
    <!-- checkbox 多選框 屬於同一個name要給同一個名字 -->
    <label><input type='checkbox' name='fruit' value='orange'>橘子</label>
    <label><input type='checkbox' name='fruit' value='banana'>香蕉</label>
    <br/>
    
    喜歡嗎
    <!-- radio 單選框 屬於同一個的name要給同一個名字 這樣只能選中一個了 -->
    <label><input name='love' type='radio' value='yes' >Yes</label>
    <label><input name='love' type='radio' value='no' >Yes</label>
    <br/>
    <input type='submit' value='button'><!-- 提交 -->
</form>

<!-- 點擊提交後（信息就會提交到服務器） 能夠看跳轉頁面的地址欄 裏面有你選出的內容  -->

---

下拉列表

<!-- 必須有form才能提交 不要忘記寫 -->
<form action="usres" method="get" target="bbb">
    <select name="分組" multiple ><!-- 加上 multiple 能夠按ctrl 就能夠多選  -->
        <!-- value 什麼都不寫（或者直接不寫value） 提交後 分組後面就爲空 -->
        <option value="">-</option>
        <option value="1">第一組</option>
        <option value="2" >第二組</option>
        <!-- selected 默認選中 -->
        <option value="3" selected>第三組</option>
        <!-- disabled 默認不可選 -->
        <option value="4" disabled>第四組</option>
    </select>
    <input type="submit" value="button">
</form>

加上 multiple 能夠按ctrl 就能夠多選

---

多行文本

<form action="usres" method="get" target="bbb">
    <!-- 默承認以隨便拉 但會常常出現bug 全部 通常狀況須要固定寬高 -->
    <!--<textarea name="愛好" cols="30" rows="10"></textarea>-->

    <!-- cols 列數 row 行數 【cols不許 row只能大概控制 通常仍是用css控制】 -->
    <textarea style="resize:none; width: 200px; height: 100px; " name="愛好" cols="30" rows="10"></textarea>
    <input type="submit" value="button">
    
</form>

---

th 和 td 的區別

<table>
    <!-- 控制列的寬度 也能夠經過它 控制這一列的顏色 -->
    <colgroup>
        <col width="100">
        <col width="200">
        <col width="50">
        <col width="100">
    </colgroup>
    
    <thead>
        <tr>
            <!-- 標題要用 th -->
            <th></th><!-- 左邊也要寫標題的時候 要空出來一個空的 th -->
            <th>姓名</th>
            <th>班級</th>
            <th>分數</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>平均分</th>
            <td>11</td>
            <td>22</td>
            <td>33</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>總分</th>
            <td>111</td>
            <td>222</td>
            <td>333</td>
        </tr>
    </tfoot>
</table>

thead、tbody、tfoot、colgroup特色：
無論這四個標籤的順序如何顛倒都不要緊 瀏覽器最後會調整過來
就算不寫這四個標籤 也不要緊 瀏覽器會自動補上

css：
table之間不留空隙 border-collapse：collapse；

---

--- end ---