超链接：a标签

  • 属性href

    href的取值
  1. 网址
  2. 路径
    • /a/b/c以及a/b/c
    • ./htttp服务的根目录
    • index.html以及./index.html
  3. 伪协议
    • javascript: ; 一个什么都不做的按钮
    • mailto: 邮箱
    • tel: 手机号

  4. 锚点id

    • href=#xxx 跳转到id取值xxx的标签

      属性target

      指定窗口打开超链接

  5. target的取值

  • _self：当前窗口
  • _blank：空白窗口
  • _top：顶级窗口
  • _parent：父级窗口
  1. 程序员命名

  • window.name

    1. 取值字符串xxx（target=”xxx”）
      1. 有xxx窗口就在xxx打开，没有会新建xxx
      2. 打开多个还是在xxx窗口里
    2. 获取窗口name：浏览器控制台console→输入window.name

      其他属性

  • download

    1. 作用：下载页面（不是打开页面）
    2. 问题：不是所有浏览器都支持（尤其手机浏览器可能不支持）
  • rel=noopener

    作用

  1. 跳转外部页面
  2. 跳转内部锚点id
  3. 跳转到邮箱mailto或电话tel等

内嵌窗口：iframe标签

（已经很少使用，有些老系统在用）

表格：table标签

标签

  • table：表格
  • thead：表格的头部
  • tbody：表格的身体
  • tfoot：表格的尾部
  • tr：一行
  • th：表头
  • td：数据

（顺序无关）

样式

  • table-layout（布局表格单元格行和列的算法）
    • auto：自适应
    • fixed：等宽
  • border-collapse（控制表格是否合并）
    • collapse
  • border-spacing（控制border和border间的距离）
    • 0
      1. table {
      2. table-layout: auto;
      3. border-collapse: collapse;
      4. border-spacing: 0;
      5. }

图片：img标签

  • 加载失败显示的字

    响应式：max-width: 100%

    事件

  • onload：成功

  • onerror：失败

监听图片是否加载成功

  1. <img id=xxx src="" alt="">
  2. <script>
  3.     xxx.onload = function () {
  4.         console.log('图片加载成功');
  5.     }
  6.     xxx.onerror = function () {
  7.         console.log('图片加载失败');
  8.       xxx.src = "/404.png";
  9.     }
  10. </script>

可替换元素

重点考察 https://developer.mozilla.org/zh-CN/docs/Web/CSS/Replaced_element

作用

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

表单：form标签

  • 属性

  • action

    • 控制请求页面的地址（相当于img的src）
    • 取值无所谓
  • method
    • GET/POST：控制用get/post请求

  • autocomplete：是否自动填充image.png

    • on：在input加name=”username”，就会显示常用用户名
    • off：没有建议

  • target

    1. 告诉浏览器要提交到哪个页面（哪个页面就刷新）

      事件

  • onsubmit

    1. 提交会触发这个事件
    2. 要触发submit必须要有type=”submit”

      作用

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

输入内容：input标签

  • 属性type

  • text：输入框image.png

  • password：密码框image.png
  • submit：提交按钮image.png
    1. 浏览器会根据当前语言变动按钮名字
    2. 点击提交按钮页面会刷新
  • button：按钮image.png
    1. 点击提交按钮页面会刷新
    2. 按钮样式可以改动，如插入图片
  • radio：单选按钮image.png
    1. 单选：将它们的name=”xxx”设置为相同
  • checkbox：多选框image.png
    1. 多选：将它们的name=”xxx”设置为相同
  • fileimage.png
    • 选择多个文件：multipleimage.png（按住Ctrl多选）
  • numberimage.png
  • searchimage.png
  • colorimage.png
  • tel
  • email

  • hidden：看不见的input

    • 给机器看的，用于给js自动填一些id，字符串的东西

      其他属性（暂时不学）

  • name

  • autofocus
  • checked
  • disabled
  • maxlength
  • pattern
  • value：可改变按钮名称
  • placeholder

    事件

  1. onchange：用户改变的内容（当用户输入改变时会触发事件）
  2. onfocus：用户聚焦的内容（当用户把鼠标集中到它身上）
  3. onblur：用户失去聚焦的内容（用鼠标从里面出来）

    验证器

    HTML5新增功能
  • required：提交会提醒填写字段image.png

    • 作用

      让用户输入内容

其他输入标签

  • select+option

image.png

  1. <select>
  2.   <option value="">- 请选择 -</option>
  3.   <option value="1">星期一</option>
  4.   <option value="2">星期二</option>
  5. </select>

  • textarea：多行文本框image.png

    • （可以自由拖动大小）
    • resize: none;多行文本框固定大小（不能自由拖动大小）
      1. <textarea style="resize:none; width:xx%; height:xxpx;"></textarea>

  • label

注意：

  1. 一般不监听input的click事件
  2. form里面的input要有name
  3. form里面放一个type=submit才能触发submit事件

其他标签

  • video：视频
  • audio：音频
  • canvas：画画
  • svg：矢量化

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

1-两种提交按钮的区别

  • input type=”submit”
  • button type=”subimt”
  1. input里不支持其他标签（只能纯文本）
  2. button里能有任何东西（放图片都行）
  3. form表单必须要有type=”submit”，才可以提交（如果没写type默认就是subimt）