什么是HTML5

官方概念：html5草案的前身叫Web Applications 1.0，是用来代替html4和xhtml1的新一代标准版本，所以叫HTML5。它增加了新的标签和属性，加强了网页的标准、语义和web性能，还增加了本地数据库等Web应用的功能。

广义概念：HTML5代表了浏览器端技术的一个发展阶段。在这个阶段，浏览器渲染技术得到了极大的发展和广泛的支持，其中包括一套技术组合，包括HTML5、CSS3、Javascript和API

HTML 5发展时间表

从上图可以看出HTML5并不是最终的统一版本，所以在手机开发中使用HTML5。

目前支持HTML5的浏览器

不同的浏览器可能会显示不同的效果。因为HTML5没有统一的标准。(现在处于普及阶段)，但大部分都是一样的。

HTML5的特点

简单的

语义标签

语法更松散

多设备跨平台

适应性网页设计

从头说起——文档的声明

Xhtml1.0的页面架构

Html5的页面架构

HTML5标签的语义化

在前面的html中，该框使用了div或span。

在html5中，标签更大的变化是标签有语义，而之前的div和span没有语义，只表示一个框。

标题标题标签

导航标签

侧边栏标签

文章文章标签

页脚页脚

章节、标题、列

HTML5新增的表单三个属性

1.必需：必需的属性

2.占位符：默认显示内容

3.自动对焦：自动对焦

Html5中新增input标记的type属性

属性

形容

电子邮件

电子邮件

日期

日期

全球资源定位器(Uniform Resource Locator)

网站格式

数字

数字

范围

范围

颜色

颜色

完全码

形式

邮件：输入类型=' email '名称=' email' br

日期：输入类型='日期'名称='我的日期' br

地址：输入类型='url'br

手机号码：输入类型='号码' br

亮度：输入类型='范围'最小值=' 0 '更大值=' 255' br

颜色：输入类型='color'br

地址：

挑选

Optgroup标签='北京'

选项西城区/选项

选项东城区/选项

/optgroup

Optgroup标签='天津'

选项河西区/选项

选项河东区/选项

/optgroup

/selectbr

搜索车辆类型：输入类型='文本'列表='汽车'

datalist id='car '

选项奥迪/选项

选项alto /option

选项公共/选项

/datalist

输入类型='提交'值='提交'

/form

Range调背景色

代码如下：

！声明文档类型

超文本标记语言

头

meta charset='utf-8 '

标题未命名的文档/标题

脚本src=' js/jquery-1 . 8 . 3 . min . js '/脚本

脚本类型='text/javascript '

//当页面准备好时，

$(文档)。就绪(功能(e) {

$(“输入”)。变更(功能(e) {

var red=$('#red ')。val()；//获取红色值

var green=$('#green ')。val()；//获取绿色值

var blue=$('#blue ')。val()；//获取蓝色值

var值=$(this)。val()；//当前修改值

$(这个)。下一个()。html(值)；//将当前修改后的元素后的值跨度

$(“正文”)。css('背景色'，' rgb '('红色'，'绿色'，'蓝色'))；

});

});

/script

/head

身体

红色：输入类型=' range ' id=' red ' min=' 0 ' max=' 255 ' value=' 255 ' span 255/span br

绿色：输入类型='范围' id='绿色'最小值=' 0 '更大值=' 255 '值=' 255' span255/spanbr

蓝色：输入类型=' range ' id=' blue ' min=' 0 ' max=' 255 '值=' 255' span 255/span

/body

/html

音频播放

种写作方式

如果html5不支持声音的格式，将显示标签之间的提示信息

第二种写作方式：

视频播放

使用视频标签插入视频。自动播放意味着自动播放，控制意味着显示控制面板。

360音乐导航

完整代码如下：

style type='text/css '

#nav{

列表样式类型： none/*去掉无序列表前面的点*/

margin:50px auto 0px/*上边界50px，左右居中，下边界为0*/

宽度宽度：960px/*整个导航的宽度*/

高度：38像素

颜色： # 333

font-size :14 px

padd :0 px/*填充清0*/

飞越：隐藏；/*超出尺寸的部分不显示*/

}

#nav li{

宽度：105px

高度：36像素

float:left/*所有的里从左到右排列*/

文本对齐：中心；/*文字居中对齐*/

行高：38 px/*设置行高，目的是让文字垂直居中*/

边框-顶部： # C9CBCE实心1px

边框-左：#C9CBCE实心1px

边框-底部： # C9CBCE实心1px

光标：指针指针；/*光标移动到里上变成手形*/

}

#nav li:last-child{ /*#nav下的最后一个li*/

边框-右： # C9CBCE实心1px

}

#nav .liclick{

边框-top:#54B82A实心2px

边框-底部：无；

}

#导航跨度

宽度：;

高度：38像素

display:block/*只有块显示标记才能设置宽度和高度*/

位置：相对；/*相对定位，目的为了跨度可以移动*/

z-索引：-1;/*设置跨度上下层的顺序，让它在文字的下面*/

}

/style

脚本src=' js/jquery-1。8 .3 .量滴js '/脚本

脚本类型='text/javascript '

$(文档)。就绪（功能(e) {

//点击里

$('#nav li ').点击（功能(e) {

$('.liclick ').移除CLaSS(' lic lick ')；

$(这个)。添加CLaSS(' lic lick ')；

});

//每个里下面添加一个底色

var color=['#B9D329 '，' #C0EBF7 '，' #B9D329 '，' #69BCF3 '，' #79D9F3 '，' #FA5F94 '，' #ACD180 '，' #FAB4CC '，' # FFAE5B ']；

$('#nav li ').追加(' span ')；

$('#nav span ').每个（函数（索引，元素){

$(这个)。css('background-color '，color[index])；

});

//移动到里上的时候颜色色块升起

$('#nav li ').hover(function(){

$(这个)。儿童(' span ').动画({'top':-38}，200)；

//获得当前里的索引编号

var index=$(this).index()；

$("音频")。获取(索引).play()；//播放第指数个音乐

}，function(){

$(这个)。儿童(' span ').动画({'top':0}，200)；

});

});

/script

/head

身体

ul id='nav '

里我的主页/li

里新闻头条/li

里电视剧/li

里最新电影/li

里小游戏/li

里小说大全/li

里旅游度假/li

里今日团购/li

里品牌特卖/li

/ul

音频src=' 360音乐/m1。MP3 '/音频

audio src=' 360 music/m2。MP3 '/音频

audio src=' 360 music/m3。MP3 '/音频

音频src=' 360音乐/M4。MP3 '/音频

音频src=' 360音乐/M5。MP3 '/音频

音频src=' 360音乐/M6。MP3 '/音频

audio src=' 360 music/M7。MP3 '/音频

audio src=' 360 music/M8。MP3 '/音频

音频src=' 360音乐/M9。MP3 '/音频

/body