XHTML基础教程

网站规划与网页设计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用户代理程序识别。1．XHTML文档遵从XML标准用标准的XML工具很容易查看、编辑和检验它们.在现有的HTML4.0代理用户程序中使用，也可以在新的XHTML用户代理程序中使用，在后者中使用可以达到与前者同样或更好的效果。2．在XHTML文档中可使用更多的应用程序XHTML文档中使用的应用程序（如Script和Applet）可以是HTML的文档对象模型DOM，也可以是XML的DOM。4.1XHTML简介4.1.3XHTML代码规范1．所有的标记都必须有一个相应的结束标记单独不成对的标签，则在标签最后加一个“/”来关闭它p一定写对应的/pbr/imgheight=80alt=网页设计师src=../images/logo_w3cn.gifwidth=200/2．所有标签的元素和属性的名字都必须使用小写XHTML对大小写是敏感的。XHTML要求所有的标签和属性的名字都必须使用小写字母。4.1XHTML简介4.1.3XHTML代码规范3．所有的标记都必须合理嵌套pb/p/b错误按照XHTML要求必须修改为：pb/b/p4．所有的属性必须用引号括起来在HTML中可写为：inputname=guitartype=checkboxvalue=guitar而按照XHTML要求必须修改为：inputname=guitartype=checkboxvalue=guitar/4.1XHTML简介4.1.3XHTML代码规范5．特殊符号“”、“”和“&”用编码表示小于（）号，不是标签一部分的，必须被编码为<；大于（）号，不是标签一部分的，必须被编码为>；（&）号，不是实体的一部分的，必须被编码为&。6．每个属性必须赋值XHTML规定所有属性都必须有一个值，没有值的就重复本身。例如：tdnowrapinputtype=checkboxname=shirtvalue=mediumchecked按照XHTML要求必须修改为：tdnowrap=nowrapinputtype=checkboxname=shirtvalue=mediumchecked=checked//td7．不要在注释内容中使用“--”“--”只能出现在XHTML注释的开头和结束位置。4.1XHTML简介1.标记XHTML文档由标记和被标记的内容组成。格式为：标记受标记影响的内容/标记title我的第一个网页/title需要注意:①每个标记都要用“”（小于号）和“”（大于号）括起来，如p，table，以表示这是XHTML代码而非普通文本。“”、“”与标记名之间不能留有空格或其他字符。②在标记名前加上符号“/”便是其结束标记，表示该标记内容的结束，如/h1。标记也有不用/标记结尾的，称之为单标记。4.2XHTML文档的基本结构4.2.1标记及其属性2.标记的属性标记只是规定这是什么信息，或是文本，或是图片，但怎样显示或控制这些信息，就需要在标记后面加上相关的属性来表示，每个标记有一系列的属性。格式为：标记属性1=属性值1属性2=属性值2…受影响的内容/标记h1align=left欢迎！/h14.2XHTML文档的基本结构4.2.1标记及其属性XHTML文档是一种纯文本格式的文件，XHTML文档的基本结构为：!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN==Content-Typecontent=text/html;charset=gb2312/title网页的标题/title/headbody网页的内容/body/html【例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不能自定义标记，所以它的名字空间都相同，就是。③第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强制换行和不换行标记br/、nobr.../nobrbr放在一行的末尾，可以使后面的文字、图片、表格等显示于下一行，而又不会在行与行之间留下空行，即强制文本换行。强制换行标记的格式为：文字br/不换行标记可令文字不能因太长使浏览器无法显示而换行，它对住址、数学公式、一行数字等尤其有用。其格式为：nobr文字/nobr4.4段落标记1注释标记!--...--段落标记放在一个段落的头尾，用于定义一个段落。p.../p标记不但能使后面的文字换到下一行，还可以使两段之间多一空行。段落标记的格式为：palign=left|center|right文字/p一个段落标记p可以看作是两个br/标记，即br/br/。4.4段落标记3段落标记p.../p设定文字、图像、表格的摆放位置。当在许多段落中设置对齐方式时，常使用div…/div标记。定位标记的格式为：divalign=left|center|right文本、图像或表格/div缺省时默认为left。4.4段落标记4定位标记div…/div当浏览器解释到HTML文档中的hr/标记时，会在此处换行，并加入一条水平线段。水平线标记的格式为：hralign=left|center|rightsize=横线粗细width=横线长度color=横线色彩noshade=“noshade”/size设定线条粗细，以像素为单位，默认为2。width设定线段长度，可以是绝对值（以像素为单位）或相对值（相对于当前窗口的百分比）。color设定线条色彩，默认为黑色。可以采用色彩的名称。色彩可以用相应英文单词或以“#”引导的一个十六进制数代码来表示。4.4段落标记5水平线标记hr/【例4-2】本例文件ex4-2.htm在浏览器中的显示效果如图4-4所示。4.4段落标记6．段落标记综合实例图4-4段落标记综合实例【例4-2】h#align=left|center|right标题文字/h##用来指定标题文字的大小，#取1～6的整数值，取1时文字最大，6时文字最小。属性align设置标题在页面中的对齐方式：left、center或right。缺省时默认为left。h#…/h#标记缺省显示宋体，在一个标题行中无法使用不同大小的字体。与用title…/title定义的网页标题不同，标题格式显示在浏览器窗口内，而不显示在浏览器的标题栏中。4.5文字标记1标题文字标记h#…/h#【例4-3】设置文字的标题。本例文件ex4-3.htm在浏览器中的显示效果如图4-5所示。4.5文字标记2．文字标记实例图4-5文字标记综合实例【例4-3】超链接从当前网页定义的位置跳转到其他位置，包括当前页的某个位置、Internet或本地硬盘或局域网上的其他文件，甚至跳转到声音、图片等多媒体文件。通过超链接还可以获得不同形态的服务，如文件传输、资料查询、电子邮件、远程访问等。当网页包含超链接时，网页中的外观形式为彩色（一般为蓝色）且带下划线的文字或图片。单击这些文本或图片，可跳转到相应位置。超文本链接使用锚点标记a来定义。4.6超链接锚点（anchor）标记由a定义，它在网页上建立超文本链接。通过单击一个词、句或图片，可从此处转到另一个链接资源（目标资源），这个目标资源有惟一的URL。具有以上特点的词、句或图片就称为热点。a标记的格式为：ahref=URLtarget=打开窗口方式热点/ahref属性为超文本引用，它的值为一个URL，是目标资源的有效地址。如果要创建一个不链接到其他位置的空超链接，可用“#”代替URL，即ahref=#热点/a。4.6超链接1锚点标记a.../atarget属性target设定链接被单击后结果所要开始窗口的方式。可选值为：_blank，_parent，_self，_top。_blank:空白视窗，保留原来的窗口，新开启一个窗口浏览所链接的文件内容；_parent:上一层页框视窗，若网页使用框架，则所链接的网页回到上一层的框架所在窗口；_self:本身视窗，默认链接显示方式，所链接的内容取代原来窗口的内容；_top:全视窗，以全窗口的方式出现所链接的网页，取代所有窗口内容。(1)链接到同一目录内的网页文件链接到同一目录内的网页文件的格式为：ahref=目标文件名.html热点文本/a(2)链接到下一级目录中的网页文件链接到下一级目录中网页文件的格式为：ahref=子目录名/目标文件名.html热点文本/a(3)链接到上一级目录中的网页文件链接到上一级目录中网页文件的格式为：ahref=../目标文件名.h