a 标签

  1. 定义
    • a 标签是创建通向其他网页、文件、同一页面的其他位置、电子邮件地址或者其他任意URL的超链接。
  2. 属性
  • href 属性：它的取值有以下几种
    • https://google.com 这个是https协议
    • http://google.com 这个是http协议
    • //google.com 这个是无协议网址，它会自动选择是用https还是http协议，所以我们推荐用这种写法
    • 地址：
      • /a/b/c（绝对路径）和 a/b/c（相对路径）。这里有些不一样的地方，因为http-server在哪里打开，它就会把哪里作为根目录。而如果我们是使用双击去打开这个html文件，那是文件路径，在点超链接的时候，我们会根据文件路径的做法找到文件的根目录去，这样就会出错。所以我们要用http-server来进行模拟测试，而不是用双击打开文件的方式去测试html文件。
      • index.html 和 ./index.html。这是在当前目录下寻找这个文件，两个意思是一样的。
    • javascript: ;（伪协议）：
      • 这里的代码为空的话，就是一个点击之后不会有任何反应的按钮，用其他任何办法都不能达到同样的效果。
    • mailto：邮件地址 写邮件给邮件地址主人
    • tel：手机号 打电话给这个手机号
    • id：href=”#id” 可以定位到页面中这个id的位置

      img 标签

  1. 定义：img标签是将图片嵌入文档的标签。
  2. 作用：发出GET请求，展示一张图片。
  3. 属性：
    • src：是必有的属性。是图片的来源地址，可以是网址，也可以是路径。
    • alt：alternative的意思。就是如果这个图因为意外原因不能加载，那么浏览器会显示alt中设置的备用文本。
    • height：图片的高度。如果只设置高度，那么宽度会自适应。
    • width：图片的宽度。如果只设置宽度，那么高度会自适应。

  4. 事件：

    • onload：控制成功加载后要执行的事件
    • onerror：可以使用这个事件，当src出问题的时候，可以将路径设置成其他备用路径。

      table 标签

      1. <table>
      2. <thead>
      3.    <tr>
      4.      <th>姓名</th>
      5.      <th>数学成绩</th>
      6.    </tr>
      7. </thead>
      8. <tbody>
      9.    <tr>
      10.      <td>小明</td>
      11.      <td>80</td>
      12.    </tr>
      13.    <tr>
      14.      <td>小红</td>
      15.      <td>70</td>
      16.    </tr>
      17.    <tr>
      18.      <td>小强</td>
      19.      <td>60</td>
      20.    </tr>
      21. </tbody>
      22. <tfoot>
      23.    <tr>
      24.      <td>总分</td>
      25.      <td>210</td>
      26.    </tr>
      27. </tfoot>
      28. </table>
      效果：
      image.png

  5. table 标签的直系子标签只能有三个：thead、tbody、tfoot。

  6. 每个标签里都有tr（table row），表示一行
  7. thead的tr标签里有th（表头）
  8. tbody的tr标签里有th（在有两个表头的时候）和td（table data）
  9. 如果没有写tbody、thead的话，浏览器会把你写的tr都放在tbody里面；如果你只写了td，那浏览器会把你的td放在tr里，然后tr放在tbody里。
  10. thead、tbody、tfoot在写的时候可以不按顺序，浏览器会照常展示。

  11. 相关的样式

    • table-layout：
      • auto 自动根据内容计算行列宽度自行调整
      • fixed 统一列宽
    • border-collapse：取值collapse，合并边框
    • border-spacing：表格之间的空隙

      form 标签

  12. 作用：发送GET或POST请求，然后刷新页面

  13. 属性：
    • action：请求的地址
    • method：请求方式
    • autocomplete：自动填充
    • target：刷新那个页面，与a标签属性一样

  14. 事件：

    • onsubmit：提交form表单 必须有该属性，否则无法提交

      input 标签

  15. 类型：

    • text 文本，password 密码，submit 提交
    • radio 单选，checkbox 多选（需使name属性相同）
    • file 单选文件，multiple 多选
    • color，email，tel，number，search，hidden
    • name，value，checked，placeholder，multiple，maxlength，autofocus，disable，prattern（正则）
  16. 事件：
    • onchange：监控输入框内容是否发生改变
    • onfocus：监控聚焦
    • onblur：监控失焦
  17. 验证器：
    • repuired

  18. input与button标签的区别：input不能放其他内容，button里可以放标签或图片

    textarea 标签

  19. 作用：一个多行输入框

  20. 用css控制样式：
    • resize: none; width: ; height: ;