《ASP.NET Web程序设计 教学课件 ppt 作者 祁长兴chapter02》由会员分享，可在线阅读，更多相关《ASP.NET Web程序设计 教学课件 ppt 作者 祁长兴chapter02（123页珍藏版）》请在金锄头文库上搜索。
1、ASP.NET Web程序设计,2,HTML和JavaScript,第,章,本章内容,2.1 HTML,2.2 JavaScript,2.3 案例：使用HTML和JavaScript实现表单注册,2.4 习题,2.1 HTML,HTML是一种用来制作超文本文档的简单标记语言， Web浏览器能够自动解释超文本文件并且按照一定的格式显示出来。 只能实现静态页面的设计。 2.1.1 HTML基本语法 2.1.2 文字段落标记 2.1.3 图像标记 2.1.4 超级链接标记 2.1.5 表格标记 2.1.6 表单与控件 2.1.7 框架的使用,HTML文件扩展名是.html或.htm，它们是可供浏览器
2、解释浏览的文件格式。 HTML语言使用标记编写文件，标记符必须用“”括起来，一般以“”开始，以“”结束，即成对的使用标记，也称之为双标记。 HTML的标记是不区分大小写的。,2.1.1 HTML基本语法,文档内容 文档内容,例如：,2.1.1 HTML基本语法,重点内容 我的第一个网页 表格的内容,表示文字“重点内容”用带下划线的样式显示,表示当前页面的标题为“我的第一个网页”,表示在浏览器上显示一个表格，表格的边框 线粗细为1，表格的宽度为300px,但也有些标记只需单独使用就能完整的表达意思，称之为单标记。常用的单标记主要有换行标记、水平线标记等。,2.1.1 HTML基本语法,HTML文
3、档分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。一个完整的HTML文件的基本格式如下：,2.1.1 HTML基本语法, 网页的标题 文档主体，正文部分 ,2.1.1 HTML基本语法,例2-1,创建一个简单的HTML网页文件, 创建一个HTML网页文件 我喜欢学习HTML！ ,例2-1,创建一个简单的HTML网页文件,步骤如下： 1) 新建一个记事本文件，并输入如上HTML语句。 2) 执行记事本“文件”菜单下的“另存为”命令，将“保存类型”设置为“所有文件”，将文件的扩展名改为.htm或.html。单击“保存”按钮。 3) 打开保存成功
4、的.htm文件，即可以看到浏览器中页面的显示效果。,2.1.1 HTML基本语法,例2-1,运行效果,2.1.1 HTML基本语法,1. 文字样式标记：包括文字的字体、字号和颜色，一般使用标记来实现。具体格式如下：,2.1.2 文字段落标记,文字内容,“size”表示字号，“数字”表示字号的大小，最大为7，最小为1，默认字号为3。 “face”表示字体，默认字体为宋体。 “color”表示文字的颜色，默认颜色为黑色。,HTML常用颜色设置值,2.1.2 文字段落标记,2. 字型标记：HTML中字型标记有很多，常用的字型标记可参见下表,2.1.2 文字段落标记,3. 段落标记有两种，分别是换段标
5、记和换行标记。其中属于单标记。,2.1.2 文字段落标记,段落内容,align指段落的对齐方式，取值为：Left(左对齐，默认)、Center(居中)和Right(右对齐)三个值中的任何一个。, 静夜思 床前明月光，疑是地上霜。举头望明月，低头思故乡。 ,2.1.2 文字段落标记,当需要结束一行，并且不想开始新段落时，使用标记。标记不管放在什么位置，都能够强制换行。 一个标记可以看成是两个换行标记。, 静夜思 床前明月光，疑是地上霜。举头望明月，低头思故乡。 ,4. 水平线标记：单标记表示在文档当前位置画一条水平线，一般从窗口中当前行的最左端一直画到最右端；其格式为：,2.1.2 文字段落标记
6、,size属性设置水平线的粗细，默认值为1； color属性设置水平线的颜色； width属性设定水平线的长度，默认值是100%； align属性表示对齐方式； noshade属性不用赋值，而是直接加入标志即可使用，它是用来加入一条没有阴影的水平线。,2.1.2 文字段落标记,5. 标题标记：其中n为标题的等级，HTML总共提供六个等级的标题，n越小，标题字号就越大。, 这是一行普通文字 用1级标题样式显示文字 用2级标题样式显示文字 用3级标题样式显示文字 用4级标题样式显示文字 用5级标题样式显示文字 用6级标题样式显示文字 ,演示,运行效果,2.1.2 文字段落标记,例2-2,文字段落标
7、记的使用, 文字段落标记的使用 第一章 诗词歌赋 第一节 宋词 作品原文 ,2.1.2 文字段落标记,2.1.2 文字段落标记,水调歌头明月几时有 丙辰中秋，欢饮达旦1，大醉，作此篇，兼怀子由。 明月几时有？把酒问青天。不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。 转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。 注释：,2.1.2 文字段落标记, 1达旦：至早晨；到清晨。 如有学习上的问题，请联系 ,例2-2,运行效果,2.1.2 文字段落标记,2.1.3 图像标记,如果希望将一幅
8、图片插入到网页中，可以使用图片标记。图片标记是一个单标记。其基本格式为：,img src=图片文件名 alt=简要说明 width=图片的宽度 height=图片的高度 border=边框宽度 hspace=水平方向空白 vspace=垂直方向空白/,2.1.3 图像标记,例如：下面是一段在页面中插入图片的代码。代码中用到了标记和标记来设置图片水平方向的对齐方式。, 插入图片 ,演示,运行效果,2.1.3 图像标记,2.1.4 超级链接标记,超链接是指从一个网页指向一个目标的连接关系。它包含两部分内容： 链接目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个电子邮件地址。 超链接
9、的对象，可以是一段文本或者是一个图片。,1. 文字链接：指的是超链接的对象是一段文本，跳转的目标是当前网站的另外一个网页或者另一个网站的网址。其格式为：, 热点文本 ,href：是超链接引用，url为链接要转到的目标网页。 target：定义链接到目标资源时，打开窗口的方式。,2.1.4 超级链接标记,对于超链接的文字的颜色也可以通过一些属性来设置，具体为： link：表示尚未被访问过的超链接的颜色，默认为蓝色。 vlink：表示曾经访问过的超链接的颜色，默认为棕红色。 alink：表示超文本链接被访问瞬间的颜色，默认为蓝色。,2.1.4 超级链接标记,首页 百度 ,2. 图像链接：如果希望使
10、用图片作为超链接的对象，格式为：,url：点击链接后要转到的目标网页。 target：打开窗口的方式。 scr:：包括路径在内的图片的文件名。,2.1.4 超级链接标记,3. 电子邮件链接的格式为：, 文字 ,email：为接收邮件的邮箱 。,2.1.4 超级链接标记,联系我们,4. 锚点链接：如果一个页面的内容过多，导致页面过长，用户需要不停地拖动滚动条来查看文档中的内容，为了方便用户阅读过长的页面内容，可以使用锚点链接。,文字,name属性用来创建一个命名的锚。 锚名相当于文章中的一个标记。,2.1.4 超级链接标记,文字,锚点创建好后，就可以在其他位置进行超链接了。如果超链接到本文档的锚
11、点，格式为：,2.1.4 超级链接标记,如果超链接到其他页面的锚点，格式为：,文字, 标题 表头1表头2表头3表头n 表项1表项2表项3表项n 表项1表项2表项3表项n ,在HTML网页中，表格一般由标记开始，以标记结束。表的内容由、组成。具体格式如下：,2.1.4 表格标记,border：定义表格边框线的宽度，单位为象素。若省略则表格没有边框。 bordercolor：定义表格边框线的颜色值。 width：定义表格的宽度，单位为象素或百分比。 height：定义表格的高度，单位为像素或百分比，单位为百分比时与width相同。 cellspacing：定义单元格与单元格之间的间距，单位为像素。
12、 cellpadding：定义单元格内容与边框之间的间距，单位为像素。 align：定义表格的水平对齐方式，其值可为left、center、right。默认值为center。,2.1.4 表格标记,例2-3,在HTML中插入一个表格, 插入一个表格 表格示例,2.1.4 表格标记,例2-3,在HTML中插入一个表格,横向通栏示例 纵向通栏示例格式单词含义 width宽度 height高度 ,2.1.4 表格标记,例2-3,运行效果,2.1.4 表格标记,表单的基本语法格式为：,2.1.6 表单与控件,name：设置表单的名称。 action：设置表单的处理方式，通常为一个URL，指出处理表单数
13、据的程序文件名（包括网络路径、网址或相对路径），也可以为一个电子邮件地址。 method：提交表单的方法，有GET和POST两种。,在HTML中，常用表单控件主要有： 1. 文本框：一种让用户自己输入内容的表单控件，通常被用来填写简短的字符，如姓名、地址等。其格式为：,2.1.6 表单与控件,input type=text name=名称 size=宽度 maxlength=字符数 value=初始值,type=text：定义控件类型为单行文本框。 name：定义文本框的名称，是唯一的。 size：定义文本框的宽度，以单个字符为单位。 maxlength：定义允许输入的最大字符数。 value
14、：定义文本框的初始值，为可选属性。,2. 密码框：一种特殊的文本框，用于输入密码。当用户输入文字时，文字会被星号或其他符号代替，而输入的文字会被隐藏。其格式为：,2.1.6 表单与控件,input type=password name=名称 size=宽度maxlength=字符数 value=初始值,type=password定义控件类型为密码框，其他属性含义同文本框。例如： ,3. 复选框：允许在待选项中选中一项以上的选项。每个复选框都是一个独立的元素，都必须有一个唯一的名称。其格式为：,2.1.6 表单与控件,input type=checkbox name=名称,type= check
15、box：定义控件类型为复选框。 name：定义复选框的名称，名称唯一。,4. 单选框：是指在待选答案中只能选中一项而且必须选中一项。其格式为：,2.1.6 表单与控件,input type=radio name=名称 checked,type=radio：定义控件类型为单选框。 name：定义单选框的名称。 checked：定义单选框的选中状态，不需要设置值。,男 女,5. 文件上传控件：文件上传控件和文本框差不多，只是还包含了一个浏览按钮。用户可以通过在文本框输入或者点击浏览按钮选择需要上传的文件。其格式为：,2.1.6 表单与控件,input type=file name=名称 size=
16、宽度maxlength=字符数,type=file定义控件类型为文件上传控件，其它属性含义与单行文本框相同。,6. 提交按钮：是用来将输入的信息提交到服务器。其代码格式为：,2.1.6 表单与控件,type=submit：定义控件类型为提交按钮。 name：定义提交按钮的名称。 value：定义按钮的显示文字。,7. 重置按钮：也叫复位按钮，用来重置表单。其代码格式为：,2.1.6 表单与控件,type=reset定义控件类型为重置按钮。其它属性含义与提交按钮相同。,8. 一般按钮：用来控制其他定义了处理脚本的处理工作。其代码格式为：,2.1.6 表单与控件,input type=button name=名称value=文字,type=button定义了控件类型为一般按钮，其他属性含义与提交按钮相同。,9. 下拉列表框：允许在一个有限的空间内设置多种选项。其代码格式为：,2.1.6 表单与控件
