html简易教程Word下载.docx
《html简易教程Word下载.docx》由会员分享，可在线阅读，更多相关《html简易教程Word下载.docx（28页珍藏版）》请在冰豆网上搜索。
/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标签嵌套结构
我们在【2.1】的实例分析中可以看到，<
包含在<
标签里边，<
标签里边。
这种包含关系，我们称之为“嵌套”。
通过众多的HTML标签相互嵌套，形成了HTML文档的树形结构，这种树形结构在未来将要学习的【CSS】和【JavaScript】中会非常重要。
标签的正确嵌套，不仅能够减少代码错误和网页显示错误的出现，也有利于对文档树形结构的控制，因此我们需要遵守正确的嵌套规则。
错误的嵌套可能不会影响到网页的显示效果（这是浏览器容错能力的体现，但这种容错能力不是浏览器必须具备的，因为这并不在Web标准之内），但这不仅增加了浏览器的负担，也严重影响了代码的查看和修改。
下面是几条必须遵守的嵌套规则：
1.一对括号内部不可以出现其他的括号（比如<
head<
，类似的情况是不允许的）；
2.<
标签放在嵌套结构的最外层；
3.<
必须放在<
标签对内部，而且二者不可嵌套；
4.<
meta>
base>
等文档信息定义标签需要放在<
标签内；
5.包含文档内容的标签需要放在<
6.内联元素需要放在块级元素内（我们会在【HTML元素及属性】一章讲到）；
……
以上只是我自己的一部分总结，更多的嵌套规则需要大家从学习和实践中总结。
2.2.3HTML注释
使用HTML注释可以方便开发人员对代码添加文本注释，也方便对部分代码进行屏蔽。
被注释掉的文本内容依然可以在代码文件中看到，不过不会显示在浏览器中。
HTML文档中注释的方法只有一个，就是用“<
!
--”和“-->
”两个字符串来包含住需要被屏蔽掉的代码文本。
被屏蔽的内容可以是任意的，它们都不会在浏览器中显示。
这是一个简单的例子：
网页中的部分代码：
1<
--2并不会被显示出来-->
3<
浏览器的显示结果：
13
2.2.4书写习惯
1.标签、属性、属性值需要用小写字母；
2.标签需要被关闭；
3.标签嵌套顺序必须正确；
4.标签属性使用name="
value"
的格式，属性间用空格分开；
5.需要单位的属性值（比如width="
50px"
），必须有正确的单位
6.保持良好的代码缩进习惯（这一点我们在【1.3.1】的实例中已经表现得很明显），代码缩进不仅能够正确的表现出HTML标签之间的嵌套关系，还方便代码的查看和改写；
以上只是我自己的一部分总结，更多的书写习惯需要大家从学习和实践中总结。
2.3<
DOCTYPE>
文档类型定义
声明位于HTML文档的最前面的位置，处于<
标签之前。
此标签可告知浏览器文档使用哪种HTML或【XHTML】规范。
下面是一个例子：
DOCTYPEhtmlPUBLIC"
-//W3C//DTDXHTML1.0Strict//EN"
"
http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
在上面的声明中，声明了文档的根元素是html，它在公共标识符被定义为"
的DTD（DTD（DocumentTypeDefinition）是一套关于标记符的语法规则，读者只需要了解其功能就足够了）中进行了定义。
浏览器将明白如何寻找匹配此公共标识符的DTD。
如果找不到，浏览器将使用公共标识符后面的URL作为寻找DTD的位置。
HTML4.01规定了三种文档类型：
Strict、Transitional以及Frameset，分别表示严格版本、过渡版本以及基于框架的HTML文档。
1.HTMLStrictDTD严格文档类型
DOCTYPEHTMLPUBLIC"
-//W3C//DTDHTML4.01//EN"
//www.w3.org/TR/html4/strict.dtd"
如果您需要干净的标记，免于表现层的混乱，请使用此类型。
请与层叠样式表（【CSS】）配合使用。
2.HTMLTransitionalDTD过渡文档类型
-//W3C//DTDHTML4.01Transitional//EN"
//www.w3.org/TR/html4/loose.dtd"
TransitionalDTD可包含W3C所期望移入样式表的呈现属性和元素。
如果您的读者使用了不支持层叠样式表（CSS）的浏览器以至于您不得不使用HTML的呈现特性时，请使用此类型。
3.HTMLFramesetDTD基于框架的文档类型
-//W3C//DTDHTML4.01Frameset//EN"
//www.w3.org/TR/html4/frameset.dtd"
FramesetDTD应当被用于带有框架的文档。
除frameset元素取代了body元素之外，FramesetDTD等同于TransitionalDTD。
读者并不需要将上面的内容完全记住，只学会能在相应的环境里使用合适的!
DOCTYPE就可以了。
2.4<
文档信息定义
标签用于定义文档的头部，它是所有头部元素的容器。
中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
文档的头部描述了文档的各种属性和信息，包括文档的标题、在Web中的位置以及和其他文档的关系等。
绝大多数文档头部包含的数据都不会真正作为内容显示给浏览者。
下面是摘自分享互联网（）首页文档<
区域的部分代码，我们将对此做出简要分析。
-//W3C//DTDXHTML1.0Transitional//EN"
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
htmlxmlns="
//www.w3.org/1999/xhtml"
xml:
lang="
zh-CN"
lang="
metahttp-equiv="
Content-Type"
content="
text/html;
charset=utf-8"
metaname="
keywords"
VeryCD,电驴,eMule,dianlv,dianlu,下载,资源,电影下载,ed2k,资源分享"
description"
互联网资源分享平台，通过电驴软件给用户提供最庞大、最便捷、最人性化的资源分享网络"
scripttype="
text/javascript"
varforceBroadScreen=true;
broadScreenCSSRevision="
26863"
;
/script>
VeryCD-分享互联网<
linkrel="
search"
type="
application/opensearchdescription+xml"
href="
title="
电驴资源"
linktype="
text/css"
rel="
stylesheet"
media="
all"
src="
……
--[ifIE]>
<
styletype="
#favIframe{
height:
166px;
}
……
/style>
[endif]-->
第1行的<
标签定义了该文档为过渡类型的【XHTML】文档；
第2行中的<
标签附加了“xmlns”、“xml:
lang”和“lang”三个属性，它们分别定义了文档的命名空间，XHTML文档中元素内容的语言代码和元素中内容的语言代码，我们将在【HTML属性】一章中详细讲解；
第4-6行的三个<
标签分别定义了文档的编码、关键字和描述信息以及信息的具体内容；
第7-9行的<
script>
标签定义了文档的JavaScript脚本信息，我们将在【JavaScript】教程中详细讲解；
第10行的<
标签定义了文档的标题；
第11、12行的<
link>
标签向文档内引用了一个【XML】文档和一个【CSS】文档；
第13行的<
标签向文档内引用了一个【JavaScript】文档；
第15-22行的<
是对不同浏览器选择性显示，用于解决浏览器的兼容性问题（我们会在【CSS】教程中专门有一章讲到【解决浏览器兼容性】）。
其中的<
style>
标签定义了文档的样式表（【CSS】）（我们会也在【CSS】教程中详细讲解）。
2.4.1title文档标题
语法：
这里是文档标题<
元素定义了文档的标题。
浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标题栏或状态栏上。
同样，当把文档加入用户的链接列表或者收藏夹或书签列表时，标题将成为该文档链接的默认名称。
标签是<
元素中唯一必须存在的标签。
2.4.2<
连接基准位置
basehref="
"
target="
其中：
href属性值为URL地址；
target属性值有5个，分别代表了链接的不同打开方式（我们会在【HTML元素及属性】一章中详细讲解），而且这个属性可以省略。
标签为页面上的所有链接规定默认地址或默认目标，也可以规定链接的打开方式。
比如我们将网页<
的href属性值设为“link”，就是我们所点击的链接都将转到XX的网站下，不论这个地址是否存在。
我们一般不会设置<
标签，不过，有时候它会非常有用。
2.4.3<
文档引用
URL"
rel属性值代表了当前文档与被链接文档的关系；
type属性值代表了被连接文档的MIME类型（）；
href属性值为被链接文档的URL地址。
标签定义文档与外部资源的关系，最常用于链接外部样式表（这一点将在【CSS】教程中讲解）。
2.4.4<
元信息定义
HTML,ASP,PHP,SQL"
有三组属性，它们都和content属性
升级会员 