李洪强和你一起学习前端之(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>
