网页设计与制作课件 第4章 创建HTML5网页中的文本与图像.pptx

创建HTML5网页中的文本与图像PowerPointdesign

01网页中的文本CONTENTS目录网页中的水平线02网页中的图像0301

网页中的文本Part01

（1）新建一个记事本文档，在文档中输入以下代码htmlheadtitle无标题文档/title/headbodycenterfontcolor=Black泊船瓜洲/fontbrfontcolor=Red京口瓜洲一水间，/fontbrfontcolor=#00FFFF钟山只隔数重山。/fontbrfontcolor=#Green春风又绿江南岸，/fontbrfontcolor=#800000明月何时照我还？/fontbr/center/body/html课堂案例——输入文本并设置颜色

（2）将代码另存为网页文件，使用浏览器打开网页。课堂案例——输入文本并设置颜色

0102font…/font标签主要用来设置文字的属性，比如字号、字体、文字颜色等。font标签有一个属性size，通过指定size属性就能设置字号大小，而size属性的有效值范围为1~7，其中默认值为3。还可以在size属性值之前加上＋、－字符，来指定相对于字号初始值的增量或减量。将代码保存为HTML文件，然后使用浏览器浏览。设置文字字号

0102font标签有一个属性face，用face属性可以设置文字的字体，其属性值可以是任一字体类型，但只有对方的电脑中装有相同的字体才可以在他的浏览器中出现预先设计的字体风格。把代码保存为HTML文件，然后使用浏览器浏览。为了让文字富有变化，或者为了强调某一部分，HTML提供了一些标签产生这些效果。把代码保存为HTML文件，然后使用浏览器浏览。设置文字的字体与样式

01font标签有一个属性color，通过color属性可以调整文字的颜色，将代码保存为HTML文件，然后使用浏览器浏览。设置字体的颜色

01在HTML5语言中，sup/sup标签可定义上标文本，例如：2O2-，在HTML代码中则需要写成：2Osup2-/sup。sub/sub标签可定义下标文本，例如：H2O，在html代码中则需要写成：Hsub2/sub0。代码保存为HTML文件，然后使用浏览器浏览。文体的上标和下标

01在HTML中，插入特殊字符通常需要使用HTML实体（HTMLEntities）。HTML实体是特殊的字符串，用于表示预留的字符（如小于号，大于号）或无法在HTML键盘上直接键入的字符（如版权符号?。代码保存为HTML文件，然后使用浏览器浏览。插入特殊字符

0102在HTML中，可以使用两种主要的列表类型：无序列表（UnorderedList）和有序列表（OrderedList）。下面讲解它们的添加方法。有序列表有序列表和无序号列表的使用方法基本相同，它使用标签OL…/OL，每一个列表项前使用LI。每个项目都有前后顺序之分，多数用数字表示。把代码保存为HTML文件，然后使用浏览器浏览。列表无序列表无序号列表使用的一对标签是ul…/ul，每一个列表项前使用LI，其基本语法如下。把代码保存为HTML文件，然后使用浏览器浏览。

03列表列表项中的嵌套列表HTML还可以在列表项中嵌套另一个列表，这通常用于表示层次结构或分类。把代码保存为HTML文件，然后使用浏览器浏览。

网页中的水平线Part02

（1）新建一个记事本文档，在文档中输入代码。（2）在“记事本”文件中执行“文件另存为”命令，打开“另存为”对话框，在“保存类型”下拉列表中选择“所有文件”，然后在“文件名”文本框中输入文件名以及扩展名“在网页中插入水平线.html”。（3）使用浏览器打开网页，效果如图4-12所示。课堂案例——在网页中插入水平线

水平线标签hr水平线标签hr可以在屏幕上显示一条水平线，用以分割页面中的不同部分，hr也是单标签。hr有4个属性，分别是size、width、align和noshade，具体含义如下。?size：水平线的宽度。?width：水平线的长，用占屏幕宽度的百分比或象素值来表示。?align：水平线的对齐方式，有left、right、center这3种模式。?noshade：线段无阴影属性，为实心线段。课堂案例——在网页中插入水平线

标签hr线段粗细的设定HTML代码如下。htmlheadtitle标签hr线段粗细的设定/title/headbodyp这是第一条线段，无size设定，取默认值size=1来显示brhrp这是第二条线段，size=6brhrsize=6p这是第三条线段，size=12brhrsize=12/body/html把以上代码保存为HTML文件，然后使用浏览器浏览。课堂案例——在网页中插入水平线

标签hr线段长度的设定HTML代码如下。