Download presentation
Presentation is loading. Please wait.
1
第2章 XHTML基础知识
2
主要内容 理解什么是HTML、XML和XHTML，以及三者之间的关系 掌握动态网页的组成结构 掌握XHTML的语法规则
3
第2章 XHTML基础知识 2.1 Web基本技术 2.2 XHTML的基本格式 2.3 XHTML标记、标记属性
4
2.1 Web基本技术 HTML XML XHTML
5
2.1.1 HTML HTML（HyperText Markup Language）超文本标记语言，是制作页面文档的主要编辑语言。
HTML只是建议Web浏览器应该如何显示和排列信息，并不能精确定义格式，因此在不同的浏览器中显示的HTML文件效果会不同。
6
2.1.1 HTML HTML文件是一种纯文本文件，通常以.htm或.html作为文件扩展名。
可以用各种类型的工具来创建或者处理HTML页面，如记事本、写字板、FrontPage、Dreamweaver等
7
HTML缺陷： HTML的标记是固定的。 HTML中标记的作用只是建议浏览器用何种方式显示数据。
8
2.1.2 XML XML（eXtensible Markup language）可扩展标记语言 将网络上的文档规范化，并赋予标记一定的含义
9
2.1.2 XML XML已经在文件配置、数据存储、基于Web的B2B交易、存储矢量图形和描述分子结构等众多方面得到广泛的应用
但由于目前的浏览器对XML的支持还不够完善，XML在互联网上完全替代HTML还需要很长一段时间
10
2.1.3 XHTML XHTML（eXtensible Hypertext Markup Language）可扩展超文本标记语言。
XHTML是为了使HTML向XML顺利过渡而定义的标记语言，它以HTML为基础，采用XML严谨的语法结构 XHTML结合了部分XML的强大功能及大多数HTML的简单特性，是一种增强了的HTML,它的可扩展性和灵活性将适应未来网络应用的需求。
11
2.1.3 XHTML 目前国际上在网站设计中推崇的Web标准就是基于XHTML的应用（即通常所说的CSS＋DIV）
大部分的浏览器都可以正确地解析XHTML，即使老版本的浏览器，也将XHTML作为HTML的一个子集。
12
2.2 XHTML的基本格式 ASP.NET的文档结构 XHTML的语法规则
13
ASP.NET的文档结构 一个完整的ASP.NET页面文档是由指令、文档类型声明、代码声明、服务器代码、文本和XHTML标记等部分组成 （结合第一章建立的welcome.aspx为例演示讲解）
14
ASP.NET的文档结构 （1）指令： ASP.NET页面通常包含一些指令，允许用户指定页面的属性和配置信息，对页面进行设置。指令指定的设置，不会出现在浏览器端。 在网页设计时，ASP.NET提供“代码分离”技术 源代码放在扩展名为.aspx文件中， 将Web服务器运行代码放在另一个文件中，若此文件是由C#编写的，则文件扩展名为.cs。 指令连接的。
15
2.2.1 ASP.NET的文档结构 （2）文档类型声明 DOCTYPE
指定本文档遵从的 DTD（Document Type Definition文档类型定义）标准，同时指定了文档中的XHTML版本，可以和哪些验证工具一起使用等信息，以保证此文档与Web标准的一致。 文档类型声明是每个网页文档必需的，默认的方式为HTML 4.0
16
本例文档类型声明 DOCTYPE < ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " DOCTYPE是document type (文档类型)的缩写 “W3C//DTD XHTML 1.0 Transitional”说明此文档符合W3C制定的XHTML 1.0 规范，即声明此文档应该按照XML文档规范来配对所有标记。 “xhtml1-transitional.dtd”中的DTD是文档类型定义，包含了文档的规则，浏览器根据页面所定义的DTD来解释页面内的标识，并将其显示出来。
17
2.2.1 ASP.NET的文档结构 （3）代码声明： 包含ASP.NET页面的所有应用逻辑和全局变量声明、子例程和函数。
页面的代码声明位于 <script>…</script>标记中。
18
ASP.NET的文档结构 （4）服务器代码 大多数 ASP.NET 页面包含处理页面时在服务器上运行的代码。页面的代码位于 script 标记中，该标记中的开始标记包含 runat="server" 属性。 本例中的<script runat="server">，说明页面运行时，ASP.NET 将此标记标识为服务器控件，并使其可用于服务器代码。
19
2.2.1 ASP.NET的文档结构 （5）文本和XHTML标记：
页面的文本部分用XHTML标记来实现，这一部分结构应完全符合HTML的文件结构。 一个最基本的HTML网页结构由三个部分构成： <html> <head> <title>标题内容</title> </head> <body> 主要内容 </body> </html>
20
（5）文本和XHTML标记： <html >…</html>: 整个HTML文件的起止标记
在XHTML代码中使用了<html html xmlns=" 其中的xmlns是XHTML namespace的缩写，即XHTML命名空间，用来声明网页内所用到的标记是属于哪个名称空间的。 本例中，指定HTML的标记名称空间为 ，这属于XML 1.0的写法。说明整个网页标记应符合XHTML规范。
21
（5）文本和XHTML标记： <head>…</head>: HTML头部文件。
头部文件中包含页面传递给浏览器的信息，这些信息作为一个单独的部分，不是网页的主体内容 在头部文件中可以设置页面的标题、关键字、外部链接和脚本语言等内容：如用<title>…</title>标记来设置网页的标题，用<script >…</script>标记来插入脚本等
22
（5）文本和XHTML标记： <body>…</body>: 文档内容部分。
23
2.2.2 XHTML的语法规则 ⑴ UTF-8之外的编码，文档必须具有XML声明
当文档的字符编码是默认的UTF-8之外的编码时，编程人员必须在XHTML页面中添加一个XML声明并指定代码。 例如：<? xml version=”1.0” encoding=”iso ”?>
24
2.2.2 XHTML的语法规则 (2) HTML标记之前必须使用DOCTYPE声明
XHTML 1.0提供了3种DTD声明供选择，DOCTYPE声明必须引用其中一种类型： Transitional（过渡型）：可以使用符合HTML4.0标准的标记，但是必须符合XHTML的语法。是ASP.NET默认文档类型定义 声明代码为：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " Strict（严格型） Frameset（框架型）
25
2.2.2 XHTML的语法规则 (3) 页面的html标记必须指定命名空间 html标记必须指定XHTML命名空间
即将namespace属性添加到html标记中。 如例子中的<html html xmlns="
26
2.2.2 XHTML的语法规则 (4) 文档必须包含完整的结构标记 文档必须包含head，title和body结构标记
框架集文档必须包含head，title和frameset结构标记。
27
2.2.2 XHTML的语法规则 (5) 标记必须正确嵌套 XHTML要求有严谨的结构，文档中的所有标记必须按顺序正确嵌套，例如：
<p>This is a <i> bad example.</p></i>是错误的； <p>This is a <i> good example.</i></p>是正确的。 也就是说，一层一层的嵌套必须是严格对称。
28
2.2.2 XHTML的语法规则 (6) 标记必须成对使用，若是单独不成对的标记，在标记最后加/>结束。如：
<br>是错误的； <br />是正确的。
29
2.2.2 XHTML的语法规则 (7)所有标记名称和属性的名字都必须使用小写
与HTML不同，XHTML对大小写是敏感的，XHTML要求所有的标记和属性的名字都必须使用小写。 <title>和<TITLE>在XHTML是不同的标记。
30
2.2.2 XHTML的语法规则 (8) 属性值必须用引号""括起来
在HTML中，不要求给属性值加引号，但是在XHTML中，属性值必须被加引号。 例如:<height=80> 必须修改为：<height="80"> 特殊情况，若用户需要在属性值里使用双引号，可以使用&apos；表示， 例如：<alt="say'hello'">
31
2.2.2 XHTML的语法规则 (9) 属性不允许简写，每个属性必须赋值 XHTML规定所有属性都必须有一个值，没有值的就重复本身。
例如：<input type="checkbox" name="shirt" value="medium" checked> 必须修改为： <input type="checkbox" name="shirt" value="medium" checked="checked">
32
2.2.2 XHTML的语法规则 (10) 使用id替代name属性 (11) 图片必须有说明文字
每个图片标记必须有ALT说明文字。即必须对img和area标记应用文字说明alt=“说明”属性。 如：<img src="fish.jpg" alt="big fish" />
33
2.2.2 XHTML的语法规则 (12) 不要在注释内容中使“--”
例如下面的代码是无效的： <!--这里是注释 这里是注释--> 可以用等号或者空格替换内部的虚线，如：<!--这里是注释====这里是注释--> 是正确的。
34
2.3 XHTML标记、标记属性 2.3.1 主体标记<body>…</body>
2.3.2 注释标记<!--注释内容-- > 2.3.3 分层标记<div>…</div> 2.3.4 文本和格式标记 2.3.5 表格标记 2.3.6 超链接标记<a>…</a> 2.3.7 图像标记<img />
35
2.3 XHTML标记、标记属性 标记（Tags）是指定界符（一对尖括号）和定界符括起来的文本，用来控制数据在网页中的编排方式，告诉应用程序（例如浏览器）以何种格式表现标记之间的文字。 当需要对网页某处内容的格式进行编排时，只要把相应的标记放置在该内容之前，浏览器就会以标记定义的方式显示网页的内容。 标记控制文字显示的语法为： <标记名称> 需进行格式控制的文字 </标记名称>
36
2.3 XHTML标记、标记属性 在XHTML标记中，还可以通过设定一些属性，来描述标记的外观和行为方式，以及内在表现，以便对文字编排进行更细微的控制。 几乎所有的标记都有自己的属性。 例如style="text-align:center”，其中，style就是标记的属性，style的值设置文本格式为居中对齐。 使用标记符有如下一些注意事项： 任何标记都用“<”和“>”括起来，一般情况下，标记是成对出现的。 标记名与“<”之间不能有空格。 某些标记要加上属性，而属性只能加于起始标记中。格式为： <标记名 属性名=属性值 属性名=属性值 …> 网页内容 </标记名>
37
2.3.1主体标记<body>…</body>
主体标记之间定义了网页的所有的显示内容。 网页默认的显示格式为：白色背景，12像素黑色Times New Roman字体。 在XHTML中，<body>标记用属性style来设置样式，如设置字体的大小、颜色、页面的背景色和背景图等。格式为： <标记 style=”样式1：值1；样式2：值2；……”> 其中，样式与值用冒号分隔，如果style属性中包含多个样式，各个样式之间用分号隔开。
38
2.3.1主体标记<body>…</body>
style属性常用的样式有： background-color：设置网页的背景颜色，默认为白色背景 color：设置网页中字体的颜色，默认颜色为黑色 font-family：设置网页中字体的名称，如宋体、楷体、黑体等 font-size：设置网页中字体的大小 text-align：设置网页中文本的对齐方式，常用有3种不同的取值：left（左对齐，默认对齐方式）、right（右对齐）、center（居中对齐） 例如：<body style=”font-family:宋体；color:blue”>，设置网页字体为宋体，字体的颜色为蓝色
39
2.3.2 注释标记<!--注释内容-- >
浏览器会自动忽略注释标记中的文字（可以是单行也可以是多行）而不显示。 注释标记常用在比较复杂或多人合作设计的页面中，为代码部分加上说明，方便日后修改，增加页面的可读性和可维护性。
40
2.3.3 分层标记<div>…</div>
分层标记用来排版大块的XHTML段落，为XHTML页面内大块（block-level）的内容提供结构和背景的标记。 可用style属性，在其中加入许多其他样式，以实现对其中包含元素的版面设置。 div标记除了可以作为文本编辑功能外，还可以用作容器标记，将按钮、图片、文本框等各种标记放在div里面作为它的子对象元素处理。
41
2.3.4 文本和格式标记 (1) 标题字体大小标记 <hn>…</hn>
设定网页的标题格式。由大至小，有6种设置标题格式的标记：<h1>、<h2>、<h3>、<h4>、<h5>和<h6>。
42
2.3.4 文本和格式标记 (2) 字体的加粗、斜体和下划线标记： <b>…</b>标记：以加粗字的形式输出文本
<i>…</i>标记：以斜体字的形式输出文本 <u>…</u>标记：以下划线形式输出文本
43
2.3.4 文本和格式标记 (3) 段落标记 <p>…</p>
预格式化标记<pre>…</pre> 预格式化标记<pre>…</pre>使标记之间的文本信息能够在浏览器中按照原格式毫无变化的输出。它可以使浏览器中显示的内容与代码中输入的文本信息格式完全一样。
44
2.3.4 文本和格式标记 (4) 换行标记<br />
<br / >用于添加一个回车换行，该标记没有结束标记,故在XHTML中以</>结束。在编写XHTML时，如果在文件中用回车键分开了某一段文字，当在浏览器中显示时，浏览器会忽略源代码中的换行，而并不会显示换行的效果。若要显示网页中的文字换行效果，必须在文件中使用<br />标记。
45
2.3.4 文本和格式标记 (5) 画线标记<hr />
画线标记<hr />单独使用，可以实现段落的换行，并绘制一条水平直线，并在直线的上下两端留出一定的空间。可以使用style属性进行设置。其中： width: 设置画线的长度，取值可以是以像素为单位的具体数值，也可以使用相对于其父标记宽度的百分比数值。 height：设置画线的粗细，单位是像素。
46
2.3.4 文本和格式标记 (6) 文本居中标记<center>… </center>
47
2.3.4 文本和格式标记 【例2-1】建立ASP.NET页面，命名为text.aspx
48
2.3.4 文本和格式标记 (7) 列表标记 无序列表标记<ul>…</ul>和列表项标记<li>…</li> 语法格式为： <ul style=”list-style-type”> <li>列表项1 <li>列表项2 … <li>列表项n </ul> list-style-type可以有几种形式：默认形式disc（实心圆）、circle（空心圆）和square（实心方块），默认形式为实心圆● <li>有自动换行的作用，每个条目自动为一行。
49
2.3.4 文本和格式标记 (7) 列表标记 有序列表标记<ol>…</ol>和列表项标记<li>…</li> 语法格式为： <ol style=”list-style-type”> <li>列表项1 <li>列表项2 … <li>列表项n </ol> list-style-type可以设为：upper-alpha（大写英文）、lower-alpha（小写英文）、upper-roman（大写罗马数字）、lower-roman（小写罗马数字）和decimal（十进制数字）等。
50
2.3.4 文本和格式标记 【例2-2】建立ASP.NET页面，名称为list.aspx，其运行结果为：
51
2.3.4 文本和格式标记 (8) 空格标记   在XHTML中，直接输入多个空格，仅仅会被视为一个空格，而多个回车换行符也仅仅被浏览器解读为一个空格。 为了能够显示多个空格，XHTML保留了HTML中的空格标记 。一个 代表一个空格；多个 则代表相应的空格数。
52
2.3.5 表格标记 表格由行与列组成，每一个基本表格单位称为单元格。单元格在表格中可以包含文本、图像、表单以及其他页面元素。
表格标记<table>… </table> 常用属性有： align：设置表格在网页中的水平对齐方式，可选值left、right、center backGround：为表格指定背景图片 bgcolor：为表格设定背景色 border：设置表格边框厚度，如果此参数为0，那么表格不显示边界 cellpadding：设置单元格中的数据与表格边线之间的间距，以像素为单位 cellspacing：设置各单元格之间的间距，以像素为单位 valign：设置表格在网页中的垂直对齐方式，可选值top、middle、bottom width：设置整个表格宽度
53
2.3.5 表格标记 行起止标记<tr>… </tr> 单元格起始标记<td>… </td>
此标表明了表格一行的开始和结束，有以下属性： align：设置行中文本在单元格中的水平对齐方式，可选值left、right、center backGround：为这一行单元格指定背景图片 bgcolor：为这一行单元格设定背景色 单元格起始标记<td>… </td> 单元格起始标记用于设置表行中某个单元格的开始和结束
54
2.3.5 表格标记 【例2-3】建立ASP.NET页面，名称为table.aspx ，运行结果如图：
55
2.3.6 超链接标记<a>…</a>
超链接是通过文字、图像等载体对文件进行链接，引导文件的阅读。 超链接命令的格式： <a href=“URL” id=“设置锚点” target=“链接目标网页打开的窗口”> 锚点 </a> 锚点：实现链接的源点，浏览者通过在锚标上单击鼠标就可以到达链接目标点 href属性：设定要链接到的文件名称，为必选项。一般路径格式为：href=“域名或IP地址/文件路径/文件名#锚点名称” id属性：用来定义页面内创建的锚点 target属性：设定链接目标网页所要显示的视窗，默认为在当前窗口打开链接目标。
56
2.3.6 超链接标记<a>…</a>
2、超链接的形式 XHTML支持的超链接有以下几种形式： 链接到其他网页，基本格式： <a href=“URL”> 锚点 </a> 表示链接的是指定网页。运行时单击链接，转向另一个页面。 链接到图像上，基本格式： <a href=”image_name.jpg” >锚点 </a> 运行时，单击超链接，跳转向一幅图片。 链接到电子邮件，基本格式： <a href=“mailto:邮件地址”> 锚点 </a> 例如，<a href=”mailto: > 与搜狐网管理员联系</a>，运行后，点击超链接“与搜狐网管理员联系”，跳转到向管理员邮箱发信的页面。
57
2.3.6 超链接标记<a>…</a>
页内链接：有的页面文本内容很多，浏览器打开页面往往从页面顶端开始显示，若用户需要的信息不在页面的起始部分，用户将费时费力地从上向下进行搜索。在此时，设置页内的链接是很有必要的。 实现页面内的链接时，先使用id属性定义一个锚点 格式为：<a id=”锚点名称”>预被链接后显示的首部分</a> 然后再使用href属性指向该锚点 格式为：<a href=”#锚点名称”> </a>。
58
2.3.6 超链接标记<a>…</a>
【例2-4】建立ASP.NET页面，名称为hyperlink.aspx
59
2.3.6 超链接标记<a>…</a>
【例2-5】建立ASP.NET页面，名称为hyperlink2.aspx，
60
2.3.7 图像标记<img /> 图像标记语法格式为：
<img src=”图像文件名” [alt=”提示文本”] [border=”边框宽度”] [align=”对齐方式”] [width=“宽度像素大小”] [height=”高度像素大小”] alt=“说明”> src：这个属性是必需的，用来链接图像的来源 align：设置图像旁边文字的位置。可以控制文字出现在图片的上方、中间、底端、左侧和右侧。可选值为top、middle、bottom、left和right，默认值为bottom alt：区别于HTML，每个图片标记必须有ALT说明文字。
61
2.3.7 图像标记<img /> 【例2-6】在d:\myasp\下建立新文件夹images，将准备好的图像放入images文件夹，此处我们放入图片fish.jpg。建立ASP.NET页面，名称为：picture.aspx
62
常用的实体符号表 字符 表示方法 空格 小于号< < 大于号> > '' " '
' & &
63
2.4 .js文件和JavaScript常识 JavaScript是由NetScape公司开发的基于对象和事件驱动的解释型语言。作为一种脚本语言可以直接嵌入到XHTML页面中，不需要Web服务器端的解释执行即可由浏览器实现动态网页处理。 目前，所有的浏览器均支持JavaScript。
64
典型的JavaScript用途 在XHTML中创建动态文本。 响应客户端事件。 可以读取并改变XHTML元素的内容。
在数据提交到服务器之前，验证这些数据。 可检测访问者的浏览器，并根据检测到的浏览器类型载入相应的页面。 用来创建cookies。 关闭窗口。 页面上显示时间。
65
JavaScript代码位置 在<head>元素中 在<body>元素中 独立的.js文件中
66
在<head>元素中 <head>元素中的JavaScript代码包含于<script type="text/JavaScript">…</script>元素之间，只有在被调用或当事件被触发时才会执行。
67
实例2-6 <head>元素中的JavaScript代码
源程序：2-6.htm 程序说明： 当网页执行到<body>元素时，触发load事件，再调用message()函数，最后在浏览器中显示“在<head>”信息。
68
在<body>元素中 与<head>元素中的JavaScript类似，<body>元素中的JavaScript代码也要包含于<script type="text/JavaScript">…</script>之间。
69
实例2-7 <body>元素中的JavaScript代码
源程序：2-7.htm 页面载入时执行docment.write方法输出XHTML文本“在<body>元素中”，浏览器上显示效果是“在<body>元素中”。与在<head>元素中的JavaScript相比较，包含于<body>元素中的JavaScript肯定会执行，而<head>元素中的JavaScript只有被调用才执行。 注意：“<”在程序中用“<”表示；“>”用“>”表示。
70
在独立的.js文件中 独立的.js文件常用于多个页面需要调用相同JavaScript代码的情形。
在调用外部JavaScript文件时，需在<script>元素中加入src属性值。
71
实例2-8 独立的.js文件 源程序：2-8.htm 源程序：2-8.js 程序说明：
在2-8.htm文件中，行5中的src属性表示独立的.js文件存放位置；当网页执行到<body>元素时，触发load事件并调用2-8.js中的message()函数。 注意：在2-8.js中不要包含<script>元素。
72
实例2-9 检测浏览器类型 本实例将检测浏览器类型，如果浏览器为Netscape或4.0以上版本的IE，则显示“您的浏览器满足要求！”，否则显示“请更新您的浏览器”。 源程序：2-9.htm 程序说明： “//……”表示语句注释；navigator.appName返回“浏览器名”；navigator.appVersion返回“浏览器版本号”；parseFloat()将字符型数据转化为浮点型数据；
73
实例2-10 按钮动画 源程序：2-10.htm 程序说明：
实例2-10 按钮动画 源程序：2-10.htm 程序说明： 网页载入后显示eg_mouse2.jpg；当鼠标指针指向图片时触发mouseover事件调用mouseOver()函数显示eg_mouse.jpg，移开时触发mouseout事件调用mouseOut()函数显示eg_mouse2.jpg；单击后链接到
74
实例2-11 计时器 源程序：2-11.htm 程序说明： 网页载入后调用startTime()函数在div层txt上显示当前系统时间。
75
实验2 一、 实验目的 熟悉并会使用XHTML的页面格式及语法规则
二、 实验内容和要求 (1) 创建一个XHTML页面 rumengling.aspx，
76
实验2 (2) 练习列表标记songci.aspx，输出结果如图2-8所示：
(3) 用XHTML语言编写符合以下要求的页面：标题为“An example of image”，在浏览器窗口中显示一个图像。图像的宽度为200个像素点，高度为150个像素点，边框宽度为10个像素点 (4) 在网页中做一张课程表，要求所有的文字均居中，背景为黄色，表格居中，宽度为500像素。单元格间距与单元格边距为20像素。 （5）创建一个网页，通过链接可以跳转到（1）创建的rumengling.aspx上。
Similar presentations
