电子商务网站设计:第2章 XHTML基础知识_第1页
电子商务网站设计:第2章 XHTML基础知识_第2页
电子商务网站设计:第2章 XHTML基础知识_第3页
电子商务网站设计:第2章 XHTML基础知识_第4页
电子商务网站设计:第2章 XHTML基础知识_第5页
已阅读5页,还剩53页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

第二章XHTML基础知识2本章学习目标HTMLXMLXHTMLXHTML的语法规则与标记123HTML标记是固定的标记语言各种类型的工具来创建纯文本文件独立于各种平台不能精确定义格式HTMLXML规范化缺乏支持标准XML2023/1/4商定网有限责任公司5XHTML从HTML到XML的过渡XHTMLXML采用XML严谨的语法结构HTML以HTML为基础+=XHTML的基本格式ASP.NET的文档结构XHTML的语法规则ASP.NET页面<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="welcome.aspx.cs"Inherits="welcome"%><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><headrunat="server"><title>无标题页</title></head><body><p>

欢迎来到这里</p><formid="form1"runat="server"><div>

</div></form></body></html>ASP.NET页面<%@PageLanguage=“C#”AutoEventWireup=“true”CodeFile=“welcome.aspx.cs”Inherits=“welcome”%>指令<!DOCTYPEhtmlPUBLIC“-//W3C//DTDXHTML1.0Transitional//EN”“/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

文档类型声明<scriptrunat=“server”></script>代码声明<htmlxmlns="/1999/xhtml">文档类型声明<headrunat=“server”>服务器代码<title>无标题页</title></head><body><p>ASP.NET页面结构</p><formid="form1"runat="server"><div>

</div></form></body></html>ASP.NET的文档结构(1)指令:ASP.NET页面通常包含一些指令,允许用户指定页面的属性和配置信息,对页面进行设置。指令指定的设置,不会出现在浏览器端。在网页设计时,ASP.NET提供“代码分离”技术源代码放在扩展名为.aspx文件中,将Web服务器运行代码放在另一个文件中,若此文件是由C#编写的,则文件扩展名为.cs。.aspx文件和.cs文件的相互关联是由aspx文件中@page指令连接的。<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="welcome.aspx.cs"Inherits="welcome"%>2023年1月4日第9页ASP.NET的文档结构(2)文档类型声明DOCTYPE指定本文档遵从的DTD(DocumentTypeDefinition文档类型定义)标准,同时指定了文档中的XHTML版本,可以和哪些验证工具一起使用等信息,以保证此文档与Web标准的一致。文档类型声明是每个网页文档必需的,默认的方式为HTML4.02023年1月4日第10页本例文档类型声明DOCTYPE<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">DOCTYPE是documenttype(文档类型)的缩写“W3C//DTDXHTML1.0Transitional”说明此文档符合W3C制定的XHTML1.0规范,即声明此文档应该按照XML文档规范来配对所有标记。“xhtml1-transitional.dtd”中的DTD是文档类型定义,包含了文档的规则,浏览器根据页面所定义的DTD来解释页面内的标识,并将其显示出来。2023年1月4日第11页ASP.NET的文档结构(3)代码声明:包含ASP.NET页面的所有应用逻辑和全局变量声明、子例程和函数。页面的代码声明位于<script>…</script>标记中。2023年1月4日第12页ASP.NET的文档结构(4)服务器代码大多数ASP.NET页面包含处理页面时在服务器上运行的代码。页面的代码位于script标记中,该标记中的开始标记包含runat="server"属性。本例中的<scriptrunat="server">,说明页面运行时,ASP.NET将此标记标识为服务器控件,并使其可用于服务器代码。2023年1月4日第13页ASP.NET的文档结构(5)文本和XHTML标记:页面的文本部分用XHTML标记来实现,这一部分结构应完全符合HTML的文件结构。一个最基本的HTML网页结构由三个部分构成:<html>

<head> <title>标题内容</title>

</head>

<body>

主要内容

</body></html>2023年1月4日第14页(5)文本和XHTML标记:<html>…</html>:整个HTML文件的起止标记其他HTML标记都要被放在这对标记之间。在HTML代码中,仅有<html>…</html>在XHTML代码中使用了<htmlhtmlxmlns="/1999/xhtml">…</html>其中的xmlns是XHTMLnamespace的缩写,即XHTML命名空间,用来声明网页内所用到的标记是属于哪个名称空间的。本例中,指定HTML的标记名称空间为/1999/xhtml,这属于XML1.0的写法。说明整个网页标记应符合XHTML规范。2023年1月4日第15页(5)文本和XHTML标记:<head>…</head>:HTML头部文件。头部文件中包含页面传递给浏览器的信息,这些信息作为一个单独的部分,不是网页的主体内容在头部文件中可以设置页面的标题、关键字、外部链接和脚本语言等内容:如用<title>…</title>标记来设置网页的标题,用<script>…</script>标记来插入脚本等2023年1月4日第16页(5)文本和XHTML标记:<body>…</body>:文档内容部分。

<body>…</body>标记之间为页面文档的主体,用来放置页面的内容,是在浏览器中需要显示的内容。对一个最简单的网页来说,<body>…</body>标记符是必须使用的标记符。2023年1月4日第17页XHTML的语法规则⑴UTF-8之外的编码,文档必须具有XML声明当文档的字符编码是默认的UTF-8之外的编码时,编程人员必须在XHTML页面中添加一个XML声明并指定代码。例如:<?xmlversion=”1.0”encoding=”iso-8859-1”?>2023年1月4日第18页XHTML的语法规则(2)HTML标记之前必须使用DOCTYPE声明XHTML1.0提供了3种DTD声明供选择,DOCTYPE声明必须引用其中一种类型:Transitional(过渡型):可以使用符合HTML4.0标准的标记,但是必须符合XHTML的语法。是ASP.NET默认文档类型定义声明代码为:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">Strict(严格型)Frameset(框架型)2023年1月4日第19页XHTML的语法规则(3)页面的html标记必须指定命名空间html标记必须指定XHTML命名空间即将namespace属性添加到html标记中。如例子中的<htmlhtmlxmlns="/1999/xhtml">…</html>。2023年1月4日第20页XHTML的语法规则(4)文档必须包含完整的结构标记文档必须包含head,title和body结构标记框架集文档必须包含head,title和frameset结构标记。2023年1月4日第21页XHTML的语法规则(5)标记必须正确嵌套XHTML要求有严谨的结构,文档中的所有标记必须按顺序正确嵌套,例如:<p>Thisisa<i>badexample.</p></i>是错误的;<p>Thisisa<i>goodexample.</i></p>是正确的。也就是说,一层一层的嵌套必须是严格对称。2023年1月4日第22页XHTML的语法规则(6)标记必须成对使用,若是单独不成对的标记,在标记最后加/>结束。如:<br>是错误的;<br/>是正确的。2023年1月4日第23页XHTML的语法规则(7)所有标记名称和属性的名字都必须使用小写与HTML不同,XHTML对大小写是敏感的,XHTML要求所有的标记和属性的名字都必须使用小写。<title>和<TITLE>在XHTML是不同的标记。2023年1月4日第24页XHTML的语法规则(8)属性值必须用引号“"括起来在HTML中,不要求给属性值加引号,但是在XHTML中,属性值必须被加引号。例如:<height=80>必须修改为:<height="80">特殊情况,若用户需要在属性值里使用双引号,可以使用&apos;表示,例如:<alt="say'hello'">2023年1月4日第25页XHTML的语法规则(9)属性不允许简写,每个属性必须赋值XHTML规定所有属性都必须有一个值,没有值的就重复本身。例如:<inputtype="checkbox"name="shirt"value="medium"checked>必须修改为:<inputtype="checkbox"name="shirt"value="medium"checked="checked">2023年1月4日第26页XHTML的语法规则(10)使用id替代name属性(11)图片必须有说明文字每个图片标记必须有ALT说明文字。即必须对img和area标记应用文字说明alt=“说明”属性。如:<imgsrc="fish.jpg"alt="bigfish"/>2023年1月4日第27页XHTML的语法规则(12)不要在注释内容中使“--”“--”只能发生在XHTML注释的开头和结束,也就是说,在内容中它们不再有效。例如下面的代码是无效的:<!--这里是注释这里是注释-->可以用等号或者空格替换内部的虚线,如:<!--这里是注释====这里是注释-->是正确的。2023年1月4日第28页XHTML标记、标记属性1主体标记<body>…</body>2注释标记<!--注释内容-->3分层标记<div>…</div>4文本和格式标记5表格标记6超链接标记<a>…</a>7图像标记<img/>2023年1月4日第29页XHTML标记、标记属性标记(Tags)是指定界符(一对尖括号)和定界符括起来的文本,用来控制数据在网页中的编排方式,告诉应用程序(例如浏览器)以何种格式表现标记之间的文字。当需要对网页某处内容的格式进行编排时,只要把相应的标记放置在该内容之前,浏览器就会以标记定义的方式显示网页的内容。标记控制文字显示的语法为:

<标记名称>

需进行格式控制的文字

</标记名称>2023年1月4日第30页XHTML标记、标记属性在XHTML标记中,还可以通过设定一些属性,来描述标记的外观和行为方式,以及内在表现,以便对文字编排进行更细微的控制。几乎所有的标记都有自己的属性。例如style="text-align:center”,其中,style就是标记的属性,style的值设置文本格式为居中对齐。使用标记符有如下一些注意事项:任何标记都用“<”和“>”括起来,一般情况下,标记是成对出现的。标记名与“<”之间不能有空格。某些标记要加上属性,而属性只能加于起始标记中。格式为:

<标记名属性名=属性值属性名=属性值…>网页内容</标记名>2023年1月4日第31页主体标记<body>…</body>主体标记之间定义了网页的所有的显示内容。网页默认的显示格式为:白色背景,12像素黑色TimesNewRoman字体。在XHTML中,<body>标记用属性style来设置样式,如设置字体的大小、颜色、页面的背景色和背景图等。格式为:<标记style=”样式1:值1;样式2:值2;……”>其中,样式与值用冒号分隔,如果style属性中包含多个样式,各个样式之间用分号隔开。2023年1月4日第32页主体标记<body>…</body>style属性常用的样式有:background-color:设置网页的背景颜色,默认为白色背景color:设置网页中字体的颜色,默认颜色为黑色font-family:设置网页中字体的名称,如宋体、楷体、黑体等font-size:设置网页中字体的大小text-align:设置网页中文本的对齐方式,常用有3种不同的取值:left(左对齐,默认对齐方式)、right(右对齐)、center(居中对齐)例如:<bodystyle=”font-family:宋体;color:blue”>,设置网页字体为宋体,字体的颜色为蓝色2023年1月4日第33页注释标记<!--注释内容-->浏览器会自动忽略注释标记中的文字(可以是单行也可以是多行)而不显示。注释标记常用在比较复杂或多人合作设计的页面中,为代码部分加上说明,方便日后修改,增加页面的可读性和可维护性。2023年1月4日第34页分层标记<div>…</div>分层标记用来排版大块的XHTML段落,为XHTML页面内大块(block-level)的内容提供结构和背景的标记。可用style属性,在其中加入许多其他样式,以实现对其中包含元素的版面设置。div标记除了可以作为文本编辑功能外,还可以用作容器标记,将按钮、图片、文本框等各种标记放在div里面作为它的子对象元素处理。2023年1月4日第35页文本和格式标记(1)标题字体大小标记<hn>…</hn>

设定网页的标题格式。由大至小,有6种设置标题格式的标记:<h1>、<h2>、<h3>、<h4>、<h5>和<h6>。2023年1月4日第36页文本和格式标记(2)字体的加粗、斜体和下划线标记:<b>…</b>标记:以加粗字的形式输出文本<i>…</i>标记:以斜体字的形式输出文本<u>…</u>标记:以下划线形式输出文本2023年1月4日第37页文本和格式标记(3)段落标记<p>…</p>段落标记<p>…</p>的作用是将标记之间的文本内容自动组成一个完整的段落。预格式化标记<pre>…</pre>预格式化标记<pre>…</pre>使标记之间的文本信息能够在浏览器中按照原格式毫无变化的输出。它可以使浏览器中显示的内容与代码中输入的文本信息格式完全一样。2023年1月4日第38页文本和格式标记(4)换行标记<br/><br/>用于添加一个回车换行,该标记没有结束标记,故在XHTML中以</>结束。在编写XHTML时,如果在文件中用回车键分开了某一段文字,当在浏览器中显示时,浏览器会忽略源代码中的换行,而并不会显示换行的效果。若要显示网页中的文字换行效果,必须在文件中使用<br/>标记。2023年1月4日第39页文本和格式标记(5)画线标记<hr/>

画线标记<hr/>单独使用,可以实现段落的换行,并绘制一条水平直线,并在直线的上下两端留出一定的空间。可以使用style属性进行设置。其中:

width:设置画线的长度,取值可以是以像素为单位的具体数值,也可以使用相对于其父标记宽度的百分比数值。

height:设置画线的粗细,单位是像素。2023年1月4日第40页文本和格式标记(6)文本居中标记<center>…</center>

文本居中标记用来将网页中center标记内的元素居中显示2023年1月4日第41页文本和格式标记【例】建立ASP.NET页面,命名为text.aspx2023年1月4日第42页文本和格式标记(7)列表标记无序列表标记<ul>…</ul>和列表项标记<li>…</li>语法格式为:<ulstyle=”list-style-type”><li>列表项1<li>列表项2…<li>列表项n</ul>list-style-type可以有几种形式:默认形式disc(实心圆)、circle(空心圆)和square(实心方块),默认形式为实心圆●<li>有自动换行的作用,每个条目自动为一行。2023年1月4日第43页

文本和格式标记(7)列表标记有序列表标记<ol>…</ol>和列表项标记<li>…</li>语法格式为:<olstyle=”list-style-type”><li>列表项1<li>列表项2…<li>列表项n</ol>list-style-type可以设为:upper-alpha(大写英文)、lower-alpha(小写英文)、upper-roman(大写罗马数字)、lower-roman(小写罗马数字)和decimal(十进制数字)等。2023年1月4日第44页文本和格式标记【例】建立ASP.NET页面,名称为list.aspx,其运行结果为:2023年1月4日第45页文本和格式标记(8)空格标记 在XHTML中,直接输入多个空格,仅仅会被视为一个空格,而多个回车换行符也仅仅被浏览器解读为一个空格。为了能够显示多个空格,XHTML保留了HTML中的空格标记 。一个 代表一个空格;多个 则代表相应的空格数。2023年1月4日第46页表格标记表格由行与列组成,每一个基本表格单位称为单元格。单元格在表格中可以包含文本、图像、表单以及其他页面元素。表格标记<table>…</table>常用属性有:

align:设置表格在网页中的水平对齐方式,可选值left、right、center backGround:为表格指定背景图片

bgcolor:为表格设定背景色

border:设置表格边框厚度,如果此参数为0,那么表格不显示边界

cellpadding:设置单元格中的数据与表格边线之间的间距,以像素为单位

cellspacing:设置各单元格之间的间距,以像素为单位

valign:设置表格在网页中的垂直对齐方式,可选值top、middle、bottom width:设置整个表格宽度2023年1月4日第47页表格标记行起止标记<tr>…</tr>此标表明了表格一行的开始和结束,有以下属性:align:设置行中文本在单元格中的水平对齐方式,可选值left、right、centerbackGround:为这一行单元格指定背景图片bgcolor:为这一行单元格设定背景色单元格起始标记<td>…</td>单元格起始标记用于设置表行中某个单元格的开始和结束2023年1月4日第48页表格标记【例】建立ASP.NET页面,名称为table.aspx,运行结果如图:2023年1月4日第49页超链接标记<a>…</a>超链接是通过文字、图像等载体对文件进行链接,引导文件的阅读。超链接命令的格式:<ahref=“URL”id=“设置锚点”target=“链接目标网页打开的窗口”>锚点</a>锚点:实现链接的源点,浏览者通过在锚标上单击鼠标就可以到达链接目标点href属性:设定要链接到的文件名称,为必选项。一般路径格式为:href=“域名或IP地址/文件路径/文件名#锚点名称”id属性:用来定义页面内创建的锚点target属性:设定链接目标网页所要显示的视窗,默认为在当前窗口打开链接目标。2023年1月4日第50页超链接标记<a>…</a>2、超链接的形式XHTML支持的超链接有以下几种形式:链接到其他网页,基本格式:<ahref=“URL”>锚点</a>表示链接的是指定网页。运行时单击链接,转向另一个页面。链接到图像上,基本格式:<ahref=”image_name.jpg”>锚点</a>运行时,单击超链接,跳转向一幅图片。链接到电子邮件,基本格式:<ahref=“mailto:邮件地址”>锚点</a>邮件地址形式为:name@e例如,<ahref=”mailto:administrator@”>与搜狐网管理员联系</a>,运行后,点击超链接“与搜狐网管理员联系”,跳转到向管理员邮箱发信的页面。2023年1月4日第51页超链接标记<a>…</a>页内链接:有的页面文本内容很多,浏览器打开页面往往从页面顶端开

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论