《ASP.NET动态网站开发教程（第二版） 教学课件 ppt 作者 978-7-302-21158-7 ch02》由会员分享，可在线阅读，更多相关《ASP.NET动态网站开发教程（第二版） 教学课件 ppt 作者 978-7-302-21158-7 ch02（59页珍藏版）》请在金锄头文库上搜索。
1、2019年5月23日,第1页,第2章 HTML和XHTML,ASP.NET动态网站开发教程（第二版） 清华大学出版社,2019年5月23日,第2页,教学目标,理解HTML语言的特点 掌握HTML文档的结构 掌握设置文字的方法 掌握加入超链接的方法 掌握插入图片的方法 掌握表格的建立方法 掌握表单的建立方法 了解XHTML语言的特点,2019年5月23日,第3页,第2章 HTML和XHTML,2.1 HTML语言简介 2.2 设置文字 2.3 超链接 2.4 插入图像 2.5 表格 2.6 表单 2.7 XHTML,2019年5月23日,第4页,2.1 HTML语言简介,2.1.1 Web标准
2、2.1.2 HTML的起源和演变 2.1.3 HTML语言的特点 2.1.4 HTML标记基础 2.1.5 HTML文档的结构,2019年5月23日,第5页,2.1.1 Web标准,W3C 是World Wide Web Consortium的缩写，即万维网联盟。是在1994年后期，由Berners-Lee创立的，它的一个主要目标是以HTML（Hypertext Markup Language，超文本标记语言）开始，开发和推广Web技术标准。从1998年开始，为了让软件生产商重视这些规范，W3C将“推荐规范”重新命名为“Web标准”。像CSS、XHTML和XML，都是由W3C制定的Web标准。
3、,2019年5月23日,第6页,2.1.2 HTML的起源和演变,第一个HTML标准HTML 2.0发布于1995年。随后于1997年早期发布了HTML 3.2。 HTML的最新版本是HTML 4.01，这是在1999年末由W3C制定的，是HTML最后的版本。,2019年5月23日,第7页,2.1.3 HTML语言的特点,HTML不是一种程序语言，而是一种标记语言。它不同于我们平时看到的VB、C+这类编程语言，实际上它只是在一些组成网页的对象（如文本、图片、超链接）中加入各种标记，从而使这些对象以标记所定义的样式来显示。 任何文本编辑器都可以编辑它，只要能将文件保存为ASCII纯文本格式即可，
4、如记事本、Word等。当然使用专业的网页编辑软件会更为方便。,2019年5月23日,第8页,2.1.3 HTML语言的特点,需要使用Web浏览器。所有网页，都是通过浏览器对HTML代码的解释而形成的，浏览器就相当于HTML代码的翻译程序，负责解释HTML代码中各种符号的含义。如文字以什么颜色显示、图片的大小是多少。 HTML语言独立于各种平台。HTML语言目前已成为各种类型浏览器的通用标准，它能独立于各种操作系统平台。,2019年5月23日,第9页,2.1.4 HTML标记基础,标记具有以下特点： 所有的标记都必须用尖括号“”括起来。 大部分标记是成对出现的，包括开始标记和结束标记。开始标记和
5、相应的结束标记定义了标记所影响的范围。结束标记和开始标记名称相同，但结束标记必须以一个斜线符号“/”开头。,2019年5月23日,第10页,2.1.4 HTML标记基础,所有被标记包围的对象，如文本、图像、表格等都按照标记所定义的格式显示。 少数标记允许只有开始标记，没有结束标记。如：段落标记，换行标记。 标记不区分大小写，默认情况下，都使用小写字母表示。,2019年5月23日,第11页,2.1.5 HTML文档的结构,HTML文档的基本结构如下： 头部信息 主体内容 ,2019年5月23日,第12页,1.HTML标记,HTML标记是文档全部内容的容器。是开始标记，表示一个HTML文档的开始；
6、是结束标记，表示一个HTML文档的结束，其他所有HTML代码都位于这两个标记之间。,2019年5月23日,第13页,2. 头部标记：,头部标记用于提供各种与网页有关的信息。在头部标记中，可以使用和标记来指定网页的标题；使用标记设置页面关键字、设定页面字符集、刷新页面等；使用和标记来定义CSS样式表；使用和标记来插入脚本等。,2019年5月23日,第14页,3.正文标记：,正文标记之间的部分是HTML文档的主要部分，包含了文档的内容，文本、图像、动画、超链接等均位于该标记对内。作为网页的主体部分，标记有很多的属性，通过这些属性可以设置网页的整体风格。 标记的属性如下表所示 。,2019年5月23
7、日,第15页,2019年5月23日,第16页,2.2 设置文字,2.2.1 段落标记和换行标记 2.2.2 文字修饰标记 2.2.3 注释标记,2019年5月23日,第17页,2.2.1 段落标记和换行标记,在HTML文件中，有专门的段落标记。段落的开始用来表示，段落的结束用来表示，也可以省略。 在HTML中，若要换到下一行，需要加入换行标记。标记没有结束标记，即不用加。,2019年5月23日,第18页,2.2.2 文字修饰标记,可以使用字体标记来设置文字的格式，将要修饰的文本放在和标记之间，并通过face、size和color属性分别来设置文本的字体、字号和颜色。,2019年5月23日,第1
8、9页,2.2.3 注释标记, 或者 注释文字 ,2019年5月23日,第20页,2.3 超链接,2.3.1 什么是URL 2.3.2 超链接的路径 2.3.3 超链接标记,2019年5月23日,第21页,2.3.1 什么是URL,URL（Uniform Resource Locator），中文名称为统一资源定位符。当我们需要访问某个网页时，只要在浏览器的地址栏输入该网页的URL，就可以找到该网页。,2019年5月23日,第22页,2.3.2 超链接的路径,路径是指从站点根文件夹或当前文件夹到目标文件所经过的路线，可以使用路径来指定超链接中目标端点的位置。路径有以下几种类型： 绝对路径：给出目标
9、文件的完整URL地址，包括传输协议。如果要链接的文件位于外部服务器上，则必须使用绝对路径。,2019年5月23日,第23页,2.3.2 超链接的路径,相对路径：以当前文档所在的位置为起点到目标文档所经过的路径。如要将当前文档与处于同一文件夹的的另一个文档链接，或者将同一站点中不同文件夹下的文档相互链接，都可以使用相对路径。采用相对路径建立两个文件之间的相互关系，可以不受站点和所处服务器位置的影响。 根相对路径：从站点根目录到被链接文件的路径。,2019年5月23日,第24页,2.3.3 超链接标记,在HTML中，可以使用和这对标记建立超链接，基本语法格式如下： 超链接文本 href：该属性是必
10、选项，用于指定单击超链接文本后要跳转到的目标网页的URL地址。,2019年5月23日,第25页,2.3.3 超链接标记,target：该属性是可选项，用于指定打开目标网页的窗口。其属性值有：“_blank”表示在新窗口打开目标网页；“_parent”表示在当前窗口的上一级窗口打开目标网页；“_self”表示在当前窗口打开目标网页，这是默认值；“_top”表示在整个浏览器窗口打开目标网页。 title：该属性也是可选项，用于指定指向超链接文本时所显示的提示文字。,2019年5月23日,第26页,2.4 插入图像,2.4.1 图像的格式 2.4.2 图像标记,2019年5月23日,第27页,2.4
11、.1 图像的格式,GIF（Graphics Interchange Format）是 Web 页面内使用最多的一种图像格式，是在 20 世纪 80 年代末由 CompuServe 开发的。GIF图像是一种压缩的8位图像文件，最多可支持 256 种颜色，这些图像一般用做插图、标志、卡通和其他大色块图像。GIF图像还有一个突出的特点，就是支持动态图、透明图和交织图。,2019年5月23日,第28页,2.4.1 图像的格式,JPEG （Joint Photographic Experts Group，联合图像专家组)是目前最优秀的数字化摄影图像的存储方式。JPEG 格式由 ISO 和 CCITT 两
12、大标准化组织共同推出，它定义了摄影图像的通用压缩编码。JPEG可支持多达16M种颜色(又称为24位真彩、全彩)，JPEG是一种以损失质量为代价的压缩方式，压缩比越高，图片质量损失越大，其典型的压缩比是41。,2019年5月23日,第29页,2.4.1 图像的格式,PNG(Portable Network Graphics)是由 GIF 发展而来的一种卓越的网络图像格式，它是一种自由开放的文件格式，不隶属于任何公司和组织。PNG 采用一种无损压缩的方式，被广泛地应用在互联网中。不过一些版本比较低的 Web 浏览器可能不支持 PNG图像格式，所以在使用这种格式的图像时一定要考虑用户的浏览器版本。,
13、2019年5月23日,第30页,2.4.2 图像标记,插入图像要使用标记，并用src属性指定图像所存放的路径。这个路径可以是相对路径，也可以是绝对路径。标记的常用属性如下表所示。,2019年5月23日,第31页,2019年5月23日,第32页,2.5 表格,2.5.1 基本的表格标记 2.5.2 设置表格的属性 2.5.3 设置跨行、跨列的表格,2019年5月23日,第33页,2.5.1 基本的表格标记,用HTML语言创建表格的方式如下： 创建表格： 创建表格的标题： 创建表格的行： 创建表格的表头： 创建表格的单元格：,2019年5月23日,第34页,表格基本结构如下： 表格的第一行的第一个
14、单元格 表格的第一行的第二个单元格 . 表格的第二行的第一个单元格 表格的第二行的第二个单元格 . . ,2019年5月23日,第35页,2.5.2 设置表格的属性,可以通过标记的下列属性对表格进行设置，如表所示。,2019年5月23日,第36页,2019年5月23日,第37页,2.5.3 设置跨行、跨列的表格,在设计网页时，有时需要设置跨行、跨列的表格，即表格中的一个单元格占用多行或者多列。 标记的rowspan属性：设置单元格在水平方向上跨越的单元格个数。 标记的colspan属性：设置单元格在垂直方向上跨越的单元格个数。,2019年5月23日,第38页,2.6 表单,2.6.1 表单标记
15、 2.6.2 标记 2.6.3 标记 2.6.4 标记,2019年5月23日,第39页,2.6.1 表单标记, 表单元素（如文本框、单选按钮、复选框、 列表框、文本区域等） ,2019年5月23日,第40页,2.6.1 表单标记,name：该属性表示表单的名称 method：该属性用来定义提交信息的方式，取值为post或get，默认为get。两者的区别是：使用get方式提交信息时，表单中的信息作为字符串自动附加在URL的后面，会将该URL和后面的参数信息在浏览器的地址栏中显示出来。get方式传输的数据量非常小，一般限制在2KB左右，但执行效率比较高。,2019年5月23日,第41页,2.6.1
16、 表单标记,使用post方式提交信息时，需要对输入的信息进行包装，存入单独的文件中（不附在URL后面），等待服务器取走，这种方式对信息量没有限制。 action：该属性用来指定处理表单数据的程序文件所在的位置，当单击提交按钮后，就将表单信息提交给该文件进行处理。,2019年5月23日,第42页,2.6.2 标记,该标记可以在表单中定义单行文本框、单选按钮、复选框等表单元素，基本语法格式如下： 不同的元素有不同的属性，详细的属性如下表所示。,2019年5月23日,第43页,2019年5月23日,第44页,2019年5月23日,第45页,2.6.3 标记,复选框和单选按钮是收集用户多重选择数据的有效方式。但是，如果可能的选择比较多，那么表单将变得很长而难以显示。在这种情况下，需要使用下拉菜单，下拉菜单用和标记来定义。 标记是和标记配合使用的，一个标记就是下拉菜单中的一项 。,2019年5月23日,第46页,2019年5月23日,第47页,2019年5月23日,第48页,2.6.4 标记,和标记用于定义一个多行文本域，常用于需要输
