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编辑器。专用的Web编辑器。HTML文件是纯文本文件*

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

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

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

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

7、t homepage!,5 HTML的基本语法规则（1）HTML文件以纯文本形式存放，扩展名为“.HTM”或“.HTML”。前者为了满足DOS识别需要而设置；如果系统为UNIX系统，则扩展名必须为“.HTML”。（2）HTML不区分大小写，例如和是相同的。（3）多数HTML标记可以嵌套，但不可以交叉。（4）HTML文件一行可以写多个标记，一个标记也可以分多行书写，不用任何续行符号。,（5）HTML源文件中的换行、回车符和多个连续空格在显示效果中是无效的。换行用标记，需要多个空格用“”（6）网页中所有的显示内容都应该受限于一个或多个标记，不应有游离于标记之外的文字或图像等，以免产生错误。（7）所

8、有用到的标点符号应使用英文半角状态下的标点符号，否则将会出现语法错误，但是字符串中的标点符号除外。,2.3 文本的格式,2.3.1 文字与段落标记1.设置标题格式标题标记功能：用于定义文章内章节标题的显示格式，并且标题字会单独成行。格式：标题文字 属性：n用来指定标题文字字号的大小。n可以取 16的整数值，数字越小，字号越大。align用来设置标题在页面中的对齐方式，取值有：left（左对齐）、center（居中）、right（右对齐）、justify（多行）。,设置标题 第1级标题（H1）第2级标题（H2）第3级标题（H3）第4级标题（H4）（居左）第5级标题（H5）（居中）第6级标题（H6

9、）（居右）,【实例2-2】使用标题字标记设置标题的大小与对齐方式。,2.文字格式标记 功能：设置网页中普通文字的显示效果，如：文字大小、字体、颜色等。格式：被设置的文字 属性：face，size，color,face属性用来设置字体。当文字为汉字时，格式中的“字体”可以为：宋体、幼圆、隶书、楷体_GB2312、黑体、仿宋_GB2312等。当文字为英文时，字体名可以为Times New Roman等约50种字体。,size属性用来设置文字的大小。数字的取值范围从17，size取1时最小，取7时最大。,color属性用来设置文字的颜色，颜色的取值可以是十六进制的RGB颜色码或者HTML给定的颜色常

10、量名。,【实例2-3】使用标记的size属性设置文字的大小，face属性设置字体，color属性设置文字颜色。文字格式标记 设置文字的格式 1号字青色 2号字绿色 3号幼圆桔黄色 4号隶书深红色 5号黑体黄绿色 6号方正舒体水蓝色 Welcome My Homepage!,16种标准颜色,3.字型标记功能：设置文字的风格，如：加粗、斜体、带下划线、上标、下标等。格式：这是一组标记，它们可以单独使用，也可以混合使用产生复合修饰效果。,【实例2-4】使用字型标记设置文字的风格。设置字型 黑体 斜体 带下划线 粗体并且斜体 带删除线 H2o X3 大字体 小字体,2.3.2 段落标记和强制换行标记

11、在HTML文档中，无法用多个回车、空格、Tab键来调整文档段落的格式，而要用HTML的标记来强制换行和分段。,1.段落标记功能：段落标记定义一个新段落的开始，它不但能使后面的文字换到下一行，还可以使两段之间多一空行。由于一段的结束意味着新一段的开始，所以使用也可省略结束标记。格式：或 属性：段落标记的align属性用来设置段落的对齐方式，其取值可以为left、center或right，分别表示居左、居中、居右，缺省时默认为left。,2.强制换行标记功能：强制换行标记通常单独出现，放在一行的末尾，可以使后面的文字、图片、表格等显示于下一行，但是不会在行与行之间留下空行。格式：文字 注意：通常一

12、个段落标记可以看作是两个强制换行标记。多个并不能产生多个空行，但多个却能达到,【实例2-5】段落标记与强制换行标记的使用。段落标记与强制换行标记的使用 段落标记 段落标记 强制换行标记 强制换行标记,2.3.3 水平线标记功能：水平线标记可以在页面中显示一条水平线，将不同功能的页面内容分隔开，使之整齐明了。当浏览器执行HTML文件中的标记时，会在此处换行，并加入一条水平线段。格式：属性：align，size，width，color。,Size and width,Size 表示以像素（pixel）为单位的线的粗细程度，默认值为2.像素是常见于显示系统（电视屏幕、计算机显示器等）的计量单位。Wi

13、dth的单位可为绝对值形式的像素长度，也可以是相对值形式的百分比。以百分比为单位时，表示水平线占当前浏览器窗口宽度的百分比；若是用缩放操作更改了浏览器窗口大小，相应水平线长度也发生改变。,【实例2-6】水平线标记的使用。水平线段标记的应用 水平线,2.3.4 其它标记1.分区显示标记功能：分区显示标记可以使文本块或一段文字在网页上：左对齐、居中对齐和右对齐。格式：文本或图像用于对多段落进行文字对齐布局。属性：属性align的取值分别为：left、center和right。静夜思 床前明月光，疑是地上霜。举头望明月，疑是地上霜。,2.特殊符号标记 浏览器解释HTML文件时，首先根据“”来识别HT

14、ML标记，然后再确定这两个符号中的内容是否为HTML标记，如果是HTML标记则按其规则解读并且显示输出。因此，如果要在网页中显示“”等一些特殊字符时，就要用其代替字符。,2.4 超链接标记,超级链接是整个WWW应用的核心和基础，它可以把页面一个个链接起来，使得网页的浏览非常方便。所以，对超级链接的掌握具有特殊的意义。功能：建立超链接。格式：显示的文本或者图像属性：href，Target。,1.创建指向其它页面的超链接 根据目标文件与当前文件的目录关系，有6种放法：（1）链接到同一目录内的网页文件，其格式为：显示的文本或者图像 目标文件名是链接所指向的文件，此时URL地址是相对路径。（2）链接到

15、下一级目录中的网页文件，其格式为：显示的文本或者图像 此时URL地址是相对路径。,（3）链接到上一级目录中的网页文件，其格式为：显示的文本或者图像 其中“./”表示退到上一级目录中，此时URL地址是相对路径。（4）链接到同级目录中的网页文件，其格式为：显示的文本或者图像 表示先退到上一级目录中，然后再进入到目标文件所在的目录，此时URL地址是相对路径。,（5）链接到Internet上的网页，其格式为：显示的文本或者图像网址采用绝对路径，即使用网络上一个完整的路径名称。（6）E-mail超级链接，其格式为：指向E-mail地址的超级链接,Target属性,Target=“_blank”新窗口中显

16、示Target=“_parent”当前页面的父级框架Target=“_self”当前文档框架Target=“_top”链接所在的完整窗口中Target=“_search”在浏览器搜索显示目标网页（IE5或以上版本支持）,2.创建指向本页面中的超链接 要在当前页面内实现超链接，需要定义两个标记：一个为超链接标记，另一个为书签标记。超链接标记的格式：显示的文本或者图像 书签标记的格式为：目标文本附近的字符串 功能：单击显示的文本或者图像，将跳转到“记号名”开始的文本。,2.5.1 无序列表标记功能：无序列表就是项目间并无顺序关系，仅仅利用条列来呈现资料，此种无序列表标记，在各条列前面均有一符号以示

17、区隔。格式：列表项目一 列表项目二 列表项目三 属性：无序列表使用和表示列表的开始和结束，标记表示每一个列表项目。,2.5 列表标记,无序列表标记在中，type属性的使用 列表项目一 列表项目二 列表项目三,在中，type属性的使用 DISC CIRCLE SQUARE,【实例2-7】无序列表标记的使用。,2.5.2 有序列表标记功能：有序列表用来设置有前后顺序之分的列表项。格式：列表项目一 列表项目二 列表项目三属性：有序列表使用和表示列表的开始和结束，标记表示每一个列表项目。,【实例2-8】有序列表标记的使用。,有序列表标记 默认的有序列表 默认的有序列表,第1项 第2项 第3项,2.5.

18、3 自定义列表标记功能：用于需要对列表条目进行简短说明的场合。格式：列表条目一条目一的说明列表条目二条目二的说明,属性：自定义列表使用和表示列表的开始和结束。标记表示每项自定义条目名称。标记表示每条自定义条目的说明，自动向右缩进。,【实例2-9】自定义列表标记的使用。,自定义列表标记这是一个定义性列表：DL标记符 代表HTML自定义列表。DT标记符,表示每个自定义列表项的标题。DD标记符 用于描述自定义列表项的内容。,2.6 表格标记,表格方便灵活的排版，目前很多大型网站也都是借助表格排版和页面布局的。表格可以把相互关联的信息元素集中定位，使浏览者浏览页面时一目了然。,功能：建立基本表格。格式

19、：表格标题表头一 表头二表头n表项一 表项二表项n表项一 表项二表项n,属性：（1）标记用来创建一个表格。（2）标记表示对表格标题的说明。（3）标记定义行，该标记中间的内容显示在一行，此标记对只能放在标记之间使用。（4）和标记表示单元格标记，这两个标记必须嵌套在标记中，成对出现。（5）要创建跨多行、多列的单元格，只需在或中加入ROWSPAN或COLSPAN属性的属性值，表明了表格中要跨越的行或列的个数。,【实例2-10】表格标记的简单应用。,表格标记 学生成绩表 姓名 课程名称 成绩,蓉蓉 数学 86 妮妮 计算机基础 90 娜娜 英语 82,不规则表格的产生,RowSpan=“2”,不规则表

20、格标记     ,ColSpan=“2”,ColSpan=“3”,表格的属性1,Align：left-“靠左”、center-“居中”和right-“靠右”Valigh：top-“靠上”、center-“居中”和bottom-”靠右”Bgcolor：设置背景颜色。Width：设置宽度。NoWrap：布尔属性，不自动拆行。,表格属性2,Border:边框CellSpacing：单元格间距（表格间距）CellPadding：单元格边距（表格填充）,Border 边框宽度,CellSpacing 单元格与单元格的距离,CellPadding 单元格与单元格内容

21、的距离,2.7 图像和多媒体标记,2.7.1 图像标记 在网页中加入适当的图片可以使网页丰富多彩，具有更强的吸引力。HTML提供了标记来处理图像的输出。功能：在当前位置插入图像。格式：属性：src，alt，width，height，border，hspace，vspace，align。,【实例2-11】图像标记的应用。,图像标记的应用,2.7.2 音频标记功能：在网页中加入声音，声音文件可以是*.WAV、*.AU、*.MID等。格式：。属性：src属性表示声音文件的存放地址，loop控制播放次数，取-1或者INFINITE时，声音将一直播放到浏览者离开该网页时为止。,【实例2-12】音频标记的

22、应用。,背景声音网页的背景声音,2.7.3 视频标记功能：在页面中放置如SWF动画（即Flash动画）、MP3音乐、电影等多种格式的多媒体信息。格式：属性：src，height和width，hidden(true/false)，autostart(true/false)，loop。,【实例2-13】视频标记的应用。,2.8 表单标记,表单是实现动态网页的一种主要的外在形式，是HTML页面与浏览器端实现交互的重要手段。它的主要功能是收集信息，当单击表单中的提交按纽时，输入在表单中的信息就会从客户端的浏览器上传到服务器中，然后由服务器中的有关表单处理程序（ASP、CGI等程序）进行处理，处理后再将

23、用户所需信息传送到客户端浏览器上，这样网页就具有了交互性。在这里只介绍如何使用HTML的表单标记来设计表单。,1.标记功能：标记用来创建一个表单，即定义表单的开始与结束位置。格式：。属性：name，action，methodAction属性：规定传递数据后，服务器向客户端传送的 网页。Method属性：规定传递数据的方式。Post方式适合传 送大量数据，get方式适合传送少量数据。Post较get更安全 其原理：Get将表单中数据的按照variable=value的形式，添加到action所指向的URL后面，并且两者使用“?”连接，而各个变量之间使用“&”连接；Post是将表单中的数据放在fo

24、rm的数据体中，按照变量和值相对应的方式，传递到action所指向URL。Name属性：规定表单的名称。,2.标记功能：输入标记是表单中最常用的标记之一。该标记用来定义一个输入区，可在其中输入信息，此标记必须放在标记对之间。格式：。属性：name属性设置输入区域的名称，服务器就是通过name来获得该区域数据的。type属性设置输入区域的类型,Type属性,Input type=“text”Input type=“password”Input type=“file”Input type=“checkbox”Input type=“radio”Input type=“button”Input ty

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

26、实例2-15】表单菜单和列表标记的应用。,请选择你居住的城市：北京上海南京广州,4.标记功能：用来创建一个可以输入多行的文本框，可以在其中输入更多的文本，此标记放在标记对之间。格式：。属性：name属性设置文本框的名称。Rows属性设置文本框的行数，以字符数为单位。cols属性设置文本框的列数，以字符数为单位。,表单文本框标记示例用户信息调查请留言：,【实例2-16】表单文本框标记的应用。,框架的作用就是把浏览器窗口划分成几个子窗口，每个子窗口可以调入各自的HTML文档形成不同的页面，也可以按照一定的方式组合在一起完成特殊的效果。框架通常的使用方法是在一个框架中放置目录并设置链接，点击链接，内

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

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

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

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