目录
1.a标签 2.table标签 3.img标签 4.form标签
a标签
作用
1.跳转外部页面 2.跳转内部锚点 3.跳转到邮箱或电话等
属性
- href ---链接到某个网页
- target --在哪个窗口打开超链接
- download --下载网页（理论上有用，实际咩用）
- real=noopener 跳转到XXX标签
a的href取值
网址
- https://google.com
- htttp://google.com
- //google.com
路径
- /a/b/c以及a/b/c
- index.html以及 ./index.html
伪协议
- javascript:代码;
- mailto:邮箱
- tel:手机号
ID
- href=#xxx
代码示例
<a href="//google.com">google</a>
<a href="/a/b/c.html">C.html</a>
<a href="/index.html">index.html</a>
<a href="javascript:alert(1)">JavaScript伪协议</a>
<a href="javascript:;">查看</a>
<a href="mailto:t2785970361@163.com">发邮件给我</a>
<a href="tel:13012365684">打电话给我</a>
<a href="#xxx">查看xxx</a>
table标签
内置
- _blank 在空白（新）的页面打开
- _self 在当前页面打开
- _top 在顶级（最上边）的窗口打开
- _parent 在当前页面的上一层打开
属性
- table
- thead --头
- tbody --中
- tfoot --底
- th --表头
- tr --行
- td --数据
代码示例
<table>
<thead>
<tr>
<th>英语</th>
<th>翻译</th>
</tr>
</thead>
<tbody>
<tr>
<td>hyper</td>
<td>超级</td>
</tr>
<tr>
<td>target</td>
<td>目标</td>
</tr>
<tr>
<td>reference</td>
<td>引用</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>空</td>
<td>空</td>
</tr>
</tfoot>
</table>
相关样式
1.table-layount： [auto：个性] [fixed：平均] 2.border-collapse： 控制是否合并 3.border-spacing： 控制border间距
常用设置
table-layout: auto;
border-spacing: 0;
border-collapse: collapse;
img标签
作用：发出get请求，展示一张图片
属性
- alt 图片加载失败，显示文字提示用户
- height 高
- width 宽
- src 图片地址
事件
- onload
- onerror
响应式
- max-width：100%
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>img标签</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
max-width: 100%;
}
</style>
</head>
<body>
<img id="xxx" src="dog.jpg" alt="狗子">
<script>
xxx.onload = function(){
console.log("图片加载成功");
}
xxx.onerror = function(){
console.log("图片加载失败");
xxx.src="/失败.jpg" ;
};
</script>
</body>
</html>
form标签
作用：发get或post请求，然后刷新页面
属性
- action 控制请求哪个页面
- autocomplete 是否自动填充
- method 控制是get还是post
- target 要提交到XX页面，XX页面需要刷新
事件
- onsubmit
