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

HTML/XHTML教程
HTML表格标记教程(37):表头的背景图象属性BACKGROUND
HTML表格标记教程(41):表头的宽度和高度属性WIDTH、HEIGHT
HTML表格标记教程(36):表头的背景色属性BGCOLOR
揭开HTML 5工作草稿的神秘面纱
清除网页文字水印的两种简单方法
W3C公布最新的HTML5标准草案
XHTML与CSS的面向对象编程
XHTML三种文件类型声明
通过实例掌握BR和P标签的区别
网页表格或div层在网页中被撑开解决之道
网页设计之网页音乐的实现技巧
XHTML常用标签介绍
HTML网页图片标记
网页表单设计实例技巧五则
HTML网页列表标记学习教程
HTML网页超链接标记
HTML表单标记教程(4):
HTML表单标记教程(5):文字域标记
HTML表单标记教程(2):
HTML表单标记教程(3):输入标记

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


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