(精品).NET网络程序设计（2-HTML）.ppt

《(精品).NET网络程序设计（2-HTML）.ppt》由会员分享，可在线阅读，更多相关《(精品).NET网络程序设计（2-HTML）.ppt（65页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、26 十二月 2022信息技术系 秦学礼1WEB程序设计技术程序设计技术ASP.NET（2-HTML2-HTML）E_mail:QQQ：20288992ASP.NET 程序设计程序设计 信息技术系 秦学礼226 十二月 2022HTML语言的基本语法1 HTML2 HTML的文档结构标记3 页面文本的排版标记4 Table表格5 文件之间的链接6 多窗口页面（Frame）7 表单（FROM)8 其他标记ASP.NET 程序设计程序设计 信息技术系 秦学礼326 十二月 20221 HTMLn万维网(World Wide We b，W W W)起源于设在瑞士的C E R N实验室。Tim Ber

2、ners-Lee及其开发小组，花费大量的时间，研究建立了一种以一定格式传输信息的方法，这就是众所周知的超文本传输协议(简称为H T T P)。该协议使用了超文本标记语言(H T M L)。nH T M L设计简单，结构灵活，允许在We b浏览器及其他兼容的应用程序中显示文本及图像。文档的某些部分可以成为超链接，即当其被选择时，可以显示不同的页面或同一页面的不同部分。的不同部分。ASP.NET 程序设计程序设计 信息技术系 秦学礼426 十二月 2022HTMLn标记语言是由特定字符分隔的基本元素特定字符分隔的基本元素，指定基本元素中所包含的文本或其他条目如何显示。例如This is some

3、Emphasized text。nH T M L是一种广泛基于标准通用标记语言(Standard Generalized Makeup Language，S G M L)的标记语言。S G M L是描述语言的一种方法，其本身并不是用来创建网页的语言。ASP.NET 程序设计程序设计 信息技术系 秦学礼526 十二月 2022什么是什么是HTML文件？文件？nHTML文件是能被网络浏览器读取、运行生成网页文件。这些HTML文件存储在分布于世界各地的计算机的硬盘上，而传输协议能把这些文件从一台计算机传输到另一台计算机。ASP.NET 程序设计程序设计 信息技术系 秦学礼626 十二月 2022HT

4、ML标记nHTML不是一种编程语言，而是一种描述性的标注语言。n是用标记符定义HTML文档的功能和信息。n浏览器读入HTML文档后按规则解释文档中的标记，执行相应的动作。ASP.NET 程序设计程序设计 信息技术系 秦学礼726 十二月 20222 HTML的文档结构标记nHTML文档可以自己编写。nHTML文档可以用编辑器（FRONTPAGE、DREAMWEAVER)生成。nHTML标记包含在一对中。nHTML标记是成对出现（少数例外）。极少数标记单独出现，如：(换行).n标记不区分字符的大小写。nHTML文档的扩展名：htm/htmlnHTML文档是一个纯文本的，可用任何编辑工具编辑。AS

5、P.NET 程序设计程序设计 信息技术系 秦学礼826 十二月 2022HTML的文档结构n2_1.HTM 欢迎同学们 同学们下午好!ASP.NET 程序设计程序设计 信息技术系 秦学礼926 十二月 2022HTML 标记.n一个页面的开始。n不一定是一个文件的开始，文件开始有初始化代码。n不一定是文件的结尾，后面可能还有其他ASP.NET代码。ASP.NET 程序设计程序设计 信息技术系 秦学礼1026 十二月 2022HEAD 标记n页面的第2层标记。n包含标题信息。n必须在BODY标记开始之前结束。ASP.NET 程序设计程序设计 信息技术系 秦学礼1126 十二月 2022TITLE

6、 标记 n页面的名称。标题 title 元素含有你的文档标题并且作为一种全局上下文识别其内容.标题通常显示在浏览器窗口的某个位置(通常显示在浏览器的左上方),而不是在文本区.标题的选择应当是描述性的,独特的和相对简洁的。ASP.NET 程序设计程序设计 信息技术系 秦学礼1226 十二月 2022TITLE 标记n这是出现在浏览器左上角的文字，它是一个网站最先被访问者看到的信息。同时，许多搜索引擎在INTERNET上自动进行网站搜索时所记录下来的就包括了页面标题，关键字等。因此，页面标题对于网站的推广，增加访问者对网站浏览的兴趣有很大的帮助。可在网站的主页面添加标题信息。ASP.NET 程序设

7、计程序设计 信息技术系 秦学礼1326 十二月 2022META标签n使用META标签是简单而且有效地宣传网站的方法。不需要去搜索引擎注册就可以让客户搜索到您的网站。将下面这段代码加入到网页标签中。ncontent里边填写关键词。ASP.NET 程序设计程序设计 信息技术系 秦学礼1426 十二月 2022网站描述n网站描述出现于搜索引擎的查找结果中。它很大程度上决定了访问者是否能够通过搜索引擎的查找结果来访问您的网站。因此，网站描述应当覆盖了关键字所定义的范围，并且有所侧重，突出网站重点，加重描述语句对访问者的吸引力。应当提取出20个左右最重要的关键字，根据实际工作中用户最关心的信息和网站所

8、要重点提供的信息，仔细地编写一段包括空格均不超过250字的描述文字。ASP.NET 程序设计程序设计 信息技术系 秦学礼1526 十二月 2022提高网站的排名n关键词最好要大众化，跟企业文化、公司产品等紧密相关。并且尽量多写一些。比如公司生产的是电冰箱。您可以写：电冰箱，家电，电器等等。尽量将产品大类的名称都写上去。另外名称要写全，比如“电冰箱”不要简写“冰箱”。特别是一些英文单词，切记要在某些关键词后面加”s”。比如refrigeratorrefrigerators。这里有个技巧，您可以将一些相对关键的词重复，这样可以提高网站的排名。ASP.NET 程序设计程序设计 信息技术系 秦学礼16

9、26 十二月 2022BODY 标记n页面的内容。HTML 文档的第二部分，也是最大的部分,它含有你的文档的内容(显示在你的浏览器窗口文本区的部分)。页面中的所有其它的HTML标记都在这对标记之间。n有六个参数（属性）。ASP.NET 程序设计程序设计 信息技术系 秦学礼1726 十二月 2022BODY 标记参数nBACKGROUND 参数指定一幅图像作为页面的背景图像。添加背景图像 国画精髓 例 2_2.htmASP.NET 程序设计程序设计 信息技术系 秦学礼1826 十二月 2022其他5个参数nBGCOLOR:指定页面的背景颜色。nTEXT：指定文本的默认颜色。nALINK：指定单击

10、超级连接的连接文字的颜色。nLINK:指定超级连接没有被单击的颜色。nVLINK：指定超级连接没有被单击时的颜色。ASP.NET 程序设计程序设计 信息技术系 秦学礼1926 十二月 2022注释标记nn注释文本不会显示在用户的浏览器窗口。n如果是程序代码，即使是放在注释标记内也会被执行。n例：nCOMMENT标记：注释文本较长时用。ASP.NET 程序设计程序设计 信息技术系 秦学礼2026 十二月 20223 页面文本的排版标记nBASEFONT 标记nFONT 标记 nSIZE参数的数值范围1-7。ASP.NET 程序设计程序设计 信息技术系 秦学礼2126 十二月 2022例题 选择不

11、同的字体和颜色 选择不同的字体和颜色 选择不同的字体和颜色 选择不同的字体和颜色ASP.NET 程序设计程序设计 信息技术系 秦学礼2226 十二月 2022H 标记nH 标记可以指定标记之间的文本的大小，有H1-H6.n格式:文本 文本 nALIGN(排列）参数：CONTER,LEFT,RIGHT ALIGN=“LEFT”ASP.NET 程序设计程序设计 信息技术系 秦学礼2326 十二月 2022其他标记nB标记:文本加粗nI标记:文本设置为斜体nU标记:文本加下划线nS标记:文本加删除线ASP.NET 程序设计程序设计 信息技术系 秦学礼2426 十二月 2022例题2_4.htm ht

12、mlNew Page 1New Page 1 l l1 ASP.NET1 ASP.NET的特点的特点/p font size=1 12 ASP.NET2 ASP.NET的运行环境和配置的运行环境和配置/s font size=1 13 ASP.NET Web3 ASP.NET Web页面的结构页面的结构/b font size=1 14 ASP.NET 4 ASP.NET 程序设计程序设计/uASP.NET 程序设计程序设计 信息技术系 秦学礼2526 十二月 2022排版标记nBR 标记：添加一个换行符，单个使用nHR标记：在页面上画一条水平线，可单个使用格式：无阴影ASP.NET 程序设计

13、程序设计 信息技术系 秦学礼2626 十二月 2022上下标标记nSUB下标记：下标文字nSUP上标记：上标文字2H2+O2=2H2OX2+Y2=(X+Y)2-2XYASP.NET 程序设计程序设计 信息技术系 秦学礼2726 十二月 2022不编号列表不编号列表Unnumbered Listsn制作一个不编号的，公告式列表,标记 独立的项 .n下面是一个有三个项的列表:n apples bananas grapefruit n输出形式为:apples bananas grapefruit ASP.NET 程序设计程序设计 信息技术系 秦学礼2826 十二月 2022编号列表编号列表Numbe

14、red Listsn编号列表(也称为 有序列表ordered list)格式：oranges peaches grapes 输出为:1.oranges 2.peaches 3.grapes ASP.NET 程序设计程序设计 信息技术系 秦学礼2926 十二月 20224 Table表格n对文本可以设置字体，设置上标下标、对齐方式，将其换行、分成段落，还可以形成列表，但是对于文本具体显示在哪行哪列，不能够一进行控制。n使用了表格的标记功能就可以加强对文本的控制，因此说表格是所有编辑方式中最灵活的。下面我们就来介绍关于表格的标记。ASP.NET 程序设计程序设计 信息技术系 秦学礼3026 十二月

15、 2022TABLE标记n TABLE标记标志着一个表格的开始和结束，表格的所有定义都包含在这对标记之间,其格式如下：定义表格行、列及内容 可用参数定义表格的位置、背景、边框等。ASP.NET 程序设计程序设计 信息技术系 秦学礼3126 十二月 2022TABLE参数（1）nALIGN参数：设置表格与页面的对齐方式，可取值为LEFT（左对齐）、RIGHT（右 对齐）、CENTER（居中）。nBCAKGROUND参数：为表格指定一幅背景图像。nBGCOLOR参数：为表格指定背景色。nBORDER：设定表格单元格四周的边界宽度，如果此参数设置为0，那么表格不显示边界。ASP.NET 程序设计程序

16、设计 信息技术系 秦学礼3226 十二月 2022TABLE参数（2）n WIDTH参数：设置整个表格的宽度，默认情况下以像素为单位，也可以使用百分比的方式设置，这个百分比是表格宽度和浏览器显示宽度的百分比。nCOLS参数：设定表格的列数，当表格自动计算你创建的列数时，则不需要设置。ASP.NET 程序设计程序设计 信息技术系 秦学礼3326 十二月 2022TR 标记nTR 标记：表示表格的一行开始和结束。n参数:ALIGN参数：行中的文本在单元格中的对齐方式，可取值为LEFT（左对齐）、RIGHT（右 对齐）、CENTER（居中）。BCAKGROUND参数：指定单元格背景图像。BGCOLO

17、R参数：指定单元格背景色。ASP.NET 程序设计程序设计 信息技术系 秦学礼3426 十二月 2022TD 标记nTD 标记：指定单元格的内容。n例子：2_6.HTMASP.NET 程序设计程序设计 信息技术系 秦学礼3526 十二月 20225 文件之间的链接n链接分为本地链接、URL链接和目录链接。在各种链接的各个要素中，资源地址是最重要的，一旦路径上出现差错，该资源就无法从用户端取得。n超文本中的链接是其最重要的特性之一，用户可以从一个页面转跳到另外的页面、图像、WEB服务器。n格式：链接文字ASP.NET 程序设计程序设计 信息技术系 秦学礼3626 十二月 2022本地链接n 对同

18、一台机器上的不同文件进行的链接称为本地链接，它使用UNIX或WINDOS系统中文件路径的表示方法，采用绝对路径或相对路径来指示一个文件。ASP.NET 程序设计程序设计 信息技术系 秦学礼3726 十二月 2022链接的表示方式n以绝对路径表示：A HREF”D:ASPHTMLINDEX.HTM”文件链接An以相对路径表示：A HREF”INDEX.HTM”文件的链接An链接上一目录中的文件：A HREF=“./INTER/INDEX.HTM”上级地址/An一般情况下，我们是不用绝对路径的，因为我们的资源常常是放在网上供其他人测览的。写成绝对路径，当我们把整个目录中的所有文件移植到服务器上时，

19、带有C：的资源地址用户将无法访问到。所以我们最好写成相对路径，这样就避免了重新修改文件资源路径的麻烦。ASP.NET 程序设计程序设计 信息技术系 秦学礼3826 十二月 2022URL链接(1)n 如果链接的文件在其它服务器上，我们就要知道所指向的文件是采用的哪一种URL地址。URL的意思是统一资源定位器，通过它可以以多种通讯协议与外界沟通来存取信息。URL链接的形式是：协议名：主机域名路径文件名协议名：主机域名路径文件名协议包括：file：本地系统文件。http：WWW服务器。ftp：ftp服务器。ASP.NET 程序设计程序设计 信息技术系 秦学礼3926 十二月 2022URL链接(2

20、)telnet：基于TELNET的协议。mailto：电子邮件。news：Usenet新闻组。写在HTML文件中,我们这样来表达一个URL地址：A HREF=“http:/WWW HREF=“ftp:/”育英学院 A HREF=“MAILTO:QXL126.COM”ASP.NET 程序设计程序设计 信息技术系 秦学礼4026 十二月 2022 目标链接n实现在文件或页面内链接。大文件或帮助文件。定义标记格式：A NAME=“#NAME”例：A NAME=“#ML1”1.序言定位格式：A HREF=“#NAME”例：A HREF=“#ML1”1.序言 ASP.NET 程序设计程序设计 信息技术系

21、 秦学礼4126 十二月 2022嵌入行中的图象嵌入行中的图象n多数 Web 浏览器可以显示嵌入行中的X 位图(XBM),GIF,或 JPEG 格式的图象.格式：ALT=FORWARD HEIGHT=32 WIDTH=32 其中 图象名 是图象文件的URL.n URLs 的语法格式和链接HREF使用的格式相同.如果图象文件是GIF 文件,则图象名中的文件名部分必须以.gif结束.JPEG 图象文件必须以.jpg或.jpeg结束.n ALT=FORWARD HEIGHT=32 WIDTH=32 ASP.NET 程序设计程序设计 信息技术系 秦学礼4226 十二月 2022其他链接n使用同样的语法

22、链接外部动画和声音.唯一的不同在于链接文件的扩展名.例如,n 指明一个到QuickTime 电影的链接.ASP.NET 程序设计程序设计 信息技术系 秦学礼4326 十二月 2022链接音乐文件n ASP.NET 程序设计程序设计 信息技术系 秦学礼4426 十二月 2022链接下载文件n下载WORD.DOC 指明一个到word文件的链接.n例子：2_7.HTMASP.NET 程序设计程序设计 信息技术系 秦学礼4526 十二月 2022建立新窗口n将主页的内容显示在一个新的窗口。格式：ASP.NET 程序设计程序设计 信息技术系 秦学礼4626 十二月 2022通常的文件类型和其扩展名n文件

23、类型文件类型 扩展名扩展名纯文本 text .txtHTML 文档 .htm/.htmlGIF 图象 .gifX 位图图象 .xbmJPEG 图象 .jpg 或.jpegAU 声音文件 .au/.rmWAV 声音文件 .wavQuickTime 电影 .movASP.NET 程序设计程序设计 信息技术系 秦学礼4726 十二月 20226 框架（多窗口页面）（Frame）n 框架用于将页面分区，并且每一个区域对应着不同的HTML文档。nFRAMESET标记：用于指定页面中水平和垂直框架的数目，其格式如下所示：框架的HTML源文件ASP.NET 程序设计程序设计 信息技术系 秦学礼4826 十二

24、月 2022FRAMESET标记参数n FRAMESET标记有两个参数ROWS和 COLS。如果页面被框架分区，那么页面就被框架分成了表格。如果页面被窗口分成了左右两部分，即两列一行，那么就不用设置COLS参数了，只需在ROWS参数的第一个值中指定左边的框架的宽度，在第二个值中指定右边的框架相对于树览器显示的百分比。ASP.NET 程序设计程序设计 信息技术系 秦学礼4926 十二月 2022FRAMESET标记参数（2）n如果不止一行（也就是两行），就需要设置COLS参数。COLS参数也可以设置两个值，第一个值指定第一行的大小，第二个值指定第二行的大小相对与测览器屏幕尺寸的百分比。n 一个页

25、面最多被设置成四个框架（两行两列），四个区域的大小就用COLS参数、ROWS参数设定。但是框架可以嵌套，一个框架中又可以最多嵌套四个框架，所以页面可以被分成比较复杂的局面。nFRAMEBORDER参数指定框架是否有边框，取值为YES或NO。nBORDER参数指定框架边框的宽度。n2_8.htmASP.NET 程序设计程序设计 信息技术系 秦学礼5026 十二月 2022FRAME标记nFRAME标记只是一个框架，必须在FRAMESET标记内使用，其格式如下所示：nNAME 参数指定框架的名称。nSCROLLING参数指定框架是否有滚动条，取值有YES（有滚动条）、NO（没有滚动条）、ATUO（

26、自动设置），或者不设置该参数，使用默认值。n如果指定 NORESIZE，那么用尸不可以调整框架的大小。ASP.NET 程序设计程序设计 信息技术系 秦学礼5126 十二月 20227表单(FORM)n页面form 使读者可以向 Web 服务器返回信息以执行某种动作.例如,假设你想查找某一人的邮件地址，可以在页面输入他/她的姓名,form发送的信息到服务器，执行数据库查找结果返回.nFORM标记，用于表示一个表单的开始和结束，并通知浏览器处理表单的内容。ASP.NET 程序设计程序设计 信息技术系 秦学礼5226 十二月 2022FORM格式 例子：ASP.NET 程序设计程序设计 信息技术系

27、秦学礼5326 十二月 2022FORM参数nNAME:表单名称nMETHOD：发送表单信息的方式GET:通过URL发送表单信息POST：通过HTTP 首标发送表单信息nACTION 提供对标单处理的文件的路经及名称。n2_9.htmASP.NET 程序设计程序设计 信息技术系 秦学礼5426 十二月 2022INPUT标记 插入标单对象nINPUT标记指示浏览器放置一个容许表单接收用户信息的对象。n文本框格式：INPUT TYPE=“TEXT”NAME=“文本框名”SIZE=“文本框宽度”VALUE=“文本框初值”MAXLENGTH=“最大字符数”ASP.NET 程序设计程序设计 信息技术系

28、 秦学礼5526 十二月 2022多行文本框n格式 TEXTAREA NAME=“文本框名”COLS=“文本框列数”ROWS=“文本框行数”文本框的初始字符 n2_10.htmASP.NET 程序设计程序设计 信息技术系 秦学礼5626 十二月 2022密码文本框格式：INPUT TYPE=“PASSWORD”NAME=“文本框名”SIZE=“文本框宽度”VALUE=“文本框初值”MAXLENGTH=“最大字符数”nPASS.HTMASP.NET 程序设计程序设计 信息技术系 秦学礼5726 十二月 2022列表框n格式：列表项内容参数：NAME:列表框的名称 SIZE ：列表框得了表项 MU

29、LTIPLE：可以多选n例子：2_11.HTMASP.NET 程序设计程序设计 信息技术系 秦学礼5826 十二月 2022提交按钮n格式：ASP.NET 程序设计程序设计 信息技术系 秦学礼5926 十二月 2022重置按钮n格式：ASP.NET 程序设计程序设计 信息技术系 秦学礼6026 十二月 2022单选按钮n格式：CHECKED参数：某一按钮带有这个参数，该按钮为缺省按钮。ASP.NET 程序设计程序设计 信息技术系 秦学礼6126 十二月 20222_12.htm单选按钮选择国家：中国 美国 德国 法国 ASP.NET 程序设计程序设计 信息技术系 秦学礼6226 十二月 202

30、2复选按钮n格式：INPUT TYPE=“CHECKBOX”NAME=“按钮名称”VALUE=“按钮标签”CHECKEDCHECKED参数：某一按钮带有这个参数，该按钮为缺省按钮。n2_13.htmASP.NET 程序设计程序设计 信息技术系 秦学礼6326 十二月 20228 其他标记nSCRIPT 标记需要处理的脚本参数：LANGUAGE,选择nJavascriptnVB.netnC#例子：ASP.NET 程序设计程序设计 信息技术系 秦学礼6426 十二月 2022BGSOUNDnBGSOUND 标记：设置页面的背景音乐ASP.NET 程序设计程序设计 信息技术系 秦学礼6526 十二月 2022小结nHTML标记写在之间，一般成对使用。n页面上的文本可以使用HTML标记进行排版。n要想将文本精确定位，需要使用表格。n页面可以使用框架分区。n表示页面中经常使用的，用表单中的对象来收集一组信息。n表单对享有文本框、按钮、列表框和图像框。n设置超级链接。