Hpyer 的未知空间 » Web 技术 http://hpyer.cn 现实的世界里寻找点滴的未知空间 Wed, 01 Feb 2012 02:16:21 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 HTML特殊字符代码对照表 http://hpyer.cn/html-special-character-code-table.html http://hpyer.cn/html-special-character-code-table.html#comments Sat, 17 Dec 2011 18:03:55 +0000 Hpyer http://hpyer.cn/?p=781 最近比较常用到这些特殊字符，于是网上搜罗了一番，发现这套是比较完整的，保存一下，方便查找。

ISO Latin-1字符集

字符 十进制字符编号 实体名字 说明
— � — 未使用Unused
—  — 未使用Unused
—  — 未使用Unused
—  — 未使用Unused
—  — 未使用Unused
— &#05 ; — 未使用Unused
—  — 未使用Unused
—  — 未使用Unused
—  — 未使用Unused
— 	 — 制表符Horizontal tab
— 
 — 换行Line feed
—  — 未使用Unused
—  — 未使用Unused
— 
 — 回车Carriage Return
—  — 未使用Unused
—  — 未使用Unused
—  — 未使用Unused
— &#17 ; — 未使用Unused
—  — 未使用Unused
— &#19 ; — 未使用Unused
—  — 未使用Unused
—  — 未使用Unused
— &#22 ; — 未使用Unused
— &#23 ; — 未使用Unused
—  — 未使用Unused
—  — 未使用Unused
—  — 未使用Unused
—  — 未使用Unused
—  — 未使用Unused
—  — 未使用Unused
—  — 未使用Unused
—  — 未使用Unused
    — Space
! ! — 惊叹号Exclamation mark
" &#34 ; " 双引号Quotation mark
# # — 数字标志Number sign
$ $ — 美元标志Dollar sign
% % — 百分号Percent sign
& & & Ampersand
' ' — 单引号Apostrophe
( ( — 小括号左边部分Left parenthesis
) ) — 小括号右边部分Right parenthesis
* * — 星号Asterisk
+ + — 加号Plus sign
, , — 逗号Comma
- - — 连字号Hyphen
. . — 句号Period (fullstop)
/ / — 斜杠Solidus (slash)
0 0 — 数字0 Digit 0
1 1 — 数字1 Digit 1
2 2 — 数字2 Digit 2
3 3 — 数字3 Digit 3
4 4 — 数字4 Digit 4
5 5 — 数字5 Digit 5
6 6 — 数字6 Digit 6
7 7 — 数字7 Digit 7
8 8 — 数字8 Digit 8
9 9 — 数字9 Digit 9
: : — 冒号Colon
; &#59; — 分号Semicolon
< &#60; &lt; 小于号Less than
= &#61; — 等于符号Equals sign
> &#62; &gt; 大于号Greater than
? &#63; — 问号Question mark
@ &#64; — Commercial at
A &#65; — 大写A Capital A
B &#66; — 大写B Capital B
C &#67 ; — 大写C Capital C
D &#68; — 大写D Capital D
E &#69; — 大写E Capital E
F &#70; — 大写F Capital F
G &#71; — 大写G Capital G
H &#72; — 大写H Capital H
I &#73; — 大写J Capital I
J &#74; — 大写K Capital J
K &#75; — 大写L Capital K
L &#76; — 大写K Capital L
M &#77; — 大写M Capital M
N &#78; — 大写N Capital N
O &#79; — 大写O Capital O
P &#80; — 大写P Capital P
Q &#81; — 大写Q Capital Q
R &#82; — 大写R Capital R
S &#83; — 大写S Capital S
T &#84; — 大写T Capital T
U &#85 ; — 大写U Capital U
V &#86; — 大写V Capital V
W &#87; — 大写W Capital W
X &#88 ; — 大写X Capital X
Y &#89; — 大写Y Capital Y
Z &#90; — 大写Z Capital Z
[ &#91; --- 中括号左边部分Left square bracket
\ &#92; --- 反斜杠Reverse solidus (backslash )
] &#93; — 中括号右边部分Right square bracket
^ &#94 ; — Caret
_ &#95; — 下划线H orizontal bar (underscore)
` &#96; — 尖重音符Acute accent
a &#97 ; — 小写a Small a
b &#98; — 小写b Small b
c &#99; — 小写c Small c
d &#100; — 小写d Small d
e &#101; — 小写e Small e
f &#102; — 小写f Small f
g &#103; — 小写g Small g
h &#104; — 小写h Small h
i &#105; — 小写i Small i
j &#106; — 小写j Small j
k &#107; — 小写k Small k
l &#108; — 小写l Small l
m &#109; — 小写m Small m
n &#110; — 小写n Small n
o &#111; — 小写o Small o
p &#112 ; — 小写p Small p
q &#113 ; — 小写q Small q
r &#114; — 小写r Small r
s &#115; — 小写s Small s
t &#116; — 小写t Small t
u &#117 ; — 小写u Small u
v &#118; — 小写v Small v
w &#119; — 小写w Small w
x &#120; — 小写x Small x
y &#121; — 小写y Small y
z &#122; — 小写z Small z
{ &#123; — 大括号左边部分Left curly brace
| &#124; — 竖线Vertical bar
} &#125; — 大括号右边部分Right curly brace
~ &#126; — Tilde
— &#127; — 未使用Unused
  &#160; &nbsp; 空格Nonbreaking space
¡ &#161; &iexcl; Inverted exclamation
¢ &#162; &cent; 货币分标志Cent sign
£ &#163; &pound; 英镑标志Pound sterling
¤ &#164; &curren ; 通用货币标志General currency sign
¥ &#165; &yen; 日元标志Yen sign
¦ &#166; &brvbar; or &brkbar; 断竖线Broken vertical bar
§ &#167; &sect; 分节号Section sign
¨ &#168; &uml ; or &die; 变音符号Umlaut
© &#169; &copy ; 版权标志Copyright
ª &#170; &ordf ; Feminine ordinal
« &#171; &laquo; Left angle quote, guillemet left
¬ &#172; &not Not sign
­ &#173; &shy; Soft hyphen
® &#174; &reg; 注册商标标志Registered trademark
¯ &#175; &macr; or &hibar ; 长音符号Macron accent
° &#176; &deg ; 度数标志Degree sign
± &#177; &plusmn ; 加或减Plus or minus
² &#178; &sup2; 上标2 Superscript two
³ &#179; &sup3 ; 上标3 Superscript three
´ &#180; &acute; 尖重音符Acute accent
µ &#181; &micro; Micro sign
&#182; &para; Paragraph sign
· &#183; &middot; Middle dot
¸ &#184; &cedil ; Cedilla
¹ &#185; &sup1; 上标1 Superscript one
º &#186; &ordm; Masculine ordinal
» &#187 ; &raquo ; Right angle quote, guillemet right
¼ &#188; &frac14 ; 四分之一Fraction one-fourth
½ &#189; &frac12; 二分之一Fraction one-half
¾ &#190; &frac34; 四分之三Fraction three-fourths
¿ &#191; &iquest; Inverted question mark
À &#192 ; &Agrave ; Capital A, grave accent
Á &#193; &Aacute; Capital A , acute accent
 &#194; &Acirc; Capital A , circumflex
à &#195; &Atilde; Capital A, tilde
Ä &#196 ; &Auml; Capital A, di?esis / umlaut
Å &#197; &Aring; Capital A, ring
Æ &#198; &AElig; Capital AE ligature
Ç &#199; &Ccedil; Capital C, cedilla
È &#200; &Egrave; Capital E, grave accent
É &#201 ; &Eacute; Capital E, acute accent
Ê &#202; &Ecirc ; Capital E, circumflex
Ë &#203; &Euml; Capital E, di?esis / umlaut
Ì &#204; &Igrave; Capital I, grave accent
Í &#205; &Iacute ; Capital I, acute accent
Î &#206; &Icirc ; Capital I, circumflex
Ï &#207 ; &Iuml; Capital I , di?esis / umlaut
Ð &#208; &ETH; Capital Eth, Icel andic
Ñ &#209 ; &Ntilde; Capital N , tilde
Ò &#210; &Ograve; Capital O, grave accent
Ó &#211 ; &Oacute; Capital O , acute accent
Ô &#212; &Ocirc; Capital O, circumflex
Õ &#213; &Otilde; Capital O, tilde
Ö &#214; &Ouml; Capital O, di?esis / umlaut
× &#215; &times; 乘号Multiply sign
Ø &#216; &Oslash; Capital O, slash
Ù &#217; &Ugrave; Capital U, grave accent
Ú &#218; &Uacute; Capital U, acute accent
Û &#219; &Ucirc; Capital U, circumflex
Ü &#220; &Uuml; Capital U, di?esis / umlaut
Ý &#221; &Yacute ; Capital Y, acute accent
Þ &#222; &TH ORN ; Capital Thorn, Icel andic
ß &#223; &szlig ; Small sharp s, German sz
à &#224; &agrave ; Small a, grave accent
á &#225; &aacute; Small a, acute accent
â &#226; &acirc; Small a, circumflex
ã &#227; &atilde; Small a, tilde
ä &#228; &auml; Small a , di?esis / umlaut
å &#229; &aring; Small a, ring
æ &#230; &aelig; Small ae ligature
ç &#231; &ccedil; Small c, cedilla
è &#232 ; &egrave; Small e, grave accent
é &#233 ; &eacute; Small e, acute accent
ê &#234; &ecirc; Small e, circumflex
ë &#235; &euml; Small e, di?esis / umlaut
ì &#236; &igrave; Small i, grave accent
í &#237; &iacute; Small i, acute accent
î &#238; &icirc ; Small i, circumflex
ï &#239; &iuml; Small i, di?esis / umlaut
ð &#240; &eth; Small eth, Icelandic
ñ &#241; &ntilde; Small n, tilde
ò &#242; &ograve; Small o, grave accent
ó &#243 ; &oacute; Small o, acute accent
ô &#244 ; &ocirc; Small o, circumflex
õ &#245; &otilde; Small o , tilde
ö &#246; &ouml; Small o, di?esis / umlaut
÷ &#247; &divide; 除号Division sign
ø &#248; &oslash; Small o, slash
ù &#249; &ugrave; Small u, grave accent
ú &#250; &uacute; Small u, acute accent
û &#251; &ucirc; Small u, circumflex
ü &#252; &uuml ; Small u, di?esis / umlaut
ý &#253; &yacute ; Small y, acute accent
þ &#254; &thorn; Small thorn, Icelandic
ÿ &#255; &yuml; Small y, umlaut

 

]]> http://hpyer.cn/html-special-character-code-table.html/feed 1 JavaScript 下四舍五入法、舍去法、进一法截取小数的方法 http://hpyer.cn/javascript-number-format.html http://hpyer.cn/javascript-number-format.html#comments Mon, 28 Nov 2011 08:58:01 +0000 Hpyer http://hpyer.cn/?p=778 JavaScript 版四舍五入法、舍去法、进一法截取小数的方法。若不指定小数位数，则按整数截取。

var Digit = {};
/**
 * 四舍五入法截取一个小数
 * @param float digit 要格式化的数字
 * @param integer length 要保留的小数位数
 * @return float
 */<br />
Digit.round = function(digit, length) {
    length = length ? parseInt(length) : 0;
    if (length <= 0) return Math.round(digit);
    digit = Math.round(digit * Math.pow(10, length)) / Math.pow(10, length);
    return digit;
};
/**
 * 舍去法截取一个小数
 * @param float digit 要格式化的数字
 * @param integer length 要保留的小数位数
 * @return float
 */
Digit.floor = function(digit, length) {
    length = length ? parseInt(length) : 0;
    if (length <= 0) return Math.floor(digit);
    digit = Math.floor(digit * Math.pow(10, length)) / Math.pow(10, length);
    return digit;
};
/**
 * 进一法截取一个小数
 * @param float digit 要格式化的数字
 * @param integer length 要保留的小数位数
 * @return float
 */
Digit.ceil = function(digit, length) {
    length = length ? parseInt(length) : 0;
    if (length <= 0) return Math.ceil(digit);
    digit = Math.ceil(digit * Math.pow(10, length)) / Math.pow(10, length);
    return digit;
};
 
// 使用方法
var num = 1.2345;
document.write("数字：" + num + "<br />");
document.write("四色五入法：<br />");
document.write(num + " 保留3位小数：" + Digit.round(num, 3) + "<br />");
document.write(num + " 保留2位小数：" + Digit.round(num, 2) + "<br />");
document.write("舍去法：<br />");
document.write(num + " 保留3位小数：" + Digit.floor(num, 3) + "<br />");
document.write(num + " 保留2位小数：" + Digit.floor(num, 2) + "<br />");
document.write("进一法：<br />");
document.write(num + " 保留3位小数：" + Digit.ceil(num, 3) + "<br />");
document.write(num + " 保留2位小数：" + Digit.ceil(num, 2) + "<br />");
]]> http://hpyer.cn/javascript-number-format.html/feed 0 本站开始提供有偿网站开发服务 http://hpyer.cn/we-offer-paid-services-for-web-development.html http://hpyer.cn/we-offer-paid-services-for-web-development.html#comments Wed, 09 Nov 2011 17:41:17 +0000 Hpyer http://hpyer.cn/?p=777 本站开始提供有偿网站开发服务，例如：ECShop插件开发等。

支持支付宝、财付通的担保交易付款，价格优惠，具体可以去服务中心看看，也可联系站长。

]]> http://hpyer.cn/we-offer-paid-services-for-web-development.html/feed 1 Chrome、Safari3及Opera9的CSS Hack http://hpyer.cn/css-hack-for-chrome-safari3-and-opera9.html http://hpyer.cn/css-hack-for-chrome-safari3-and-opera9.html#comments Wed, 19 Oct 2011 06:26:36 +0000 Hpyer http://hpyer.cn/?p=758 之前发布了一篇《IE6、IE7、IE8、Firefox、Chrome 等浏览器兼容的CSS hack》，其中介绍的方法对于大部分应用足够了，但是特殊情况下，在Chrome、Safari3及Opera9下还是会造成一定困扰，这里介绍一种针对 webkit 内核的css hack。使用方法如下：

body { color:red; }
 
@media screen and (-webkit-min-device-pixel-ratio:0) {
    /***** 在 Chrome、Safari3 及 Opera9 下字体颜色为蓝色，其他浏览器为红色 *****/
    body { color:blue; }
}
在 Chrome、Safari3 及 Opera9 下字体颜色为蓝色，其他浏览器为红色
]]> http://hpyer.cn/css-hack-for-chrome-safari3-and-opera9.html/feed 1 CSS 的优先机制 http://hpyer.cn/the-priority-of-css.html http://hpyer.cn/the-priority-of-css.html#comments Sat, 01 Oct 2011 12:44:46 +0000 Hpyer http://hpyer.cn/?p=745 样式的优先级

多重样式（Multiple Styles）：如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使多重样式的情况。

一般情况下，优先级如下(从高到低)：

  1. （内联样式）Inline style
  2. （内部样式）Internal style sheet
  3. （外部样式）External style sheet

有个例外的情况，就是如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。

示例如下：

<head>
    <style type="text/css">
    /* 内部样式 */
    h3{color:green;}
    </style>
 
    <!-- 外部样式 style.css -->
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <!-- 设置：h3{color:blue;} -->
</head>
<body>
    <h3>测试！</h3>
</body>

选择器的优先权

解释：

  1. 内联样式表的权值最高 1000；
  2. ID 选择器的权值为 100
  3. Class 类选择器的权值为 10
  4. HTML 标签选择器的权值为 1

利用选择器的权值进行计算比较，示例如下：

<html>
  <head>
    <style type="text/css">
        #redP p {
             /* 权值 = 100+1=101 */
             color:#F00;  /* 红色 */
        }
 
        #redP .red em {
             /* 权值 = 100+10+1=111 */
             color:#00F; /* 蓝色 */
 
        }
 
        #redP p span em {
             /* 权值 = 100+1+1+1=103 */
             color:#FF0;/*黄色*/
        }
    </style>
  </head>
  <body>
     <div id="redP">
        <p class="red">red
           <span><em>em red</em></span>
        </p>
        <p>red</p>
     </div>
  </body>
</html>

结果： 标签内的数据显示为蓝色。

CSS 优先级法则：

  1. 选择器都有一个权值，权值越大越优先；
  2. 当权值相等时，后出现的样式表设置要优于先出现的样式表设置；
  3. 创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式；
  4. 继承的CSS 样式不如后来指定的CSS 样式；
  5. 在同一组属性设置中标有“!important”规则的优先级最大；示例如下：
<html>
  <head>
    <style type="text/css">
    #redP p{
        /*两个color属性在同一组*/
        color:#00f !important; /* 优先级最大 */
        color:#f00;
    }
    </style>
  </head>
  <body>
     <div id="redP">
       <p>color</p>
       <p>color</p>
     </div>
  </body>
</html>

结果：在Firefox 下显示为蓝色；在IE 6 下显示为红色；

使用脚本添加样式

当在连接外部样式后，再在其后面使用JavaScript 脚本插入内部样式时（即内部样式使用脚本创建），IE 浏览器就表现出它的另类了。代码如下：

<html>
<head>
  <title> demo </title>
  <meta name="Author" content="xugang" />
 
  <!-- 添加外部CSS 样式 -->
  <link rel="stylesheet" href="styles.css" type="text/css" />
  <!-- 在外部的styles.css文件中，代码如下：
       h3 {color:blue;}
  -->
 
  <!-- 使用javascript 创建内部CSS 样式 -->
  <script type="text/javascript">
  <!--
    (function() {
        var agent = window.navigator.userAgent.toLowerCase();
        var is_op = (agent.indexOf("opera") != -1);
        var is_ie = (agent.indexOf("msie") != -1) && document.all && !is_op;
        var is_ch = (agent.indexOf("chrome") != -1);
 
        var cssStr="h3 {color:green;}";
        var s=document.createElement("style");
        var head=document.getElementsByTagName("head").item(0);
        var link=document.getElementsByTagName("link");
        link=link.item(0);
 
        if(is_ie) {
            if(link)
                head.insertBefore(s,link);
            else
                head.appendChild(s);
            document.styleSheets.item(document.styleSheets.length-1).cssText=cssStr;
        } else if(is_ch) {
            var t=document.createTextNode();
            t.nodeValue=cssStr;
            s.appendChild(t);
            head.insertBefore(s,link);
        } else {
            s.innerHTML=cssStr;
            head.insertBefore(s,link);
        }
    })();
  //-->
  </script>
</head>
<body>
  <h3>在IE中我是绿色，非IE浏览器下我是蓝色！</h3>
</body>
</html>

结果：在Firefox / Chrome / Safari / Opera 中，文字都是蓝色的。而在IE 浏览器中，文字却是绿色的。

附加

在IE 中添加样式内容的JavaScript 代码：

var s=document.createElement("style");
var head=document.getElementsByTagName("head").item(0);
var link=document.getElementsByTagName("link").item(0);
 
head.insertBefore(s,link);
/* 注意：在IE 中，
   虽然代码是将<style>插入在<link>之前，
   但实际内存中，<style>却在<link>之后。
   这也是“IE中奇怪的应用CSS的BUG”之所在！
*/
 
var oStyleSheet = document.styleSheets[0];
//这实际是在<link>的外部样式中追加
oStyleSheet.addRule("h3","color:green;");
alert(oStyleSheet.rules[0].style.cssText);
alert(document.styleSheets[0].rules[0].style.cssText);
 
//方式2
var cssStr="h3 {color:green;}";
document.styleSheets.item(document.styleSheets.length-1).cssText=cssStr;

IE 浏览器下载或者渲染的顺序可能如下：

  1. IE 下载的顺序是从上到下；
  2. JavaScript 函数的执行会阻塞IE 的下载；
  3. IE 渲染的顺序也是从上到下；
  4. IE 的下载和渲染是同时进行的；
  5. 在渲染到页面的某一部分时，其上面的所有部分都已经下载完成（但并不是说所有相关联的元素都已经下载完。）
  6. 在下载过程中，如果遇到某一标签是嵌入文件，并且文件是具有语义解释性的（例如：JS脚本，CSS样式），那么此时IE的下载过程会启用单独连接进行下载。并且在下载后进行解析，如果JS、CSS中如有重定义，后面定义的函数将覆盖前面定义的函数。
  7. 解析过程中，停止页面所有往下元素的下载。样式表文件比较特殊，在其下载完成后，将和以前下载的所有样式表一起进行解析，解析完成后，将对此前所有元素（含以前已经渲染的）重新进行样式渲染。并以此方式一直渲染下去，直到整个页面渲染完成。
  8. Firefox 处理下载和渲染的顺序大体相同，只是在细微之处有些差别，例如：iframe 的渲染。

原文：http://www.cnblogs.com/xugang/archive/2010/09/24/1833760.html

]]> http://hpyer.cn/the-priority-of-css.html/feed 0 调用腾讯QQ天气预报的JS代码 http://hpyer.cn/a-js-code-to-loading-weather-from-qq.html http://hpyer.cn/a-js-code-to-loading-weather-from-qq.html#comments Sat, 17 Sep 2011 01:12:37 +0000 Hpyer http://hpyer.cn/?p=738 发一个个人觉得比较好用的天气预报JS代码，是腾讯QQ的，且可以根据访问者的IP自动判断并输出其所在地的天气，很不错哦~

测试效果：

 


代码如下：

<div id="wealth">&nbsp;</div>
<script type="text/javascript" src="http://minisite.qq.com/js/j.minisite.weather.js" charset="gbk"></script>
<script type="text/javascript">
MiniSite.Weather.print("wealth");
</script>

以下2012年2月1日更新

最近发现这段代码不能用了，测试后发现，是不能调用QQ的IP库（http://fw.qq.com:80/ipaddress）导致的，所以本人对脚本进行了调整，使其可以手动设置显示哪个城市的天气，并且在无法读取IP库的时候显示默认城市（MiniSite.Weather.defaultCity 的值）的天气。

修改的 j.minisite.weather.js 下载地址：Minisite Weather   [v1.0 - 4.45 kB - 12 Hits]

调用方法：

// 和原来一样，但是如果无法读取ip库的情况下会显示默认城市的天气
MiniSite.Weather.print("wealth");
 
// 手动设置城市，如果是直辖市，则类似：
MiniSite.Weather.print("wealth", "XX省", "XX市");
// 如果是直辖市，则类似：
MiniSite.Weather.print("wealth", "北京市", "北京市");

注：如果仍然想要自动判断用户所在城市的功能，则需要通过服务器端脚本（PHP、ASP、Java等）来实现了。可以谷歌、百度一下“XX读取纯真IP库”（XX是对应的服务器端脚本）。
纯真IP库最新版：http://www.crsky.com/soft/2611.html

]]> http://hpyer.cn/a-js-code-to-loading-weather-from-qq.html/feed 0