什么是H5页面？

2023-03-03 03:09:01html-css05

什么是H5页面？,第1张

H5是HTML5的简称。

HTML5是HTML最新的修订版本，是一种超文本标记语言。H5有两大特点：首先，强化了Web网页的表现性能。其次，追加了本地数据库等Web应用的功能。

发展

H5页面就是利用html5制作出来的页面，尤其在微信中发展迅速，借由微信这个移动社交平台，正在走进更多人的视野，比如从引爆朋友圈的H5小游戏《围住神经猫》，到颠覆传统广告的大众点评H5专题页《我们之间只有一个字》，各种H5游戏和专题页纷纷崭露头角。

为活动推广运营而打造的H5页面是最常见的类型，形式多变，包括邀请函、贺卡、测试题等形式。

HTML与XHTML区别

1、XHTML元素必须被正确地嵌套

2、XHTML 元素必须被关闭，空标签也必须被关闭。如<br/>

3、XHTML 元素必须小写

4、XHTML 文档必须拥有一个根元素

5、XHTML属性名称必须小写，属性值必须加引号，属性不能简写。如：<input checked="checked" />

6、XHTML用 id 属性代替 name 属性。

注意：应该在 "/" 符号前添加一个额外的空格，以使你的 XHTML 与当今的浏览器相兼容

7、语言属性（lang）lang 属性应用于几乎所有的 XHTML 元素。它定义元素内部的内容的所用语言的类型。如果在某元素中使用 lang 属性，就必须添加额外的 xml:lang，像这样：<div lang="no" xml:lang="no">Heia Norge!</div>

XHTML 1.0 的三种 XML 文档类型

XHTML 1.0 规定了三种 XML 文档类型，以对应上述三种 DTD。

XML/HTML Code复制内容到剪贴板

XHTML 1.0 Strict

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

在此情况下使用：需要干净的标记，避免表现上的混乱。请与层叠样式表配合使用。

XML/HTML Code复制内容到剪贴板

XHTML 1.0 Transitional

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

在此情况下使用：当需要利用 HTML 在表现上的特性时，并且当需要为那些不支持层叠样式表的浏览器编写 XHTML 时。

XML/HTML Code复制内容到剪贴板

XHTML 1.0 Frameset

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

在此的情况下使用：需要使用HTML框架将浏览器窗口分割为两部分或更多框架时。

HTML4与HTML5

最近HTML5甚火，我们再来看一下HTML5标签与HTML4标签的一些不同之处：

1.概念的变化：

HTML5专注内容与结构，而不专注的表现

<hgroup>导航相关数据</hgroup>

</header>

<h1>标题:HTML5专题视频教程</h1>

2.声明与标签：

HTML5在更多的声明和标签上面做了简化，也对兼容做了详细的规定，废除了部分元素，增加了部分元素。

HTML5标签语法介绍及新增标记

（1）、语法标签：

a. 不允许写的结束符的标签：area、basebr、col、command、Embed、hr、img、input、keygen、link、meta、param、source、Track、wbr

b. 可以省略结束符的标签：li、dt、dd、p、rt、optgroup、option、Colgroup、thread、tbody、tr、td、th

c. 可以完全省略的标签：html、head、body、colgroup、tbody

（2）、新增标签：

<article>标记定义一篇文章

<aside>标记定义页面内容部分的侧边栏

<audio>标记定义音频内容

<canvas>标记定义图片

<command>标记定义一个命令按钮

<datalist>标记定义一个下拉列表

<details>标记定义一个元素的详细内容

<dialog>标记定义一个对话框(会话框)

<figure>标记定义一组媒体内容以及它们的标题<footer>标记定义一个页面或一个区域的底部

<header>标记定义一个页面或一个区域的头部

<hgroup>标记定义文件中一个区块的相关信息

<keygen>标记定义表单里一个生成的键值

<mark>标记定义有标记的文本

<meter>标记定义 measurementwithin apredefinedrange

<nav>标记定义导航链接

<output>标记定义一些输出类型

<progress>标记定义任务的过程

<rp>标记是用在Rubyannotations 告诉那些不支持Ruby元素的浏览器如何去显示

<rt>标记定义对rubyannotations的解释

<ruby>标记定义 rubyannotations.

<section>标记定义一个区域

<source>标记定义媒体资源

<time>标记定义一个日期/时间

<video>标记定义一个视频

HTML5简单示例

XML/HTML Code复制内容到剪贴板

<!DOCTYPE html>

<head>

<title>PHP100中文网HTML5专题</title>

header,nav,article,footer {border:solid 1px #666padding:5px}

header{width:500px}

nav{float:leftwidth:60pxheight:200px}

article{float:leftwidth:428pxheight:200px}

footer{clear:bothwidth:500px}

</style>

document.createElement('article')

document.createElement('nav')

document.createElement('header')

</script>

</head>

<body>

<hgroup>导航相关数据</hgroup>

</header>

<h1>HTML5专题视频教程</h1>

发布日期:<time>09:00</time>

<p>测试相关内容</p>

</article>

</footer>

</body>

</html>

HTML5这项于2004年被正式提出的HTML语言的第五次重大修改，过了十年之久，才算在互联网世界中火了起来。在中国，无论是早期腾讯在推其浏览器时，还是后来百度为了打破APP的不可搜索性而力推H5，都没有将之引爆。倒是最近随着微信越来越火，H5也火了起来了。

H5的最大优势就是可以在网页上直接调试和修改，而且更重要的是，它几乎不用考虑用户的机型与适配性问题。智能手机主要被分裂为两大系统：Android和iOS，一个做应用的团队，怎么着也得准备两套班子来适应用户两种手机。而在Android体系中，版本的分裂和机型的五花八门，想要求得极致的体验，还得反复测试各种版本和机型。这无疑大大抬高了开发成本。

就像开发一个网站无需太多关注用户究竟是windows机器还是MAC机器（少许关注还是需要的，但比起开发软件所需要的关注，那就少多了），开发H5同样能够大幅降低成本。

第二个非常重要的优势在于版本升级。正如网站升级和用户无关一样，H5应用的升级，用户也不需要去update什么东西。这某种程度上就等于“强制升级”，这给开发者带来的好处也是巨大的：他们不需要考虑应用的各种版本的兼容性问题。

第三个也必须注意到的优势是，如果使用H5（甚至是更低版本的html）开发出网络应用（web app），它可以绕过苹果的应用商店，让用户直接从网站上下载，这可以避免让应用商店在收费上扣去3成的分成制度。

不过，这绝不是H5在时下忽然大火的原因。因为上述这些特点，H5早就具备了。

第一个重要的原因在于，一直到去年10月29日，万维网联盟才宣布，经过近8年的艰辛努力，H5标准规范终于最终制定完成了，并已公开发布。有了标准规范，给H5打下了非常重要的基石。对于互联网世界而言，标准规范几乎就是生命线。

第二个重要的原因在于移动互联网终于如燎原之势普及开来，而在中国，移动互联网的主要应用之一微信，又一直在很多模块里使用H5技术，比如微信公众账号。

微信的朋友圈中，除了图片和文字以外，能发送进去和朋友们分享的，都是网页。过去一般都是分享公众账号的一篇文章，但很快，商业组织们意识到，如果把他们的商业信息做得有趣一些，借助用户们的分享，他们的传播效率会高很多。于是，我们就会看到今天的朋友圈里动辄就会出现商业组织的H5制作，比如会议邀请，比如组织招聘，比如活动策划。

于是，有人开始惊呼：H5会杀死原生应用（native app）——不过，这句话其实好几年之前就有人喊过，Facebook一度还使用所谓的“网络应用”来替代原生应用（不过但没过多久，就退了回去。网络应用还是有很多问题，比如对交互性的即时响应）。

但我始终不这么认为。网站并没有杀死软件，web app也很难杀死native app，即便得到H5支持的web app。更有可能的是，一个native app里在部分甚至大部分模块里包含H5——事实上，微信就是这样的应用，Facebook所谓退回native app，本质上也是网页打包进入它的那个原生应用。很难有泾渭分明的web app或者native app。

还有一点是值得我们担心的，那就是今天对H5的使用，过于营销化了。朋友圈里动辙可见的H5，都是营销信息。这让我不得不想起了一度非常火爆的minisite，商业公司曾经疯狂在这种小型网站上烧钱，一个策划专题投入上百万都不算罕见，最终，minisite可以说是营销需求催动，也毁于过于营销化。普通用户图个新鲜第一次会看，第二次第三次，他们总有厌烦的一天。

真正能让H5大火的，绝不是今天朋友圈这些移动互联网里的“minisite”，而是能切实解决某种需求的H5式解决方案。一个我个人很看好的方向是视频。H5理论上是不再需要嵌入什么Flash技术了。不过，到目前为止，以谷歌、Firfox、Opera为一方，苹果为另外一方，就视频格式问题，还在继续纠结讨论中。

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”

# 上一篇：CSS 的颜色代码透明色是什么代码？

# 下一篇：如何对电脑文件夹里的文件进行分级和分类？