英语小课堂

英语 翻译 助记 英语 翻译 助记
hyper 超级 害怕 blank 空白
target 目标 她给他 parent (s) 父母之一 盼望他
reference 引用 refer + ence self 自己
frame 边框、框架 load 加载
error 错误 爱惹 canvas 画布

a 标签

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

属性

  • href
  • target
  • download （不大靠谱,很多浏览器不支持）
  • rel=noopener （为了防止一个 BUG）

作用

  • 跳转外部页面跳转内部锚点
  • 跳转内部锚点
  • 跳转到邮箱

预览的时候 不要双击打开 HTML，要用 HTTP 服务器打开。

http-server 或者 parcel 或者 VSCode 里面的 Live Server

a 的 href 的取值

  • 网址
  • 路径
    • /a/b/c 以及 a/b/c
    • index.html 以及 ./index.html
  • 伪协议
    • javascript: 代码;
    • mailto: 邮箱
    • tel: 电话号
  • id
    • href=#xxx

a 的 target 的取值

  • 内置名字
    • _blank
    • _top
    • _parent
    • _self
  • 程序员命名
    • window 的 name
    • iframe 的 name

a 的 download

  • 作用
    • 不是打开页面，而是下载页面
  • 问题
    • 不是所有浏览器都支持，尤其是手机浏览器可能不支持

iframe 标签

  • 内嵌窗口
  • 已经很少使用了，还有些老系统在用

table 标签

  • 表格
  • HTML 有 超强纠错 的功能
  • 各个标签 与书写的顺序无关，一定是 头 身体 脚

相关的标签

  • table
  • thead
  • tbody
  • tfoot
  • tr
  • td
  • th

相关的样式

  • table-layout // 列宽的计算算法
  • border-collapse // 是否合并各个单元格
  • border-spacing // 单元格的空隙（调0）

img 标签

  • 图片

作用

  • 发出 get 请求，展示一张图片

属性

  • alt / height / width / src
  • 宽高只写一个的时候，另一个会自适应
  • （永远不要让图片变形）

事件

  • onload / onerror （监听图片是否加载成功）

响应式

  • max-width: 100%

可替换元素

  • 考试可能会问，被问概率 30%

form 标签

作用

  • 发 get 或 post 请求，然后刷新页面

属性

  • action / autocomplete / method / target

事件

  • onsubmit

    • 点击提交会触发

  • button 是将 当前form表单里面的所有input提交

  • 清除的也是一样原理

input 标签

作用

  • 让用户输入内容

属性

  • 类型 type: button / checkbox / email / file / hidden / number / password / radio / search / submit / tel / text
  • 其他 name / autofocus / checked / disabled / maxlength / pattern / value / placeholder
  • 只要出现 disabled / ~ 属性 就不可输入，无论赋值是什么值都不可输入

事件

  • onchange / onfocus / onblur

验证器

  • HTML5 新增功能

其他输入标签

标签
  • select + option
  • textarea
  • label
注意事项
  • 一般不监听 input 的 click 事件
  • form 里面的 input 要有 name
  • form 里要放一个 type=submit 才能触发 submit 事件

其他标签

标签

  • video
  • audio
  • canvas
  • svg

注意事项

  • 这些标签的兼容性一定要查看文档
  • 后续我们会在 JS 课程里专门讲这些标签