html教学课件..

《html教学课件..》由会员分享，可在线阅读，更多相关《html教学课件..（113页珍藏版）》请在金锄头文库上搜索。

1、第2章 超文本标记语言HTML,网页设计与制作教程,目 录,2.1.1 HTML概述 2.1.2 HTML语法 2.1.3 HTML文件的基本结构,2.1.1 HTML概述 HTML是一种描述性语言，用HTML可以创建能在互联网上传输的信息页，即通常所称的主页或网页。 HTML语言使用描述性标记符（称为标记）来指明文本的不同内容。 HTML是一种语言，但并不算是“程序”语言。 HTML文档包含两种信息：页面本身的文本和表示页面元素、结构、格式、及其他超文本链接的HTML标记。,2.1.2 HTML语法 受标记影响的内容 受标记影响的内容 例如，可以用字体标记的字号属性size指定文字的大小，H

2、TML语句如下： 本行字将以较小字体显示,2.1.3 HTML文件的基本结构 网页的标题 文档主体，正文部分 ,2.1.3 HTML文件的基本结构 HTML文件头 2. HTML文件主体,1. HTML文件头 TITLE 标记：标题名 META标记：给浏览器、搜索引擎或其他应用程序提供本HTML文件的有关信息（如作者，终止日期，关键词列表等等）。,META标记的格式为： ,name属性主要用于描述网页，其常用的选项有GENERATOR、Keywords、description、robots、author等。 GENERATOR用来说明制作本网页所用的编辑工具，Keywords用来告诉搜索引擎本

3、网页的关键字是什么，description用来告诉搜索引擎本网页的主要内容，robots用来告诉搜索机器人那些页面需要索引，哪些页面不需要索引， author用来标注网页的作者。,http-equiv属性相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，其常用的选项有Content-Type、Expires、Refresh等等。 Content-Type用以说明网页所使用的字符集； Expires用于设定网页的到期时间；一旦网页过期，必须到服务器上重新传输； Refresh用于自动刷新并指向新页面。 Name属性和http-equiv属性不能在同一个

4、标记中使用。,Content属性则根据name选项或http-equiv选项的定义来决定此项填写什么样的字符串。例如： 向搜索引擎说明本网页的关键词。 告诉搜索引擎本网站的主要内容。, 通知浏览器本HTML文件使用了gb2312字符集，是简体中文网页。 可以使当前网页在2秒后自动转到北京化工大学北方学院的主页（） 去，这就是META的刷新作用，在Content中，2代表设置的时间（单位为秒），而URL就是在指定的时间后自动连接的网页地址。如果网页地址就是本页的地址，那么就是自动刷新。,使用META标记，还可以在进入网页或者离开网页时实现动画效果。 例如的意思是，进入本页面（http-equiv

5、=”Page-Enter”）时，页面将按水平百叶窗（transition=9）的形式展开，整个展开过程历时3秒（duration=3）。 的意思是离开本网页时，页面将按圆形收缩的形式切换成其他网页，并且整个切换时间为5秒。,2. HTML文件主体 HTML文件主体标记的格式为： 网页的内容,Background：设置网页的背景图像； Bgcolor：设置网页的背景色； Text：设置文本的颜色 Link：设置尚未被访问过的超文本链接的颜色； Vlink：设置已被访问过的超文本链接的颜色； Alink：设置超文本链接在被访问瞬间的颜色。,以命名方式定义常用的颜色，如RED、blue等。 以RGB

6、值表示，如#FF0000表示red，#0000ff表示blue。,常用16种色彩的英文名和RGB值对照, 一个简单的HTML示例 我是中国人，我热爱我的祖国。 ,2.2.1 标题文字标记 2.2.2 文字标记 2.2.3 段落标记,标题文字标记的格式为： 标题文字 属性n用来指定标题文字的大小，可以取16的整数值，取1时文字最大，6时文字最小。在一个标题行中无法使用不同大小的字体。 属性align用来设置标题在页面中的对齐方式，有left（左对齐）、center（居中）和right（右对齐）三种选择。,例2-2 用设置标题, 设置标题 第1级标题H1 第2级标题H2 第3级标题H3 第4级标题

7、H4 ,文字标记的格式为： 被设置的文字 ,属性size用来设置文字的大小。数字的取值范围从17，size取1时文字最小，取7时文字最大。 属性face用来设置字体。如黑体、宋体、楷体_GB2312、仿宋_Gb312、隶书、Times New Roman等。 属性color用来设置文字颜色。颜色可以用相应英文单词或以“#”引导的一个十六进制数代码来表示，参见表2-1。,例2-3 用设置文字的大小、字体和颜色。, 用FONT标记设置文字大小、字体和颜色 普通文字 1号字 7号字 宋体4号字 华文彩云3号字 红色 蓝色隶属6号字 ,表2-2 设置各种字型的标记,例2-4 设置字型, 设置字型 普通

8、文字 加粗字 斜体字 加下划线 大型字体小型字体 加删除线 X2+Y2=Z2 ,强制换行标记 强制换段标记 设置段落标记 水平线,强制换行标记 强制换行的格式为： 文字,例2-5 强制换行标记的使用, 强制换行标记的使用 登鹤雀楼 白日依山尽 黄河入海流 欲穷千里目， 更上一层楼。登鹤雀楼 白日依山尽， 黄河入海流。 欲穷千里目， 更上一层楼。 ,2. 强制换段标记 段落标记放在一段文字的末尾，就定义了一个新段落的 开始。标记不但能使后面的文字换到下一行，还可以是 两段之间留一空行。由于一段的结束意味着新一段的开始， 所以使用也可省略结束标记。 强制换段标记的格式为： 文字 强制换段标记可以看

9、作两个强制换行标记,设置段落标记 设置段落标记的格式为： 文字 其中属性align用来设置段落的对齐方式，可以为left、center 或right，分别表示段落左对齐、段落居中、段落右对齐。默 认为left。,例2-6 段落标记的使用。, 段落标记的使用 登鹤雀楼 白日依山尽， 黄河入海流。 欲穷千里目， 更上一层楼。 ,4. 水平线 水平线标记的格式为： 。,Align属性： 设定线条放置的位置，可选择left、right或 center。 Size属性： 设定线条厚度，以像素作单位，默认为2。 Width属性： 设定线条长度，可以是绝对值或相对值， 默认值为100%。 Color属性：

10、设定线条颜色，默认为黑色。 Noshade属性：设定线条为平面显示（没有三维效果），若 缺省，则有阴影或立体效果。,例2-7 水平线标记的使用, 水平线标记的使用 ,2.3.1 无序列表 2.3.2 有序列表 2.3.3 列表的嵌套,2.3.1无序列表 无序列表中每一个表项的前面是项目符号（如 、 等）。 建立无序列表使用标记和表项标记。格式为： 第一个列表项 第二个列表项 ,标记：是单标记，即一个表项的开始，就是前一个表 项的结束。 Type： 指定每个表项左端的符号类型，可为 disc（实心圆点）、 circle（空心圆点）、 square（方块）， 还可以自己设置图片， 如默认为实心圆点

11、。,例2-8 无序列表标记的使用, 无序列表标记的使用 网络的拓扑结构 总线结构 星型结构 环型结构 ,2.3.2 有序列表 使用标记可以建立有序列表，表项的标记仍为LI，格式为： 第一个表项 第二个表项 ,type属性可设定5种序号： 数字（type=1）、 大写英文字母（type=A）、 小写英文字母（type=a）、 大写罗马字母（type=I）、 小写罗马字母（type=i）， 缺省的序号标记是数字。,例2-9 有序列表标记的使用。, 有序列表标记的使用 通过拨号网络连接Internet的步骤 安装调制解调器 创建拨号连接 设置拨号网络 设置拨号网络 ,2.3.3 列表的嵌套 列表嵌套

12、可以把网页分为多个层次，例如书的目录，给人以 很强的层次感。有序列表和无序列表不仅可以自身嵌套，而 且可以互相嵌套。,例2-10 无序列表中套无序列表。,例2-11 有序列表中套无序列表。,2.4.1 网页中的图片 2.4.2 图片标记 2.4.3 设定图片的布局,2.4.1 网页中的图片 Web中图片的几种常用格式为GIF、JPEG和PNG，此外还 可使用矢量格式。其中最常用的是GIF和JPEG格式，几乎 所有浏览器都支持这两种格式。,2.4.2 图片标记 图片标记的格式为： ,2.4.3 设定图片的布局 布局是图像放在网页中的位置以及图像与文本的排放关系。 实现这种功能，除了利用标记的al

13、ign属性外，还有 、等标记。 1. 设置图像的对齐方式 2.设置图像与文本间的关系,1. 设置图像的对齐方式 图像可放在页面的左边（left）、中间（center）和右边 （right）。 使用标记的align属性可实现图像的居左、居中和居右。 格式为： 另外，实现图像居中还可以使用标记，格式为： ,例 2-12 设置图像的对齐方式,2. 设置图像与文本间的关系 （1）设置图像与文本之间的空白 （2）文本与图像在垂直方向上的对齐 （3）文本环绕图像,2. 设置图像与文本间的关系 （1）设置图像与文本之间的空白 标记的hspace和vspace属性可实现该功能。,2. 设置图像与文本间的关系

14、（2）文本与图像在垂直方向上的对齐 文本 文本 其中align的值可取： top文本与图像的顶部对齐； middle文本与图像的中央对齐； bottom文本与图像的底部对齐。,2. 设置图像与文本间的关系 （3）文本环绕图像 文本 其中align的值可取： left 图像居左，文本在图像的右边； right 图像居右，文本在图像的左边。 使用该标记设置文本环绕方式后，将一直有效，直到遇到下 一个设置标记。如果想取消文本环绕图像，可用 标记，其后的文本将不再环绕图像。其格式为： ,例 2-13 设置图像与文本间的关系,2.5.1 建立简单表格 2.5.2 表格的属性设置,2.5.1 建立简单表格

15、 一般格式为： 标题 表头1 表头2表头n 表项11表项12表项1n 表项m1表项m2表项mn ,例 2-14 一个简单的表格,2.5.2 表格的属性设置 1. 表格标记属性 2. 单元格的合并 3. 表格的分组显示 4. 表格边框和分隔线的显示控制,2.5.2 表格的属性设置 1. 表格标记属性 （1）标记的属性设置 （2）标记的属性设置 （3）标记的属性设置,2.5.2 表格的属性设置 1. 表格标记属性 （1）标记的属性设置 ,2.5.2 表格的属性设置 1. 表格标记属性 （2）标记的属性设置 ,2.5.2 表格的属性设置 1. 表格标记属性 （3）标记的属性设置 ,例 2-15 表格

16、的属性设置,2.5.2 表格的属性设置 2. 单元格的合并 其中，i表示合并的列数，j表示合并的行数。,例 2-16 表格单元格的合并,例 2-17 表格单元格的随意合并,2.5.2 表格的属性设置 3. 表格的分组显示 （1）按行分组 （2）按列分组,2.5.2 表格的属性设置 3. 表格的分组显示 （1）按行分组 表头 表尾 表体1 表体n ,例2-18 按行组制作表格。,2.5.2 表格的属性设置 3. 表格的分组显示 （2）按列分组 标记可一次设定列组中的列数以及各列属性。 其格式为： 标记可以设定一列的属性，它可以放在中使用， 也可单独用于定义列组以外列的属性，但它不能构造列组。 其格式为：,例2-19 设置列组。,2.5.2 表格的属性设置 4. 表格边框和分隔线的显示控制 （1）边框的显示可以通过在