当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > XHTML入门学习教程:简单网页制作

HTML/XHTML教程
一些不太常用的XHTML标签用法以及实例
网页中图片的设置涉及的三个问题
商业HTML邮件的制作建议
HTML Marquee 字符片段滚动
DOCTYPE 文档类型声明(网页爱好者必看)
纯HTML标签你熟悉多少?
HTML元素的ID和Name属性的区别
HTML meta的大作用
HTML标签tbody的用法与说明
HTML 特殊字符转换表
HTML基础 HTML的组成结构
HTML基础之HTML内容细则
Shtml 精简教程
浅谈html table 标签
html Frame、Iframe、Frameset 的区别
HTML 网页页面切换的各种变换效果
HTML的10个表格相关标记
让IE8启动IE7兼容模式的代码
HTML 结构化实现方法
xhtml的块级标记小结

HTML/XHTML教程 中的 XHTML入门学习教程:简单网页制作


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-11   浏览: 56 ::
收藏到网摘: n/a


用一分钟制作自己的第一个网页:
下面我们来试着做一个简单的网页,希望您能跟着我们操作,这只会花费您一分钟时间。现在您也许不知道那些尖括号“<>”和里面的字母究竟是些什么东西,不要担心,我们会在后面的教程中向您介绍。
首先请运行记事本,或在任意位置新建一个文本文档,在记事本内输入如下内容:
                         以下为引用的内容:
<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的核心内容吧。