ASP网站建设技术 教学课件 ppt 作者 王晶 Chapter01

《ASP网站建设技术 教学课件 ppt 作者 王晶 Chapter01》由会员分享，可在线阅读，更多相关《ASP网站建设技术 教学课件 ppt 作者 王晶 Chapter01（140页珍藏版）》请在金锄头文库上搜索。

1、ASP网站建设技术,机械工业出版社,第1章 Web编程基础,本章重点： 1）HTML标记的用法和功能； 2）HTML网页的基本结构； 3）利用HTML标记符编写简单网页。,目 录,1.1 HTML简介 1.2 HTML常用标记 1.3 CSS概述 1.4 加载CSS样式的三种方式 1.5 CSS与标记对应的三种方式,1.1 HTML简介,HTML（HyperTextMark-upLanguage）即超文本标记语言，是一种用来在WWW（World Wide Web）上表示信息的描述性的标记语言。 HTML文本是由HTML标记组成的描述性文本，HTML标记可以说明文字、图形、动画、声音、表格、链接

2、等。,生成一个HTML文本通常可以通过以下四种方法： （1）利用各种文本编辑器（如Windows记事本）直接使用HTML语言编写。 （2）借助一些HTML的编辑工具，如FrontPage 、HotDog等。 （3）其他格式的文档（如WORD文档）转换成HTML文本。 （4）由Web服务器端实时动态地生成。,【例1-1】 创建一个简单的网页，步骤如下： （1）选择“开始”“程序” “附件” “记事本”命令，打开记事本程序。输入以下HTML代码： HTML实例 这是一个简单的HTML实例 ,（2）选择“文件”菜单下的“保存”命令，打开“保存”对话框，在“文件名”框中输入文件名和文件扩展名（1-1.

3、htm），选择合适的目录，然后单击“保存”按钮。 （3）在浏览器中打开运行该文件（1-1.htm），运行结果如图1-1所示。,1.2 HTML常用标记,标记符是HTML语言中一些定义网页内容格式和显示的指令，而标记符的属性用于进一步控制网页内容的显示效果。,1.2.1页面基本属性标记 不管网页的内容多么丰富、版式多么复杂，网页的基本结构却都是一样的。 1网页的基本结构 文档标题 这是HTML文档的主要部分 ,从本例中我们看到： HTML的结构包括头部（HEAD）、主体（BODY）两大部分，其中头部描述浏览器所需的信息，而主体则包含页面的具体内容及格式说明。,2语言字符集(Charsets)的信

4、息 可在 HTML 文件中设置 MIME 字符集信息。您在浏览主页时，最好自己在浏览器的选项菜单内选择相应的语言(language encoding)。但是如果 HTML 文件里写明了设置，浏览器就会自动设置语言选项。尤其是主页里用到了字符实体(entities)，则该主页就应该写明字符集信息。否则，您在浏览该主页时，若未正确设置语言选项，显示将可能混乱。,3背景色彩和文字色彩 设置网页的背景色彩和文字色彩可通过设置BODY标记的属性来实现，具体格式如下： BODY标记各参数的含义见表1-1。,4添加注释 由于Web站点需要经常更新，而且制作时往往是几个人合作，所以创建的页面必须易于维护，而添

5、加注释是增强文件可读性的重要手段。 HTML中的注释是由开始标记符组成的。这两个标记符中间的内容就是注释的内容，它们不会在浏览器中显示。,5画线 在网页中产生分隔线可用标记来实现，其用法为： 属性说明： （1）width用于指定分隔线的宽度，宽度值的指定方式有两种，一是用像素点来指定，例如，若要产生宽度为500像素的直线，则实现代码为： 另一种方法是用百分比表达，例如，若要产生宽度是网页宽度的75分隔线，则实现代码如下： ,（2）size用于指定直线的高度。例如，要绘制宽度为80，高度为1的直线，则实现代码如下： （3）align指定直线的对齐方式，取值有Left、Center、Right。

6、（4）noshade指定直线是否有阴影。带有该参数，则直线无阴影。 标记一般用于产生水平分隔线，若要产生竖直线，可将width设置为1，size设置为竖直线的高度值。例如： ,1.2.2 文字属性标记 文字是网页中最主要的页面元素，HTML语言提供了一些用来修饰文字的标记符，可以用它们来设置文字的字体、颜色、大小和样式等属性。,1字体控制 主要用于控制文字的字体、大小和颜色，通过标记符来实现。其语法格式为： 文本 例如，若要以绿色，宋体号字输出“HTML实例”，则实现代码为： HTML实例,2标题字号 语法格式为： 说明：是16的数字，表示最大的标题，表示最小的标题。在默认状态下，标记符中的文

7、字在浏览器中显示时都是黑体，而且文字将自动在标记符后换行。 【例1-2】 在网页中分别用六级标题标记符输出一个测试效果的文本。 代码如下：, 标题字体演示 这是第一级标题 这是第二级标题 这是第三级标题 这是第四级标题 这是第五级标题 这是第六级标题 ,运行结果如下：,3字体效果 语法格式为： 说明：使用这些标记符可以设置字体的样式，常用的字体样式标记符见表1-3所示,4分段和换行控制 要实现分段或换行，需要通过相应的标记符来实现。 （1）分段标记：对段落的分段使用标记来实现。定义段落的开始，定义段落的结束，通常可以省略不写。单独的一个标记可产生一个空行。 （2）换行和禁止换行：换行用标记来实

8、现，没有对应的结束标记，它指示浏览器在标记处执行一个换行动作。是使当前行强行中断而另起一行，新的行与原来的行保持相同的属性，换句话说，新行与原来的行在同一个段落中，而P标记符则是另起一个新的段落。,5预格式化文本 语法格式为： 文本 说明：浏览器按照编缉文档时和标记符之间字符的位置将内容毫无变动的显示出来。换句话说，在HTML文档中写的时候是什么样，浏览器中显示的就是什么样。,6文本的对齐方式 语法格式为： #=left、right、center 例如：左对齐 右对齐,7文本的分区显示 语法格式为： 文本内容 例如：此段文本左对齐显示 此段文本居中显示 此段文本右对齐显示,1.2.3 超级链接

9、标记 具备超级链接能力是HTML的最大优势，利用超级链接可实现由一个页面切换到另一个页面，由一个网站跳转到另一个网站；或跳转到同一网页的某一个指定位置；或跳转进入指定的电子邮箱。,1定义超链接 语法格式为： 说明：超级链接标记符A主要有以下几个属性： （1）href：定义超级链接所指向的文档的URL。如果指定的文件格式是浏览器支持的格式，例如是网页文件.html格式或者图像文件.jpg格式，那么浏览器将在窗口中显示相应的文件内容。如果指定的文件格式不是浏览器支持的格式，如zip压缩文件格式，那么浏览器将自动弹出文件下载对话框。,（2）target：目标窗口的打开方式，有四个：_top,_bla

10、nk,_parent,_self。 （3）name：锚名称。该属性一般在创建页面内超链接时使用。 页面上的文字和图像都可以添加超链接。在默认状态下，文字被添加了超链接后会变成蓝色，而且文字下方自动添加下划线；如果是图像添加了超链接，则图像会添加蓝色边框。当鼠标移动到添加了超链接的页面元素上方时，鼠标指针会变成小手的形状。,2创建页面间的超链接 语法格式为 说明：在创建页面超链接时，既可以使用相对路径（指向同一网站内的文件），也可以使用绝对路径（指向本站点以外的文件）。 在当前网页创建超链接，链接到“新浪”网站首页。在当前需要设置超级链接的地方，加入以下代码即可，其实现代码为： 新浪链接,另外，

11、也可用图像作为超链接的标志。例如当前网页用于链接到新浪网站的图片logo.gif存放在Images目录中，则用图像作为超链接的实现方法为： 利用超链接还可切换到同一网站的另一个网页，例如在当前网页中有一个名为“关于站长”的菜单项，现要定义一个超链接，以实现当前用户单击时，切换到站长的页面，假设介绍站长的页面文件名为intro.htm，则该超链接的实现方法为： 关于站长,3创建页面内的超链接 语法格式为： 说明：创建页面内超链接分两步：首先定义锚点，如：，然后再创建指向锚点的超链接，。这两部分在网页中没有先后顺序，但应注意锚点名应惟一，不要重复。 若要链接到页面外的锚点处，则链接方法为： 文本,

12、4指向电子信箱的链接 语法格式为： 链接文字 说明：创建指向电子信箱的超链接时，属性Herf中使用的mailto协议。该协议后面直接跟一个具体的电子信箱地址。,1.2.4 图片格式 在网页中插入图像使用标记来实现，没有对应的结束标记。其用法为： 说明： （1）如若在网页的当前位置插入images/flower.jpg图形，边框宽度设置为1，则实现代码为： ,（2）Align属性用于设置图像的对齐与布局方式。图像的对齐方式分为两种情况，一种是水平方向的对齐，另一种是垂直方向的对齐。,1.2.5 列表标记 列表是一种常用的组织信息的方式，HTML也提供了用于实现列表的标记符。HTML语言可以实现以

13、下常用列表：有序列表、无序列表、定义列表。,1有序列表 语法： 说明：有序列表符OL 包含两个属性：TYPE 和START。 使用TYPE属性可以设置列表编号的样式。HTML中有序列表的编号样式有以下几种：,1：表示是十进制数，如1，2，3等，该样式是默认样式； a：表示是小写字母，如a,b,c等； A：表示是大写字母，如A,B,C 等； i: 表示是小写罗马数字，如，等； I：表示是大写罗马字母，如，等。 使用START属性可设置列表的起始编号，它定义有序列表的起始数字，通常不必设置。 有序列表中的列表项标记符LI也有两个属性：TYPE和VALUE。TYPE意义与OL标记符中的TYPE属性相

14、同；VALUE属性使用指定一个新的数字序列起始值，使用该属性可以创建一个非连续性的数字序列。,【例1-4】 一个有序列表的例子，其源代码如下所示： 智力问答 把一头大象装进冰箱里总共分几步？ 把冰箱门打开 把大象装进去 把冰箱门关上 ,运行结果如图 ：,2无序列表 语法： 说明：无序列表的标记符UL只有一个属性TYPE(项目符号样式)，它有三种取值：disc（实心圆）、circle（空心圆）和square（方框）。 无序列表中的列表项标记符LI也只有一个属性值TYPE，它的取值与UL标记符中的取值一样，用于控制当前列表项的项目符号样式。,【例1-5】 一个无序列表的例子，其源代码如下所示： 学

15、生处分 在藉学生的处分有几种？ 通报批评 警告 记过 开除学籍，留校查看 勒令退学 ,运行结果如图 ：,3定义列表 语法： 说明：DL是英文“definition list(定义列表)”的缩写。开始标记符和结束标记符之间的内容就是定义列表的内容。定义列表中的条目是通过术语使用标记符DT和术语定义标记符DD来创建的。,【例1-6】 一个定义列表的例子，其源代码如下所示： 世说新语 放弃 把握的反面是放弃，选择了一个机会，就等于放弃了其他所有的可能 失恋 不是不在乎，是在乎不起。 离婚 不是不在乎，是一切还来得及。 幼稚 不要怕人说我们幼稚，这正说明你还年轻，还充满活力。 谣言 这是一种传染病，沉

16、默是最好的疫苗。 ,运行结果如图：,1.2.6 表格标记 表格是HTML网页的一个非常重要的元素，除了规范数据的输出外，在网页设计中，常常用它来进行版面布局的设计和定位。,1表格的组成 表格由表格标题（可省略）、表头和若干表行构成，每一表行又由若干单元格组成。 表格的各组成元素如图所示。 此处为表格标题 表头 表行 单元格,2定义表格的标记符 表格是由多个部分构成的，因此定义表格时，将用到多种标记符，这些标记符是： 定义表格的开始和结束 定义表格标题的开始和结束（可省略） 定义表行的开始和结束，一组和产生一个表行 定义单元格的开始和结束，一组和产生一个单元格 定义表头单元格的开始和结束，一组和产生一个表头单元格,在和之间的部分，即为该单元格显示的数据，若该单元格无数据，显示为空，则应表达为在HTML中代表空格。 和之间的部分，即为表头单元格所显示的数据，该数据以加粗居中方式显示。表头也可以不用而直接用来表示 。 【例1-7】 用HTML标记