标签 html 下的文章

HTML，CSS，font-family：中文字体的英文名称




中文名 对照名 css写法
宋体 SimSun font-family：SimSun；
黑体 SimHei font-family：SimHei；
微软雅黑 Microsoft YaHei font-family：Microsoft YaHei；
微软正黑体 Microsoft JhengHei font-family：Microsoft JhengHei；
新宋体 NSimSun font-family：NSimSun；
新细明体 PMingLiU font-family：PMingLiU；
细明体 MingLiU font-family：MingLiU；
标楷体 DFKai-SB font-family：DFKai-SB；
仿宋 FangSong font-family：FangSong；
楷体 KaiTi font-family：KaiTi；
仿宋_GB2312 FangSong_GB2312 font-family：FangSong_GB2312；
楷体_GB2312 KaiTi_GB2312 font-family：KaiTi_GB2312；

宋体：SimSuncss中中文字体（font-family）的英文名称




Mac OS的一些：

中文名 英文名 css写法
华文细黑 STHeiti Light [STXihei] font-family:STHeiti Light;
华文黑体 STHeiti font-family:STHeiti;
华文楷体 STKaiti font-family:STKaiti;
华文宋体 STSong font-family:STSong;
华文仿宋 STFangsong font-family:STFangsong;
儷黑 Pro LiHei Pro Medium font-family:Pro LiHei Pro Medium;
儷宋 Pro LiSong Pro Light font-family: Pro LiSong Pro Light;
標楷體 BiauKai font-family:BiauKai;
蘋果儷中黑 Apple LiGothic Medium font-family:Apple LiGothic Medium;
蘋果儷細宋 Apple LiSung Light font-family:Apple LiSung Light;




Windows的一些：


新細明體：PMingLiU
細明體：MingLiU
標楷體：DFKai-SB
黑体：SimHei
新宋体：NSimSun
仿宋：FangSong
楷体：KaiTi
仿宋_GB2312：FangSong_GB2312
楷体_GB2312：KaiTi_GB2312
微軟正黑體：Microsoft JhengHei
微软雅黑体：Microsoft YaHei
装Office会生出来的一些：
隶书：LiSu
幼圆：YouYuan
华文细黑：STXihei
华文楷体：STKaiti
华文宋体：STSong
华文中宋：STZhongsong
华文仿宋：STFangsong
方正舒体：FZShuTi
方正姚体：FZYaoti
华文彩云：STCaiyun
华文琥珀：STHupo
华文隶书：STLiti
华文行楷：STXingkai
华文新魏：STXinwei




几个网站使用的好看的字体实例：

例1（小米米官网）：font-family: “Arial”,”Microsoft YaHei”,”黑体”,”宋体”,sans-serif;

例2（淘宝技术研发中心）：font: 12px/1.5 Tahoma,Helvetica,Arial,’宋体’,sans-serif;

例3（加网 ）：font: 14px/1.5 ‘Microsoft YaHei’,arial,tahoma,\5b8b\4f53,sans-serif;

例4（淘宝UED）：font: 12px/1 Tahoma,Helvetica,Arial,”\5b8b\4f53″,sans-serif;

例5（一淘UX）:font-family: Helvetica, ‘Hiragino Sans GB’, ‘Microsoft Yahei’, ‘微软雅黑’, Arial, sans-serif;


在网页制作的过程中，少不了跟路径打交道，比如，包含一个文件，插入一个图片等，与路径都有关系，如果使用了错误的文件路径，就会导致引用失效(无法浏览链接文件，或无法显示插入的图片等)。

作为初学者的我，有时会感到困惑「(°ヘ°)，这路径什么鬼Σ (ﾟДﾟ;) ，怎么写的啊(⊙_⊙)?，
下面我就介绍一下了解到的相对路径与绝对路径。

根相对路径（也称相对跟目录）的路径以“/”开头，路径是从当前站点的根目录开始计算。

/ 代表根目录，慎用

../ 代表上一级目录

../../ 代表上两级目录

/..代表下级目录

/../.. 代表下两级目录

标准写法：

同级 直接引用文件名

<link rel="stylesheet" type="text/css" href="main.css" />

下级 同级目录/下级目录/文件名

<link rel="stylesheet" type="text/css" href="css/main.css" />


HTML有2种路径的写法：相对路径和绝对路径。

相对路径包括根相对路径（Site Root）和文档相对路径（Document）两种。

1.HTML相对路径(Relative Path)

用途：指定由这个文件所在的路径引起的跟其它文件(或文件夹)的路径关系
如果源文件和引用文件在同一个目录里，直接写引用文件名即可，这时引用文件的方式就是使用相对路径。

下面建立两个HTML文档info.html和index.html，用作示例，要求都是在xiaomo.html加入index.html超链接。
eg1：相对路径的简单应用

假设：xiaomo.html路径是：c:/Inetpub/wwwroot/sites/blabla/xiaomo.html

index.html路径是：c:/Inetpub/wwwroot/sites/blabla/index.html
eg2：如何表示上级目录

../表示源文件所在目录的上一级目录，http://www.moshanghua.com/表示源文件所在目录的上上级目录，以此类推。

假设：xiaomo.html路径是：c:/Inetpub/wwwroot/sites/blabla/xiaomo.html

index.html路径是：c:/Inetpub/wwwroot/sites/index.html
eg3：如何表示上上级目录

假设：xiaomo.html路径是：c:/Inetpub/wwwroot/sites/blabla/xiaomo.html

index.html路径是：c:/Inetpub/wwwroot/sites/wowstory/index.html

写法：index.html
eg4：如何表示下级目录

引用下级目录的文件，直接写下级目录文件的路径即可。

假设：xiaomo.html路径是：c:/Inetpub/wwwroot/sites/blabla/xiaomo.html

index.html路径是：c:/Inetpub/wwwroot/sites/blabla/html/index.html
2.HTML绝对路径(Absolute Path)

大家都知道，在我们平时使用计算机时要找到需要的文件就必须知道文件的位置，而表示文件的位置的方式就是路径。

例如只要看到这个路径：c:/website /img/photo.jpg我们就知道photo.jpg文件是在c盘的website目录下的img子目录中。

类似于这样完整的描述文件位置的路径就是绝对路径。我们不需要知道其他任何信息就可以根据绝对路径判断出文件的位置。

HTML绝对路径(absolute path)在网页制作中指带域名的文件的完整路径。
注：
如果是纯手工编写html或者css、js的话，建议用相对路径，比如：../../css/main.css

如果是动态文件，比如jsp、php等，最好用网站的绝对路径。比如

{ctx}/css/main.css，其中ctx是自己定义的变量，它的值等于类似于http://localhost这种地址。
相对路径的缺点：
例如：../images/msh.png，这种写法，一旦我改变了引用页面文件的目录，这张图片就无法显示了。如果换成网站的绝对路径{ctx}/images/msh.png，那么不论我怎么移动引用的页面文件，只要图片的地址不变，都是可以访问的。
绝对路径的缺点：
对于静态文件，往往无法自动获取网站的根路径（{ctx}），所以要写绝对路径比较麻烦。

HTML编码规范：

  • 使用小写元素名:<session>
  • 关闭所有HTML元素:<p></p>
  • 使用小写属性名:<div class=”menu”>
  • 属性值使用引号:<table class=”table striped”>
  • 图片通常使用alt属性:<img src=”html5.gif” alt=”HTML5″>
  • 等号前少用空格:<link rel=”stylesheet” href=”style.css”>
  • 不要随便添加空行，缩进使用两个空格，不建议使用TAB
  • 布尔型属性不用赋值:<input type=”text” disabled>
  • 尽量避免多余的父元素

HTML属性顺序：

  1. class
  2. id，name
  3. data-*
  4. src，for，type，href
  5. title，alt
  6. aria-*，rolo

CSS编码规范：

  • 用二个空格代替tab
  • 为选择器分组时，将单独的选择器单独放在一行
  • 每个声明块的左花括号前添加一个空格
  • 声明块的右花括号单独成行
  • 每条声明语句的 ：后应该插入一个空格
  • 每条声明独占一行
  • 所有声明语句都应当以分号结尾 ;
  • 对于以逗号分隔的属性值，每个逗号后面都应该插入一个空格
  • 对于属性值或颜色参数，省略小于1的小数前面的0
  • 避免为0值指定单位：用margin:0 代替 margin：0px
  • 媒体查询@media放在尽可能相关规则的附近
  • 只包含一条声明的样式，建议将语句放在同一行。
  • 对于通用元素使用class
  • 选择器尽可能短，并且尽量限制组成选择器的元素个数不超过3

在HTML中很多的特殊符号无法打出来，但可以用相应的代码进行代替显示,百度收集了一下特殊符号对照表，提供了一些HTML特殊符号相应的代码（方便一下自己，到用的时候，就不用每次都百度了。。。）

最常用的字符实体

显示结果 描述 实体名称 实体编号
￠ 分 &cent; &#162;
£ 镑 &pound; &#163;
¥ 元 &yen; &#165;
§ 节 &sect; &#167;
© 版权 &copy; &#169;
® 注册商标 &reg; &#174;
× 乘号 &times; &#215;
÷ 除号 &divide; &#247;
< 小于号 &lt; &#60;
> 大于号 &gt; &#62;
& 和号 &amp; &#38;
" 引号 &quot; &#34;
' 撇号 &apos; (IE不支持) &#39;
空格（推荐使用） &nbsp; &#160;
半角空格 &ensp;
全角空格 &emsp;

HTML特殊符号对照表

特殊符号 命名实体 十进制编码 特殊符号 命名实体 十进制编码
Α &Alpha; &#913; Β &Beta; &#914;
Γ &Gamma; &#915; Δ &Delta; &#916;
Ε &Epsilon; &#917; Ζ &Zeta; &#918;
Η &Eta; &#919; Θ &Theta; &#920;
Ι &Iota; &#921; Κ &Kappa; &#922;
Λ &Lambda; &#923; Μ &Mu; &#924;
Ν &Nu; &#925; Ξ &Xi; &#926;
Ο &Omicron; &#927; Π &Pi; &#928;
Ρ &Rho; &#929; Σ &Sigma; &#931;
Τ &Tau; &#932; Υ &Upsilon; &#933;
Φ &Phi; &#934; Χ &Chi; &#935;
Ψ &Psi; &#936; Ω &Omega; &#937;
α &alpha; &#945; β &beta; &#946;
γ &gamma; &#947; δ &delta; &#948;
ε &epsilon; &#949; ζ &zeta; &#950;
η &eta; &#951; θ &theta; &#952;
ι &iota; &#953; κ &kappa; &#954;
λ &lambda; &#955; μ &mu; &#956;
ν &nu; &#957; ξ &xi; &#958;
ο &omicron; &#959; π &pi; &#960;
ρ &rho; &#961; ς &sigmaf; &#962;
σ &sigma; &#963; τ &tau; &#964;
υ &upsilon; &#965; φ &phi; &#966;
χ &chi; &#967; ψ &psi; &#968;
ω &omega; &#969; ϑ &thetasym; &#977;
ϒ &upsih; &#978; ϖ &piv; &#982;
• &bull; &#8226; … &hellip; &#8230;
′ &prime; &#8242; ″ &Prime; &#8243;
‾ &oline; &#8254; ⁄ &frasl; &#8260;
℘ &weierp; &#8472; ℑ &image; &#8465;
ℜ &real; &#8476; ™ &trade; &#8482;
ℵ &alefsym; &#8501; ← &larr; &#8592;
↑ &uarr; &#8593; → &rarr; &#8594;
↓ &darr; &#8595; ↔ &harr; &#8596;
↵ &crarr; &#8629; ⇐ &lArr; &#8656;
⇑ &uArr; &#8657; ⇒ &rArr; &#8658;
⇓ &dArr; &#8659; ⇔ &hArr; &#8660;
∀ &forall; &#8704; ∂ &part; &#8706;
∃ &exist; &#8707; ∅ &empty; &#8709;
∇ &nabla; &#8711; ∈ &isin; &#8712;
∉ &notin; &#8713; ∋ &ni; &#8715;
∏ &prod; &#8719; ∑ &sum; &#8722;
− &minus; &#8722; ∗ &lowast; &#8727;
√ &radic; &#8730; ∝ &prop; &#8733;
∞ &infin; &#8734; ∠ &ang; &#8736;
∧ &and; &#8869; ∨ &or; &#8870;
∩ &cap; &#8745; ∪ &cup; &#8746;
∫ &int; &#8747; ∴ &there4; &#8756;
∼ &sim; &#8764; ≅ &cong; &#8773;
≈ &asymp; &#8773; ≠ &ne; &#8800;
≡ &equiv; &#8801; ≤ &le; &#8804;
≥ &ge; &#8805; ⊂ &sub; &#8834;
⊃ &sup; &#8835; ⊄ &nsub; &#8836;
⊆ &sube; &#8838; ⊇ &supe; &#8839;
⊕ &oplus; &#8853; ⊗ &otimes; &#8855;
⊥ &perp; &#8869; ⋅ &sdot; &#8901;
⌈ &lceil; &#8968; ⌉ &rceil; &#8969;
⌊ &lfloor; &#8970; ⌋ &rfloor; &#8971;
◊ &loz; &#9674; ♠ &spades; &#9824;
♣ &clubs; &#9827; ♥ &hearts; &#9829;
♦ &diams; &#9830; &nbsp; &#160;
¡ &iexcl; &#161; ¢ &cent; &#162;
£ &pound; &#163; ¤ &curren; &#164;
¥ &yen; &#165; ¦ &brvbar; &#166;
§ &sect; &#167; ¨ &uml; &#168;
© &copy; &#169; ª &ordf; &#170;
« &laquo; &#171; ¬ &not; &#172;
­ &shy; &#173; ® &reg; &#174;
¯ &macr; &#175; ° &deg; d&#176;
± &plusmn; &#177; ² &sup2; &#178;
³ &sup3; &#179; ´ &acute; &#180;
µ &micro; &#181;
  1. 1
  2. 2