祁长兴《ASPNETweb程序设计教程》第二章

ASP.NETWeb程序设计2HTML和JavaScript第章本章内容2.1HTML2.2JavaScript2.3案例：使用HTML和JavaScript实现表单注册2.4习题2.1HTMLHTML是一种用来制作超文本文档的简单标记语言，Web浏览器能够自动解释超文本文件并且按照一定的格式显示出来。只能实现静态页面的设计。2.1.1HTML基本语法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.1HTML基本语法标记文档内容/标记标记属性1=属性值1属性2=属性值2……文档内容/标记例如：2.1.1HTML基本语法u重点内容/utitle我的第一个网页/titletableborder=1width=300px表格的内容/table表示文字“重点内容”用带下划线的样式显示表示当前页面的标题为“我的第一个网页”表示在浏览器上显示一个表格，表格的边框线粗细为1，表格的宽度为300px但也有些标记只需单独使用就能完整的表达意思，称之为单标记。常用的单标记主要有换行标记br、水平线标记hr等。2.1.1HTML基本语法标记标记属性1=属性值1属性2=属性值2……HTML文档分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。一个完整的HTML文件的基本格式如下：2.1.1HTML基本语法htmlheadtitle网页的标题/title/headbody文档主体，正文部分/body/html2.1.1HTML基本语法例2-1创建一个简单的HTML网页文件htmlheadmetahttp-equiv=Content-Typecontent=text/html;charset=gb2312title创建一个HTML网页文件/title/headbodybackground=backimage.jpgtext=redleftmargin=50pxtopmargin=20px我喜欢学习HTML！/body/html例2-1创建一个简单的HTML网页文件步骤如下：1)新建一个记事本文件，并输入如上HTML语句。2)执行记事本“文件”菜单下的“另存为”命令，将“保存类型”设置为“所有文件”，将文件的扩展名改为.htm或.html。单击“保存”按钮。3)打开保存成功的.htm文件，即可以看到浏览器中页面的显示效果。2.1.1HTML基本语法例2-1运行效果2.1.1HTML基本语法1.文字样式标记：包括文字的字体、字号和颜色，一般使用font标记来实现。具体格式如下：2.1.2文字段落标记fontsize=数字face=字体名color=颜色文字内容/font“size”表示字号，“数字”表示字号的大小，最大为7，最小为1，默认字号为3。“face”表示字体，默认字体为宋体。“color”表示文字的颜色，默认颜色为黑色。HTML常用颜色设置值2.1.2文字段落标记颜色英文名RRGGBB颜色英文名RRGGBB黑色Black#000000橙色Orange#FFA500银色Silver#C0C0C0浅绿色Aqua#00FFFF灰色Gray#808080深蓝色Navy#000080粉色Pink#FFC8CB黄色Yellow#FFFF00红色Red#FF0000绿色Green#008000紫色Purple#FF00FF橄榄色olive#8080002.字型标记：HTML中字型标记有很多，常用的字型标记可参见下表2.1.2文字段落标记首标记尾标记含义首标记尾标记含义b/b加粗i/i斜体u/u加下划线s/s加删除线small/small缩小big/big放大sup/sup上标sub/sub下标strong/strong特别强调address/address显示邮件地址3.段落标记有两种，分别是换段标记p/p和换行标记br。其中br属于单标记。2.1.2文字段落标记palign=对齐方式段落内容/palign指段落的对齐方式，取值为：Left(左对齐，默认)、Center(居中)和Right(右对齐)三个值中的任何一个。bodypalign=center静夜思/pp床前明月光，疑是地上霜。举头望明月，低头思故乡。/p/body2.1.2文字段落标记当需要结束一行，并且不想开始新段落时，使用br标记。br标记不管放在什么位置，都能够强制换行。一个p标记可以看成是两个换行标记brbr。bodypalign=center静夜思/pp床前明月光，疑是地上霜。br举头望明月，低头思故乡。/p/body4.水平线标记：单标记hr表示在文档当前位置画一条水平线，一般从窗口中当前行的最左端一直画到最右端；其格式为：2.1.2文字段落标记hrsize=数值color=颜色值width=数值align=对齐方式noshadesize属性设置水平线的粗细，默认值为1；color属性设置水平线的颜色；width属性设定水平线的长度，默认值是100%；align属性表示对齐方式；noshade属性不用赋值，而是直接加入标志即可使用，它是用来加入一条没有阴影的水平线。2.1.2文字段落标记5.标题标记hn：其中n为标题的等级，HTML总共提供六个等级的标题，n越小，标题字号就越大。body这是一行普通文字h1用1级标题样式显示文字/h1h2用2级标题样式显示文字/h2h3用3级标题样式显示文字/h3h4用4级标题样式显示文字/h4h5用5级标题样式显示文字/h5h6用6级标题样式显示文字/h6/body演示运行效果2.1.2文字段落标记例2-2文字段落标记的使用htmlheadtitle文字段落标记的使用/title/headbodyh1第一章诗词歌赋/h1h2第一节宋词/h2b作品原文/bbrhrwidth=75%size=2color=#800080align=leftbr2.1.2文字段落标记2.1.2文字段落标记centerfontsize=5face=仿宋_GB2312color=green水调歌头·明月几时有/font/centerbrpalign=centerb丙辰中秋，欢饮达旦sup[1]/sup，大醉，作此篇，兼怀子由。/b/ppalign=leftstrong明月几时有？把酒问青天。/strong不知天上宫阙，今夕是何年。u我欲乘风归去，又恐琼楼玉宇，高处不胜寒。/u起舞弄清影，何似在人间。/ppalign=leftsmall转朱阁，低绮户，照无眠。/small不应有恨，何事长向别时圆？i人有悲欢离合，月有阴晴圆缺，此事古难全。/i但愿人长久，千里共婵娟。/pb注释：/bbr2.1.2文字段落标记hrwidth=75%size=2color=#800080align=leftbrsmall[1]达旦：至早晨；到清晨。/smallbrhrsize=1color=blackalign=leftbr如有学习上的问题，请联系[e-mail]/address/body/html例2-2运行效果2.1.2文字段落标记2.1.3图像标记如果希望将一幅图片插入到网页中，可以使用图片标记img。图片标记是一个单标记。其基本格式为：imgsrc=图片文件名alt=简要说明width=图片的宽度height=图片的高度border=边框宽度hspace=水平方向空白vspace=垂直方向空白/2.1.3图像标记例如：下面是一段在页面中插入图片的代码。代码中用到了p标记和center标记来设置图片水平方向的对齐方式。htmlheadtitle插入图片/title/headbodypalign=rightimgsrc=1.jpgwidth=200height=190alt=图片1border=1//pcenterimgsrc=2.jpgwidth=182height=194alt=图片2//center/table/body/html演示运行效果2.1.3图像标记2.1.4超级链接标记超链接是指从一个网页指向一个目标的连接关系。它包含两部分内容：链接目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个电子邮件地址。超链接的对象，可以是一段文本或者是一个图片。1.文字链接：指的是超链接的对象是一段文本，跳转的目标是当前网站的另外一个网页或者另一个网站的网址。其格式为：ahref=urltarget=打开窗口方式热点文本/ahref：是超链接引用，url为链接要转到的目标网页。target：定义链接到目标资源时，打开窗口的方式。2.1.4超级链接标记对于超链接的文字的颜色也可以通过一些属性来设置，具体为：link：表示尚未被访问过的超链接的颜色，默认为蓝色。vlink：表示曾经访问过的超链接的颜色，默认为棕红色。alink：表示超文本链接被访问瞬间的颜色，默认为蓝色。2.1.4超级链接标记ahref=index.aspx首页/aahref==_blank百度/a2.图像链接：如果希望使用图片作为超链接的对象，格式为：ahref=urltarget=打开窗口方式imgsrc=路径/图片文件名/aurl：点击链接后要转到的目标网页。target：打开窗口的方式。scr:：包括路径在内的图片的文件名。2.1.4超级链接标记ahref==Images/1.jpg/a3.电子邮件链接的格式为：ahref=mailto:email文字/aemail：为接收邮件的邮箱。2.1.4超级链接标记ahref=mailto:[e-mail]联系我们/a4.锚点链接：如果一个页面的内容过多，导致页面过长，用户需要不停地拖动滚动条来查看文档中的内容，为了方便用户阅读过长的页面内容，可以使用锚点链接。aname=”锚名”文字/aname属性用来创建一个命名的锚。锚名相当于文章中的一个标记。2.1.4超级链接标记ahref=”#锚名”文字/a锚点创建好后，就可以在其他位置进行超链接了。如果超链接到本文档的锚点，格式为：2.1.4超级链接标记如果超链接到其他页面的锚点，格式为：ahref=”跳转页面的url#锚名”文字/atableborder=valuebordercolor=valuewidth=valueheight=valuecellspacing=valuecellpadding=valuealign=水平对齐方式captionalign=水平对齐方式valign=垂直对齐方式标题/captiontrth