第2章ASP网页框架语言——HTML课件.ppt

《第2章ASP网页框架语言——HTML课件.ppt》由会员分享，可在线阅读，更多相关《第2章ASP网页框架语言——HTML课件.ppt（39页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、教材 第02章 ASP网页框架语言HTML HTML(超文本标记语言)是制作ASP网页的基础。HTML标记是HTML的核心与基础，用于修饰、设置HTML文件的内容及格式。一个HTML文件中包含了所有将显示在网页上的文字信息。其中也包括对浏览器的一些指示，如文字应放置在何处，显示模式如何等。如果还有一些图片、动画、声音或是任何其他形式的资源，HTML文件也会告诉浏览器到哪里去查找它们，以及它们将放置在网页中的什么位置 。2.1 网页的基础知识网页的基础知识2.2 HTML文档的基本结构文档的基本结构2.3 编辑编辑HTML网页正文网页正文2.4 建立超链接建立超链接2.5 在在HTML网页中插入

2、图片网页中插入图片2.6 在在HTML网页中使用列表网页中使用列表2.7 在在HTML网页中使用表格网页中使用表格2.8 在在HTML网页中使用表单网页中使用表单2.9 在在HTML网页中使用框架网页中使用框架2.10 动态动态HTML（DHTML）简介）简介2.1 网页的基础知识网页的基础知识主题2.1.1 万维网的概念（WWW） 简单的说，WWW是漫游Internet网的工具，它把Internet上不同地点的相关信息聚集起来，通过WWW浏览器(比如IE，Internet Explorer)检索，无论用户所需的信息在什么地方，只要浏览器为用户检索到之后，就可以将这些信息(文字、图片、动画、声

3、音等)“提取”到用户的计算机屏幕上。2.1.2 超文本传输协议（HTTP） HTTP(HyperText Transfer Protocol)即超文本传输协议，它是WWW服务器上使用的最主要协议。通过这一跨平台的通信协议，在WWW任何平台上的电脑都可以阅读远方服务器(Server)上的同一文件。 2.1.3 统一资源定位器（URL） URL(Uniform Resource Locator)即统一资源定位器，它使用数字和字母来代表网页文件在网上的地址。URL好比Internet的门牌号码，它可以帮助用户在Internet的信息海洋中查找到所需要的资料。 2.1.4 超文本标记语言（HTML）

4、HTML标记用于修饰、设置HTML文件的内容及格式。用户只须输入文件内容和必要的标记，文件内容在浏览器窗口内就会按照标记定义的格式显示出来。一般情况下，HTML标记使用下列格式：文件内容 标记须要填写在一对尖括号“”内，它们通常是英文单词的首字母或缩写。标记一般情况下是成对出现的。结束标记是在标记的前面添加斜杠“/”。2.2 HTML文档的基本结构文档的基本结构 HTML文件通常由3部分组成：即起始标记、网页标题和文件主体。其中，文件主体是HTML文件的主要部分与核心内容，它包括文件所有的实际内容与绝大多数的标记符号。 在HTML文本中，有一些固定的标记要放在每一个HTML文件里。HTML文件

5、的总体结构如下所示： 网页的标题及属性 文件主体 2.2.1 添加起始标记 标记用于HTML文档的最前面，用于标识HTML文档的开始。而标记恰恰相反，它放在HTML文档的最后面，用来标识HTML文档的结束，两个标记必须一起使用。通过对这一对特殊标记符号的读取，浏览器才可以判断目前正在打开的是网页文件，而不是其他类型的文件。 2.2.2 设置网页标题 标记对构成HTML文档的开头部分，在此标记对之间可以使用、等标记对。这些标记对都是描述HTML文档相关信息的标记对，标记对之间的内容不会在浏览器的窗口内显示出来，两个标记必须一起使用。 2.2.3 输入文件主体 标记对之间的内容是HTML文档的主体

6、部分，在此标记对之间可包含众多的标记和信息，它们所定义的文本、图像等将会在浏览器的窗口内显示出来，两个标记必须一起使用。 2.2.4 HTML文档中的注释 注释标记用来在HTML源文件中插入注释，注释会被浏览器忽略不显示。用户可以使用注释来解释代码，例如。这些注释信息可在以后编辑代码的时候，给用户提供必要的帮助和提示。2.3 编辑编辑HTML网页正文网页正文 2.3.1 输入网页标题 一般文章都有标题、副标题、章和节等结构，HTML中也提供了相应的标题标记，其中n为标题的等级。HTML提供6个等级的标题，n越小，标题字号就越大。例如以下代码： 一级标题 二级标题 这是一行没有设置标题格式的正文

7、文本 五级标题 六级标题 2.3.2 划分正文段落 标记对用来创建一个段落，在此标记对之间加入的文本将按照段落的格式显示在浏览器上。HTML将多个空格以及回车等效为一个空格，HTML的分段完全依赖于分段标记。 2.3.3 设置文本格式 在HTML文件里，一般都有大量的文本和信息。如要主次分明、重点突出的显示这些信息，则需要在格式设定方面使用更多的标记和更详细的设置。1. 设置字体和字号2. 黑体、斜体和下划线3. 强调及加重等效果2.4 建立超链接建立超链接 2.4.1 创建外部链接 一个超链接通常由以下3部分构成：首先是超链接标记，表示这是一个链接；然后是属性Href及其值，这就定义了超链接

8、所指的目标；最后是在超链接中显示在网页上作为链接的文字。 HTML中超链接文本的代码格式如下： 2.4.2 创建内部链接 谓内部链接就是网页中的书签。在内容较多的网页内建立内部链接时，它的链接目标不是其他文档，而是网页内的其他位置。在使用内部链接之前，须要在网页内确定书签的位置，并使用标记的Name属性为书签命名。内部链接的一般格式为： 书签内容 2.4.3 创建邮件链接 邮件链接可使访问者在浏览页面时，只须单击电子邮件链接就能够打开默认的邮件编辑软件，向指定的地址发送邮件。电子邮件链接的应用格式如下： 邮件链接文本 以上格式中“E-mail 地址”是用户在Internet上的电子邮件地址，而

9、“邮件链接文本”就是访问者单击的文本。2.5 在在HTML网页中插入图片网页中插入图片 2.5.1 插入网页图片 HTML采用的图像格式有GIF、JPG和PNG 3种。在网页中插入图像时，须要使用HTML的标记，其使用格式如下： 以上格式中，Src是Source(源)英文的缩写，Picname是希望在网页内显示的图像的URL。 2.5.2 设置图片格式与布局 在默认的情况下，将图像插入到网页文件之后，它与网页中的文本是垂直居下对齐的，并且文本出现在图像的右侧 。 2.5.3 在网页中加入水平线 使用标记可以在网页中插入一条水平线，它的使用方式如下： 2.6 在在HTML网页中使用列表网页中使用

10、列表 2.6.1 使用编号列表当网页中的某些内容存在排序关系时，可以使用编号列表，以表明这些内容是有前后顺序的。编号列表的应用格式如下： 编号列表 2.6.2 使用符号列表 当网页内容出现并列选项时，可采用符号列表。它的标记是(它是Unordered List英文的缩写)，在每一列表项的开始处须要使用标记以示区别。符号列表的使用格式如下： 符号列表 2.6.3 自定义列表 当网页内出现新词汇、术语时，为了给访问者一个明确的提示，须要对它们进行定义和说明，此进用户可以使用自定义列表(Definition List)。自定义列表标记是由一系列的词语标记和定义标记组成，通常标记与标记成对出现在网页文

11、件内，词语的定义内容以首行缩进的方式显示在浏览器窗口。 2.6.4 定义嵌套列表 HTML不仅允许用户使用单独的列表，还能够把不同类型的列表相互嵌套。嵌套的级数不受限制，这样就形成复合列表，它意味着第一个列表的内容还未结束时，另一列表就可以开始。例如，在自定义列表内，使用编号列表说明具有层次感的列表选项，使用符号列表说明具有并列关系的列表选项。2.7 在在HTML网页中使用表格网页中使用表格 2.7.1 认识表格标记 一个表格由标记开始，标记结束，表格的内容由标记和标记定义。标记说明表格的一个行，表格有多少行就有多少个标记；标记则设定一个单元格来填充表格。 2.7.2 设置表格的整体属性 标记

12、对用来创建一个表格 。 2.7.3 设置表格的单行属性 标记对用来创建表格中的一行，表格有多少行就有多少对标记。 2.7.4 设置表格单元格属性1. 普通单元格2. 标题单元格3. 表格总标题2.8 在在HTML网页中使用表单网页中使用表单 2.8.1 认识表单的基本结构 网页内的表单由表单标记定义，使用标记意味着表单的开始，而标记符号则意味着表单的结束。由于表单通常用于收集站点访问者的信息，因此在表单的内部必须出现输入标记，用于收集表单数据。另一方面，还可将表单数据发送给站点管理员，或者清除表单的内容，重新输入表单。表单标记的基本结构如下所示： 2.8.2 设定用户输入区域 表单是一个能够包

13、含多种不同表单元素的区域。表单元素能够让用户在表单中输入信息，有文本框、密码框、下拉菜单、单选框、复选框等。 2.8.3 设定列表框 列表框是用于确定选项内容的另一种方式，它包括下拉列表框和滚动列表框两种，在下拉列表框内，只能选择其中的一个选项；在滚动列表框内，则可以选择其中的多项内容。 2.8.4 设定文本框与文件选项 标记时用来创建一个可以输入多行文本的文本框，此标记对用于标记对之间。标记时具有Name、Cols和Rows属性。Cols和Rows属性分别用来设置文本框的列数和行数，这里列与行是以字符数为单位的。 如果在表单内填写的内容太多，例如个人工作经历等，为了方便访问者填写，可在表单内

14、添加文件选项。 在表单内添加文件选项时，用户可使用标记的Enctype属性，以指定文件的数据类型，使用该属性还需要将标记的Type属性设置为File。2.9 在在HTML网页中使用框架网页中使用框架 2.9.1 认识框架标记 设计框架网页时，标记和标记用于定义框架网页的结构。由于框架网页的出现，从根本上改变了HTML文档的传统结构，因此在出现标记的文档中，将不再使用标记，包含框架网页的HTML文档的基本结构为： 2.9.2 确定框架目标 在框架网页内的单击超链接之后，链接目标就会出现在目标框架内。在确定目标框架之前，应该为它命名，通过框架网页的名称来确定目标框架的位置，框架网页的名称应该注意区

15、分大小写。内容相同、大小写不同的框架网页名称将被认为是不同的框架网页。确定目标框架网页的通用格式如下： 2.9.3 设置框架网页的外观 框架网页外观是由框架网页的边框、间距、颜色、页边距、滚动条等组成的。默认情况下，HTML提供了一系列的默认值，分别对上述选项进行设置。根据应用框架网页的背景、场合的不同，用户可以自定义框架网页的外观。2.10 动态动态HTML（DHTML）简介）简介 使用DHTML技术，可通过浏览器技术、客户端脚本技术和CSS样式表，生成变化缤纷的动态页面。 DHTML是Dynamic HTML(动态HTML)的简称，它是一种即使在脱离网络环境的情况下，网页装载入浏览器以后仍

16、然能够随时变换内容的技术。比如：当鼠标指针移至文章 段落中，段落能变成醒目的红色或蓝色；在网页的页面上，随机性地漂浮着一些漂亮的小标志；网页横幅不断地滑动或具有滚动闪亮的效果等。 DHTML之所以能够制作出“动感”的效果，首先是因为DHTML将网页中的每个元素划分成了许多独立的对象，通过CSS来指定这些对象的属性。 CSS是DHTML网页进行改变的对象，网页中的各种变化都是通过脚本语言设置CSS的属性来实现的。因此可以说CSS是编写DHTML网页的基础。 CSS本身是HTML的扩展，因此语法规则并不复杂，掌握HTML语言使用方法后就不难看懂CSS代码。CSS的功能十分强大，它能够对文字间距、字体、列表、颜色、背景、位置等多种属性进行精确控制。