会熟练使用windows操作系统,知道如何打开一个记事本,如何输入文字及文件存盘(如果这些都不会,请参看第一讲)
首先看上次我们说到的一个最基本的网页框架Html的标签代码:
<!-- test.html -->
<html>
<head>
<title>第一个web页面</title>
</head>
<body>
Html第三讲----如何控制字号和字体、颜色
1.设置页面正文章节的标题
在html中我们可以使用设置章节标题的标签(tag):<Hn>...</Hn> n=1,2....6, 在这里n表示的是主体区现实正文章节标题的级别.下面我们动手实际做一下.新建一个test1.htm文件.在记事本中打开这个文件并输入以下代码:
<html>
<head>
<title>设置字号</title>
</head>
<body>
<!--开始设置字号-->
<H2>第三讲 用HTML制作文本页面</H2>
<H3>控制字的字号和颜色</H3>
<H4>字号设置的技巧</H4>
<H5>设置页面正文章节的标题</H5>
Html中设置字号的标注有多种,我们可以使用其中之一设置章节标题的标注
</body>
</html>
输入完毕并保存以后打开test2.htm预览.可以看到页面正文,文字部分以不同的字号出现,标题字号明显比正文部分大.而且不同的标题字号有不同的级别在这里以大小表示出来.(*注: 在<hn>...</hn>这对标签会自动插入空行,所以不必用html标签<br>在来换行.因此在一行中无法使用不同大小的字体.
2.设置正文页面的字号
大家也看到了.使用章节标题字号的标签<hn>...</hn>无法在同一行中使用不通大小的字体.那么我们如何才能在正文里使用不同大小的字号呢?这里就要说到正文页面的字号设置方法和技巧了.这种方法的HTML标注为:
<font size=n>...</font> ,字号n=1,2....7
比如<font size="3">这里是正文的文字大小</font>
此外字体大小还可以利用默认值,这时size用"+n";"-n"设置成一个相对的值.如果字体大小的默认值为3,(即BASEFONT SIZE=3),则<font size=+2>就相当于<font size=5>. 设置字符的字体大小默认值的一对标注为<BASEFONT SIZE=N>....<BASEFONT> n=1,2....7. 那么如果你这样设置以后,这对标注之间的输出的字体默认大小即为n,在这里需要说明的是其后即这对标签之外的字体大小默认值还将回复成为原来的值. 动手做一做,打开刚刚我们建立的test2.htm并做以下修改保存:
<html>
<head>
<title>设置字号</title>
</head>
<body>
<!--开始设置字号-->
<H2>第三讲 用HTML制作文本页面</H2>
<H3>控制字的字号和颜色</H3>
<H4>字号设置的技巧</H4>
<H5>设置页面正文章节的标题</H5>
Html中<font size=-1>设置</font>字体大小<font size=5>(字号)</font>的标注有多种,我们可以使用其中之一设置章节标题的标注
</body>
</html>
保存后预览,发现变化了吗?是的,在同一行中我们可以定义不同大小的字号了.在这里要提的是在HTML中如果不指定<basefont size=n></basefont>的N的值,那么网页的缺省的默认字体大小为n=3.另外要提的是<hn>...</hn>标签不能结合字体风格等标注使用,而其他的方法却另外可以定义字体风格,这将在后面介绍.
3.字符颜色的控制(重点 理解color属性结合<font></font>标注的使用.难点:不同的颜色代码)
在HTML中控制字符颜色的标签是:
<FONT COLOR="#RRGGBB">...</FONT>
其中rr,gg,bb为两位的16进制数,设置颜色的值的范围是1,2....,255.指定颜色的另外一种方法是用HTML中定义的颜色常量.比如"red";"black";"blue"等.
打开test2.htm做如下修改并保存:
<html>
<head>
<title>设置字号</title>
</head>
<body>
<!--开始设置字号-->
<H2>第三讲 用HTML制作文本页面</H2>
<H3>控制字的字号和颜色</H3>
<H4>字号设置的技巧</H4>
<H5>设置页面正文章节的标题</H5>
<hr>
Html中<font size=-1>设置</font>字体大小<font size=5 color="#ff0000">(字号)</font>的标注有多种,我们可以使用其中之一设置章节标题的标注
</body>
</html>
保存后预览,我们发现"(字号)"除了大小为"5"号,而且颜色也变成了红色(#ff0000). 不知道大家注意到了没有,代码中我们新加了一个标注<hr>? 在预览中我们发现比未修改前多了一条横线,读者们可能已经想到了.对的那条横线就是<hr>来定义的.他如同换行<br>(它代表换行符,相当于回车)段落<p>(它代表段落,相当于回车再加了一行空行)标签一样不需要</Object>这样的和他对应的标注来结束.使用<hr>可产生水平线,就像你预览的效果一样,它的具体语法格式为:
<HR WIDTH=NN SIZE=NN NOSHADE> 其中:
width 用于指定分隔线的宽度;
size 用于指定分隔线的高度;
noshade 用于指定分隔线是不透明的;
nn的值可以使用绝对像素值,也可以使用相对值,相对值只用在后面加上"%"就可以了.比如"98%"
补充说一点内容:
大家都知道了HTML标签是<>...</>这样形式出现的.那么当我们要在浏览器上显示HTML标签该如何做?如果直接写的话,浏览器是会按照HTML来解释的.那不是无法显示了吗?对的,如果直接写的话浏览器是会按照这样去解释的.所以像"<" ">" "&" 等是HTML格式的控制码,在HTML中如果要在屏幕上显示的话必需有一种新的表示方法,用一些特殊组合的字符串来代替,相对应的关系如图所示:
此主题相关图片如下：
