HTML字体属性
我的图书馆
HTML字体属性
HTML字体属性
&一、文字样式设置的基本标签—&font&
设置字体样式的基本标签是&font&&/font&，被其包含的文本为样式作用区。在初学者的HTML代码编写中，&font&&/font&容易被多重嵌套，如&font 属性1=值1&&font 属性2=值2&文本&/font&&/font&。还有一种情况是标签嵌套错位，如&font&&p&文本&/font&&/p&。为了规范代码的编写，避免不必要的错误，读者在初学时一定要谨慎。
&二&、 设置文字的颜色
color是&font&&/font&标签的属性之一，用于设置文字颜色。编写代码如代码2.1所示。
代码2.1&字体颜色的设置：font_color.htm
& &title&字体颜色的设置&/title&
& 浅红色文字：&font color="#dd0000"&HTML学习的本质就是该是什么就用什么&/font&&br /&
& 深红色文字：&font color="#660000"&HTML学习的本质就是该是什么就用什么&/font&&br /&
& 浅绿色文字：&font color="#00dd00"&HTML学习的本质就是该是什么就用什么&/font&&br /&
& 深绿色文字：&font color="#006600"&HTML学习的本质就是该是什么就用什么&/font&&br /&
& 浅蓝色文字：&font color="#0000dd"&HTML学习的本质就是该是什么就用什么&/font&&br /&
& 深蓝色文字：&font color="#000066"&HTML学习的本质就是该是什么就用什么&/font&&br /&
& 浅黄色文字：&font color="#dddd00"&HTML学习的本质就是该是什么就用什么&/font&&br /&
& 深黄色文字：&font color="#666600"&HTML学习的本质就是该是什么就用什么&/font&&br /&&
& 浅青色文字：&font color="#00dddd"&HTML学习的本质就是该是什么就用什么&/font&&br /&
& 深青色文字：&font color="#006666"&HTML学习的本质就是该是什么就用什么&/font&&br /&
& 浅紫色文字：&font color="#dd00dd"&HTML学习的本质就是该是什么就用什么&/font&&br /&
& 深紫色文字：&font color="#660066"&HTML学习的本质就是该是什么就用什么&/font&&br /&
浏览效果如图2.2所示。
图2.1& 字体颜色的设置
&三、设置文字的尺寸
size也是&font&&/font&标签的属性，用于设置文字大小。size的值为1-7，默认为3。我们可以size 属性值之前加上“＋”、“－”字符，来指定相对于字号初始值的增量或减量。编写代码如代码2.2所示。
代码2.2&字体尺寸的设置：font_size.htm
& &title&字体尺寸的设置&/title&
& size为1：&font size="1"&HTML学习&/font&&br /&
& size为2：&font size="2"&HTML学习&/font&&br /&
& size为3：&font size="3"&HTML学习&/font&&br /&
& size为4：&font size="4"&HTML学习&/font&&br /&
& size为5：&font size="5"&HTML学习&/font&&br /&
& size为6：&font size="6"&HTML学习&/font&&br /&
& size为7：&font size="7"&HTML学习&/font&&br /&
浏览效果如图2.2所示。
图4.8 &字体尺寸的设置
可尝试在size值前面加上“＋”、“－”字符，更灵活地设置文字尺寸
&四、 设置文字的字体
face也是&font&&/font&标签的属性，用于设置文字字体（字型）。HTML网页中显示的字型从浏览端的系统中调用，所以为了保持字型一致，建议采用宋体，HTML页面也是默认采用宋体。编写代码如代码2.3所示。
代码2.3 &字体字型的设置：font_face.htm
& &title&字体字型的设置&/title&
& 字型为宋体：&font size="5"&沁园春·长沙-毛泽东&/font&&br /&
& 字型为楷体：&font size="5"&沁园春·长沙-毛泽东&/font&&br /&
& 字型为黑体：&font size="5"&沁园春·长沙-毛泽东&/font&&br /&
& 字型为隶书：&font size="5"&沁园春·长沙-毛泽东&/font&
浏览效果如图2.3所示。
图4.9 &字体字型的设置
五、 使文字倾斜
用双标签&i&&/i&可使被作用文字倾斜，达到特殊的效果，例如文章的日期。&em&&/em&被称为强调标签，也是斜体，目前使用比&i&&/i&标签更频繁，其编写方法如下：
&i&这是斜体文字&/i&
&em&这也是斜体文字&/em&
六、 使文字加粗
用双标签&b&&/b&可使被作用文字加粗，是文字更加醒目，例如文章的标题部分。&strong&&/strong&被称为特别强调标签，也是文字加粗，目前使用比&b&&/b&标签更频繁，其编写方法如下：
&b&这是粗体文字&/b&
&strong&这也是粗体文字&/strong&
七、 给文字加下划线
用双标签&u&&/u&可添加下划线到被作用文字。以下为文字倾斜、加粗和下划线的综合示例。编写代码如代码2.4所示。
代码4.10 &文字修饰的设置：font_style.htm
& &title&字体修饰的设置&/title&
& &font size="5"&斜体：&em&沁园春·长沙-毛泽东&/em&&br /&
& 加粗体：&strong&沁园春·长沙-毛泽东&/strong&&br /&
& 下划线：&u&沁园春·长沙-毛泽东&/u&&br /&
& 斜体+加粗体+下划线：&em&&strong&&u&沁园春·长沙-毛泽东&/u&&/strong&&/em&&/font&
浏览效果如图2.4所示。
图2.4 &字体修饰的设置
———— 注意：在多个标签包含同一块文字时，其包含顺序不能错位。
八、 多种标题样式的使用
网页的文章中，为了凸显标题的重要性，标题的样式比较特殊。HTML技术保护了一套针对标题的样式标签，分别为双标签&h1&到&h6&，文字尺寸从大到小代表不同级别的标题。标题标签有一个特点，独占一行、文字加粗、文字居中。这样，在设置标题的时候就很轻松了，并且可设多级标题。编写代码如代码2.5所示。
代码2.5&标题的设置：font_h.htm
& &title&标题的设置&/title&
&h1&一号标题&/h1&
&h2&二号标题&/h2&
&h3&三号标题&/h3&
&h4&四号标题&/h4&
&h5&五号标题&/h5&
&h6&六号标题&/h6&
&h1&财富杂志：谷歌为何不会盛极而衰&/h1&
　　　&h3&遭遇潜在问题&/h3&
　　&p&&&&&一些业内人士认为，长期垄断互联网搜索和广告市场谷歌可能会盛极而衰。...与此同时，谷歌近日推出的多项新计划，例如开放手机联盟、社交网站通用平台OpenSocial、以及可能投资数十亿美元竞购无线频段，也遭到了广泛的质疑。
　　&h3&将继续垄断搜索&/h3&
　　&p&&&&&最近有一些文章称，如果出现更好的搜索引擎，人们会毫不犹豫地放弃谷歌。但是，即使真有更好的搜索引擎出现，谷歌仍然可以在一段时间内屹立不倒。...在这种情况下，网站速度往往会成为决定胜负的关键。&/p&
浏览效果如图2.5所示。
图2.5&标题的设置
九、处理网页中的特殊字符
在HTML中，有一些字符有特殊含义，例如“&”和“&”是标签的左括号和右括号，而标签是控制HTML显示的，标签本身只能被浏览器解析，并不能在页面中显示。那么，该怎样在HTML中显示“&”和“&”呢？HTML规定了一些特殊字符的写法，以便在网页中显示，如表1.1所示。
表1.1 &HTML中的特殊字符
（商标符号）
（注册符号）
“”（英文半角）
（版权符号）
如代码2.6所示。
代码2.6&&特殊字符的设置：string.htm
& &title&特殊字符的设置&/title&
&font size="5"&
标签的显示方法：&HTML&&br /&
引号的显示方法：&英文半角双引号&&br /&
商标的显示方法：&&br /&
注册符号的显示方法：&&br /&
版权符号的显示方法：&&br /&
显示&&br /&
浏览效果如图2.6所示。
图4.12 &特殊字符的设置
———— 说明：单独显示符号&必须用代码&。
十、 如何更方便地忽略浏览器对部分HTML的解析
如果在网页中作一个类似本书的HTML代码示例，恐怕得把所有的&和&转换成&和&，显得比较麻烦。HTML代码中的&plaintext&和&xmp&&/xmp&可以轻松解决这个问题。
&plaintext&是单标签，它插入到HTML代码中时，其后面的所有HTML标签全部失效，即浏览器对&plaintext&后面所有的HTML标签不作解析，直接在页面上显示。
&xmp&&/xmp&是双标签，它只使其包含的内容中的标签失效，&xmp&&/xmp&的使用更为普遍。编写代码如代码2.7所示。
代码2.7&忽略标签的设置：
& &title&忽略标签的设置&/title&
&h2&沁园春·长沙&/h2&
&xmp&独立寒秋，&strong&湘江北去&/strong&，橘子洲头。 &br /&看万山红遍，层林尽染； &br /&漫江碧透，&u&百舸争流。&/u& &br /&&/xmp&
鹰击长空，&strong&鱼翔浅底，&/strong& &br /&万类霜天竞自由。 &br /&怅寥廓，&u&问苍茫大地&/u&，谁主沉浮？&br /&
&plaintext&
携来百侣曾游，&br /&忆往昔峥嵘岁月稠。 &br /& 恰同学少年，风华正茂； &br /& 书生意气，挥斥方遒。 &br /& 指点江山，激扬文字， &br /& 粪土当年万户侯。 &br /& 曾记否，&strong&到中流击水&/strong&，浪遏飞舟！
浏览效果如图2.7所示。
图2.7 &忽略标签的设置
十一、 其他文字修饰方法
为了满足不同领域的需要，HTML还有其他修饰文字的标签。比较常用的有上标格式标签和下标格式标签。某些场合甚至要用到删除效果，即可用HTML的中划线标签。
— 上标格式标签为双标签&sup&&/sup&，多用于数学指数的表示，比如某个数的平方或立方。
— 下标格式标签为双标签&sub&&/sub&，多用于注释，以及数学的底数表示。
— 中划线标签为双标签&strike&&/strike&，多用于删除效果。
编写代码如代码2.8所示。
代码2.8 &其他修饰标签的设置
& &title&其他修饰标签的设置&/title&
&font size="5"&
沁园春&sup&长沙&/sup&！&br /&
数学指数的表示：2&sup&3&/sup&=8、100&sup&2&/sup&=10000&br /&&hr /&
沁园春&sub&长沙&/sub&！&br /&
数学底数的表示：log&sub&3&/sub&81=4、log&sub&5&/sub&125=3&br /&&hr /&
删除效果：&strike&我被删除了&/strike&
浏览效果如图2.8所示。
图4.14 &其他修饰标签的设置
十二、为了让文字富有变化，或者为了着意强调某一部分，HTML提供了一些标签产生这些效果，现将常用的标签列举如下：
&B&　　　　　&/B&　　　　　粗体　　　　　　　　　　　　　　HTML语言
&I&　　　　　&/I&　　　　　斜体　　　　　　　　　　　　　　HTML语言
&U&　　　　　&/U&　　　　　加下划线　　　　　　　　　　　　HTML语言
&TT&　　　　 &TT&　　　　　打字机字体　　　　　　　　　　　HTML语言
&BIG&　　　　&/BIG&　　　　大型字体　　　　　　　　　　　　HTML语言
&SMALL&　　　&/SMALL&　　　小型字体　　　　　　　　　　　　HTML语言
&BLINK&　　　&/BLINK&　　　闪烁效果　　　　　　　　　　　　HTML语言
&EM&　　　　 &/EM& 　　　　表示强调，一般为斜体　　　　　　HTML语言
&STRONG&　　 &/STRONG&　　 表示特别强调，一般为粗体　　　　HTML语言
&CITE&　　　 &/CITE&　　　 用于引证、举例，一般为斜体　　　HTML语言
TA的最新馆藏[转]&[转]&[转]&
喜欢该文的人也喜欢11434人阅读
前端（240）
/slzs_zyt/item/e863ed94ceeb5c
&& &title&打印相关&/title&
&& &meta http-equiv=&Content-Type& content=&text/ charset=gb2312&&
&& &!--media=print 这个属性在打印时有效 有些不想打印出来的分页打印的都可以应用这类样式进行控制 在非打印时是无效的(可从打印预览中看到效果)--&
&& &style media=print&
&&& /* 应用这个样式的在打印时隐藏 */
&&& .Noprint {
&&&& display:
&&& /* 应用这个样式的，从那个标签结束开始另算一页，之后在遇到再起一页，以此类推 */
&&& .PageNext {
&&&& page-break-after:
&& &/style&
&& &!-- 这个是普通样式 --&
&& &style type=&text/css&&
&&& .tdp {
&&&& border-bottom: 1 solid #000000;
&&&& border-left: 1 solid #000000;
&&&& border-right: 0 solid #
&&&& border-top: 0 solid #
&&& .tabp {
&&&& border-color: # #000000;
&&&& border-style:
&&&& border-top-width: 2
&&&& border-right-width: 2
&&&& border-bottom-width: 1
&&&& border-left-width: 1
&&&& font-family: &宋体&;
&&&& font-size: 9
&& &/style&
&& &script type=&text/javascript&&
&&& var hkey_root,hkey_path,hkey_key&&&
&&& hkey_root=&HKEY_CURRENT_USER&;
&&& hkey_path=&&Explorer\\PageSetup\\&;
&&&&& //这个是用来设置打印页眉页脚的，你可以设置为空或者其它
&&&&& try{&&&
&&&&&&&&&&& var RegWsh = new ActiveXObject(&WScript.Shell&);&
&&&&&&&&&&&&&&
&&&&&&&&&&& hkey_key=&header&;
&&&&&&&&&&& RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,&&);
&&&&&&&&&&&&
&&&&&&&&&&& hkey_key=&footer&;
&&&&&&&&&&& RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,&&);
&&&&&&&&&&&&
&&&&& }catch(e){
&&&&& alert(e.description());
&&&& &/script&
&& &center class=&Noprint&&
&&&& &OBJECT id=WebBrowser classid=CLSID:A-11D0-A96B-00C04FD705A2 height=0 width=0 &&/OBJECT&
&&&& &input type=button value=打印 onclick=document.all.WebBrowser.ExecWB(6,1)&
&&&& &input type=button value=直接打印 onclick=document.all.WebBrowser.ExecWB(6,6) /&
&&&& &input type=button value=页面设置 onclick=document.all.WebBrowser.ExecWB(8,1) /&
&&&& &input type=button value=打印预览 onclick=document.all.WebBrowser.ExecWB(7,1) /&
&&&& &br /&
&&& &hr align=&center& width=&90%& size=&1& noshade /&
&& &/center&
&& &table width=&90%& border=&0& align=&center& cellpadding=&2& cellspacing=&0& class=&tabp&&
&&&& &td colspan=&3& class=&tdp&&
&&&&& 第1页
&&&& &/td&
&&&& &td colspan=&3& class=&tdp&&
&&&& &/td&
&&&& &td colspan=&3& class=&tdp&&
&&&&& &table width=&100%& border=&0& cellspacing=&0& cellpadding=&0&&
&&&&&& &tr&
&&&&&&& &td width=&50%& class=&tdp&&
&&&&&&&& 对于这类打印功能的，有一个问题，就是权限问题，一般这种和操控客户端东西的代码会有安全提示，一般用户也未必会理解，
&&&&&&&& 所以像此类方法为了让使用者更明白，还需要多加注意，可以设置浏览器安全性中的未标记安全的ActiveX选项为提示，看到提示后点击（是或者允许）之类的词。
&&&&&&&& 当然最简单但不推荐的方法就是直接设置安全性最低……
&&&&&&& &/td&
&&&&&& &/tr&
&&&&& &/table&
&&&& &/td&
&& &/table&
&& &hr align=&center& width=&90%& size=&1& noshade class=&hr&&
&& &!--分页--&
&& &div class=&PageNext&&&/div&
&& &table width=&90%& border=&0& align=&center& cellpadding=&2& cellspacing=&0& class=&tabp&&
&&&& &td class=&tdp&&
&&&&& 第2页
&&&& &/td&
&&&& &td class=&tdp&&
&&&&& 模式对话框下打印可能会报脚本错误“对象不支持此属性或方法”，如果想做类似的可以用open开一个网页是可以的，
&&&&& 或者在模式对话框中嵌一个iframe里面引用打印页（后一种方法我没有实际测试，有兴趣的人自行研究，顺便把结果告诉我...）
&&&& &/td&
&&&& &td class=&tdp&&
&&&& &/td&
&&&& &td class=&tdp&&
&&&& &/td&
&& &/table&
&& &hr align=&center& width=&90%& size=&1& noshade class=&hr&&
&& &div class=&PageNext&&&/div&
&& &table width=&90%& border=&0& align=&center& cellpadding=&2& cellspacing=&0& class=&tabp&&
&&&& &td class=&tdp&&
&&&&& 第3页
&&&& &/td&
&&&& &td class=&tdp&&
&&&&& 打印预览中，你会看到最下方有显示分页的地方，你可以预览自己的设置是否成功
&&&& &/td&
&&&& &td class=&tdp&&
&&&& &/td&
&&&& &td class=&tdp&&
&&&& &/td&
&&&& &td class=&tdp&&
&&&&& &table width=&100%& border=&0& cellspacing=&0& cellpadding=&0&&
&&&&&& &tr&
&&&&&&& &td width=&50%& class=&tdp&&
&&&&&&&& 最后就是：
&&&&&&&& &font color=&#ff0000&&&strong&java风暴qq群：&/strong&&/font&&
&&&&&&&& &font color=&#ff8000&&本人qq：&/font&&
&&&&&&& &/td&
&&&&&& &/tr&
&&&&& &/table&
&&&& &/td&
&& &/table&
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：1573493次
积分：16138
积分：16138
排名：第655名
原创：263篇
转载：433篇
评论：228条
(2)(1)(7)(8)(8)(8)(3)(2)(11)(2)(5)(6)(1)(4)(25)(21)(12)(12)(16)(6)(22)(33)(20)(31)(10)(4)(5)(19)(10)(4)(14)(16)(10)(24)(8)(63)(19)(25)(22)(44)(13)(7)(15)(15)(22)(14)(41)(11)