当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > HTML Symbol Entities美化网页小图标

HTML/XHTML教程
HTML教程:DOCTYPE 的缩写
掌握常用的用于网页中引用内容的HTML标记
10个未被充分利用或被误解的HTML标签
网站超级链接的打开方式探讨
网页中flash wmode属性你会用吗?
XHTML教程:Transitional和Strict的区别
网页设计之5种简单的XHTML网页表单
制作主流邮箱能正常显示的HTML邮件的技巧
网页布局设计的简单原则
W3C教程(14):W3C RDF和OWL活动
W3C教程(16):其他的W3C活动
W3C教程(13):W3C WSDL 活动
W3C教程(15):W3C SMIL 活动
作用相似html标记:strong与em、q、cite、blockquote
html 基底网址标记
GET POST 区别详解
圆角矩形的html+css实现代码
HTML title 属性换行的办法
html tbody 用法
nofollow让评论和留言中的链接起到真正的作用

HTML/XHTML教程 中的 HTML Symbol Entities美化网页小图标


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-30   浏览: 195 ::
收藏到网摘: n/a

  ©<>这几个字符您一定不陌生吧,下面这几个呢? ›»«如果您还知道那再看这几个呢?☎☠✎ ✓下面来看看他们的在网页中的真面目吧 

  & nbsp;& copy;& lt;<& gt;& rsaquo;& raquo;& laquo;& #9742;& #9760;& #9998;& #10003;依次为空格©<<>›»«☎☠✎✓


  看到这您是不是有点晕,不知道我在什么,下面贴几张图您就明白了。




您发现了没有,图中的文字中用到了许多修饰的小图标,是不是给界面的美观增色不少?是的,合理的运用这些小图标既可以使轻松指引读者还可以从细节上为网页整体增色,何乐而不为呢?那么是不是要去搜集一些类似的小图标呢?答案是不用。那些事只有美工才需要,我们一向比较懒,所以我们就…

今天的主角闪亮登场→HTML Symbol Entities。那么为什么要使用字符而不使用小图标呢好处有哪些呢?

1.它比图标加载速度快;

2.它的大小可以随字体的大小而变化;

3.它可以随意改变颜色。

下面用☎做个demo,

正常情况:


以下为引用的内容:

<p>正常电话图标:☎</p>

正常电话图标:☎


改变字体大小:

以下为引用的内容:

<p style="font-size:26px;">大号电话图标:☎</p>

大号电话图标:☎


改变颜色:

以下为引用的内容:

<p style="color:Red;font-size:26px;">大号红色图标:☎</p>

大号红色图标:☎


是不是很简单,用起来很爽呢?但是有人又会问:“这么多字符我怎么记得住每个对应的代码是什么?”如果您是观察仔细的人,可能会发现其实基本上每个字符都有对应的名字,而且都是英文的缩写如:©;就是copyright的缩写,←就是left arrow的缩写,是不是很好记呢?如果您还是懒的记,那就什么时候用,什么时候来这里(w3schools)或这里(Character Entity Reference HTML 4)看吧,很详细而且比较权威。

原文地址:http://www.cnblogs.com/gudao119/archive/2010/01/05/1639447.html