html5测试网页的简单介绍

html5与传统网页有什么不同？

html5最先由WHATWG(Web 超文本应用技术工作组)命名的一种超文本标记语言，随后和W3C的xhtml2.0(标准)相结合，产生现在最新一代的超文本标记语言。可以简单点理解成：HTML 5 ≈ HTML+CSS 3+JS+API。

1、hmtl5于html的区别：

我们现在web前端开发的静态网页，一般都是html4.0。同时是符合W3C的xhtml1.0规范来的。那么他们两者又有什么实质性的区别呢？

2、在文档类型声明上

html:!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

html5:!doctype html

由这两者对比可见：在文档声明上，html有很长的一段代码，并且很难记住这段代码，想必很多人都是靠工具直接生成的吧？而html5却是不同，只有简简单单的声明，这也方便人们的记忆。

3、在结构语义上

html:没有体现结构语义化的标签，我们通常都是这样来命名的div id="header"/div.这样表示网站的头部。

html5:在语义上却有很大的优势。提供了一些新的标签，比如:headerarticlefooter

提供这样的标签有什么样的好处呢？我觉得最主要还是在SEO的优化上，不管是我们自己来对网页模块命名，还是有这样的标签。因为做网站最终的目的只有一个，那就是盈利。想盈利的话，就只有通过SEO优化的技术，把你网站排名做上来，这样你的网站才有价值，且正是这一点，html5符合了这一点。为什么这么说呢？因为他定义的这些标签，更加有利于优化，蜘蛛能识别你。

4、虽然在前几年html5已经出来了，但是那时候因为不够成熟，时机不对，才没被兴起。在这互联网高速发展的时候，也是来临4G的时代。我们还不学习hml5+css3我们就out了！

相关问答

Q1: 如何制作关于测试的H5页面

您好，答题测试的H5作为不少商家活动的首选类型，需求自然就很大。大家需要知道的是，答题测试按功能层面又分为根据趣味测试、问卷调查两大类型。

趣味测试H5：根据得分获得不同结果，用户活动营销

问卷调查H5：统计答题人的选项/得分，用于数据收集

本期教程主要是向大家介绍一种简单的【趣味测试H5】的教程，教程里用到的主要的组件是 图片按钮组件、测试题组件 和 参数变量组件。希望学员们通过本篇教程都能掌握这几个组件使用方法并能独立制作出来。

测试题组件作用：与图片按钮组合完成用户选中时单选的状态

图片按钮组件作用：与测试题组件组合完成用户选中时单选的状态

参数变量组件作用：统计用户每题的得分并求和，可作不同得分显示不同元素的触发

1.第一页是一个输入用户姓名的页面，我们新建一个页面，添加高级组件-高级表单里的“输入框组件”，再添加一个全局变量和开始测试的图片按钮，将全局变量命名为“姓名变量”，调整类型为“文本”，图片按钮上设置点击时“设置参数值”和“跳转页面”，设置参数值为全局变量=输入框，跳转页面为下一页，；

注：第二页是答题页分为5个步骤讲解（2-6步）

2.第二页为答题页，我们在左侧页面面板处右击再新建一个空白页面，需要添加图片按钮，我们选中按钮的时候可以使用键盘上control+C+V的方式复制其余的三个按钮，点选图片按钮右侧面板上传替换自己的选中和未选中的图片；

3.图片按钮的初始状态和激活状态图片替换好后，我们在工具栏上的高级组件-交互组件下面添加测试题组件，接着我们可以添加“题目图片”和“确定按钮图片”到画布上；

4.我们点选左侧逻辑小面板的“测试题组件”，在右侧面板添加四个图片按钮为选项并设置为每个选项设置分值（比如选项C是对的，我们给选项C为1，其余设置为0），接着设置其中一个为“正确答案”，触发器上设置选择结束后触发“显示元素”，这里显示的是 下面那个“确定”图片元素（它需要初始隐藏，第六步有说明）；

5.我们点击左上角的页面层级，切换到 Masterpge 里，在上方工具栏高级组件-逻辑组件里面找到“参数变量”，选择添加到画布上，给这个变量命名为“总分”，并设置为等待触发，点击小“+”号，添加三个触发条件，我这里添加的是总分≤2，3≥总分≥4，总分≥5三个触发条件；

6.我们点击左上角的页面层级，切换到 页面 里，点选 “确定”图片元素，右侧面板勾选“初始隐藏”，触发器上设置点击“设置参数值”和“跳转页面”（注意顺序，跳转页面一定要在最后一步执行，上面的触发事件才不会失效），设置参数值和跳转页面的详细设置面板见下图；

7.我们按照第二步到第六步的方法，接着制作剩下的四个页面

8.新建一页作为结果页，我们把成绩单图片元素添加到画布上，接着添加一个段落文本组件，命名为姓名。在这页的页面触发器上设置切换到当前页时设置参数值和执行参数判断，把姓名的全局变量赋值给用来显示姓名的段落文本，执行参数判断上执行的是 Masterpage 上总分的判断；

9.测试题案例大体上做好了，我们可以预览下看看。

当然，这里只是一种思路。有的项目不同得分不同结果的视觉上相差很大，这样的话我们可以采用多个结果页，比如总分参数≤2时跳转结果1页面，3≤总分参数≤4跳转结果2页面，总分参数≥5时跳转跳转结果3页面这样的逻辑方式实现，另外，执行参数判断的触发也不应该在结果页触发，而是应该在上一页的“确定按钮”上去设置。

如有问题，也可到意派官网，加入交流群询问，希望对楼主有帮助。

Q2: 如何在移动设备上调试html5开发的网页

1、打开手机web检查器。

通过【设置】【Safari】【高级】【Web检查器】打开。见下图（点击查看大图），并且你会看到该选项下面对电脑操作的相应描述，照做就好。

2、链接电脑（Mac）

2.1 先在手机Safari中打开你想调试的网页，并用数据线连接到电脑（我这里是Mac）

2.2 再在电脑上打开Safari点击【Develop】菜单，就会看到如下图所示（点击查看大图）：

2.3 点击2.2中的网站名就会在电脑上打开Safari的控制台，如下图（点击查看大图）：

3.调试网页

此时你可以查看手机网页的DOM结构，并且和电脑端网页调试无异，当鼠标滑过这些DOM节点的时候手机上的相应布局也会高亮起来，如下图（点击查看大图）：

Q3: 怎样看某个网页是不是HTML5

没法直接看出来，至少得看源文件（一般对网页单击右键就有相应选项，不同浏览器选项不同）。

分析是否使用了HTML5新增的标签主要是lt;videogt；、lt;audiogt；、lt;canvasgt；、lt;sectiongt；、lt;articlegt；、lt;headergt；、lt;navgt;。

CSS3则看是否使用CSS3新增的属性，比如“border-radius”、“text-shadow”、“transform”以及“transition”等等。想完成这些工作，要求你对HTML和CSS都有相当的了解。

最后，如果网页最上方的文档声明不是”lt;!DOCTYPE htmlgt；“，则肯定不是HTML5。

html5是指万维网的核心语言、 标准通用标记语言下的一个应用 超文本标记语言（ HTML）的第五次重大修改。2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成。

Q4: 初学HTML5技术，有这些网站就够了

HTML5基础知识网站

1.W3C

全称“W3School”，简直是学习网站中的“战斗机”，每一节都有学生时代老师般的“板书”，丰富的实例展示，还有工具书、小测验等提升工具，私教般的存在!

2.Dive into HTML5

这个网站几乎都是关于HTML5的文档，讲一些很基础的知识，简洁清新。如果想学习HTML5的同时提高英语阅读能力，这个网站是极好的。类似的英文网站还有woorkup。

3.h5之家

除了丰富且与时俱进的教程，这个网站还有很多关于HTML5业界的独特见解，闲暇时候看看，拓展知识又能在人前装X，这样的网站哪里找!

HTML5案例网站

1.HTML5xCSS3

拥有超丰富的HTML5案例和模板，随便点开一个案例都好看到让人震惊。里面的全部都是HTML5响应式网站哟!

2.360html5基地

350旗下的HTML5作品展示网站，大部分是HTML5游戏展示，可爱有趣。比如打开一个割绳子的HTML5展示：

3.HTML5 Games

相对360来说更丰富的HTML5游戏资源，玩着玩着技能激发设计灵感呢!

HTML5技术网站

1.whatwg

网络超文本应用技术工作小组(Web Hypertext Application Technology Working Group)的博客，里面一些文章能让人受益匪浅。

2.HTML5医生

一些关于html5语义及如何使用它们的文章，医生会定时回答网友们的问题。

3.HTML5中国

一个真的能手把手教你6小时做一个HTML5坦克大战游戏的网站，还有各类HTML5的资讯、沟通交流论坛等。

HTML5测试网站

1.HTMLDemos

测试HTML5标签在各浏览器的兼容性，还能查看各种HTML5的标准Demo演示。

2.html5 test

能为浏览器对HTML5的兼容性打分，可以知道你当前的浏览器对HTML5的支持情况如何，各种标签和组件的支持情况。

所以，网站已经分享给你们了，如果真心要学习此项技能，快去实践吧!