PPT
【文档说明】[计算机软件及应用]HTML_XHTML_XML课件.ppt，共(48)页，255.020 KB，由小橙橙上传
转载请保留链接：https://www.ichengzhen.cn/view-2090.html
以下为本文档部分文字说明：
第2章HTML/XHTML/XML主讲教师:赵丹丹主要内容2.1HTML2.2XHTML2.3XML上述是排版语言，不是编程语言。为什么要学HTML？1.HTML是所有网页的基础，对于一个想成为Web高手的人
来说，学习HTML是必不可少的。就像有了计算器，学数学时还要从学1+1开始一样。网页里那些精确控制页面排版的功能必须靠HTML源代码2.网页要瘦身:网页制作工具生成的网页都含有大量的冗余代码，如FrontPage生成的冗余代码在文件中
占20%50%，Dreamweaver生成的占5%-10%。冗余代码降低访问速度、浪费存储空间。3.学会HTML可以读懂优秀网页的HTML源代码，学习别人设计网页的方法和技巧。2.1HTML1990年，HTML语言和WWW（万维网）一起诞生，它是众多标记语言的
一种。1993年，IETF（因特网工程部）起草了HTML的第1个版本，采用SGML。1995年，IETF推出了和浏览器相适应的HTML2.0作为正式的Internet标准。1996年由W3C联合几大公司共同开发的HTML3.2建议标准。1997年1月被发布为正式标准
。1999年12月，W3C又推出HTML4.01。2.1.1HTML简单例子<html><head><title>我的主页标题</title></head><bodybgcolor="#ffffff">欢迎访问我的个人主页</body></html>2.1.1HTML简单例子H
TML文件基本结构<html>文件开始<head>标头区开始<title>标题区内容</title>标题区结束</head>标头区结束<body>主体区开始主体区内容</body>主体区结束</html>文件结束命
令一般采用“<标记>”和“</标记>”的形式配对出现有些标记也可以单个出现标记符不区分大小写2.1.2HTML常用标记标记格式功能标记格式功能<head>…</head>首部标记符，不包含网页的内容，仅提供一些与网页相关的信息<title>…</tit
le>设置网页的标题，一般在浏览器的顶部标题栏中显示<body>…</body>主体标记符，包含网页内的所有内容：文字、图片及超链接等<hx>…</hx>标题标记符，x=1~6，定义了从1级到6级标题<hr>换行并绘制一条水平直线，直
线的上下两端都会留出一定的空白<div>…</div>定义一个块，块内可以有文本、图像等，目的是为了控制该块的样式<font>…</font>控制字符的样式，size是它的一个常用属性，用来控制字符大小<br>强行中断当前行，多个<br>标记可以创建多个空行，
新行与原行属性相同<img>插入图片，常用alt属性设置图片简单文字说明，用src属性指明图片所在位置<p>…</p>在网页中分段，遇到</p>另起一个新的段落，两个段落的性质可相同也可不同<a>…</a>定义一个超链接，用href属性可创建多种形式的超链接<!--…-->注释标记，
注释之间的内容不在浏览器中显示<pre>…</pre>包含预先格式化的文本，即包含在<pre>和</pre>之间的内容完全按照所设置的格式显示<address>…</address>提供联系信息（联系电话、电子邮箱等），一般用斜体显示其中的内容<ul>…</ul>定义一
个无序列表，列表项的条目用标记符li创建，ul中可包含一个或多个li标记<ol>…</ol>定义一个有序列表，列表项的条目用标记符li创建，ol中可包含一个或多个li标记2.2XHTML2.2.1XHTML的基本格式2.2.2XHTML与HTML的区别
2.2.3XHTML标记2.2XHTMLHTML从出现到现在，标准在不断完善、功能也越来越强大，但是它的规范化要求依然不是很严格，仍有很多缺陷和不足。为此，W3C开发了XML标准。XML是用来对信息进行自我描述而设计的一种新语言XML也是一种基于文本的标记语言
，但是XML可以让用户根据要表现的文档，自由地定义标记来表现具有实际意义的内容。XML不像HTML那样具有固定的标记集合，它实际上是一种定义语言的语言，也就是说使用XML的用户可以自己定义各种标记来描述文档中的任何数据元素，将文档的内容组织成丰富的、完整的信息
体系。2.2XHTMLXML具有便于存储的数据格式、可扩展、高度结构化以及方便的网络传输等特点。XML是Web设计的发展趋势。在XML1.0标准推出时，仍然有大量的人员采用HTML，而且在万维网中已存在数以百万计的页面是采
用HTML编写的，所以不能直接抛弃HTML，因此，HTML的后继者——XHTML就出现了。2.2XHTMLXHTML是为了适应XML而重新改造的HTML。它是一种独立的语言，以HTML4.01作为基础，又以XML的应
用为目的，是从HTML到XML的过渡。2000年1月，W3C推出XHTML1.0标准。该标准与HTML4.01具有相同的特性，也是一种标记语言，但是做了一些限制，要求在网页中出现的任何元素都要被标记出来
。2001年5月，W3C又推出XHTML1.1标准，它以XHTML1.0的严谨为基础，并做了一些改进，同时对XHTML的模块化重新定义。XHTML非常严密，兼容性强，交互性好，能够解决制约HTML发展的
问题，比如多种显示设备的支持，多样的数据表示等。2.2XHTMLW3C已经确定了4个XHTML标准：XHTML1.0TransitionalXHTML1.0FramesetXHTML1.0StrictXHTML1.1XHTML1.1规
范是这些级别中最严格的XHTML1.0Frameset和Transitional规范定义了基于XML的HTML标记，允许某些常用的构造。2.2.1XHTML的基本格式一个符合标准的XHTML网页，必须包含一个DOCTYPE声明该声明用来将
网页标识为XHTML页，并说明网页所遵循的XHTML规范。这个网页还必须声明XHTML命名空间xmlns，网页内的所有标记都是属于这个命名空间的。例如：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXH
TML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml">2.2.1XHTML的基
本格式XHTML中的标记符区分大小写，它的基本格式为：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><
htmlxmlns="http://www.w3.org/1999/xhtml"><head><title>文档标题</title></head><body>XHTML文档的主体部分</body></html>2.2.2XHTML与HTML的
区别XHTML与HTML的区别标记的嵌套使用(严格/不严格）大小写的使用（区分/不区分）引号的使用（属性必须加引号/随意）结束标记（不许省略/可以省略）样式的使用（type/style)id和name具体方法参看课本例2-
2。2.2.3XHTML标记为网页加入标题网页标题总是加在<head>部分，浏览该网页时它会出现在浏览器窗口的标题栏中。表示标题的语法是：<title>标题字符串</title>主体标记符body与样式style属性XHTML的主体标记和HT
ML是一样的，在两标记之间定义了网页的所有显示内容。默认背景色为白色，字体是12像素黑色TimesNewRoman。在XHTML中，对样式的所有设置都必须放在【style】属性中来完成。使用【style】属性
中的样式，可以对该标记所作用的区域进行一种或多种设置，例如，字体的大小、颜色，页面的背景色和背景图等。2.2.3XHTML标记style属性一般格式为：<标记style="样式1:值1;样式2:值2;……">style中常用的样
式有：background-color：设置网页的背景颜色；color：设置网页中字体的颜色；颜色值:blue/red/green/black/white等或#FFFFFF/#00FF00格式font-family：设置网页中字体的名称
，例如宋体、黑体等；font-size：设置网页中字体的大小（长度|百分比|标准字号）text-align：设置文本的对齐方式，常有3种不同的取值，分别为“left（左对齐）”、“right（右对齐）”和“center（居中对齐）”，在默认情况下使用左对齐方式。例如：<b
odystyle="background-color:white;color:#FF0000;font-size:20;text-align:center">2.2.3XHTML标记注释标记<!--xx-->在X
HTML中以标记<!--为开始，-->为结束，其间就是被注释的内容。浏览器在解读XHTML文档时不会显示注释的内容。在设计页面时，适当的给出注释，可以增强文档的可读性和可维护性。2.2.3XHTML标记标题标记符hx标记符hx（其中x=1~6）用于设置文件中的标题，在浏览器中显示的是黑体标记<h1
>表示最大标题，标记<h6>表示最小标题<hx>与</hx>必须配对使用，且在</hx>后文字自动换行。标题的样式不能像HTML中通过align属性进行设置，在XHTML中需要使用【style】属性中的【text-align】样式进行设置。例如：<h1style="text-align:ce
nter">这是1号标题</h1><h2style="text-align:left">这是2号标题</h2><h6style="text-align:right">这是6号标题</h6>2.2.3XHTML标记文字样式标记符XHTML使用【style】属性中的样式【colo
r】、【font-family】和【font-size】XHTML也保留了HTML所提供的一些字体样式标记符：b标记设置文字为粗体boldi标记为斜体italicbig标记和small标记分别表示大字体和小字体sub标记和sup标记使文字成为下标或上标例如：<b>加粗</b
><i>斜体</i><big>大字号公式:x=a<sup>2</sup>+b<sub>1</sub></big>2.2.3XHTML标记空格标记在XHTML语言中，显示多个空格，XHTML保留了HTML提供的空格标记“ ”。一个“ ”表示
一个空格，多个“ ”表示多个空格。“ ”表示5个空格。将空格和空格标记“ ”联合使用。“ ”表示5个空格。2.2.3XHTML标记段落标记符p、br、pre和hr<p>
和</p>是配对使用的，用来划分段落。在换行的时候另起了一个新的段落。<br/>单独使用，表示强制换行。中断当前行而另起一行，但是新行与上一行是属于同一段落的，与上一行保持了相同的属性。预格式化标记<pre>和</pre>之间输入的内容将在浏览器中按照原格式毫无变化的显示出来<hr/>单独使用可以
实现段落的换行，并绘制一条水平直线，在直线的上下两段留出一定的空白2.2.3XHTML标记有序列表标记符ol和列表项标记符li使用标记<ol>和</ol>在XHTML中定义了一个有序列表。两个标记之间不允许有文本信息。列表中
的每一项都必须使用列表项标记<li>开始，标记</li>作为结尾表示一个条目的结束。<ol><li>有序列表项1</li><li>有序列表项2</li><li>有序列表项3</li></ol>li是list的缩写。ol是orderlist的缩写。li有自动换行的
作用，每个条目自动为一行。有序列表在显示时，会在每个条目前面加上一定形式的有规律的项目序号。例如，1、2、3、a、b、c等之类。2.2.3XHTML标记在XHTML中，标记符ol建立的有序列表默认的项目序号是十进制数字通过【sty
le】属性的【list-style-type】样式设置整个列表的项目序号【list-style-type】样式的取值：decimal（十进制）lower-alpha（小写英文字母）upper-alpha（大写英文字母）lower-roman（小写罗马数字）upper-rom
an（大写罗马数字）每一个li创建的项目也可以用【list-style-type】单独指定项目序号2.2.3XHTML标记无序列表标记符ul标记<ul>和</ul>设置了一个无序列表。列表项中间同样不允许有文本出现。每一个条目也必须用标记<li>
创建，</li>结尾。一个ul标记的无序列表中可包含一个或多个li标记，用于创建一项或多项条目。ul同样可以使用【style】属性的【list-style-type】样式设置整个无序列表的项目符号。三种取值：“disc”，“circle”和“square”，分别表示实心
圆，空心圆，小方块。每一个li创建的项目同样可以用【list-style-type】单独指定项目符号。<ulstyle="list-style-type:circle"><li>无序列表项1</li><li>无序列表项2</li><li>
无序列表项3</li></ul>2.2.3XHTML标记图像标记符img＜imgsrc="图形文件URL"alt="说明"/＞src属性：指明网页中所引用图像的位置；alt属性：用简单的文字说明所引用的图像。当图像不能显
示或鼠标停在图片上时，可以通过它来描述图片。可以利用style属性的width和height两个样式分别设置图片的宽度和高度，单位可以是像素，也可以是相对于父标记大小的百分比。例如：<imgsrc="aa.
gif"alt="text"style="width:80;height:80"/><imgsrc="aa.gif"alt="text"width="80"height="80"/>2.2.3XHTML标记超链接标记符a标记<a>包含了【href】、【id】和【t
arget】等常用属性。（1）id属性：用来定义文档内创建的锚点，在实现页面内链接的时候使用。（2）href属性：用来指定超链所连接的目标文档的URL。它提供了多种链接方式，可以在页面内创建超链接，也可以在页面间创建超链接。（3）ta
rget属性：目标窗口，指定如何显示链接的文件。默认设置为“_blank”，表示在新的浏览器窗口中显示相应的文件内容；也可以设置为“_self”，表示在本窗口内显示相应内容。2.2.3XHTML标记提供了多种链接方式，可以在页面内创建超链接，也可以在页面间创建超链接。链接到本页面内的某个锚
点（有的叫书签）实现一个页面内的链接时，需要先使用id属性定义一个锚点，再使用a标记的href属性指向该锚点在网页中这两部分没有先后之分一般形式为：<aid="锚点名称"></a>……<ahref="#锚点名称"></a>
“#”号表示链接目标与a标记属于同一个文档，被链接的目标则用id标示。2.2.3XHTML标记链接到另一个页面可以使用相对或绝对URL（一般都使用相对URL）指向某一个特定的页面一般形式：<ahref="URL">信息描述</a>链
接到另一个页面内的某个锚点将前两种链接方式结合即可实现从一个页面转向另一个页面内的某一处首先要在目标页面内定义一个锚点，然后在源页面内建立超链接指向该锚点一般形式为：<ahref="页面文件名#锚点名称">描述信息</a>文件名后加#号表示链接到目标文件中所定义的
锚点处2.2.3XHTML标记链接到另一个网站在页面内创建超链接，直接指向另一个网站在此只要给目标网站的网址即可<ahref="http://www.163.com">网易163</a>链接到电子信箱【
href】属性中需要使用“mailto”协议在该协议的后面给出一个具体的电子邮箱地址一般形式为：<ahref="mailto:admin@163.com">联系人</a>链接到FTP站点<ahref="ftp://210.30.12.1/pp.pps">FT
P演示</a>2.2.3XHTML标记链接到某一个图像文件使用href还可以指向图像文件，浏览器将在窗口中显示相应的图片<ahref="heart.jpg">感恩的心</a>链接到浏览器不支持的文件浏览器自动弹出提示下载文件的对话框，由用户选择是否下载<ahref="abc.xyz
">文件下载</a>如何实现创建页面内的超链接请参见例2-3。2.2.3XHTML标记图像地图<imgsrc="图形文件名"usemap="#图的名称"/><mapid="图的名称“><areaalt="文字说明"shape="形状"coords="区域座标列表"href="
URL"/><areaalt="文字说明"shape="形状"coords="区域座标列表"href="URL"/>……</map>2.2.3XHTML标记图像地图【1】定义形状--shaperect：矩形circle：圆形poly：多边形【2】定义区域--coordsa.矩形
：必须使用四个数字，前两个数字为左上角座标，后两个数字为右下角座标例：<areashape="rect"coords="100,50,200,75"href="URL">b.圆形：必须使用三个数字，前两个数字为圆心的座标，最后一个数字为半径长度例：<areashape=
"circle"coords="85,155,30"href="URL“>c.任意图形（多边形）：将图形之每一转折点座标依序填入例：<areashape="poly"coords="232,70,285,70,300,90,250
,90,200,78"href="URL">2.2.3XHTML标记meta标记＜meta＞不成对标记，只在head区10秒后自动更新一次页面<head><metahttp-equiv="refresh"content="10"/><title>欢迎进入聊天室</t
itle></head>2.2.3XHTML标记:<table>表格table标记<tableborder=nwidth=x或x%><th>…</th>定义表头<tr>…</tr>定义表的行<td>…</td>定义单元格</t
able>border:表格边框的粗细，单位是像素width:表格的宽度，单位像素或百分比2.2.3XHTML标记:<table>跨多行、多列的单元格<table><tr><tdrowspan=x>…</td>跨x行的单元格</tr
><tr><td>…</td><tdcolspan=y>…</td>跨y列的单元格<td>…</td></tr><tr><tdrowspan=xcolspan=y>…</td>跨x行y列</tr></table>2.
2.3XHTML标记:<form>基本语法<formaction=“URL”method=“*”>……</form>*:get传送数据速度快但能传输的字节少post传送数据速度慢但能传输的字节不限2.2
.3XHTML标记:<form><input>标记<inputtype=“#”id=“名字”>#:text单行文本框password密码框checkbox复选框radio单选按钮image图像按钮hidden隐藏字段submit提交按钮reset复位按钮2.2.3XHTML标记:<
form>单行文本框<inputtype=“text”|”password”value=定义值size=文本框的长度maxlength=允许输入的字符长度name=名字>2.2.3XHTML标记:<form>
复选框和单选按钮<inputtype=“checkbox”|”radio”value=定义值checkedname=名字>Checked:设置默认选项2.2.3XHTML标记:<form>文本区域<textarearows=行数cols=列数name=名字></textarea>
2.2.3XHTML标记:<form>列表框<selectsize=nid=名字multiple><optionvalue=“指定值”selected>菜单项1</option><option>菜单项2</option>……</select>n=1下拉菜单（下拉列表）
n>1列表框Multiple允许选择多行2.2.3XHTML标记:<form>列表框<selectsize=nid=名字multiple><optionvalue=“指定值”selected>菜单项1</option><option>菜单项2</option>……</select>n=
1下拉菜单（下拉列表）n>1列表框Multiple允许选择多行2.3XML可扩展标记语言XML（eXtensibleMarkupLanguage）是为了克服HTML缺乏灵活性和伸缩性的缺点以及SGML(StandardGenerali
zedMarkupLanguage)过于复杂、不利于软件应用的缺点而发展起来的一种元标记语言。是未来网络科技的第二代HTML语言。HTML的标记是给定的，用户不能增加需要使用的新标记，所以它不易扩展，而XML标记是可
以扩展的，用户可以根据需要定义新的标记。XML的标记是区分大小写的。一个XML文档只能有一个根标记，其他标记分层嵌套，从而形成一棵标记树。XML元素由一个开始标记和一个结束标记组成，它可以包含其他子元素。HTML中的某些元素不一定需要一个结束标记（比如，LI和BR），并且某
些属性不需要用引号引起来。2.3XML【例】使用XML在定义员工的姓名、出生日期与电话号码等信息。编辑XML源文件。在记事本或其他文本编辑器中输入以下代码，以XMLFile.xml存盘。<?xmlvers
ion="1.0"encoding="utf-8"?><?xml-stylesheettype="text/xsl"href="XSLTFile.xsl"?><personlist><person><name>李明</n
ame><birth>06/10/1982</birth><telephone>66666666</telephone></person><person><name>王华</name><birth>12/12/1973</birth><telephone>
88888888</telephone></person></personlist>2.3XMLXML的显示单独用XML是不能显示页面的,必须使用某终格式化技术,比如级联样式单CSS(CascadingStyleSheets)或是可扩展样式表语言XSL(eXtensibleStylesheet
Language),才能显示XML标记创建的文档。2.3XML2、编辑XSL样式文件。在编辑器中输入以下样式文件，并以XSLTFile.xsl的扩展名存盘。<?xmlversion="1.0"encodin
g="utf-8"?><xsl:stylesheetversion="1.0"xmlns:xsl="http://www.w3.org/1999/XSL/Transform"><xsl:templat
ematch="/"><html><body><tableborder="2"><tr><th>姓名</th><th>出生年月</th><th>电话号码</th></tr><xsl:for-eachselect="personlis
t/person"><tr><td><xsl:value-ofselect="name"/></td><td><xsl:value-ofselect="birth"/></td><td><xsl:value-ofs
elect="telephone"/></td></tr></xsl:for-each></table></body></html></xsl:template></xsl:stylesheet>第2章小结本章主要介绍了超文本标记语言H
TML/XHTML以及可扩展标记语言XML。重点介绍了XHTML的常用标记。习题1.简述HTML文档的结构。2.HTML和XHTML的典型区别是什么?
辽公网安备 21102102000191号
营业执照
