HTML重点标签
英语小课堂
| 英语 | 翻译 | 英语 | 翻译 |
|---|---|---|---|
| hyper | 超级 | blank | 空白 |
| target | 目标 | parent | 父母之一 |
| reference | 引用 | self | 自己 |
| frame | 边框、框架 | load | 加载 |
| error | 错误 | canvas | 画布 |
a标签
特别常用 但是很多人不会用
属性
- href
- hyper ref 超级引用/链接
- target
- 指定窗口打开超链接
- download
- rel=noopener
作用
- 跳转外部页面
- 跳转内部锚点
- 跳转到邮箱或电话等
a的href的取值
网址
- https://google.com
- http://google.com
- //google.com
- 最高级，自动选择使用https还是http
路径
- /a/b/c 以及 a/b/c
- index.html 以及./index.html
伪协议
- javascript:代码；
- javascript:； 什么都不做
- mailto:邮箱
- tel:手机号
id
- h ref=#xxx
a的target的取值
内置名字
- _blank
- 在新的页面打开窗口X
- _top
- 在顶端打开窗口
- _parent
- 在在前链接的上一层打开窗口
- _self
- 在当前页面打开窗口
程序员命名
- window 的 name
- iframe 的 name
a 的 download
作用
- 不是打开页面，而是下载页面
问题
- 不是所有浏览器都支持，尤其是手机浏览器可能不支持
iframe标签
内嵌窗口 已经很少使用了，还有些老系统在用
table标签
表格
相关的标签
- table
- thead 表的头部
- tbody 表主体
- tfoot 表的尾部
- tr
- table row 表的一行
- td
- table data 表数据
- th
- table head 表头
相关的样式
-
table-layout
-
table-layout: auto; -
表格及单元格的宽度取决于其包含的内容
-
table-layout: fixed; -
在当前列中，该单元格所在行之后的行并不会影响整个列宽。
-
-
border-collapse
- 控制border是否合并
-
border-spacing
- border和border之间的距离单位是px
-
border-collapse: collapse; border-spacing: 0;一般写到reset里
img标签
图片
作用
- 发出get请求，展示一张图片
属性
- alt
- 加载图片失败的时候显示的文字
- height/width
- 高和宽任选其一让图片自适应
- 永远不要让图片变形
- src
- 图片地址
事件
- onload /onerror
- 监听图片是否加载成功
响应式
- max-width: 100%
- 最大宽度100%
可替换元素
- 考试可能会问，被问概率30%
form标签
表单
作用
- 发get或post请求，然后刷新页面
属性
- action
- 控制请求哪个页面
- autocomplete
- 自动建议
- method
- method="POST" 是控制用get或post去请求
- target
- 提交到哪个页面
事件
onsubmit
- 提交表单
input 和button有什么区别
-
input不能再放标签
-
button还可以放标签
-
<input type="submit" value="搞起" />
-
<button type="submit">搞起</button>
input标签
作用
- 让用户输入内容
属性
-
类型 type: button
-
checkbox 多选
-
email
-
file 上传文件
-
hidden 看不见
-
number
-
password 密码
-
radio / 单选 在同一个name里面
-
search
-
submit 提交表单
-
tel
-
text 文本
-
其他 name / autofocus / checked / disabled / maxlength / pattern / value / placeholder
事件
- onchange 元素触发, 当用户提交对元素值的更改时
- onfocus 事件在元素获取焦点时触发
- onblur 当一个元素失去焦点的时候 blur 事件被触发
验证器
- HTML 5新增功能
其他输入标签
标签
- select + option 元素提供一个选项菜单
- textarea 元素表示
一个多行纯文本编辑控件 - label
注意事项
- —般不监听input的click事件
- form里面的input要有name
- form里要放一个type=submit才能触发submit事件
其他标签
标签
- video
- audio
- canvas
- svg
注意事项
这些标签的兼容性一定要查看文档
「资料来源：饥人谷」