实验2 设计网页正文
1.文字格式
文字格式主要是用一些HTML元素来标记的少量文本,用来更改文字的大小、字体、颜等属性。另外还能为文本增加如粗体、斜体、上标以及下标等修饰效果。
1.1设置文字大小
在HTML元素里,FONT元素可以用来显示文字的属性,包括文字的大小、字体、颜等属性。其中设置文字大小的属性为SIZE。如下例。
<HTML>
<HEAD>
<TITLE>文字大小</TITLE>
</HEAD>
<BODY>
这是默认的文字大小<BR>
<FONT SIZE="1">1号字体大小</FONT><BR>
<FONT SIZE="2">2号字体大小</FONT><BR>
<FONT SIZE="3">3号字体大小</FONT><BR>
<FONT SIZE="4">4号字体大小</FONT><BR>
<FONT SIZE="5">5号字体大小</FONT><BR>
<FONT SIZE="6">6号字体大小</FONT><BR>
<FONT SIZE="7">7号字体大小</FONT><BR>
</BODY>
</HTML>
其中有效数字范围是1~7. <BR>表示换行
1.2 标题元素
<HTML>
<HEAD>
<TITLE>标题元素</TITLE>
</HEAD>
<BODY>
<H1 ALIGN="CENTER">标题1</H1>
<H2 ALIGN="LEFT">标题2</H2>
<H3 ALIGN="RIGHT">标题3</H3>
<H4 ALIGN="JUSTIFY">标题4</H4>
<H5>标题5</H5>
<H6>标题6</H6>
这是默认的文字大小<BR>
</BODY>
</HTML>
其中,ALIGN是对齐方式。有LEFT, RIGHT, CENTER, JUSTIFY.
html设置字体颜属性
试用以下源代码
<HTML>
<HEAD>
<TITLE>标题元素与FONT元素的比较</TITLE>
</HEAD>
<BODY>
<H3>FONT元素:</H3>
<FONT SIZE=1>FONT元素</FONT><FONT SIZE=2>可以</FONT><FONT SIZE=3>
为一段文字中的某几个字</FONT><FONT SIZE=4>设置大小,</FONT><FONT SIZE=5>如
</FONT><FONT SIZE=6>现在</FONT><FONT SIZE=7>这段文字</FONT>。
<H3>标题元素:</H3>
<H1>不能将一段文字中的某几个字设为不同的标题,</H1><H2>如果设置的话,
</H2><H3>就不成为一段文字,</H3><H4>而成为多段文字了。</H4>
</BODY>
</HTML>
1.3设置字体
文字可以设置成多种字体,中文的有宋体、黑体等,英文的有Arial , Times New Roman等。<HTML>
<HEAD>
<TITLE>设置字体</TITLE>
</HEAD>
<BODY>
这是默认的字体<BR>
<FONT FACE="宋体">这是字体名为“宋体”的文字</FONT><BR>
<FONT FACE="黑体">这是字体名为“黑体”的文字</FONT><BR>
<FONT FACE="仿宋_GB2312">这是字体名为“仿宋_GB2312”的文字</FONT><BR>
<FONT FACE="楷体_GB2312">这是字体名为“楷体_GB2312”的文字</FONT><BR>
<FONT FACE="隶书">这是字体名为“隶书”的文字</FONT><BR>
<FONT FACE="华文行楷">这是字体名为“华文行楷”的文字</FONT><BR>
<FONT FACE="Arial">Arial</FONT><BR>
<FONT FACE="Freestyle Script">Freestyle Script</FONT><BR>
<FONT FACE="Harlow Solid Italic">Harlow Solid Italic</FONT><BR>
下面是一些好玩的字体:<BR>
<FONT FACE="Wingdings 1">Wingdings 1</FONT><BR>
<FONT FACE="Wingdings 2">Wingdings 2</FONT><BR>
<FONT FACE="Wingdings 2">Wingdings 3</FONT><BR>
</BODY>
</HTML>
其中,设置字体用Font中的FACE属性。要想知道自己的计算机里安装了什么字体,可以到windows\Fonts目录下看到。
1.4设置文字的颜
看以下代码
<HTML>
<HEAD>
<TITLE>设置文字颜</TITLE>
</HEAD>
<BODY>
以下是预定义的十六种颜:<BR>
<FONT COLOR="Red">Red:红</FONT><br>
<FONT COLOR="Yellow">Yellow:黄</FONT><br>
<FONT COLOR="Blue">Blue:蓝</FONT><br>
<FONT COLOR="Navy">Navy:深蓝</FONT><br>
<FONT COLOR="Green">Green:绿</FONT><br>
<FONT COLOR="Lime">Lime:浅绿</FONT><br>
<FONT COLOR="Aqua">Aqua:水绿</FONT><br>
<FONT COLOR="Olive">Olive:橄榄绿</FONT><br>
<<FONT COLOR="Black">Black:黑</FONT><br>
<FONT COLOR="Gray">Gray:灰</FONT><br>
<FONT COLOR="Silver">Silver:银</FONT><br>
<FONT COLOR="Maroon">Maroon:褐</FONT><br>
<FONT COLOR="Purple">Purple:紫</FONT><br>
<FONT COLOR="Fuchsia">Fuchsia:紫红</FONT><br>
<FONT COLOR="Teal">Teal:深青</FONT><br>
<FONT COLOR="White">White:白</FONT><br>以下是使用的是RGB颜:<br>
<FONT COLOR="#8A2BE2">8A2BE2</FONT><br>
<FONT COLOR="#7FFF00">7FFF00</FONT>
</BODY>
</HTML>
1.5粗体与斜体
<HTML>
<HEAD>
<TITLE>粗体与斜体</TITLE>
</HEAD>
<BODY>
<FONT SIZE=4>
这是四号文字大小<BR>
<B>这是使用B元素加粗的四号文字</B><BR>
<I>这是使用I元素倾斜的四号文字</I><BR>
<STRONG>这是使用STRONG元素加粗的四号文字</STRONG><BR>
<EM>这是使用EM元素倾斜的四号文字</EM><BR>
<BIG>这是加大的四号文字</BIG><BR>
</FONT>
</BODY>
</HTML>
1.6上标与下标
<HTML>
<HEAD>
<TITLE>上标与下标</TITLE>
</HEAD>
<BODY>
<FONT SIZE=4>
水的分子式是:H<SUB>2</SUB>O<BR>
3<SUP>2</SUP>等于9
</FONT>
</BODY>
</HTML>
1.7删除线与下划线
<HTML>
<HEAD>
<TITLE>删除线与下划线</TITLE>
</HEAD>
<BODY>
<DEL>删除线</DEL><BR>
<INS>插入线</INS><BR>
</BODY>
</HTML>
1.8综合使用字体属性
<HTML>
<HEAD>
<TITLE>综合使用字体属性</TITLE>
</HEAD>
<BODY>
这是默认的文字<BR>
<FONT SIZE="4" COLOR="RED" FACE="宋体">红的四号宋体文字</FONT><BR> <FONT COLOR="RED">
<FONT FACE="宋体">
<FONT SIZE="4">这也是红的四号宋体文字</FONT>
</FONT>
</FONT>
</BODY>
</HTML>