a标签
<a href=”跳转目标” target=”目标窗口的弹出方式”>文本或图像
单词anchor的缩写，意为：锚
| 属性 | 作用 |
|---|---|
| href | hyper reference 用于指定链接目标的url地址（必须属性） |
| target | 指定链接页面打开方式其中_self为默认值,_blank在新窗口中打开;_top在顶层窗口打开;_parent上一级窗口打开 |
| download | 用于下载，但很多浏览器不支持 |
| rel=noopener | 该属性指定了目标对象到链接对象的关系。该值是空格分隔的列表类型值。 |
<a> href的取值
- 网址:
//google.com ——这个//会自动选择http还是https(建议使用)
- 路径
/a/b/c及a/b/c ——都是相对路径，虽以/开头，但不同于文件目录
index.html及./index.html
- 伪协议
javascript:代码; ——为了直接执行js。现在基本不用，但可以用
<a href="javascript:;">查看</a>
这行代码使链接为空，点击无动作，不刷新页面也不跳转。
若href值为空会刷新页面；若值为#会跳转到页面顶部。
maito:邮箱 ——点击发邮件到填写的邮箱
tel:手机号 ——点击呼起电话
- id
跳转到页面某个位置（使用唯一id）
<p id="xxx">跳转到这里</p>
<a href="#xxx">查看</a>
复制代码iframe标签
内嵌标签 可设置; 使用较少，不必过多关注
img的用法
- 作用：
发出get请求，展示一张图片
- 属性：
src:文件路径地址属性
alt:替换文字属性，是图像的描述内容
height/width:只写一个，另一个会自适应;不建议都写，可能变形。
- 事件：
onload/onerror
用来监听是否加载成功 一般用于测试
<img id="xxx" src="pics.png" alt="这里有张图">
<script>
xxx.onload = function () {
console.log("图片加载成功");
};
xxx.onerror = function () {
console.log("图片加载失败");
xxx.src = "/404.png";
};
</script>
复制代码如果成功则显示pics.png图片；失败则显示404.png图片
响应式：
img {
max-width: 100%;
}
复制代码——手机上图片会自适应
table标签
- table
- thead ——可以没有
- tbody
- tfoot ——可以没有
- tr ——table row
- td ——table data
- th ——table head表头（默认会加粗）
注意如果不写thead、tbody、tfoot，html会自动纠错帮你把tr、td、th的内容放入tbody中，而thead、tbody、tfoot代码不按顺序摆放也会被html纠正回来。
相关样式
table-layout
table-layout:auto; （自动以内容计算其长宽）
table-layout: fixed; （自动计算，但长宽相对平均）
复制代码border-collapse及border-spacing ——建议初始设置如下
border-collapse: collapse; （border是否合并）
border-spacing: 0px; （border间距）
复制代码form标签
- 作用： 发get或post请求，然后刷新页面
- 属性： action ——类似图片的src，后台会给一个地址，直接调用
method ——控制get/post
autocomplete ——是否自动填充
target ——提交到哪个页面，哪个页面刷新
- 事件： form必须有个type=submit的按钮；
不写会默认；否则不能提交表单
input&button——button内还可以有其他标签，而input不可以！
<input type="submit" value="input标签">
<button type="submit"><strong>点我！
</strong><img src="404.png" alt=""></button>
复制代码input标签
- 作用： 让用户输入内容
- 属性： 类型type: button(按钮) / radio(选择) / checkbox(多选) / email / file(选择文件) / hidden(人看不见,一般给电脑看的) / number / password(密码) / search(搜索) / submit(提交) / tel / text(文本) / week / data(日期) / range(范围) / color(颜色) / reset(重置)
其他:name(选择时 可以使用name分组) / autofocus / checker / disabled / maxlength / pattern / value / placeholder
- 事件：
onchange / onfocus / onblur
- 验证：
required（html5自带验证。如果设置required，不填表单就无法提交）
其他标签
其他输入标签
textarea标签
label标签
select+option标签
<select name="location" id="">
<option value=""> - 请选择 - </option>
<option value="1">成都</option>
<option value="2">重庆</option>
</select>
复制代码多媒体等（注意兼容性）
video ——视频
audio ——音频
canvas ——图像
svg ——矢量化
Tips
- 一般不监听input的click时间，focus可能会
- form里面的input要有name
- form里面必须要放一个type=submit才会触发submit事件