福州html网页制作,html5网站的区别

  • 福州html网页制作,html5网站的区别已关闭评论
  • A+

很多企业在2018年建设企业网站的时候,就开始使用html5作为企业网站的建设语言,今天嘉艺网络就来说下企业网站用html5建设有什么好处

1 HTML5介绍

HTML5是一种WEB标记语言, 主要用于开发网页使用。HTML5是WEB应用中一种“超文本标记语言 (HTML) ”的第五次重大修改, 我们将这次修改后的HTML标准, 称之为“HTML5”。

HTML5就是包括HTML、CSS和Java Script在内的一套技术组合, 进一步加强了页面的表现性能。所以说未来HTML5将成为HTML、XHTML以及HTML DOM的新标准。

2 HTML5与HTML4区别

2.1 语法的改变

HTML5中的DOCTYPE声明方法 (不区分大小写) 如下:<!DOCTYPE html>。和早期版本相比声明更简洁, 早期版本需要很长的语句。

2.2 新增部分标签

在HTML5中, 还新增了一些新的标签, 以下列出部分新标签。

HTML5新增了<header>、<footer>、<section>、<article>等结构标签, 以便明确表示网页的结构和更好的体现网站的语义性;新增<figure>、<figurecaption>和<hgroup>元素用于对页面的内容进行分组;新增<audio>和<video>标签, 用于实现在网页中插入音频和视频文件。新增了<details>、<summary>、<progress>和<meter>元素用于给页面增加交互体验元素。

下面以网页结构布局标签为例详细说明在网页布局方面HTML5和HTML4的区别。某网页网页布局结构如图1所示。

图1 网页布局结构图

福州html网页制作,html5网站的区别

在上述布局结构中, 如果使用HTML4中的标签<div>来进行布局, 如图2所示。源文件代码如下:

图2 HTML4布局标签   

福州html网页制作,html5网站的区别

图3 HTML5布局标签   

福州html网页制作,html5网站的区别

<style type="text/css">

#header{}

#nav{}

#article{}

#aside{}

#footer{}

</style>

<body>

<div id="header"></div>

<div id="nav"></div>

<div id="article"></div>

<div id="aside"></div>

<div id="footer"></div>

</body>

上述代码结构复杂并且不直观易懂。在新的HTML5标准中, 新增了一些标签, 这些标签都是有结构性的, 且这些标签的作用与块元素非常相似且能够更语义化的定义页面层次和逻辑。代码如下:

<style type="text/css">

header{}

nav{}

article{}

aside{}

footer{}

</style>

<body>

<header></header>

<nav></nav>

<article></article>

<aside></aside>

<footer></footer>

</body>

header元素、nav元素、article元素、aside元素、section元素以及footer元素都是用于搭建页面结构的元素, 具体含义如下:

header元素是一种具有引导和导航作用的结构元素, 该元素可以包含所有通常放在页面头部的内容。header元素内可以放置内容的标题, 也可以放置Logo图片、搜索表单或者其他相关内容。

nav元素用于定义导航链接, 该元素可以将具有导航性质的链接归纳在一个区域中, 使页面元素的语义更加明确。其中的导航元素可以链接到站点的其他页面, 或者当前页的其他部分。

article元素主要定义与上下文不相关的独立部分。该元素经常被用于定义一篇日志、一条新闻或用户评论等。article元素通常使用多个section元素进行划分, 一个页面中article元素可以出现多次。

aside元素主要包含有别于主要内容部分的信息, 如导航条、相关引用、广告等。主要用于定义一些相关附属信息部分。

footer元素用于定义一个页面或者区域的底部, 它可以包含所有通常放在页面底部的内容。

2.3 删除部分标签

HTML5删除了一些对可用性产生负面影响的元素、纯表现元素和只有少数浏览器支持的元素。

(1) frame元素

由于HTML5只支持iframe框架, 不支持frame框架, 所有删除了frameset、frame、noframes元素。

(2) 纯表现元素

在HTML4中, 有一些元素作用只是为了展示页面, 而实现由CSS完成, 如tt、u、s、strike、big、center、basefont和font。

(3) 少数浏览器支持的元素

有一些元素只有少数浏览器支持。如blink、marquee、applet、bgsound等元素。

3 HTML5的优势

(1) 解决了跨浏览器问题

在HTML5之前, 各大浏览器厂商为了争夺市场占有率, 会在各自的浏览器中增加各种各样的功能, 并且不具有统一的标准。使用不同的浏览器, 常常看到不同的页面效果。在HTML5中, 纳入了所有合理的扩展功能, 具备很好的跨平台性能。

(2) 更低的开发成本, 更精美的动画效果

使用HTML5标签和CSS层叠样式所实现的动画效果应用到网页中会使人眼前一亮, 并且HTML5技术能够实现开发一次, 可同时应用到手机、网页平台, 实现“一次设计, 普遍适用, 从而降低企业开发成本。

(3) 化繁为简的优势

新的简化的字符集声明、新的简化的DOCTYPE、简单而强大的HTML5 API, 以浏览器原生能力替代复杂的Java Script代码。为了实现这些简化操作, HTML5规范需要比以前更加细致、精确。为了避免造成误解, HTML5对每一个细节都有着非常明确的规范说明, 不允许有任何的歧义和模糊出现。

4 结束语

WEB技术发展越来越迅速, HTML5的到来更是把WEB技术推向了巅峰, 目前HTML5技术已经日趋成熟, 不仅在PC端, HTML5更是在移动终端上也有广泛的应用, HTML5的未来十分光明, 值得我们去学习。