i. a标签的用法 属性 href 指定要跳转的页面 target 指定以哪种方式跳转,target=“_blank”新打开一个页面跳转 download 点击就下载网页 (不是所有浏览器都支持) rel=noopener 为了防止一个bug 作用 跳转外部页面跳转内部锚点 踢跳转到邮箱或电话等
a的href 的取值 网址 (三种写法)
https://google.com
http://google.com
//google.com
2. 路径
相对路径和绝对路径:/a/b/c以及a/b/c index.html以及./index.html
3. 伪协议
javascript:代码;
mailto:邮箱
tel:手机号
4.id
id:#xxx
注意:
点击a标签页面就会刷新
点击a标签页面就会自动回答顶部,页面不会刷新
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列 注意:
当我们写 时,没有写时,浏览器会自动将 都放到里面去
iv.form表单 作用 发get 或post请求,然后刷新页面
属性 action 控制请求哪个页面,里面写什么,就会请求到什么 autocomplete 是否自动填充,在点击输入框会给出一些自动填充数据供你选择 method 控制请求的方法是用get还是post target 告诉浏览器我要提交到哪个页面进行刷新 事件 onsubmit
区别:input里不能再有其他内容(标签),只能有纯文本;buttom里面还可以有其他任何内容
注意:form里必须要有一个type=“submit”, 若type=“ ”是这样为空的,就默认它是type=“submit”
-
input标签 作用
让用户输入内容属性
类型type: 输入框输入的数据类型
button 按钮
checkbox 多选 n个input标签的name相同,即多选内容就是一个分组
email 邮箱地址
file 文件类型 1.只能选一个文件 2. 可选多个文件
hidden 看不见的输入,这个一般是给js输入的
number 数字
password 密码
radio 单选 需要n个input标签的name相同 男女
search 输入内容时右边会出现 x ,点击 x 会一键删除输入的内容
submit 提交按钮
tel 电话号码
text 文本
color 颜色
reset 重置按钮 重置按钮会清除表单中的所有数据
其他 : name / autofocus /checked / disabled /maxlength / pattern / value / placeholder
事件 onchange / onfocus / onblur
验证器 HTML5新增功能 注意:验证器例1
加上required就会验证,如果没有填写内容就提交不了
其他输入标签 标签
select + option 一个下拉菜单 里面嵌套option标签,表示下拉菜单中的每一项
textarea 可输入多行内容,用户界面可放大缩小输入框 加上style="resize:none"就不能放大缩小啦;可设置宽高
label
注意事项
一般不监听input的 click事件
form里面的input要有name
form里要放一个type=submit 才能触发submit事