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

HTML/XHTML教程
XHTML中不再使用HTML中的一些废弃元素
语义化的HTML结构怎么理解
Web 标准学习 理解结构和表现相分离
html5 标签
HTML5 新事件 小结
HTML5 b和i标记将被赋予真正的语义
HTML是网页制作者必须要学习掌握的
HTML DOCTYPE的缩写
Readonly和Disabled的区别
16进制颜色代码(完全)
H标记要在网页制作中合理使用
abbr标记和acronym标记
知名浏览器对DOCTYPE模式的选择机制
用标准dl,dt,dd标签抛弃table列表
html 标签ID可以是变量
iframe 自适应大小实现代码
HTML5 解析规则分析
HTML减肥 精简HTML标记制作网页
HTML5 File API改善网页上传功能
HTML 5 Reset Stylesheet

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-11   浏览: 67 ::
收藏到网摘: 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的核心内容吧。