《XHTML基础教程》PPT课件.ppt

网站规划与网页设计,4.1XHTML简介4.2XHTML文档的基本结构4.3网页文件的创建过程4.4段落标记4.5文字标记4.6超链接4.7图像4.8表格4.9框架（多窗口页面）4.10表单,第4章XHTML基础,4.1.1XHTML的产生HTML语言依然有缺陷和不足，人们仍在不断的改进它，使它更加便于控制和有弹性，以适应网络上的应用需求。2000年，W3C组织公布发行了XHTML1.0版本。XHTML1.0是一种在HTML4.0基础上优化和改进的新语言，目的是基于XML应用。XHTML是一种增强了的HTML，它的可扩展性和灵活性将适应未来网络应用更多的需求。,4.1XHTML简介,4.1.2XHTML的优点XHTML内容既符合XML，并且如果依照一些简单的指导方针，也能被HTML4.0用户代理程序识别。1XHTML文档遵从XML标准用标准的XML工具很容易查看、编辑和检验它们.在现有的HTML4.0代理用户程序中使用，也可以在新的XHTML用户代理程序中使用，在后者中使用可以达到与前者同样或更好的效果。2在XHTML文档中可使用更多的应用程序XHTML文档中使用的应用程序（如Script和Applet）可以是HTML的文档对象模型DOM，也可以是XML的DOM。,4.1XHTML简介,4.1.3XHTML代码规范1所有的标记都必须有一个相应的结束标记单独不成对的标签，则在标签最后加一个“/”来关闭它一定写对应的2所有标签的元素和属性的名字都必须使用小写XHTML对大小写是敏感的。XHTML要求所有的标签和属性的名字都必须使用小写字母。,4.1XHTML简介,4.1.3XHTML代码规范3所有的标记都必须合理嵌套错误按照XHTML要求必须修改为：/p4所有的属性必须用引号括起来在HTML中可写为：而按照XHTML要求必须修改为：,4.1XHTML简介,4.1.3XHTML代码规范5特殊符号“”和“&”用编码表示小于（）号，不是标签一部分的，必须被编码为>；（&）号，不是实体的一部分的，必须被编码为&。6每个属性必须赋值XHTML规定所有属性都必须有一个值，没有值的就重复本身。例如：按照XHTML要求必须修改为：7不要在注释内容中使用“-”“-”只能出现在XHTML注释的开头和结束位置。,4.1XHTML简介,1.标记XHTML文档由标记和被标记的内容组成。格式为：受标记影响的内容我的第一个网页需要注意:每个标记都要用“”（大于号）括起来，如，以表示这是XHTML代码而非普通文本。“”与标记名之间不能留有空格或其他字符。在标记名前加上符号“/”便是其结束标记，表示该标记内容的结束，如。标记也有不用结尾的，称之为单标记。,4.2XHTML文档的基本结构4.2.1标记及其属性,2.标记的属性标记只是规定这是什么信息，或是文本，或是图片，但怎样显示或控制这些信息，就需要在标记后面加上相关的属性来表示，每个标记有一系列的属性。格式为：受影响的内容欢迎！,4.2XHTML文档的基本结构4.2.1标记及其属性,XHTML文档是一种纯文本格式的文件，XHTML文档的基本结构为：网页的标题网页的内容【例4-1】,4.2XHTML文档的基本结构4.2.2XHTML的基本结构,【说明】DOCTYPE必须为大写。DTD叫做文档类型定义，里面包含了文档的规则。浏览器根据定义的DTD来解释页面的标记，并显示出来。要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分。DOCTYPE声明必须放在每一个XHTML文档的最顶部，在所有代码和标记之前。,4.2XHTML文档的基本结构4.2.2XHTML的基本结构,【说明】“xmlns”是XHTMLnamespace的缩写，称为“名字空间”。由于XHTML是HTML向XML过渡的标记语言，它需要符合XML文档规则，因此也需要定义名字空间。又因为XHTML1.0不能自定义标记，所以它的名字空间都相同，就是http:/www.w3.org/1999/xhtml。第5行定义语言编码。为了被浏览器正确解释和通过W3C代码校验，所有的XHTML文档都必须声明它们所使用的编码语言。一般使用gb2312（简体中文）。,4.2XHTML文档的基本结构4.2.2XHTML的基本结构,用最简单的“记事本”来编辑网页。打开记事本。单击Windows的“开始”按钮，在“程序”菜单中的“附件”子菜单中单击“记事本”。创建新文件，并按HTML语言规则编辑。在“记事本”窗口中输入HTML语言，输入的内容。保存网页。打开“记事本”的“文件”菜单，选择“保存”。此时将出现“另存为”对话框，在“保存在”下拉列表框中选择文件要存放的路径；在“文件名”文本框输入以.html或.htm为后缀的文件名，如welcome.html；在“保存类型”下拉列表框中选择“文本文档”。最后单击“保存”按钮，将记事本中的内容保存在磁盘中。如果希望这一页是网站的首页（主页），想让浏览者输入网址后，就显示这一页的内容，可以把这个文件设为默认文档，文件名为index.html或index.htm。,4.3网页文件的创建过程4.3.1编辑和保存网页,1.用浏览器打开2.在“Windows资源管理器”或“我的电脑”中打开在“Windows资源管理器”或“我的电脑”中双击要打开的.html文件，这时将直接在默认的浏览器中打开该.html文件。,4.3网页文件的创建过程4.3.2预览网页,2强制换行和不换行标记、.放在一行的末尾，可以使后面的文字、图片、表格等显示于下一行，而又不会在行与行之间留下空行，即强制文本换行。强制换行标记的格式为：文字不换行标记可令文字不能因太长使浏览器无法显示而换行，它对住址、数学公式、一行数字等尤其有用。其格式为：文字,4.4段落标记1注释标记,段落标记放在一个段落的头尾，用于定义一个段落。.标记不但能使后面的文字换到下一行，还可以使两段之间多一空行。段落标记的格式为：文字一个段落标记可以看作是两个标记，即。,4.4段落标记3段落标记.,设定文字、图像、表格的摆放位置。当在许多段落中设置对齐方式时，常使用标记。定位标记的格式为：文本、图像或表格缺省时默认为left。,4.4段落标记4定位标记,当浏览器解释到HTML文档中的标记时，会在此处换行，并加入一条水平线段。水平线标记的格式为：size设定线条粗细，以像素为单位，默认为2。width设定线段长度，可以是绝对值（以像素为单位）或相对值（相对于当前窗口的百分比）。color设定线条色彩，默认为黑色。可以采用色彩的名称。色彩可以用相应英文单词或以“#”引导的一个十六进制数代码来表示。,4.4段落标记5水平线标记,【例4-2】本例文件ex4-2.htm在浏览器中的显示效果如图4-4所示。,4.4段落标记6段落标记综合实例,图4-4段落标记综合实例,【例4-2】,标题文字#用来指定标题文字的大小，#取16的整数值，取1时文字最大，6时文字最小。属性align设置标题在页面中的对齐方式：left、center或right。缺省时默认为left。标记缺省显示宋体，在一个标题行中无法使用不同大小的字体。与用定义的网页标题不同，标题格式显示在浏览器窗口内，而不显示在浏览器的标题栏中。,4.5文字标记1标题文字标记,【例4-3】设置文字的标题。本例文件ex4-3.htm在浏览器中的显示效果如图4-5所示。,4.5文字标记2文字标记实例,图4-5文字标记综合实例,【例4-3】,超链接从当前网页定义的位置跳转到其他位置，包括当前页的某个位置、Internet或本地硬盘或局域网上的其他文件，甚至跳转到声音、图片等多媒体文件。通过超链接还可以获得不同形态的服务，如文件传输、资料查询、电子邮件、远程访问等。当网页包含超链接时，网页中的外观形式为彩色（一般为蓝色）且带下划线的文字或图片。单击这些文本或图片，可跳转到相应位置。超文本链接使用锚点标记来定义。,4.6超链接,锚点（anchor）标记由定义，它在网页上建立超文本链接。通过单击一个词、句或图片，可从此处转到另一个链接资源（目标资源），这个目标资源有惟一的URL。具有以上特点的词、句或图片就称为热点。标记的格式为：热点href属性为超文本引用，它的值为一个URL，是目标资源的有效地址。如果要创建一个不链接到其他位置的空超链接，可用“#”代替URL，即热点。,4.6超链接1锚点标记.,target属性,target设定链接被单击后结果所要开始窗口的方式。可选值为：_blank，_parent，_self，_top。_blank:空白视窗，保留原来的窗口，新开启一个窗口浏览所链接的文件内容；_parent:上一层页框视窗，若网页使用框架，则所链接的网页回到上一层的框架所在窗口；_self:本身视窗，默认链接显示方式，所链接的内容取代原来窗口的内容；_top:全视窗，以全窗口的方式出现所链接的网页，取代所有窗口内容。,(1)链接到同一目录内的网页文件链接到同一目录内的网页文件的格式为：热点文本(2)链接到下一级目录中的网页文件链接到下一级目录中网页文件的格式为：热点文本(3)链接到上一级目录中的网页文件链接到上一级目录中网页文件的格式为：热点文本其中“./表示退到上一级目录中。(4)链接到同级目录中的网页文件链接到同级目录中网页文件的格式为：热点文本,4.6超链接2指向其他页面的链接,要在当前页面内实现超链接，需要定义两个标记：一个为超链接标记，另一个为书签标记。超链接标记的格式为：热点文本书签就是用标记对该文本作一个记号。格式为：目标文本附近的字符串,4.6超链接3指向本页中的链接,建立指向其他页面某处的文本,格式为：热点文本要在跳转到的位置处加上链接标记：文字串如果链接指向其他文件的某一部分，格式为：热点文本,如果链接到的文件不是HTML文件，则该文件将作为下载文件，其格式为：热点文本5指向电子邮件的链接单击指向电子邮件的链接，将打开缺省的电子邮件程序，如FoxMail、OutlookExpress，并自动填写邮件地址。指向电子邮件链接的格式为：热点文本,4.6超链接4指向下载文件的链接,【例4-4】超链接综合实例。在浏览器中的显示效果如图4-6所示。,4.6超链接6超链接综合实例,图4-6超链接综合实例,【例4-4】,（1）设置背景色“色彩值”可以为色彩的英文名或相应十六进制值。（2）用图片作为背景background取值为一个图片文件名，并且要指出文件存放的路径，可以是相对路径，也可以是绝对路径。图片文件可为GIF格式或JPEG格式的文件。在浏览器中，作为背景的图片将按原来的大小复制，重复铺满整个网页。,4.7图像1网页的背景,如果不设定图片的尺寸，图片将按照其本身的大小显示。可使用标记的width和height属性来设置图片的大小。width和height属性的属性值可取像素数，也可取百分数。,4.7图片2图片标记,图片也可作为热点，单击图片则跳转到被链接的文本或其他文件。格式为：例如，下面代码：,4.7图片用图片作为热点,【例4-5】图像应用综合实例。本例文件ex4-5.htm在浏览器中的显示效果如图4-7所示。,4.7图片4图像应用综合实例,图4-7图像应用综合实例,【例4-5】,表格的标记为，行的标记为，表项的标记为。格式为：表头1表头2表头n表项1表项2表项n表项1表项2表项n,4.8表格1简单表格,在缺省下，表项居于单元格的左端。(1)水平对齐表项数据的水平对齐用标记、和的align属性。align的属性值分别为：center（表项数据的居中）、left（左对齐）、right（右对齐）或justify（左右调整）。(2)垂直对齐valign的属性值分别为：top（靠单元格顶）、bottom（靠单元格底）、middle（靠单元格中）或baseline（同行单元数据项位置一致）。,4.8表格2表格内文字的对齐方式,表格在浏览器窗口中的位置有三种：居左、居中和居右。使用标记的align属性。格式为：当表格位于页面的左侧或右侧时，文本填充在另一侧。当表格居中时，表格两边没有文本。当align属性缺省时，文本在表格的下面。,4.8表格3表格在页面中的对齐方式,在、标记中，属性可以改变表格的背景和边框的色彩、添加背景图片，也可以为行和单元格改变色彩、添加背景图片。bgcolor=色彩或色彩值设置背景色彩background=图片文件名“设置背景图片bordercolor=色彩设置表格边框的色彩bordercolorlight=色彩设置表格边框亮部的色彩rules=row,cols或none设置表内线的显示方法，none为无内线,4.8表格4表格的色彩和图片背景,【例4-6】表格应用综合实例。本例文件ex4-6.htm在浏览器中的显示效果如图4-8所示。,4.8表格5表格应用综合实例,图4-8表格应用综合实例,【例4-6】,框架（Frames）也称多窗口页面或帧，是在同一浏览器窗口中显示多个相互隔离的XHTML页的结构，每个区域显示一个XHTML文件。1建立框架框架的建立使用、两个标记。用来划分窗格，标记用来声明其中框架页面的内容。框架的基本结构为：.,4.9框架（多窗口页面）,(1)标记标记用来定义一个框架组的属性，格式为：其中属性：row设定横向分割的框架数目cols设定纵向分割的框架数目border设定边框的宽度bordercolor设定边框的色彩frameborder设定有无边框framespacing设置各窗格间的空白,4.9框架（多窗口页面）,框架有横向和纵向之分。对一个框架来说，其大小是很重要的。的rows和cols属性用于设定横向分割和纵向分割的框架数目。例如，要建立有三个横向框架的页面，可写为：,4.9框架（多窗口页面）,(2)标记标记用于给各个框架指定页面的内容，也就是，它将各个框架和包含其内容的那个文件联系在一起。是一个单标记，格式为：标记的个数应等于在标记中所定义的框架数，并按在文件中出现的次序按先行后列对框架进行初始化。如果标记数目少于中定义的框架数量，则多余的框架为空。,4.9框架（多窗口页面）,【例4-7】纵向排列多个窗格。本例中用到的其他HTM文件是在前面例题中建立的文件。本例文件ex4-7.htm在浏览器中显示的效果如图4-9所示。框架的嵌套,4.9框架（多窗口页面）,图4-9纵向排列多个窗格,【例4-7】,在一个框架中显示一个所有网页内容的目录，而通过单击其中的某项，在另一个框架中显示相应内容。这些目录是热点文本，需要在框架之间建立超链接，并指明显示的目标文件的框架。使用的target属性就可以控制目标文件在那个框架内显示。当单击热点文本时，目标文件就会出现在有target指定的框架内。target属性的值可以为框架名，使用格式为：热点文本,4.9框架（多窗口页面）2框架间的链接,另外，“框架名”有4个特殊的值，分别实现4类特殊的操作：target=_blank：链接的目标文件被显示在一个新的没有名字的浏览器窗口中。target=_self：链接的目标文件被显示在当前框架窗口中，代替正在显示的热点文本所在的那个文件，是省略target属性的默认值。target=_top：链接的目标文件被显示在整个浏览器窗口（取消了框架）。target=“_parent”：当框架嵌套时，链接的目标文件被显示在父框架中；否则，被显示在整个浏览器窗口中。,4.9框架（多窗口页面）2框架间的链接,4.9框架（多窗口页面）3框架应用综合实例,【例4-9】,【例4-9】制作一个框架集，包含上、下框架，下框架又分为左、右两部分，并实现框架间的链接。本例文件ex4-9.htm在浏览器中显示的效果如图4-11所示。,图4-11框架应用综合实例,网页上具有可输入表项及项目选择等控制所组成的栏目称为表单。在网页中，通过表单交流和反馈信息。格式为：name属性:表单的名字，在一个网页中用于惟一识别一个表单action属性:表单处理的方式，往往是E-mail地址或网址method属性:表单数据的传送方向，是获得（GET）表单还是送出（POST）表单,4.10表单1表单的标记.,type属性值为text，则输入的文本以标准的字符显示；type属性值为password，则输入的文本显示为“*”。在表项前应加入表项的名称，如“您的姓名”等，以告诉浏览者在随后的表项中输入的内容。,4.10表单2文字和密码的输入,如果浏览者想清除输入到表单中的全部内容，可以使用标记中的type属性所设的重置（reset）按钮，当浏览者完成表单的填写，想要发送时，可使用标记的属性type所设的提交（submit）按钮，将表单内容送给action中的网址或函件信箱。格式为：当缺省value的设置值时，重置和提交的按钮分别显示为“重置”和“提交查询内容”。,4.10表单3重置和提交,选择钮可以是复选框（checkbox）或单选钮（radio）。用标记的type属性可设置选择钮的类型属性value可设置该选择钮的控制初值，用以告诉表单制作者选择结果。用checked表示是否为缺省选中项。name属性是控制名，同一组的选择钮的控制名是一样的。,4.10表单4复选框和单选钮,当浏览者选择的项目较多时，如果用选择钮来选择，占页面的区域就会较多。可以用标记和标记来设置选择栏。选择栏可分为两种，即弹出式和字段式。标记的格式为：,4.10表单5选择栏,其中：size:取数字，表示在带滚动条的选择栏中一次可见的列表项数name:控制操作名multiple:不带值，加上本项表示可选多个选项，否则只能单选标记的格式为：其中：select不带值，加上本项表示该项是预置的value指定控制操作的初始值，缺省时初值为option中的内容表示选项值,4.10表单5选择栏,标记可以设置允许成段文字的输入。格式为：多行文本其中的行数和列数是指不用滚动条就可看到的部分。,4.10表单6多行文字的输入textarea.,【例4-10】制作一个“职员调查表”，收集职员的个人资料。为了显得整洁，在表单中使用了无边框表格。本例文件ex4-10.htm在浏览器中显示的效果如图4-12所示。,4.10表单7表单应用综合实例,图4-12表单应用综合实例,【例4-10】,1制作如图4-13所示的网页，要求章标题的级别为标题h2，居中，黑体，红色；节标题的级别为标题h3，居左，楷体，绿色；正文为宋体，蓝色。整个网页背景色为乳白色。2制作如图4-14所示的网页，单击软件名称，则下载该软件。3分别制作如图4-15（a）、（b）所示的网页，单击小图像，将显示放大的图像。4练习表格在页面中的应用，分别制作如图4-16（a）、（b）所示的网页。在图4-16（a）中单击“详细”超文本则打开新的浏览器窗口，显示详细内容，如图4-16（b）所示。5制作一个“网友推荐”表单，如图4-17所示。6制作如图4-18所示的框架网页。在左框架中单击项目，在右框架中显示相应的内容。,习题4,