李洪强和你一起学习前端之(4)HTML5介绍
2017-03-15 18:23
483 查看
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>
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>
相关文章推荐
- 李洪强和你一起学习前端之(5)css书写位置 优先级和伪类
- 李洪强和你一起学习前端之面试题
- 李洪强和你一起学习前端之(6)浮动 布局 定位
- 李洪强和你一起学习前端之(8)CSS复习
- 李洪强和你一起学习前端之(11)梅兰商贸案例
- 李洪强和你一起学习前端之(8)浮动,网页布局,定位
- 李洪强和你一起学习前端之(2)表格、表单、标签语义化
- 李洪强和你一起学习前端之(6)css行高,盒模型,外边距
- 李洪强和你一起学习前端之(10)滑动门案例讲解,新闻列表
- 李洪强和你一起学习前端之(7)复习
- 李洪强和你一起学习前端之(7)定位盒子 css可见性 滑动门案例
- 李洪强和你一起学习前端之(3)Css基础和选择器
- 李洪强和你一起学习前端之(1)Html基础
- 从零开始前端学习[5]:关于html5默认标签样式的介绍以及定义清除
- 从零开始前端学习[4]:关于html5文本文件的一些简单介绍
- 小羊驼和你一起学习cocos2d-x之四(摇杆)
- 小羊驼和你一起学习cocos2d-x之一(异步加载资源利用addImageAsync)
- 小羊驼和你一起学习cocos2d-x与lua之五(HelloLua分析)
- 小羊驼和你一起学习cocos2d-x之五(结合摇杆控制玩家走动)
- 小羊驼和你一起学习cocos2d-x与lua之一(迭代器pairs 和 ipairs区别)