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

---