做响应式的网站有哪些,雪锐琴网站建设,建设网站上申请劳务资质吗,wordpress 获取api日期#xff1a;2013-2-4 来源#xff1a;GBin1.com 不管你以前在web页面布局中如何称呼它们 - “区域”还是“块”#xff0c;我们一直都在布局中将页面分成可视的不同区域。但真正的问题在于我们并没有使用任何正确的工具来实现。一般情况下我们使用典型的网格来划分页头…日期2013-2-4 来源GBin1.com 不管你以前在web页面布局中如何称呼它们 - “区域”还是“块”我们一直都在布局中将页面分成可视的不同区域。但真正的问题在于我们并没有使用任何正确的工具来实现。一般情况下我们使用典型的网格来划分页头页面主题页尾等等区域来实现所谓的页面布局。 在过去的很多年以来我们都使用DIV来帮助我们划分页面区域而为此我们定义了很多class来帮助我们有效定义页面上的每一个层次最新的HTML5最终帮助我们解决了这个问题 - 使用section 元素 很多人都非常喜欢这个新的HTML成员因为i终于在HTML标准中给予了我们准确的开发建议Section增强了整个DOM的可读性在这篇文章中我 们将介绍这些新的元素帮助我们了解能够解决什么问题提供了什么重要的功能并且对于“语义化Web”做出了什么样的贡献 相关阅读HTML5/CSS3系列教程HTML5基本标签使用headernav和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 classparent
h2Heading/h2
pSome content.../pdiv classchildh2Another heading/h2pSome other content.../p/div
/div 这里我们我们稍微的修改了一下内容添加了两个div到来展示父子关系。 div.child标签属于div.parent。我们可以使用CSS来使得两个元素的关系看起来是这个样子。但是要知道div在标准中的描述是“没什 么特殊含义”。非但不意味着任何语义上的含义对于web页面的计算架构来说也没有任何意义。而且div对于我们来说也不可见。因此我们应该把他们都删 除而使用如下4个元素来展示页面父子关系如下 h2Heading/h2
pSome content.../p
h2Another heading/h2
pSome 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提供了sectionarticleaside和nav等元素。看看下图有几个区域 多选题 A. 1 B. 2 C. 3 D. 4 你的答案是什么 正确的应该是 B。 也许你会不太理解因为在HTML5的标准中拥有有如下具体的定义 4.4 Sections 4.4.1 body4.4.2 nav4.4.3 article4.4.4 aside4.4.5 h1, h2, h3, h4, h5 and h64.4.6 hgroup4.4.7 header4.4.8 footer4.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 classoutersection classinnerh1Section title/h1/section
/section 这里我们使用section来生成一个盒模式。如果我们运行 our outliner我们得到如下警告 [Untitled Section] Section title这里如果使用div的话可以有效帮助我们划分区域 sectiondivh1gtSection title/h1/div
/section 生成结果如下 Section title可以看到没有任何警告或者提示 总结 HTML 并不是一个SDK或者图形设计师的画板。它是一个Meta语言一个帮助你了解特殊信息的语言。有时候我们使用解析器获取主体时间来源或者流行等内 容。这就是microdata和RDF主要的功能。另外上下文层次相关的重要性和代码关系都需要被考虑。这就是正确的区域元素使用和语法需要考虑 的。 有些人可能会告诉你不要过于考虑区域可能由于没有什么意义。但是使用区域定义很好的提高了HTML的结构上面我们已经很好的介绍了。 个 人认为Section不但对于优化document结构来说有好处而且最终会让整个DOM趋于合理。而同时对于我们来说需要去适应这种变化需要我们 自己去优化和改变自己的开发流程和习惯但是我相信对于web开发的趋势和方向来说最终会使得整个流程更加专业和标准化。对于变化应该值得。 via gbtags 来源HTML5/CSS3系列教程HTML5 区域(Sectioning)的重要性转载于:https://www.cnblogs.com/gbin1/archive/2013/02/04/2891728.html
