第二讲网页中的文字和图像

《第二讲网页中的文字和图像》由会员分享，可在线阅读，更多相关《第二讲网页中的文字和图像（23页珍藏版）》请在装配图网上搜索。

1、大大连 实 训基基 地地 网页中的文字和图像网页中的文字和图像主讲：臧顺娟主讲：臧顺娟2023/5/10第二讲第二讲大大连 实 训基基 地地本讲目标本讲目标l掌握掌握HTMLHTML文件基本结构文件基本结构l掌握掌握HTMLHTML中的文字标签中的文字标签l掌握文字列表的使用掌握文字列表的使用l掌握特殊文字符号的表示掌握特殊文字符号的表示l掌握图像的使用掌握图像的使用2023/5/10大大连 实 训基基 地地2023/5/10l（一）（一）HTMLHTML标签标签“”标签放在标签放在HTMLHTML文件的开头，告诉浏览器，文件的开头，告诉浏览器，这个文件是这个文件是HTMLHTML文件。而在文

2、件的结尾，是文件。而在文件的结尾，是“”结束标签。结束标签。l（二）文件头标签（二）文件头标签文件头标签是文件头标签是“”和和“”，一般放在，一般放在“”标签的后面，用来标明文件的题目或定义标签的后面，用来标明文件的题目或定义部分。部分。一、一、HTMLHTML文件基本结构文件基本结构大大连 实 训基基 地地2023/5/10l（三）文件（三）文件标题标签文件文件标题标签为“”和和“”。这对标签用来用来设定文件的定文件的标题。浏览器通常都会将文件器通常都会将文件标题显示在示在浏览器窗口的左上角，因此器窗口的左上角，因此这个个标题很有用。很有用。l（四）文件体（四）文件体标签 文件体文件体标签为

3、“”和和“”。这对标签一般都被用来指明一般都被用来指明HTMLHTML文档的内容，例如文字、文档的内容，例如文字、标题、段落和列表等，也可以用来定段落和列表等，也可以用来定义主主页背景背景颜色。色。一、一、HTMLHTML文件基本结构文件基本结构大大连 实 训基基 地地l使用使用“对齐对齐”属性属性2023/5/10一、一、HTMLHTML文件基本结构文件基本结构大大连 实 训基基 地地2023/5/10l（五）注释标签（五）注释标签注释标签注释标签!-,-,注释标签用于在注释标签用于在HTMLHTML文文档中添加注释，对内容起着解释说明的作用。档中添加注释，对内容起着解释说明的作用。l案例案

4、例 ：在前面的例子中加入如下内容：在前面的例子中加入如下内容 -一、一、HTMLHTML文件基本结构文件基本结构大大连 实 训基基 地地2023/5/10 二、二、HTMLHTML中的文字标签中的文字标签 l（一）换行标签（一）换行标签大大连 实 训基基 地地2023/5/10二、二、HTMLHTML中的文字标签中的文字标签l（二）段落标签（二）段落标签 大大连 实 训基基 地地2023/5/10二、二、HTMLHTML中的文字标签中的文字标签l（三）文字的大小设置（三）文字的大小设置 大大连 实 训基基 地地2023/5/10 二、二、HTMLHTML中的文字标签中的文字标签 l（四）文字的

5、字体（四）文字的字体font face=大大连 实 训基基 地地2023/5/10 二、二、HTMLHTML中的文字标签中的文字标签 l（五）文字的样式（五）文字的样式大大连 实 训基基 地地2023/5/10 二、二、HTMLHTML中的文字标签中的文字标签 （六）文字的颜色（六）文字的颜色color_value有两种表示方法：有两种表示方法：n直接写上颜色的英文名称，共有十六种颜色名称。直接写上颜色的英文名称，共有十六种颜色名称。n以以#为前缀的六个十六进制数为前缀的六个十六进制数 六个十六进制数分为三组六个十六进制数分为三组,每组两位每组两位,依次表示红依次表示红,绿绿,蓝颜色蓝颜色的强

6、度。的强度。F为最高，为最高，0为最低。为最低。颜 色 名 称十六进制数颜 色 名 称十六进制数颜 色 名 称十六进制数Black#000000White#FFFFFFPurple#800080Green#008000Yellow#FFFF00Teal#008080Silver#C0C0C0Maroon#800000Fuchsia#FF00FFLime#00FF00Navy#000080Aqua#00FFFFGray#808080Red#FF0000Olive#808000Blue#0000FF大大连 实 训基基 地地2023/5/10 二、二、HTMLHTML中的文字标签中的文字标签l（七）

7、位置控制（七）位置控制 大大连 实 训基基 地地二、二、HTMLHTML中的文字标签中的文字标签l（八）标题标记（八）标题标记标题标记，用于表示文档内容的标题内容，以及标题标题标记，用于表示文档内容的标题内容，以及标题内容的级别内容的级别2023/5/10大大连 实 训基基 地地三、设置文字列表三、设置文字列表l无序列表标记，表示列表所包含的项是没有先后顺序无序列表标记，表示列表所包含的项是没有先后顺序的的列表项使用列表项使用表示表示l有序列表标记，表示列表所包含的项是有先后顺序的有序列表标记，表示列表所包含的项是有先后顺序的列表项使用列表项使用表示表示l列表项标记，只能和列表项标记，只能和或

8、或结合使用结合使用大大连 实 训基基 地地2023/5/10三、设置文字列表三、设置文字列表l无序号列表无序号列表n无序号列表使用一对标签是无序号列表使用一对标签是 和和/，第一个列表，第一个列表项前使用项前使用 大大连 实 训基基 地地2023/5/10三、设置文字列表三、设置文字列表l 序号列表序号列表n 使用标签使用标签 ，每一个列表项前使用，每一个列表项前使用 大大连 实 训基基 地地四、特殊文字符号的表示四、特殊文字符号的表示l在在HTMLHTML中表示中表示“”使用字符使用字符“<”<”和和“>”>”l空格的表示空格的表示使用字符使用字符“ ”&n

9、bsp;”注意：尽量不要使用多个注意：尽量不要使用多个“ ” ”来表示多个空格，因为多数浏来表示多个空格，因为多数浏览器对空格的距离的实现是不一样的。（例览器对空格的距离的实现是不一样的。（例2-12-1）l版权符号的表示版权符号的表示使用字符使用字符“©”©”l“&”&”符号的表示符号的表示使用字符使用字符“&&”大大连 实 训基基 地地五、在网页中使用图像五、在网页中使用图像l网页中图片的分类网页中图片的分类内容图片内容图片“修饰修饰”用图片用图片l网页中常用图片的格式网页中常用图片的格式gifgif格式，色彩表现少，但是解析速度快，还可

10、以实格式，色彩表现少，但是解析速度快，还可以实现现“动画动画”效果，是网页效果，是网页“修饰修饰”图片的第一选择图片的第一选择JpgJpg格式，色彩表现多，是网页中内容图片的第一选格式，色彩表现多，是网页中内容图片的第一选择择大大连 实 训基基 地地五、在网页中使用图像五、在网页中使用图像l网页中的路径问题网页中的路径问题网页设计中的所有文件，原则上都必须放置在一起，即网页设计中的所有文件，原则上都必须放置在一起，即在同一个文件夹下在同一个文件夹下(这个文件夹是网页的这个文件夹是网页的“根根”文件夹文件夹)相对路径相对路径参照自身的位置，而定义的路径，叫做相对路径例2-2相对路径有三种表示方法

11、可以使用“.”代表当前文档自身的当前所在文件夹，当然，也可省略可以使用“.”代表当前文档所在文件夹的上一级文件可以使用“/”代表网站的根目录(放在磁盘中，则为磁盘根目录)大大连 实 训基基 地地五、在网页中使用图像五、在网页中使用图像根文件夹根文件夹wwwroot子文件夹子文件夹example当前网页当前网页ex.html图片文件夹图片文件夹image图片图片1.jpg根文件夹根文件夹wwwroot子文件夹子文件夹example图片文件夹图片文件夹image图片图片1.jpg当前网页当前网页ex.html在ex.html中插入1.jgp路径应该怎么写?大大连 实 训基基 地地五、在网页中使用图

12、像五、在网页中使用图像l标签的重要属性标签的重要属性图片大小图片大小注意：网页中的长度单位多使用px,即像素图标替代文体图标替代文体在网络较慢的环境中，如果没有出现图片，那么将以图片替代文本显示图片提示图片提示在鼠标放置图片上面时提示的文本注意：多数标签都有此属性，但浏览器的支持不全面大大连 实 训基基 地地总结总结lHTMLHTML文字排版标记文字排版标记 、有序列表、有序列表、无序列表、无序列表lHTMLHTML中特殊文字符号的表示中特殊文字符号的表示l网页中图片的使用网页中图片的使用常用图片的格式：常用图片的格式：JPGJPG和和GIFGIF、相对路径和绝对路径、相对路径和绝对路径、altalt属性和属性和titletitle属性属性