HTML常用标签

孓孑
112 阅读3分钟
HTML常用标签

HTML常用标签

内容介绍:

  1. a标签

    • 属性
      • href
      targe
      download
      rel=noopener
    • 作用
      • 跳转外部页面
      跳转内部锚点
      跳转到邮箱或电话

    a的href取值

    1. 网址
      2. google.com
      google.com
      //google.com
    2. 路径
      3. /a/b/c 以及 a/b/c
      index.html 以及 ./index.html
    3. 伪协议
      4. javascript:代码;
      mailto:邮箱
      tel:手机号
    4. id
      5. href=#xxx 跳转到指定页面

    a的target的取值

    1. 内置名字
      2. _blank 新窗口打开
      _top 顶级页面打开
      _parent 在父框架集中打开
      _self 默认在相同的框架中打开
    2. 程序员命名
      3. window的name
      iframe的name

    a的download的取值

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

  2. img标签

    1. 作用
      2. 发出get请求，展示一张图片
    2. 属性
      3. alt 属性
      用来设定图片的文字说明。图片不显示时（比如下载失败，或用户关闭图片加载），图片的位置上会显示该文本；
      <img src="图片.png" alt="示例图片"> height 属性，width 属性
      图片默认以原始大小插入网页，width属性和height属性可以指定图片显示时的宽度和高度，单位是像素或百分比。
      <img src="图片.png" height="300" width="400"> src 属性
      指定图片的网址，下例是相对URL，表示图片与网页在同一个目录。
      <img src="图片.png">
    3. 事件
      4. onload/onerror 监听图片是否加载成功
      <img id="xxx" width="400" src="图片.png" alt="一张图片"> <script> xxx.onload=function(){ console.log("图片加载成功"); }; xxx.onerror=function(){ console.log("图片加载成功"); xxx.src="/404.png"; }; </script>
    4. 响应式
      5. max-width:100%
      <style> *{ margin: 0; padding: 0; box-sizing: border-box; } img{ max-width: 100%; } </style>
    5. 可替换元素
      6. 详情可查看 developer.mozilla.org/zh-CN/docs/…

  3. table标签

    • 相关的标签
      • table 是一个块级容器标签，所有表格内容都要放在这个标签里面。
      thead、tbody、tfoot 都是块级容器元素，且都是table的一级子元素，分别表示表头、表体和表尾。
      tr 标签表示表格的一行（table row）
      th和td都用来定义表格的单元格。其中，th是标题单元格，td是数据单元格。
      <table> <thead> <th>表头</th> </thead> <tbody> <tr>表体</tr> </tbody> <tfoot> <tr>表尾</tr> </tfoot> </table>
    • 相关的样式
      • table-layout
      table-layout: auto 大多数浏览器采用自动表格布局算法对表格布局。表格及单元格的宽度取决于其包含的内容。

      table-layout: fixed 表格和列的宽度通过表格的宽度来设置，某一列的宽度仅由该列首行的单元格决定。在当前列中，该单元格所在行之后的行并不会影响整个列宽。
      border-collapse
      border-collapse：collapse 合并表格
      border-spacing
      border-spacing: 0 表格间隙为0

  4. 其他感想

      5. form标签

    • 作用
      • 发出get或post请求，然后刷新页面
    • 属性
      • action 请求道"..."页面
      autocomplete 是否自动填充
      method 控制用get还是post
      target 提交到哪个页面刷新
      <form action="/yyy" method="POST" autocomplete="off" target="a"> <input name="username" type="text"> <input type="submit" value="提交"> </form>
    • 事件
      • onsubmit
    • 注意
      • input 里面不能含有其他东西
      button 可以含有其他东西

    input标签

    • 作用
      • 让用户输入内容
    • 属性
      • 类型 type: button / checkbox / email / file / hidden / number / password / radio / search / submit / tel / text 其他 name / autofocus / checked / disabled / maxlength / pattern / value / placeholder
    • 事件
      • onchange / onfocus / onblur

    其他输入标签

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

    其他标签

    • 标签
      • video
      audio
      canvas
      svg
    • 注意事项
      • 这些标签的兼容性一定要查看文档
avatar
文章
阅读
粉丝