HTML5发展史
兼容性:html5(h5)主要向上兼容,低版本的浏览器部分不考率,所有html5兼容性相对较差
各版本的HTML的基本写法:
不变的是第一行<!doctype html>始终存在
标签的语法:
不区分大小写
页面后缀名依旧是.html .htm
指定字符编码UTF-8
可以省略结束的标签
可以直接省略全部标签
单双引号的使用
语义化标签:有指定内容的仓库
section:类似于div,偏向画结构
article:偏向于内容展示
aside:偏向于在旁边的内容
header:内容的头部,网页的头部,头部区域
footer:内容的尾部,网页的尾部,尾部区域
nav:做导航 链接区域
figure > figcaption 类似于dl>dt+dd的结构
注意:figcaption是figure的标题,一般在第一位置或者最后一个位置
mark 高亮显示,默认背景颜色为黄色,是一个内联元素
main IE6不适配
time 放时间,内联元素
dialog:类似于微信对话框,默认是diaplay:none;有默认定位
视频音频标签
属性:
src=“文件地址”
controls =“显示控件”
autoplay=“自动播放” 谷歌屏蔽了该功能
loop=“循环播放”
muted=“静音”
poster=“图片地址” 显示为第一帧画面,知道用户点击播放按钮
source标签:定义媒介资源(备份文件)
type="文件类型"
文件类型:
视频:
video/ogg
video/webm
video/mp4
音频:
audio/ogg
audio/mpeg
audio/wav
主流的音频文件格式 mp3 ogg wav
新添加的 type类型
input type=“email” 请输入邮箱地址
input type=“range” 滑块
input type=“number” 数字
input type=“search” 搜索框
input type=“color” 选择颜色
作为了解
input type=“time” 限制用户必须输入时间类型(小时 分钟)
input type=“month” 限制用户必须输入月类型
input type=“week” 限制用户必须输入周类型
input type=“datetime-local” 选取本地时间
input type=“date” 年 月 日
新增加的表单属性:
required 检测是否为空(必填字段)
min 最小值
max 最大值
step 步长 确定一个值 -4 0 4 8
autocomplete 是否自动关联相关信息
on 默认值 关联
off 不关联
autofocus 自动聚焦,光标的初始位置,一个页面只能有一个
placeholder="" 文本框提示信息
pattern=“正则表达式” 可以自己指定合法的格式
novalidate="取消验证"
multiple 选择上传(多个)文件
新添加的表单标签
list 结合datalist标签的id 才有效
datalist 输入时提供关联的内容
例子:
<input type="text" list="abc" />
<datalist id="abc">
<option value="http://www.baidu.com"></option>
<option value="http://www.taombao.com"></option>
<option value="http://www.xiaomi.com"></option>
</datalist>
output 输出标签 用于计算结果的输出或者脚本的输出