一、文字样式设置的基本标签—
设置字体样式的基本标签是，被其包含的文本为样式作用区。在初学者的HTML代码编写中，容易被多重嵌套，如文本。还有一种情况是标签嵌套错位，如文本
。为了规范代码的编写，避免不必要的错误，读者在初学时一定要谨慎。
二、设置文字的颜色 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学习的本质就是该是什么就用什么 不但可以从代码4.7中学到color属性在font标签中的用法，还可以熟悉各种颜色的表示方法。
三、 设置文字的尺寸 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学习 可尝试在size值前面加上“＋”、“－”字符，更灵活地设置文字尺寸。
四、设置文字的字体 face也是
标签的属性，用于设置文字字体（字型）。HTML网页中显示的字型从浏览端的系统中调用，所以为了保持字型一致，建议采用宋体，HTML页面也是默认采用宋体。在D:\web\目录下创建网页文件，命名为font_face.htm，编写代码如代码4.9所示。
代码4.9 字体字型的设置：font_face.htm
字体字型的设置 字型为宋体：
沁园春·长沙-毛泽东 字型为楷体：
沁园春·长沙-毛泽东 字型为黑体：
沁园春·长沙-毛泽东 字型为隶书：
沁园春·长沙-毛泽东 五、 使文字倾斜 用双标签
可使被作用文字倾斜，达到特殊的效果，例如文章的日期。
被称为强调标签，也是斜体，目前使用比
标签更频繁，其编写方法如下：
这是斜体文字 这也是斜体文字 六、 使文字加粗 用双标签
可使被作用文字加粗，是文字更加醒目，例如文章的标题部分。
被称为特别强调标签，也是文字加粗，目前使用比
标签更频繁，其编写方法如下：
这是粗体文字 这也是粗体文字 七、给文字加下划线 用双标签
可添加下划线到被作用文字。以下为文字倾斜、加粗和下划线的综合示例。在D:\web\目录下创建网页文件，命名为font_style.htm，编写代码如代码4.10所示。
代码4.10 文字修饰的设置：font_style.htm
字体修饰的设置 斜体：沁园春·长沙-毛泽东
加粗体：沁园春·长沙-毛泽东
下划线：沁园春·长沙-毛泽东
斜体 加粗体 下划线：沁园春·长沙-毛泽东 — 注意：在多个标签包含同一块文字时，其包含顺序不能错位。
八、 多种标题样式的使用 网页的文章中，为了凸显标题的重要性，标题的样式比较特殊。HTML技术保护了一套针对标题的样式标签，分别为双标签
到，文字尺寸从大到小代表不同级别的标题。标题标签有一个特点，独占一行、文字加粗、文字居中。这样，在设置标题的时候就很轻松了，并且可设多级标题。在D:\web\目录下创建网页文件，命名为font_h.htm，编写代码如代码4.11所示。
代码4.11 标题的设置：font_h.htm
标题的设置
一号标题
二号标题
三号标题
四号标题
五号标题
六号标题
财富杂志：谷歌为何不会盛极而衰
遭遇潜在问题
一些业内人士认为，长期垄断互联网搜索和广告市场谷歌可能会盛极而衰。...与此同时，谷歌近日推出的多项新计划，例如开放手机联盟、社交网站通用平台OpenSocial、以及可能投资数十亿美元竞购无线频段，也遭到了广泛的质疑。
将继续垄断搜索
最近有一些文章称，如果出现更好的搜索引擎，人们会毫不犹豫地放弃谷歌。但是，即使真有更好的搜索引擎出现，谷歌仍然可以在一段时间内屹立不倒。...在这种情况下，网站速度往往会成为决定胜负的关键。
九、学会处理网页中的特殊字符 在HTML中，有一些字符有特殊含义，例如“<”和“>”是标签的左括号和右括号，而标签是控制HTML显示的，标签本身只能被浏览器解析，并不能在页面中显示。那么，该怎样在HTML中显示“<”和“>”呢？
特殊符号
HTML代码
特殊符号
HTML代码
<
<
™（商标符号）
™
>
>
®（注册符号）
®
“”（英文半角）
"
×
×
§
§
©（版权符号）
©
在D:\web\目录下创建网页文件，命名为string.htm，编写string.htm代码如代码4.12所示。
代码4.12 特殊字符的设置：string.htm
特殊字符的设置
标签的显示方法：<HTML>
引号的显示方法："英文半角双引号"
商标的显示方法：™
注册符号的显示方法：®
版权符号的显示方法：©
显示§
显示×
— 说明：单独显示符号&必须用代码&。
十、如何更方便地忽略浏览器对部分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 /><strong>十一、其他文字修饰方法</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></p> </div> <div class="tags"> </div> <div class="clear"> <div class="shares"> <b>声明：你问我答网所有作品（图文、音视频）均由用户自行上传分享，仅供网友学习交流。若您的权利被侵害，请联系fangmu6661024@163.com</b> <div id="share" class="share-component social-share" data-sites="weibo,qzone,qq,wechat"> </div> </div> <div class="act"> <a href="JavaScript:" onclick="zan('1928864530813083227')" class="zan" title="赞"> <i class="iconfont bx bx-like"></i> <span id="zan">0</span> </a> </div> </div> <div class="clear"></div> </div> <div class="ny-ad"> </div> <div class="ny-ad"> </div> <div class="like"> <h3 class="title">最新文章</h3> <div class="piclist likep"> <div class="li"> <div class="img"> <a href="https://w.sf024.com/info/1372862342300764899.html" title="请问六害损六亲，僧道可安身，父母虽刑克，妻儿损害人。扳星是贵人，聪明日日新，僧道多才子，文艺显达人"> <img src="https://w.sf024.com/assets/img/default.jpg" alt=""> </a> </div> <a href="https://w.sf024.com/ask/7" class="cat">文化 </a> <h3> <a href="https://w.sf024.com/info/1372862342300764899.html" title="请问六害损六亲，僧道可安身，父母虽刑克，妻儿损害人。扳星是贵人，聪明日日新，僧道多才子，文艺显达人">请问六害损六亲，僧道可安身，父母虽刑克，妻儿损害人。扳星是贵人，聪明日日新，僧道多才子，文艺显达人</a> </h3> <div class="meta"> <span class="time"> <i class="iconfont bx bx-time"></i> 04-15 </span> <span class="views"> <i class="iconfont bx bx-show"></i> 1455阅读 </span> </div> </div> <div class="li"> <div class="img"> <a href="https://w.sf024.com/info/492666715702014292.html" title="教学设计简笔画的书籍有哪些？？？"> <img src="https://w.sf024.com/assets/img/default.jpg" alt=""> </a> </div> <a href="https://w.sf024.com/ask/7" class="cat">文化 </a> <h3> <a href="https://w.sf024.com/info/492666715702014292.html" title="教学设计简笔画的书籍有哪些？？？">教学设计简笔画的书籍有哪些？？？</a> </h3> <div class="meta"> <span class="time"> <i class="iconfont bx bx-time"></i> 04-15 </span> <span class="views"> <i class="iconfont bx bx-show"></i> 116阅读 </span> </div> </div> <div class="li"> <div class="img"> <a href="https://w.sf024.com/info/1757292507155059308.html" title="说有iPad Pro这张壁纸，要原图"> <img src="https://w.sf024.com/assets/img/default.jpg" alt=""> </a> </div> <a href="https://w.sf024.com/ask/7" class="cat">文化 </a> <h3> <a href="https://w.sf024.com/info/1757292507155059308.html" title="说有iPad Pro这张壁纸，要原图">说有iPad Pro这张壁纸，要原图</a> </h3> <div class="meta"> <span class="time"> <i class="iconfont bx bx-time"></i> 04-15 </span> <span class="views"> <i class="iconfont bx bx-show"></i> 81阅读 </span> </div> </div> <div class="clear"></div> </div> </div> <div class="ny-ad"> </div> </div> <div class="sidebar"> <div class="widget postlist"> <h3>猜你喜欢</h3> <ul class="hasimg"> <li> <a href="https://w.sf024.com/info/1928864530813083227.html" title="网页设计怎么设置同意字体格式样式" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="网页设计怎么设置同意字体格式样式"> </a> <a href="https://w.sf024.com/info/1928864530813083227.html" target="">网页设计怎么设置同意字体格式样式...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 10-31 </span><span> <i class="iconfont bx bx-show"></i> 68阅读 </span> </p> </li> <li> <a href="https://w.sf024.com/info/396912903.html" title="用photoshop设计网页首页时，设置多少精度出来的网页图片精度高？" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="用photoshop设计网页首页时，设置多少精度出来的网页图片精度高？"> </a> <a href="https://w.sf024.com/info/396912903.html" target="">用photoshop设计网页首页...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 10-07 </span><span> <i class="iconfont bx bx-show"></i> 89阅读 </span> </p> </li> <li> <a href="https://w.sf024.com/info/351939159.html" title="网页设计中怎么用框架集设计网页" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="网页设计中怎么用框架集设计网页"> </a> <a href="https://w.sf024.com/info/351939159.html" target="">网页设计中怎么用框架集设计网页...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 04-02 </span><span> <i class="iconfont bx bx-show"></i> 166阅读 </span> </p> </li> <li> <a href="https://w.sf024.com/info/244863677283211964.html" title="网页设计的英文，网页设计的翻译，怎么用英语翻译网页" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="网页设计的英文，网页设计的翻译，怎么用英语翻译网页"> </a> <a href="https://w.sf024.com/info/244863677283211964.html" target="">网页设计的英文，网页设计的翻译，...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 09-20 </span><span> <i class="iconfont bx bx-show"></i> 173阅读 </span> </p> </li> <li> <a href="https://w.sf024.com/info/1898848994597221980.html" title="怎么获取免费网页设计作业成品" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="怎么获取免费网页设计作业成品"> </a> <a href="https://w.sf024.com/info/1898848994597221980.html" target="">怎么获取免费网页设计作业成品...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 08-04 </span><span> <i class="iconfont bx bx-show"></i> 58阅读 </span> </p> </li> <li> <a href="https://w.sf024.com/info/263664112597162005.html" title="淘宝网怎么做网页设计" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="淘宝网怎么做网页设计"> </a> <a href="https://w.sf024.com/info/263664112597162005.html" target="">淘宝网怎么做网页设计...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 03-17 </span><span> <i class="iconfont bx bx-show"></i> 72阅读 </span> </p> </li> <li> <a href="https://w.sf024.com/info/1545778806048964747.html" title="怎么用ps做网页设计" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="怎么用ps做网页设计"> </a> <a href="https://w.sf024.com/info/1545778806048964747.html" target="">怎么用ps做网页设计...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 09-26 </span><span> <i class="iconfont bx bx-show"></i> 119阅读 </span> </p> </li> <li> <a href="https://w.sf024.com/info/559923415282243324.html" title="怎么设计网页banner" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="怎么设计网页banner"> </a> <a href="https://w.sf024.com/info/559923415282243324.html" target="">怎么设计网页banner...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 07-26 </span><span> <i class="iconfont bx bx-show"></i> 90阅读 </span> </p> </li> <li> <a href="https://w.sf024.com/info/257887738.html" title="电子商务专业的学生可以考网页设计师吗？考网页设计师需要什么，该怎么学？" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="电子商务专业的学生可以考网页设计师吗？考网页设计师需要什么，该怎么学？"> </a> <a href="https://w.sf024.com/info/257887738.html" target="">电子商务专业的学生可以考网页设计...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 04-15 </span><span> <i class="iconfont bx bx-show"></i> 73阅读 </span> </p> </li> <li> <a href="https://w.sf024.com/info/1759553191623078268.html" title="请问网页表单怎么设计比较吸引？" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="请问网页表单怎么设计比较吸引？"> </a> <a href="https://w.sf024.com/info/1759553191623078268.html" target="">请问网页表单怎么设计比较吸引？...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 04-19 </span><span> <i class="iconfont bx bx-show"></i> 86阅读 </span> </p> </li> </ul> </div> </div> </div> </section> <footer class="footer"> <div class="container"> <p class="copyright">COPYRIGHT 2013 - 2024 你问我答网®. ALL RIGHTS RESERVED. | <a href="https://beian.miit.gov.cn/" target="_blank">豫ICP备2020035127号</a></p> </div> </footer> <script> let search_type="1"; var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?752ceaa2e03e39366ceff9a414a1f6a7"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })();</script> <script type="text/javascript" src="https://w.sf024.com/assets/js/jquery.share.min.js"></script> </body> </html>
]]></plaintext></div></div> 