XHTML基础教程 – 设计之家 //www.laura-marie.com 传播先进设计理念 推动原创设计发展 Mon, 24 Dec 2007 06:15:00 +0000 zh-Hans hourly 1 https://wordpress.org/?v=6.9.4 XHTML基础教程(二) //www.laura-marie.com/13342.html //www.laura-marie.com/13342.html#respond Mon, 24 Dec 2007 06:15:00 +0000

XHTML网页图片应用

 

合理的添加图片可以使一个网页更加的美观。

图片标签<img>

<img>标签用于在网页里插入图片。<img>标签有一个重要的属性”src”，它的属性值就是图片的地址。下面我们就在我们的index.html里插入一个图片。打开”index.html“文件，在</body>前加上如下代码：

<p><img src=”//images.sj33.cn/uploads/allimg/200712/20071224141723713.gif” alt=”技术支持”/></p>

保存后浏览网，请确认您的网页与该页面相同。

我们注意到<img>是一个空标签，需要在结尾加上一个”/”以符合XHTML的要求。这里的例子除src外还有一个属性alt，我们把它叫做做替换属性，当图片由于某种原因而无法显示的时候，alt的属性值就会代替图片出现；而当图片正常显示时，只要把鼠标停在图片上就会看到alt属性的属性值。

用图片作为链接

我们在之前的教程中曾经学习过创建超级链接，下面我们打开“index.html”并且将刚插入的代码改为下面这段：

<p><a href=”http://www.webjx.com/”><img src=”//images.sj33.cn/uploads/allimg/200712/20071224141723713.gif”alt=”技术支持”/></a>< /p>

保存后浏览网页，请再次确认您的网页与这个网页相同。看看图片是不是变成了超级链接，点击一下图片就会进入菜鸟吧的主页了。

关于XHTML的效验

从本节开始我们就不再修改”index.html”这个网页的外观了，现在将我们制作的网页送交权威机构检验一下。首先进入：http: //validator.w3.org/，该页面就是一个XHTML效验工具，它用来检验我们制作的网页是否符合XHTML的标准。您可以选择用网址效验，也可以上传文件效验。您可以选择文件上传效验，方法如下：

在”Validate by File Upload“有“Local File”一栏，点击浏览，找到并选中之前保存的”index.html”，然后点击“check”按钮。您的结果应该与我们通过网址效验的结果一样。返回如下错误信息：

Sorry, I am unable to validate this document because on line 3, 6-9, 12-14, 16-22 it contained one or more bytes that I cannot interpret as utf-8 (in other words, the bytes found are not valid values in the specified Character Encoding). Please check both the content of the file and the character encoding indication.

难道我们的网页不符合XHTML标准吗？请继续看下一节的内容。

]]> //www.laura-marie.com/13342.html/feed 0 XHTML基础教程(一) //www.laura-marie.com/13341.html //www.laura-marie.com/13341.html#respond Mon, 24 Dec 2007 06:06:00 +0000

什么是HTML?

简单点说：HTML是用来做网页的。它很简单，在接下来的1~2分钟之内你就会跟着我用HTML做一个简单的网页。

复杂点说：HTML（HyperTextMarkupLanguage的缩写），即超文本链接标记语言。它是在互联网发布超文本文件(通常所说的网页)的通用语言。

什么是XHTML?更先进难懂的技术？

简单点说：X是吓唬人的，其实XHTML就是严谨而准确的HTML。如果说HTML是汉语，那么XHTML就是标准普通话。对于现在才刚刚开始学习网页设计的朋友，直接学习XHTML是最佳的选择。

复杂点说：XHTML是HTML的“升级”产品。事实上它也属于HTML家族，对比以前各个版本的HTML，它具有更严格的书写标准、更好的跨平台能力。由于某些需要，XHTML将以前版本的HTML能够实现的一些功能交给了CSS，这意味着你将需要学习两种技术。但是这确实是Web未来发展的潮流。X代表“可以扩展的”。

学习XHTML的基础

学习XHTML不需要任何基础。相反，XHTML是学习学多其他知识的必要基础。有些人可能听说需要学习完HTML才可以学XHTML，事实并非如此，菜鸟吧(cainiao8.com)的XHTML教程就是面向没有任何基础的网页设计新手的。如果你已经熟练的掌握了HTML，就不必看我们的入门教程了，我们为已经熟悉了HTML的站长准备了从HTML到XHTML。

学习XHTML的方法

阅读XHTML教程以及其中的实例当然是学习XHTML的好办法，但是仅仅如此是绝对不够的。在学习的过程中，你可以找一些你以前比较喜欢浏览的站点，看看他们在实际的网站设计过程中是如何使用XHTML的。你只需要点击浏览器工具栏上的“查看”按钮，再选择“查看源文件”，就可以看到该页的代码了。

好了，关于XHTML的介绍就说到这里，下面就让我们开始学习XHTML吧。

用一分钟制作自己的第一个网页：

下面我们来试着做一个简单的网页，希望您能跟着我们操作，这只会花费您一分钟时间。现在您也许不知道那些尖括号“<>”和里面的字母究竟是些什么东西，不要担心，我们会在后面的教程中向您介绍。

首先请运行记事本，或在任意位置新建一个文本文档，在记事本内输入如下内容：

以下为引用的内容：
<html>
<head>
<title>我是这个网页的标题</title>
</head>
<body>
<p>这是我的第一个网页。</p>
</body>
</html>

输入完毕后将文件保存，命名为“index.html”。(点击“文件”―>“另存为”。在“文件名”一栏填入“index.html”，在“保存类型”一栏选择”所有文件”，然后点击“保存按钮”)

保存之后，双击该文件，浏览器就会自动打开这个网页了。请确认一下你的网页是否与该页面相同，如果相同，那么你就成功地完成了自己的第一个比较简陋的网页。

请注意，这只是一个简单的页面，虽然它在语法上符合XHTML的标准，但是如果要作为一个完整的、符合W3C标准的XHTML网页，它还缺少一些内容。相关内容将在后面的教程中介绍。这个网页仅仅是用来讲解一些基础的XHTML知识。

基础知识讲解

我们刚刚制作的网页以<html>开头，以</html>结尾，它们分别代表网页文件的开始和结束。

英文中head是头的意思，body是身体的意思。网页的<head></head>和<body>< /body>两部分就分别代表了网页的“头”和“身子”。也许你注意到了，我们网页的“头”里面“有一个<title>< /title>。title一词是标题的意思，网页的标题(title)将会显示在浏览器上方的标题栏中。而网页的身子，也就是< body>与</body>标签中间的内容将作为正文被显示在浏览器中。

这个网页很单薄，head和body中都没有什么内容。我们会在以后的教程中逐渐丰富网页的内容。但是现在请您记住一个概念：网页的头(head)是为浏览器写的，它将不会显示在页面上，而身子(body)是为网站的用户写的，是浏览器将要显示的内容。

菜鸟恶搞XHTML之错误示例

打开下面这两个错误示例看看。它们的代码都存在十分严重的错误，但是浏览器却会准确无误地显示这两个网页。

示例1――身子长在脑袋里
<html>
<head>
<title>我是这个网页的标题</title>
<p>这是我的第一个网页。</p>
</head>
<body>
</body>
</html>

看看上面这个网页，<head>和</head>之间的内容正常的显示在页面上了。但是这是滑稽的错误，把身子放在脑袋里了。

示例二――脑袋长在脖子下
<html>
<head>
</head>
<body>
<title>我是这个网页的标题</title>
<p>这是我的第一个网页。</p>
</body>
</html>

浏览器的适应能力实在是令人佩服，即使你将脑袋放在身子里它也认得出来。看看标题栏，标题完全正常显示。

好了，在实际应用的时候请不要犯上面这种低级错误。这会造成严重的后果：搜索引擎可能不收录你的网站；使用手机或者其他移动设备浏览你网站的朋友可能遇到未知错误。下面就赶快让我们来进入XHTML的核心内容吧。

]]> //www.laura-marie.com/13341.html/feed 0