从HTML语言到网上家园.一

时间：2007-02-17 来源：PHP爱好者

引言：什么是HTML

　　[本站原创] [连载教程系列] 《从HTML语言到网上家园》第一回目引言---第一章

　　引言：什么是HTML

　　HTML语言英文为Hypertext Marked Language，翻译成中文是“超文本标记语言”。它是一种文本格式的文档，加入了许多被称为链接标签(tag)的特殊字符串标记，这些标记符号组织与控制输出的效果。所谓超文本，就是它可以加入图片、声音、动画、影视等内容，从一个文件跳转到另一个文件，不受操作系统平台的限制，自由链接。使用HTML语言描述的文档，需要用浏览器观看才能显示出效果。下面我们编写一个HTML文档。

　　例 1：

　　我们用Windows自带的“记事本”新建一个文本文件，在编辑框输入下面的字符：

　　<html>
　　　　<head>
　　　　　　<title>我的第一个HTML文档</title>
　　　　</head>
　　　　<body>
　　　　　　<font color="blue">看到效果了吗？这是我制作的第一个网页!</font>
　　　　</body>
　　</html>

　　说明：字符缩进是为了看起来更清楚直观。完全可以不缩进字符。

　　点击“记事本”的“文件”菜单，“另存为”一个文件，文件名自己定义，在这里我们起名为“myweb.html”，保存类型为“所有文件”。然后我们找到刚才存盘的这个”myweb.html”文件，是不是文件已经改变成网页的图标了？双击打开，看到效果了吗？

图1 制作效果图演示

　　在后面的章节中，我们将学习HTML语言结构，标记符号，使用所见即所得的编辑工具高效编辑HTML文档，直到自己建设网站。记住，要循序渐进，不要用一目三行浏览新闻的习惯来学习网页制作教程。

　　很多人会认为学习网页制作学习Frontpage或者是Dreamweaver等工具怎样使用就行了，没有必要学习HTML语言。这种学习方法不是很好，因为Frontpage或者是Dreamweaver制作网页最终也是生成HTML文档，而且这些所见即所得的编辑工具毕竟还不能真正“所见即所得”，一些精细的效果还是需要手工编写部分代码。如果了解HTML基础知识，学习Frontpage或者是Dreamweaver也更快，也会为下一步学习ASP/PHP等动态脚本语言打下坚实的基础，事半功倍。再说HTML语言简单，学习起来也很快。

第一章 HTML语言结构

　　从上面的例子我们可以看到，HTML文档（在下面称作“网页”）里面有很多如<html></html><head></head><body><body>等字符，在浏览器中却看不到它们，只是看到“看到效果了吗？这是我制作的第一个网页”这串蓝色字符，这是为什么呢？

图2 注意红色选圈

　　<html></html><head></head><body><body>等等是HTML语言的标记符号，这些标记符号控制显示的效果，上例中<font color="blue">就是告诉浏览器将“看到效果了吗？这是我制作的第一个网页”显示成蓝色（blue）。

　　这些标记符号就是组成HTML言语的元素。组成HTML语言的元素有很多，它们各司其职，用于组织文件的内容和指导文件的输出格式。绝大多数标记（元素）都是成对出现的，即有起始标记（start tag）和结束标记（end tag）。每一个标记都有名称和可选择的属性，名称和属性放在“<>”尖括号中以与内容区别开来，注意”<”和标记名称之间不能有空格，标记名称和属性不区分大小写。在起始标记和结束标记之间的是标记要描述的主体内容属性。标记对中可以嵌套其他标记对。上例中的<font color="blue"> 就是一个标记，font是字体标记的名称，color是font标记的一个属性，它描述了字体是何种颜色，在这里定义的属性是”blue”（蓝色），你可以用记事本打开myweb.html文件名，将”blue”改成其他颜色的名称看看，比如”red”（红色）、“yellow”（黄色），保存之后刷新看看效果。学习网页制作要多动手，多练习。

　　一个网页最基本的结构：

　　说明：早期的HTML文件没有如此严谨，多数浏览器为保持兼容性，也支持不按此结构写的网页。各种浏览器对html元素及其属性的解释也不完全一样。

　　<html>是告诉浏览器HTML文档从这里开始，</html>是告诉浏览器HTML文档在次结束。<body></body>是标记了网页的主体，精彩的内容都在里显现。<head></head>是网页的头部文件，它说明了网页的一些情况，在这个标记对中也能嵌入其他标记，比如<title></title>、<meat>等标记。<title></title>标明该网页的题目，它显示在浏览器的窗口名称中。看上例显示效果中划红圈的地方就是<title><title>中的内容。title的长度没有限制，但过长的题目会导致折行，一般情况下它的长度不应超过64个字符。

　　在html文件中，有些标记只能出现在<head></head>中，如<title>和<meat>，不必讲究次序.绝大多数标记只能出现在<body></body>之间，而且出现在<body></body>标记对包含的标记讲究次序，改变次序会改变显示效果。我们将在以后的章节详细讲述这些标记。

php爱好者站 http://www.ｐｈｐｆａｎｓ.net 为phper提供一切资讯.