html5 canvas 提供了绘制一系列曲线的函数。如下：
1、如果我们需绘制更加复杂的曲线路径，我们或许该用到贝塞尔或者2次方程曲线。
quadraticCurveTo(cp1x, cp1y, x, y) bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
两种曲线有何区别？我们可以参看一下右边这张图，2种曲线都有一个起点和终点（blue point），但是贝塞尔曲线仅有一个“control point”（red point），2次曲线则有2个。
两个方法中的x和y参数都为曲线的终点坐标，cp1x和cp1y为第一control point的坐标，cp2x和cp2y为2次曲线的第二控制点。
熟 练运用2次曲线和贝塞尔曲线进行路径绘制，是一件蛮有挑战性的工作，因为它不像某些矢量绘图软件，比如ADOBE Illustrator等具有直观的视觉反馈，所以这使得我们在绘制一些复杂的曲线时会遇到一点小困难，不过如果你有耐心和时间的话，你肯定能绘制出许多 复杂的曲线来。
二次曲线示例：
// Quadratric curves example ctx.beginPath(); ctx.moveTo(75,25); ctx.quadraticCurveTo(25,25,25,62.5); ctx.quadraticCurveTo(25,100,50,100); ctx.quadraticCurveTo(50,120,30,125); ctx.quadraticCurveTo(60,120,65,100); ctx.quadraticCurveTo(125,100,125,62.5); ctx.quadraticCurveTo(125,25,75,25); ctx.stroke();
贝塞尔曲线示例：
// Bezier curves example ctx.beginPath(); ctx.moveTo(75,40); ctx.bezierCurveTo(75,37,70,25,50,25); ctx.bezierCurveTo(20,25,20,62.5,20,62.5); ctx.bezierCurveTo(20,80,40,102,75,120); ctx.bezierCurveTo(110,102,130,80,130,62.5); ctx.bezierCurveTo(130,62.5,130,25,100,25); ctx.bezierCurveTo(85,25,75,37,75,40); ctx.fill();
2、如果要创建一个弧形的画布，我们可以使用 arc() 方法。
语法：arc(定义一个中心点，半径，起始角度，结束角度，和绘图方向：顺时针或逆时针)
代码：
- context.arc(centerX, centerY, radius, startingAngle, endingAngle, antiClockwise);
HTML5 Canvas Arc 例子：
<!DOCTYPE HTML>
<html>
<head>
<title>html5 canvas Arc</title>
<style>
body {margin: 0px;padding: 0px;}
#myCanvas {border: 1px solid #9C9898; margin:0 auto;margin-top:200px; margin-left:100px;}
</style>
<script>
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 288;
var centerY = 160;
var radius = 75;
var startingAngle = 1.1 * Math.PI;
var endingAngle = 1.9 * Math.PI;
var counterclockwise = false;
context.arc(centerX, centerY, radius, startingAngle, endingAngle, counterclockwise);
context.lineWidth = 15;
context.strokeStyle = "black"; // line color
context.stroke();
};
</script>
</head>
<body>
<canvasid="myCanvas"width="578"height="200">
</canvas>
</body>
</html>
HTML5 Canvas Arc 说明：
看看上图中的外观 。弧没有超过部分的一个假想的圆的周长 。这个虚构的循环可以被定义centerX，centerY，和半径。
接下来，我们可以定义沿所定义的虚圆的周长有两个点的弧本身startingAngle和endingAngle。这两个角度定义的弧度和形式来自圆心和虚线相交的弧线，我们希望创建两端。
弧方法的最后一个参数是逆时针，这是一个可选的参数，它定义的两个结束点之间的 ARC路径的方向。除非另有规定，这种说法是默认为false，这将导致顺时针要绘制弧。
如果向您的服务器发出了某项请求要求显示您网站上的某个网页（例如，当用户通过浏览器访问您的网页或在 Googlebot 抓取该网页时），那么，您的服务器会返回 HTTP 状态代码以响应该请求。
此状态代码提供了有关请求状态的信息，且为 Googlebot 提供了有关您网站和请求的网页的信息。
一些常见的状态代码为：
- 200 - 服务器成功返回网页
- 404 - 请求的网页不存在
- 503 - 服务器暂时不可用
以下提供了 HTTP 状态代码的完整列表。点击链接可了解详细信息。您也可以访问有关 HTTP 状态代码的 W3C 页来了解详细信息。
1xx（临时响应）
用于表示临时响应并需要请求者执行操作才能继续的状态代码。
| 代码 | 说明 |
|---|---|
| 100（继续） | 请求者应当继续提出请求。服务器返回此代码则意味着，服务器已收到了请求的第一部分，现正在等待接收其余部分。 |
| 101（切换协议） | 请求者已要求服务器切换协议，服务器已确认并准备进行切换。 |
2xx（成功）
用于表示服务器已成功处理了请求的状态代码。
| 代码 | 说明 |
|---|---|
| 200（成功） | 服务器已成功处理了请求。通常，这表示服务器提供了请求的网页。如果您的 robots.txt 文件显示为此状态，那么，这表示 Googlebot 已成功检索到该文件。 |
| 201（已创建） | 请求成功且服务器已创建了新的资源。 |
| 202（已接受） | 服务器已接受了请求，但尚未对其进行处理。 |
| 203（非授权信息） | 服务器已成功处理了请求，但返回了可能来自另一来源的信息。 |
| 204（无内容） | 服务器成功处理了请求，但未返回任何内容。 |
| 205（重置内容） | 服务器成功处理了请求，但未返回任何内容。与 204 响应不同，此响应要求请求者重置文档视图（例如清除表单内容以输入新内容）。 |
| 206（部分内容） | 服务器成功处理了部分 GET 请求。 |
3xx（已重定向）
要完成请求，您需要进一步进行操作。通常，这些状态代码是永远重定向的。Google 建议您在每次请求时使用的重定向要少于 5 个。您可以使用网站管理员工具来查看 Googlebot 在抓取您已重定向的网页时是否会遇到问题。诊断下的抓取错误页中列出了 Googlebot 由于重定向错误而无法抓取的网址。
| 代码 | 说明 |
|---|---|
| 300（多种选择） | 服务器根据请求可执行多种操作。服务器可根据请求者 (User agent) 来选择一项操作，或提供操作列表供请求者选择。 |
| 301（永久移动） | 请求的网页已被永久移动到新位置。服务器返回此响应（作为对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。您应使用此代码通知 Googlebot 某个网页或网站已被永久移动到新位置。 |
| 302（临时移动） | 服务器目前正从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。此代码与响应 GET 和 HEAD 请求的 301 代码类似，会自动将请求者转到不同的位置。但由于 Googlebot 会继续抓取原有位置并将其编入索引，因此您不应使用此代码来通知 Googlebot 某个页面或网站已被移动。 |
| 303（查看其他位置） | 当请求者应对不同的位置进行单独的 GET 请求以检索响应时，服务器会返回此代码。对于除 HEAD 请求之外的所有请求，服务器会自动转到其他位置。 |
| 304（未修改） |
自从上次请求后，请求的网页未被修改过。服务器返回此响应时，不会返回网页内容。 如果网页自请求者上次请求后再也没有更改过，您应当将服务器配置为返回此响应（称为 If-Modified-Since HTTP 标头）。由于服务器可以告诉 Googlebot 自从上次抓取后网页没有更改过，因此可节省带宽和开销 。 |
| 305（使用代理） | 请求者只能使用代理访问请求的网页。如果服务器返回此响应，那么，服务器还会指明请求者应当使用的代理。 |
| 307（临时重定向） | 服务器目前正从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。此代码与响应 GET 和 HEAD 请求的 301 代码类似，会自动将请求者转到不同的位置。但由于 Googlebot 会继续抓取原有位置并将其编入索引，因此您不应使用此代码来通知 Googlebot 某个页面或网站已被移动。 |
4xx（请求错误）
这些状态代码表示，请求可能出错，已妨碍了服务器对请求的处理。
| 代码 | 说明 |
|---|---|
| 400（错误请求） | 服务器不理解请求的语法。 |
| 401（未授权） | 请求要求进行身份验证。登录后，服务器可能会返回对页面的此响应。 |
| 403（已禁止） | 服务器拒绝请求。如果在 Googlebot 尝试抓取您网站上的有效网页时显示此状态代码（您可在 Google 网站管理员工具中诊断下的网络抓取页面上看到此状态代码），那么，这可能是您的服务器或主机拒绝 Googlebot 对其进行访问。 |
| 404（未找到） |
服务器找不到请求的网页。例如，如果请求是针对服务器上不存在的网页进行的，那么，服务器通常会返回此代码。 如果您的网站上没有 robots.txt 文件，而您在 Google 网站管理员工具"诊断"标签的 robots.txt 页上发现此状态，那么，这是正确的状态。然而，如果您有 robots.txt 文件而又发现了此状态，那么，这说明您的 robots.txt 文件可能是命名错误或位于错误的位置。（该文件应当位于顶级域名上，且应当名为 robots.txt）。 如果您在 Googlebot 尝试抓取的网址上发现此状态（位于"诊断"标签的 HTTP 错误页上），那么，这表示 Googlebot 所追踪的可能是另一网页中的无效链接（旧链接或输入有误的链接）。 |
| 405（方法禁用） | 禁用请求中所指定的方法。 |
| 406（不接受） | 无法使用请求的内容特性来响应请求的网页。 |
| 407（需要代理授权） | 此状态代码与 401（未授权）类似，但却指定了请求者应当使用代理进行授权。如果服务器返回此响应，那么，服务器还会指明请求者应当使用的代理。 |
| 408（请求超时） | 服务器等候请求时超时。 |
| 409（冲突） | 服务器在完成请求时发生冲突。服务器必须包含有关响应中所发生的冲突的信息。服务器在响应与前一个请求相冲突的 PUT 请求时可能会返回此代码，同时会提供两个请求的差异列表。 |
| 410（已删除） | 如果请求的资源已被永久删除，那么，服务器会返回此响应。该代码与 404（未找到）代码类似，但在资源以前有但现在已经不复存在的情况下，有时会替代 404 代码出现。如果资源已被永久删除，那么，您应当使用 301 代码指定该资源的新位置。 |
| 411（需要有效长度） | 服务器不会接受包含无效内容长度标头字段的请求。 |
| 412（未满足前提条件） | 服务器未满足请求者在请求中设置的其中一个前提条件。 |
| 413（请求实体过大） | 服务器无法处理请求，因为请求实体过大，已超出服务器的处理能力。 |
| 414（请求的 URI 过长） | 请求的 URI（通常为网址）过长，服务器无法进行处理。 |
| 415（不支持的媒体类型） | 请求的格式不受请求页面的支持。 |
| 416（请求范围不符合要求） | 如果请求是针对网页的无效范围进行的，那么，服务器会返回此状态代码。 |
| 417（未满足期望值） | 服务器未满足"期望"请求标头字段的要求。 |
5xx（服务器错误）
这些状态代码表示，服务器在尝试处理请求时发生内部错误。这些错误可能是服务器本身的错误，而不是请求出错。
| 代码 | 说明 |
|---|---|
| 500（服务器内部错误） | 服务器遇到错误，无法完成请求。 |
| 501（尚未实施） | 服务器不具备完成请求的功能。例如，当服务器无法识别请求方法时，服务器可能会返回此代码。 |
| 502（错误网关） | 服务器作为网关或代理，从上游服务器收到了无效的响应。 |
| 503（服务不可用） | 目前无法使用服务器（由于超载或进行停机维护）。通常，这只是一种暂时的状态。 |
| 504（网关超时） | 服务器作为网关或代理，未及时从上游服务器接收请求。 |
| 505（HTTP 版本不受支持） | 服务器不支持请求中所使用的 HTTP 协议版本。 |
一、我之前介绍过的三角实现效果回顾
这里所说的三角效果之等腰直角三角形效果（等边三角形有现成字符实现，没什么好说的；还有图片实现三角众人皆知，不予以说明）：
1. 字符实现三角效果
关于字符实现三角我早在09年的时候就介绍了：使用字符实现兼容性的圆角尖角效果。一转眼两年过去了，这个技术开始被越来越多的人所熟知。使用的字符是正棱形“◆”字符，编码表示为◆ 。
需要一定的裁剪，在极少数情况下，在FireFox浏览器下，棱形“◆”字符的字符显示会有偏差（阳痿体积小）。
根据自己的实践，借助CSS3的transform旋转和IE的旋转滤镜可以比较简单地使用单标签实现上下左右各个方向还算兼容的效果。
您可以狠狠地点击这里：字符实现各个方向等腰直角三角demo
此方法实现的好处是三角颜色控制方便。不足在于不同浏览器下的对齐等有差异，需要使用hack控制。且大小控制不灵活。
2. CSS border实现三角
CSS border生成三角在2010年5月份的时候也专门介绍过：CSS border三角、圆角图形生成技术简介。后来因淘宝UED博客的再次介绍而使该技术被很多同行所熟知。
您可以狠狠地点击这里：CSS border下各方向等腰直角三角demo
CSS border实现三角好处在于兼容性不错，再古怪的浏览器都不会出现显示问题。不足在于颜色和三角尺寸的控制不方便。
二、三角生成新法@font-face
技术的发展使得一些效果的实现有了新的解决方案。比如等腰直角三角形状的实现。我们可以借助CSS3 @font-face属性实现。
您可以狠狠地点击这里：@font face各方向等腰直角三角demo
CSS相关代码如下：
@font-face{
font-family: web;
src: url(web-webfont.eot); /* IE */
}
@font-face {
font-family: web;
src: url(web-webfont.ttf);
}
.font_cor {
font-family: 'web';
}
HTML代码如下：
<span class="font_cor">T</span> <span class="font_cor">R</span> <span class="font_cor">B</span> <span class="font_cor">L</span>
代码一出，可能会听到一些唏嘘的声音，啧啧，调用一个字体文件，产生了一个请求，还不如直接调用图片呢。
确实，相对于字符法和CSS border法，@font-face法实现三角会多一个服务器请求，但是，权衡其带来的好处，这个不足可以完全秒掉。@font-face方法实现三角的好处在于：颜色随意控制，大小随意控制，与文字天然对齐（因为其本身就是文字），可以使用CSS3的文字阴影，文字渐变等效果。而颜色、文字大小和文字阴影都是可以被继承的。因此@font-face方法实现的三角具有史无前例的可扩展性和低维护性。
还是上面的那个demo，您可以试着改变三角下面下拉框的内容，您会发现，三角大小颜色很轻松很自然地改变了。
三、我该如何使用？
首先是字体的下载(右键[目标|链接]另存为)：web-webfont.eot(2.94K) 和 web-webfont.ttf(2.75K)。
放在页面同一根目录下（貌似不能跨域），CSS写法就如同上面展示的代码一样。IE虽然很早就支持@font-face属性，但是，毕竟不是来自W3C标准，用法上与现代浏览器还是有些差异的，例如只支持.eot格式字体，多个src不能用逗号分隔写在一起（这是为何@font-face两个部分书写的原因）。
HTML部分，向上的三角对应大写字母T(top)，依次，右三角对应R(right)，向下三角对应B(bottom)，左向三角对应L(left)。
大家都是聪明人，就不多说了哈。
四、关于web-webfont.tff等字体的由来
细心的你可能发现了，本文demo所使用的名为”web-webfont“的字体大小不超过3K，对于一个字体而言，是相当相当小的，如何做到的呢？这东西是怎么出来的呢？
如果您没有阅读过前面一篇文章：“fontforge制作自定义字体”建议您先看一下。下面有些内容直接与前文相关联。
webdings字体中的三角
我们电脑上基本上都有这么一个字体：webdings.ttf。这个是个很有意思的字体，该字体中1~9或是a~z这些字符对应的不是中规中矩的字符，而是各式各样的图案。什么地球啊，火车头啊，外星人脸谱，眼睛，耳朵啊，杂七杂八，五花八门。这些图案，我个人觉得在web页面制作中鸡鸡用都没有。不过，有几个图案让我眼前一亮，什么图案呢？当当当当，就是下图所示的这几个三角图案——标准的等腰直角三角形图案：
就跟前文处理webdings字体中的电话图案一样，我们使用fontforge新建个空白字体文件，把这四个三角图形来个移花接木，然后保存为web.ttf文件供我们使用@font-face调用。
兼顾IE浏览器
如果是做针对Android和iphone的手机页面开发，到上面为止，我们直接就可以关电脑去黄浦江钓鱼了。但是，对于PC，我们必须兼顾IE浏览器，于是，还要面对电脑屏幕一会儿……
//zxx: ……………………看微博ing……………………………………
继续，熟悉@font-face熟悉的同行应该知道IE浏览器只能认识.eot格式的字体，但是fontforge软件无法生成该格式的字体，那该怎么办呢？你猜！(just a joke, ^_^)
有些站点提供字体格式在线转换的功能，例如fontsquirrel，如下地址访问：http://www.fontsquirrel.com/fontface/generator
进入页面后，类似下图所示的操作：
1. 点击“Add Fonts”按钮添加上面偶们保存的web.ttf字体
2. 选择后即上传，然后选中版权OK的复选框，点击下面的按钮下载
3. 然后站点会打包生成一系列的字体相关的zip文件，让你下载
4. 解压会会发现多种格式的字体，像.svg, .woff, .eot等，根据我的测试，貌似FireFox, Chrome, Opera浏览器都支持.woff格式，但是貌似都不鸟.svg，至于.svg格式字体究竟哪些浏览器或是哪些情况支持还希望有这方面有过研究的人指点下。
同时会发现，相比原字体，转换的新字体的名称都统一加了”-webfont“这一部分，且体积略微增加了点（对比ttf格式可以发现，可能是修复了些问题）。
于是乎，我们就有了.eot格式的字体，自然IE浏览器下自定义字体的显示也不在话下的。
考虑到IE浏览器不支持类似下面的所src串联的写法，所以，需要两段@font-face引导的CSS代码：
@font-face {
font-family: web;
src: url(web-webfont.eot), url(web-webfont.ttf); /* IE不支持 */
}
@font-face{
font-family: web;
src: url(web-webfont.eot);
}
@font-face {
font-family: web;
src: url(web-webfont.ttf);
}
五、引导式的结尾
本文所用自定义字体其实只有4个三角字符，但是却命名为web，而不是triangle，是因为（如同CSS Sprite）我们可以集成其他相关的一些图形，或是从字体中拷贝，或是自己徒手画矢量图形等。
举个例子，WINGDNG3.ttf字体中上下左右的箭头也很有应用潜力：
我们是不是可以选几个靠谱的箭头放在web.ttf这个字体中呢？或是放wingding.ttf字体中的笑脸哭脸表情图形呢？
类似如此，久而久之，我们是不是就有了一个专属于自己的自定义的web开发制作专用字体图案库了呢（命名为web.ttf再合适不过了）？至于如何让团队各个成员熟知不同数值字母所对应的图形含义，可能就需要规范来确定咯！
全当抛砖引玉，您有更好的应用或是想法等等等等，可以以评论或其他形式进行交流。
1、看清真相
字符呢，我的理解是，跟页面上的汉字，英文字母啊等东东属于同样的东西。首先，字符图案是显示器用一个一个同样颜色的像素点组成的，不会有锯齿杂边的麻烦，如果您用photoshop制作一个小三角图片，说不定就会有可恶的白色杂边，而字符绝不会有这个问题。其次，字符本质上就是文字，受限于css的font-size属性，color属性等一切对文字起作用的属性。
2、使用字符代替图片的优点
①不用去作图抠图了，省了多少功夫啊！对于页面工程师来说，大大减轻了工作负担，要知道，与小于10像素的小图打交道很耗时间精力的。
②不用担心杂边的问题了，字符都是纯色的像素点，想出现杂边都难。
③容易控制！要想字符图案变大，font-size设大的就行了，要变颜色，使用color就可以了。所以呢，字符很乖很好控制滴。要是图片，你让他变个色试试看，你不是刘谦，你也不是哈里比特，所以你不行的。
④页面加载大小变小了。学计算机的应该都知道，一个英文字符一字节，一个中文字符两字节。虽然我不知道形色各异的字符们是爱国之士还是媚外之族，但不管怎样，最多两字节（单位b），要是图片的话，虽然我没有验证过，但是按照经验来讲，应该比字符占用空间大吧。
⑤理论上，页面链接请求少了。为何称理论上呢，因为实际上，图片呢都是整合到一张图片上的(css Sprite)，所以即使少了一张小图，整个页面请求图片的次数还是不变的。但要是这张小小的图片是独立的呢，那不久少了一次图片请求了吗？那服务器可就happy了！
3、字符的缺陷
①不同浏览器下的表现。
现在假设IE浏览器代表中国，Firefox浏览器代表韩国。中国某女性(♀)去了趟韩国，结果相貌另外一个样子了。术语为：有些字符在不同浏览器下的表现不一致。这类不一致分为两类，一类不一样是由于整容，换了张脸，这个没得救了，想回到过去比叫林志玲给您捶背还难；还有一类是美容了，使用了香奈儿或是雅诗兰黛的化妆品保养了个把月，结果芙蓉姐姐大变身，丑小鸭变美小鸭，那还有得救，让其做两个月程序员，保证回到从前。做程序员只是玩笑性质的比喻，实际上是通过设定字体(font-family)达到表现的一致，这个本文后面会说到。
②占据大小定位等比较难以控制。
字符本质上不同于图片，没有明确的高宽，如果对页面上文字的特性了解不够，想实现精确的且兼容性的定位麻烦不小。还有就是字符对页面的编码方式，何种字体敏感。比如说有些字符在gb3212中文编码下显示良好，但是在utf-8编码下就是个方框框——乱码；在宋体下显示不错，在其他字体下就是另外一种样子。
③无法实现渐变效果。
三、字符与字体关系的一些例子
在demo页面的第一部分就展示了本文主体相关的可能会使用的一些字符在常用字体下的一些表现。下面这张图片就展示具有代表性字符差异，其差异的产生是由于字体的不同以及浏览器的不同，然而万幸的是我们通过尝试不同的字体可以得到兼容性的表现。
字符在不同字体以及不同浏览器下的差异
四、利用字符实现圆角矩形以及尖角效果
要想使用字符实现圆角或是尖角效果，以下一些字符可以拿来使用：
左右方向的尖角“＜＞”；上下方向尖角“∧∨”；实体尖角“► ◄ ▲▼”；实体圆：“●”；空心圆“○”；四分之一空心圆“╰ ╯╭ ╮”以及正棱形“◆”。
1、利用实体圆实现四个四分之一圆
实现四个四分之一圆是用字符实现圆角的前提。下图为IE6下实现的效果截图，其他浏览器下表现一致：
IE6实现的四分之一效果
原理简述：使用两层标签，外层限定四分之一的高宽大小以及溢出隐藏属性，内层通过margin定位，使得外层显示需要显示的四分之一区域。
2、利用四个四分之一圆实现圆角效果
下面为IE7下效果的截图（其他浏览器下表现一致，图略）：
原理简述：将上面实现的四个四分之一圆分别填充矩形的四个角就行了。注意一下IE6下的奇偶bug就可以了！代码参见本文尾部提供的源文件，或查看demo页面。
3、实现圆角+尖角的效果
实现其实很简单，就在在刚才实现的基础上添加向上的尖角字符，使用绝对定位到适当位置即可，结果如下图，截自Firefox浏览器，其他浏览器表现一致：
4、实际应用——实现新浪微博含尖角的双边框圆角矩形效果
下面展示的是新浪微博针对博文评论的含尖角的双边框圆角矩形对话框效果截图：
如果您使用过新浪微博，应该对上面的图效果比较熟悉。我想只要是做页面的，要想实现上面的效果，100%会使用图片的，显然是要图片的。然而，事实上，不用图片可以实现几乎一样的效果，而方法就是使用本文所反复讨论的——字符！这里我将使用字符以及css实现于此效果几乎一样的效果，没有一点点图片，纯粹的css，而且没有hack，兼容各个浏览器。先看我实现的终效果（截自chrome浏览器，其他浏览器一致）：
为避免篇幅冗余，此处的代码参见本文尾部提供的源文件。
我自己对字符实现的新浪围脖对话框效果的评价：
①就效果而言，圆角会让人感觉有些毛糙，这是不可避免的，纯色的像素点形成的圆角是这个样子的，图片做的圆角虽然看似圆滑，实际上是有杂边的，只是白色的杂边与背景色一致看不出来而已。
②技术小窍门：如果您在字符定位的时候，在不同浏览器下总是有偏差，您可以试试给字符定死一个高度或宽度，然后溢出隐藏，可以让定位更加准确，更加兼容，而不用去使用hack解决此问题。
③这里的尖角角度为90度，为一个直角，与part 3部分的60度尖角不同，所以这里用正菱形“◆”代替起初的正三角形字符“▲”。
④万物皆有利弊。这里使用字符实现效果，虽然少了图片，少了链接请求，大小也小了。但是在HTML代码以及css代码上的消耗就要增加。例如这里使用字符实现新浪围脖的对话框效果，虽然只有两层标签，但是总的标签数有10多个，css部分也有很多行。其实HTML代码多些还不是关键，关键是定位非常精细，对于新手而言是较难上手的，想广泛使用是不实际的。如果让我做选择的话，我觉得字符实现和图片实现综合各个方面上可以说是个平手。然而在实际项目中，我会综合这两者或使用其他技术实现同样的效果，例如圆角我会使用边框+margin实现，而尖角使用字符实现。所以，字符一定是有其应用前景的。
ps：友情提醒，不建议拿新浪微博的css及HTML做学习材料。其页面工程师的水平还不及一些中小网站，能够改进和优化的实在太多了！
五、结语
首先，表达下我的观点——字符真的是非常的实用的东西。是实现高质量，高优化页面的利器。当然，字符的使用要切合实际。不要为了使用字符而刻意将一些效果用字符实现。如果您不是为了写教程做演示，建议对字符的使用做斟酌，任何方法都有其优势和局限。
其次，字符的应用显然不止本文所说的圆角和尖角，火星字符其实是门博大精深的学问，其字符千奇百怪，各种样子的都有，您需要有开阔的思维，这是关键，要知道字符既是文字也是图形，久之，会从字符上找到自己独门的应用的。
最后，我还要表达我的另一个观点，想法思维比一项技术更实用，这好比授人渔而不是授人鱼道理一样。我希望看到这篇文章的人形成一种意识，字符是个比图片更加优化的页面元素，当你做页面时，可以把尝试用字符使用当作备用的方法之一。如果那样，我觉得我写这篇文章值得了。
（本篇完）
UI：
jquery UI（官方的UI插件，功能很多，但我只用少数几个）
对话框：
artDialog（很欣赏这个插件，又强大又美观）
jBox（继续国人的插件，就是皮肤稍微做的弱了点，功能上一点不输前两者）
lhgDialog（作者似乎和我同龄，挺不错的）
表单验证：
jquery-validate（这个就不用介绍了吧）
jQuery formValidator（作者也是园子里的人哦）
放大镜：
cloud zoom（这个效果炫）
图片查看：
jquery.fancybox（网站打开有点慢）
树状结构：
JQuery zTree（最近刚发现的，还是国人做的，看了demo演示，很强大，不过还没正式使用过）
JQuery Treeview（之前一直在用的，是老外的）
焦点图：
myFocus（又是一款国人的插件，花样很多，略有缺陷）
soChange（如果项目没特别要求，一般都用这个，简单易上手）
评分：
Tab：
idTabs（虽然自己也写了tab选项卡的插件，但在之前一直用的都是这个）
面包屑导航：
jBreadCrumb（IE6下似乎有点问题）
Tip：
分页：
IE6 ping背景
转自：http://www.cnblogs.com/hooray/archive/2011/06/05/2072985.html
效果，li内文字超出隐藏，不允许出现半个汉字，超出后仍显示new图片，小于宽度自动跟随,
div代码：
<div class="contenta_news">
<h2><a href="market?marketType=0"><img width="287" height="30" border="0" src="images/home_mlks.jpg"></a></h2>
<ul>
<li><a
title="1.7《每日经济新闻》引用北京美联市场研究部观点" href="">·<span
class="STYLE_ts2">1.7《每日经济新闻》引用北京美联市场研究部观点</span></a><
em><img src="images/new.gif"></em></li>
<li><a title="1.4“新浪二手房”发文引用北京美联观点" href="">·<span class="STYLE_ts2">1.4“新浪二手房”发文引用北京美联</span></a><em& gt;<img src="images/new.gif"></em></li>
<li><a title="12.30《每日经济新闻》引用北京美联市场研究部观点" href="">·<span class="STYLE_ts2">12.30《每日经济新闻》引用北京美《每日经济新闻》引用北京美</span><em& gt;<img src="images/new.gif"></em></a></li>
<li><a title="不受“限购”房价更低北京商改住楼盘大行其道" href="">·<span class="STYLE_ts2">不受“限购”房价更低北京商改住楼盘大</span></a></li& gt;
<li><a title="12.29《信报》引用北京美联观点" href="">·<span class="STYLE_ts2">12.29《信报》引用北京美联观点</span></a></li>
<li><a title="12.29《新报》引用北京美联观点" href="">·<span class="STYLE_ts2">12.29《新报》引用北京美联观点</span></a></li>
<li><a title="12.29《成报》引用北京美联观点" href="">·<span class="STYLE_ts2">12.29《成报》引用北京美联观点</span></a></li>
<li><a title="12.24《香港经济新闻》引用北京美联观点" href="">·<span class="STYLE_ts2">12.24《香港经济新闻》引用北京美</span></a></li& gt;
<li><a title="12.22《新报》引用北京美联观点" href="">·<span class="STYLE_ts2">12.22《新报》引用北京美联观点</span></a></li>
<li><a title="12.22《成报》引用北京美联观点" href="">·<span class="STYLE_ts2">12.22《成报》引用北京美联观点</span></a></li>
</ul>
</div>
css定义：
.contenta_news{width:288px;
margin-top:13px;float:left;}
.contenta_news h2{
width:292px;
height:30px;
margin-bottom:10px;}
.contenta_news ul{
width:292px;
height:150px;}
.contenta_news ul li{
width:22em; /*不允许出现半汉字截断*/
height:20px;padding-right:18px;
line-height:20px;
white-space:nowrap; /*强制不换行*/
overflow:hidden; /*自动隐藏文字*/
text-overflow: ellipsis; /*文字隐藏后添加省略号*/
-o-text-overflow:ellipsis; /*适用于opera浏览器*/
white-space: pre; /* CSS 2.0 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3.0 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP Printers */
word-wrap: break-word; /* IE 5+ */
position:relative;
}
.contenta_news ul li em{
position:absolute;
right:0px;top:0px;}
.contenta_news a,.contenta_news a:link,.contenta_news a:visited,.contenta_news a:hover{color:#000;display:block;}