带来一篇HTML网页各类字体魄式的细节润色

只看该作者 · 发表于 2015-1-15 23:27:31

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

HTML5草案的前身名为WebApplications1.0，于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的HTML工作团队。网页制造WEB文章简介：本节从笔墨的细节润色动手，使读者能掌控HTML的各类字体魄式的变更，制造出更加专业的网页。
4.2笔墨的多样化润色
上一节进修了年夜块段落的各类设置，关于笔墨自己润色仿佛加倍吸惹人。本节从笔墨的细节润色动手，使读者能掌控HTML的各类字体魄式的变更，制造出更加专业的网页。
4.2.1笔墨款式设置的基础标签—
设置字体款式的基础标签是，被其包括的文本为款式感化区。在初学者的HTML代码编写中，简单被多重嵌套，如<font属性1=值1><font属性2=值2>文本。另有一种情形是标签嵌套错位，如文本。为了标准代码的编写，制止不用要的毛病，读者在初学时必定要审慎。
4.2.2设置笔墨的色彩
color是标签的属性之一，用于设置笔墨色彩。在D:web目次下创立网页文件，定名为font_color.htm，编写代码如代码4.7所示。
代码4.7字体色彩的设置：font_color.htm
<html>
<head>
<title>字体色彩的设置</title>
</head>
<body>
浅白色笔墨：<fontcolor="#dd0000">HTML进修的实质就是该是甚么就用甚么 
深白色笔墨：<fontcolor="#660000">HTML进修的实质就是该是甚么就用甚么 
浅绿色笔墨：<fontcolor="#00dd00">HTML进修的实质就是该是甚么就用甚么 
深绿色笔墨：<fontcolor="#006600">HTML进修的实质就是该是甚么就用甚么 
浅蓝色笔墨：<fontcolor="#0000dd">HTML进修的实质就是该是甚么就用甚么 
深蓝色笔墨：<fontcolor="#000066">HTML进修的实质就是该是甚么就用甚么 
浅黄色笔墨：<fontcolor="#dddd00">HTML进修的实质就是该是甚么就用甚么 
深黄色笔墨：<fontcolor="#666600">HTML进修的实质就是该是甚么就用甚么 
浅青色笔墨：<fontcolor="#00dddd">HTML进修的实质就是该是甚么就用甚么 
深青色笔墨：<fontcolor="#006666">HTML进修的实质就是该是甚么就用甚么 
浅紫色笔墨：<fontcolor="#dd00dd">HTML进修的实质就是该是甚么就用甚么 
深紫色笔墨：<fontcolor="#660066">HTML进修的实质就是该是甚么就用甚么 
</body>
</html>
在扫瞄器地点栏输出http://localhost/font_color.htm，扫瞄效果如.7所示。

登录/注册后可看大图

.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
<html>
<head>
<title>字体尺寸的设置</title>
</head>
<body>
size为1：<fontsize="1">HTML进修 
size为2：<fontsize="2">HTML进修 
size为3：<fontsize="3">HTML进修 
size为4：<fontsize="4">HTML进修 
size为5：<fontsize="5">HTML进修 
size为6：<fontsize="6">HTML进修 
size为7：<fontsize="7">HTML进修 
</body>
</html>
在扫瞄器地点栏输出http://localhost/font_size.htm，扫瞄效果如.8所示。

登录/注册后可看大图

.8字体尺寸的设置
读者可实验在size值后面加上“＋”、“－”字符，更天真地设置笔墨尺寸。
4.2.4设置笔墨的字体
face也是标签的属性，用于设置笔墨字体（字型）。HTML网页中显现的字型从扫瞄真个体系中挪用，以是为了坚持字型分歧，倡议接纳宋体，HTML页面也是默许接纳宋体。在D:web目次下创立网页文件，定名为font_face.htm，编写代码如代码4.9所示。
代码4.9字体字型的设置：font_face.htm
<html>
<head>
<title>字体字型的设置</title>
</head>
<body>
字型为宋体：<fontsize="5">沁园春·长沙-毛泽东 
字型为楷体：<fontsize="5">沁园春·长沙-毛泽东 
字型为黑体：<fontsize="5">沁园春·长沙-毛泽东 
字型为隶书：<fontsize="5">沁园春·长沙-毛泽东
</body>
</html>
在扫瞄器地点栏输出http://localhost/font_face.htm，扫瞄效果如.9所示。

登录/注册后可看大图

.9字体字型的设置
笔者把被修正字型部分的笔墨尺寸设置为5号，便利读者检察。
4.2.5使笔墨倾斜
用双标签可以使被感化笔墨倾斜，到达特别的效果，比方文章的日期。被称为夸大标签，也是斜体，今朝利用比标签更频仍，其编写办法以下：
这是斜体笔墨
这也是斜体笔墨
4.2.6使笔墨加粗
用双标签可以使被感化笔墨加粗，是笔墨加倍夺目，比方文章的题目部分。被称为出格夸大标签，也是笔墨加粗，今朝利用比标签更频仍，其编写办法以下：
这是粗体笔墨
这也是粗体笔墨
4.2.7给笔墨加下划线
用双标签可增加下划线到被感化笔墨。以下为笔墨倾斜、加粗和下划线的综合示例。在D:web目次下创立网页文件，定名为font_style.htm，编写代码如代码4.10所示。
代码4.10笔墨润色的设置：font_style.htm
<html>
<head>
<title>字体润色的设置</title>
</head>
<body>
<fontsize="5">斜体：沁园春·长沙-毛泽东 
加粗体：沁园春·长沙-毛泽东 
下划线：沁园春·长沙-毛泽东 
斜体+加粗体+下划线：沁园春·长沙-毛泽东
</body>
</html>
在扫瞄器地点栏输出http://localhost/font_style.htm，扫瞄效果如.10所示。

登录/注册后可看大图

.10字体润色的设置
笔者把<body></body>内的一切笔墨尺寸设置为5号，便利读者检察。
—注重：在多个标签包括统一块笔墨时，其包括按次不克不及错位。
4.2.8多种题目款式的利用
网页的文章中，为了凸显题目的主要性，题目的款式对照特别。HTML手艺回护了一套针对题目的款式标签，分离为双标签<h1>到<h6>，笔墨尺寸从年夜到小代表分歧级其余题目。题目标签有一个特性，独有一行、笔墨加粗、笔墨居中。如许，在设置题目的时分就很轻松了，而且可设多级题目。在D:web目次下创立网页文件，定名为font_h.htm，编写代码如代码4.11所示。
代码4.11题目的设置：font_h.htm
<html>
<head>
<title>题目的设置</title>
</head>
<body>
<h1>一号题目</h1>
<h2>二号题目</h2>
<h3>三号题目</h3>
<h4>四号题目</h4>
<h5>五号题目</h5>
<h6>六号题目</h6>
<h1>财产杂志：谷歌为什么不会盛极而衰</h1>
　　　<h3>遭受潜伏成绩</h3>
　　一些业内助士以为，临时把持互联网搜刮和告白市场谷歌大概会盛极而衰。...与此同时，谷歌克日推出的多项新企图，比方开撒手机同盟、交际网站通用平台OpenSocial、和大概投资数十亿美圆竞购无线频段，也遭到了普遍的质疑。
　　<h3>将持续把持搜刮</h3>
　　比来有一些文章称，假如呈现更好的搜刮引擎，人们会坚决果断地保持谷歌。可是，即便真有更好的搜刮引擎呈现，谷歌仍旧能够在一段工夫内挺立不倒。...在这类情形下，网站速率常常会成为决意胜败的关头。
</body>
</html>
在扫瞄器地点栏输出http://localhost/font_h.htm，扫瞄效果如.11所示。

登录/注册后可看大图

.11题目的设置
4.2.9学会处置网页中的特别字符
在HTML中，有一些字符有特别寄义，比方“<”和“>”是标签的左括号和右括号，而标签是把持HTML显现的，标签自己只能被扫瞄器剖析，其实不能在页面中显现。那末，该如何在HTML中显现“<”和“>”呢？HTML划定了一些特别字符的写法，以便在网页中显现，如表4.1所示。
表4.1HTML中的特别字符

特别标记

HTML代码

特别标记

HTML代码

<
<
™（商标标记）
™
>
>

只看该作者 · 发表于 2015-1-16 17:54:27

Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。

只看该作者 · 发表于 2015-1-18 19:50:25

Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。

只看该作者 · 发表于 2015-1-27 19:16:33

技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。

只看该作者 · 发表于 2015-2-5 14:53:24

Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。

只看该作者 · 发表于 2015-2-12 10:16:36

Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

只看该作者 · 发表于 2015-3-3 03:07:43

难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.

只看该作者 · 发表于 2015-3-11 09:38:41

使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

只看该作者 · 发表于 2015-3-18 10:41:46

滚动条)层属性--溢出(visible/hidden/scroll/auto)

只看该作者 · 发表于 2015-3-25 22:13:23

只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。

		自动登录	找回密码
密码			立即注册

[HTML5] 带来一篇HTML网页各类字体魄式的细节润色

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子

带来一篇HTML网页各类字体魄式的细节润色