h5新增的标签

HTML5

概述

html5是html最新的修订的版本，2014年10月份w3c完成标准的制定，html5设计的目的是为了在移动端设备上支持多媒体，html5是在html4.0之后的设计的一个版本

html4.0诞生于1999年

大部分主流的浏览器都支持html5

html5新增了很多的特性

1. 用于绘画的canvas元素

2. 用于媒体 video audio元素

3. 本地存储

4. 新增了很多的内容元素 artice footer header nav section

5. 新的表单控件 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	定义用于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	用正则表单式对表单元素进行验证

新增的标签

1. 语义标签

···标签本身就代表了一定的含义

1. 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	静音播放