HTML5 简介
html的第五个版本
- 新增特性 api 多媒体 语义化 过渡 动画
- 废弃 一些标签
- 支持程度 ie8以下不支持 ie9 以上选择性支持
常用的语义化标签 ★
- 头部
header
- 导航
nav
- 主体
main
ie浏览器不识别 - 文章
article
- 侧边 (主体之外)
aside
- 底部
footer
语义化标签兼容ie浏览器 ★
- 方式一:
- 手动创建语义化标签,将其转换成块级元素
- 方式二:
- 引入第三方文件 html5shiv.min.js
ie注释 优化快捷方式cc:ie + tab
- 引入第三方文件 html5shiv.min.js
h5针对type属性新增表单元素 ★
- 邮箱 type=
"email"
提供邮箱验证 - 电话 type=
"tel"
会在移动端调取数字键盘 - 搜索 type=
"search"
- 数字 type=
"number"
- 最大值
max
- 最小值
min
- 默认值
value
- 最大值
- 范围 type=
"range"
- 最大值
max
- 最小值
min
- 默认值
value
- 最大值
- 拾色器 type=
"color"
- 网络地址 type=
"url"
必须加协议 http:// https:// - 日期
- 时间 type=
"time"
- 日期 type=
"date"
- 时间+日期 type=
"datetime-local"
datetime - 周 type=
"week"
- 月份 type="
month
"
- 时间 type=
表单新增的其他属性 ★
- 自动获取焦点
autofocus
- 提示占位
placeholder ="提示信息"
- 自动完成
autocomplete ="on / off"
- 必须设置
name
属性 - 必须成功提交过一次
- 必须设置
- 必须填写
required
- 验证正则表达式
pattern="正则表达式 "
- 多选
multiple
填写多个邮箱用逗号隔开 - 关联当前表单之外的表单
- 被关联的表单元素 设置
form = "关联的表单id值"
- 关联的表单设置id属性
- 被关联的表单元素 设置
可输入的下拉列表
- 先写一个
< input type="text" list="a">
- 写
<datalist id="a" > <option value ="实际值" label="提示值"> </option> </datalist>
注意:
-
option
可以写成单标签 - 如果
type="url "
value值加上http:// 协议
网址:<input type="url" list="urls">
<datalist id="urls">
<!--如果input输入框的type类型是url,那么value值必须添加http://-->
<option value="http://www.baidu.com" label="百度"></option>
<option value="http://www.sohu.com"></option>
<option value="http://www.163.com"></option>
</datalist>
H5新增的表单事件 ★
-
oninput
只要值修改 就实时触发 -
oninvalid
验证不通过触发 修改提示信息 当前表单元素.setCustomValidtity('修改的提示信息');
进度条
progress
- 当前 值
value ="10"
- 最大值
max ="100"
度量器
meter
- 当前 值 value ="10"
- 最大值 max ="100"
- 最小值 min = "0"
- 较高的 high="90"
- 较低的 low = "60"
- fieldset
- legend
- box-sizing: border-box; 盒子内减模型 宽度 = 内容 + padding + border
多媒体标签 ★
音频 audio
- src 文件路径
- controls 面板控制器
- autoplay 自动播放
- loop 循环播放
视频 video
-
src 文件路径
-
controls 面板控制器
-
autoplay 自动播放
-
loop 循环播放
-
width 宽度
-
height 高度
-
poster 修改视频的默认第一帧画面
-
muted 静音
-
由于各个浏览器支持的视频格式不同, 单独将视频的src抽离 用source 单标签引入不同格式的视频文件
<video > <source src=".mp4" type="video/mp4"> <source src=".flv" type="video/flv"> <source src=".rmvb" type="video/rmvb"> </video>
谷歌浏览器在18年提出不再支持视频的自动 --- 避免广告 解决了用户流量
解决方式一 视频加muted
方式二 chrome://flags/#autoplay-policy
DOM拓展
获取元素★
- 获取单个元素
document.querySelector('选择器');
- 获取多个元素
document.querySelectorAll('选择器');
类样式操作 classList ★
- 添加 元素
.classList.add('red','pink')
添加多个用逗号隔开 - 移除 元素
.classList.remove('red','pink')
移除多个用逗号隔开 - 切换 元素
.classList.toggle('red')
- 检测是否包含 元素
.classList.contains('red')
返回值是一个布尔值
有true
无false
- 获取指定项 元素
.classList.item(数值)
自定义属性 ★
- 设置
- 以
data-
开头 - 建议 不要使用纯数字 不要使用特殊字符 不要使用大写字符 不要使用汉字 使用多个单词用横线链接
- <p data-w-c-g="王光" ></p>
- 以
- 获取
- 元素
.dataset[wCG]
获取的时候使用驼峰命名法
- 元素
网络监听
-
在线
ononline
window.addEventListener('online',function(){ 处理的程序 })
-
断线
onoffline
window.addEventListener('offline',function(){
处理的程序
})
网友评论