网页设计 HTML简介

第二章HTML(XHTML)基础教学目标：回顾上学期学过的Web站点架设知识，并能够在实际中得到使用。掌握HTML的概念、结构和用途，初步学会使用HTML编辑工具。掌握HTML常用标签的作用及用法。学会实际动手编写第一个自己的HTML页面。教学重点和难点：HTML文件基本结构和编写DW编辑器的基本使用一、Web站点的运行环境和运行过程运行环境：1、服务端需要安装IIS（InternetInformationServer）Internet信息服务器。2、客户端需要安装浏览器（例如：InternetExplorer简称IE）。3、运行过程：图示如下。发出请求到服务端发送数据到客户端ServerClient使用HTTP（超文本传输协议）工作HTML文档的定义和作用HTML是HyperTextMarkupLanguage的简写，称为超文本标记语言。HTML并不是一种程序，也不是一个图文混排的排版软件，它只是一种控制网页内容显示的文本类型的标识语言。HTML是纯文本类型的文件，可以使用任何一种文本编辑器进行编写，通过浏览器解释执行。二、HTML简介及基本结构HTML文档基本结构文件开始文件结束文件头区域文件标题文件体区域文件中可见内容*文件头中的内容在浏览器打开时是看不到的，这些内容只是用来设置文件标题和属性的。*文件体中的内容在浏览器中是可以看到的，可见部分的代码必须写在body……/body区域中。HTML文档语法（1）单标签：格式为标签名称，其作用是在相应位置插入标签，例如br标签表示在该标签所在的位置插入一个换行符。注：XHTML中单标签的书写格式为标签名称/（2）双标签：由首标签和尾标签两部分组成，格式为标签名称要控制的内容/标签名称，仅对包含在其中的文件部分发生作用。（3）标签属性：在单标签或是双标签的首标签中可以设置一些属性，增强该标签的作用，格式为标签名称属性1=“值1“属性2=“值2“……，尾标签保持原样。*属性中的双引号切记不要省略。*由标签相互进行嵌套构成整个文档。*单、双标签切记不要忽视或是缺省。*网页显示的速度与网页代码的质量有很大的关系。三、HTML常用标签1、标题标签：格式：title/title作用：为浏览器标题栏设置标题。2、页面的主体标签：格式：body/body属性：text、background、bgcolor、leftmargin、topmargin。作用：要在浏览器中显示的内容必须放于其中。3、换行标签：格式：br作用：使标签后面的内容从下一行开始显示。4、强制不换行标签：格式：nobr/nobr作用：把不适于分开的词和短语放在同一行中。5、分段控制标签：格式：p/p属性：align（left、center、right）作用：可以区别出文字的不同段落。6、原样显示文字(预格式化)标签：格式：pre/pre作用：通过浏览器显示时，如果要显示源代码中排版时的效果，可用原样显示文字标签实现。7、居中对齐标签：格式：center/center作用：使center与/center之间的内容水平居中对齐。8、标题文字标签：格式：hn……/hn属性：align（left、center、right）*n的取值范围是1～6，值为1时字号最大;值为6时字号最小。9、文字格式控制标签：格式：font……/font属性：face（宋体、黑体、verdana）、size（1～7）、color（颜色代码）*color的值是用六位十六进制表示的，如#000000表示黑色，#FFFFFF表示白色，每二位表示三颜色RGB（红、绿、蓝）中的一种颜色。10、文字修饰标签格式：b……/b（粗体）strong……/strong（粗体）i……/i（斜体）em……/em（斜体）u……/u（下划线）s……/s（删除线）sup……/sup（上标）sub……/sub（下标）*文字更多、更强的修饰可以由CSS样式表完成，在后续的CSS样式章节中会进行详细讲解。11、水平线标签格式：hr作用：换行并在该行下画一条横线，横线上下两端都会留出一定的空白。标签的属性有（size、width、align、color、noshade），详见下表。属性值功能单位默认值size数字设置粗细Pixel（像素）2width数字设置宽度Pixel（像素）、百分比100%alignLeft、center、right设置横向对齐方式centercolor颜色代码设置颜色#000000noshade无设置不显示3D阴影12、插入图像标签格式：img属性：src：设置图像存放的位置。width：设置图像宽度，单位是px。height：设置图像高度，单位是px。align：设置图像与周边内容的对齐方式，值为left、right、top、middle、bottom。alt：设置当鼠标光标移到图像上时显示的提示信息。border：设置图像的边框线宽度，单位是px。vspace：设置图像与周边内容的垂直间距，单位是px。hspace：设置图像与周边内容的水平间距，单位是px。13、表格标签（1）表格的结构：（2）表行：tr/tr（3）单元格：td/td*一个表由table开始，/table结束，表的内容由tr和td定义和组成的。tr指明了表的一个行，表有多少行就有多少个tr；表有多少个“格子”就有多少个td。tabletrtd/td/tr/tabletable标签属性：1、border：表格边框线粗细，值为数字，单位是像素。2、bordercolor：表格边框线颜色，值为颜色代码。3、bordercolorlight：表格亮边框颜色，值为颜色代码。4、bordercolordark：表格暗边框颜色，值为颜色代码。5、width：表格宽度，值为数字或百分比数字，单位是像素或百分比。6、height：表格高度，值为数字或百分比数字，单位是像素或百分比。7、align：表格放置的位置，值为Left、Center、Right。8、bgcolor：表格背景颜色，值为颜色代码。9、background：表格背景图像，值为图像存放的路径。10、cellspacing：单元格与单元格之间的空白，值为数字。11、cellpadding：单元格中的内容与单元格边框之间的空白，值为数字。tr标签属性：1、height：表行高度，值为数字或百分比数字，单位是像素或百分比。2、bgcolor：表行背景颜色，值为颜色代码。3、align：表行中内容放置的水平位置，值为(Left、Center、Right)。4、valign：表行中内容放置的垂直位置，值为(Top、Middle、Bottom)。5、bordercolor：表行边框线颜色，值为颜色代码。6、bordercolorlight：表行亮边框颜色，值为颜色代码。7、bordercolordark：表行暗边框颜色，值为颜色代码。TD标签的属性1、bordercolor：单元格边框线颜色，值为颜色代码。2、bgcolor：单元格背景颜色，值为颜色代码。3、background：单元格背景图像，值为图像存放的路径。4、width：单元格宽度，值为数字或百分比数字，单位是像素或百分比。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、超链接标签格式：a…/a属性：href：指定链接文件的地址。target：指明打开此链接的方式，其值可为_blank(新窗口中打开此链接)_parent(在框架页面的父窗口中打开此链接)_self(在本窗口中打开此链接)_top(在框架页面的顶窗口中打开此链接)。title：标明当鼠标光标移到超链接上时显示的提示信息。