i. a标签的用法
-
属性
- href 指定要跳转的页面
- target 指定以哪种方式跳转,target=“_blank”新打开一个页面跳转
- download 点击就下载网页 (不是所有浏览器都支持)
- rel=noopener 为了防止一个bug
-
作用
跳转外部页面跳转内部锚点 踢跳转到邮箱或电话等
-
a的href 的取值
-
网址 (三种写法)
//google.com
2. 路径
相对路径和绝对路径:/a/b/c以及a/b/c index.html以及./index.html
3. 伪协议
javascript:代码;
mailto:邮箱
tel:手机号
4.id
id:#xxx
注意:
点击a标签页面就会刷新
http://google.com 点击a标签页面就不会有任何反应
点击a标签页面会跳转到id为xxx的地方开始显示
会自动到达发邮件的地方
点击我会到打电话页面,电话号码会自动被获取
-
a的target 的取值
-
内置名字 _blank 在新的页面打开 _top 最顶层页面打开 _parent 当前链接页面的上一层打开
_self 在当前页面打开
-
程序员命名 window的name iframe的 name
注意:
以上两个a标签一起出现时,点击a标签就会新建一个叫xxx的窗口,target值一样,两个链接共用这个窗口,点击第二个a标签也不会新建窗口了!如要检测,控制台conse.log(window.name)即可看见结果。
ii.img标签
-
作用
发出get请求,展示一张图片
-
属性
- src 用来链接图片地址
- alt 图片显示不出来时代替图片显示的内容
- height / width 设置宽,高会自适应;设置高,宽也会自适应
-
事件
onload / onerror
-
响应式
max-width: 100% 加上这个,图片就是响应式的,在手机上可以适配!
-
可替换元素,可以被替换
考试可能会问,被问概率30%
iii.tab标签
-
相关的标签
- table
- thead 表头部分
- tbody 表的身体部分
- tfoot 表的尾部
- th 表头
- tr 一行
- td 一列 表的内容、数据
-
相关的样式
table-layout
- auto列宽度由单元格内容设定,哪列内容多哪列就宽
- fixed列宽由表格宽度和列宽度设定 ,它会让每一列都一样宽
- inherit:规定应该从父元素继承table-layout属性的值
border-collapse 控制border是否合并,默认时不合并的控制border是否合并,默认时不合并的
border-spacing 控制border是否合并,默认时不合并的
例子1
表头1 | 表头2 |
---|---|
一列 | 2列 |
注意:
当我们写<tr> <td>时,没有写<thead><tbody>时,浏览器会自动将<tr> <td>都放到<tbody>里面去
iv.form表单
-
作用
发get 或post请求,然后刷新页面
-
属性
- action 控制请求哪个页面,里面写什么,就会请求到什么
- autocomplete 是否自动填充,在点击输入框会给出一些自动填充数据供你选择
- method 控制请求的方法是用get还是post
- target 告诉浏览器我要提交到哪个页面进行刷新
-
事件 onsubmit
<input type="submit" value="按钮1">
区别:input里不能再有其他内容(标签),只能有纯文本;buttom里面还可以有其他任何内容
注意:form里必须要有一个type=“submit”, 若type=“ ”是这样为空的,就默认它是type=“submit”
1. input标签
-
作用
让用户输入内容
-
属性
类型type: 输入框输入的数据类型
-
button 按钮
-
checkbox 多选 n个input标签的name相同,即多选内容就是一个分组
-
email 邮箱地址
-
file 文件类型 1.只能选一个文件<input type="file"> 2. 可选多个文件<input type="file" multiple >
-
hidden 看不见的输入,这个一般是给js输入的
-
number 数字
-
password 密码
-
radio 单选 需要n个input标签的name相同 <input name=" gender" type= "radio">男<input name="gender" type="radio">女
-
search 输入内容时右边会出现 x ,点击 x 会一键删除输入的内容
-
submit 提交按钮
-
tel 电话号码
-
text 文本
-
color 颜色
-
reset 重置按钮 重置按钮会清除表单中的所有数据
-
其他 :
name / autofocus /checked / disabled /maxlength / pattern / value / placeholder
-
事件
onchange / onfocus / onblur
-
验证器 HTML5新增功能
注意:验证器例1
<input type="text" required >加上required就会验证,如果没有填写内容就提交不了
-
其他输入标签
标签
-
select + option 一个下拉菜单 里面嵌套option标签,表示下拉菜单中的每一项
-
textarea 可输入多行内容,用户界面可放大缩小输入框 加上style="resize:none"就不能放大缩小啦;可设置宽高
-
label
注意事项
-
一般不监听input的 click事件
-
form里面的input要有name
-
form里要放一个type=submit 才能触发submit事
本文为$Iron的原创文章,著作权归本人和饥人谷所有,转载务必注明来源