内容简介:这一章的核心是HTTPiframe 新开一个窗口用了它页面可能会卡...
这一章的核心是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 也会下载 加和不加的区别:
- 由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表单中没有提交按钮 你就无法提交 除非用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 ---
以上所述就是小编给大家介绍的《HTML 链接、表单【实用】》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- CSS——CSS 给盒子、背景、链接、列表、表单、表格等加样式
- 静态链接和动态链接
- linux中硬链接、软链接的建立
- 表单 – 避免Symfony强制显示表单字段
- 细说 Angular 2+ 的表单(二):响应式表单
- 微信公众号开发C#系列-10、长链接转短链接
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Docker开发指南
[英] Adrian Mouat / 黄彦邦 / 人民邮电出版社 / 2017-4 / 79.00元
Docker容器轻量和可移植的特性尤其适用于动态和分布式的环境,它的兴起给软件开发流程带来了一场革命。本书对Docker进行了全面讲解,包括开发、生产以至维护的整个软件生命周期,并对其中可能出现的一些问题进行了探讨,如软件版本差异、开发环境与生产环境的差异、系统安全问题,等等。一起来看看 《Docker开发指南》 这本书的介绍吧!