HTML常用标签汇总
发布网友
发布时间：3小时前
共1个回答
热心网友
时间：1小时前
排版标签
h1 - h6
h1字体大小为2em, h2为1.5em, h4为1em
段落标签
通常表现为与相邻文本分离的文本,一般表现为垂直的空白隔离
p: paragraph / 块
水平线标签
段落级元素之间的主题切换
hr: horizontal / 块 / 单
换行标签
就是在内容后方添加一个换行符,不要用该元素来增加行之间的间隔,应该用margin.该标签用来写诗词,分割地址特好使
br: break / 块 / 单
空格 vs 换行 vs 段落
div和span标签
div和span是没有语义的,主要用于网页布局
div: division 分区 / 块,其实很多网页都是CSS+DIV来组合网页
span: span 跨度
文本格式化标签
strong: 强调文字
em: 强调文字
del: 删除线文字
ins: 插入文字
图像标签
img: 图像 / 单 / 行内块元素
src: 图像路径
alt: 图像不能显示时的替代文本,必写属性
with: 宽度,默认单位px
height: 高度,默认单位px
链接标签
a: 超链接
href: 超链接地址,若未知则填写"#",有返回顶部功能
target: 打开方式,默认值为"_self"在原窗口打开,"_blank"在新窗口打开,"_parent"在父窗口中打开,"_top"在顶层窗口打开,添加了target属性应同时添加rel="noopener noreferrer",防止window.opener API的恶意行为
download: 下载指向同源的文件,兼容性不佳,常通过JS实现
锚点定位
base
通过JS查询,若文档不含base则默认为document.location.href
target: 指定所有链接的打开方式
url: 指示文档中相对地址的基地址,允许值为相对地址或绝对地址
绝对路径
硬盘地址: D:\images\1.gif, 这种方式少用,迁移性差
网络地址: http://www.baidu.com
无序列表
li前显示为小点,ul的子标签只能是li,li内容随意
有序列表
li前显示为阿拉伯数字排序
自定义列表
用于解释名词或表示层级关系,常用于页面底部链接
table
用于布局的属性全部废弃
table / caption / colgroup(列分组)
tr / td(th) / thead & tbody & tfoot 影响行合并和列合并
rowspan: 合并行,去掉行分割线
colspan: 合并列,去掉列分割线
input
type属性: text、password、radio、checkbox、button、submit、reset、image
maxlength: 内容最大长度(中文算一个)
file: 文件选择
accept: 期望上传文件类型
multiple: 多个选择
required: 必填
hidden: 隐藏输入
search: 搜索框
autocomplete: 自动完成,需成功提交并有name属性
autofocus: 自动聚焦
name: 标识属性
value: 值
disabled: 禁用
readonly: 只读
placeholder: 提示文本
label: 标签绑定输入
显示绑定: label的for指向input的id
隐式绑定: 将input放入label中,无需for和id属性
textarea
rows: 行数
cols: 列数
maxlength: 内容最大长度(中文算一个)
select
required: 必填
multiple: 多选
datalist: 与input结合使用
简单实现可编辑的select
form
action: 接收表单数据的服务器地址
method: GET/POST
enctype: method为POST时有此属性
fieldset: 将表单字段分组
legend: 显示框与表单字段标题
通用属性
hidden: 控制元素是否显示,通过CSS控制,可被其他样式覆盖
tabindex: 指示聚焦与导航顺序,值为负表示可聚焦,0表示可聚焦并可通过导航,正整数表示滞后聚焦顺序
语义标签和经典布局
语义标签用于表达含义,与div类似但更富表达性
兼容性
IE8及以下不支持H5,IE9部分支持,IE10全支持,解决方式一:引入html5shiv.min.js,方式二:手动创建标签
type新增属性
email、tel、range、num、color、search、time、date、datetime、datetime-local、month、week等
表单新增属性
placeholder、autofocus、autocomplete、required、pattern、multiple、form等
新增的标签
datalist、keygen、output、progress、meter等
新增的事件
oninput、oninvalid
音频、视频标签
支持音视频播放,使用audio和video标签
重要属性
video.seekable、video.currentTime、video.play、video.pause等
H5获取元素
document.querySelector、document.quertSelectorAll、document.getElementsByTagName等
H5操作元素类样式
classList.add、classList.remove、classList.toggle、classList.contains、classList.item等
自定义属性
定义为data-XXX,全小写,无特殊符号,不使用纯数字
取值方法
#dataset(XXX),XXX以小驼峰命名法
网络监听接口
online、onoffline事件
全屏接口
requestFullScreen、cancelFullScreen/exitFullscreen、fullScreenElement等
FileReader接口
readAsText、readAsBinaryString、readAsDataURL、abort等
完整的事件模型
onabort、onerror、onload、onloadend、onloadstart、onprogress等
拖拽(了解即可)
拖拽元素(图片默认可用),draggable属性、事件处理、目标元素事件等
地理定位
IP地址、GPS、WiFi、手机信号,自定义定位
应用程序缓存
通过manifest属性指向cache.appcache文件,实现离线版本的创建
WebWorker
后台线程执行JS,不影响主线程,属性与函数
