程序设计教程ppt培训课件

《程序设计教程ppt培训课件》由会员分享，可在线阅读，更多相关《程序设计教程ppt培训课件（47页珍藏版）》请在金锄头文库上搜索。

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、显示原理,HTML使用一组约定的标记符号，对Web上的各种信息进行标记，浏览器会解释这些标记符号并以它们指定的格式把相应的内容显示在屏幕上，而标记符号本身不会在屏幕上显示出来。,5,3.1.2 HTML制作工具,1. HTML编辑器： 文本编辑器(记事本、写字板) 所见即所得编辑器(FrontPage、Dreamweaver) 2. Web浏览器：Microsoft Internet Explorer,6,3.1.3 HTML标记,通过用记事本制作第一个HTML文档来了解：用HTML制作网页的一般步骤、一个HTML文档的基本结构和HTML标记的写法。,7,用记事本制作网页的步骤,打开记事本。

3、在记事本中输入代码。 以.htm或.html为扩展名保存文件。 用浏览器打开上步保存的文件，即可看到页面显示效果。,我的第一个网页这是我用记事本做的第一个网页，我会努力学好HTML！,8,HTML标记说明,标记往往成对出现，开始标记与结束标记之间的部分为标记的内容。 具有开始标记和结束标记的标记称为围堵标记，标记单独出现，只有开始标记的标记称为空标记。 有些开始标记里有形如name=“value“的代码，称为标记的属性。,9,一个HTML文档的基本结构,整个文档处于标记与之间；文档分两部分，到为头部，用于存放重要的信息，如标题和meta数据，内容不在浏览器窗口里显示，到为主体部分，网页中的内容

4、都要放在这一部分，大部分HTML标记使用在这一部分。,10,标记常用属性,text：文本颜色。bgcolor：背景颜色。 link：链接颜色。 background：背景图片。 alink：活动链接颜色。 vlink：访问过的链接颜色。 leftmargin：水平边距。 topmargin：垂直边距。 bgproperties：背景图片是否随文本滚动。,11,书写HTML代码时注意事项,HTML标记及属性中字母不区分大小写。 标记名与左尖括号之间不能留有空白，如是错误的。 属性要写在开始标记的尖括号中，放在标记名之后，并且与标记名之间要有空白。多个属性之间也要有空白。属性值最好用单引号或双引号

5、引起来，引号一定要是英文的引号，不能是中文的引号。 结束标记要书写正确，不能忘掉斜杠。,12,3.2 常用HTML标记,本节分类介绍常用的HTML标记及其常用属性，其它标记的详细情况请参考相关书籍。 1. 排版标记 2. 字体列表标记 3. 表格标记 4. 链接标记 5. 图像标记 6. 表单标记 7. 框架标记 8. 其它标记,13,3.2.1 排版标记,介绍常用排版标记及其属性。,14,排版标记(1), : 段落标记，换行并留空白行，属性align设定段落的对齐方式，可取属性值： center：居中对齐。 left：左对齐。 right：右对齐。 :换行标记。 :按原始代码的排列方式显示内

6、容。,15,排版标记(2),:水平线标记，空标记，常用属性有：align、width、size、color、noshade。 :居中标记。,16,排版标记举例, 排版标记举例这是一个居中对齐段落，有三行第二行第三行月落乌啼霜满天，江枫渔火对愁眠。故苏城外寒山寺，夜半钟声到客船。,17,3.2.3 表格标记,表格现已成为对文本和图形进行布局的强有力的工具。表格由一行或多行组成；每行又由一个或多个单元格组成。HTML中一个表格通常是由、三个标记来定义的，这三个标记分别表示表格、表格行、单元格。在对表格进行设置时，可以设置整个表格()或表格中的行()或单元格()的属性，它们优先顺序为：单元格()优先

7、于行()，行()优先于表格()。,18,整个表格始于而终于，是一个容器标记，、等只能在它的范围内使用。常用的属性有： width：表格宽度。 align：表格水平对齐方式。 border：表格边框厚度。 cellpadding：边距。 cellspacing：间距。 bgcolor：表格背景颜色。 background：表格背景图像。,19,定义表格行，是单元格（或）的容器。常用属性有： align：这一行单元格水平对齐方式。 bgcolor：这一行的背景颜色。 valign：用来设定这一行单元格中内容的垂直对齐方式，可取属性值有： top：顶端对齐。 middle：中间对齐。 bottom：

8、底端对齐。,20,、,单元格标记，具体内容的容器，使用时要放在与之间。常用属性有： align：水平对齐方式。 background：背景图像。 bgcolor：背景颜色。 colspan：跨列数目。 nowrap：限制自动换行。 rowspan：跨行数目。 valign：垂直对齐方式。 width：宽度。 height：高度。,21,表格举例,李四9843王晓彬9778成大才94,表格标记举例期中成绩表姓名语文数学张三 100,22,3.2.4 链接标记,链接的作用就是把页面中的文本或图片链接到其它的页面、文本或图片。如果没有链接，看到的只是一个单独的网页，而不是一个站点，这样Web也将不成

9、为Web。链接用标记来定义，它是网页中最为常用的标记。,23,文件路径,绝对路径：文件的绝对路径提供文档的完整URL，如果指定存放在外部网站的文件，只能使用绝对路径，如果指定存放在本地的文件，尽管可以使用绝对路径，但建议最好使用相对路径。 相对路径：相对路径又分为根相对路径和文档相对路径，根相对路径总是以站点根目录“/”为起始目录，写起来比较简单；文档相对路径是以当前文件所在路径为起始目录，进行相对的文件查找。在站点内，通常都采用文档相对路径，便于站点的移植。,24,定义链接的语法： 文本或图片 常用属性： href：链接的目标。 name：锚点的名字。 target：目标窗口。保留目标名有：

10、_blank、_parent、_top、_self。,25,的几种用法,链接网页：a 链接命名锚点： top top 链接非Web数据：简历 电子邮件链接： 联系 空链接：a 脚本链接： click me,26,3.2.5 图像标记,加入图像的语法： 常用属性： src：图像文件。 alt：替代文本。 height：高度。width：宽度。 vspace：垂直边距。hspace：水平边距。 border：边框宽度。,27,3.2.6 表单标记,表单的作用是从访问Web站点的用户那里获取信息。访问者可以使用诸如文本框、列表框、复选框以及单选按钮之类的表单对象输入信息，然后单击某个按钮提交这些信息

11、。：表单区域。常用属性： action：处理表单数据的页面或脚本。 method：表单数据传输方法，属性值： get：表单数据附加到URL中。 post：表单数据嵌入HTTP 请求中。,28,表单对象(1),文本框：。 常用属性：name、value、size、maxlength。 密码框：。 单选按钮：。常用属性：name、value、checked。同一组中所有单选按钮的name属性必须设置相同。 复选框：。常用属性：name、value、checked。,29,表单对象(2),下拉菜单： 河南省 北京市value属性指定选中一项后传送的值，加入selected属性可以使菜单项初始为选中状

12、态,30,表单对象(4),列表： 河南省 北京市size用来设定列表中显示的选项个数；加入multiple属性允许用户从列表中选择多项。,31,表单对象(5),文件域：。其它属性与文本框相同。如果要上传文件，需要注意的是，的method属性必须设置为post，另外，必须加上属性enctype=“multipart/form-data“。 隐藏域： 文本区域：文本。常用属性：name、rows、cols、wrap。,32,表单对象(6),提交按钮：。常用属性：name、value。 重置按钮：。 普通按钮：。 图像按钮：。常用属性：name、src、width、height、alt。,33,表单

13、举例,(代码见教材),34,3.2.7 框架标记,框架提供将一个浏览器窗口划分为多个区域、每个区域都可以显示不同HTML文档的方法。当创建一个具有框架的网页时，该网页有一个URL，该网页上的每一个区域（框架）都有一个它自己的URL，所以可以将其它网页装载到浏览器的某一个区域，而其它区域的网页保持静止。框架常常用来控制站点布局、进行页面导航。,35,主框架文档,定义一组框架的布局和属性,结构如下: 标题 用来指示浏览器如何划分窗口，用来指示每一个窗口要加载的文档以及指定窗口的名字等。把窗口划分为n个区域，就会有n个相对应。,36,、,常用属性： cols:指定列宽。rows:指定行高。 fram

14、eborder：是否显示框架边框。 Border:边框厚度。 bordercolor:边框颜色。framespacing:框架间距。 常用属性:src、name、noresize、scrolling、frameborder、framespacing、marginheight、marginwidth。,37,划分窗口(1),只有行的框架：只有列的框架：,38,划分窗口(2),行列都有的框架：,39,划分窗口(3),嵌套：,40,用法,对不起，您的浏览器不支持框架！,41,内联框架,内联框架语法: 内容。 常用属性： src：显示的文档。 name：内联框架的名字。 height：内联框架的高度。

15、 width：内联框架的宽度。 scrolling：是否显示滚动条 。,42,框架标记举例,（代码见教材） 打开主框架文档：打开左窗口中的链接：,43,3.2.8 其它标记,背景音乐 滚动字幕 页面重定向与刷新,44,背景音乐,用于给网页添加背景音乐，不需要结束标记，一般放在与之间。只适用于IE，常用属性： src：音乐文件路径。 autostart：是否自动播放。 loop：重复播放的次数，infinite表示无限次。,45,滚动字幕,内容 常用属性： behavior：用来设定滚动的方式，可取属性值有：scroll、slide、alternate。 bgcolor、width、height

16、。 direction：滚动方向，可取属性值有：left、right、down、up。 loop、scrollamount、scrolldelay。 onmouseover=“this.stop()“ onmouseout=“this.start()“,46,页面重定向与刷新,属于头部标记，应放在与之间，它的用法比较多，但最常用的是它的刷新功能。实现刷新功能的语法为： 此语句表示页面打开4秒钟后自动转到搜狐主页，如果把url部分省略，则表示页面每4秒钟就自动刷新一次。,47,本章小结,本章主要讲述了HTML显示原理、HTML制作工具以及常用的HTML标记，这些知识是学习网页设计与Web应用程序开发的基础。希望同学们能亲自输入代码来实验每一个标记及属性的用法，这才是学习HTML语言的最有效的方法。,