html简易教程.docx

html简易教程.docx

《html简易教程.docx》由会员分享，可在线阅读，更多相关《html简易教程.docx（28页珍藏版）》请在冰豆网上搜索。

html简易教程

HTML教程

——静语计算机协会

（教程的每一个章节都配有示例代码，方便大家参考。

）

第一部分HTML教程

前言

目录

第1章HTML简介

1.1什么是HTML

HTML（HyperTextMark-upLanguage）即超文本标记语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言（其他的语言包括【CSS】、【JavaScript】、VBScript、【PHP】、ASP等等，其中的一些我们将在以后陆续讲解）。

HTML是由W3C（万维网联盟）制定的国际标准，现在流行的是在1999年12月24日发布的HTML4.01标准和在2002年8月1日发布的XHTML1.0修正版（XHTML基于【XML】，是对HTML的优化、增强和改进，请参看【XHTML】）。

现在不得不关注的是HTML5，它在最近一段时间突然成为Web开发的焦点，我们也会在合适的时候介绍【HTML5】的相关内容。

1.2HTML的作用

HTML可以说明网页中的文字、图形、动画、声音、表格、链接等信息，这些信息最终由【浏览器】识别并加以显示。

我们在浏览器中看到的就是HTML文档所描述的内容。

我们所说的网页一般就是指由HTML代码构成的文本文档，网站主要是由一些相互关联的HTML文档组成的。

1.3HTML文档

1.3.1编写第一个HTML文档

在初步认识了HTML之后，让我们通过一个简单的实例来直观的感受一下网页和HTML的关系。

打开你常用的一个【文本编辑器】，新建一个文本文档，将下面几行HTML代码粘贴进去

这里是网页内容

这里是一个文本段

将文档保存成.htm或者.html格式，然后双击打开，或者通过【浏览器】打开，就可以看到如【图1-1】所示的效果。

图1-1

1.3.2文本编辑器

由于HTML文档全部是文本文档，所以我们在编写HTML文档的时候，就需要一个文本编辑器。

一个顺手的编辑器，不仅方便代码的编写，还能减少错误，并能大大提高工作效率。

一个好的代码文本编辑器，应该具有多语言支持、语法高亮、语法着色、拼写检查、搜索替换、代码提示等等功能。

下面简要介绍几个常用的文本编辑器。

1.Notpad++

Windows下使用较多的一款文本编辑器，是GPL许可证下发行的自由软件。

除了具有上述几个基本功能外，还可以支持插件扩展，功能异常强大。

你可能不敢相信，你现在所看到的文本都是在Notpad++里边编辑出来的。

2.EditPlus

也是Windows下常用的文本编辑器，功能上并不弱于Notpad++，但由于它是共享软件，用户数量上可能会少一些。

3.UltraEdit

UE不仅是一款强大的文本编辑器，更是一款强大的文件分析工具。

它的16进制编辑功能非常强大，常被用作文件分析和修改，如破解和软件语言的本地化。

它也是一款共享软件。

4.gEdit

Linux系统中GNOME桌面系统中自带的文本编辑器，同样支持多语言、语法着色等功能，能够胜任大部分代码编写工作。

5.VIM

Linux里边发展起来的强大的文本编辑器，以简洁高效著称，不过上手比较慢，但其卓越的效率不可小觑。

目前也有Windows版本可用。

Windows系统中常用的写字板功能虽然不是很强大，但作为一个学习初期是用的工具也已经足够了。

但我们不推荐使用记事本和Word，记事本功能太过简单，而Word会使代码编写工作变得非常复杂。

你可以参照一些网上的文章来选择你喜欢的文本编辑器。

>>15款很棒的文本编辑器（

1.3.3浏览器

我们浏览网页的行为都要通过浏览器来完成，浏览器也是网站作者和网站用户唯一的交流媒介，所以浏览器对于网站的作者和用户都非常重要。

网站的浏览者希望浏览器能够便捷、实用，而且安全可靠；网站的开发者则需要考虑各种浏览器对Web标准的支持以及它们之间的差异，而且开发工作需要随时在浏览器上进行测试，因此对浏览器的种类和开发测试条件都有很高的要求。

下面就简单介绍几款开发必备的浏览器和开发工具。

1.IE

由于Windows操作系统霸占了大部分用户的电脑，其配套的IE浏览器自然就一家独大，虽然近期其他浏览器的市场比例有所增加，不过仍然改变不了IE的地位，其最新版本为9.0。

IE7-IE9几个版本已经能比较好地执行Web标准，不过这并不能掩盖臭名昭著的IE6。

IE6及之前的版本对Web标准执行的比较差，因此Web开发者的电脑里需要有一个IE6用来测试网页的兼容性（我们后边有一个专门的章节来讨论【浏览器兼容性】）。

不过我们仍然建议您将电脑上的浏览器升级为最新的版本，新版本不仅安全、可靠，还会有新的功能和支持，而且保持版本最新才是主要的发展趋势。

（此时你会有疑问了：

我先提到需要有IE6，又说要更新到最新版，岂不是矛盾？

答案是：

NO。

请看下面一段）

2.IECollector

IECollector是U制作发行的免费的IE集成安装包，包含IE1-IE8共13个版本的独立浏览器，方便开发者进行多版本兼容性测试，目前最新版为V1.7.1.0。

有了它，就可以随时测试各版本的IE浏览器了。

（不过我建议只安装6.0及以上的几个版本，因为更早的版本使用率已经很低了，没有必要再去继续兼容了，因为做兼容性测试是非常浪费时间的。

）

3.Firefox

火狐大家肯定不会陌生了，这是一款非常优秀的浏览器，其最新版本为4.0。

它具有功能强大、跨平台等诸多特性，是Web开发不可缺少的浏览器。

4.MozillaFirefoxCollector

U同样为我们提供了一个Firefox的集成安装包，包含Firefox2.0-5.0共6个版本的独立浏览器，目前最新版为V1.0.3.6。

5.GoogleChrome

Chrome是Google的一款免费浏览器产品，以其简洁、高速而深受用户喜爱，其最新版本为V13.0。

6.Opera、Safari虽然用户数量不是很多，不过它们也是非常优秀的浏览器。

1.3.4辅助开发工具

Web开发绝不仅仅是“代码编写+浏览器查看”的方式，很多问题是无法通过这种方式来发现和解决的，因此我们需要借助其他的工具，如参考手册、调试工具、截图工具、标尺工具等等。

1.HTML参考手册

HTML参考手册是HTML语法、格式、标签信息等的集合，方便开发人员随时查阅和参考，它的作用像是字典一般，是开发人员必备的工具之一。

熟练掌握各种手册的使用，也是开发人员必备的技能之一。

最常用的HTML手册就是W3School。

W3School不仅提供各种Web开发的教程、实例、参考手册，我们还可以进行在线的练习。

它既有在线版，也有可供下载保存的离线版。

2.Firebug

Firebug支持HTML、【CSS】、【JavaScript】等的查看和调试，是源于Firefox的一款开发类插件，目前已经可以在多种浏览器中安装，是Web开发者最喜爱的插件之一。

3.WebDeveloper

一款网页分析调试插件，有强大的网页内容查看、分析和调试功能，还有网页元素禁止功能，现在也可以支持多种浏览器，是Web开发者不可缺少的帮手。

4.AwesomeScreenshot

一款非常好用的网页截图插件，可以方便的进行整页截图、截图裁剪和标注，目前也可以支持多种浏览器，是一款非常好用的工具。

5.Chrome开发人员工具

开发人员工具是Chrome内置的功能，可以方便的分析网页元素和CSS样式，很方便CSS的编写和调整，我自己就是用Notpad++和Chrome做网页代码的编写工作的，效率比较高。

6.AdobeDreamweaver和MicrosoftFrontpage

这两个软件功能非常强大，同是“所见即所得（WYSIWYG）”的网站开发工具，不过其功能大多数我们都不会用到，如此复杂的软件反而会拖慢我们的开发速度（而且我发现它们对Web标准的支持并不是很好），所以我不推荐使用它们来进行网页的制作。

7.上面介绍的仅仅是众多插件的一小部分，还有很多优秀的开发类插件，请读者自己去发现和体验。

1.3.5服务器

我们所享受的一切网络服务都是由互联网上的服务器提供的，比如提供网页浏览服务的HTTP服务器，支持网络游戏运行的数据库服务器，提供电子邮件功能的邮件服务器。

我们在这里简单介绍一下HTTP服务器。

HTTP服务器主要提供网站服务，服务器通过接收网站浏览者电脑上的浏览器发送来的请求，做出相应的响应。

这些响应一般是传送网页、图片等数据到浏览器，这样浏览者就可以看到服务器上的网页了。

【图1-2】展示了我们访问网站的主要流程。

图1-2

我们目前的学习是否需要自己的服务器呢？

答案是：

不需要。

我们现在学习的内容比较简单，仅仅能通过浏览器来查看我们所编写的HTML文档就可以了。

第2章HTML基础

2.1HTML结构

HTML文档是由HTML命令组成的描述性文本文档，HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的网页的具体内容。

在【1.3.1】中，我们介绍了一个简单的网页文件的代码，下面来分析一下它的结构。

HTML文档最顶层的标签，代表该文档为HTML代码文档

网页的头部（head），描述浏览器所需的信息

网页标题

网页头部结束

网页的主体（body），包含了网页的具体内容

这里是网页内容

这里是一个文本段

网页主体结束

HTML文档结束

这样，我们已经可以理解下面的几个问题：

1.HTML文档是由HTML语句和一些其他的文本组成的文本文档；

2.HTML语句由HTML标签、标签属性以及属性值组成（后面的章节将会专门讲到【HTML元素及属性】）；

3.我们在浏览器中看到的网页就是HTML文档。

2.2HTML语法、规则和书写习惯

遵循HTML语法规则，养成良好的代码编写习惯，不仅能减少错误，还能大大提高开发效率，而且会有利于后期代码的查看修改。

2.2.1HTML标签

我们在前面的实例分析中，已经大致了解了HTML文档的基本结构，也认识了几个主要的HTML标签。

HTML标签都是由包含在两个尖括号内的英文和字符组成的（如、

HTML标签大概分为两种：

一种是成对出现的，如、、等等。

这些标签由开始标签和结束标签组合而成，结束标签都是在开始标签内加上一个“/”组成的（如和）。

一对标签之间一般会包含一些文字（构成HTML语句，也就是【HTML元素】）或者其他的标签（就是【标签嵌套】）。

另一种是单独出现的，如
、