这一章的核心是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 —