论HTML5和CSS3在网页布局中新特性和优势

江汉艺术职业学院教育学院计算机教研室　杨　柳

论HTML5和CSS3在网页布局中新特性和优势

江汉艺术职业学院教育学院计算机教研室杨柳

随着移动互联网的兴起和壮大，越来越多的用户通过各种移动终端来访问网站。如此一来，就给网页开发人员提出了更高要求，使用传统的HTML和CSS已经不能满足开发需求了。于是在原来的基础之上，又新增了很多特性，比如HTTML5中的新标签和各种API，CSS3中的选择器、盒模型、弹性布局、渐变、变换、动画等。本文就有关HTML5和CSS3中与布局相关的一些新特性做一些阐述和探讨，包括HTM5语义化标签、响应式布局、CSS3盒模型，并通过案例说明这些新特性在实际开发中的应用。

HTML5；CSS3；语义化标签；盒模型；弹性布局；响应式

一、HTML5背景简介

HTML5为超文本标记语言（HTML）的第五次重大修改，2014年该标准规范终于制定完成。它将会取代1999年制定的HTML4.01、XHTML1.0标准，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求，为桌面和移动平台带来无缝衔接的丰富内容，其设计目的是为了在移动设备上支持多媒体。接下来，W3C将致力于开发用于实时通信、电子支付、应用开发等方面的标准规范，还会创建一系列的隐私、安全防护措施。

二、HTML5的部分新特性

1.HTML5的语义化标签

HTML5赋予网页更好的意义和结构，使用语义恰当的标签使得页面元素有含义，能够让人和搜索引擎都容易理解。在早期的网页布局中，我们都是使用div来划分结构的，通过class来进行区分，由于class不是通用的标准的规范，搜索引擎只能猜测你的某个div的内容属于哪一部分，导致整个HTML文档结构定义不清晰。

为了解决整个问题，HTML5专门添加了一些表示结构的语义化标签。常见的有header、nav、section、article、aside、footer、hgroup。有了这些语义化标签之后，就可以使用它们来搭建页面的结构。

使用语义化标签搭建的页面有如下几大优点：1）页面更容易被搜索引擎收录，有利于SEO。2）能更好的体现页面的主题，在没有CSS的情况下，页面也能呈现出很好的内容结构。

3）可以在更多的设备上进行解析，如屏幕阅读器、移动设备。2.CSS3响应式布局

随着移动互联网的发展，移动终端的尺寸逐渐出现较大差别，传统的web页面已经不能满足多种设备的浏览效果，针对同样一个网站，我们需要在PC端、平板电脑以及手机端分别提供特定的内容和功能，对于一些中小网站，这种做法将极大增加开发和维护成本。我们需要一种技术，使得我们只需要编写一份代码就可以适配不同的终端，随着这种需求的日益增加，响应式网页布局应运而生。

（1）响应式布局的概念

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，他在A List Apart发表了一篇开创性的文章，将三种已有的开发技巧（弹性网格布局、弹性图片和媒体查询）整合起来，并命名为响应式网页设计（RWD Responsive Web Design），意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式，通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。

（2）响应式的实现步骤

1）设置meta标签

大多数移动浏览器将html页面放大为宽的视图（viewport）以符合屏幕分辨率。我们可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。在＜head＞标签里加入这个meta标签：＜meta name="viewport" content="width=device-width，initial-scale=1， maximum-scale=1， user-scalable=no"＞。

2）通过媒体查询设置样式

Media Queries是响应式设计的核心。它根据条件告诉浏览器如何为指定视图宽度渲染页面，假如我们要设定兼容iPad和iphone 的视图，那么可以这样设置：

/** iPad **/

@media only screen and （min-width： 768px） and （max-width： 1024px） ｛...｝

/** iPhone **/

@media only screen and （min-width： 320px） and （max-width： 767px） ｛...｝

3）使用百分比实现响应式内容

媒体查询固然强大，但也有其局限性。如果只是使用媒体查询来适应不同视口的固定宽度设计，只会从一组css规则突变到另一组，两者之间没有任何的平滑过渡。因此，我们需要将固定宽度布局转换成灵活的百分比布局，这样才能让页面元素根据视口大小在一个又一个媒体查询之间灵活伸缩修正样式。

3.CSS3盒模型

盒模型是CSS中一个非常重要的概念。它规定了元素处理元素内容、内边距、边框和外边距的方式。

在CSS2的标准盒模型中，width和height指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

在传统的固定宽度布局中，盒模型能够很好的完成各种布局。但是有了响应式之后，我们需要使用百分比来取代固定宽度布局。

我们来看一个百分比的尴尬情况，假设有如下页面结构：

＜div class="content"＞

＜div class="left"＞left＜/div＞

＜div class="right"＞right＜/div＞

＜/div＞

我们设置样式如下：

其效果如下：

如果我们给内部的两个div分别加上1px的像素，添加css如下：.left， .right ｛border：1px solid #000；｝，则会出现如下效果：

之所以会出现这种情况，原因很简单，因为在标准盒模型中，增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。左右两个div宽度设置为50%，意味着其宽度为父元素宽度的50%，也就是500px，再加上1px的边框，两个div所占据的总尺寸就是均为502px，整体就是1004px，而父div宽度仅为1000px，所以class为right的div就掉下来了。

针对这种情况，CSS3提供了两种盒模型，第一种是W3C标准盒模型，另一种则是IE盒模型。它们的相同之处是都提供了和width、height、padding、border和margin等盒子属性，不同之处则是计算方式不一致，如下所示：

W3C标准盒模型元素所占空间 = width（height）+ padding + border + margin

W3C标准盒模型元素大小 = width（height） + padding + border

IE盒子模型元素所占空间 = width（height）+ margin

IE盒子模型元素大小 = width（height）

在CSS3中，可以使用box-sizing属性来设置其解析模式。其语法如下：

其中，content-box表示遵循的是W3C标准盒模型，border-box表示遵循的IE盒模型。

针对百分比的尴尬情况，可以使用IE盒模型来解决，我们将内部的两个div设置为IE盒模型即可，添加CSS代码如下：

再次浏览，效果如下：

在使用box-sizing的时候，需要注意其兼容性问题。IE家族只有IE8版本以上才支持，其它标准浏览器都能很好的支持box-sizing，但有些浏览器还是需要加上自己的前缀。Mozilla需要加上-moz-，Webkit内核需要加上-webkit-，Presto内核需要加上-o-，IE浏览器则需要加上-ms-。

［1］大漠.图解CSS3：核心技术与案例实战［M］.机械工业出版社，2014，7.

［2］弗雷恩著，王永强译.响应式Web设计：HTML5和CSS3实战［M］.人民邮电出版社，2013，1.

［3］BenjaminLaGrone著，黄博文，饶勋荣译.响应式Web设计：HTML5和CSS3实践指南［M］.机械工业出版社，2014，8.

［4］Peter Lubbers，Brian Albers，Frank Salim.HTML5程序设计（第2版）［M］.人民邮电出版社，2012，5.