HTML5 中 div section article 的区别
HTML5 中div section article 的区别
刚刚开始接触 HTML5 时,对它的标签很不适应,甚至一度有点反感。尤其是对div、section、article 这几个标签,实在弄不清楚应该使用在什么场合下。
div
HTML Spec: “The div element has no special meaning at all.”
这个标签是我们见得最多、用得最多的一个标签。本身没有任何语义,用作布局以及样式化或脚本的钩子(hook)。
section
HTML Spec: “The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.”
与 div 的无语义相对,简单地说 section 就是带有语义的 div 了,但是千万不要觉得真得这么简单。section 表示一段专题性的内容,一般会带有标题。看到这里,我们也许会想到,那么一篇博客文章,或者一条单独的评论岂不是正好可以用 section 吗?接着看:
“Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the elemen.”
当元素内容聚合起来更加言之有物时,应该使用 article 来替换 section 。那么,section 应该什么时候用呢?再接着看:
“Examples of sections would be chap ters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site’s home page could be split into sections for an introduction, news items, and contact information.”
section 应用的典型场景有文章的章节、标签对话框中的标签页、或者论文中有编号的部分。一个网站的主页可以分成简介、新闻和联系信息等几部分。其实我对这里传达信息很感兴趣,因为感觉 section 和下面要介绍的 artilce 更加适用于模块化应用,这个话题以后会出篇专门的文章来讨论,这里暂时略过。
要注意,W3C 还警告说:
“The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.”
section 不仅仅是一个普通的容器标签。当一个标签只是为了样式化或者方便脚本使用时,应该使用 div 。一般来说,当元素内容明确地出现在文档大纲中时,section 就是适用的。
Apples
Tasty, delicious fruit!
The apple is the pomaceous fruit of the apple tree.
Red Delicious
These bright red apples are the most common found in many
supermarkets.
Granny Smith
These juicy, green apples make a great filling for
apple pies.
article
HTML Spec: “The article el ement represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication.”
article 是一个特殊的 section 标签,它比 section 具有更明确的语义, 它代表一个独立的、完整的相关内容块。一般来说, article 会有标题部分(通常包含在 header 内),有时也会包含 footer 。虽然 section 也是带有主题性的一块内容,但是无论从结构上还是内容上来说,article 本身就是独立的、完整的。
HTML Spec 中接着又列举了一些 article 适用的场景。“This could be a forum post, a magazine or newspaper article, a blog entry, a
user-submitted comment, an interactive widget or gadget, or any other independent item of content.”
当 article 内嵌 article 时,原则上来说,内部的 article 的内容是和外层的 article 内容是相关的。例如,一篇博客文章中,包含用户提交的评论的article 就应该潜逃在包含博客文章 article 之中。
问题是怎么才算“完整的独立内容”?有个最简单的判断方法是看这段内容在RSS feed 中是不是完整的。看这段内容脱离了所在的语境,是否还是完整的、独立的。
例子:
The Very First Rule of Life
If there's a microphone anywhere near you, assume it's hot and sending whatever you're saying to the world. Seriously.
...
The Very First Rule of Life
If there's a microphone anywhere near you, assume it's hot and sending whatever you're saying to the world. Seriously.
...
Comments
Posted by: George Washington
Yeah! Especially when talking about your lobbyist friends!
Posted by: George Hammond
Hey, you have the same first name as me.
总结
div section article ,语义是从无到有,逐渐增强的。div 无任何语义,仅仅用作样式化或者脚本化的钩子(hook),对于一段主题性的内容,则就适用section,而假如这段内容可以脱离上下文,作为完整的独立存在的一段内容,
则就适用 article。原则上来说,能使用 article 的时候,也是可以使用section 的,但是实际上,假如使用 article 更合适,那么就不要使用 section 。nav 和 aside 的使用也是如此,这两个标签也是特殊的 section,在使用 nav 和 aside 更合适的情况下,也不要使用 section 了。
对于 div 和 section、 article 以及其他标签的区分比较简单。对于 section 和 article 的区分乍看比较难,其实重点就是看看这段内容脱离了整体是不是
还能作为一个完整的、独立的内容而存在,这里面的重点又在完整身上。因为其实说起来 section 包含的内容也能算作独立的一块,但是它只能算是组成整体
的一部分,article 才是一个完整的整体。
因为其实有些时候每个人都有自己的看法,所以难免有难于决断的时候,怎么办?
在HTML5 设计原理中,有一条是专门用来解决类似情况的:
最终用户优先(Priority of Constituencies)
“In case of conflict, consider users over authors over implementors over specifiers over theoretical purity.” 一旦遇到冲突,最终用户优先,其次是作者,其次是实现者,其次标准制定者,最后才是理论上的完满。
推荐各位多读几遍HTML5 设计原理,这才是纷繁世界背后的最终奥义。
html的footer置于页面最底部的简单实现方法
html的footer置于页面最底部的简单实现方法 下面小编就为大家带来一篇html的footer置于页面最底部的简单实现方法。小编觉得挺不错的,现在分享给大家,也给大家做个参考. 需求:有时候,当页面内容较短,撑不开浏览器高度,但是又希望footer能在窗口最低端。 思路:footer的父层的最小高度是100%,footer设置成相对于父层位置绝对(absolute)置底(bottom:0),父层内要预留footer的高度。 html代码: 1. 2.
8. left:0; /* IE下一定要记得 */ 9. height: 60px; /* footer的高度一定要是固定值*/ 10.} 11.#main-content{ 12. padding-bottom: 60px; /*重要!给footer预留的空间*/ 13.} 这时候,其它浏览器上都能正常显示了,但是IE 6要另外处理: 1. 以上这篇html的footer置于页面最底部的简单实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考。
ajax+div实现漂亮的弹出框
2009-12-13 15:28 后台jsp处理程序: <%@ page contentType="text/html; charset=GBK" %> <%@ page import="com.sxmcc.framework.core.*"%> <%@ page import="java.util.*,com.dhcc.workflow.database.Dber,java.sql.*"%> <% /* time:2009-12-13 * @author yulw **/ %> <%--工单被起草次数统计 --%> <% String flowID = (String)request.getParameter("flowID"); String sql = "select count(*) from flow_instance_names where flow_id='"+flowID+"'"; ResultSet rs = Dber.executeQuery(sql,"查询工单被起草次数"); int count = 0; while(rs.next()){ count = rs.getInt(1); } System.out.println("该工单总共被起草了"+count+"次。"); response.setContentType("text/xml; charset=UTF-8"); response.setHeader("Cache-Control", "no-cache"); out.println("
JQuery弹出层,点击按钮后弹出遮罩层,有关闭按钮
JQuery弹出层,点击按钮后弹出遮罩层,有关闭按钮
弹出层
div弹出层,我没有点击事件,是页面一加载就弹出来,你也可以改成$("#id").click(fun ction(){});放这里面就可以点击某个id事件来弹出层了,上预览图: 页面加载完成时: 当验证码得到焦点时: 实现这个ajax为了节约时间,用户名/密码/验证码我都没判断是否为空,我也没用数据库,登录用户名和密码都是admin
登录成功时: 这里说明一下,由于时间有限,你可以把这个登录成功或者登录失败,效果做一下,直接在登录窗口上放一个
JS+div+css弹出层有_遮盖效果
JS +DIV+CSS弹出层并且后面有遮盖效果(首先要应用Jquery) //获得当前页面高度 function GetPageHeight() { if ($.browser.msie) { return https://www.360docs.net/doc/3315168226.html,patMode == "CSS1Compat" ? document.documentElement.clientHeight : document.body.clientHeight; } else { return self.innerHeight; } } //获得当前页面宽度 function GetPageWidth() { if ($.browser.msie) { return https://www.360docs.net/doc/3315168226.html,patMode == "CSS1Compat" ? document.documentElement.clientWidth : document.body.clientWidth; } else { return self.innerWidth; } } //显示遮盖层 function ShowCoverDiv() { //如果遮盖层已经存在,就删除它 $("#coverdiv").remove(); //设置BODY的样式(可选) $("body").css({ "position": "absolute" ,"margin-top":"0px","margin-left":"0px"}); //创建出遮盖层 $("body").append("
"); //设置遮盖层的样式 $("#coverdiv").css({ "display": "none", "left": "0px", "top": "0px", "position": "absolute", "z-index": "5", "background-color": "#777", "width":DIV层布局与Spry构件
DIV层布局与Spry构件 1、认识Spry构件 Spry功能功能不仅增强了页面的布局形式,简化并增强了表单的验证功能,还与XML数据相结合,方便构造动态数据显示。本例就将这些新功能集合到一个网页中,从中体会Spry的无穷魅力。 1)Spry构件 2)Spry验证表单 3)Spry XML数据显示 这一章重点学习Spry构件,可以把Spry构件看成一种控件,是已经事先设计好的模块,我们可以直接添加在网页中,快速地实现比较炫酷的网页效果 Spry构件类型 1)Spry菜单栏 2)Spry选项卡面板 3)Spry折叠式 4)Spry折叠面板 5)Spry工具提示 我们将通过一个综合实例,结合Div布局来学习各种构件的使用 2、DIV布局页面 DIV+CSS的页面布局是网页设计的发展方向,很多网站也是从表格布局发展到DIV布局,这一节我们可以说是一个入门,了解如何使用DIV布局页面。 1)先创建DIV标签 2)设置对应的CSS样式 注意:插入DIV标签的位置 技巧:默认情况下两个DIV标记上下进行排版,如果想让两个DIV层并排显示,可以使用Float属性 #top { background-color: #FC0;
height: 60px; width: 720px; } #mid { background-color: #CF0; height: 250px; width: 720px; } #bottom { background-color: #F6F; height: 20px; width: 720px; } #mid_left { background-color: #69F; height: 250px; width: 220px; float: left; } #mid_right { background-color: #3FF; height: 250px; width: 500px; float: right; } 添加Logo图片后 #top img { float: left; } 网页DIV布局代码如下,注意嵌套 3)使用DIV――box整体控制居中对齐#box { background-color: #6FF; height: 330px; width: 720px; margin-right: auto; margin-left: auto; } 网页DIV布局代码如下,注意居中对齐 3、Spry菜单MenuBar 插入Spry菜单,设置属性,生成菜单
经典的底部弹出div层