李洪强和你一起学习前端之(4)HTML5介绍

1.1认识HTML5

html的版本:

html4

Xhtml1.0

目前: html5是最高的版本

再怎么变化,无非是多了一些标签而已,但是不单单是提供了一些标签

比如: 开发网页游戏

我们可以开发网页版的游戏,结合Css3 ,但是是依托于Html5的

看三个例子: 摇一摇,小球转动,地图

1.2语法规范

07 音频&视频

图片也属于多媒体

html提供了一个标签来播放音乐

<audio  scr = ""  controls　autoplay   loop = "3"></audio>

controls可以控制音量等,他是没有属性值的属性

loop 循环次数

不同的浏览区对音频的支持是不一样的

解决多种浏览器的支持问题

<audio>

　　<source  src = "./music/see you again.mp3">

　　<source  src = "./music/see you again.wav">

　　<source src = "./music/see you again.ogg">

　　<!--浏览器不支持HTML5的音频播放-->

</audio>

视频

　　<video　　src = "./video/movie.mp4"　width = "900"  controls  autoplay  loop = "3"></video>

不同的浏览器对视频的支持也是不一样的

解决办法:

<video>

　　<source src = "./video/movie.mp4">

　　<source src = "./video/movie.ogg">

　　浏览器不支持HTML5视频播放

</video>

IE浏览器不支持h5视频和音频的播放

多媒体:

Flash插件

08 表单

H5在原来的基础上新增了东西

表单输入类型

<form>

　　<input type  = "text">

　　<input type  = "password">

　　<input type  = "radio">

　　<input type  = "checkbox">

　　<input type  = "file">

　　<input type  = "button">

　　<input type  = "submit">

　　<input type  = "reset">

　　<fieldset>

　　　　<legend>输入类型</legend>

　　　　　　<label for = "demo">

　　　　　　　　email:<input  type = "text" id = "demo">

　　　　　　</label>

　　　　　　<label  for = "">

　　　　　　　　tel:<input type = "tel">

　　　　　　</label>

　　　　　　<label for = "">

　　　　　　　<input type = "submit"  value = "提交">

　　　　　　</label>

　　　　</fieldset>

</form>

总结:

　　类型　　　　　　　　　　使用实例　　　　　　　　　　含义

　　email　　　　　　　　　<input type = "email">　　输入邮箱格式

　　tel　　　　　　　　　　 <input type = "tel">　　    输入手机号格式

url　　　　　　　　　　<input type = "url">　　　  输入url格式　

　　number　　　　　　　  <input  type = "number">  输入数字格式　

09 表单(表单元素)

<label　　for = "">

　　课程: <input type = "text" list = "course">

</label>

<datalist　　id = "course">

　　<option value = "php">php</option>

　　<option value = "python">python</option>

　　<option value = "photoshop">photoshop</option>

　　<option value = "java">java</option>

　　<option value = "javascript">javascript</option>

　　<option value = "frontend">frontend</option>

</datalist>

<label for = "">

　　<input　　type = "submit"　　value = "保存">

</label>