HTML5学习笔记

简介: HTML5可以做的事情 1. 制作时尚的表单 2. 构建实用的HTML5框架 3. 开发丰富多彩的游戏 4.  以更直观的方式让数据可视化呈现 5. HTML5的未来 – 惊艳的HTML5示例和实验 HTML的新特点 新特性 HTML5 中的一些有趣的新特性: · 用于绘画的 ...

HTML5可以做的事情

1. 制作时尚的表单

2. 构建实用的HTML5框架

3. 开发丰富多彩的游戏

4.  以更直观的方式让数据可视化呈现

5. HTML5的未来 – 惊艳的HTML5示例和实验

HTML的新特点

新特性

HTML5 中的一些有趣的新特性:

· 用于绘画的 canvas 元素

· 用于媒介回放的 video 和 audio 元素

· 对本地离线存储的更好的支持

· 新的特殊内容元素,比如 article、footer、header、nav、section

· 新的表单控件,比如 calendar、date、time、email、url、search

HTML5 新的 Input 类型

HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

这些新的输入类型:

· email

· url

· number

· range

· Date pickers (date, month, week, time, datetime, datetime-local)

· search

· color

浏览器支持

最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。

 

HTML5的接口演示

  1. 以PPT的形式演示,感觉很牛逼:http://slides.html5rocks.com/
  2. 比较详细的接口演示:http://html5demos.com/
  3. 接口+代码+调试演示:http://playground.html5rocks.com/

视频播放标签

视频播放:

<video width="320" height="240" controls="controls" autoplay ="autoplay" loop="loop" >
  <source src="/dym/video.mp4" type="video/mp4" >
Your browser does not support the video tag.
</video>

参数:controls 播放器控制信息

autoplay:自动播放

loop:循环播放

自动播放且支持自动循环播放,如果加上preload="auto",则可以在页面加载的时候就可播放(注意:atuopaly需要关闭)

检测浏览器是否支持HTML5

  1. 使用js方法:

    这是w3school里面的方法,这个可以检测浏览器是否支持html5,但是不能检测出每个浏览器是否支持html5所有的标签。

js代码:

  

1 调用js检测,返回信息
1   

2.第二种直接使用该标签

1 在标签之间加上你的浏览器不支持的话,如
<audio src="song.ogg" controls="controls">
你的浏览器不支持该标签!
</audio>
如果浏览器不支持的话,中间的“你的浏览器不支持该标签!”会输出.
 

其他的方法:

HTML5特性检测--检测技术:http://www.html5china.com/course/20111007_2184.html

检测浏览器支持哪些HTML5新特性的方法:http://www.html5china.com/course/20111007_2185.html

比较好的学习资源:

22个HTML5的初级技巧:http://stylechen.com/22-html5-tips.html

学习演示接口的网站:http://html5demos.com/

html5中文网:   http://www.html5china.com  

w3school的教程 http://www.w3school.com.cn/html5/index.asp

 
Technorati 标签: html5 浏览器兼容
 

知识共享许可协议本文基于署名-非商业性使用 3.0许可协议发布,欢迎转载,演绎,但是必须保留本文的署名PHP淮北(包含链接),且不得用于商业目的。如您有任何疑问或者授权方面的协商,请与我联系

0

目录
相关文章
|
2月前
Twaver-HTML5基础学习(29)界面交互
这篇文章介绍了Twaver-HTML5中界面交互的多种模式,包括默认模式、编辑模式、创建网元模式、创建连线模式、创建形状连线模式、创建形状网元模式、触屏模式和放大镜模式,并提供了相应的代码示例。
69 11
Twaver-HTML5基础学习(29)界面交互
|
22天前
|
人工智能
|
2月前
Twaver-HTML5基础学习(27)过滤器
这篇文章介绍了Twaver-HTML5中过滤器的使用,包括可见过滤器、可移动过滤器和可编辑过滤器,并通过代码示例展示了如何通过设置过滤器实现不同用户权限或网元类型的交互和视图。
46 8
Twaver-HTML5基础学习(27)过滤器
|
2月前
|
数据可视化 前端开发
Twaver-HTML5基础学习(39)鹰眼可视化视图组件(OverView)
本文介绍了如何在Twaver-HTML5中使用鹰眼(Overview)可视化视图组件,它作为Network的缩略图,允许用户通过缩略图导航Network,支持单击、双击和框选操作来控制Network视图。
38 5
Twaver-HTML5基础学习(39)鹰眼可视化视图组件(OverView)
|
2月前
|
移动开发 前端开发 HTML5
Twaver-HTML5基础学习(26)背景
这篇文章介绍了如何在Twaver-HTML5中设置背景,包括栅格图片、颜色、颜色渐变、基本形状以及图片与形状结合的背景类型,并提供了代码示例。
37 6
Twaver-HTML5基础学习(26)背景
|
2月前
Twaver-HTML5基础学习(35)Network中ToolTip显示Chart(视图未成功出现)
本文尝试在Twaver-HTML5的Network组件的ToolTip中显示echarts饼图,但未成功,可能与版本有关。
36 4
Twaver-HTML5基础学习(35)Network中ToolTip显示Chart(视图未成功出现)
|
2月前
|
前端开发
Twaver-HTML5基础学习(34)Link显示流动效果
本文介绍了如何在Twaver-HTML5中为Link添加流动效果,通过设置流动颜色、模式等来实现动态视觉效果。
35 3
Twaver-HTML5基础学习(34)Link显示流动效果
|
2月前
|
数据可视化 前端开发 容器
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
本文介绍了如何在Twaver-HTML5中使用列表可视化视图组件(List),展示了如何创建列表、设置列表属性(如行高、间隔颜色等)、实现数据绑定和排序,以及如何通过React代码示例进行操作。
30 2
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
|
2月前
Twaver-HTML5基础学习(38)劈分面板SplitPane
本文介绍了如何在Twaver-HTML5中使用SplitPane组件来创建可分割的面板,通过动态调整分割条来改变面板的大小,支持水平和垂直分割。
32 2
Twaver-HTML5基础学习(38)劈分面板SplitPane
|
2月前
Twaver-HTML5基础学习(36)是否显示滚动条
本文探讨了在Twaver-HTML5中设置是否显示滚动条的方法,包括横向和纵向滚动条的控制,但遇到了设置不生效的问题,可能与软件版本有关。
35 2
Twaver-HTML5基础学习(36)是否显示滚动条