html简易教程Word下载.docx
《html简易教程Word下载.docx》由会员分享,可在线阅读,更多相关《html简易教程Word下载.docx(28页珍藏版)》请在冰豆网上搜索。
![html简易教程Word下载.docx](https://file1.bdocx.com/fileroot1/2022-12/12/7b7792ce-bbdb-45f1-bd43-4e23e659b075/7b7792ce-bbdb-45f1-bd43-4e23e659b0751.gif)
/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属性