HTML标签知识点详解

• iframe标签
• a标签
• form标签
• input/button标签
• table标签

iframe标签

iframe标签|MDN

<!-- 在iframe中打开网页 -->
<iframe src="#" frameborder="0" name=xxx></iframe>
<a href="http://qq.com" target=xxx>QQ</a>

a标签

a标签|MDN

跳转页面（HTTP GET请求）

download此属性指示浏览器下载URL而不是导航到URL，因此将提示用户将其保存为本地文件。

<a href="http://qq.com" download>下载</a>

href中可以使用协议：

1. 无协议，会自动继承协议

<!-- 如果此时网页使用的是file协议，则点击link则会使用file协议-->
<a href="//qq.com">link</a>

2. 可以表示相对路径

<!-- 会去打开当前目录下"qq.com"文件 -->
<a href="qq.com">link</a>

3. 伪协议

<a href="javascript:alert(1)">link</a>
<!-- 使用下面的写法，页面不会跳转 -->
<a href="javascript:;">link</a>

4. #

<!-- 页面滚动到顶部，页面锚点变成#，不发起请求 -->
<a href="#">link</a>

form标签

form标签|MDN

跳转页面（HTTP POST请求）

1. form必须要有submit按钮，如果在form中只有一个button,且没有指定type为button则该button自动转化成提交按钮
2. form主要发起POST请求，虽然也能发GET请求

<!-- form标签使用示例 -->
<form action="user" method="post">  
        <!-- 不添加name属性则发送请求不会携带该input的数据，即使已输入值 -->
        <input type="text" name="user">
        <input type="password" name="password">
        <!-- 使用label包裹input实现点击文字也能勾选 -->
        <label><input type="checkbox" name="shiwu" >十五</input></label>
        <!-- radio单选框，使用同一个name值实现单选 -->
        <label><input type="radio" name="fruit" value="apple">苹果</input></label>
        <label><input type="radio" name="fruit" value="banana">香蕉</input></label>
        <!-- multiple可以多选 -->
        <select name="分组" multiple> 
            <option value="1">第一组</option>
            <option value="2">第二组</option>
            <option value="3" disabled>第三组</option>
            <option value="4" selected>第四组</option>
         </select>
        <input type="submit" value="提交">        
</form>

点击提交后请求格式

POST /user HTTP/1.1
Host: 127.0.0.1:8080
Connection: keep-alive
Content-Length: 84
Cache-Control: max-age=0
Origin: http://127.0.0.1:8080
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36
Content-Type: application/x-www-form-urlencoded
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Referer: http://127.0.0.1:8080/
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.8

user=111&password=222&shiwu=on&fruit=apple&%E5%88%86%E7%BB%84=1&%E5%88%86%E7%BB%84=4

input/button标签

input标签|MDN

<!-- 使用label包裹input实现点击文字也能勾选 -->
<label><input type="checkbox" name="shiwu" >十五</input></label>

button标签|MDN

textarea标签|MDN

<textarea style="resize: none"  cols="30" rows="10"></textarea>

table标签

table标签|MDN

<!-- 示例 -->
    <table border="1">
        <!-- colgroup需配合col使用-->
        <colgroup>
            <!-- 设置第一列宽度为100 -->
            <col width=100></col>
            <!-- 设置第二列宽度为200 -->
            <col width=200></col>
        </colgroup>
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>分数</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>语文</th>
                <td>张三</td>
                <td>90</td>
            </tr>
            <tr>
                <th>数学</th>
                <td>李四</td>
                <td>96</td>
            </tr>
        </tbody>
        <tfoot></tfoot>
    </table>