HTML常用标签

84 阅读2分钟

1. <a>标签

  • 作用:跳转外部页面、跳转内部锚点、跳转到邮箱或电话等
  • 属性:
    • href: hyper ref(超链接)。href的取值有九种。 `

      网址http://xxx.xxx ; xxx.xxx ; //xxx.xxx; 优先使用//xxx.xxx,因为会自动匹配协议选择地址

      路径/a/b/c;a/b/c;index.html或者./index.html;

      伪协议:href="javascript:xxx;"可执行js代码,如果添加javascript:;,不会执行任何操作,不会刷新网页或者跳转;mailto:xxx@xxx,tel:手机号,可以实现发邮件和打电话的操作

      id:href=#xxx实现跳转锚点

    • target:_blank新页面打开 ; _self当前页面打开 ; 顶层窗口打开,字面意思 ; xxx,会打开一个名为xxx的窗口

    • download:下载页面

    • rel=noopener:安全问题,防止后一个页面获取前一个页面的控制权

    • id:可以给标签元素添加id,通过在a标签的href属性中使用"#id"实现锚点的跳转。

2. <table>标签

正确用法

<table>
  <thead><tr><th></th></tr></thead>
  <tbody><tr><td></td></tr></tbody>
  <tfoot><tr><td></td></tr></tfoot>
</table>
  • 相关的样式:table-layout:auto自动计算宽和高,也可以用fixed,表格和列的宽度通过表格的宽度来设置,某一列的宽度仅由该列首行的单元格决定,一般用auto
  • border-collapse:collapse 合并表格的border
  • border-spacing: 表格间的距离,初始表格格与格之间有空隙

3. <image>标签

  • 发送的是get请求,alt用来在图加载失败时显示
  • 对于图片要么修改宽要么修改高,绝对不能改变图片比例
  • 加一句css{max-width:100%}可以使图片变为响应式
  • 有onload属性和onerror属性,分别在图片加载完成后和图片加载失败时执行xxx

4.<form>标签

  • 表单,可用post或者get提交,会刷新页面,需要与type属性设置为submit的input或者button配合使用
  • 有action、autocomplete、method、target、onsubmit等常用属性

5.<input>标签

  • type属性可以有text、password、radio单选、checkbox多选、file选择文件等,多选文件需要加上multiple,同时实现单选,还需要给每个选项加上相同的name
  • 一般不监听input的click事件
  • form里面的input要有name
  • form里面放一个type=submit才能触发submit事件

6.emmet命令

vscode自带的命令,快速生成html语句