1、ASP.NET程序设计教程 第3章 HTML语言,2,内容,本章主要介绍了HTML显示原理、HTML制作工具以及常用的HTML标记等 。,3,3.1 HTML简介,HTML是在标准通用标记语言SGML定义下的一个描述性语言，是SGML的一个子集。HTML不是一种像C#、Java之类的程序语言，而是一种描述文档结构的标记语言，它是一种应用非常广泛的网页格式，也是最早被用来显示Web页的语言之一。它与操作系统平台的选择无关，只要有浏览器就可以运行HTML文档，显示网页内容。HTML文档类似于.txt文本文件，不同的是，文档里还包含一种被称为标记的符号。,4,3.1.1 HTML显示原理,首先浏览一
2、下搜狐网站的首页面。在浏览器的地址栏里输入网址http:/，按回车键后，就可以看到搜狐网站的首页面，如图3.1所示,图3.1 搜狐首页,页面有整齐的布局，有漂亮的动画及图片，有可以输入信息的文本框，有可以点击的文本等，那么究竟浏览器是根据什么才显示出这样的页面呢？,5,3.1.1 HTML显示原理,打开浏览器“查看”菜单，选择“源文件”命令，会弹出如图3.2所示的记事本窗口，,图3.1 搜狐首页,窗口中显示的文本即是搜狐首页的源代码，源代码中有很多用一对尖括号“”括起来的文本，如等，这些就是HTML标记，浏览器就是根据这些标记把文本、图像等内容显示在网页中的。,6,3.1.2 HTML制作工具
3、,制作HTML文档，需要两个基本工具，一个HTML编辑器，一个Web浏览器。 HTML编辑器可分为两类：基于文本或代码的编辑器和 所见即所得(WYSIWYG)编辑器。前者在创建文档时只 能看到HTML代码，后者在编辑时即显示出类似于最终 浏览器窗口显示的结果。 Web浏览器用来浏览HTML文档，在Windows操作系统 上，常用的浏览器有360,火狐,Microsoft Internet Explorer，也常简称为IE，常用的版本有IE 6.0、IE 7.0、IE 8.0。,7,HTML程序的组成,HTML程序由开始,到结束 里面的内容有 头部标记 为主体标记,8,3.1.3 HTML标记,
4、用记事本制作第一个网页的步骤如下： 1) 打开记事本。 2) 在记事本中输入以下代码：我的第一个网页这是我用记事本做的第一个网页，我会努力学好HTML！,9,3.1.3 HTML标记,3) 保存文件：HTML文件的扩展名为.htm或.html，因为有些Web服务器对中文文件名不能很好支持，所以文件名中尽量不要使用汉字 4) 用浏览器打开上步保存的文件，即可看到如图3.3所示的页面,图3.3 第一个网页,注:为了满足DOS仅能识别8.3的文件名而已，因为一些老的系统(win32)不能识别四位文件名，所以某些网页服务器要求index.html,10,头部标记,头部标记包括:头部的起始与结束标记定义
5、用于显示浏览器标题栏的字符串用于定义css样式元素可提供有关页面的元信息,在与之间,常用的属性有:http-equiv,name. 1.http-equiv 类似于头部的协议,它回应给浏览器一些有用的信息,常用的属性值有: (1)content-type:显示字符集的设定,例如:(2)refresh 刷新与跳转(重定向)页面 refresh用于刷新与跳转(重定向)页面 refresh:刷新或跳转的开始时间与跳转的网址,例如:表示页面打开30秒钟后自动转到新浪主页,11,(3)pragma设定禁止浏览器从本地机的缓存中调阅页面内容,设定后一旦离开网页就无法从Cache中再调出,例如:(4)Set
6、-Cookie cookie设定,如果网页过期,存盘的cookie将被删除.必须使用GMT时间格式,例如:(5)Expires 设定网页的到期时间.一旦网页过期,必须到服务器上重新调阅,例如: ,12,2.Name 主要用于描述网页对应的属性值为content，主要是便于搜索引擎机器人查找信息和分类信息用的。格式是：。 (1)Keywords 告诉搜索引擎你网页的关键字 例： (2)description 告诉搜索引擎你的网站主要内容 例如：,13,3.1.3 HTML标记,标记常用的属性有： 1) text：用来设定网页中文本的颜色，属性值可以是颜色的名称，也可以是#后面跟6位十六进制数字，
7、如text=“black“和text=“#000000“都可以把文本颜色设为黑色。 2) bgcolor：用来设定整个页面的背景颜色，如bgcolor=“green“。 3) link：用来设定链接文本的颜色，如link=“blue“。 4) alink：用来设定活动链接文本的颜色，也就是刚按下鼠标左键还没松开时的颜色。 5) vlink：用来设定访问过的链接文本的颜色，如vlink=“#ff0000“。,14,3.1.3 HTML标记,6) background：用来设定页面的背景图片，属性值可以是图片文件的相对路径或绝对路径，如background=“bg.gif“。 7) leftmar
8、gin：用来设定整个网页内容与浏览器窗口左右边框之间空白大小，属性值为整数，单位为像素，如leftmargin=“4“。 8) topmargin：用来设定整个网页内容与浏览器窗口上下边框之间空白大小。 9) bgproperties：当属性值为fixed时，可固定页面的背景图片，拖动滚动轴时背景图片不会随着文本而滚动。,15,3.1.3 HTML标记,书写HTML代码时应注意以下几点： 1) HTML标记及属性中字母不区分大小写，如与对浏览器来说是完全相同的。 2) 标记名与左尖括号之间不能留有空白，如是错误的。 3) 属性要写在开始标记的尖括号中，放在标记名之后，并且与标记名之间要有空白；
9、多个属性之间也要有空白；属性值最好用单引号或双引号引起来，引号一定要是英文的引号，不能是中文的引号。 4) 结束标记要书写正确，不能忘掉斜杠。,16,3.2 框架标记,框架提供将一个浏览器窗口划分为多个区域、每个区域都可以显示不同HTML文档的方法。当创建一个具有框架的网页时，该网页有一个URL，该网页上的每一个区域（框架）都有一个它自己的URL，所以可以将其它网页装载到浏览器的某一个区域，而其它区域的网页保持静止。框架常常用来控制站点布局、进行页面导航。,17,主框架文档,一般框架放在主页，不含具体内容，用于主页布局 定义一组框架的布局和属性,结构如下: 标题 用来指示浏览器如何划分窗口，用
10、来指示每一个窗口要加载的文档以及指定窗口的名字等。把窗口划分为n个区域，就会有n个相对应。,18,、,常用属性： cols:指定列宽。rows:指定行高。 frameborder：是否显示框架边框。 Border:边框厚度。 bordercolor:边框颜色。framespacing:框架间距。 常用属性:src、name、noresize、scrolling、frameborder、framespacing、marginheight、marginwidth。,19,划分窗口(1),只有行的框架：我的网页我作主,20,只有列的框架：,21,划分窗口(3),嵌套：）如下例：我的框架网页此网页使用
11、了框架，但您的浏览器不支持框架。,22,内联框架,内联框架语法: 内容。 常用属性： src：显示的文档。 name：内联框架的名字。 height：内联框架的高度。 width：内联框架的宽度。 scrolling：是否显示滚动条 。,23,框架标记举例,（代码） 打开主框架文档：打开左窗口中的链接：,24,3.3 常用HTML标记,本节分类介绍常用的HTML标记及其常用属性，其它标记的详细情况请参考相关书籍,2.排版标记 4.字体列表标记 6. 表单标记 8. 其它标记,链接标记 3. 表格标记 5. 图像标记 7. 框架标记,25,3.3.1 链接标记,链接的作用就是把页面中的文本或图片
12、链接到其它的页面、文本或图片。如果没有链接，看到的只是一个单独的网页，而不是一个站点，这样Web也将不成为Web。链接用标记来定义，它是网页中最为常用的标记。,26,定义链接的语法： 文本或图片 常用属性： href：链接的目标。 name：锚点的名字(可在框架中使用，也用于在一个页面中要跳转的地方先标名锚点)。 target：目标窗口。保留目标名有：_blank、_parent、_top、_self。,注:href:Hyperlink Reference,27,的几种用法,链接网页：a 链接非Web数据：简历 电子邮件链接： 联系 空链接：a 脚本链接： click me,28,链接文件路径
13、,绝对路径：文件的绝对路径提供文档的完整URL，如果指定存放在外部网站的文件，只能使用绝对路径，如果指定存放在本地的文件，尽管可以使用绝对路径，但建议最好使用相对路径。 相对路径：相对路径又分为根相对路径和文档相对路径，根相对路径总是以站点根目录“/”为起始目录，写起来比较简单；文档相对路径是以当前文件所在路径为起始目录，进行相对的文件查找。在站点内，通常都采用文档相对路径，便于站点的移植。,29,3.3.2 排版标记,3.3.1 像很多语言一样，HTML也提供注释功能，注释以结束，之间所有的内容会被浏览器忽略。利用注释可以为HTML文档的不同部分加上说明，方便日后修改，也可以利用注释为HTM
14、L文档加上版权声明。,30,3.3 排版标记,3.3. 2 称为段落标记，用来创建一个段落，段落内容显示时与前后的内容之间保留一空白行。如果两个段落相连，则可以省略第一个段落的结束标记，因为第二段的开始自动结束第一段，如“第一段第二段”，当然结束标记也可以不省略。的常用属性align，用来设定段落的对齐方式，可取属性值有： 1) left：左对齐。 2) center：居中对齐。 3) right：右对齐。,31,3.3 排版标记,3.3.3 称为换行标记，在网页设计中比较常用。它的作用就是换行，这一点与相同，与不同的是换行后行之间不留空白行，页面看起来比较紧凑。属于空标记，没有结束标记。,3
15、2,3.3 排版标记,3.3.4 称为预格式化标记，它的作用是按原始代码的排列方式显示内容。通常情况下，浏览器显示时会忽略内容中的空白及换行，而与之间的空白及换行会被保留。,33,3.3 排版标记,3.3.5 称为水平线标记，可以在页面中产生一条水平线，属于空标记，没有结束标记。的常用属性有： 1) align：用来设定水平线的对齐方式，可取属性值有：left、center、right。 2) width：用来设定水平线的水平长度，属性值可以是绝对值或相对值，如width=“300”表示长度为300像素，是绝对长度，width=“50%”表示水平长度为上一级(父级)容器水平总长度的一半，是相对
16、长度,34,3.2.1 排版标记,3) size：用来设定水平线的厚度，属性值为整数，单位为像素，如size=“4“。 4) color：用来设定水平线的颜色。 5) noshade：水平线默认为立体显示，具有阴影，加上此属性可删除水平线阴影，如,35,3.2.1 排版标记,3.2.1.6 称为居中标记，可以使标记的内容居中显示，属于围堵标记，使用时需要结束标记。,36,3.2.1 排版标记,3.2.1.7 排版标记举例 例3.1 新建网页文档3-2.htm，其代码如下：排版标记举例这是一个居中对齐段落，有三行第二行第三行,37,3.2.1 排版标记,月落乌啼霜满天，江枫渔火对愁眠。故苏城外寒
17、山寺，夜半钟声到客船。,38,3.3 排版标记,用浏览器打开3-2.htm，可看到如图3.4所示的效果。,图3.4 排版标记,39,3.4 字体列表标记,3.4.1 为粗体标记，与之间的文本产生加粗效果。使用此标记时如果忘掉结束标记，则后面所有的文本都将以粗体显示。 3.2.2.2 为斜体标记，与之间的文本产生斜体效果。使用此标记时如果忘掉结束标记，则后面所有的文本都将以斜体显示。,40,3.4 字体列表标记,3.4.2 为加底线标记，与之间的文本显示时会加底线。使用此标记时如果忘掉结束标记，则后面所有的文本都将加上底线。 3.2.2.4 为加删除线标记，与之间的文本显示时会加删除线。使用此标
18、记时如果忘掉结束标记，则后面所有的文本都将加上删除线。,41,3.4 字体列表标记,3.4.3 与之间的文本显示时会加大。 3.2.2.6 与之间的文本显示时会缩小。 3.2.2.7 为下标字标记，与之间的文本以下标字显示。,42,3.4 字体列表标记,3.4.4 为上标字标记，与之间的文本以上标字显示。 3.2.2.9 、 到为标题标记，每个标题标记所标记的文本加粗显示独占一行且上下保留一空白行，由到字体依次变小。,43,3.4 字体列表标记,3.4.5 的常用属性有： 1) face：用来设定文本的字体，属性值为逗号隔开的字体列表，如果浏览器所在机器上没有安装指定的任何一种字体，则以浏览器
19、默认字体显示，所以使用时最好不使用特殊字体。 2) size：用来设定文本的大小，属性值可以是绝对的或相对的，如size=“5“是绝对的，表示文本以5号字显示，size=“+2“是相对的，表示文本在原先大小的基础上再增大2级。 3) color：用来设定文本的颜色，如color=“red“。,44,3.2.2 字体列表标记,2.2.11 定义项目列表的语法为：项1项2,的常用属性只有一个type，用来设定列表项前面出现的符号，可取属性值有： 1) disc：列表项前面加上符号。 2) circle：列表项前面加上符号。 3) square：列表项前面加上符号。,45,3.2.2 字体列表标记,
20、3.2.2.12 定义编号列表的语法为：项1项2,46,3.2.2 字体列表标记,的常用属性有： 1) type：用来设定列表的编号形式，可取属性值有： 1：用阿拉伯数字1，2，3，编号。 a：用小写英文字母a，b，c，编号。 A：用大写英文字母A，B，C，编号。 i：用小写罗马字母，编号。 I：用大写罗马字母，编号。 2) start：用来设定列表开始编号的位置，不论采用何种编号形式，属性值都为整数，如start=“3“表示第一项从第3的位置开始编号。,47,3.2.2 字体列表标记,3.2.2.13 用来标记列表的一项，需同或一起使用，它的属性有： 1) type：用来设定列表项的符号，如
21、果用在里，属性取值为disc、circle或square，如果用在里，则属性取值为1、a、A、i或I。 2) value：此属性仅当用在里有效，属性值为一整数，用来设定当前项的编号，其后的项目将以此值为起始数目递增，前面各项不受影响。,48,3.4 字体列表标记,3.4.6字体列表标记举例,例3.2 新建网页文档3-3.htm，其代码如下：字体列表标记举例字体列表标记举例这一行为粗体字这一行为斜体字这一行文字会加上下画线,49,3.4 字体列表标记,这一行文字会加上删除线多个标记可同时使用上标和下标标记可用来写数学公式A2+X2=？来一个好玩的字：J书写HTML代码应注意以下几点：HTML代码
22、不区分大小写两个属性间要加上空格结束标记不要忘写斜杠,50,3.4 字体列表标记, 建立一个网页的步骤：打开记事本输入HTML代码以.htm或.html为扩展名保存文件,51,3.4 字体列表标记,用浏览器打开3-3.htm，可看到如图3.5所示的效果。,图3.5 字体列表标记,52,3.5 表格标记,表格现已成为对文本和图形进行布局的强有力的工具。表格由一行或多行组成；每行又由一个或多个单元格组成。HTML中一个表格通常是由、三个标记来定义的，这三个标记分别表示表格、表格行、单元格。在对表格进行设置时，可以设置整个表格()或表格中的行()或单元格()的属性，它们优先顺序为：单元格()优先于行
23、()，行()优先于表格()。,53,整个表格始于而终于，是一个容器标记，、等只能在它的范围内使用。常用的属性有： width：表格宽度。 align：表格水平对齐方式。 border：表格边框厚度。 cellpadding：边距。 cellspacing：间距。 bgcolor：表格背景颜色。 background：表格背景图像。,54,用于定义表格行，是单元格（或）的容器。常用属性有： align：这一行单元格水平对齐方式。 bgcolor：这一行的背景颜色。 valign：用来设定这一行单元格中内容的垂直对齐方式，可取属性值有： top：顶端对齐。 middle：中间对齐。 bottom：
24、底端对齐。,55,、,用于单元格标记，具体内容的容器，使用时要放在与之间。常用属性有： align：水平对齐方式。 background：背景图像。 bgcolor：背景颜色。 colspan：跨列数目。 nowrap：限制自动换行。 rowspan：跨行数目。 valign：垂直对齐方式。 width：宽度。 height：高度。,注:表示内容单元格 则表示标题,一般用在一列的第一格,里面的内容会自动加粗加黑,56,表格标记举例,李四9843王晓彬9778成大才94,表格标记举例期中成绩表姓名语文数学张三 100,57,3.6 图像标记,加入图像的语法：常用属性： src：图像文件。 alt
25、：替代文本。 height：高度。width：宽度。 vspace：垂直边距。hspace：水平边距。 border：边框宽度。,58,3.7 表单标记,表单的作用是从访问Web站点的用户那里获取信息。访问者可以使用诸如文本框、列表框、复选框以及单选按钮之类的表单对象输入信息，然后单击某个按钮提交这些信息。：表单区域 常用属性： action：处理表单数据的页面或脚本。 method：表单数据传输方法，属性值： get：表单数据附加到URL中。 post：表单数据嵌入HTTP 请求中。 （Get是用来从服务器上获得数据，而Post是用来向服务器上传递数据。 ）,59,表单对象(1),文本框：。
26、 常用属性：name、value、size、maxlength。 密码框：。 单选按钮：。常用属性：name、value、checked。同一组中所有单选按钮的name属性必须设置相同。 复选框：。常用属性：name、value、checked。,60,表单对象(2),下拉选项 河南省 北京市value属性指定选中一项后传送的值，加入selected属性可以使菜单项初始为选中状态,61,表单对象(4),列表：河南省 北京市size用来设定列表中显示的选项个数；加入multiple属性允许用户从列表中选择多项。,62,表单对象(5),文件域：。其它属性与文本框相同。如果要上传文件，需要注意的是，
27、的method属性必须设置为post，另外，必须加上属性enctype=“multipart/form-data“。 隐藏域： 文本区域：文本。常用属性：name、rows、cols、wrap。,63,表单对象(6),提交按钮：。常用属性：name、value。 重置按钮：。 普通按钮：。 图像按钮：。常用属性：name、src、width、height、alt。,64,表单举例,(代码),65,3.8 其它标记,背景音乐 滚动字幕 页面重定向与刷新,66,背景音乐,用于给网页添加背景音乐，不需要结束标记，一般放在与之间。 只适用于IE，常用属性： src：音乐文件路径。 autostart：
28、是否自动播放。 loop：重复播放的次数，infinite表示无限次。 如： ,67,滚动字幕(图片),内容 常用属性： bgcolor、width、height。 direction：滚动方向，可取属性值有：left、right、down、up。 loop、scrollamount、scrolldelay。 onmouseover=“this.stop()“ onmouseout=“this.start()“ 5.behavior：用来设定滚动的方式，可取属性值有：scroll、slide(滑行) 、alternate(交替)。,其中滚动的方式的区别： alternate： 表示在两端之间来回滚动。 scroll： 表示由一端滚动到另一端，会重复。 Slide： 表示由一端滚动到另一端，不会重复。 设定活动字幕的滚动速度，单位pixels ,68,69,实例:图形文字移动,活动字幕图片我们的世界 这是楷体字 为人民服务从右向左移！ ,70,本章小结,本章主要讲述了HTML显示原理、HTML制作工具以及常用的HTML标记，这些知识是学习网页设计与Web应用程序开发的基础。希望同学们能亲自输入代码来实验每一个标记及属性的用法，这才是学习HTML语言的最有效的方法。,
