HTML5 标签 hgroup 已经被废除

HTML5 增加了很多语义化的标签,hgroup 就是其中一个,它用来表明标题的集合。如果有主标题、副标题,可以使用这个来包裹一下,一般比较常见的就是网站的标题和网站描述:网站标题和副标题常用 hgroup 包裹

但是这样做并不是太必要,而且还有一些麻烦。一般来说,很难有单纯的 hn 标题标签集合在一起,通常还包含一些其他内容,但是使用 hgroup 包裹的内容,必须是 hn 标题标签,否则不会通过 HTML5 验证。又有谁会为了这么一个增强语义性用处不大的标签专门去生成一堆 hn 标签?

然后好消息是,这个标签在最新的 HTML5.1 版中被废除了,以后可以不再用了。但是又面临了一些问题,如果我有类似这种 声明主标题和对应副标题说明 的需求,我应该怎样增强语义性?

W3 给了一些结构建议,查看原文请点击这里。下面引用原文然后用我自己的博客标题做一个例子。

用其他方法模拟 hgroup 的语义性

使用标点符号分割

最简单的方法就是使用标点符号分割主标题和副标题:

<h1>潜行者m: 关注前端开发热爱简约设计。</h1>

这种类型比较适合于文章标题,很显然不适合网站标题。

使用 span 标签标注副标题说明

<h1>潜行者m
   <span>关注前端开发热爱简约设计。</span>
</h1>

这种方式比上面好一点,但是感觉还是怪怪的,但是结构比较简单,如果不怕麻烦,推荐下面一种方法。

使用 header 标签包裹标题和描述

header 也是 HTML5 新增的语义性标签,用来表示头部信息,一般不会被废弃。我们可以这样做:

<header>
<h1>潜行者m</h1>
<p>关注前端开发热爱简约设计。</p>
</header>

强烈推荐这种写法,这样保证了语义性的同时,也保证了代码的整洁。

HTML5 video 跨浏览器兼容的方法

在过去 flash 是网页上最好的解决视频的方法,截至到目前还算是主流,像那些优酷之类的视频网站、虾米那样的在线音乐网站,仍然使用 flash 来提供播放服务。但是这种状况将会随着 HTML5 的发展而改变。就视频而言,HTML5 新增了 video 来实现在线播放视频的功能。

使用 HTML5 的 video 可以很方便的使用 JavaScript 对视频内容进行控制等等,功能十分强大,同时代码比较少加快加载速度。此外跨平台性比较好,特别是一些平板、手机等。例如苹果公司的产品不支持 flash 仅支持 HTML5 中的 video 功能。

但是 HTML5 的兼容性问题是个硬伤,我们可以在网页中使用 video 来播放视频,但使用早期浏览器的访问者可能无法正常观看这个视频。此外,由于视频编码器的历史渊源导致各种浏览器支持的视频格式不同。应对这些问题,想在网页中使用 HTML5 video 功能,可以按照下面三个步骤操作。

第一步:提前准备好多格式视频文件

由于编码器的版权问题,导致不同浏览器对视频格式的兼容性不同。目前没有一个视频格式兼容所有浏览器,唯一的解决方法就是把视频转换成多种格式。

首先要准备一个 mp4 格式的视频,可以在苹果设备中使用;其次要准备 ogv 格式的视频,用在火狐浏览器中;最后要准备一下 webm 格式的视频,这个可以用在谷歌浏览器等。webm 是谷歌提出的,开源、免费,很有可能成为兼容所有浏览器的视频格式。

准备多格式浏览器的麻烦之处在于转换格式。视频转换工具国内的功能比较少,转换格式可能没有上面后两个,而且质量良莠不齐,往往需要注册才能使用。推荐一个国外的工具 Online converter ,在线免费视频转换工具。甚至不用安装软件,直接选择相应的目标格式,然后上传视频,配置一下参数就可以转换出来了。没有合适工具的朋友,可以尝试一下。

第二步:编写对应 HTML5 video 代码

HTML5 中的 video 实际上就是一个简单的标签,包含了一些视频相关信息等。下面我直接给出具体代码,然后简单解释一下:

<video width=”800” height=”374”>
<source src=”my_video.mp4” type=”video/mp4” />
<source src=”my_video.ogv” type=”video/ogg” />
<source src=”my_video.webm” type=”video/webm” />
你浏览器不支持 video 功能,点击这里下载视频: <a href=”video.webm”&gt下载视频</a&gt.
</video>

video 标签表示这里是一个视频,width、height 属性分别表示这个视频内容的宽高(单位像素)。video 标签中可以包含 source 标签,source 标签用来表示引用的视频和视频的格式、类型。为了保证向下的兼容性,我们还在 video 标签中加了一句提示,这句话在支持 video 标签的浏览器中是不会显示的,如果不支持就会显示出来。这里,还增加了一个视频的下载地址,如果浏览器不支持,可以让用户选择下载下来看。

特别需要注意一点,你的主机必须能正确的处理这事些视频请求。确保你的主机被请求这些视频的时候会在 Content-Type 头发送正确的 MIME 类型。如果你不清楚,可以咨询一下主机服务商,也可以自己添加。如果主机支持 .htaccess ,可以在 .htaccess 文件中增加下面语句:

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

大体就是这样,比较简单,更加具体的关于 video 的使用方法,可以搜索一下,也可以见本文扩展阅读链接,在这里不再赘述。

第三步:为旧版浏览器做兼容

前面说过,如果浏览器不支持 video ,将会把 video 中的提示内容显示出来。那么对付老旧浏览器,我们可以用传统的 flash 来替换这个提示内容。这样,当浏览器不兼容 video 标签的时候,就会显示出 flash 版本的视频。例如:

<video width=”800” height=”374”>
<source src=”my_video.mp4” type=”video/mp4” />
<source src=”my_video.ogv” type=”video/ogg” />

&lt;object width="800" height="374" type="application/x-shockwave-flash" data="fallback.swf"&gt;
    &lt;param name="movie" value="fallback.swf" /&gt;
    &lt;param name="flashvars" value="autostart=true&amp;amp;file=video.flv" /&gt;
&lt;/object&gt;

</video>
直接按照原来正常的 flash 引入方法写进 video 标签中即可。这样,我们就实现了跨浏览器兼容的 video 功能使用。

参考文章和扩展阅读

使用 HTML5 正确合理的重构你的网页

这可能是我在建博之后到现在为止,写过的最长的一篇文章,不过也是在这个博客里面,文章最短的。什么意思呢?

这里的这篇文章,我就写这么几个字。但是这篇文章,我写了大约两天,包括构思,查阅资料,排版等等。

denis 的水煮鱼博客,不知道编辑器抽了风,编辑起来好麻烦。

好了,直接给出地址:http://fairyfish.net/article/designing-with-html5/ ,我懒得复制过来排版了。

article 元素与 section 元素区别详解

article 元素section 元素是 html5 中新增的两种元素,它们的功能与 div 是一样的,都是用来区分不同区域,它们的使用方法也相似,因此有很多朋友会将其混用。html 5 中之所以新增这两种元素,就是为了更好的描述文档的内容,所以它们之间肯定是有区别的。

article 元素

article 元素代表文档、页面或者应用程序中独立完整的可以被外部引用的内容。例如:博客中的一篇文章,论坛中的一个帖子或者一段浏览者的评论等。因为article元素是一段独立的内容,所以article元素中,通常包含头部(header元素)、底部(footer元素)。例如博客中的一篇文章的结构:

<article>
    <header>
        <h1>潜行者m的个人介绍</h1>
    </header>
    <p>潜行者m是一个男的中国人。。。。。</p>
    <footer>
        <p>潜行者m版权所有</p>
    </footer>
</article>

section 元素

section 元素用于对网站或者应用程序中页面上的内容进行分块。一个 section 元素通常由内容以及标题组成。例如:

<section>
    <h1>潜行者m的个人介绍</h1>
    <p>潜行者m是一个男的中国人。。。。。。</p>
</section>
从上例可以看出,**section 元素中,需要包含一个<hn>标题元素**,而一般不用包含头部(header元素)或者底部(footer元素)。通常用 section 元素为那些有标题的内容进行分段。 section 元素的作用,是对页面上的内容分块处理,例如对文章分段等,相邻的 section 元素的内容,应当是相关的,而不是像 article 那样独立。例如一篇文章:
<article>
    <header>
        <h1>潜行者m喜欢的科技公司</h1>
    </header>
    <p>本文中,潜行者m列举了一下他喜欢的科技公司。。</p>
    <section>
        <h2>google公司</h2>
        <p>著名的搜索引擎公司。。。</p>
    </section>
    <section>
        <h2>苹果公司</h2>
        <p>非常能创新的公司。。</p>
    </section>
    <footer>
        <p>版权所有,翻版不咎</p>
    </footer>
</article>
通过上面的例子,你应该能感受到 article 元素与 section 元素的区别。事实上 article 元素可以看做是特殊的 section 元素。article 元素更强调独立性、完整性,section 更强调相关性。 ## 一个比较完整的例子
<article>
    <header>
         <h1>潜行者m的个人介绍</h1>
    </header>
    <p>潜行者m是一个中国男人,是一个帅哥。。。。</p>
    <section>
        <h2>评论</h2>
        <article>
            <h3>评论者:潜行者n</h3>
            <p>确实,m同学真的很帅</p>
        </article>
        <article>
            <h3>评论者:潜行者a</h3>
            <p>M今天吃药了没?</p>
        </article>
    </section>
</article>

article、section 与 div 的区别

既然 article、section 是用来划分区域的,又是html 5的新元素,那么我可不可以用article、section来取代div,用来布局网页呢?如果你真打算这样做,那么你就像使用ul来打造表格(table)一样愚蠢。div的用处就是用来布局网页,划分大的区域,只是html 4中,只有div、span来划分区域,所以我们就习惯性的把div当成了一个容器。而html 5改变了这个,它让div的工作更纯正。div就是用来布局大块,在不同的内容块中,我们按照需求添加 article、section 等内容块,并且显示其中的内容,这样才是合理的使用这些元素。