NotionNext
NotionNext
编程爱好者
/互联网从业者
/知识分享博主
认知决定态度,态度决定选择,选择决定人生

HTML标签

发布于:2021-12-7|最后更新: 2023-8-18|
type
status
date
slug
summary
tags
category
icon
password

HTML重点标签

a标签

属性
  • href hyper reference的缩写,超链接
  • target 指定在哪个窗口打开页面
  • download 下载一个网页
  • rel=noopener 为了防止一个bug
作用
  • 跳转外部页面
  • 跳转内部描点
  • 跳转到邮箱或电话等

a的href的取值

网址
  • //google.com 无协议网址 ,自动选择使用http和https
路径
  • /a/b/c以及a/b/c 这里的/不是根目录,而是开启http服务时的根目录
  • index.html以及./index.html
伪协议
  • javascript:代码 就是可以执行的js代码
  • mailto:邮箱 可以发邮件
  • tel:手机号 可以打电话
id
  • href=#xxx

a的target的取值

内置名字
  • _blank 在新的页面打开
  • _top 在最顶层页面打开
  • _parent 在当前链接所在的上一层打开
  • _self 在当前页面打开
程序员命名
  • window的name
  • iframe的name

iframe标签

内嵌窗口,已经很少使用了,还有些老系统在用

table标签

相关的标签
  • thead 表示表的头部
  • tbody 表的中间部分
  • tfoot 表示表的尾部
thead,tbody,tfoot里面有3个标签
  • tr :table row table里面的一行
  • th :table header 表头
  • td :table data 表中的数据
当我们在table里面不使用thead,tbody,tfoot的时候,那么你写的tr,会直接变成tbody的内容,如果直接写th,浏览器会加上tbody和tr thead,tbody,tfoot与你写的代码顺序没有关系
相关的样式
  • table-layout 定义了用于布局表格单元格,行和列的算法
  • border-collapse 控制border是否合并
  • border-spacing 控制border和border之间的距离

img标签

作用
  • 发出get请求,然后展示一张图片
属性
  • alt alternate 如果图片加载失败,用文字代替显示
  • height 图片的高度 只写高度,宽度会自适应
  • width 图片的宽度 只写宽度,高度会自适应
  • src source 图片的地址
记住:永远不要让图片变形
事件
  • onload 用来监听图片是否加载成功
  • onerror 加载成功调用onload,加载失败调用onerror
响应式
  • max-width:100% 页面的所有图片都变为响应式的
可替换元素在 CSS 中,可替换元素(replaced element)的展现效果不是由 CSS 来控制的。这些元素是一种外部对象,它们外观的渲染,是独立于 CSS 的,简单来说,它们的内容不受当前文档的样式的影响。CSS 可以影响可替换元素的位置,但不会影响到可替换元素自身的内容
典型的可替换元素有
  • iframe
  • video
  • embed
  • img

from标签

作用
  • 发出get或post请求,然后刷新页面
  • action 控制请求页面的地址
  • autocomplete 是否自动填充内容
  • method 用GET还是POST来请求
  • target 把指定页面变为要请求的页面
事件
  • onsubmit 当用户提交表单时,触发这个事件
input type="submit"button type="submit"的区别是什么? 答:input里面不支持其他的任何标签,只能有纯文本;而button里面可以有任何标签,甚至可以放一张图片进去
一个form表单必须要有一个 type="submit" 属性的input或botton标签,form表单才可以提交

input标签

作用
  • 让用户输入内容
属性
类型:type:
  • button 按钮
  • checkbox 复选框,可设为选中或未选中
  • email 编辑邮箱地址的区域
  • file 让用户选择文件的控件。使用accept属性规定控件能选择的文件类型
  • hidden 看不见的input,不是内输入,而是给js自动填写ID字符串
  • number 用于输入数字的控件
  • password 单行的文本区域,其值会被遮盖
  • radio 单选按钮
  • search 用于搜索字符串的单行文字区域
  • submit 用于提交表单的按钮
  • tel 用于输入电话号码
  • text 文本
  • color 颜色
其他
  • name input表单控件的名字
  • autofocus 页面加载时自动聚焦到此表单控件
  • checked 用于控制控件是否被选中
  • disabled 表单控件是否被禁用
  • maxlength value 的最大长度
  • pattern 匹配有效 value 的模式
  • value 表单控件的值。以名字/值对的形式随表单一起提交
  • placeholder 当表单控件为空时,控件中显示的内容
事件
  • onchange 当用户输入改变的时候就会触发这个事件
  • onfocus 当用户鼠标集中到input上的时候,触发这个事件
  • onblur 当鼠标从input出来的时候触发onblur
验证器
  • HTML5新增的功能

其他输入标签

标签
  • select + option 示一个提供选项菜单的控件
  • textarea 表示一个多行纯文本编辑控件
  • label 表示用户界面中某个元素的说明
注意事项
  • 一般不监听input的click事件
  • form里面的input要有name
  • form里面要放一个type=submit才能触发submit事件

其他标签

标签
  • video 视频
  • audio 音频
  • canvas 画画
  • svg 矢量化
注意事项
  • 这些标签的兼容性一定要查看文档
 
 
HTML概述CSS 基本概念