分类目录归档:HTML5/CSS3

HTML5/CSS3

HTML5 语义标签

在 HTML5 出来之前,我们用 div 来表示页面章节,但是这些 div 都没有实际意义。(即使我们用 css 样式的 id 和 class 来形容这块内容的意义)。这些标签只是我们提供给浏览器的指令,只是定义一个网页的某些部分。但现在,那些之前没“意义”的标签因为 html5 的出现而消失了,这就是我们平时所说的“语义”。

html5-layout

如上图那个页面结构没有使用一个 div,都是采用 html5 语义标签(用哪些标签,关键取决于你的设计目标)。

但是也不要因为 html5 新标签的出现,而随意用之,错误的使用肯定会事与愿违。所以有些地方还是要用 div 的,就是因为 div 没有任何意义的元素,他只是一个标签,仅仅是用来构建外观和结构。因此是最适合做容器的标签。

W3C 定义了这些语义标签,不可能完全符合我们有时的设计目标,就像制定出来的法律不可能流传 100 年都不改变,更何况它才制定没多久,不可能这些语义标签对所以设计目标的适应。只是一定程度上的“通用”,我们的目标是让爬虫读懂重要的东西就够了。

结论:不能因为有了 HTML5 标签就弃用了 div,每个事物都有它独有的作用。

header 元素

header 元素代表“网页”或“section”的页眉;

通常包含 h1-h6 元素或 hgroup,作为整个页面或者一个内容块的标题,也可以包裹一个目录部分,一个搜索框,一个 nav,或者任何相关 logo;

整个页面没有限制 header 元素的个数,可以拥有多个,可以为每个内容块增加一个 header 元素;

header 示例代码:

<header>

  <hgroup>
    <h1>网站标题</h1>
    <h2>网站副标题</h2>
  </hgroup>

</header>

header 使用注意:

  1. 可以是“网页”或任意“section”的头部部分;
  2. 没有个数限制;
  3. 如果 hgroup 或 h1-h6 自己就能工作的很好,那就不要用 header;

section 元素

section 元素代表文档中的“节”或“段”,“段”可以是指一篇文章里按照主题的分段;“节”可以是指一个页面里的分组;

section 通常还带标题,虽然 html5 中 section 会自动给标题 h1-h6 降级,但是最好手动给他们降级;

section 示例代码:

<section>

  <h1>什么是 section</h1>

  <article>

    <h2>关于 section</h2>
    <p>section 的介绍</p>

    <section>
      <h3>关于其他</h3>
      <p>关于其他 section 的介绍</p>
    </section>

  </article>

</section>

section 使用注意:

  1. 表示文档中的节或者段;
  2. article、nav、aside 可以理解为特殊的 section,所以如果可以用 article、nav、aside 就不要用 section,没实际意义的就用 div;

article 元素

article 元素最容易跟 section 和 div 容易混淆,其实 article 代表一个文档、页面或者网站中自成一体的内容,其目的是为了让开发者独立开发或重用。譬如论坛的帖子,博客上的文章,一篇用户的评论,一个互动的 widget 小工具。(特殊的 section)

除了它的内容,article 会有一个标题(通常会在 header 里),会有一个 footer 页脚。我们举几个例子介绍一下 article,好更好区分 article、section、div;

一篇简单文章的 article 示例代码:

<article>

  <header>
    <h1>文章标题</h1>
  </header>

  <p>文章内容..</p>

  <footer>
    <p>版权:cssue.com</p>
  </footer>

</article>

上例是最简单的 article 标签使用情况,如果在 article 内部再嵌套 article,那就代表内嵌的 article 是与它外部的内容有关联的,如博客文章下面的评论;

文章里的评论,一个 article 里嵌套 article 的示例代码:

<article>

  <header>
    <h1>文章标题</h1>
    <time datetime="2012-12-06">2012/12/06</time>
  </header>

  <p>文章内容..</p>

  <article>

    <h2>评论</h2>

    <article>
      <header>
        <h3>评论者: XXX</h3>
        <time datetime="2012-12-06T19:10">~1 hour ago</time>
      </header>
      <p>娃哈哈..</p>
    </article>

    <article>
      <header>
        <h3>评论者: XXX</h3>
        <time datetime="2012-12-06T19:10">~1 hour ago</time>
      </header>
      <p>哈哈哈哈...</p>
    </article>

  </article>

</article>

article 内部嵌套 article,有可能是评论或其他跟文章有关联的内容。那 article 内部嵌套 section 一般是什么情况呢。如下:

文章里的章节,一个 article 里嵌套 section 的示例代码:

<article>

  <h1>前端技术</h1>
  <p>前端技术有那些</p>

  <section>
    <h2>HTML</h2>
    <p>标签..</p>
  </section>

  <section>
    <h2>CSS</h2>
    <p>样式..</p>
  </section>

  <section>
    <h2>JS</h2>
    <p>脚本..</p>
  </section>

</article>

因为文章内 section 部分虽然也是独立的部分,但是它门只能算是组成整体的一部分,从属关系,article 是大主体,section 是构成这个大主体的一部分。本网站的全部文章都是 article 嵌套一个个 section 章节,这样能让浏览器更容易区分各个章节所包括的内容。

那 section 内部嵌套 article 又有哪些情况呢,如下:

一个 section 里嵌套 article 的示例代码:

<section>

  <h1>介绍网站制作成员配备</h1>

  <article>
    <h2>设计师</h2>
    <p>设计网页的...</p>
  </article>

  <article>
    <h2>程序员</h2>
    <p>编写程序的..</p>
  </article>

  <article>
    <h2>前端工程师</h2>
    <p>给楼上两位打杂的..</p>
  </article>

</section>

设计师、程序员、前端工程师都是一个独立的整体,他们组成了网站制作基本配备,当然还有其他成员~~。设计师、程序员、前端工程师就像 article,是一个个独立的整体,而 section 将这些自成一体的 article 包裹,就组成了一个团体。

article 和 section 的例子就例举这么多了,具体情况具体分析,不易深究。漏了 div,其实 div 就是只是想用来把元素组合或者给它们加样式时使用。

article 使用注意:

  1. 自身独立的情况下:使用 article;
  2. 是相关内容:使用 section;
  3. 没有语义的:使用 div;

nav 元素

nav 元素代表页面的导航链接区域。用于定义页面的主要导航部分。

nav 示例代码:

<nav>
  <ul>
    <li>HTML5</li>
    <li>CSS3</li>
    <li>JavaScript</li>
  </ul>
</nav>

但是我在有些时候却情不自禁的想用它,譬如:侧边栏上的目录,面包屑导航,或者上一篇下一篇文章,但是事实上规范上说 nav 只能用在页面主要导航部分上。页脚区域中的链接列表,虽然指向不同网站的不同区域,譬如服务条款,版权页等,这些 footer 元素就能够用了。

nav 使用注意:

  1. 用在整个页面的主要导航部分上,不合适就不要用 nav 元素;

aside 元素

aside 元素标签用来表示当前页面或文章的附属信息部分,可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav 元素组,以及其他类似的有别与主要内容的部分。

<article>

  <h1>前端技术</h1>
  <p>前端技术包括:HTML、CSS、JavaScript等...</p>

  <aside>
    <dl>
      <dt>HTML</dt>
      <dd>HTML 是用于描述网页文档的一种超文本标记语言。</dd>
    </dl>
  </aside>

</article>

aside 使用注意:

  1. 被包含在 article 元素中作为主要内容的附属信息部分,其中的内容可以是与当前文章有关的引用、词汇列表等。
  2. 在 article 之外使用,作为页面或站点全局的附属信息部分;最典型的形式是侧边栏(sidebar),其中的内容可以是友情链接、附属导航或广告单元等。

footer 元素

footer 元素代表“网页”或“section”的页脚,通常含有该节的一些基本信息,譬如:作者,相关文档链接,版权资料。如果 footer 元素包含了整个节,那么它们就代表附录,索引,提拔,许可协议,标签,类别等一些其他类似信息。

footer 示例代码:

<footer>
  <p>版权:cssue.com</p>
</footer>

footer 使用注意:

  1. 可以是“网页”或任意“section”的底部部分;
  2. 没有个数限制,除了包裹的内容不一样,其他跟 header 类似;

使用 CSS3 Media Queries 实现网页自适应

当今银屏分辨率从 320px (iPhone) 到 2560px (大屏显示器) 或者更大。人们也不再仅仅用台式机来浏览网页,现在有手机,平板电脑等等。所以传统的固定宽度设计形式将不再是个最佳选择,网页设计需要有自适应性。网页的布局需要能够根据不同的分辨率和设备来自动调整,以达到到最佳显示效果。接下来会展示如何运用 HTML5 和 CSS3 来设计一个自适应网页。

效果预览 代码下载

先看看它的效果

在开始之前,点击最终预览来看看它的效果。改变浏览器的宽度,你将会看到页面布局会跟着自动改变。

overview

概述

当屏幕分辨率大于 1024px 时,网页宽度将会是 980px 。用 CSS3 媒体查询(Media query)来检验屏幕分辨率,如果小于 980px ,页面宽度将会用自适应来取代固定宽度;如果小于 650px ,主题和边栏(content container and sidebar)将会撑满屏幕并一列显示。

design-overview

HTML 代码

以下只是代码的主题结构,我用了 “pagewrap” 容器封装 “header”, “content”, “sidebar”, 和 “footer” together.

<div id="pagewrap">
  <header id="header">
    <hgroup>
      <h1 id="site-logo"> Demo </h1>
      <h2 id="site-description"> Site Description </h2>
    </hgroup>
    <nav>
      <ul id="main-nav">
        <li><a href="#"> Home </a></li>
      </ul>
    </nav>
    <form id="searchform">
      <input type="search" />
    </form>
  </header>
  <div id="content">
    <article> blog post </article>
  </div>
  <aside id="sidebar">
    <section> widget </section>
  </aside>
  <footer id="footer"> footer </footer>
</div>

HTML5.js

请注意上面我用了 html5 ,但低于 IE9 版本 IE 浏览器并不支持<header>, <article>, <footer>, <figure>等 html5 标签,现在用 js 脚本来让它们支持。

<!--[if lt IE 9]>
    <script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

CSS

把 HTMl5 元素定义成块(display: block;)

下面将会用 CSS 把 HTML5 元素 (article, aside, figure, header, footer等) 定义成块。

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

主体结构的 CSS 样式

“pagewrap” 容器宽度为 980px “header” 高度为 160px ”content” 容器宽 600px 且向左浮动,边栏 ”sidebar” 宽 280px 并向右浮动。

#pagewrap {
    margin: 0 auto;
    width: 980px;
}
#header {
    height: 160px;
}
#content {
    float: left;
    width: 600px;
}
#sidebar {
    float: right;
    width: 280px;
}
#footer {
    clear: both;
}

第一步效果预览

第一步演示:点击我。注意现在还不能自适应,改变浏览器宽度后网页结构并不会跟着改变。

CSS3 媒体查询(CSS3 Media Query)

媒体查询脚本(Media Queries Javascript)

IE8 或者更低的版本不支持 CSS3 媒体查询,但通过添加脚本 css3-mediaqueries.js 来实现这一功能。

<!--[if lt IE 9]>
    <script type="text/javascript" src=”http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”></script>
<![endif]-->

媒体查询 CSS(Media Queries CSS)

为媒体查询创建新的 CSS 样式表,媒体查询如何工作请查看我以前的教程(media queries

<link href="media-queries.css" rel="stylesheet" type="text/css" />

分辨率小于 980px (流动布局)

当屏幕分辨率小于980px时,以下规则将会执行:

pagewrap = 宽 95%
content = 宽60%
sidebar = 宽 30%

@media screen and (max-width: 980px) {
    #pagewrap {
        width: 95%;
    }
    #content {
        padding: 3% 4%;
        width: 60%;
    }
    #sidebar {
        width: 30%;
    }
    #sidebar .widget {
        margin-bottom: 10px;
        padding: 8% 7%;
    }
}

分辨率小于 650px (一列布局)

当屏幕分辨率小于 650px 时,以下规则将会执行:

header =宽度为自动(auto)
searchform =搜索框距顶部 5px (re-position the searchform to 5px top)
main-nav = 静态布置
site-logo = 静态布置
site-description = 静态布置
content = 宽度为自动并取消浮动
sidebar = 宽度为 100% 并取消浮动

@media screen and (max-width: 650px) {
    #header {
        height: auto;
    }
    #searchform {
        position: absolute;
        right: 0;
        top: 5px;
    }
    #main-nav {
        position: static;
    }
    #site-logo {
        margin: 15px 100px 5px 0;
        position: static;
    }
    #site-description {
        margin: 0 0 15px;
        position: static;
    }
    #content {
        float: none;
        margin: 20px 0;
        width: auto;
    }
    #sidebar {
        float: none;
        margin: 0;
        width: 100%;
    }
}

分辨率小于 480px

下面是小于 480px 时的 CSS 规则,主要针对 iPhone.

html = 取消文字尺寸样式。默认情况下 iPhone 会自动调整到适合,你可以通过添加 ” -webkit-text-size-adjust: none;” 来取消自动调整。
main-nav = 文字尺寸为 90%

@media screen and (max-width: 480px) {
    html {
        -webkit-text-size-adjust: none;
    }
    #main-nav a {
        font-size: 90%;
        padding: 10px 8px;
    }
}

图片的灵活显示

为了让图片显示更加灵活,只需设置 max-width:100% 和 height:auto 然而 max-width:100% 和 height:auto 在IE7中运行,但不能在 IE8 中运行(诡异的 BUG 啊),所以需要为 IE8 添加 width:auto\9

img {
    height: auto;
    max-width: 100%;
    width: auto\9; /* ie8 */
}

嵌入类视频的灵活显示

为了让嵌入视频显示更加灵活,需要用上面同样的方法。不知道是什么原因, max-width:100% (仅仅是视频时)不能被 Safari 识别,此时要用 width:100% 代替

.video embed,
.video object,
.video iframe {
    height: auto;
    width: 100%;
}

初始化 meta 标签 Initial Scale Meta Tag (iPhone)

默认情况下,iPhone 的 Safari 浏览器会自动缩小页面来显示,下面来使用 meta 标签让网页字节按 CSS 样式显示。

<meta name="viewport" content="width=device-width; initial-scale=1.0" />

最终预览

改变你的浏览器宽度将会看到媒体查询让版式的变化,别忘了在其他设备上检验这一效果。

overview

原文:Responsive Design with CSS3 Media Queries

三步完成自适应网页设计

自适应网页设计近来很流行,如果你接触比较少请参见 responsive sites。当然,对一个新手来说可能听起来有点复杂,其实它比你想象的简单多了。这里是一个快速教程,通过学习你会自适应网页和 media queries 的基本原理(前提你有 css 基础)。

Step 1:Meta 标签(查看演示:demo

为了适应屏幕,不少移动浏览器都会把 HTML 页面置于较大视口宽度(一般会大于屏幕宽度),你可以使用 viewport meta 标签来设定。以下 viewport meta 标签告诉浏览器视口宽度等于设备屏幕宽度,且不进行初始缩放:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

IE8 及其更低版本不支持 media query ,可以使用 media-queries.jsrespond.js 脚本实现支持。

<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

Step 2. HTML 结构

在这个例子中,页面布局包括 header,content,sidebar,和 footer。header 固定高度为180px,content 容器宽 600px,sidebar 宽 300px。

page-structure

Step 3. Media Queries

CSS3 media query 是自适应网页设计的关键,他就像高级语言里的 if 条件语句,告诉浏览器根据不同的视口宽度(这里等于浏览器宽度)来渲染网页。

如果视口宽度小于等于 980px,下面规则生效。

这里将容器像素宽度该用百分比,页面排版更加灵活。

980px-or-less

如果视口宽度小于等于 700px, 将 #content 和 #sidebar 宽度设为自动(auto width),并移除它的浮动属性(float),这样它会变成满版显示。

700px-or-less

当视口宽度小于等于 480px 时(如手机屏幕),将 #header 高度设为自动,h1 的字体大小设定为 24px,并隐藏 #sidebar。

480px-or-less

根据你的喜好,可以定义更多的 media queriey 条件。

原文:Responsive Design in 3 Steps

移动平台对 meta 标签的定义

下面介绍一些有关标记的例子及解释。

一、meta 标签分两大部分:HTTP 标题信息(http-equiv)和页面描述信息(name)。

1、http-equiv 属性的 Content-Type 值(显示字符集的设定)

说明:设定页面使用的字符集,用以说明主页制作所使用的文字语言,浏览器会根据此来调用相应的字符集显示 page 内容。

用法:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

注意:该 meta 标签定义了 HTML 页面所使用的字符集为 utf-8 ,就是万国码。它可以在同一页面显示中文简体、繁体及其它语言(如日文,韩文)等。

2、name 属性的 viewport 值(移动屏幕的缩放)

也就是可视区域。对于桌面浏览器,我们都很清楚 viewport 是什么,就是除去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域,这是真正有效的区域。由于移动设备屏幕宽度不同于传统 web,因此我们需要改变 viewport 值。

实际上我们可以操作的属性有 4 个:

width – // viewport 的宽度 (范围从 200 到 10,000,默认为 980 像素)
height – // viewport 的高度 (范围从 223 到 10,000 )
initial-scale – // 初始的缩放比例 (范围从 > 0 到 10)
minimum-scale – // 允许用户缩放到的最小比例
maximum-scale – // 允许用户缩放到的最大比例
user-scalable – // 用户是否可以手动缩放 (no,yes)

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

说明:

  • 强制让文档与设备的宽度保持 1:1 ;
  • 文档最大的宽度比列是1.0( initial-scale 初始刻度值和 maximum-scale 最大刻度值);
  • user-scalable 定义用户是否可以手动缩放( no 为不缩放),使页面固定设备上面的大小;

注意:实际测试中发现,有些安卓系统自带的浏览器并不支持这一条规则,能够对页面进行放大,一旦放大响应的 box 也随之放大,导致页面出现错乱问题,解决方法:定义页面的最小宽度

body {
    min-width: 320px;
}

3、name 属性的 format-detection 值(忽略页面中的数字识别为电话号码)

<meta name="format-detection" content="telephone=no" />

说明:

  • 使设备浏览网页时对数字不启用电话功能(不同设备解释不同,iTouch 点击数字为存入联系人,iPhone 为拨打电话),忽略将页面中的数字识别为电话号码。
  • 若需要启用电话功能将 telephone=yes 即可,若在页面上面有 Google Maps, iTunes 和 YouTube 的链接会在ios设备上打开相应的程序组件。

4、name 属性的 apple-mobile-web-app-capable 值(网站开启对 web app 程序的支持)

<meta name="apple-mobile-web-app-capable" content="yes" />

说明:

  • 网站开启对 web app 程序的支持。
  • 该 meta 可以看出内容为“苹果设备 web 应用程序 xx”,就是说该 meta 是专门定义 web 应用的。

5、name 属性的 apple-mobile-web-app-status-bar-style 值(改变顶部状态条的颜色)

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

说明:

  • 在 web app 应用下状态条(屏幕顶部条)的颜色;
  • 默认值为 default(白色),可以定为 black(黑色)和 black-translucent(灰色半透明);

注意:若值为“black-translucent”将会占据页面位置,浮在页面上方(会覆盖页面 20px 高度 iphone4 和 itouch4 的 Retina 屏幕为 40px )。

6、name 属性设置作者姓名及联系方式

<meta name="author" contect="liudanyun, liudy102@163.com" />

二、苹果 Web App 其他设置:

当然,配合 Web App 的 icon 和启动界面需要额外的两端代码进行设定,如下所示:

<link rel="apple-touch-icon-precomposed" href="iphone_logo.png" />

说明:这个 link 就是设置 Web App 的放置主屏幕上 icon 文件路径(图片四)。

使用:

  • 该路径需要注意的就是放到将网站的文档根目录下但不是服务器的文档的根目录。
  • 图片尺寸可以设定为 57*57(px)或者 Retina 可以定为 114*114(px),iPad 尺寸为 72*72(px)
<link rel="apple-touch-startup-image" href="logo_startup.png" />

说明:这个 link 就是设置启动时候的界面。

使用:

  • 放置的路径和上面一样。
  • 官方规定启动界面的尺寸必须为 320*640(px),原本以为 Retina 屏幕可以支持双倍,但是不支持,图片显示不出来。

如果对 Web App 的这两个 meta 还有不能详细理解的可以查看官方解释:Meta Tags

关于 link 方面还有更多的参数设置(例如:iPod、iPad、iPhone 不同尺寸不同图标),可以查看官方标准文档:Configuring Web Applications

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 chapters, 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 就是适用的。

<article>
  <hgroup>
    <h1>Apples</h1>
    <h2>Tasty, delicious fruit!</h2>
  </hgroup>
  <p>The apple is the pomaceous fruit of the apple tree.</p>
  <section>
    <h1>Red Delicious</h1>
    <p>These bright red apples are the most commonly found
      in many supermarkets.</p>
  </section>
  <section>
    <h1>Granny Smith</h1>
    <p>These juicy, green apples make a great filling for
      apple pies.</p>
  </section>
</article>

article

HTML Spec: “The article element 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 中是不是完整的。看这段内容脱离了所在的语境,是否还是完整的、独立的。

<article>
  <header>
    <h1>The Very First Rule of Life</h1>
    <time datetime="2009-10-09T15:28">~1 hour ago</time>
  </header>
  <p>If there's a microphone anywhere near you,
    assume it's hot and sending whatever you're
    saying to the world. Seriously.</p>
  <p>...</p>
  <footer> <a href="?comments=1">Show comments...</a> </footer>
</article>
<article>
  <header>
    <h1>The Very First Rule of Life</h1>
    <time datetime="2009-10-09T15:28">~1 hour ago</time>
  </header>
  <p>If there's a microphone anywhere near you,
    assume it's hot and sending whatever you're
    saying to the world. Seriously.</p>
  <p>...</p>
  <section>
    <h1>Comments</h1>
    <article>
      <footer>
        <p>Posted by: George Washington</p>
        <time datetime="2009-10-10T19:10">~1 hour ago</time>
      </footer>
      <p>Yeah!
        Especially when talking about your lobbyist friends!</p>
    </article>
    <article>
      <footer>
        <p>Posted by: George Hammond</p>
        <time datetime="2009-10-10T19:15">~1 hour ago</time>
      </footer>
      <p>Hey, you have the same first name as me.</p>
    </article>
  </section>
</article>

总结

div、section、article ,语义是从无到有,逐渐增强的。div 无任何语义,仅仅用作样式化或者脚本化的钩子(hook),对于一段主题性的内容,则就适用 section,而假如这段内容可以脱离上下文,作为完整的独立存在的一段内容,则就适用 article。原则上来说,能使用 article 的时候,也是可以使用 section 的,但是实际上,假如使用 article 更合适,那么就不要使用 section 。nav 和 aside 的使用也是如此,这两个标签也是特殊的 section,在使用 nav 和 aside 更合适的情况下,也不要使用 section 了。

对于 div 和 section、 article 以及其他标签的区分比较简单。对于 section 和 article 的区分乍看比较难,其实重点就是看看这段内容脱离了整体是不是还能作为一个完整的、独立的内容而存在,这里面的重点又在完整身上。因为其实说起来 section 包含的内容也能算作独立的一块,但是它只能算是组成整体的一部分,article 才是一个完整的整体。

原文:http://www.qianduan.net/

CSS3 PIE 让 IE6-8 支持部分 CSS3 新特性

CSS3 新增了不少实用功能,比如圆角、阴影、文字效果、渐变等,但比较纠结的是 IE6-8 还无法支持这些新特性,因为 IE 在国内还占据着相当大的市场份额,因此这个用 JS 编写的插件对国内开发人员来说是一个福音。本文将介绍 css3pie 的使用。

首先去官网下载 css3pie 插件,然后解压插件压缩包得到五个文件,其中有一个名字为 PIE.htc 的文件,这就是让 IE6-8 能够支持部分 CSS3 新特性的插件。将此文件上传至你站点所在的目录,文件路径可以自己设置。另外一个 PIE_uncompressed.htc 文件是未压缩的版本,如果懂得 JavaScript 的开发者还可以自行更改增强。PIE.php 文件是和 http 服务器设置问题导致无法使用 htc 的情况下才会用到,这时将 htc 文件和 PIE.php 文件放置在同一目录下,然后在具体的 CSS 条目下添加以下语句(具体用法参照下文):

#roundCorner {
    behavior: url(path/to/PIE.php);
}

一般情况下不需要 PIE.php 文件,只需要 PIE.htc 文件即可。

PIE.htc 的使用方法:

假设你已经创建了一个 html 文件,要对其中某个元素创建圆角效果,HTML Code:

<div id="roundCorner"></div>

在 CSS 文件中添加如下语句:

CSS Code:

#roundCorner {
    border: 1px solid #999;
    height: 100px;
    width: 60px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    behavior: url(path/to/PIE.htc);
}

上面的代码中,-webkit-border-radius 是用来兼容 Safari 和 Chrome 浏览器,-moz-border-radius 是用来支持 Firefox 浏览器。样式代码中的 behavior:url(path/to/PIE.htc); 是导入的 PIE 插件,该插件的路径应该是之前上传到服务器时所放置的路径。

这样,在 IE6-8 浏览,就能够正确显示 CSS3 的圆角了,这个 PIE 还可以支持其他一些优秀的 CSS3 特征,比如阴影、渐变等,具体信息请参考 官网 以及一些 CSS3 的用法参考。

HTML5 新标签让布局更有语义化

曾经,前端工程师经常会频繁的使用基于 table 的没有任何语义的布局。不过最终还是要感谢像 Jeffrey Zeldman 和 Eric Meyer 这样的思想革新者,聪明的前端工程师慢慢的接受了相对更语义化的 div 布局替代了 table 布局,并且开始调用外部样式表。但不幸的是,复杂的网页设计需要大量不同的标签结构代码,我们把它叫做 “div-soup” 综合症。也许你很熟悉下面的布局代码:

structure-div

尽管这有些勉强,但上面这个实例还是可以说明使用 HTML4 对一个复杂的设计进行代码化后依然过于臃肿(其实xHTML1.1也不过如此)。不过值得激动的是,HTML5 解决 “div-soup” 综合症并带给我们一套新的结构化元素。这些新的 HTML5 元素富有更细致的语义从而代替了那些毫无语义的 div 标签。下面是 HTML5 新标签布局的解决方案:

structure-html5

正如我们所见,HTML5 可以让我们用很多更语义化的结构化代码标签代替那些大量的无意义的 div 标签。这种语义化的特性不仅提升了我们网页的质量和语义,并且大量减少了曾经代码中用于 CSS 必须调用的 class 和 id 属性。

不过要在 IE 下使用这些语义化的标签这就需要 JS 来做兼容了。代码如下:

<!--[if lt IE 9]>
<script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

然后仍然需要对 IE 下的这部分标签重置 CSS 样式,CSS代码如下:

/* html5 Tags */
article,
aside,
figure,
footer,
header,
nav,
section {
    display: block
}

这样就在 IE 下显示正常了。

html5 十个常用的布局新标签简介:

  • <article> 标签定义外部的内容,可以是一篇新的文章。
  • <aside> 标签定义 article 以外的内容,aside 的内容可用作文章的侧栏。
  • <figcaption> 标签定义 figure 元素的标题。
  • <figure> 标签用于对元素进行组合,使用 figcaption 元素为元素组添加标题。
  • <footer> 标签定义 section 或 文档 的页脚。
  • <header> 标签定义 文档 的页眉。
  • <hgroup> 标签用于对 section 或 网页 的标题进行组合,使用 figcaption 元素为元素组添加标题。
  • <nav> 标签定义 导航链接 的部分。
  • <section> 标签定义文档中的节( section、区段 )。比如章节、页眉、页脚或文档中的其他部分。
  • <time> 标签定义日期或时间,或者两者。

参考:HTML5 Reference

让 IE 支持 HTML5 的新标签

自从 html5 能为我们的新网页带来更高效更洁净的代码而得到更多的关注,然而唯一能让 IE 识别那些新元素(如<article>)的途径是使用 html5 shiv ,感谢 remy sharp 为我们提供了这个迷你脚本来解决 IE 支持 html5 的问题。

html5.js 必须在页面 head 元素内调用(因为 IE 必须在元素解析前知道这个元素,所以这个 js 文件不能在页面底部调用)。

作者已经把 js 文件放在 Google code project 上并允许大家直接调用,当然,前提是你不在意调用额外的文件。

你可以使用 IE 条件注释来调用这个 js 文件,这样像 FireFox 等非 IE 浏览器就会忽视这段代码,也就不会有所谓的 http 请求了。下面这段代码仅会在 IE 浏览器下运行:

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

当然如果你不喜欢调用外网文件,你也可以下载下来上传到自己的服务器单独调用。

HTML5 新标签的用法与 HTML 4.0.1 之间的差异

HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准。它希望能够减少浏览器对于需要插件的丰富性网络应用服务(plug-in-based rich internet application,RIA),如 Adobe Flash, Microsoft Silverlight, 与 Sun JavaFX 的需求。

HTML 5 提供了一些新的元素和属性,反映典型的现代用法网站。其中有些是技术上类似 <div> 和 <span> 标签,但有一定含义,例如 <nav>(网站导航块)和 <footer>。这种标签将有利于搜索引擎的索引整理、小屏幕装置和视障人士使用。同时为其他浏览要素提供了新的功能,通过一个标准接口,如 <audio> 和 <video> 标记。

一些过时的 HTML 4 标记将取消,其中包括纯粹用作显示效果的标记,如 <font> 和 <center>,因为它们已经被 CSS 取代。还有一些透过 DOM 的网络行为(via)。下面我们来看一下 HTML 5 提供的一些新的标签用法以及和 HTML 4 的区别。

<article> 标签定义外部的内容。外部内容可以是来自一个外部的新闻提供者的一篇新的文章,或者来自 blog 的文本,或者是来自论坛的文本。亦或是来自其他外部源内容。

HTML5: <article></article>
HTML4: <div class="article"></div>

<aside> 标签定义 article 以外的内容。aside 的内容应该与 article 的内容相关。

HTML5: <aside></aside>
HTML4: <div class="aside"></div>

<audio> 标签定义声音,比如音乐或其他音频流。

HTML5: <audio src="xyz.ogg" autoplay controls></audio>
HTML4: 
<object type="application/ogg" data="xyz.ogg">
    <param name="src" value="xyz.ogg">
</object>

<canvas> 标签定义图形,比如图表和其他图像。

HTML5: <canvas id="box" width="250" height="250"></canvas>
HTML4 (closest equivalent): 
<object data="inc/hdr.svg" type="image/svg+xml" width="250" height="250"></object>

<command> 标签定义命令按钮,比如单选按钮、复选框或按钮。

HTML5: <command onclick="cut()" label="cut" />
HTML4: none

<datalist> 标签定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。datalist 及其选项不会被想显示出来,它仅仅是合法的输入值列表。请使用 input 元素的 list 属性来绑定 datalist。

HTML5: <datalist></datalist>
HTML4: see combobox

<details> 标签用于描述文档或文档某个部分的细节。

HTML5: <details></details>
HTML4: <dl class="details" style="display:hidden"></dl>

<embed> 标签定义嵌入的内容,比如插件。

HTML5: <embed data="flash.swf" width="300" height="200" type="application/x-shockwave-flash"></embed>
HTML4: <object data="flash.swf" width="300" height="200" type="application/x-shockwave-flash"></object>

<figure> 标签用于对元素进行组合。

HTML5: <figure></figure>
HTML4: <dl class="figure"></dl>

<header> 标签定义文档的页眉(介绍信息)。

HTML5: <header></header>
HTML4: <div class="header"></div>

<hgroup> 标签用于对网页或区段(section)的标题进行组合。

HTML5: <hgroup></hgroup>
HTML4: <div class="hgroup"></div>

<iframe> 标签创建包含另一个文档的行内框架。

HTML5: <iframe src="xiframe.htm"></iframe>
HTML4: <object type="text/html" data="xiframe.htm"></object>

<keygen> 标签定义生成密钥。

HTML5: <keygen>
HTML4: no equivalent

<mark> 标签定义带有记号的文本。请在需要突出显示文本时使用 <m> 标签。

HTML5: <mark></mark>
HTML4: <span class="mark"></span>

<menu> 标签定义菜单列表。当希望列出表单控件时使用该标签。

HTML5: <menu></menu>
HTML4: <ul class="menu"></ul>

<meter> 标签定义度量衡。仅用于已知最大和最小值的度量。

HTML5: <meter></meter>
HTML4: no equivalent

<nav> 标签定义导航链接的部分。

HTML5: <nav></nav>
HTML4: <ul class="nav"></ul>

<output> 标签定义不同类型的输出,比如脚本的输出。

HTML5: <output></output>
HTML4: <span class="output"></span>

<progress> 标签定义运行中的进度(进程)。可以使用 <progress> 标签来显示 JavaScript 中耗费时间的函数的进度。

HTML5: <progress></progress>
HTML4: no equivalent

<section> 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。

HTML5: <section></section>
HTML4: <div class="section"></div>

<source> 标签为媒介元素(比如 <video> 和 <audio>)定义媒介资源。

HTML5: <source>
HTML4: <param>

<time> 标签定义日期或时间,或者两者。

HTML5: <time></time>
HTML4: <span class="time"></span>

<video> 标签定义视频,比如电影片段或其他视频流。

HTML5: <video src="xyz.ogv" type="video/ogg"></video>
HTML4: 
<object type="video/ogg" data="xyz.ogv">
    <param name="src" value="xyz.ogv" />
</object>

原文:HTML 5 New Tags

各大浏览器对 CSS3 和 HTML5 的兼容速查表

支持 CSS3 和 HTML5 的浏览器越来越多,甚至包括最新版的 IE,当然,所谓支持仅仅是部分支持,因为 CSS3 和 HTML5 的 W3C 规范都尚未形成。如果你现在就希望使用 CSS3 和 HTML5 创建你的站点,至少要对各个浏览器对这两种新技术的支持情况有一个全面了解。

需要指出的是,即使同一个浏览器的同一个版本,在 Mac 和 Windows 两个平台,它们对 CSS3 和 HTML5 的支持也并不一致。本文是一份 Chrome, Safari, Firefox, Opera, IE 5 大浏览器,在 Mac 和 Windows 两个平台,对 CSS3 和 HTML5 各种功能的详细支持情况清单。

查看各大浏览器对 CSS3 和 HTML5 的兼容清单:

http://www.findmebyip.com/

目前,对 CSS3 和 HTML5 支持最好的是 Safari,Chrome 次之,Firefox 3.6 和 Opera 10.5 旗鼓相当,IE 家族最差。鉴于这种情况,假如你想使用这两项新技术创建一个先锋体验式站点,现在的 CSS3 和 HTML5 可以让你实现,假如你希望这个站点能被绝大多数人正常访问,现在还为时过早,折中的方案是,为不支持 CSS3 和 HTML5 某些功能的浏览器提供降级方案,当然,其中要涉及到很多问题,包括浏览器,版本,平台的探测,CSS Hack 等等大量工作,相信这是得不偿失的。