网页制作 第二章 Html初识与深入1.ppt

《网页制作 第二章 Html初识与深入1.ppt》由会员分享，可在线阅读，更多相关《网页制作 第二章 Html初识与深入1.ppt（20页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、 HTMLHTML语言语言语言语言概述概述概述概述 HTML HTML 的基本工作原理的基本工作原理的基本工作原理的基本工作原理HTMLHTML的基本语法的基本语法的基本语法的基本语法第二章第二章HTML初识与深入初识与深入1 HTML基本标记基本标记 文件头标签，即文件头标签，即标签标签 超级链接标记超级链接标记 表格表格标记标记 表单表单标记标记Company LogoHTML语言语言概述概述 vHTML 不是程序设计语言不是程序设计语言，而是一种结构语言。，而是一种结构语言。vHTML 与平台无关，只要是相同的浏览器。与平台无关，只要是相同的浏览器。vHTML有许多元素，元素标置即形成了

2、所谓的有许多元素，元素标置即形成了所谓的HTML文档。文档。vHTML 也是文本文件，所以可以用也是文本文件，所以可以用纯文本编辑器纯文本编辑器来编辑（如来编辑（如Windows 的记事本、写字板的记事本、写字板)。v其后缀名必须是其后缀名必须是.html 或或.htm 。v只有通过只有通过浏览器浏览器才可以对才可以对HTML文档进行相应的解释。文档进行相应的解释。v超文本标记语言超文本标记语言HTML（HyperTextMarkupLanguage）是是SGML（StandardGeneralizedMarkupLanguage）语言语言的一个应用，是的一个应用，是WWW“世界世界”的通用的

3、通用“语言语言”。WWW“世界世界”诸服务器与浏览器之间通过它互相沟通，诸服务器与浏览器之间通过它互相沟通，WWW“世世界界”中的信息可以通过它来中的信息可以通过它来“表现表现”。Company Logo HTML(Hypertext Markup Language)是一种规范，一是一种规范，一种标准，它通过标记符来标记要显示的网页的各个部分。种标准，它通过标记符来标记要显示的网页的各个部分。通过在网页中添加标记符，可以告诉浏览器如何显示网通过在网页中添加标记符，可以告诉浏览器如何显示网页，即确定内容的格式。浏览器按顺序读取页，即确定内容的格式。浏览器按顺序读取HTML文件，文件，然后根据内容

4、周围的然后根据内容周围的HTML标记符解释和显示各种内容。标记符解释和显示各种内容。HTML HTML 的基本工作原理的基本工作原理Company Logo网页文档编网页文档编辑窗口辑窗口Company Logo元素：元素：是是HTML语言的基本部分。元素语言的基本部分。元素一般成对出现一般成对出现，每一对元素一般都有一个开始的标记（如每一对元素一般都有一个开始的标记（如），也），也有一个结束的标记（如有一个结束的标记（如）。元素的标记要用一）。元素的标记要用一对尖括号括起来，并且结束的标记总是在开始的标记前对尖括号括起来，并且结束的标记总是在开始的标记前加一个斜杠。加一个斜杠。注注注注:也有

5、一些标记只要求单一标记符号也有一些标记只要求单一标记符号，例如换行标记，例如换行标记就是这样。就是这样。.HTML文件结构文件结构HTML文件结构文件结构(DocumentStructures)Company Logo 网页的标题网页的标题 网页的内容，很多标记都作用于此。网页的内容，很多标记都作用于此。元素定义元素定义HTML文档的标题。文档的标题。与与之间的内容将显示在浏览之间的内容将显示在浏览器窗口的标题栏。器窗口的标题栏。HTML标记不区分大小写，但通常约定使用大写标记不区分大小写，但通常约定使用大写字母来表示，以利于字母来表示，以利于HTML文档的维护。文档的维护。整份文件处于标记整

6、份文件处于标记与与之间。之间。用以声明用以声明这是这是 HTML 文件，文件，让浏览器认出并正让浏览器认出并正确处理此确处理此 HTML 文文件。件。元素出现在文档元素出现在文档的开头部分。的开头部分。与与之间的内容不之间的内容不会在浏览器的文档窗口会在浏览器的文档窗口显示，但是其间的元素显示，但是其间的元素有特殊重要的意义。有特殊重要的意义。元素下面可以插入很多很有用的元元素下面可以插入很多很有用的元素属性素属性:是是HTML文文档的主体部分。在档的主体部分。在与与之之间，通常都会有很间，通常都会有很多其它元素；这些多其它元素；这些元素和元素属性构元素和元素属性构成成HTML文档的主文档的主

7、体部分。体部分。Company Logo.HTML 文件结构文件结构一个基本的一个基本的HTML文档通常包含以下三对顶级标记：文档通常包含以下三对顶级标记：标记属性标记属性标记属性标记属性 HTML语言的的标记具有一定的属性。如：语言的的标记具有一定的属性。如：内容注释内容注释内容注释内容注释 基本格式：基本格式：这两个标记之间的文字被浏览器解释为注释，而不这两个标记之间的文字被浏览器解释为注释，而不在浏览器窗口中显示。在浏览器窗口中显示。HTMLHTML的基本语法的基本语法 HTML 的主要语法是标记、标记属性和内容注释。的主要语法是标记、标记属性和内容注释。标记标记标记标记 用于描述功能的

8、符号。用于描述功能的符号。Company Logov 标记标记表明表明HTML文档的主体部分。在文档的主体部分。在与与之间，通常都会有很多其它标记；这些之间，通常都会有很多其它标记；这些标记标记和和标记标记的的属性构成属性构成HTML文档的主体部分。文档的主体部分。(1)bgcolorbgcolor属性：标志属性：标志HTML文档的背景颜色。文档的背景颜色。如：如：bgcolor=#CCFFCC。HTML使用使用16进制的进制的RGB颜色值对颜色进行控制。颜色值对颜色进行控制。16 进制的数码有进制的数码有:0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.标记的属性标记的属性颜

9、色颜色颜色名和颜色名和RGB值值黑色黑色Black=”#000000”银色银色Silver=”#c0c0c0”红色红色Red=”#ff0000”蓝色蓝色Blue=”#0000ff”白色白色White=”#ffffff”黄色黄色Yellow=”ffff00”绿色绿色Green=”#00ff00”海蓝色海蓝色Aqua=”#00ffff”(2)backgroundbackground属性：标志属性：标志HTML文档的背景图片。文档的背景图片。如：如：background=“images/bg.gif。可以使用的图片格式为可以使用的图片格式为GIF，JPG等等Company Logo(4)Text t

10、ext属性：标志属性：标志HTML文档的正文文字颜色。文档的正文文字颜色。如：如：text=“#FF6666”。Text元素定义的颜色将应用于整篇文档。元素定义的颜色将应用于整篇文档。(5)超级链接颜色超级链接颜色 link、alink、vlink分别控制普通超级链接、当前活动分别控制普通超级链接、当前活动超级链接颜色、访问过的超级链接。超级链接颜色、访问过的超级链接。(6)leftmargin和和topmargin设置网页主体内容距离网页顶端和左端的距离。如：设置网页主体内容距离网页顶端和左端的距离。如：leftmargin=20 topmargin=30“(3)bgproperties=f

11、ixed bgproperties=fixed使背景图片成水印效果，即图片使背景图片成水印效果，即图片不随着滚动条的滚动而滚动。不随着滚动条的滚动而滚动。Company Logo2.换行标记换行标记BR 标记强行规定了当前行的中断，使后续内容在下标记强行规定了当前行的中断，使后续内容在下一行显示。一行显示。设置文本格式设置文本格式 1.分段标记分段标记P 分段标记定义了一个段落。分段标记定义了一个段落。若同时使用若同时使用和和，则将段落包围起来，表示一个，则将段落包围起来，表示一个分段的块；若省略结束标记分段的块；若省略结束标记，可以将开始标记，可以将开始标记放放在段尾。分段标记的常用属性是在

12、段尾。分段标记的常用属性是ALIGN，用于设置段落的，用于设置段落的水平对齐方式。水平对齐方式。1排版：分段与换行排版：分段与换行段落是文档的基本信段落是文档的基本信息单位。将文档划分为段落，可以通过使用分段标息单位。将文档划分为段落，可以通过使用分段标记、换行标记、标题标记或插入水平线来实现。记、换行标记、标题标记或插入水平线来实现。文字文字Company Logo3.预设格式标记预设格式标记 作用：令文件按照原始码的排列方式显示作用：令文件按照原始码的排列方式显示。4.标题标记标题标记Hn 标题标记用于设置文档中的标题和副标题，其中标题标记用于设置文档中的标题和副标题，其中n的取的取值是值

13、是1到到6；.标记表示字体最大的标题，标记表示字体最大的标题，标记表示字体最小的标题。标记表示字体最小的标题。标题标题5.区隔标记区隔标记作用：设定字、画、表格等的摆放位置。若要将文档中作用：设定字、画、表格等的摆放位置。若要将文档中的多个段落设置成相同的对齐方式，可将这些段落置于的多个段落设置成相同的对齐方式，可将这些段落置于和和标记之间组成一个节。标记之间组成一个节。Company Logo6.水平线标记水平线标记HR HR标记在文档中添加一条水平线，用来分开文档的标记在文档中添加一条水平线，用来分开文档的两个部分。该标记有以下属性：两个部分。该标记有以下属性：(1)ALIGN：指定线的对

14、齐方式，取值为指定线的对齐方式，取值为left（左对齐）、（左对齐）、center（居中对齐）或（居中对齐）或right（右对齐），默认值为（右对齐），默认值为center。(2)COLOR：指定线的颜色。指定线的颜色。(3)NOSHADE：若指定该项，则显示一条无阴影的实若指定该项，则显示一条无阴影的实线。线。(4)SIZE：指定线的粗细，以像素为单位。指定线的粗细，以像素为单位。(5)WIDTH：指定线的长度，单位可以是像素或百分指定线的长度，单位可以是像素或百分比（占页面宽度的百分比）。比（占页面宽度的百分比）。Company Logo2设置对齐方式设置对齐方式HTML语言中，可以用语言

15、中，可以用ALIGN属性来设置对齐方式。属性来设置对齐方式。ALIGN属性可以应用于多种标记，如属性可以应用于多种标记，如.、.、等。等。ALIGN属性的取值可以是：属性的取值可以是：left 左对齐左对齐 center 居中对齐居中对齐 right 右对齐右对齐 justify 两边对齐两边对齐 对于不同的标记，对于不同的标记，ALIGN属性的默认值是有所不属性的默认值是有所不同同。对于分段标记、各个标题标记，其默认值为对于分段标记、各个标题标记，其默认值为left；对于水平线标记对于水平线标记，其默认值为，其默认值为center。Company Logo 受影响的文字受影响的文字 FACE

16、属性指定一种字体，属性指定一种字体，或者给出一个字体列表，各种或者给出一个字体列表，各种字体名称用逗号来分隔，可以按照作者的喜好程度来排列。字体名称用逗号来分隔，可以按照作者的喜好程度来排列。3设置字体、字号和颜色设置字体、字号和颜色 在在HTML语言中，可以使用字体标记语言中，可以使用字体标记.来设来设置文本的字符格式，为此可以将文本置于置文本的字符格式，为此可以将文本置于和和标标记之间，并通过记之间，并通过FACE、SIZE和和COLOR属性进行相关设置，如下属性进行相关设置，如下 SIZE属性指定字体的大小（即字号），属性指定字体的大小（即字号），其取值可以从其取值可以从1到到7，默认值

17、为，默认值为3。SIZE属性值越大，显示的字号就越大。相对于基属性值越大，显示的字号就越大。相对于基本字体（本字体（BASEFONT）的大小，也可使用或号来指定相对字号，）的大小，也可使用或号来指定相对字号，此外，还可以自行输入字体大小。此外，还可以自行输入字体大小。COLOR属性指定文本的颜色，属性指定文本的颜色，可以用颜色名称表示，也可可以用颜色名称表示，也可以用十六进制以用十六进制RGB格式表示。格式表示。超文本标记语言超文本标记语言超文本标记语言超文本标记语言ASP动态网页设计动态网页设计超文本标记语言超文本标记语言ASP动态网页设计动态网页设计Company Logo 通过设置字符样

18、式可以为某些字符设置特殊格式，例通过设置字符样式可以为某些字符设置特殊格式，例如粗体、斜体、下划线、删除线、上标、下标等。常用的设如粗体、斜体、下划线、删除线、上标、下标等。常用的设置字符样式的标记如下：置字符样式的标记如下：4设置字符样式设置字符样式.加粗加粗.斜体斜体.带下划线带下划线.标准打印机字体标准打印机字体.带删除线带删除线.上标上标.下标下标.大字体文本大字体文本.小字体文本小字体文本Company Logowidth和和height 这两个属性定义了字符滚动区域的宽度和这两个属性定义了字符滚动区域的宽度和高度。可以用像素数和百分比来表示。高度。可以用像素数和百分比来表示。ali

19、gn 指定了滚动字符如何于周围对象对齐。指定了滚动字符如何于周围对象对齐。behavior 定义了字符如何滚动。定义了字符如何滚动。bgcolor 定义了滚动字符区域的背景。定义了滚动字符区域的背景。direction 定义了字符滚动的方向。定义了字符滚动的方向。hspace和和vspace 定义了滚动字符四周水平和垂直方向上定义了滚动字符四周水平和垂直方向上的间隙。的间隙。loop 指定滚动重复次数指定滚动重复次数。scrollamount 指定文本滚动步长的像素数。指定文本滚动步长的像素数。scrolldelay 指定两次滚动间的毫秒延时数。指定两次滚动间的毫秒延时数。指走动或卷动的指走动

20、或卷动的 文字，其参数设定较多。文字，其参数设定较多。5MARQUEE跑马灯跑马灯 其他标记其他标记 Company Logo 设置设置图像图像格式格式 v图片标记图片标记 使用图片标记可以将一幅图片插入到网页中。使用图片标记可以将一幅图片插入到网页中。图片标记的格式为：图片标记的格式为：返回返回插入插入HTML文件头标签文件头标签刷新刷新l刷新操作刷新操作v文件头标签文件头标签，即，即标签标签 插入插入HTML文件头标签文件头标签 http-equiv属性属性http-equiv属性可以向浏览器传回一些有用的信息，以帮属性可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容语法格式

21、为：助正确和精确地显示网页内容语法格式为：metahttp-equiv=“参数参数”content=“参数变量值参数变量值”“参数参数”有有expires，pragma，refresh，set-cookie，content-type等等Company Logol显示滤镜的应用显示滤镜的应用可以利用混合可以利用混合(blend)和显示和显示(reveal)两种滤镜在页面上两种滤镜在页面上添加动人的淡入淡出、网页转换效果，前者可以使页面中的添加动人的淡入淡出、网页转换效果，前者可以使页面中的对象逐渐消失或显示，后者提供了对象逐渐消失或显示，后者提供了24种网页转换的效果。种网页转换的效果。或或bl

22、endtrans(duration=20)将产生将产生页面切换时的页面切换时的渐隐渐隐效果效果page-enterpage-exitsite-entersite-exitrevealtrans(duration=5，transition=23)将产生将产生页面切换页面切换时的动画效果时的动画效果返回返回Company Logo矩形从大至小矩形从大至小0矩形从小至大矩形从小至大1圆形从大至小圆形从大至小2圆形从大至小圆形从大至小3向上推开向上推开4向下推开向下推开5向右推开向右推开6向左推开向左推开7垂直形百叶窗垂直形百叶窗8水平形百叶窗水平形百叶窗9随机溶解水平棋盘随机溶解水平棋盘10垂直棋盘

23、垂直棋盘11随机溶解随机溶解12垂直向内裂开垂直向内裂开13垂直向外裂开垂直向外裂开14水平向内裂开水平向内裂开15水平向外裂开水平向外裂开16向左下剥开向左下剥开17向左上剥开向左上剥开18向右下剥开向右下剥开19向右上剥开向右上剥开20随机水平细纹随机水平细纹21随机垂直细纹随机垂直细纹22随机选取一种特效随机选取一种特效23ltransition转换类型对应代号：转换类型对应代号：l其主要语法格式如下：其主要语法格式如下：blendTrans(duration=时间数值时间数值)revealTrans(duration=时间数值，时间数值，transition=过渡类型）过渡类型）l其参数意义如下其参数意义如下：duration表示滤镜执行需要的时间，单位为秒；表示滤镜执行需要的时间，单位为秒；transition表示对象转换的方式，过渡类型的数值为表示对象转换的方式，过渡类型的数值为023中的一个数值，其具体意义如下。中的一个数值，其具体意义如下。Company Logo