猪八戒学做网站之HTML5篇（5）：Hello HTML

来源：互联网发布：sql区分二范式和三范式编辑：程序博客网时间：2024/04/26 00:29

出了几天差，回来一看，猪八戒正在网上津津有味地看着什么呢。

猪八戒看见我回来了，马上站了起来：“师父，你回来啦！”一边说还一边接过我的行李包。

我把行李包递给猪八戒后问他：“我不在的这几天，你都学了些什么了？”

“没学什么，嘿嘿。”猪八戒抓了抓后脑勺，不好意思地说道。

“Hello HTML会做吗？”我问。

“什么是Hello HTML？”

我笑了笑：“你傻啊？学习任何一种语言的时候，第一个程序都是Hello World，那学HTML的时候，第一个网页应该也是Hello HTML嘛。”

“哦，这个容易。”猪八戒说完，就跑到自己计算机前捣鼓了一会儿，说，“师父，好了，你看！”

我伸头看了一眼，还不错，Hello HTML是出来了，如下图所示。

看完之后，顺手查了一下源代码，嘿，这源代码可真够简单的啊，如下图所示。

我回到自己的座位上，坐了下来，对猪八戒说：“小朱啊，首先一点的是要肯定，你的第一个网页基本上是成功的，因为，你的文件的扩展名是htm。扩散名是htm说明了这个文件是一个网页文件，可以使用浏览器打开该文件。”

“另外，”我看见八戒点了点头，接着说，“网页的扩展名还可以是html，这两者都是可行的。”

“为什么扩展名即可以是htm，又可以是html呢？”猪八戒问道。

“这是历史问题了，从理论上来说，静态网页文件的扩展名应该是html，但是为了兼容以前老操作系统、老软件，所以静态网页的扩展名也可以是htm。”我回答道。

“什么意思？我没有听懂。”猪八戒问。

“你学过DOS没有？”我问。

猪八戒点了点头。

“在DOS中，对文件名的命名有什么要求？”我反问。

猪八戒愰然大悟：“文件名最多8个字符，扩展名最多3个字符，所以，网页文件的扩展名只能是htm。”

“是的，虽然说DOS现在已经很少用了，但是还有一些老软件还是只能识别这种DOS命名规则的文件，所以，在编写网页文件时，最好还是使用htm为扩展名。”

“我明白了。”猪八戒回答道。

“好，现在再说说你的这个文件的缺点。”我看了一眼猪八戒，他正俯听细听着，“你的这个文件里，只有一行文字，虽然现在的主流浏览器都能直接将这行文件输出，但是从严格意义上来说，你的这个文件还不算是一个完整的HTML文件。”

“那完整的HTML文件是什么样的？”

“首先，完整的HTML文件必须是以<html>开头，</html>结尾的。”我一边说，一边在记事本里输入了以下代码：

输入完毕后接着说：“上次我已经告诉过你，HTML是一个标记性语言，而<html>可以告诉浏览器，这是个HTML文件的开始，而</html>则是告诉浏览器，这是HTML文件的结束。”

“哦，那我把它们加上，这样行不行？”猪八戒输入以了下代码：

<html>Hello HTML</html>

“嗯……这个怎么说呢？”我想了想，“虽然你这个文件是说明了HTML文件的开始和结尾，但是在HTML文件中，还将整个HTML分成了两个部分，一个是head部分，一个是body部分。”说完，我输入了以下代码。

<html><head></head><body>Hello HTML</body></html>

写完之后，我接着对猪八戒说：“你看上面的代码，<html>和</html>之间加入了<head></head>和<body></body>两对标签，其中<head>和</head>之间是头信息，头信息是不在浏览器窗口中显示的；<body>和</body>之间的内容才会在浏览器窗口显示出来。”

猪八戒点了点头：“所以要把Hello HTML放在<body>和</body>之间。那<head>和</head>之间应该放些什么内容呢？”

“这里面可以放的内容就多了，比如说<tilte>和</tilte>，用于申请网页的标题，你看这段代码。”说完，我输入了以下代码。

<html><head><title>这是我的第一个网页</title></head><body>Hello HTML</body></html>

“你看，现在我在<head>和</head>之间加上了<title>和</title>，而<title>和</title>之间加入了文字，这些文字就是当前网页的标题，而标题一些会在浏览器的标题栏或标签页上显示出来，你看看运行结果。”说完，我双击刚才编好的网页，在浏览器中显示的结果如下所示。

在上图中的左上角中可以看到<title>和</title>之间的文字，而这些文字并没有在浏览器窗口里显示出来。

“这回看明白了吧？”我问猪八戒。

猪八戒点了点头，又问道：“那在<head>和</head>之间除了可以放<title>标签之外，还可以放什么标签？”

“可以放的标签很多，比如说<script>标签，用于声明脚本文件的；<link>标签，用于声明外部文件的；<style>标签，用于声明网页样式的；<meta>标签，用于描述网页文档属性的……”

我还没有说完，猪八戒就打断我了：“师父师父，你别说这么快，我记不住。”

“哦，这些，你先不用记住，你只要记住html、head、title、body四个标签就行了。”

“哦，这几个还行，我能记住。”猪八戒看上去很有信心。

“好，今天就到这，刚出差回来，我累了。”说完，我不再说话，心想，要是这几个你都记不住的话，那真是猪八戒了。

*******************************************************************

小结：

1、静态网页的扩展名是htm或html。

2、网页代码应该以<html>开头，以</html>结束。

3、网页可以分为头部分和内容部分两个部分，其中头部分以<head>和</head>为标记，内容部分以<body>和</body>为标记。头部分的内容不会在网页中显示。

4、<title>和</title>之间的内容为网页的标题，可以显示在浏览器窗口的标题栏上，也可以显示在标签栏上。

*******************************************************************

原创不容易，转载请注明出处。（http://blog.csdn.net/smallfools）