42HTML重难点

HTML重点标签

英语小课堂

英语 翻译 英语 翻译
hyper 超级 blank 空白
target 目标 parent 父母之一
reference 引用 self 自己
frame 边框、框架 load 加载
error 错误 canvas 画布

a标签

特别常用 但是很多人不会用

属性

  • href
    • hyper ref 超级引用/链接
  • target
    • 指定窗口打开超链接
  • download
  • rel=noopener

作用

  • 跳转外部页面
  • 跳转内部锚点
  • 跳转到邮箱或电话等

a的href的取值

网址

路径

  • /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

注意事项

这些标签的兼容性一定要查看文档

「资料来源:饥人谷」

点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注