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 矢量化
注意事项
- 这些标签的兼容性一定要查看文档