HTML_学习文档

1、超文本标记语言HTML HTML（Hyper Text Markup Language，超文本标记语言）是表示网页的，超文本标记语言）是表示网页的一种规范（或者是一种标准），它通过标记符一种规范（或者是一种标准），它通过标记符定义了网页内容的显示格式。在文本文件的基定义了网页内容的显示格式。在文本文件的基础上，增加了一系列描述文本格式、颜色等的础上，增加了一系列描述文本格式、颜色等的标记，再加上声音、动画甚至视频等等，形成标记，再加上声音、动画甚至视频等等，形成精彩的画面。精彩的画面。 超文本标记语言HTML主要内容主要内容一一. HTML基本语法与基本结构基本语法与基本结构二二. 文本格式的

2、应用文本格式的应用三三. 在网页中使用图片在网页中使用图片四四. 在网页中使用超链接在网页中使用超链接五五. 表格与框架的应用表格与框架的应用六六. 表单的应用表单的应用超文本标记语言HTML1. HTML基本语法基本语法 基本语法基本语法 开始标记结束标记网页内容属性及属性值记事本2. HTML文档的编辑环境文档的编辑环境网页编辑软件网页编辑软件记事本记事本一一. HTML基本语法与基本结构基本语法与基本结构超文本标记语言HTML3. HTML文档的基本结构文档的基本结构 网页标题，显示在浏览器的标题栏中网页标题，显示在浏览器的标题栏中 这里是页面上显示的内容。是网页的主要部分。这里是页面上

3、显示的内容。是网页的主要部分。 举例超文本标记语言HTML习题习题1写出写出HTML文件的总体结构。在文件的总体结构。在HTML中，标题标记中，标题标记和和标记有何作用。标记有何作用。一一. HTML基本语法与基本结构基本语法与基本结构超文本标记语言HTML通常文本是网页的主体，所以文本格式的通常文本是网页的主体，所以文本格式的应用就是网页设计过程中最基本、最关键的问应用就是网页设计过程中最基本、最关键的问题之一，下面将就文本的段落格式、文字的显题之一，下面将就文本的段落格式、文字的显示效果等问题进行详细的讨论。示效果等问题进行详细的讨论。 记事本二二. HTML文本格式的应用文本格式的应用

4、超文本标记语言HTML文本段落格式文本段落格式二二. HTML文本格式的应用文本格式的应用 （1）标题标记符）标题标记符（2）分段标记符）分段标记符（3）换行标记符）换行标记符（4）水平线标记符）水平线标记符（5）分节标记符）分节标记符（6）段落居中标记符）段落居中标记符 超文本标记语言HTML文本段落格式文本段落格式二二. HTML文本格式的应用文本格式的应用 （1） 标题标记符标题标记符 功能：功能：设置文档标题，设置文档标题，n取取1至至6的整数，结的整数，结束标记不可省。束标记不可省。1级标题最大。级标题最大。属性：属性：align:设置对齐方式，取值设置对齐方式，取值left | r

5、ight | center , 缺省值为缺省值为left。格式：格式：标题文字标题文字举例：举例： 超文本标记语言HTML文本段落格式文本段落格式二二. HTML文本格式的应用文本格式的应用 （2）分段标记符）分段标记符功能：功能：将文档划分成段落，结束标记将文档划分成段落，结束标记可省略。可省略。 属性：属性：align:设置对齐方式，取值设置对齐方式，取值left | right | center, 缺省值为缺省值为left。 格式：格式：文字文字 举例举例1 举例举例2 （3）换行标记符）换行标记符 功能：功能：在文档中强制断行，但不分段，无结束标记。在文档中强制断行，但不分段，无结束标

6、记。 格式：格式：文字文字 举例举例超文本标记语言HTML文本段落格式文本段落格式二二. HTML文本格式的应用文本格式的应用 （4）水平线标记符）水平线标记符功能：功能：在网页中添加粗为在网页中添加粗为2像素的水平线，无结束标记。像素的水平线，无结束标记。 属性：属性：size:水平线的粗细程度，取值为整数，缺省值为水平线的粗细程度，取值为整数，缺省值为2px。width: 水平线的长度，取值既可以是像素，也可以是百分比。水平线的长度，取值既可以是像素，也可以是百分比。noshade:缺省的水平线为带阴影的缺省的水平线为带阴影的3D线线,该属性设置不带阴影。该属性设置不带阴影。color:设

7、置水平线的颜色。设置水平线的颜色。align:设置对齐方式，取值设置对齐方式，取值left | right | center缺省值缺省值center。格式：格式： 举例举例 超文本标记语言HTML文本段落格式文本段落格式二二. HTML文本格式的应用文本格式的应用 （5）分节标记符）分节标记符 功能：功能：文档分节标记符，可将位于文档分节标记符，可将位于之之间的段落设置为一节。设置多个段落对齐，方法为间的段落设置为一节。设置多个段落对齐，方法为使用使用标记符将要设置的段落包起来，然后在标记符将要设置的段落包起来，然后在DIV标记符中使用标记符中使用align属性。结束标记不能省。属性。结束标记

8、不能省。 属性：属性：align:设置对齐方式，取值设置对齐方式，取值left | right | center , 缺省值为缺省值为left。 举例：举例： （6）段落居中标记符）段落居中标记符 超文本标记语言HTML格式的嵌套原则格式的嵌套原则如果所设置的格式是相容的，则取格式的叠如果所设置的格式是相容的，则取格式的叠加效果。加效果。如果所设置的格式是冲突的，则取最近格式如果所设置的格式是冲突的，则取最近格式的效果。的效果。不同标记符的开始标记和结束标记不能交错不同标记符的开始标记和结束标记不能交错举例举例二二. HTML文本格式的应用文本格式的应用 超文本标记语言HTML2. 文本的显示

9、效果文本的显示效果二二. HTML文本格式的应用文本格式的应用 （1）字体控制标记符）字体控制标记符（2）字体样式标记符）字体样式标记符超文本标记语言HTML2. 文本的显示效果文本的显示效果二二. HTML文本格式的应用文本格式的应用 （1）字体控制标记符）字体控制标记符功能：功能：控制字符的显示样式，结束标记不可省。控制字符的显示样式，结束标记不可省。格式：格式： 文字超文本标记语言HTML2. 文本的显示效果文本的显示效果二二. HTML文本格式的应用文本格式的应用 （2）字体样式标记）字体样式标记符符常用物理字符样式常用物理字符样式 超文本标记语言HTML2. 文本的显示效果文本的显示

10、效果二二. HTML文本格式的应用文本格式的应用 常用逻辑字符样式常用逻辑字符样式 举例超文本标记语言HTML3. 列表格式列表格式 (1) 有序列表有序列表(2) 无序列表无序列表(3) 定义列表定义列表二二. HTML文本格式的应用文本格式的应用 超文本标记语言HTML(1) 有序列表有序列表 列表项列表项1 列表项列表项2 列表项列表项3 二二. HTML文本格式的应用文本格式的应用 超文本标记语言HTML(2) 无序列表无序列表 列表项列表项1 列表项列表项2 列表项列表项3 二二. HTML文本格式的应用文本格式的应用 超文本标记语言HTML(3) 定义列表定义列表 定义列表的制作需

11、要以下几个标记符：定义列表的制作需要以下几个标记符： 列表标记符列表标记符，用来指定定义列表的开，用来指定定义列表的开始与结尾；始与结尾； 术语标记符术语标记符，用来指定第一层数据；，用来指定第一层数据； 描述标记符描述标记符，用来指定第二层数据。，用来指定第二层数据。举例二二. HTML文本格式的应用文本格式的应用 超文本标记语言HTML用用HTML标记设计如图所示的列表。标记设计如图所示的列表。 二二. HTML文本格式的应用文本格式的应用 超文本标记语言HTML2. 标记符标记符三三. 在网页中使用图形在网页中使用图形功能：功能：在网页中插入图片或视频。在网页中插入图片或视频。属性：属性

12、：（1）插入图片）插入图片l lsrc:设置图像文件的位置，取值为要插入图像的文件设置图像文件的位置，取值为要插入图像的文件名名（相对路径和绝对路径）（相对路径和绝对路径）。lalt:alt:表示图像的简单文本，用于不能显示图像或图表示图像的简单文本，用于不能显示图像或图像显示时间过长时显示文字。像显示时间过长时显示文字。 举例举例超文本标记语言HTML2. 标记符标记符三三. 在网页中使用图形在网页中使用图形（2）设置图像的高和宽）设置图像的高和宽l lwidth:设置图像的宽度，取值为像素数或百分数。设置图像的宽度，取值为像素数或百分数。l lheight: 设置图像的高度，取值为像素数或

13、百分数。设置图像的高度，取值为像素数或百分数。（3）设置图像边框）设置图像边框l l border:设置图像边框效果，取值是像素数。设置图像边框效果，取值是像素数。（4）设置图片周围空白）设置图片周围空白l l hspace:设置图像周围水平方向空白。取值为像素数。设置图像周围水平方向空白。取值为像素数。l l vspace: 设置图像周围垂直方向空白。取值为像素数。设置图像周围垂直方向空白。取值为像素数。举例举例超文本标记语言HTML2. 标记符标记符三三. 在网页中使用图形在网页中使用图形（5）设置图像的对齐格式）设置图像的对齐格式l l 图像在页面中的对齐图像在页面中的对齐方法：方法：

14、或或 举例举例超文本标记语言HTML1. 超链接超链接四四. 超链接超链接功能：功能：创建超链节。结束标记不能省。创建超链节。结束标记不能省。属性：属性： href:用来指定超链接目标。用来指定超链接目标。 name:书签名书签名 target：用来指定超链接的目标框架名。用来指定超链接的目标框架名。 超文本标记语言HTML四四. 超链接超链接1）本地网页链接）本地网页链接例：例：源网页为源网页为Index.htm兴趣兴趣 源网页为源网页为photo.htm返回首页返回首页 兴趣兴趣 源网页为源网页为favorite.htm返回首页返回首页相册相册兴趣兴趣超文本标记语言HTML四四. 超链接超

15、链接2）外部链接）外部链接 所谓外部链接是指建立链接的源网页与待链接的所谓外部链接是指建立链接的源网页与待链接的目标网页不在同一站点内。创建这样的超链接必须目标网页不在同一站点内。创建这样的超链接必须使用绝对路径，例如下面的代码创建了连接到使用绝对路径，例如下面的代码创建了连接到“搜搜狐狐”主页的超链接：主页的超链接：例：例：链接到链接到“搜搜狐狐” 超文本标记语言HTML四四. 超链接超链接3）书签链接）书签链接建立书签链接的步骤如下：建立书签链接的步骤如下： 建立书签建立书签 在需要跳转到的每一个位置插入具有在需要跳转到的每一个位置插入具有name属性的属性的标记，标记，在在与与之间不需要

16、任何文字，之间不需要任何文字，name属性的值就是该属性的值就是该书签的名称。例如，插入名为书签的名称。例如，插入名为top的书签代码为：的书签代码为：目录目录 建立超链接建立超链接在需要建立书签链接的位置插入具有在需要建立书签链接的位置插入具有href属性的属性的标记。例标记。例如链接到名为如链接到名为top的书签的超链接代码为：的书签的超链接代码为： 返回目录返回目录 举例超文本标记语言HTML四四. 超链接超链接4）电子邮件链接）电子邮件链接 如果将如果将标记的标记的href属性的值指定为属性的值指定为“mailto:邮件地址邮件地址”，那么就可以连接到指定的电子邮件。，那么就可以连接到

17、指定的电子邮件。例如使用下面的代码可以设置电子邮件超链接：例如使用下面的代码可以设置电子邮件超链接：请与本书的作请与本书的作者联系者联系 超文本标记语言HTML1.表格的基本构成表格的基本构成 表格标题表格标题 第一行第一个单元格第一行第一个单元格 第一行第二个单元格第一行第二个单元格 第二行第一个单元格第二行第一个单元格 第二行第二个单元格第二行第二个单元格 举例五五.表格表格超文本标记语言HTML2.表格标记符及其属性表格标记符及其属性 五五.表格表格（1） 功能：功能：定义整个表格，表格中的所有内容都必须位于定义整个表格，表格中的所有内容都必须位于和和之间。之间。 属性：属性： 1）边框

18、与分隔线）边框与分隔线 frame：控制表格最外层的四条框线，其取值如下控制表格最外层的四条框线，其取值如下表：表：超文本标记语言HTML 2.表格标记符及其属性表格标记符及其属性 五五.表格表格（1） 1）边框与分隔线）边框与分隔线 超文本标记语言HTML2.表格标记符及其属性表格标记符及其属性 五五.表格表格（1） 1）边框与分隔线）边框与分隔线 rules：控制是否显示及如何显示单元格之间的分隔线。控制是否显示及如何显示单元格之间的分隔线。 值：值：none为缺省值，表示无分隔线。为缺省值，表示无分隔线。 rows表示仅有行分隔线。表示仅有行分隔线。 cols表示仅有列分隔线。表示仅有列

19、分隔线。 all表示包括所有分隔线。表示包括所有分隔线。Bordercolor:设置表格边框颜色。设置表格边框颜色。 举例超文本标记语言HTML2.表格标记符及其属性表格标记符及其属性 五五.表格表格（1） 3）表格在页面中的对齐方式）表格在页面中的对齐方式 align：控制表格在页面中的对齐方式，（控制表格在页面中的对齐方式，（left | center | right）。）。 例如：例如： 4）设置表格背景色与背景图）设置表格背景色与背景图 bgcolor：设置背景颜色。设置背景颜色。 background：设置背景图案。设置背景图案。 超文本标记语言HTML2.表格标记符及其属性表格标记

20、符及其属性 五五.表格表格（2） 功能：功能：定义表格标题，表格标题位于定义表格标题，表格标题位于和和之间。之间。 属性：属性： align：设置表格标题的位置，取值为设置表格标题的位置，取值为 (top | bottom)，top为缺省值。为缺省值。 超文本标记语言HTML2.表格标记符及其属性表格标记符及其属性 五五.表格表格（3） 功能：功能：定义表格行。结束标记可以省略。定义表格行。结束标记可以省略。 属性：属性： 1）设置表格行对齐方式）设置表格行对齐方式 align：控制表格整行内容的水平对齐。控制表格整行内容的水平对齐。 值：值：center表示单元格内容水平方向居中对齐。表示单

21、元格内容水平方向居中对齐。 left为缺省值，表示单元格内容左对齐。为缺省值，表示单元格内容左对齐。 right表示单元格内容右对齐。表示单元格内容右对齐。 举例举例 超文本标记语言HTML2.表格标记符及其属性表格标记符及其属性 五五.表格表格（3） 属性：属性： 1）设置表格行对齐方式）设置表格行对齐方式 valign：控制表格整行内容的垂直对齐。控制表格整行内容的垂直对齐。 值：值：top表示数据靠单元格顶部。表示数据靠单元格顶部。 bottom表示数据靠单元格底部。表示数据靠单元格底部。 middle为缺省值，表示数据靠单元格的垂直方为缺省值，表示数据靠单元格的垂直方向居中。向居中。超

22、文本标记语言HTML2.表格标记符及其属性表格标记符及其属性 五五.表格表格（3） 2）设置表格行宽度和高度）设置表格行宽度和高度 height：控制控制当前行的当前行的高度，其取值为像素数。高度，其取值为像素数。 width：控制控制当前行的当前行的宽度，其取值为像素数。宽度，其取值为像素数。 3）设置表格行背景色和背景图）设置表格行背景色和背景图 bgcolor：设置设置当前行的当前行的背景颜色。背景颜色。 background：设置设置当前行的当前行的背景图案。背景图案。 4）bordercolor:设置当前行的边框颜色设置当前行的边框颜色 超文本标记语言HTML2.表格标记符及其属性表

23、格标记符及其属性 五五.表格表格(4) 功能：功能：定义表格行列标题单元格内容。结束标记可定义表格行列标题单元格内容。结束标记可以省略。以省略。 属性：属性： 1）合并单元格）合并单元格 rowspan：行合并，其取值表示纵向方向上合并行合并，其取值表示纵向方向上合并的行数。的行数。 colspan：列合并，其取值表示横向方向上合并列合并，其取值表示横向方向上合并的列数。的列数。 举例超文本标记语言HTML2.表格标记符及其属性表格标记符及其属性 五五.表格表格(4) 2）单元格对齐方式）单元格对齐方式 align：控制表格标题单元格内容的水平对齐。控制表格标题单元格内容的水平对齐。 vali

24、gn：控制表格标题单元格内容的垂直对齐。控制表格标题单元格内容的垂直对齐。 3）设置单元格高度和宽度）设置单元格高度和宽度 height：控制单元格高度，其取值为像素数。控制单元格高度，其取值为像素数。 width：控制单元格宽度，其取值为像素数。控制单元格宽度，其取值为像素数。 4）设置单元格背景色和背景图）设置单元格背景色和背景图 bgcolor：设置背景颜色。设置背景颜色。 background：设置背景图案。设置背景图案。 超文本标记语言HTML习题习题2_3：请画出下面：请画出下面HTML文件在浏览器中的显示效果文件在浏览器中的显示效果五五.表格表格超文本标记语言HTML练习题：请编

25、写练习题：请编写HTML文件，完成下表。文件，完成下表。 五五.表格表格超文本标记语言HTML1.什么是框架网页什么是框架网页六六. 框架网页框架网页所谓框架网页是指将浏览器窗口划分为不同的部分，所谓框架网页是指将浏览器窗口划分为不同的部分，每部分加载一个独立的网页，从而获得在一个浏览器每部分加载一个独立的网页，从而获得在一个浏览器窗口同时显示多个网页的特殊效果。另外，通过为超窗口同时显示多个网页的特殊效果。另外，通过为超链接指定目标框架，可以实现页面导航功能。链接指定目标框架，可以实现页面导航功能。 举例超文本标记语言HTML2. 框架的结构框架的结构六六. 框架框架 此网页使用了框架，但您

26、的浏览器不支持框架。此网页使用了框架，但您的浏览器不支持框架。 超文本标记语言HTML3.常用标记符及其属性常用标记符及其属性 六六. 框架框架（1）功能：功能：设置框架集网页，结束标记不能省略。设置框架集网页，结束标记不能省略。属性：属性：rows：设置横向框架的数量和高度。：设置横向框架的数量和高度。cols： 设置纵向框架的数量和宽度。设置纵向框架的数量和宽度。超文本标记语言HTML3.常用标记符及其属性常用标记符及其属性 六六. 框架框架（1）rows和和cols的值有以下三种方式：的值有以下三种方式： 像素值像素值 百分数百分数 n*(n=1)：表示浏览器窗口的剩余部分。例如：表示浏

27、览器窗口的剩余部分。例如： cols=”30%,*” cols=”*,*,*” cols=”*,2*,3*” cols=”*,200,3*”超文本标记语言HTML3.常用标记符及其属性常用标记符及其属性 六六. 框架框架（1）提示：提示： rows和和cols的取值个数确定了的取值个数确定了标记的个数。标记的个数。 rows和和cols各个值之间用各个值之间用“，”号分开，且不能有空号分开，且不能有空格。格。 rows和和cols一般不同时使用，如果需要构造同时包含一般不同时使用，如果需要构造同时包含纵横框架的网页，可用网页的嵌套。纵横框架的网页，可用网页的嵌套。 超文本标记语言HTML3.常

28、用标记符及其属性常用标记符及其属性 六六. 框架框架（2） 属性：属性：src：指定框架中显示的页面。指定框架中显示的页面。name：设置框架名称，与设置框架名称，与标记的标记的target属性配合，可完成目标属性配合，可完成目标框架的超链结。框架的超链结。 例：例：注：注：target的取值也可为以下特殊框架：的取值也可为以下特殊框架：_top：表示将超链接的目标文件装入整个浏览器窗口。：表示将超链接的目标文件装入整个浏览器窗口。_self：表示将超链接的目标文件装入当前框架，此值为缺省值。：表示将超链接的目标文件装入当前框架，此值为缺省值。_blank：表示将超链接的目标文件装入一个新的浏

29、览器窗口。：表示将超链接的目标文件装入一个新的浏览器窗口。超文本标记语言HTML3.常用标记符及其属性常用标记符及其属性 六六. 框架框架（2） 属性：属性：frameborder：控制是否显示框架边框。其中值控制是否显示框架边框。其中值1为缺省为缺省值，表示生成值，表示生成3D边框；而边框；而0表示不显示边框。表示不显示边框。scrolling：控制是否在框架内加入滚动条。其中值：控制是否在框架内加入滚动条。其中值： yes同时加入垂直和水平滚动条；同时加入垂直和水平滚动条； no不加入垂直和水平滚动条；不加入垂直和水平滚动条； auto为缺省值，表示需要时加入滚动条。为缺省值，表示需要时加

30、入滚动条。noresize：控制框架的位置和大小固定不变。该属性不控制框架的位置和大小固定不变。该属性不需要任何取值。例：需要任何取值。例：超文本标记语言HTML3.常用标记符及其属性常用标记符及其属性 六六. 框架框架（3） 包含了框架不能正常显示时的替代内容，包含了框架不能正常显示时的替代内容，和和必须成对使用，且必须必须成对使用，且必须包含一个包含一个标记符。标记符。 超文本标记语言HTML4.框架网页的应用框架网页的应用 六六. 框架框架（1）创建框架集网页）创建框架集网页 举例（2）指定初始化网页）指定初始化网页 举例（3）创建创链接并指定目标框架）创建创链接并指定目标框架 举例 超文本标记语言HTML六六. 框架框架 P73 习题习题4 AAABBBCCC超文本