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

HTML/XHTML教程
理解表现和结构相分离
HTML语言剖析(一)Html简介
HTML语言剖析(二)HTML标记一览
HTML语言剖析(三)文件标记
HTML语言剖析(四)排版标记
HTML语言剖析(五)字体标记
HTML语言剖析(六)清单标记
采访Eric Meyer的10个问题
Flash页面如何通过校验
为什么要抛弃HTML
典型的三行二列居中高度自适应布局
盒模型bug的解决方法
用!important解决IE和Mozilla的布局差别
使用DIV之后,什么时候使用TABLE
同一个页面用多个id有什么影响
定义标题的最好方法
左中右3栏布局中最先显示中栏内容的方法
alt属性和title属性
在IE中为abbr标签加样式
HTML4标签的默认样式列表

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-30   浏览: 127 ::
收藏到网摘: 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