美文网首页
iframe a form table 标签

iframe a form table 标签

作者: 独钓寒江月 | 来源:发表于2019-08-22 22:20 被阅读0次

iframe 标签

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

a 标签的 download 属性

<a href="http://baidu.com" download>下载</a>
不加 download 也会下载 加和不加的区别：

由HTTP响应决定：HTTP响应的是 Content-type:application/octet-stream 那么 浏览器会以下载的形式接收请求 而不是在页面展示
如果写的是 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 表单提交

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

<form action="users" method='post'>
    <input type='checkbox'>选我!
    <!-- 点选我 不能选中checkbox 只能点checkbox的小框框 -->
    <input type='checkbox' id='ID的名字'><label for='ID的名字'>选我!</lable>
    <!-- 点选我 可以选中checkbox -->
</form>

不写id的情况下 label 和 input 就不能产生关联 但用 label 包住 input 则会自动产生关联

<form action="users" method='post'>
    <label for='ID的名字'>用户名：</label><input type='text' name='xxx' id='ID的名字'>
    <label for='ID的名字'>密码：</label><input type='text' name='xxx' id='ID的名字'>
</form>
<form action="users" method='post'>
    <label>用户名：<input type='text' name='xxx'></label>
    <label>密码：<input type='text' name='xxx'></label>
</form>

name 必须要写

table标签

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

相关文章