《网页设计HTML简介》PPT课件.ppt

1、第二章 HTML(XHTML)基础,教学目标： 回顾上学期学过的Web站点架设知识，并能够在实际中得到使用。 掌握HTML的概念、结构和用途，初步学会使用HTML编辑工具。 掌握HTML常用标签的作用及用法。 学会实际动手编写第一个自己的HTML页面。 教学重点和难点： HTML文件基本结构和编写 DW编辑器的基本使用,一、Web站点的运行环境和运行过程,运行环境： 1、服务端需要安装IIS（Internet Information Server）Internet信息服务器。 2、客户端需要安装浏览器（例如：Internet Explorer 简称IE ） 。 3、运行过程：图示如下,发出请求

2、到服务端,发送数据到客户端,使用HTTP（超文本传输协议）工作,HTML文档的定义和作用 HTML是HyperText Markup Language的简写，称为超文本标记语言。 HTML并不是一种程序， 也不是一个图文混排的排版软件，它只是一种控制网页内容显示的文本类型的标识语言。HTML是纯文本类型的文件，可以使用任何一种文本编辑器进行编写，通过浏览器解释执行,二、HTML简介及基本结构,HTML文档基本结构,文件开始,文件结束,文件头区域,文件标题,文件体区域,文件中可见内容,文件头中的内容在浏览器打开时是看不到的，这些内容只是用来设 置文件标题和属性的。 * 文件体中的内容在浏览器中是

3、可以看到的，可见部分的代码必须写 在区域中,HTML文档语法 （1）单标签：格式为，其作用是在相应位置插入标签，例如标签表示在该标签所在的位置插入一个换行符。 注：XHTML中单标签的书写格式为 （2）双标签：由首标签和尾标签两部分组成，格式为要控制的内容，仅对包含在其中的文件部分发生作用,3）标签属性：在单标签或是双标签的首标签中可以设置一些属性，增强该标签的作用，格式为，尾标签保持原样。 * 属性中的双引号切记不要省略。 * 由标签相互进行嵌套构成整个文档。 * 单、双标签切记不要忽视或是缺省。 * 网页显示的速度与网页代码的质量有很大的关 系,三、HTML常用标签,1、标题标签： 格式：

4、 作用：为浏览器标题栏设置标题。 2、页面的主体标签： 格式： 属性： text、background、bgcolor、leftmargin、topmargin。 作用：要在浏览器中显示的内容必须放于其中,3、换行标签： 格式： 作用：使标签后面的内容从下一行开始显示。 4、强制不换行标签： 格式： 作用：把不适于分开的词和短语放在同一行中,5、分段控制标签： 格式： 属性：align（left、center、right） 作用：可以区别出文字的不同段落。 6、原样显示文字(预格式化)标签： 格式： 作用：通过浏览器显示时，如果要显示源代码中排版时的效果，可用原样显示文字标签实现,7、居中对齐

5、标签： 格式： 作用：使与之间的内容水平居中对齐。 8、标题文字标签： 格式： 属性：align（left、center、right） * n的取值范围是16，值为1时字号最大;值为6时字号最小,9、文字格式控制标签： 格式： 属性：face（宋体、黑体、verdana）、 size（17）、color（颜色代码） *color的值是用六位十六进制表示的，如#000000表示黑色，#FFFFFF表示白色，每二位表示三颜色RGB（红、绿、蓝）中的一种颜色,10、文字修饰标签 格式：（粗体） （粗体） （斜体） （斜体） （下划线） （删除线） （上标） （下标） * 文字更多、更强的修饰可以由C

6、SS样式表完成，在后续的CSS样式章节中会进行详细讲解,11、水平线标签 格式： 作用：换行并在该行下画一条横线，横线上下两端都会留出一定的空白。标签的属性有（size、width、align、color、noshade），详见下表,12、插入图像标签 格式： 属性,src：设置图像存放的位置。 width：设置图像宽度，单位是px 。 height：设置图像高度，单位是px 。 align：设置图像与周边内容的对齐方式，值为left、right、top、middle、bottom。 alt：设置当鼠标光标移到图像上时显示的提示信息。 border：设置图像的边框线宽度，单位是px 。 vsp

7、ace：设置图像与周边内容的垂直间距，单位是px 。 hspace：设置图像与周边内容的水平间距，单位是px,13、表格标签,1）表格的结构： （2）表行： （3）单元格： *一个表由开始，结束，表的内容由和定义和组成的。指明了表的一个行，表有多少行就有多少个；表有多少个“格子”就有多少个,标签属性： 1、border：表格边框线粗细，值为数字，单位是像素。 2、bordercolor：表格边框线颜色，值为颜色代码。 3、bordercolorlight：表格亮边框颜色，值为颜色代码。 4、bordercolordark：表格暗边框颜色，值为颜色代码。 5、width：表格宽度，值为数字或百分

8、比数字，单位是像素或百分比,6、height：表格高度，值为数字或百分比数字，单位是像素或百分比。 7、align：表格放置的位置，值为Left、Center、Right。 8、bgcolor：表格背景颜色，值为颜色代码。 9、background：表格背景图像，值为图像存放的路径。 10、cellspacing：单元格与单元格之间的空白，值为数字。 11、cellpadding：单元格中的内容与单元格边框之间的空白，值为数字,标签属性： 1、height：表行高度，值为数字或百分比数字，单位是像素或百分比。 2、bgcolor：表行背景颜色，值为颜色代码。 3、align：表行中内容放置的水

9、平位置，值为(Left、Center、Right)。 4、valign：表行中内容放置的垂直位置，值为(Top、Middle、Bottom)。 5、bordercolor：表行边框线颜色，值为颜色代码。 6、bordercolorlight：表行亮边框颜色，值为颜色代码。 7、bordercolordark：表行暗边框颜色，值为颜色代码,标签的属性 1、bordercolor：单元格边框线颜色，值为颜色代码。 2、bgcolor：单元格背景颜色，值为颜色代码。 3、background：单元格背景图像，值为图像存放的路径。 4、width：单元格宽度，值为数字或百分比数字，单位是像素或百分比。

10、 5、height：单元格高度，值为数字或百分比数字，单位是像素或百分比。 6、rowspan：跨行（合并行），值为数字,7、colspan：跨列（合并列），值为数字。 8、align：单元格中内容放置的水平位置，值为(Left、Center、Right)。 9、valign：单元格中内容放置的垂直位置，值为(Top、Middle、Bottom)。 10、bordercolorlight：单元格亮边框颜色，值为颜色代码。 11、bordercolordark：单元格暗边框颜色，值为颜色代码,表格使用的原则：1、表格用于排版定位时，其对齐方式采用默认或居中。2、表格在使用过程中，尽量少使用跨行跨列，建议采用表格嵌套。3、由外到内使用表格，外层表格宽度最好用绝对值（像素）表示，内层表格宽度最好用相对值（百分比）表示。4、设置表格中的单元格的宽度时，一行中至少留有一个单元格的宽度不设置,14、超