Unicode 是全世界通用的最大的字符集合，包含了各国各种各样的字符。由于字符数量巨大而且各种各样，所以输入法一般无法打出很多很特殊的 Unicode 符号。搜狗输入法可以打出一些基础的符。

在网页中，有时候我们会需要一些符号，例如：倒三角 ▼。如果要让网页显示这种符号，显然用字符的方式比较好，体积小到可以忽略不计同时还可以方便用 CSS 定义样式等。但是直接把这个倒三角复制进网页中的话，虽然可以，但是不合理，这时候我们就要用到对应图标的实体字符，例如通过查询可以看到倒三角对应的 Unicode HTML 代码为 & #9660 ; 将前面代码中的空格删掉，复制进 HTML 文件中就可以看到了。

当然，这个 HTML 文件必须保存为 UTF-8 编码，如果你看不懂，推荐这篇文章《网页编码就是那点事》。那么，我该从哪里寻找自己需要的符号呢？

搜索一下就可以看到很多相关内容，但是很多只是列了一部分，或者就是维基百科那样直接给出一个又长又丑的表格。在这里推荐一个网站 Unicode Character Table ，这个网站罗列了所有的 Unicode 字符，同时做了美化，当你点击某个字符的时候，会弹出字符序号和 HTML 实体字符，是不是很方便呢？马上收藏备用吧！网址：http://unicode-table.com

先简单的普及一下 Unicode 编码的基础知识，关于网页中的编码，详情请看 潜行者m 的文章：网页编码就是那点事。好了普及完毕，开始正文内容。

HTML 结构中的 id 和 class 属性，最重要的目的就是作为结构的标识，可以被 CSS 选择器和 JS 选择器获取，增加样式和行为。由于结构通常比较复杂，id、class 的命名就成了一个大问题。于是出现了很多种命名方案，什么驼峰命名法等等。此外还有很多团队规范，规定命名规则等等。

但是这些命名，通常都逃不过：数字、字母、下划线、横杠。虽然这些比较直观，但是会不会太枯燥？其实 HTML、CSS、JS 支持的命名字符，远不止这点，你可以使用 Unicode 编码的特殊字符来让你的命名变得丰富多彩。

Unicode 由于有很多存储空间，所以拿出了很多 Unicode 编码代表一些比较常用的“字符图像”。比较常见的是 copyright 的图标：©，这就是一个 Unicode 编码存储的图标。其他的各种字符：Ϭ、ϻ、Ѽ 等，都是 Unicode 编码的字符。而 HTML、CSS、JS 支持使用它们来做命名。所有的 Unicode 字符列表，请看这里：http://en.wikipedia.org/wiki/List_of_Unicode_characters

在使用之前，请先确保你理解 Unicode 等这些编码，你必须让你的文件保存成 UTF-8 等格式才能使用，否则可能会显示成乱码。

然后我做了一个 Demo 来做测试，Demo 中就使用特殊字符来命名，你可以在不同的测试环境浏览器进行测试，可以反馈一下看下有没有平台不支持。具体的代码不再贴出，请看 Demo 页面中代码。Demo 地址：http://www.qianxingzhem.com/demo/1927/

应用的话，以后代码就丰富多彩了哈哈。

HTML5 增加了很多语义化的标签，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>

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

在过去 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” />

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

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

参考文章和扩展阅读

• Cross browser compatible HTML5 videos
• WebM 格式百度百科
• HTML5 Video @w3schools