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