首页 > 资讯 > 关键词  > css3教程最新资讯  > 正文

HTML5/CSS3系列教程:HTML5 区域(Sectioning)的重要性

2013-02-05 17:50 · 稿源: gbin1.com

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

在过去的很多年以来,我们都使用DIV来帮助我们划分页面区域,而为此我们定义了很多class来帮助我们有效定义页面上的每一个层次,最新的HTML5最终帮助我们解决了这个问题 - 使用section 元素, 很多人都非常喜欢这个新的HTML成员,因为i终于在HTML标准中给予了我们准确的开发建议,Section增强了整个DOM的可读性,在这篇文章中我 们将介绍这些新的元素,帮助我们了解能够解决什么问题,提供了什么重要的功能并且对于“语义化Web”做出了什么样的贡献!

相关阅读:HTML5/CSS3系列教程:HTML5基本标签使用header,nav和footer

开发网站

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

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

web标准

当 我们开始熟悉了web标准以及正确开发的相关最佳实践之后,我们需要做的事情仍旧是视觉设计,典型的“CSS布局”,尽量不使用语义错误的table来设 计页面布局。使用基于div的布局作为web设计其实已经很多年了,不过使用div布局导致document结构的混乱和层次的难于维护是显而易见的。而 且最恶心的hack问题也一直困扰我们!

Div标签的问题

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

在 这个简单的局部中,包含了一个文字主题和一个边栏内容。为了让它对于读者绝对清晰,我们将sidebar分离于主体。这里我们使用一个粗边框来封装这个边 栏内容。也许你会说,边栏的标题应该是《h3》,这个我们稍后做解释。所有的定义使用了一个典型的CSS,如果你把CSS去除,你将看到如下 展示:

如果我去除了CSS,你看到页面布局变成了响应式风格,这其实就是HTML4 document如何在浏览器中实际被生成的样式。这里我们看到边栏区域其实是document中的另外一段信息。

为什么会这样呢?

主 要的原因在于《div》是一个流动内容的元素。不管边框或者背景是什么样式,它和主题document并不分离,相反,作为其中的一个部分生 成。当我们移除CSS可以看到,边栏的“Resource”标题并非是一个独立的组件,而是document的一个部分。作为页面的阅读者来说,这一点大 家应该看到。

为了更好的说明,我们看看如下代码片段:

<div class=“parent”>

<h2>Heading</h2>

<p>Some content...</p>

<div class=“child”>

<h2>Another heading</h2>

<p>Some other content...</p>

</div>

</div>

这里我们我们稍微的修改了一下内容,添加了两个div到来展示父子关系。 div.child标签属于div.parent。我们可以使用CSS来使得两个元素的关系看起来是这个样子。但是,要知道div在标准中的描述是“没什 么特殊含义”。非但不意味着任何语义上的含义,对于web页面的计算架构来说也没有任何意义。而且div对于我们来说也不可见。因此我们应该把他们都删 除,而使用如下4个元素来展示页面父子关系,如下:

<h2>Heading</h2>

<p>Some content...</p>

<h2>Another heading</h2>

<p>Some other content...</p>

作为正确的结构来说,这里是实际构成内容的元素。

标题层次实际并非非常有用

可能很多人认为将《h2》替换成《h3》可能能够帮助我们解决问题。如果这样的话,我们可能得到如下:

A header(h2)

Another header(h3)

这个方式貌似更加的合理。但是实际上呢?h3的内容是否真的属于h2?这里很难说清楚。下面我们再看一个例子:

在这个HTML4页面中,我们使用h1来生成一个页面内容介绍标题,使用h2作为主内容的标题,使用h3来标示边栏,并且使用div#footer来生成页尾内容。但是问题是footer究竟属于那个一个内容呢?

Footer属于哪一个标题

下面这个图非常清晰的展示了document结构问题,我们看到这里footer究竟属于《h2》的页尾,还是《h3》的页尾。

可能有些专家认为,可以将代码改成如下样式:

h1(page)

h2(main)

h3(sidebar)

h2(footer)

这个属于一个hack,但是并非很正确。

划分区域

了解如何正确的划分区域,HTML5提供了《section》,《article》,《aside》和《nav》等元素。看看下图有几个区域:

多选题:

A. 1 B. 2 C. 3 D. 4

你的答案是什么? 正确的应该是 (B)。

也许你会不太理解,因为在HTML5的标准中拥有有如下具体的定义:

4.4 Sections

4.4.1 body

4.4.2 nav

4.4.3 article

4.4.4 aside

4.4.5 h1, h2, h3, h4, h5 and h6

4.4.6 hgroup

4.4.7 header

4.4.8 footer

4.4.9 address

但是如果你看看 4.4.8 footer的时候,你会看到如下内容:

“the footer element is not sectioning content; it doesn’t introduce a new section.”

这里HTML5的定义上有一些前后矛盾之处,不过大家也不用过于纠缠。

Section是一个新类型的div吗?

这可能是一个典型的错误理解。

Div其实在功能上并没有任何含义,如果你使用div来创建页面框架结构将会是一个非常糟糕的选择。

而Section用来定义一个结构化的区域,看看下面这个例子:

<section class=“outer”>

<section class=“inner”>

<h1>Section title</h1>

</section>

</section>

这里我们使用section来生成一个盒模式。如果我们运行 our outliner,我们得到如下警告:

[Untitled Section]

Section title

这里如果使用div的话,可以有效帮助我们划分区域:

<section>

<div>

<h1>Section title</h1>

</div>

</section>

生成结果如下:

Section title

可以看到没有任何警告或者提示!

总结

HTML 并不是一个SDK或者图形设计师的画板。它是一个Meta语言,一个帮助你了解特殊信息的语言。有时候我们使用解析器,获取主体,时间,来源或者流行等内 容。这就是microdata和RDF主要的功能。另外,上下文,层次,相关的重要性和代码关系都需要被考虑。这就是正确的区域元素使用和语法需要考虑 的。

有些人可能会告诉你不要过于考虑区域,可能由于没有什么意义。但是使用区域定义很好的提高了HTML的结构,上面我们已经很好的介绍了。

个 人认为,Section不但对于优化document结构来说有好处,而且最终会让整个DOM趋于合理。而同时对于我们来说需要去适应这种变化,需要我们 自己去优化和改变自己的开发流程和习惯,但是我相信对于web开发的趋势和方向来说,最终会使得整个流程更加专业和标准化。对于变化应该值得。

via gbtags

  • 相关推荐
  • 大家在看
  • TikTok联手Zynga推出一款基于HTML5打造的手机游戏

    眼下,TikTok正在进行游戏试验,它将率先跟手机游戏巨头Zynga展开合作。当地时间周一,Zynga宣布其计划在TikTok平台上独家推出一款基于HTML5的新游戏《Disco Loco 3D》。这款休闲游戏是一款单人无尽跑酷游戏,玩家在挑战朋友的同时要收集自己的舞蹈动作、在走猫步时要避开障碍物并收集奖章,这些跟Zynga的《High Heels》类似。虽然TikTok说这个游戏是为了测试其受众对其应用内的游戏的普遍兴趣,但该公司证实,他们跟其他游戏制造?

  • Chrome为学校推送企业策略补丁 可阻止学生查看HTML源码

    为防止学生在线上测验期间作弊和访问被屏蔽的站点,Chromium 开发团队刚刚更新了 Chrome OS 和浏览器,以允许学校 IT 管理员设置禁止查看 HTML 源代码。作为所有网页编程的基础语言,其在设计之初就考虑到了允许公开访问 Web 服务器提供的 HTML 代码,Chrome、Safari、Firefox 等浏览器也都支持这项功能。一方面,保持 HTML 代码的公开访问,对于标准化、渲染呈现、以及安全性都至关重要,但也有人表达了不同的意见。比如 2021 年

  • 微软警告NOBELIUM攻击技术愈加泛滥 谨防HTML代码夹带恶意软件

    早在 5 月,微软就认定有俄罗斯背景的 NOBELIUM 黑客组织要对持续数月的 SolarWinds 网络攻击事件负责,并同企业、政府和执法机构达成了合作,以遏制此类网络攻击的负面影响。早些时候,微软更进一步地剖析了 NOBELIUM 使用的一套更加复杂的恶意软件传送方法。可知其用于造成破坏,并获得“HTML Smuggling”系统的访问权。HTML Smuggling 技术概览(图自:Microsoft Security)微软表示,HTML Smuggling 是一种利用合法 HTML5 和 J

  • Chrome 97 Beta版发布:初步支持WebTransport 引入CSS媒体查询

    在 Chrome 96 稳定版发布之后,开发团队的重心已经偏移到 Chrome 97 版本中。在今天发布的 Chrome 97 Beta 版本中,最引人注意的是添加了对 WebTransport 的初步支持。WebTransport 是一个类似于WebRTC数据通道的协议框架,但主要是用于受网络安全模型限制的客户端,使用安全、多复式传输与远程服务器进行通信。WebTransport使用HTTP/3协议进行双向传输。与基于TCP的WebSockets不同,WebTransport依赖于类似UDP的数据包和可取消的?

  • 罗德推出AI-Micro新品:为USB-C与Lighting设备提供3.5mm音频转接

    如果你正在使用带有 USB-C 或 Lighting 端口的笔记本电脑 / 智能手机,那罗德(Rode)新推出的 AI-Micro 新品,正好可以极大地缓解你对于 1-2 个有线麦克风的接入需求。此前,该公司已经为 iPhone / iPad 等移动设备推出过类似的设备,iOS / iPadOS 用户或许不会对 Rode SC6-L 的功能设计感到陌生。不同的是,Rode 宣称 AI-Micro 运用了全新的“核心设计”,使之能够借助通用的 USB 输出,搭配更多的设备使用。得益于“增强的麦克?

  • ARGB灯效 德商必酷be quiet!发布Light Wings静音风扇

    2011 年 11 月 10 日,来自德国的高端PC配件制造商德商必酷(be quiet!),刚刚发布了全新Light Wings系列风扇,这也是德商必酷(be quiet!)第一款带有ARGB灯效的风扇产品。除此以外,研发重点还专注于性能、低噪音运行以及be quiet!一贯的高品质。Light Wings系列风扇支持PWM调速,风扇正面有一个LED灯环,反面还单独配备了另一个稍窄些的LED灯环,形成双灯环配置,并且提供120mm和140mm两种尺寸可供选择。动态灯效Light Wings的

  • Model S Plaid上赛道:轻取宝马M5 CS与凯迪拉克CT5-V Blackwing

    在近日更新的一期油管视频中,Hagerty 将特斯拉 Model S Plaid 电动汽车带到了加利福尼亚州的 Willow Springs 国际赛车场,并与另外两辆速度同样惊人的燃油车展开了一番激烈较量。虽然电动车长期因为扭矩特性强大而被调侃为“无脑直线加速”的首选,但本次实测还是给了宝马 M5CS 和凯迪拉克 CT5-V Blackwing 一个下马威。说到电动汽车,许多人很是担心电池重量和过热,可能导致它无法在其它性能指标上超越传统燃油车型。这么说确实

  • GM BrightDrop宣布Merchants Fleet加大订购规模:增至1.8万辆

    通用汽车(GM)的BrightDrop为其EV410电动送货车赢得了第二个客户:车队管理公司Merchants Fleet,这家公司周四表示,它已经订购了5400辆中型电动货车。新订单是在Merchants之前承诺购买12600辆BrightDrop旗舰车型EV600货车之外的。现在的总订单达到了18000辆,这是BrightDrop迄今为止接到的最大的客户订单。BrightDrop是GM在2021年初推出的第一英里到最后一英里的业务部门。它是从汽车制造商的内部组织全球创新中分离出来的,该组织

  • SEO优化,URL突然变成HTTPS,对排名影响大吗?

    很多SEO同行和企业主都非常好奇,为什么我可以每天可以长期输出各种不同的SEO问题,并提供相关的解决方案,实际上,这些问题的来源,都是大量从SEO实战中遇到的。

  • 经历数月测试:苹果终于推出macOS版TestFlight预览

    早在今年 6 月的全球开发者大会(WWDC 2021)上,苹果就首次披露了 Mac 版的 TestFlight 。自那以后,该项目一直处于测试阶段。起初,我们在 8 月份看到了一些即将推出的迹象。当时开发者报告称能够通过 Xcode 13 beta,将 macOS 应用程序的测试版本提交到 App Store Connect 。数月过后,我们终于迎来了 macOS 版 TestFlight 预览。如承诺的那样,TestFlight 现已“正式”登陆 Mac App Store 预览,这也是该公司首次将应用程序测?

这篇文章对你有价值吗?

  • 热门标签

热文

  • 3 天
  • 7天