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事件