html5触摸指定区域,HTML5/CSS3系列教程：HTML5 区域(Sectioning)的重要性

日期：2013-2-4

不管你以前在web页面布局中如何称呼它们 -

“区域”还是“块”，我们一直都在布局中将页面分成可视的不同区域。但真正的问题在于我们并没有使用任何正确的工具来实现。一般情况下我们使用典型的网格来划分页头，页面主题，页尾等等区域来实现所谓的页面布局。

在过去的很多年以来，我们都使用DIV来帮助我们划分页面区域，而为此我们定义了很多class来帮助我们有效定义页面上的每一个层次，最新的HTML5最终帮助我们解决了这个问题

- 使用section 元素，

很多人都非常喜欢这个新的HTML成员，因为i终于在HTML标准中给予了我们准确的开发建议，Section增强了整个DOM的可读性，在这篇文章中我

们将介绍这些新的元素，帮助我们了解能够解决什么问题，提供了什么重要的功能并且对于“语义化Web”做出了什么样的贡献！

开发网站

可能大家还记得使用dreamweaver来开发网站的日子，我们通过拖拽来生成一个典型的页面，如下：

使用dreamweaver只是为了快速的生成图形界面而非真正意义上的信息语义清晰，当然很多人都使用dreamweaver，包括我自己。典型的傻瓜式开发的产物。

web标准

当

我们开始熟悉了web标准以及正确开发的相关最佳实践之后，我们需要做的事情仍旧是视觉设计，典型的“CSS布局”，尽量不使用语义错误的table来设

计页面布局。使用基于div的布局作为web设计其实已经很多年了，不过使用div布局导致document结构的混乱和层次的难于维护是显而易见的。而

且最恶心的hack问题也一直困扰我们！

Div标签的问题

每天都会有成千上万的开发人员使用div来分隔，格式化页面内容。我们使用div来分隔不同的内容区域，以保证内容的互相独立。但是事实上div并非用来实现这样的功能的。看看如下这个例子：

在

这个简单的局部中，包含了一个文字主题和一个边栏内容。为了让它对于读者绝对清晰，我们将sidebar分离于主体。这里我们使用一个粗边框来封装这个边

栏内容。也许你会说，边栏的标题应该是

，这个我们稍后做解释。所有的定义使用了一个典型的CSS，如果你把CSS去除，你将看到如下展示：

.......

html5触摸指定区域,HTML5/CSS3系列教程：HTML5 区域(Sectioning)的重要性相关推荐

HTML5/CSS3系列教程：HTML5 区域(Sectioning)的重要性
日期:2013-2-4 来源:GBin1.com 不管你以前在web页面布局中如何称呼它们 - "区域"还是"块",我们一直都在布局中将页面分成可视的不同区域 ...
HTML5/CSS3系列教程：使用SVG图片
为什么80%的码农都做不了架构师?>>> 日期:2013-3-25 来源:GBin1.com 在我们开始使用SVG前,让我们先了解一下 SVG,并且解释一下为什么使用SVG. ...
html5教学文档笔记,4.HTML 教程- (HTML5 基础）
HTML 教程- (HTML5 基础) 1.HTML 标题 HTML 标题(Heading)是通过 - 标签来定义的. 2.HTML 段落 HTML 段落是通过标签来定义的. 3.HTML 链接 H ...
druid 手动指定数据源_Spring Boot2 系列教程(二十)整合JdbcTemplate 多数据源
多数据源配置也算是一个常见的开发需求,Spring 和 SpringBoot 中,对此都有相应的解决方案,不过一般来说,如果有多数据源的需求,我还是建议首选分布式数据库中间件 MyCat 去解决相关问 ...
html显示svg图片,HTML5/CSS3系列教程：使用SVG图片
在我们开始使用SVG前,让我们先了解一下 SVG,并且解释一下为什么使用SVG. SVG全称是Scalable Vector Graphics,如果你使用过adobe Illustrator的话,相信 ...
【HTML5系列教程】
<HTML5系列教程>目录大纲: 介绍内容包括HTML简介.服务器的概念.B/S.C/S软件架构.前端与后端的开发内容.HTML发展历程.浏览器内核介绍.Web标准.WebStorm工具 ...
JavaWeb核心技术系列教程(23)——JSP标签
C语言自学完备手册(33篇) Android多分辨率适配框架 JavaWeb核心技术系列教程 HTML5前端开发实战系列教程 MySQL数据库实操教程(35篇图文版) 推翻自己和过往--自定义View ...
讲给后台程序员看的前端系列教程(52)——Bootstrap轮播图
C语言自学完备手册(33篇) Android多分辨率适配框架 JavaWeb核心技术系列教程 HTML5前端开发实战系列教程 MySQL数据库实操教程(35篇图文版) 推翻自己和过往--自定义View ...
html5制作一个立方体,CSS3 3D transforms系列教程-立方体
学习制作3D翻转卡片是开始学习3D transform的一个好方法.一旦你掌握了3D翻转卡片的制作方法,是不是迫不及待的想制作更复杂的3D物体?我们在这个教程中将开始学习制作3D立方体. 3D立方体的 ...

html5触摸指定区域,HTML5/CSS3系列教程：HTML5 区域(Sectioning)的重要性

html5触摸指定区域,HTML5/CSS3系列教程：HTML5 区域(Sectioning)的重要性相关推荐

最新文章

热门文章