HTML重要标签

243 阅读2分钟

1.常见英语单词

英文 中文 英文 中文
hyper 超级 blank 空白
target 目标 parent 父母
reference 引用 self 自己
frame 边框、框架 load 加载
error 错误 canvas 画布

2.a标签的用法

href属性(链接的地址):

  • 网址
  • 路径
    • /a/b/c 以及 a/b/c
    • index.html 以及 ./index.html
  • 伪协议
    • javascript:代码; 执行JS代码 javascript:; 可以实现点击按钮后无任何跳转和刷新
    • mailto:邮箱
    • tel:手机号
  • id
    • href=#xxx 跳转至ID元素

target属性(跳转的方式):

  • 内置命名
    • _blank:跳转至新的页面打开链接
    • _top:跳转至最上层的iframe页面打开链接
    • _parent:跳转至上层的iframe页面打开链接
    • _self:在本页面打开链接
  • 程序员命名
    • window的name:可以实现当前页面的任何a标签都在name命名的页面(最先打开的页面)打开
    • iframe的name
download属性
  • 功能:下载页面
  • 问题:不是所有浏览器支持

3.iframe

  • 功能:内嵌窗口
  • 现状:很少使用

4.table标签

相关的标签

  • table:表格标签
  • thead:表格头部
  • tbody:表格主题
  • tfoot:表格尾部
  • tr:表格行
  • td:表格数据
  • tr:表格头数据(粗体)

相关样式

  • table-layout 表格单元宽高
    • auto 单元格内容决定宽高
    • fixed 单元格固定宽高

5.img标签

作用:发出get请求,展示一张图片

属性:

  • src:图片源地址
  • alt:加载替代的替代文字
  • height
  • width
响应式
  • max-width:100% 最大宽度为窗口宽度(手机自适应)

可替换元素

6.form标签

作用:发送get或post请求,然后刷新页面

属性

  • action:表单提交的地址
  • autocomplete:自动补全框
  • method:选择GET或POST模式
  • target:跳转方式(同a标签)

事件

  • onsubmit

7.input标签

作用:让用户输入内容

属性

  • 类型type
    • button:按钮
    • checkbox:多选框
    • email:电子邮箱
    • file:文件
    • hidden:隐藏
    • number:数字
    • password:密码
    • radio:单选框
    • search:搜索
    • submit:提交按钮
    • tel:电话
  • 其他
    • name:表单名字
    • autofocus:自动选中
    • checked:选中
    • disabled:禁止
    • maxlength:最大长度
    • value:默认值
    • placeholder:输入提示信息
    • pattern:用于验证input值的正则表达式

事件

  • onchange:改变响应事件
  • onfocus:选中响应事件
  • onblur:退出响应事件

8.其他输入标签

标签

  • select + option:选择框与选项
  • textarea:多行输入
  • label:标签

注意事项

  • 一般不监听input的click事件
  • form里面的input要有name
  • form里面必须放一个type=submit才能触发submit事件

其他标签

  • video:视频标签
  • audio:音频标签
  • canvas:画布标签
  • svg :矢量图标签