第2章 HTML基础.ppt

1、,第2章 HTML基础,网页设计基础,2.1 HTML基本概念 2.2 HTML文件结构 2.3 页面布局与文字格式 2.4 列表 2.5 多媒体效果 2.6 表格 2.7 框架,第2章 HTML基础,随着网络技术的发展，Internet的普及，人们通过浏览网页可方便的获取信息。然而，越来越多的人已不满足于网上浏览，他们设计、制作出了自己的网页，并在网上发布，以便进行广泛的信息交流。越来越多的公司、企业、政府、学校建立了自己的网站，所有这些都离不开最基本的网站组成元素网页。本章我们首先介绍有关网页基础知识和HTML，为后续章节的学习打下基础。,第2章 HTML基础,引言,2.1 HTML基本概

2、念,2.1.1 HTML基本概念 2.1.2最基本的超文本文档,2.1.1 HTML基本概念,2.1 HTML基本概念,HTML (Hypertext Marked Language)，即超文本标记语言，是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如UNIX，WINDOWS等）。自1990年以来HTML就一直被用作World Wide Web 的信息表示语言，用于描述Homepage的格式设计和它与WWW上其它Homepage 的连结信息。使用HTML语言描述的文件，需要通过WWW浏览器显示出效果。,2.1.1 HTML基本概

3、念,2.1 HTML基本概念,所谓超文本，因为它可以加入图片、声音、动画、影视等内容，因为它可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。HTML只是一个纯文本文件。创建一个HTML文档，只需要两个工具，一个是HTML编辑器，一个WEB浏览器。HTML编辑器是用于生成和保存THML文档的应用程序。WEB浏览器是用来打开WEB网页文件，提供给我们查看WEB资源的客户端程序。网页HTML实例分析,2.1.2 HTML基本概念最基本的超文本文档,2.1 HTML基本概念,实例2-1 .htm一个最基本的超文本文档的源代码 一个简单的html示例 欢迎进入html天地 努力掌握html知识

4、，做出内容丰富的主页！ ,2.2 HTML文件结构,2.2.1 HTML结构 2.2.2 HTML标记介绍,2.2.1 HTML结构,2.2 HTML文件结构,每个网页都有一系列的元素和标签组成，元素名不区分大小写。HTML用标签来规定元素的属性和他在文件中的位置。HTML超文本文档分为文档头和文档体两部分，其HTML文件结构为： 一个简单的示例 欢迎光临我的主页 这是我第一次做主页? ,2.2.2 HTML标记介绍,2.2 HTML文件结构,HTML标记主要可要为以下八大类. 1文件结构标记(Document Structure Tags) 此类标记是用来标示出文件的结构,主要有： .：标示

5、html文件的起始和终止。 .：标示出文件标题区。 .：标示出文件主体区,2.2.2 HTML标记介绍,2.2 HTML文件结构,2区段格式标记(Block Formatting Tags) 此类标记的主要用途是将HTML文件中得某个区段文字，以特定格式显示，增加文件的可看度。主要的有： .：文件题目。 .：i=1，2，.，6，网页标题。 ：产生水平线。 ：强迫换行。 .：文件段落。,2.2.2 HTML标记介绍,2.2 HTML文件结构,3.字符格式标记(Character Formatting Tags) 用来改变HTML文件文字的外观，增加文件的美观程度。主要有： .：粗体字。 .：斜体

6、字。 .：改变字体设置。 .：居中对齐。 .：文字闪烁。 .：加大字号。 .：缩小字号。,2.2.2 HTML标记介绍,2.2 HTML文件结构,4.列表标记(List Tags) .：无编号列表。 .：列表项目。 .：定义式列表。 .：定义项目。 .：定义项目。 .：目录式列表。 .：菜单式列表。,2.2.2 HTML标记介绍,2.2 HTML文件结构,5.链接标记(Anchor Tag) 链接可以说是html超文本文件的命脉，html通过链接标记来整合分散在世界各地的图、文、影、音等信息。此类标记的主要用途为标示超文本文件链接，主要形式如下： .：建立超级链接。,2.2.2 HTML标记介

7、绍,2.2 HTML文件结构,6.多媒体标记(Multimedia Tag) 此类标记用来显示图像数据。主要有： ：嵌入图像。 ：嵌入多媒体对象。 ：背景音乐。,2.2.2 HTML标记介绍,2.2 HTML文件结构,7.表格标记(Table Tags) 此类标记用制作表格。主要有： .：定义表格区段。 .：表格标题。 .：表头。 .：表格列。 .：表格单元格。,2.2.2 HTML标记介绍,2.2 HTML文件结构,8.表单标记(Form Tags) 此类标记用来制作交互式表单，主要的有： .：表明表单区段的开始与结束。 :产生单行文本框、单选按钮、复选框等。 .：产生多行输入文本框。 .:

8、标明下拉列表的开始与结束。 .:在下拉列表中产生一个选择项目。,2.3页面布局与文字格式,2.3.1标题 2.3.2分行应用 2.3.3段落标记 2.3.4水平线应用 2.3.5文字的大小、字体、样式、颜色、位置,2.3.1标题,2.3页面布局与文字格式,一个html文件的结构基本上可以分为两部分，一部分称为标题区(Head Section)；另一部分称为主体区(Body Section)。文件结构标记就是用来标示出何处属于标题，何处属于主体。 一般文章都有标题、副标题、章和节等结构，HTML中也提供了相应的标题标签，其中n为标题的等HTML总共提供六个等级的标题，n越小，标题字号就越大，以下

9、列出所有等级的标题： 第一级标题 第二级标题 第三级标题 第四级标题 第五级标题 第六级标题,2.3.1标题,2.3页面布局与文字格式,实例2-2 .htm 标题示例 这是一行普通文字 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 ,2.3.2 分行应用,2.3页面布局与文字格式,在编写HTML文件时，我们不必考虑太细的设置，也不必理会段落过长的部分会被浏览器切掉。因为，在HTML语言规范里，每当浏览器窗口被缩小时，浏览器会自动将右边的文字转折至下一行。所以，编写者对于自己需要断行的地方，应加上标签。 实例2-3 .htm 无换行示例 登鹳雀楼白日依山尽，黄河入海流。欲穷千里目，

10、更上一层楼。 ,2.3.2 分行应用,2.3页面布局与文字格式,实例2-4 .htm 换行示例 登鹳雀楼白日依山尽，黄河入海流。欲穷千里目，更上一层楼。 ,2.3.3段落标记,2.3页面布局与文字格式,为了排列的整齐、清晰，文字段落之间，我们常用来做标记。文件段落的开始由来标记，段落的结束由来标记，是可以省略的，因为下一个的开始就意味着上一个的结束。 标签还有一个属性Aling，它用来指名字符显示时的对齐方式，一般值有center、left、right三种。 下面，我们用个例子来说明这个标签的用法。,2.3.3段落标记,2.3页面布局与文字格式,实例2-5 .htm段落标签 段落标签 登鹳雀楼

11、白日依山尽，黄河入海流。欲穷千里目，更上一层楼。 ,2.3.4水平线应用,2.3页面布局与文字格式,这个标签可以在屏幕上显示一条水平线，用以分割页面中的不同部分。有三个属性： size水平线的宽度 width 水平线的长，用占屏幕宽度的百分比或象素值来表示 align 水平线的对齐方式，有left right center三种 noshade 线段无阴影属性，为实心线段 我们可以用几个例子来说明这线段的用法： 线段粗细的设定,2.3.4水平线应用,2.3页面布局与文字格式,实例2-6.htm线段粗细的设定 线段粗细的设定 这是第一条线段，无size设定，取默认值size=1来显示 这是第二条线

12、段，size=5 这是第三条线段，size=10 ,2.3.4水平线应用,2.3页面布局与文字格式,实例2-7.htm 线段长度的设定 线段长度的设定 这是第一条线段，无width设定，取width默认值100%来显示 这是第二条线段，width=50(点数方式) 这是第三条线段，width=50%(百分比方式) ,2.3.4水平线应用,2.3页面布局与文字格式,实例2-8.htm线段排列的设定 线段排列的设定 这是第一条线段，无align设定，(取默认值center显示) 这是第二条线段，向左对齐 这是第三条线段，向右对齐 ,2.3.4水平线应用,2.3页面布局与文字格式,实例2-9 .ht

13、m无阴影的设定 无阴影的设定 这是第一条线段，无noshade设定，取默认值阴影效果来显示 这是第二条线段，有noshade设定 ,2.3.5文字的大小、字体、样式、颜色、位置,2.3页面布局与文字格式,1. 文字的大小设置： 提供设置字号大小的是FONT，FONT有一个属性SIZE，通过指定SIZE属性就能设置字号大小，而SIZE属性的有效值范围为17，其中缺省值为3。我们可以SIZE属性值之前加上“”、“”字符，来指定相对于字号初始值的增量或减量。,2.3.5文字的大小、字体、样式、颜色、位置,2.3页面布局与文字格式,实例2-10 .htm字号大小 字号大小 这是size=7的字体 这是

14、size=6的字体 这是size=5的字体 这是size=4的字体 这是size=3的字体 这是size=2的字体 这是size=1的字体 这是size=-1的字体 ,2.3.5文字的大小、字体、样式、颜色、位置,2.3页面布局与文字格式,HTML4.0提供了定义字体的功能，用face属性来完成这个工作。face的属性值可以是本机上的任一字体类型，但有一点麻烦的是，只有对方的电脑中装有相同的字体才可以在他的浏览器中出现你预先设计的风格。 实例2-11.htm字体设置 字体 欢迎光临 欢迎光临 欢迎光临 欢迎光临 welcom my homepage. welcom my homepage. ,

15、2.3.5文字的大小、字体、样式、颜色、位置,2.3页面布局与文字格式,为了让文字富有变化，或者为了着意强调某一部分，HTML提供了一些标签产生这些效果，现将常用的标签列举如下：,2.3.5文字的大小、字体、样式、颜色、位置,2.3页面布局与文字格式,实例2-12.htm字体样式 字体样式 黑体字 斜体字 加下划线 大型字体 小型字体 welcome welcome welcom ,2.3.5文字的大小、字体、样式、颜色、位置,2.3页面布局与文字格式,文字颜色设置格式如下： 这里的color_value(颜色值)可以是一个十六进制数(用“#”作为前缀)，也可以是以下16种颜色名称。 Blac

16、k = #000000 Green = #008000 Silver = #C0C0C0 Lime = #00FF00 Gray = #808080 Olive = #808000 White = #FFFFFF Yellow = #FFFF00 Maroon = #800000 Navy = #000080 Red = #FF0000 Blue = #0000FF Purple = #800080 Teal = #008080 Fuchsia = #FF00FF Aqua = #00FFFF,2.3.5文字的大小、字体、样式、颜色、位置,2.3页面布局与文字格式,实例2-13.htm文字的颜

17、色 文字的颜色 文字的颜色 文字的颜色 文字的颜色 文字的颜色 文字的颜色 文字的颜色 文字的颜色 ,2.3.5文字的大小、字体、样式、颜色、位置,2.3页面布局与文字格式,通过ALIGN属性可以选择文字或图片的对齐方式，LEFT表示向左对齐，RIGHT表示向右对齐，CENTER表示居中。基本语法如下： #leftrightcenter 实例2-14 .htm位置控制 位置控制 你好! 你好! 你好! ,2.4列表,2.4.1 有序列表(Ordered List) 2.4.2 无序列表(Unordered List) 2.4.3 自定义列表 2.4.4 嵌套列表,2.4.1有序列表(Order

18、ed List),2.4列表,有序列表中，每个列表项前标有数字，表示顺序。 有序列表由开始，每个列表项由开始。 实例2-15.htm有序列表 有序列表 牛奶 咖啡 ,2.4.2无序列表(Unordered List),2.4列表,无序列表是一个项目的序列。各项目前加有标记（通常是黑色的实心小圆圈）。无序列表以标签开始。每个列表项目以开始。 实例2-16.htm 无序列表 牛奶 咖啡 ,2.4.3自定义列表,2.4列表,自定义列表不是一个项目的序列，它是一系列条目和它们的解释。 自定义列表以标签开始，自定义列表条目以开始，自定义列表的定义(解释)以开始。 实例2-17.htm 自定义列表 牛奶

19、白色冷饮 咖啡 咖色热饮 ,2.4.4嵌套列表,2.4列表,实例2-18.htm 嵌套列表 饮品清单： 牛奶 茶叶 红茶 绿茶 咖啡 ,2.5多媒体效果,2.5.1 插入图片及图片大小的调整 2.5.2 滚动字幕 2.5.3 嵌入背景音乐,2.5.1插入图片及图片大小的调整,2.5多媒体效果,基本格式：超文本支持的图象格式一般有x bitmap(xbm)、gif、jpeg三种，所以我们对图片处理后要保存为这三种格式中的任何一种，这样才可以在浏览器中看到。 插入图象的标签是，其格式为： src属性指明了所要链接的图象文件地址，这个图形文件可以是本地机器上的图形，也可以是位于远端主机上的图形。地址

20、的表示方法可以引用url地址表示方法。 例：,2.5.1插入图片及图片大小的调整,2.5多媒体效果,img还有两个属性是height和width，分别表示图形的高和宽。通过这两个属性，可以改变图形的大小，如果没有设置，图形按原来大小显示。 图形按钮：图形按钮就是使用者通过在图形上单击，就能连接到某个地址上去。很简单，我们只要调用一下前面的知识就可以完成了。 其基本格式如下： 例： ,2.5.2滚动字幕,2.5多媒体效果,标签可以实现元素在网页中移动的效果，以达到动感十足的视觉效果。标签是一个成对的标签。应用格式为： . 标签有很多属性，用来定义元素的移动方式,2.5.2滚动字幕,2.5多媒体效

21、果,2.5.2滚动字幕,2.5多媒体效果,实例2-19.htm 滚动字幕 我来了 我来了我来了 我来了 我来了 我来了 我来了 我来了 我来了 我来了 我来了 我来了 ,2.5.3嵌入背景音乐,2.5多媒体效果,标签用来设置网页的背景音乐。但只适用於 IE，其参数设定不多。格式如下： sac=your.mid 设定 midi 档案及路径，可以是相对或绝对。声音文件可以是wav，midi，mp3等类型的文件 autostart=true 是否在音乐文档传完之后，就自动播放音乐。true 是，false 否 (内定值)。 loop=infinite 是否自动反覆播放。LOOP=2 表示重复两次，I

22、nfinite 表示重复多次。直到网页关闭为止。,2.6表格,2.6.1表格的基本结构 2.6.2表格的标签 2.6.3表格中设定跨多行多列单元格 2.6.4表格内文字的对齐/布局 2.6.5表格的嵌套,2.6.1表格的基本结构,2.6表格,表格在网站应用中非常广泛，可以方便灵活的排版，很多动态大型网站也都是借助表格排版，表格可以把相互关联的信息元素集中定位，使浏览页面的人一目了然。 表格是用标签定义的。表格被划分为行（使用标签），每行又被划分为数据单元格（使用标签）。td表示“表格数据”（Table Data），即数据单元格的内容。数据单元格可以包含文本，图像，列表，段落，表单，水平线，表格

23、等等。,2.6.1表格的基本结构,2.6表格,2.6.1表格的基本结构,2.6表格,= - - - - =,2.6.1表格的基本结构,2.6表格,实例2-20.htm一个简单的表格 一个简单的表格 行1，列1 行1，列2 行2，列1 行2，列2 ,2.6.2表格的标签,2.6表格,1表格标签的属性 表格标签有很多属性，最常用的属性有,2.6.2表格的标签,2.6表格,实例2-21.htm 表格标签的属性 表格标签的属性 第1行中的第1列 第1行中的第2列 第1行中的第3列 第2行中的第1列 第2行中的第2列 第2行中的第3列 ,2.6.2表格的标签,2.6表格,2表格的边框显示状态 frame

24、 表格的边框分别有上边框、下边框、左边框、右边框。这四个边框都可以设置为显示或隐藏状态 语法格式：,2.6.2表格的标签,2.6表格,实例2-22.HTM表格边框的显示状态 表格边框的显示状态 姓名 性别 年龄 专业 张三 男 20 计算机 ,2.6.2表格的标签,2.6表格,3设置分隔线的显示状态 rules 语法格式： 表2.6分隔线的显示状态rules的值的设定,2.6.2表格的标签,2.6表格,实例2-23.htm设置分隔线的显示状态 设置分隔线的显示状态 姓名性别年龄专业 李四女19计算机 姓名性别年龄专业 李四女19计算机 ,2.6.2表格的标签,2.6表格,4在多数浏览器中，没有

25、内容的单元格无法显示出边框来，为了解决这个问题，可以在空单元格里加入不可分空格来占位，这样边框能正常显示。,实例2-24.htm表格中空白单元格的显示 表格中空白单元格的显示 行 1， 列 1 行 1， 列 2 行 2， 列 1 ,2.6.3表格中设定跨多行多列单元格,2.6表格,要创建跨多行、多列的单元格，只需在或中加入ROWSPAN或COLSPAN属性的属性值，默认值为1。表明了表格中要跨越的行或列的个数。 跨多列的语法： colspan表示跨越的列数，例如colspan=2表示这一格的宽度为两个列的宽度。 跨多行的语法： rowspan所要表示的意义是指跨越的行数，例如rowspan=2

26、就表示这一格跨越表格两个行的高度。,2.6.3表格中设定跨多行多列单元格,2.6表格,实例2-25.htm 跨多行跨多列的单元格 跨多行跨多列的单元格 学生基本信息 成 绩 姓 名 性 别 专 业 课 程 分 数 李明 男 计算机程序设计 19 王涛 女 02 ,2.6.4表格内文字的对齐/布局,2.6表格,表格中数据的排列方式有两种，分别是左右排列和上下排列。左右排列是以ALIGN属性来设置，而上下排列则由VALIGN属性来设置。其中左右排列的位置可分为三种：居左（left)、居右(right)和居中(center)；而上下排列基本上比较常用的有四种：上齐(top)、居中(middle)、下齐(bottom)和基线(baseline)。,2.6.4表格内文字的对齐/布局,2.6表格,实例2-26.htm表格中文字的对齐 表格中文字的对齐