html简介.ppt

HTML Hypertext Marked Language超文本标记语言超文本标记语言 一、一、HTML的基本结构的基本结构 头 部 信 息文 档 主 体，正 文 部 分例1.1超文本中的标签超文本中的标签 n n单标签单标签 最常用的单标签是最常用的单标签是,它表示换行。它表示换行。n n双标签双标签 内内 容容/n n标签属性标签属性 3 SIZESIZE属性定义线的粗细，属性值取整数，缺为属性定义线的粗细，属性值取整数，缺为1 1；ALIGNALIGN属性表属性表示对齐方式，可取示对齐方式，可取LEFTLEFT（左对齐，（左对齐，缺省值），缺省值），CENTERCENTER（居中），（居中），RIGHTRIGHT（右对齐）；（右对齐）；WIDTH WIDTH 属性定义线的长度，可取相对值，属性定义线的长度，可取相对值，（由一对（由一对 “”“”号括起来的百分数，表示相对于充满整个窗口的百号括起来的百分数，表示相对于充满整个窗口的百分比）分比）例例1.21.2二、二、页面布局与文字设计页面布局与文字设计 2.1 标题标题 n nH1第一级标题n nH2第二级标题n nH3第三级标题n nH4第四级标题n nH5第五级标题n nH6第六级标题例2.12.2换行换行 在编写HTML文件时，我们不必考虑太细的设置，也不必理会段落过长的部分会被浏览器切掉。因为，在HTML语言规范里，每当浏览器窗口被缩小时，浏览器会自动将右边的文字转折至下一行。所以，编写者对于自己需要断行的地方，应加上标签 例 2.2.1 例 2.2.22.3 段落标签段落标签 为了排列的整齐、清晰，文字段落之间，我们常用来做标记。文件段落的开始由来标记，段落的结束由来标记，是可以省略的，因为下一个的开始就意味着上一个的结束。标签还有一个属性ALING，它用来指名字符显示时的对齐方式，一般值有CENTER、LEFT、RIGHT三种。例2.3.1 例2.3.22.4 水平线段 这个标签可以在屏幕上显示一条水平线，用以分这个标签可以在屏幕上显示一条水平线，用以分割页面中的不同部分。割页面中的不同部分。属性：属性：sizesize水平线的宽度水平线的宽度width width 水平线的长，用占屏幕宽度的百分比水平线的长，用占屏幕宽度的百分比 或象素值来表示或象素值来表示align align 水平线的对齐方式，有水平线的对齐方式，有LEFT RIGHT LEFT RIGHT CENTERCENTER三种三种noshadenoshade 线段无阴影属性，为实心线段线段无阴影属性，为实心线段例例 2.4.12.4.1 2.4.2 2.4.2 2.4.32.4.3 2.4.42.4.42.5 文字的大小设置、字体与样式、颜色、颜色 提供设置字号大小的是提供设置字号大小的是FONTFONT，FONTFONT有一个属性有一个属性SIZESIZE，通过指定，通过指定SIZESIZE属性就能设置字号大小，而属性就能设置字号大小，而SIZESIZE属性的有效值范围为属性的有效值范围为1 17 7，其中缺省值为，其中缺省值为3 3。我们可以我们可以SIZESIZE属性值之前加上属性值之前加上“”、“”字字符，来指定相对于字号初始值的增量或减量。符，来指定相对于字号初始值的增量或减量。HTML4.0 HTML4.0提供了定义字体的功能，用提供了定义字体的功能，用FACEFACE属性属性 字体效果字体效果 文字颜色设置格式如下：文字颜色设置格式如下：font color=颜色值颜色值例例 2.52.52.6 位置控制位置控制 通过ALIGN属性可以选择文字或图片的对齐方式，LEFT表示向左对齐，RIGHT表示向右对齐，CENTER表示居中。基本语法如下：#leftleftrightrightcentercenter 例例 2.62.6三、三、列表列表 3.1 无序号列表无序号列表 无序号列表使用的一对标签是无序号列表使用的一对标签是 ，每一个，每一个列表项前使用列表项前使用。其结构如下所示：。其结构如下所示：第一项第一项第二项第二项第三项第三项 例例 3.13.13.2 序号列表序号列表和无序号列表的使用方法基本相同，它序号列表和无序号列表的使用方法基本相同，它使用标签使用标签，每一个列表项前使用，每一个列表项前使用。每个项目都有前后顺序之分，多数用数字。每个项目都有前后顺序之分，多数用数字表示。其结构如下所示：表示。其结构如下所示：第一项第一项第二项第二项第三项第三项 例例 3.23.23.3 定义性列表定义性列表可以用来给每一个列表项再加上一段定义性列表可以用来给每一个列表项再加上一段说明性文字，说明独立于列表项另起一行显示。说明性文字，说明独立于列表项另起一行显示。在应用中，列表项使用标签在应用中，列表项使用标签标明，说明性标明，说明性文字使用文字使用表示。在定义性列表中，还有一表示。在定义性列表中，还有一个属性是个属性是COMPACT,COMPACT,使用这个属性后，说明文字使用这个属性后，说明文字和列表项将显示在同一行。其结构如下所示：和列表项将显示在同一行。其结构如下所示：第一项第一项 叙述第一项的定义叙述第一项的定义第二项第二项 叙述第二项的定义叙述第二项的定义第三项第三项 叙述第三项的定义叙述第三项的定义 例例 3.33.3四四、TABLE表格表格 4.1表格的基本结构表格的基本结构 .定义表格定义表格.定义标题定义标题 定义表行定义表行 定义表头定义表头 定义表元定义表元(表格的具体数据表格的具体数据)例 4.14.2 表格的标题表格标题的位置，可由ALIGN属性来设置，其位置分别由表格上方和表格下方。下面为表格标题位置的设置格式。设置标题位于表格上方：.设置标题位于表格下方：.例 4.24.3 表格尺寸设置表格尺寸设置 n n表格的大小表格的大小表格的大小表格的大小一般情况下，表格的总长度和总宽度是根据各行和各列的总和自动调整的，一般情况下，表格的总长度和总宽度是根据各行和各列的总和自动调整的，如果我们要直接固定表格的大小，可以使用下列方式如果我们要直接固定表格的大小，可以使用下列方式 widthwidth和和heightheight属性分别指定表格一个固定的宽度和长度，属性分别指定表格一个固定的宽度和长度，n1n1和和n2n2可以用像素来可以用像素来表示，也可以用百分比（与整个屏幕相比的大小比例）来表示。表示，也可以用百分比（与整个屏幕相比的大小比例）来表示。n n边框尺寸设置边框尺寸设置边框尺寸设置边框尺寸设置边框是用边框是用borderborder属性来体现的，它表示表格的边框边厚度和框线。将属性来体现的，它表示表格的边框边厚度和框线。将borderborder设成不同的值，有不同的效果。设成不同的值，有不同的效果。n n格间线宽度格间线宽度格间线宽度格间线宽度格与格之间的线为格间线，它的宽度可以使用格与格之间的线为格间线，它的宽度可以使用中的中的CELLSPACINGCELLSPACING属属性加以调节。格式是：性加以调节。格式是：TABLECELLSPACING=#表示要取用的像素值表示要取用的像素值n n内容与格线之间的宽度内容与格线之间的宽度内容与格线之间的宽度内容与格线之间的宽度我们还可以在我们还可以在中设置中设置CELLPADDINGCELLPADDING属性，用来规定内容与格线属性，用来规定内容与格线之间的宽度。格式为：之间的宽度。格式为：TABLECELLPADDING=#表示要取用的像素值表示要取用的像素值 例例 4.34.34.4 表格内文字的对齐表格内文字的对齐/布局布局 表格中数据的排列方式有两种，分别是左右排列和上下排表格中数据的排列方式有两种，分别是左右排列和上下排列。左右排列是以列。左右排列是以ALIGNALIGN属性来设置，而上下排列则由属性来设置，而上下排列则由VALIGNVALIGN属性来设置。其中左右排列的位置可分为三种：属性来设置。其中左右排列的位置可分为三种：居左（居左（left)left)、居右、居右(right)(right)和居中和居中(center)(center)；而上下排列基本上；而上下排列基本上比较常用的有四种：上齐比较常用的有四种：上齐(top)(top)、居中、居中(middle)(middle)、下齐、下齐(bottom)(bottom)和基线和基线(baseline)(baseline)。align=#align=#=left,center,right#=left,center,right =#=#=top#=top，middlemiddle，bottombottom，baseline baseline td=#例例 4.4 4.4 4.5 4.5 跨多行、多列的表元跨多行、多列的表元 要创建跨多行、多列的表元，只需在要创建跨多行、多列的表元，只需在或或中加入中加入ROWSPANROWSPAN或或COLSPANCOLSPAN属性，这两个属性的值，表明了表属性，这两个属性的值，表明了表元中要跨越的行或列的个数。元中要跨越的行或列的个数。跨多列的表元跨多列的表元 =#td=#colspancolspan表示跨越的列数，例如表示跨越的列数，例如colspancolspan=2=2表示这一格的表示这一格的宽度为两个列的宽度。宽度为两个列的宽度。跨多行的表元跨多行的表元 =#td=#rowspanrowspan所要表示的意义是指跨越的行数，例如所要表示的意义是指跨越的行数，例如rowspanrowspan=2=2就表示这一格跨越表格两个行的高度就表示这一格跨越表格两个行的高度。例例 4.54.54.6 表格的颜色在表格中，既可以对整个表格填入底色，也可以对任何一在表格中，既可以对整个表格填入底色，也可以对任何一行、一个表元使用背景色。行、一个表元使用背景色。表格的背景色彩表格的背景色彩table =#行的背景色彩行的背景色彩 =#表元的背景色彩表元的背景色彩=#或或 td =#=#=rrggbbrrggbb 16 16进制进制 RGBRGB数码数码,或者是下列预定义色彩名称：或者是下列预定义色彩名称：Black,Olive,Teal,Red,Blue,Maroon,Navy,Gray,Lime,Black,Olive,Teal,Red,Blue,Maroon,Navy,Gray,Lime,Fuchsia,White,Green,Purple,Silver,Yellow,Aqua Fuchsia,White,Green,Purple,Silver,Yellow,Aqua 例例 4.64.6五、五、文件之间的链接超文本中的链接是其最重要的特性之一，使用者可以从一个页面超文本中的链接是其最重要的特性之一，使用者可以从一个页面直接跳转到其他的页面、图象或者服务器。一个链接的基本格式直接跳转到其他的页面、图象或者服务器。一个链接的基本格式如下：如下：A HREF=链接文字链接文字链接文字链接文字标签标签表示一个链接的开始，表示一个链接的开始，表示链接的结束；表示链接的结束；属性属性“HREF”HREF”定义了这个链接所指的地方；定义了这个链接所指的地方；通过点击通过点击“链接文字链接文字”可以到达指定的文件。可以到达指定的文件。5.1 5.1 本地链接本地链接本地链接本地链接 以绝对路径表示：以绝对路径表示：A HREF=/c:studyHTMLlink01.htm文件的链接文件的链接文件的链接文件的链接以相对路径表示：以相对路径表示：文件的链接文件的链接文件的链接文件的链接链接上一目录中的文件：链接上一目录中的文件：A HREF=././Internet/IPIPIP地址地址地址地址 5.2 URL链接如果链接的文件在其它服务器上，我们就要弄清我们如果链接的文件在其它服务器上，我们就要弄清我们所指向的文件时采用的哪一种所指向的文件时采用的哪一种URLURL地址。地址。URLURL意思是统意思是统一资源定位器，通过它可以以多种通讯协议于外界沟通一资源定位器，通过它可以以多种通讯协议于外界沟通来存取信息。来存取信息。URLURL链接的形式是：链接的形式是：协议名：协议名：/主机主机.域名路径文件名域名路径文件名其中协议包括：其中协议包括：filefile本地系统文件本地系统文件httphttpWWWWWW服务器服务器ftpftp ftpftp服务器服务器telnettelnet基于基于TELNETTELNET的协议的协议mailtomailto电子邮件电子邮件newsnewsUsenetUsenet新闻组新闻组gophergopherGOPHERGOPHER服务器服务器waiswaisWAISWAIS服务器服务器5.3 目录链接目录链接制作目录链接方法是：首先把把某段落设置为链接位置，格式是：A NAME=链接位置名称在调用此链接部分的文件，定义连接：链接文字如果是在一个文件内跳转，文件名可以省略不写。六、六、多媒体效果多媒体效果 插入图形插入图形插入图形插入图形基本格式超文本支持的图象格式一般有基本格式超文本支持的图象格式一般有基本格式超文本支持的图象格式一般有基本格式超文本支持的图象格式一般有X X Bitmap(XBMBitmap(XBM)、GIFGIF、JPEGJPEG三种，所以我们对图片处理后要保存为这三种格式中的任何一种，这三种，所以我们对图片处理后要保存为这三种格式中的任何一种，这三种，所以我们对图片处理后要保存为这三种格式中的任何一种，这三种，所以我们对图片处理后要保存为这三种格式中的任何一种，这样才可以在浏览器中看到。样才可以在浏览器中看到。样才可以在浏览器中看到。样才可以在浏览器中看到。插入图象的标签是插入图象的标签是插入图象的标签是插入图象的标签是，其格式为：，其格式为：，其格式为：，其格式为：IMG SRC=“”例例例例6.1 6.1 播放音乐播放音乐播放音乐播放音乐HTMLHTML除了可以插入图形之外，还可以播放音乐和视频等。用浏览除了可以插入图形之外，还可以播放音乐和视频等。用浏览除了可以插入图形之外，还可以播放音乐和视频等。用浏览除了可以插入图形之外，还可以播放音乐和视频等。用浏览器可以播放的音乐格式有：器可以播放的音乐格式有：器可以播放的音乐格式有：器可以播放的音乐格式有：MIDIMIDI音乐、音乐、音乐、音乐、WAVWAV音乐、音乐、音乐、音乐、AUAU格式。另外在格式。另外在格式。另外在格式。另外在利用网络下载的各种音乐格式中，利用网络下载的各种音乐格式中，利用网络下载的各种音乐格式中，利用网络下载的各种音乐格式中，MP3MP3是压缩率最高，音质最好的文是压缩率最高，音质最好的文是压缩率最高，音质最好的文是压缩率最高，音质最好的文件格式。件格式。件格式。件格式。A”乐曲名乐曲名乐曲名乐曲名 例例例例 6.26.2 例例例例 6.36.3 例例例例6.46.4播放视频播放视频播放视频播放视频用浏览器可以播放的格式有：用浏览器可以播放的格式有：用浏览器可以播放的格式有：用浏览器可以播放的格式有：MOVMOV格式、格式、格式、格式、AVIAVI格式。格式。格式。格式。例例例例 6.56.5七、表单七、表单 基本语法基本语法基本语法基本语法表单的基本语法表单的基本语法表单的基本语法表单的基本语法 form action=method=*.*=GET,POST *=GET,POST 表单中提供给用户的输入形式表单中提供给用户的输入形式表单中提供给用户的输入形式表单中提供给用户的输入形式 *=text,password,checkbox,radio,image,hidden,submit,reset *=text,password,checkbox,radio,image,hidden,submit,reset *=Symbolic Name for CGI script *=Symbolic Name for CGI script 文字输入和密码输入文字输入和密码输入文字输入和密码输入文字输入和密码输入 *=text,password=text,password 复选框复选框复选框复选框(Checkbox)(Checkbox)和和和和 单选框单选框单选框单选框(RadioButtonRadioButton)隐藏表单的元素隐藏表单的元素隐藏表单的元素隐藏表单的元素 列表框列表框列表框列表框(Selectable Menu)(Selectable Menu)基本语法基本语法基本语法基本语法 .文本区域文本区域文本区域文本区域 .例例例例 7.17.1八、八、多视窗口多视窗口FRAMES n nFrames结构的基本格式结构的基本格式 .n n各窗口的尺寸设置各窗口的尺寸设置 n n各窗口间相互操作各窗口间相互操作(Frame Target)例 8.1 8.2 8.3