1.<a>
1.作用
跳转外部页面
跳转内部页面
跳转到邮箱或电话等
2.属性
href属性给出链接指向的地址。它的值应该是一个URL或者锚点
target属性指定如何展示打开的链接,可以在指定窗口,也可以在里面打开
-self:当前窗口打开
_blank:新窗口打开
_parent :上层窗口打开,用于从父窗口打开的子窗口,或者里面的链接
_top:顶层窗口打开
3.伪协议
javascript:代码;
javascript:; 写一个a标签,点击之后什么都不做
a<href="javascript:alert(1);">
id href=#xxx
a标签+id 直接跳转到该链接
mailto:邮箱
tel:手机
2.<table>
内嵌窗口
1.相关标签
<thead> <tbody> <tfoot>
<tr> table row 一行
<th> table head 标题单元格
<td> table data 数据单元格
2.相关的样式
table-layout
auto 根据内容预测有多宽 (小小红)
fixed 尽量平均
border-collapse
合并
border-spacing
间隔 空隙 一般设置为0
3.img
1.作用
发出get请求,展示一张图片(开发者工具)
2.属性
alt /height /width /src
1.alt属性用来设定图片的文字说明。图片不显示时(比如下载失败,或用户关闭图片加载),图片的位置上会显示该文本
<img src="1.jpg" alt="示例图片">
2.width属性与height属性可以指定图片显示时的宽度和高度
<img src="1.jpg" width="400" height="300">
3.事件
onload/onerror
<img width="200" src="1.JPG" alt="自拍照">
<body>
<img id="xxx" width="200" src="11.JPG" alt="自拍照">
<script>
xxx.onload=function(){
console.log("图片加载成功")
}
xxx.onerror=function(){
console.log("图片加载失败")
xxx.src="/404.jpg"
}
</script>
</body>
4.响应式
max-width:100%
<style>
*{
margin: 0%;
padding: 0%;
box-sizing: border-box;
}
img{
max-width: 100%;
}
</style>
4.form
1.作用
定义一个表单 发get或pos请求,然后刷新页面
2.属性
action autocomplete method target
action 是控制请求哪个页面
method 控制用get还是post来请求
autocomplete 自动显示建议 可能值为on 和off
target 提交的哪个页面 哪个页面应该刷新
name表单的名称,应该是网页中唯一的
3.事件
<input type="submit" value="添加">
<button type="submit"><strong>添加</strong></button>
两者的区别 :button里面还可以有标签
input里面不支持任何标签 只支持纯文本
不能使用button,使用submit才可以提交
5.<input>
1.作用
让用户输入内容,接受用户的输入
有很多类型 取决于type属性的值
2.类型
type="text" 普通文本输入框
type="search" 搜索的文本输入框
type="button" 没有默认行为的按钮 (不建议使用)
type="submit" 表单提交按钮
type="image" 将图片作为提交按钮
type="reset" 重置按钮
type="checkBox"复选框
type="radio" 单选框
注意:
一般不监听input的click事件
form 里面的input要有name
form里面要放一个type=submit才能触发submit事件
<input type="sumbit" value="提交">