HTML常用标签

241 阅读3分钟

a标签的用法

a标签可以用来跳转到一个地址,包括外部页面或内部锚点以及邮箱或者电话等

a标签有3个常用属性

1. herf属性可以输入一个网址,并可以访问,常用取值有以下几钟:

  • xxxxx.com
  • xxxxx.com
  • //xxxxx.com
  • /a/b/c以及a/b/c
  • index.html以及./index.html
  • javascript:代码;(伪协议,用来做点击之后没有动作的一个标签)
  • mailto:邮箱(链接到邮箱)
  • tel:手机号(拨出电话)
  • herf=#xxx(跳转到指定id所在标签位置)

2. target属性可以指定在哪个页面打开超链接,常用取值有以下几种:

  • _blank(新建页面打开)
  • _top(顶部页面打开)
  • _parent(父级页面打开)
  • _self(当前页面打开)

额外介绍了iframe标签(用来制作内嵌窗口)

3. download属性可以用来下载页面,但是请注意,不是所有浏览器都支持

img标签的用法

img标签可以发出一个get请求,用来展示一张图片

img标签有以下几种常用取值:

  • alt(图片加载失败后显示的内容)
  • height(定义图片的高)
  • width(定义图片的宽)
  • src(图片的地址)

img标签还有两个重要事件:

  • onload/onerror(可以用来监控图片加载成功/失败,常用于制作图片加载失败后的补救)

除此之外,img标签还有两个重点:

可加入以下响应式,可以让页面在手机显示时固定最大宽度100%

max-width:100%

请注意img标签是一个可替换元素

table标签的用法

table标签可以建立一个表格

table相关标签有以下几种:

  • table(插入一个表格)
  • thead(表头部分)
  • tbody(主体内容部分)
  • tfoot(可有可无,表格底部部分)
  • tr(表示行)
  • td(表示列)
  • th(表示表头内容)

table还有以下几种相关样式:

  • table-layout(自动计算调整行列间距)
  • border-collapse(可以用来合并单元格间距)
  • border-spacing(用于调整单元格之间的间隙)

form标签的用法

可以发出get或者post请求,然后刷新页面

form有以下几种属性:

  • action(用来控制请求哪个页面)
  • method(用来控制是用get还是post来请求页面)
  • autocomplete(是否自动给填充记录数据,即下拉建议其他项)
  • target(可以选择在哪个页面进行新的请求)

请注意form里的input必须要有name

form里要放一个type=submit才能触发submit事件

input标签的用法

input标签可以让用户输入内容

input有以下常用的类型(type):

  • color(颜色)
  • checkbox(多选)(如果想让其位于同一组,需给其赋予同一个name)
  • hidden(隐藏内容)
  • password(密码)
  • radio(单选)(单选时需要给其设置在同一个name下)

请注意button中可以添加其他标签,而input内只能有纯文本


学习感想:html还有很多其他标签,类如:

  • canvas
  • audio
  • video
  • svg

但是这些标签html没有办法完整控制,而且兼容性需要查看文档,在课下我也会继续学习