XHTML入门学习教程:简单网页制作

所属分类: 网页制作 / HTML/Xhtml 阅读数: 1133
收藏 0 赞 0 分享

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

html中dom元素滚动条滚动控制小结详解

这篇文章主要介绍了html中dom元素滚动条滚动控制小结,文中通过实例代码给大家介绍了使用方法,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

如何为 Element UI 里的 autosize textarea 设置高度

这篇文章主要介绍了如何为 Element UI 里的 autosize textarea 设置高度,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

HTML使用栅格布局实现六种筛子样式的代码详解

这篇文章主要介绍了HTML使用栅格布局实现六种筛子的样式,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

HTML+CSS+JS模仿win10亮度调节效果的示例代码

这篇文章主要介绍了HTML+CSS+JS模仿win10亮度调节效果的示例代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

HTML+Sass实现HambergurMenu(汉堡包式菜单)

这篇文章主要介绍了HTML+Sass实现HambergurMenu,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

HTML页面自适应宽度的table(表格)

这篇文章主要介绍了HTML页面自适应宽度的table(表格),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

HTML n种方式实现隔行变色的示例代码

这篇文章主要介绍了HTML n种方式实现隔行变色的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

Table自适应以及溢出的一些设置详解

这篇文章主要介绍了Table自适应以及溢出的一些设置详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

HTML如何对齐多个表单中的文本框的实现

这篇文章主要介绍了HTML如何对齐多个表单中的文本框的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

html中车牌号省份简称输入键盘的示例代码

这篇文章主要介绍了html中车牌号省份简称输入键盘的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享
查看更多