HTML5
概述
html5是html最新的修订的版本,2014年10月份w3c完成标准的制定,html5设计的目的是为了在移动端设备上支持多媒体,html5是在html4.0之后的设计的一个版本
html4.0诞生于1999年
大部分主流的浏览器都支持html5
html5新增了很多的特性
-
用于绘画的canvas元素
-
用于媒体 video audio元素
-
本地存储
-
新增了很多的内容元素 artice footer header nav section
-
新的表单控件 date time email url search
2.特点
h5并不是新的语言,而是html语言的第五次重大的修订的版本
支持所有的主流的浏览器
改变了用户和文档的交互的方式 多媒体 video audio canvas
新增了很多的新的特性:语义特性
相比较于html4.0.1:
进步:抛弃了一些不合格的常用的标记和属性
新增了很多新的标签和属性
从代码的角度而言:html5的网页结构更加的简单
html5的优势
h5的目的是为了在移动端的设备上支持多媒体,播放媒体文件时无需安装flash等第三方插件,直接使用video或者audio这些标签就可以播放音频或者视频
html的文档结构
<!DOCTYRE html>:声明必须位于html5文档的第一行,说明这个文档属性html5的版本呢
html5中已经移除的元素
以下是html4.0.1元素在html5中被删除的标签
big
font
rameset
strike
applet
frame
html5新增了表单元素
h5中新增的表单元素类型 | 描述 |
---|---|
定义用于email地址的文本字段 | |
url | 用于url地址输入域,会自动验证url的值 |
number | 只能写数字 |
search | 定义用于搜索的文本字段 |
tel | 定义输入电话号码的字段 |
date | 定义日期的字段 |
month | 定义日期的字段月 |
week | 定义几几年几几周 |
time | 定义日期的 时 分 秒 |
datetime-local | 本地的时间 |
color | 选择颜色 |
input元素的新增的属性
input元素的新增的属性 | 描述 |
---|---|
autofocus | 在页面加载时,会自动获取焦点,也就是鼠标 |
required | 表单元素不能为空 |
height,width | 用于规定image类型的input标签的图像宽度和高度 |
min,max,step | 用于包含数字或者日期input类型,规定限定,max属性规定输入域所允许的最大值,min规定输入域所允许的最大值, |
pattern | 用正则表单式对表单元素进行验证 |
新增的标签
-
语义标签
···标签本身就代表了一定的含义
-
html4.0.1的语义标签有哪些?
p标签 h1-h6标题 img标签
语义不强的标签
div:作为容器使用
html5新增的语义标签
标签 | 作用 |
---|---|
nav | 导航 |
header | 头部 |
main | 文档的主要的内容区 |
article | 定义文章 |
aside | 定义页面内容之外的内容 |
footer | 页脚 |
语义很强的标签,更加的利用开发者以及搜索引擎对于网页的理解其他的标签
标签 | 描述 |
---|---|
mark | 定义有记号的文本 |
meter | 定义范围内的度量 |
progress | 进度条 max value |
time | 定义时间或者日期 |
figure | 规定独立流的内容 |
video和audio标签
html5规定了一种通过video和audio元素来包含那音频,
视频格式:
vidow支持视频和格式
ogg
mp4
webm
mpeg4
video标签的属性有哪些:
属性 | 属性值 | 描述 |
---|---|---|
controls | controls | 控件,添加播放,暂停进度条等控件 |
src | 视频的路径 | 要播放的视频的url |
width | px | 设置视频的宽度 |
height | px | 设置视频的高 |
autoplay | autoplay | 视频在就绪完成后马上播放 |
loop | loop | 循环播放 |
muted | muted | 规定视频输出应该被静音 |
poster | url | 设置视频的封面的图片 |
注意点:一般情况下只设置宽度或者高度,让其可以自动等比例缩放
audio音频
audio元素支持二点格式
.ogg
.mp3
.wav
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 自动播放 |
controls | controls | 控件 |
loop | loop | 循环播放 |
src | url地址 | |
muted | muted | 静音播放 |