HTML基础.ppt

《HTML基础.ppt》由会员分享，可在线阅读，更多相关《HTML基础.ppt（86页珍藏版）》请在三一文库上搜索。

1、第2章 HTML基础,主讲人：宋媚,第2章 HTML基础,2.1 HTML基础 2.2 HTML基本结构 2.3 文档格式 2.4 超连接 2.5 列表 2.6 制作表格 2.7 图像和多媒体 2.8 表单 2.9 框架结构,2.1 HTML概述,2.1.1 HTML的基本概念 1.HTML介绍 超文本标记语言（Hyper Text Markup Language， HTML）的缩写，Web页面的基本元素。一种规范，一种标准，几乎所有的网页都是以HTML格式书写的。 HTML是一种描述性的标记语言，通过标识符来标识网页中内容的显示方式，比如图片的显示尺寸、文字的大小、颜色、字体等。而WWW浏览

2、器的功能就是对这些标记进行解释，按要求显示出文字、图像、动画、媒体等网页内容。,2.1 HTML概述,Web的三要素：文字、多媒体、超链接 2. HTML语言内容（从功能上大体可分为） 文本结构、属性设置 超链接 列表建立 表格 图像和多媒体 表单,HTML的制定与维护,目前，HTML由国际组织W3C（万维网联盟）制定和维护，HTML3.2是目前支持最好的标准（几乎所有浏览器都支持），最新的标准是HTML4.0。 若需要了解HTML的更详细情况，可访问W3C的官方网站：http:/www.w3.org,2.1 HTML概述,HTML常用编辑工具 任何一个文档编辑器都是HTML编辑器。 专用的W

3、eb编辑器。 HTML文件是纯文本文件 *.html *.htm 说明：此处， .html和 .htm并无本质区别。只不过后者为了满足DOS仅能识别三位文件名的需要而设置（国际通用）。,2.1 HTML概述,2.1.2 标记符 标记符又称标签，用来控制网页内容显示效果。 双标记格式 受影响的内容 单标记格式： 受影响的内容 标记没有大小写之分，但为了便于HTML文档的维护，通常约定使用大写。,2.1 HTML语言概述,标记的属性 作用： 用来控制受标记影响的内容的显示和输出格式（标记符标识对象的特征）。 格式： 文本 例如：属性示例 说明： 并不是所有的标记都有属性，例：、。,2.2 HTML

4、的基本结构,HTML的基本结构 包括HEAD、TITLE、BODY三部分，下面是基本结构： HTML文件开始 文件头开始 标题部分 文件头结束 文件体开始 正文部分 文件体结束 HTML文件结束,2.2 HTML的基本结构,HTML基本标记 HTML文档标记 格式： HTML文件头标记 格式： 还可以包含, HTML文件主体标记 格式： 注意：与为独立的两个部分，不能互相嵌套。,1.HTML文件标记符 和标记符放在网页文档的最外层，表示这对标记符之间的内容是HTML文件。处于文件的最前端，表示HTML文件的开始，即浏览器从开始解释，而则位于文件的最后一行，这表示这一整份的文档都是HTML语法的

5、文档。 2.HEAD文件头标记符 和是HTML文件头标记符，它用来说明文档的整体信息，所标记的内容并不会出现在WWW浏览器所看到的窗体中。通常与某些标记符一起使用。,3.BODY文件体标记符 是HTML文件的主体标记符。网页正文中的所有内容包括文字、表格、图像、声音和动画等都包含在这对标记符之间，它的格式为：,bgcolor：标识HTML文档的背景颜色，默认设置为白色。,background：设置HTML文档的背景图片，可以使用的图片格式为GIF，JPG等。,text：标识HTML文档的正文文字颜色，它定义的颜色将应用于整篇文档。,超级链接颜色：link、vlink、alink分别控制普通超级

6、链接、访问过的超级链接、当前活动超级链接的颜色。,Topmargin 和 leftmargin：设置网页主体内容距离网页顶端和左端的距离。,HTML基本标记,HTML文件主体标记 属性概述 background：设置网页的背景图像 bgcolor：设置网页的背景颜色 link：设置未被访问过的超文本链接的颜色 vlink:设置已被访问过的超文本链接的颜色 alink:设置链接在被访问的瞬间的颜色 Leftmargin：左边页边空白 topmargin：顶端页边空白 text：颜色值 bgproperties ：设置为fixed（固定）时，页面内容翻动而背景图像固定不动,4.第一个网页 【实例2

7、-1】HTML基本结构网页 my first page This is my first homepage! ,5 HTML的基本语法规则 （1）HTML文件以纯文本形式存放，扩展名为“.HTM”或“.HTML”。前者为了满足DOS识别需要而设置；如果系统为UNIX系统，则扩展名必须为“.HTML”。 （2）HTML不区分大小写，例如和是相同的。 （3）多数HTML标记可以嵌套，但不可以交叉。 （4）HTML文件一行可以写多个标记，一个标记也可以分多行书写，不用任何续行符号。,（5）HTML源文件中的换行、回车符和多个连续空格在显示效果中是无效的。换行用标记，需要多个空格用“” （6）网页中所

8、有的显示内容都应该受限于一个或多个标记，不应有游离于标记之外的文字或图像等，以免产生错误。 （7）所有用到的标点符号应使用英文半角状态下的标点符号，否则将会出现语法错误，但是字符串中的标点符号除外。,2.3 文本的格式,2.3.1 文字与段落标记 1.设置标题格式 标题标记 功能：用于定义文章内章节标题的显示格式，并且标题字会单独成行。 格式： 标题文字 属性：n用来指定标题文字字号的大小。n可以取 16的整数值，数字越小，字号越大。 align用来设置标题在页面中的对齐方式，取值有：left（左对齐）、center（居中）、right（右对齐）、justify（多行）。, 设置标题 第1级标

9、题（H1） 第2级标题（H2） 第3级标题（H3） 第4级标题（H4）（居左） 第5级标题（H5）（居中） 第6级标题（H6）（居右） ,【实例2-2】使用标题字标记设置标题的大小与对齐方式。,2. 文字格式标记 功能：设置网页中普通文字的显示效果，如：文字大小、字体、颜色等。 格式：被设置的文字 属性： face， size， color,face属性用来设置字体。当文字为汉字时，格式中的“字体”可以为：宋体、幼圆、隶书、楷体_GB2312、黑体、仿宋_GB2312等。当文字为英文时，字体名可以为Times New Roman等约50种字体。,size属性用来设置文字的大小。数字的取值范围从

10、17，size取1时最小，取7时最大。,color属性用来设置文字的颜色，颜色的取值可以是十六进制的RGB颜色码或者HTML给定的颜色常量名。,【实例2-3】使用标记的size属性设置文字的大小，face属性设置字体，color属性设置文字颜色。 文字格式标记 设置文字的格式 1号字青色 2号字绿色 3号幼圆桔黄色 4号隶书深红色 5号黑体黄绿色 6号方正舒体水蓝色 Welcome My Homepage! ,16种标准颜色,3. 字型标记 功能：设置文字的风格，如：加粗、斜体、带下划线、上标、下标等。 格式：这是一组标记，它们可以单独使用，也可以混合使用产生复合修饰效果。,【实例2-4】使用

11、字型标记设置文字的风格。 设置字型 黑体 斜体 带下划线 粗体并且斜体 带删除线 H2o X3 大字体 小字体 ,2.3.2 段落标记和强制换行标记 在HTML文档中，无法用多个回车、空格、Tab键来调整文档段落的格式，而要用HTML的标记来强制换行和分段。,1.段落标记 功能：段落标记定义一个新段落的开始，它不但能使后面的文字换到下一行，还可以使两段之间多一空行。由于一段的结束意味着新一段的开始，所以使用也可省略结束标记。 格式：或 属性：段落标记的align属性用来设置段落的对齐方式，其取值可以为left、center或right，分别表示居左、居中、居右，缺省时默认为left。,2. 强

12、制换行标记 功能：强制换行标记通常单独出现，放在一行的末尾，可以使后面的文字、图片、表格等显示于下一行，但是不会在行与行之间留下空行。 格式：文字 注意：通常一个段落标记可以看作是两个强制换行标记。多个并不能产生多个空行，但多个却能达到,【实例2-5】段落标记与强制换行标记的使用。 段落标记与强制换行标记的使用 段落标记 段落标记 强制换行标记 强制换行标记 ,2.3.3 水平线标记 功能：水平线标记可以在页面中显示一条水平线，将不同功能的页面内容分隔开，使之整齐明了。当浏览器执行HTML文件中的标记时，会在此处换行，并加入一条水平线段。 格式： 属性： align， size， width，

13、 color。,Size and width,Size 表示以像素（pixel）为单位的线的粗细程度，默认值为2.像素是常见于显示系统（电视屏幕、计算机显示器等）的计量单位。 Width的单位可为绝对值形式的像素长度，也可以是相对值形式的百分比。以百分比为单位时，表示水平线占当前浏览器窗口宽度的百分比；若是用缩放操作更改了浏览器窗口大小，相应水平线长度也发生改变。,【实例2-6】水平线标记的使用。 水平线段标记的应用 水平线 ,2.3.4 其它标记 1.分区显示标记 功能：分区显示标记可以使文本块或一段文字在网页上：左对齐、居中对齐和右对齐。 格式：文本或图像用于对多段落进行文字对齐布局。 属

14、性：属性align的取值分别为：left、center和right。 静夜思 床前明月光， 疑是地上霜。 举头望明月， 疑是地上霜。,2.特殊符号标记 浏览器解释HTML文件时，首先根据“”来识别HTML标记，然后再确定这两个符号中的内容是否为HTML标记，如果是HTML标记则按其规则解读并且显示输出。因此，如果要在网页中显示“”等一些特殊字符时，就要用其代替字符。,2.4 超链接标记,超级链接是整个WWW应用的核心和基础，它可以把页面一个个链接起来，使得网页的浏览非常方便。所以，对超级链接的掌握具有特殊的意义。 功能：建立超链接。 格式：显示的文本或者图像 属性：href，Target。,1

15、.创建指向其它页面的超链接 根据目标文件与当前文件的目录关系，有6种放法： （1）链接到同一目录内的网页文件，其格式为： 显示的文本或者图像 目标文件名是链接所指向的文件，此时URL地址是相对路径。 （2）链接到下一级目录中的网页文件，其格式为： 显示的文本或者图像 此时URL地址是相对路径。,（3）链接到上一级目录中的网页文件，其格式为： 显示的文本或者图像 其中“/”表示退到上一级目录中，此时URL地址是相对路径。 （4）链接到同级目录中的网页文件，其格式为： 显示的文本或者图像 表示先退到上一级目录中，然后再进入到目标文件所在的目录，此时URL地址是相对路径。,（5）链接到Interne

16、t上的网页，其格式为： 显示的文本或者图像 网址采用绝对路径，即使用网络上一个完整的路径名称。 （6）E-mail超级链接 ，其格式为： 指向E-mail地址的超级链接,Target属性,Target=“_blank” 新窗口中显示 Target=“_parent” 当前页面的父级框架 Target=“_self” 当前文档框架 Target=“_top” 链接所在的完整窗口中 Target=“_search” 在浏览器搜索显示目标网页（IE5或以上版本支持）,2.创建指向本页面中的超链接 要在当前页面内实现超链接，需要定义两个标记：一个为超链接标记，另一个为书签标记。 超链接标记的格式：显示

17、的文本或者图像 书签标记的格式为： 目标文本附近的字符串 功能：单击显示的文本或者图像，将跳转到“记号名”开始的文本。,2.5.1 无序列表标记 功能：无序列表就是项目间并无顺序关系，仅仅利用条列来呈现资料，此种无序列表标记，在各条列前面均有一符号以示区隔。 格式： 列表项目一 列表项目二 列表项目三 属性：无序列表使用和表示列表的开始和结束，标记表示每一个列表项目。,2.5 列表标记, 无序列表标记 在中，type属性的使用 列表项目一 列表项目二 列表项目三 ,在中，type属性的使用 DISC CIRCLE SQUARE ,【实例2-7】无序列表标记的使用。,2.5.2 有序列表标记 功

18、能：有序列表用来设置有前后顺序之分的列表项。 格式： 列表项目一 列表项目二 列表项目三 属性：有序列表使用和表示列表的开始和结束，标记表示每一个列表项目。,【实例2-8】有序列表标记的使用。, 有序列表标记 默认的有序列表 默认的有序列表 , 第1项 第2项 第3项 ,2.5.3 自定义列表标记 功能：用于需要对列表条目进行简短说明的场合。 格式： 列表条目一 条目一的说明 列表条目二 条目二的说明 ,属性：自定义列表使用和表示列表的开始和结束。 标记表示每项自定义条目名称。 标记表示每条自定义条目的说明，自动向右缩进。,【实例2-9】自定义列表标记的使用。, 自定义列表标记 这是一个定义性

19、列表： DL标记符 代表HTML自定义列表。 DT标记符,表示每个自定义列表项的标题。 DD标记符 用于描述自定义列表项的内容。 ,2.6 表格标记,表格方便灵活的排版，目前很多大型网站也都是借助表格排版和页面布局的。 表格可以把相互关联的信息元素集中定位，使浏览者浏览页面时一目了然。,功能：建立基本表格。 格式： 表格标题 表头一 表头二表头n 表项一 表项二表项n 表项一 表项二表项n ,属性： （1）标记用来创建一个表格。 （2） 标记表示对表格标题的说明。 （3）标记定义行，该标记中间的内容显示在一行，此标记对只能放在标记之间使用。 （4）和标记表示单元格标记，这两个标记必须嵌套在标记

20、中，成对出现。 （5）要创建跨多行、多列的单元格，只需在或中加入ROWSPAN或COLSPAN属性的属性值，表明了表格中要跨越的行或列的个数。,【实例2-10】表格标记的简单应用。, 表格标记 学生成绩表 姓名 课程名称 成绩 , 蓉蓉 数学 86 妮妮 计算机基础 90 娜娜 英语 82 ,不规则表格的产生,RowSpan=“2”, 不规则表格标记           ,ColSpan=“2”,ColSpan=“3”,表格的属性1,Align： left-“靠左”、center-“居中”和right-“靠右” Valigh：top-“靠上”、cente

21、r-“居中”和bottom-”靠右” Bgcolor：设置背景颜色。 Width：设置宽度。 NoWrap：布尔属性，不自动拆行。,表格属性2,Border:边框 CellSpacing：单元格间距（表格间距） CellPadding：单元格边距（表格填充）,Border 边框宽度,CellSpacing 单元格与单元格的距离,CellPadding 单元格与单元格内容的距离,2.7 图像和多媒体标记,2.7.1 图像标记 在网页中加入适当的图片可以使网页丰富多彩，具有更强的吸引力。HTML提供了标记来处理图像的输出。 功能：在当前位置插入图像。 格式： 属性：src，alt，width，he

22、ight，border，hspace， vspace，align。,【实例2-11】图像标记的应用。, 图像标记的应用 ,2.7.2 音频标记 功能：在网页中加入声音，声音文件可以是*.WAV、*.AU、*.MID等。 格式：。 属性：src属性表示声音文件的存放地址，loop控制播放次数，取-1或者INFINITE时，声音将一直播放到浏览者离开该网页时为止。,【实例2-12】音频标记的应用。, 背景声音 网页的背景声音 ,2.7.3 视频标记 功能：在页面中放置如SWF动画（即Flash动画）、MP3音乐、电影等多种格式的多媒体信息。 格式： 属性 ：src，height和width，hid

23、den(true/false)，autostart(true/false)，loop 。,【实例2-13】视频标记的应用。,2.8 表单标记,表单是实现动态网页的一种主要的外在形式，是HTML页面与浏览器端实现交互的重要手段。它的主要功能是收集信息，当单击表单中的提交按纽时，输入在表单中的信息就会从客户端的浏览器上传到服务器中，然后由服务器中的有关表单处理程序（ASP、CGI等程序）进行处理，处理后再将用户所需信息传送到客户端浏览器上，这样网页就具有了交互性。在这里只介绍如何使用HTML的表单标记来设计表单。,1.标记 功能：标记用来创建一个表单，即定义表单的开始与结束位置。 格式：。 属性：

24、name ，action，method Action属性：规定传递数据后，服务器向客户端传送的 网页。 Method属性：规定传递数据的方式。Post方式适合传 送大量数据，get方式适合传送少量数据。 Post较get更安全 其原理：Get将表单中数据的按照variable=value的形式，添加到action所指向的URL后面，并且两者使用“?”连接，而各个变量之间使用 “&”连接；Post是将表单中的数据放在form的数据体中，按照变量和值相对应的方式，传递到action所指向URL。 Name属性：规定表单的名称。,2.标记 功能：输入标记是表单中最常用的标记之一。该标记用来定义一个输

25、入区，可在其中输入信息，此标记必须放在标记对之间。 格式：。 属性：name属性设置输入区域的名称，服务器就是通过name来获得该区域数据的。 type属性设置输入区域的类型,Type属性,Input type=“text” Input type=“password” Input type=“file” Input type=“checkbox” Input type=“radio” Input type=“button” Input type=“submit” Input type=“reset” Input type=“image” Input type=“hidden”, 表单输入标记示

26、例 用户信息调查 姓名： 网址： 密码： 确认密码： 请上传你的照片： 请选择你喜欢的音乐： 摇滚乐 爵士乐 流行乐,【实例2-14】表单输入标记示例。,请选择你居住的城市： 北京 上海 南京 ,3. 和标记 功能： 标记用来创建一个下拉列表框或可以复选的列表框，它必须放在标记对之间。标记用来指定菜单和列表中的一个选项，它放在标记对之间。 格式： 选项一 选项二 。 属性：name,multiple,value, 表单菜单和列表标记示例 用户信息调查 请选择你喜欢的体育项目： 足球 篮球 乒乓球 网球 ,【实例2-15】表单菜单和列表标记的应用。,请选择你居住的城市： 北京 上海 南京 广州

27、,4. 标记 功能：用来创建一个可以输入多行的文本框，可以在其中输入更多的文本，此标记放在标记对之间。 格式：。 属性：name属性设置文本框的名称。 Rows属性设置文本框的行数，以字符数为单位。 cols属性设置文本框的列数，以字符数为单位。, 表单文本框标记示例 用户信息调查 请留言： ,【实例2-16】表单文本框标记的应用。,框架的作用就是把浏览器窗口划分成几个子窗口，每个子窗口可以调入各自的HTML文档形成不同的页面，也可以按照一定的方式组合在一起完成特殊的效果。框架通常的使用方法是在一个框架中放置目录并设置链接，点击链接，内容显示在另一个框架中；或者有时一个网页的不同部分由不同的人

28、员制作，可以每人完成一个子窗口，然后利用框架技术将它们合并在一起形成一个完整的页面。,2.9 框架标记,1. 标记 功能：定义分割窗口，即定义主文档中有几个框架并且各个框架是如何排列的。 格式：。 属性：cols属性与rows属性分别表示左右和上下分割窗口（用“，”分割，value为定义各个框架的宽度值，单位可以是百分比、绝对像素值或星号(“*”)，其中星号表示剩余部分）。 framespacing：设定框架集的边框宽度。 bordercolor：设定框架集边框颜色。,2. 标记 功能：定义某一个具体的框架。 格式：。 属性：src属性设置框架显示的文件路径。 Name属性定义此框架的名字。

29、scrolling属性设定滚动条是否显示。 noresize属性禁止改变框架的尺寸大小。,3. 标记 标记对放在标记对之间，用来在那些不支持框架的浏览器中显示文本或图像信息。,HTML语言是网页制作的一种规范，一种标准，是网站开发和网页设计的最基本知识，几乎所有的网页都是以HTML规范书写的，它通过标识符来标记网页的各个部分。 本章首先介绍了HTML语言的基本概念、基本结构和基本语法规则。然后重点介绍了使用HTML制作网页的各种标记的使用方法，主要包括文字与段落标记、列表标记、表格标记、多媒体标记、超链接标记、表单标记和框架标记。熟练掌握这些标记的使用，将对网页的设计打下良好的基础。,2.10

30、 本章小结,3.10 习题,一、填空题 1.HTML不是一种编程语言，而是一种描述性的标记语言，它通过_来标识网页中内容的显示方式。 2.HTML网页文件主要由_和_两部分内容构成。 3.HTML中用_标记强制换行。 4.概括起来，文档的链接路径主要有_、_和_ 种形式。 5._标记用来创建一个表单，即定义表单的开始与结束位置。 二、实训题 1.编写代码实现一个最基本的网页，页面输出“hello world!”，效果如下图所示。,2.编写代码实现下图浏览器显示效果，熟悉段落、换行、标题等基本标记。,3.编写代码实现下图浏览器显示效果，熟悉列表、超链接等标记。,4.编写代码实现下图浏览器显示效果

31、，熟悉表格及相关标记。,5.编写代码实现下图浏览器显示效果，熟悉表单及相关标记。,一、填空题 1.标记符（标签、标识符） 2.文件头、文件体 3. 4.绝对路径、相对路径、根目录相对路径 5.,习题参考答案,二、实训题 1.代码如下： Hello world! Hello world! ,2.代码如下： 静夜思 李白 床前明月光， 疑是地上霜。 举头望明月， 低头思故乡。 ,3.代码如下： 超链接 百 度 新 浪 搜 狐 网 易 ,4.代码如下： 学生信息表 学生信息表 编号 姓名 性别 院系 专业 ,0001 张三 男 信息工程学院 软件工程 0002 李四 男 文学院 汉语言文学 ,5.代码如下 用户注册页面 用户注册 姓名： ,密码： 密码验证： 请上传你的照片： 请选择你喜欢的音乐： 摇滚乐 爵士乐 流行乐,请选择你居住的城市： 北京 上海 南京 ,