HTML教程Word格式.docx
《HTML教程Word格式.docx》由会员分享，可在线阅读，更多相关《HTML教程Word格式.docx（28页珍藏版）》请在冰豆网上搜索。
我们在浏览器中看到的就是HTML文档所描述的内容。
我们所说的网页一般就是指由HTML代码构成的文本文档，网站主要是由一些相互关联的HTML文档组成的。
1.3HTML文档
1.3.1编写第一个HTML文档
在初步认识了HTML之后，让我们通过一个简单的实例来直观的感受一下网页和HTML的关系。
打开你常用的一个【文本编辑器】，新建一个文本文档，将下面几行HTML代码粘贴进去
<
html>
head>
<
title>
这里是网页标题<
/title>
/head>
body>
这里是网页内容
p>
这里是一个文本段<
/p>
/body>
/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标签都是由包含在两个尖括号内的英文和字符组成的（如<
、<
br/>
）正是这些标签和一些其他的文本构成了众多的【HTML元素】，这些元素又构成了HTML文档，也就是我们在浏览器中看到的网页。
HTML标签大概分为两种：
一种是成对出现的，如<
等等。
这些标签由开始标签和结束标签组合而成，结束标签都是在开始标签内加上一个“/”组成的（如<
和<
）。
一对标签之间一般会包含一些文字（构成HTML语句，也就是【HTML元素】）或者其他的标签（就是【标签嵌套】）。
另一种是单独出现的，如<
hr/>
imgsrc="
/images/img.jpg"
/>
等，这些标签只有一个，没有与之相对应的结束标签，但它们依靠在标签最后加上“/”来结束（一定要看清楚，是空格+“/”），这个“自我结束”的方法非常重要。
2.2.2
升级会员 