一a标签
<a href="" target="" download=""></a>
属性
href
target
download
rel=noopener
href用法
1.1href的取值
1、网址
//google.com
输入//google.com即可，浏览器会自动补全为www.google.com
2、路径
/a/b/c以及a/b/c
index.html以及./index.html
/a/b/c中的第一个/代表根目录，指http服务的根目录而不是硬盘的根目录，a/b/c代表当前的目录
index.html以及./index.html都是指当前目录下的文件
3、伪协议
javascript伪协议
mailto:邮箱
tel:电话 直接打电话
<a href="javascript:;">``</a>在：和；之间输入js代码可以运行，在：和；之间什么也不写，点击页面不会有任何变化。
4、id
1.2href作用
跳转外部页面
跳转内部锚点
跳转到邮箱或电话等
2.target用法
1在空白页面打开
<a href="https://google.com" target="_blank"></a>
2在当前页面打开
<a href="https://google.com" target="_self"></a>
3在顶层打开页面
<a href="https://google.com" target="_top"></a>
4在上一层页面中打开
<a href="https://google.com" target="_parent"></a>
5在一个叫xxx的页面打开，如果没有这个页面，就会创建一个xxx页面打开
<a href="https://google.com" target="xxx"></a>
二.table标签
2.1table用法
<table> <thead> <tr> <th></th> <th>小hog红</th> <th>小明</th> <th>小颖</th> </tr> </thead> <tbody> <tr> <th>数学</th> <td>61</td> <td>91</td> <td>85</td> </tr> <tr> <th>语文</th> <td>61</td> <td>91</td> <td>85</td> </tr> <tr> <th>英语</th> <td>61</td> <td>91</td> <td>85</td> </tr> </tbody> <tfoot> <tr> <th>总分</th> <td>200</td> <td>200</td> <td>200</td> </tr> </tfoot> </table>
2.2包含的标签
- table 表格
- thead 表头
- tbody 内容
- tfoot 底部
- th 表头
- td 数据
- tr 行
2.3相关样式
- tablelayout
table-layout:auto 自适应宽度
table-layout:fixed 最宽的宽度等宽
- border
border-spacing: 0ch; border之间距离为0
border-collapse: collapse; 合并边框，默认不合并
三.img标签
3.1作用
发出get请求，展示一张图片
3.2属性
- alt
当图片加载失败，会显示alt所表示的文字
- scr
source的简称，输入加载的文件
- height/width
只选择高度或宽度，另一项会自适应，不能同时选高和宽，会导致图片变形
3.3事件
onload
onerror
xxx.onload=function() { console.log("图片加载成功"); }; xxx.onerror=function() { console.log("图片加载失败"); xxx.src="/ha.png"; };
加载失败时可以用一个图片来挽救
3.4响应式
img{ max-width: 100%; }
使图片自适应手机屏幕
四.form标签
<form action="https://google.com" method="GET" autocapitalize="on"> <input name="username" type="text" > <input type="submit" > </form>
4.1属性
action选择请求的页面
method选择是用get还是post请求，默认是get
autocapitalize 是否使用自动填充
target 选择页面在哪打开
4.2form事件
<input type="submit" value="点击"> <button type="submit"><strong>搞起</strong></button>
input必须有type="submit"才是提交按钮 button默认就是submit
input中不能再输入其它标签，value命名。不加value默认为提交
button可以再加入其它标签
必须要有submit才可以提交
下拉表单 <select> <option></option> <option></option> <option></option> </select>
注意事项
- 一般不监听input的click事件
- form里面的input要有name
- form里面要放一个type=submit才能触发submit事件
