教学项目九 HTML文本 标志的使用
【 教学内容 】
讲解 HTML标准中的文本标志
【 教学目的 】
使学生了解标题元素,掌握字体,上下标,及特殊字符的标志
【 教学重点 】
1.字体标志的使用
2.网页中特殊符号的输入
【 新课 】
一, HTML中的文本标志
1,<pre></pre>
对文本进行预处理操作, 屏幕显示的效果和 HTML文档编辑版
面一样
例,
<html>
<head>
<title>预处理操作 </title>
</head>
<body bgcolor=yellow text=blue>
<pre>
念奴娇
赤壁怀古
大江东去, 浪淘尽
千古风流人物 故垒西边
人道是 三国周郎赤壁
</pre>
</body>
</html>
</body>
</html>
2,标题标志
<h1></h1>,<h2></h2>,<h3></h3>,h4></h4>,h5></h5>,<h6></h6>
用于设置文本的标题级别, 其中 <h1>是最大的标题, <h6>是最小的标题
例,
<html>
<head>
<title>标题标志使用 </title>
</head>
<body>
<h1>一级标题，字号最大 </h1>
<h2>二级标题, 字号次于一级标题 </h1>
<h3>三级标题，字号次于二级标题 </h3>
<h4>四级标题, 字号同普通文字 </h4>
<h5>五级标题, 字号小于普通文字 </h5>
<h6>六级标题, 字号最小 </h6>
</body>
</html>
3,字体标志 <b></b>,<i></i>,<u></u>
<b></b>文本加粗输出
<i></i>文本以斜体形式输出
<u></u>文本以下划线形式输出
4,上标与下标
上标,<sup></sup> 下标,<sub></sub>
例,
<html>
<head>
<title>上下标使用 </title>
</head>
<body bgcolor=yellow>
<p align=center>2H<sub>2</sub>+O<sub>2</sub>==2H<sub>2</sub>O</p>
<p>2X<sup>2</sup>+3X+4=6
</body>
</html>
5.<font></font>
用于设定文字的字体, 大小, 颜色,
属性如下,
(1) face:设定文字字体
(2) size:设定文字的大小, 值越大, 字体越大,预设值为 3
size=+1 表示字体的大小提升一级
size=-1 表示字体的大小下降一级
(3) color,设定文字的颜色
例,
<html>
<head>
<title>元素 FONT的使用 </title>
</head>
<body bgcolor=yellow>
<font face=宋体 color=blue>Q人类, Q生活 </font>
<p><font size=+2 face=隶书 color=green>欢 迎 光 临 本 站 点
</font></p>
<p><font size=-1 color=red>校园文学 </font>
</body>
</html>
6.特殊符号元素
空格
< 小于
> 大于
" 引号
× 乘号
÷ 除号
± 加减
© 版权符 @
& &
【 课后小结 】
文本标志是网页中广泛使用的标志对,灵活熟练地运用文本
标志,是设计网页的基础,
【 教学内容 】
讲解 HTML标准中的文本标志
【 教学目的 】
使学生了解标题元素,掌握字体,上下标,及特殊字符的标志
【 教学重点 】
1.字体标志的使用
2.网页中特殊符号的输入
【 新课 】
一, HTML中的文本标志
1,<pre></pre>
对文本进行预处理操作, 屏幕显示的效果和 HTML文档编辑版
面一样
例,
<html>
<head>
<title>预处理操作 </title>
</head>
<body bgcolor=yellow text=blue>
<pre>
念奴娇
赤壁怀古
大江东去, 浪淘尽
千古风流人物 故垒西边
人道是 三国周郎赤壁
</pre>
</body>
</html>
</body>
</html>
2,标题标志
<h1></h1>,<h2></h2>,<h3></h3>,h4></h4>,h5></h5>,<h6></h6>
用于设置文本的标题级别, 其中 <h1>是最大的标题, <h6>是最小的标题
例,
<html>
<head>
<title>标题标志使用 </title>
</head>
<body>
<h1>一级标题，字号最大 </h1>
<h2>二级标题, 字号次于一级标题 </h1>
<h3>三级标题，字号次于二级标题 </h3>
<h4>四级标题, 字号同普通文字 </h4>
<h5>五级标题, 字号小于普通文字 </h5>
<h6>六级标题, 字号最小 </h6>
</body>
</html>
3,字体标志 <b></b>,<i></i>,<u></u>
<b></b>文本加粗输出
<i></i>文本以斜体形式输出
<u></u>文本以下划线形式输出
4,上标与下标
上标,<sup></sup> 下标,<sub></sub>
例,
<html>
<head>
<title>上下标使用 </title>
</head>
<body bgcolor=yellow>
<p align=center>2H<sub>2</sub>+O<sub>2</sub>==2H<sub>2</sub>O</p>
<p>2X<sup>2</sup>+3X+4=6
</body>
</html>
5.<font></font>
用于设定文字的字体, 大小, 颜色,
属性如下,
(1) face:设定文字字体
(2) size:设定文字的大小, 值越大, 字体越大,预设值为 3
size=+1 表示字体的大小提升一级
size=-1 表示字体的大小下降一级
(3) color,设定文字的颜色
例,
<html>
<head>
<title>元素 FONT的使用 </title>
</head>
<body bgcolor=yellow>
<font face=宋体 color=blue>Q人类, Q生活 </font>
<p><font size=+2 face=隶书 color=green>欢 迎 光 临 本 站 点
</font></p>
<p><font size=-1 color=red>校园文学 </font>
</body>
</html>
6.特殊符号元素
空格
< 小于
> 大于
" 引号
× 乘号
÷ 除号
± 加减
© 版权符 @
& &
【 课后小结 】
文本标志是网页中广泛使用的标志对,灵活熟练地运用文本
标志,是设计网页的基础,
