导读：
本节从文字的细节修饰入手，使读者能把握HTML的各种字体格式的变化，制作出更为专业的网页。 4.2 文字的多样化修饰上一节学习了大块段落的各种设置，对于文字本身修饰似乎更加吸...
本节从文字的细节修饰入手，使读者能把握HTML的各种字体格式的变化，制作出更为专业的网页。
4.2 文字的多样化修饰
上一节学习了大块段落的各种设置，对于文字本身修饰似乎更加吸引人。本节从文字的细节修饰入手，使读者能
本节从文字的细节修饰入手，使读者能把握HTML的各种字体格式的变化，制作出更为专业的网页。
4.2 文字的多样化修饰
上一节学习了大块段落的各种设置，对于文字本身修饰似乎更加吸引人。本节从文字的细节修饰入手，使读者能把握HTML的各种字体格式的变化，制作出更为专业的网页。
4.2.1 文字样式设置的基本标签—
设置字体样式的基本标签是
，被其包含的文本为样式作用区。在初学者的HTML代码编写中，
容易被多重嵌套，如
文本。还有一种情况是标签嵌套错位，如
文本
。为了规范代码的编写，避免不必要的错误，读者在初学时一定要谨慎。
4.2.2 设置文字的颜色
color是
标签的属性之一，用于设置文字颜色。在D:web目录下创建网页文件，命名为font_color.htm，编写代码如代码4.7所示。
代码4.7 字体颜色的设置：font_color.htm
字体颜色的设置
浅红色文字：
HTML学习的本质就是该是什么就用什么
深红色文字：
HTML学习的本质就是该是什么就用什么
浅绿色文字：
HTML学习的本质就是该是什么就用什么
深绿色文字：
HTML学习的本质就是该是什么就用什么
浅蓝色文字：
HTML学习的本质就是该是什么就用什么
深蓝色文字：
HTML学习的本质就是该是什么就用什么
浅黄色文字：
HTML学习的本质就是该是什么就用什么
深黄色文字：
HTML学习的本质就是该是什么就用什么
浅青色文字：
HTML学习的本质就是该是什么就用什么
深青色文字：
HTML学习的本质就是该是什么就用什么
浅紫色文字：
HTML学习的本质就是该是什么就用什么
深紫色文字：
HTML学习的本质就是该是什么就用什么
在浏览器地址栏输入http://localhost/font_color.htm，浏览效果如图4.7所示。
图4.7 字体颜色的设置
读者不但可以从代码4.7中学到color属性在font标签中的用法，还可以熟悉各种颜色的表示方法。
4.2.3 设置文字的尺寸
size也是
标签的属性，用于设置文字大小。size的值为1-7，默认为3。我们可以size 属性值之前加上“＋”、“－”字符，来指定相对于字号初始值的增量或减量。在D:web目录下创建网页文件，命名为font_size.htm，编写代码如代码4.8所示。
代码4.8 字体尺寸的设置：font_size.htm
字体尺寸的设置
size为1：
HTML学习
size为2：
HTML学习
size为3：
HTML学习
size为4：
HTML学习
size为5：
HTML学习
size为6：
HTML学习
size为7：
HTML学习
在浏览器地址栏输入http://localhost/font_size.htm，浏览效果如图4.8所示。
图4.8 字体尺寸的设置
读者可尝试在size值前面加上“＋”、“－”字符，更灵活地设置文字尺寸。
4.2.4 设置文字的字体
face也是
标签的属性，用于设置文字字体（字型）。HTML网页中显示的字型从浏览端的系统中调用，所以为了保持字型一致，建议采用宋体，HTML页面也是默认采用宋体。在D:web目录下创建网页文件，命名为font_face.htm，编写代码如代码4.9所示。
代码4.9 字体字型的设置：font_face.htm
字体字型的设置
字型为宋体：
沁园春·长沙-毛泽东
字型为楷体：
沁园春·长沙-毛泽东
字型为黑体：
沁园春·长沙-毛泽东
字型为隶书：
沁园春·长沙-毛泽东
在浏览器地址栏输入http://localhost/font_face.htm，浏览效果如图4.9所示。
图4.9 字体字型的设置
笔者把被修改字型部分的文字尺寸设置为5号，方便读者查看。
4.2.5 使文字倾斜
用双标签
可使被作用文字倾斜，达到特殊的效果，例如文章的日期。
被称为强调标签，也是斜体，目前使用比
标签更频繁，其编写方法如下：
这是斜体文字
这也是斜体文字
4.2.6 使文字加粗
用双标签
可使被作用文字加粗，是文字更加醒目，例如文章的标题部分。
被称为特别强调标签，也是文字加粗，目前使用比
标签更频繁，其编写方法如下：
这是粗体文字
这也是粗体文字
4.2.7 给文字加下划线
用双标签
可添加下划线到被作用文字。以下为文字倾斜、加粗和下划线的综合示例。在D:web目录下创建网页文件，命名为font_style.htm，编写代码如代码4.10所示。
代码4.10 文字修饰的设置：font_style.htm
字体修饰的设置
斜体：沁园春·长沙-毛泽东
加粗体：沁园春·长沙-毛泽东
下划线：沁园春·长沙-毛泽东
斜体 加粗体 下划线：沁园春·长沙-毛泽东
在浏览器地址栏输入http://localhost/font_style.htm，浏览效果如图4.10所示。
图4.10 字体修饰的设置
笔者把内的所有文字尺寸设置为5号，方便读者查看。
— 注意：在多个标签包含同一块文字时，其包含顺序不能错位。
4.2.8 多种标题样式的使用
网页的文章中，为了凸显标题的重要性，标题的样式比较特殊。HTML技术保护了一套针对标题的样式标签，分别为双标签
到，文字尺寸从大到小代表不同级别的标题。标题标签有一个特点，独占一行、文字加粗、文字居中。这样，在设置标题的时候就很轻松了，并且可设多级标题。在D:web目录下创建网页文件，命名为font_h.htm，编写代码如代码4.11所示。
代码4.11 标题的设置：font_h.htm
标题的设置
一号标题
二号标题
三号标题
四号标题
五号标题
六号标题
财富杂志：谷歌为何不会盛极而衰
遭遇潜在问题
一些业内人士认为，长期垄断互联网搜索和广告市场谷歌可能会盛极而衰。...与此同时，谷歌近日推出的多项新计划，例如开放手机联盟、社交网站通用平台OpenSocial、以及可能投资数十亿美元竞购无线频段，也遭到了广泛的质疑。
将继续垄断搜索
最近有一些文章称，如果出现更好的搜索引擎，人们会毫不犹豫地放弃谷歌。但是，即使真有更好的搜索引擎出现，谷歌仍然可以在一段时间内屹立不倒。...在这种情况下，网站速度往往会成为决定胜负的关键。
在浏览器地址栏输入http://localhost/font_h.htm，浏览效果如图4.11所示。
图4.11 标题的设置
4.2.9 学会处理网页中的特殊字符
在HTML中，有一些字符有特殊含义，例如“<”和“>”是标签的左括号和右括号，而标签是控制HTML显示的，标签本身只能被浏览器解析，并不能在页面中显示。那么，该怎样在HTML中显示“<”和“>”呢？HTML规定了一些特殊字符的写法，以便在网页中显示，如表4.1所示。
表4.1 HTML中的特殊字符
特殊符号
HTML代码
特殊符号
HTML代码
<
<
™（商标符号）
™
>
>
®（注册符号）
®
“”（英文半角）
"
×
×
§
§
©（版权符号）
©
在D:web目录下创建网页文件，命名为string.htm，编写string.htm代码如代码4.12所示。
代码4.12 特殊字符的设置：string.htm
特殊字符的设置
标签的显示方法：<HTML>
引号的显示方法："英文半角双引号"
商标的显示方法：™
注册符号的显示方法：®
版权符号的显示方法：©
显示§
显示×
在浏览器地址栏输入http://localhost/string.htm，浏览效果如图4.12所示。
图4.12 特殊字符的设置
— 说明：单独显示符号&必须用代码&。
4.2.10 如何更方便地忽略浏览器对部分HTML的解析
如果在网页中作一个类似本书的HTML代码示例，恐怕得把所有的<和>转换成<和>，显得比较麻烦。HTML代码中的
<![CDATA[和<xmp></xmp>可以轻松解决这个问题。
<br><plaintext>是单标签，它插入到HTML代码中时，其后面的所有HTML标签全部失效，即浏览器对<plaintext>后面所有的HTML标签不作解析，直接在页面上显示。
<br><xmp></xmp>是双标签，它只使其包含的内容中的标签失效，<xmp></xmp>的使用更为普遍。在D:web目录下创建网页文件，命名为html.htm，编写代码如代码4.13所示。
<br>代码4.13 忽略标签的设置：html.htm
<br><html>
<br><head>
<br> <title>忽略标签的设置</title>
<br></head>
<br><body>
<br><h2>沁园春·长沙</h2>
<br><xmp>独立寒秋，<strong>湘江北去</strong>，橘子洲头。 <br />看万山红遍，层林尽染； <br />漫江碧透，<u>百舸争流。</u> <br /></xmp>
<br>鹰击长空，<strong>鱼翔浅底，</strong> <br />万类霜天竞自由。 <br />怅寥廓，<u>问苍茫大地</u>，谁主沉浮？<br />
<br><plaintext>
<br>携来百侣曾游，<br />忆往昔峥嵘岁月稠。 <br /> 恰同学少年，风华正茂； <br /> 书生意气，挥斥方遒。 <br /> 指点江山，激扬文字， <br /> 粪土当年万户侯。 <br /> 曾记否，<strong>到中流击水</strong>，浪遏飞舟！
<br></body>
<br></html>
<br>在浏览器地址栏输入http://localhost/string.htm，浏览效果如图4.13所示。
<br><img height="210" alt="" width="345" src="http://static.nbla.cn/Uploads/image/2017-03-30/14908531328474.jpg?watermark/1/image/aHR0cDovL3N0YXRpYy5uYmxhLmNuLzEzMTAxMTYxMDktMi5wbmc=/dissolve/100/gravity/SouthEast/dx/10/dy/0"><br>图4.13 忽略标签的设置
<br><strong>4.2.11 其他文字修饰方法</strong>
<br>为了满足不同领域的需要，HTML还有其他修饰文字的标签。比较常用的有上标格式标签和下标格式标签。某些场合甚至要用到删除效果，即可用HTML的中划线标签。
<br>— 上标格式标签为双标签<sup></sup>，多用于数学指数的表示，比如某个数的平方或立方。
<br>— 下标格式标签为双标签<sub></sub>，多用于注释，以及数学的底数表示。
<br>— 中划线标签为双标签<strike></strike>，多用于删除效果。
<br>在D:web目录下创建网页文件，命名为other.htm，编写代码如代码4.14所示。
<br>代码4.14 其他修饰标签的设置：other.htm
<br><html>
<br><head>
<br> <title>其他修饰标签的设置</title>
<br></head>
<br><body>
<br><font size="5">
<br>沁园春<sup>长沙</sup>！<br />
<br>数学指数的表示：2<sup>3</sup>=8、100<sup>2</sup>=10000<br /><hr />
<br>沁园春<sub>长沙</sub>！<br />
<br>数学底数的表示：log<sub>3</sub>81=4、log<sub>5</sub>125=3<br /><hr />
<br>删除效果：<strike>我被删除了</strike>
<br></font>
<br></body>
<br></html>
<br>在浏览器地址栏输入http://localhost/other.htm，浏览效果如图4.14所示。
<br><img height="163" alt="" width="318" src="http://static.nbla.cn/Uploads/image/2017-03-30/14908531323899.jpg?watermark/1/image/aHR0cDovL3N0YXRpYy5uYmxhLmNuLzEzMTAxMTYxMDktMi5wbmc=/dissolve/100/gravity/SouthEast/dx/10/dy/0"><br>图4.14 其他修饰标签的设置
<div class="clearfix divider_dashed333"></div>
<div class="lh24 f12 mt20 bb1e pb20">
<div class="fr" style=" padding-right: 20px">
<ul class="paginationa my_ajax">
<li id="fav_ek1AKMjeJBqDP9j_bottom"><a href="javascript:;" class="arfav"
data-info_id="ek1AKMjeJBqDP9j"
data-info_title="HTML网页各种字体格式的细节修饰_HTML/Xhtml_网页制"
data-info_num="11">收藏(<span
id="ar_fav">3</span>)</a></li>
<li id="zan_ek1AKMjeJBqDP9j_bottom"><a href="javascript:;" class="arzan"
data-info_id="ek1AKMjeJBqDP9j"
data-info_title="HTML网页各种字体格式的细节修饰_HTML/Xhtml_网页制"
data-info_num="11">赞(<span
id="ar_zan">74</span>)</a></li>
<li id="bao_ek1AKMjeJBqDP9j_bottom"><a href="javascript:;" class="arbao"
data-info_id="ek1AKMjeJBqDP9j"
data-info_title="HTML网页各种字体格式的细节修饰_HTML/Xhtml_网页制"
data-info_num="11">举报</a></li>
</ul>
</div>
<span class="f12 blue_lighten mr10 fr" style="width: 200px;">
<span class="lh24 f12 c9 fl">分享到：</span>
<div class="bdsharebuttonbox bdshare_t bds_tools get-codes-bdshare fl"><a href="#"
class="bds_qzone"
data-cmd="qzone"
title="分享到QQ空间"></a><a
href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#"
class="bds_tqq"
data-cmd="tqq"
title="分享到腾讯微博"></a><a
href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a><a href="#"
class="bds_weixin"
data-cmd="weixin"
title="分享到微信"></a><a
href="#" class="bds_more" data-cmd="more"></a></div>
</span>
</div>
<div class="clearfix divider_dashed333"></div>
</div>
<div class="clearfix"></div>
<div style="padding:0px 20px;">
<div class="one_half">
<div class="about_author">
<a href="https://www.nbla.cn/article/_ZGbk12vy0NMneKo.html">网页HTML代码讲解:有序列表和无序列表_HT...</a>
<br/>
本节学习HTML中的列表元素，列表形式在网站设计中占有比较大的比重，显示信息非常整齐直观，便于用户理解。在后面的CSS样式学习中将大量使用到列表元素的高级作用。
用于组织数据的列表
学习了这么多控制网页显示的HTML标签
本节学习HTML中的列表元素，列表形式在... </div>
</div>
<div class="one_half last">
<div class="about_author">
<a href="https://www.nbla.cn/article/_eOpZgMKD3K2bP81.html">202个免费的高质量XHTML模板(1)_HTML/Xht...</a>
<br/>
这里网页教学网推出了这些模板的第一部分——每个模板都是亲自挑选的，而且，我只选择那些对编码比较讲究或的确非常优秀的按照标准布局的模板。
对于网页设计师中的新手来说，总是希望能找些好的免费的模板来学习，那么颇为纠
这里脚本之家推出了这些模板的第一部分... </div>
</div>
<div class="clearfix margin_top5"></div>
<div class="one_half">
<div class="popular-posts-area">
<ul class="recent_posts_list">
<li><span><a href="https://www.nbla.cn/article/_xBrjZ2GY53qNYVd.html"><img src="http://static.nbla.cn/Uploads/image/2017-03-30/14908533337047.png?watermark/1/image/aHR0cDovL3N0YXRpYy5uYmxhLmNuLzEzMTAxMTYxMDktMi5wbmc=/dissolve/100/gravity/SouthEast/dx/10/dy/0" height="50px" width="50px" alt="有效网页表单的八条规则_HTML/Xhtml_网页制作" /></a></span><a href="https://www.nbla.cn/article/_xBrjZ2GY53qNYVd.html">有效网页表单的八条规则_HTML/Xhtml_网页制作</a>
<i>Jan 31, 2017</i>
</li><li><a href="https://www.nbla.cn/article/_o6VBpMXeye2Q0Yd.html">给网站添加 favicon的技巧 网址前面的小图标_HTM</a>
<i>Feb 01, 2017</i>
</li><li><a href="https://www.nbla.cn/article/_NBlx6M5Jdj2w4Zn.html">HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)</a>
<i>May 15, 2016</i>
</li><li><span><a href="https://www.nbla.cn/article/_Ekre6q0nKX287WZ.html"><img src="http://static.nbla.cn/Uploads/image/2019-09-17/15686974087070.png?watermark/1/image/aHR0cDovL3N0YXRpYy5uYmxhLmNuLzEzMTAxMTYxMDktMi5wbmc=/dissolve/100/gravity/SouthEast/dx/10/dy/0" height="50px" width="50px" alt="QQ快速登录的实现原理" /></a></span><a href="https://www.nbla.cn/article/_Ekre6q0nKX287WZ.html">QQ快速登录的实现原理</a>
<i>Sep 17, 2019</i>
</li>
</ul>
</div>
</div>
<div class="one_half last">
<div class="popular-posts-area">
<ul class="recent_posts_list">
<li><a href="https://www.nbla.cn/article/_AwpokL39YYMrEa7.html">HTML表格标记教程(39):表头的亮边框色属性BORDERC</a>
<i>Jan 01, 2017</i>
</li><li><a href="https://www.nbla.cn/article/_gjwA1qk8J1My9pZ.html">掌握常用的用于网页中引用内容的HTML标记_HTML/</a>
<i>Jan 26, 2017</i>
</li><li><span><a href="https://www.nbla.cn/article/_o7P3Gq991vq1lR6.html"><img src="http://static.nbla.cn/Uploads/image/2017-03-30/1490853391490.jpg?watermark/1/image/aHR0cDovL3N0YXRpYy5uYmxhLmNuLzEzMTAxMTYxMDktMi5wbmc=/dissolve/100/gravity/SouthEast/dx/10/dy/0" height="50px" width="50px" alt="使用整洁的HTML标记构建页面_HTML/Xhtml_网页制作什么是“整洁”..." /></a></span><a href="https://www.nbla.cn/article/_o7P3Gq991vq1lR6.html">使用整洁的HTML标记构建页面_HTML/Xhtml_网页制作什么是“整洁”的HTML标记？为什么要这样？只要能正常显示不就够了吗？可扩展，设备友好，语义化和易升级Do和Don't ("要"和"不要")</a>
<i>Feb 02, 2017</i>
</li><li><span><a href="https://www.nbla.cn/article/_KXV57MAVXr24BbO.html"><img src="http://static.nbla.cn/Uploads/image/2017-03-30/14908545364268.jpg?watermark/1/image/aHR0cDovL3N0YXRpYy5uYmxhLmNuLzEzMTAxMTYxMDktMi5wbmc=/dissolve/100/gravity/SouthEast/dx/10/dy/0" height="50px" width="50px" alt="IE9beta版本浏览器对HTML5/CSS3的支持_HTML/Xhtml_网页制IE9对CS..." /></a></span><a href="https://www.nbla.cn/article/_KXV57MAVXr24BbO.html">IE9beta版本浏览器对HTML5/CSS3的支持_HTML/Xhtml_网页制IE9对CSS3新特性的支持：IE9对CSS3选择器的支持：IE9对HTML5新特性的支持：IE9对HTML5表单的支持：</a>
<i>Feb 26, 2017</i>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="clearfix margin_top7"></div>
<div class="footer1 bggraph1">
<div class="container">
<div class="one_fourth">
<ul class="faddress">
<li id="myfooter">
<div class="logo"><a href="http://www.nbla.cn" id="logo"><span></span></a></div>
</li>
<li> php迷，一个php技术的分享社区，专属您自己的技术摘抄本、收藏夹。</li>
<li>在这里……</li>
</ul>
</div>
<div class="one_fourth">
<div class="ftags">
<h3 class="nocaps">Tags</h3>
<ul>
<li><a href="#">共同学习</a></li>
<li><a href="#">发现</a></li>
<li><a href="#"> 收藏</a></li>
<li><a href="#"> 分享</a></li>
<li><a href="#"> 共享</a></li>
<li><a href="#">共鸣</a></li>
<li><a href="#">专注</a></li>
<li><a href="#">共同进步</a></li>
</ul>
</div>
</div>
<div class="one_fourth">
<div class="twitter_feed">
<h3 class="nocaps">About</h3>
<div class="left"><i class="fa fa-twitter fa-lg"></i></div>
<div class="right">
<a href="javascript:;" target="_blank">特别鸣谢</a>
<a href="javascript:;" target="_blank">使用协议</a><br/><br/>
<a href="javascript:;" target="_blank">意见反馈</a>
<a href="javascript:;" target="_blank">网站投稿</a>
</div>
</div>
</div>
<div class="one_fourth last">
<!-- <h3 class="nocaps">We Group</h3> -->
<img src="https://www.nbla.cn/Template/Home/images/php_wx.jpg"
style="float:left;width: 110px; text-align: center;">
<img src="https://www.nbla.cn/Template/Home/images/php_xcx.jpg"
style="float:left;width: 110px; text-align: center;margin-left: 20px">
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="copyright_info">
<div class="container">
<div>
网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱 <a href="https://beian.miit.gov.cn" target="_blank">冀ICP备18013926号-2</a>
</div>
</div>
</div>
<a href="#" class="scrollup">Scroll</a>
</div>
<script type="text/javascript" src="https://www.nbla.cn/Template/Home/js/universal/jquery.js"></script>
<script src="https://www.nbla.cn/Template/Home/js/style-switcher/jquery-1.js"></script>
<script src="https://www.nbla.cn/Template/Home/js/style-switcher/styleselector.js"></script>
<script src="https://www.nbla.cn/Template/Home/js/mainmenu/bootstrap.min.js"></script>
<script src="https://www.nbla.cn/Template/Home/js/scrolltotop/totop.js" type="text/javascript"></script>
<script type="text/javascript" src="https://www.nbla.cn/Template/Home/js/mainmenu/sticky.js"></script>
<script type="text/javascript" src="https://www.nbla.cn/Template/Home/js/mainmenu/modernizr.custom.75180.js"></script>
<script type="text/javascript" src="https://www.nbla.cn/Template/Home/js/lightbox/jquery.fancybox.js"></script>
<script type="text/javascript" src="https://www.nbla.cn/Template/Home/js/lightbox/custom.js"></script>
<script src="https://www.nbla.cn/Template/Home/js/mainmenu/fhmm.js"></script>
<script type="text/javascript">
$('.dropdown-toggle').dropdownHover().dropdown();
$(document).on('click', '.fhmm .dropdown-menu', function (e) {
e.stopPropagation()
});
</script>
<script type="text/javascript" src="https://www.nbla.cn/Template/Home/js/customs.js"></script> <script src="https://www.nbla.cn/Template/Home/js/form/jquery.form.min.js"></script>
<script>
var baseUrl = 'https://www.nbla.cn/ajax/act';
</script>
<script type="text/javascript" src="https://www.nbla.cn/Template/Home/js/custom.js"></script>
</body>
</html>
]]></plaintext></div></div>