教程html基础.docx

1、教程html基础html基础(1)什么是HTML? 来源：宝之林 等级：默认等级 发布于2005-11-05 13:33 未经允许，XX 【字体：大 中 小】 HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。神奇吗?一点都不神奇,因为现在你看到的就是这种语言写的页面.哈哈. 也许你听说过许多可以编辑网页的软件,事实上,你不需要用任何专门的软件来建立HTML页面；你所需要的只是一个文字处理器（如McrosoftWord记事本写字板等等）以及HTML的工作常识。其实你很快

2、就会发现,基础的HTML语言简直容易死了。HTML只不过是组合成一个文本文件的一系列标签。它们很乐队的指挥,告诉乐手们哪里需要停顿,哪里需要激昂.HTML标签通常是英文词汇的全称（如块引用:blockquote）或缩略语（如“p”代表Paragragh），但它们的与一般文本有区别，因为它们放在单书名号里。故Paragragh标签是,块引用标签是。有些标签说明页面如何被格式化（例如，开始一个新段落），其他则说明这些词如何显示(使文字变粗)还有一些其他标签提供在页面上不显示的信息例如标题。关于标签，需要记住的是，它们是成双出现的。每当使用一个标签如,则必须以另一个标签将它关闭。注意“blockqu

3、ote”前的斜杠，那就是关闭标签与打开标签的区别。基本HTML页面以标签开始，以结束。在它们之间，整个页面有两部分标题和正文。标题词夹在和标签之间这个词语在打开页面时出现在屏幕底部最小化的窗口。正文则夹在和之间即所有页面的内容所在。页面上显示的任何东西都包含在这两个标签之中。那么让我们建立一个简单的范例吧，非常容易的。第一步，当然是要建立一个新的文本文件（记住，如果你在使用比较复杂的文字处理器，就应该用“纯文本”或“普通文本”来保存），将它命名为“xxxx.html”。(随便你起一个什么名字,但记住,要用英文)然后你可以用浏览器将它打开，你会看见最简单的自己做的页面。html基础(2)什么是U

4、RL？ 来源：宝之林 等级：默认等级 发布于2005-11-05 13:33 未经允许，XX 【字体：大 中 小】 统一资源定位器（URL）指的是Internet文件在网上的地址。好比一个街道在城市地理上地址。url使用数字和字母按一定顺序排列以确定一个地址。比如，要是有一个街道地址是：统一资源定位器（URL）指的是Internet文件在网上的地址。好比一个街道的地址。它使用数字和字母按一定顺序排列以确定一个地址。比如，要是有一人，他的联系方式是：100035 北京市西城区八道湾胡同20号 王雨你会想到，王雨是一个人名，他住在北京市西城区一个叫做八道湾的胡同里,邮政编码是100035。它的住宅

5、在20号。同样道理，你也可以分解一个URL。比如：URL的第一个部分http:/表示的是要访问的文件的类型。在网上，这几乎总是使用http（意思是超文本转换协议,hypertext transfer protocol.因为它是用来转换网页的协议.)有时也使用ftp（file transferprotocol),意为文件传输协议,主要用来传输软件和大文件（许多做软件下载的网站就使用ftp作为下载的网址）;telenet（远程登录）,主要用于远程交谈;以及文件调用等,意思是浏览器正在阅读本地盘外的一个文件,而不是一个远程计算机.让我们回到上面提到的URL。第二部分是。这是主机的名字。表示要访问的文

6、件存放在名为www的服务器里，该服务器登记在域名之下。多数公司有一个指定的服务器作为对外的网上站点，叫做www。所以，在你进行网上浏览时，如果你拿不准URL的名字，在www后加上公司的域名是个好办法。比如：或。html基础(3)查看源文件 来源：宝之林 等级：默认等级 发布于2005-11-05 13:33 未经允许，XX 【字体：大 中 小】 我们能用查看源文件这个办法来教会你所有关于HTML需要知道的一切.这是最初的一步，也许有人会反对这种说法，而最后一步，就是需要学习如何在网上发布，这样才能让你制作的网页让大家看到。 与其他图片、动画文件或者各种各样的产品不同，所有的网页都能从html的

7、源文件中看到起制作的本来面目,并告诉愿意了解的网友，站点是如何建成的.网页的构架使你能查看任何网页的源代码(换言之,就是显示页面样子的HTML文档).所以任何时候你想知道他们是怎么做的时,你所要做的就是从浏览器菜单（通常的菜单名是View(查看),选项是Source(源)或Document surce(文档源)）选择查看源(ViewSource),然后HTML文件将会打开-记事本或者你机器上安装的任何文字处理软件打开.打开源文件之后,你就可以将它另存为文本文件或者html文件进行研究，你可以在文本文件中剪切和粘贴任何你想要的内容.但是如果你没有另存的话，你将不能改变源文件，以免页面被改变,记住

8、，你是在查看一个复制文件,而不是文件本身.学会查看源文件是学会HTML的最佳途径.模仿是学习和进步的最佳形式。我们接下来的教程能高效率教会你如何编写、制作HTML文件，但是查看源文件是保持了解网上发布者在做什么,如何做的最佳途径.不管怎样,源文档不是万能的.它告诉你所有关于HTML-甚至JavaScript(在HTML文档中全显示的代码)-所需要知道的一切的同时,它并不显示服务器一方所发生的一切.比如说,如果一个站点被挂靠到一个数据库或使用CGI正本以增强其功效时,如一些计算功能或者数据调用功能，这个源文档不会显示有关程序运行的任何迹象.对于Java程序包和插入也是如此.html基础(4)段

9、落 来源：宝之林 等级：默认等级 发布于2005-11-05 13:33 未经允许，XX 【字体：大 中 小】 开始一个段落 在所有的HTML标签中,段落标签是最普遍也是对用户最友好的。标签在每个段落的开头加入，在每个文本块之前跳过一行.关闭段落不需要用;继续下一个标签时段落会自动关闭.看看以下两个普通段的HTML:说到接触网络也可以说是机缘巧合，那是去年的寒假，因为早些时候我的腿打篮球给摔断了，所以寒假哪里的去不了，无奈之中便买来一个“猫”，申请了一个帐号，也就开始了我的网络生活，也开始了我的这个网上之“梦” 第一次上网就象大多数的朋友们一样，下定决心不去聊天浪费时间，而是主要学习一下网络知

10、识，看看新咨讯等等但是有一天，随着一个朋友的到访，一切都变了。小虫是我的大学同学，一个“才子”，很聪明的人，也很可爱，可惜和大多数聪明人一样，就是不用功，和我们一帮兄弟整天混日子。这两个段落这样显示: 说到接触网络也可以说是机缘巧合，那是去年的寒假，因为早些时候我的腿打篮球给摔断了，所以寒假哪里的去不了，无奈之中便买来一个“猫”，申请了一个帐号，也就开始了我的网络生活，也开始了我的这个网上之“梦” 第一次上网就象大多数的朋友们一样，下定决心不去聊天浪费时间，而是主要学习一下网络知识，看看新咨讯等等但是有一天，随着一个朋友的到访，一切都变了。小虫是我的大学同学，一个“才子”，很聪明的人，也很可爱

11、，可惜和大多数聪明人一样，就是不用功，和我们一帮兄弟整天混日子。 很简单吧？不可能学不会吧？接下来你会学到更多的html语言。 来源：宝之林 等级：默认等级 发布于2005-11-05 13:33 未经允许，XX 【字体：大 中 小】 本文是创建HTML文件的初级读物。HTML 是 WWW（World Wide Web )中使用的超文本标记语言。本指南的目的是介绍如何使用HTML和创建 web 文件。本文中的链接指向一些附加的信息。你还可以到你本地的书店查看一下，那里可能会有很多有价值的关于 Web 和 HTML 的资料。 前言术语WWW World Wide Web Web World Wi

12、de Web SGML Standard Generalized Markup Language-标准通用标记语言，描述标记语言的一个标准 DTD Document Type Definition-文本类型定义, 这是一个用SGML写成的标记语言的正式说明 HTML HyperText Markup Language- 超文本标记语言, 它是一个SGML DTD HTML 是一套独立于平台的格式定义( 用标记说明 ) , 用来描述World Wide Web 文档中的各个组成部分. HTML 是Tim Berners-Lee 在 CERN (在日内瓦的欧洲粒子物理实验室) 发明的. 本文不包括

13、的内容本指南假设读者具有以下基础: 知道如何使用 NCSA Mosaic 或者其它的 Web browser 对Web 服务器和客户 browsers 有一般的理解 可以访问 Web 服务器 (或者你只是想用本地方式创建个人使用的HTML 文档) HTML 版本本指南参考最新的说明-HTML 2.0- 加上一些已经在 browsers 中广泛实现的附加特性. 以及正在发展的一些新特性. HTML 文档什么是 HTML 文档HTML 文档是普通文本 ( ASCII) 文件, 它可以用任意编缉器(如UNIX 中的Emacs 或 vi, Macintosh 中的BBEdit, Windows中的No

14、tepad)生成. 你也可以使用字处理软件, 不过要记住存文件时要存成“带回车的纯文本”。 HTML 编辑器现在有一些 WYSIWYG 编辑器 (如., 可用在多种平台的 HotMetal, 或者可用在 Macintosh 机的 Adobe PageMill ). 在你学了一些 HTML 标记的基本知识之后，你可能希望使用它们. 你会发现掌握足够的 HTML 编码知识对于判断一个 WYSIWYG 编辑器是否适用是很有益处的 如果你还没有选定使用哪种软件, 可以参考本站软件下载 HTML 编辑器的在线例表 (按应用平台分类) ，帮助你寻找应用软件. 把文件存放到服务器上如果你在学校或者单位可以访

15、问 Web 服务器, 和你的 WEB 管理员webmaster (维护服务器的人) 联系，看看如何把你的文件存放到 Web 上. 否则，如果在学校或单位不能访问, 可以看看你的社区是否有 免费网络FreeNet, 一种提供免费 Internet 访问服务的基于社区的网络. 如果也没有免费网络, 你可以当地的 Internet 服务提供者联系，他们可以把你的文档存放到服务器上，不过要收取费用. (你可以在当地的报纸上找到广告with your Chamber of Commerce for the names of companies.) 标记说明一个元素 element 是一个文档结构的基本组

16、成部分. 元素的例子有头 heads, 表格tables, 段落 paragraphs, 列表 lists 等. 你可以这样理解: 你用 HTML 标记为浏览器标出文件的各个元素 . 元素中可以包含普通文本，其他元素，或二者都有. 在 HTML 文档中使用tags表示各种元素. HTML 标记由一个左尖括号 () 组成. 标记通常成对出现 (如, 和 ) 以指出标记作用的范围. 结束标记和起始标记相似，只是在括号中的标记名中以斜杠 (/) 领头. HTML 标记在下文中列出. 有些元素可能含有一个属性 attribute, 它是包含在起始标记中的附加信息说明. 例如, 通过在图象文件的 HTM

17、L 代码中包含适当的属性，你可以指明一幅图象的位置 (顶端, 中间, 或底部) . 具有可选属性的标记 如下. 注意: HTML 不区分大小写. 等价于 或 . 有几个例外的情况列在下文中的转义序列中. 并非所有的 World Wide Web 浏览器都支持所有的标记. 如果一个浏览器不支持某个标记, 它通常只是忽略之HTML 初学者指南(一) 来源：宝之林 等级：默认等级 发布于2005-11-05 13:33 未经允许，XX 【字体：大 中 小】 最小的 HTML 文档每个 HTML 文档应该包含一些标准 HTML 标记. 每个文档都包含头 head 和正文 body text 两部分.

18、头中含有标题 title, 正文中含有实际构成段落，列表和其他元素的文本. 浏览器需要具体的信息是因为它们都是根据 HTML 和 SGML 说明编程的. 下面的源文档举例说明必须的元素: A Simple HTML ExampleHTML is Easy To LearnWelcome to the world of HTML. This is the first paragraph. While short it is still a paragraph!And this is the second paragraph. 必须的元素有 , , , 和 标记 (和它们相应的结束标记). 由于在

19、每个文件中你都要包括这些标记, 你可以创建一个含有这些标记的模板文件. ( 有些浏览器会自动正确地规格化你的 HTML 文件，哪怕你没有包含这些标记. 但是有些浏览器不会这样! 因此你要确保包含这些标记.)HTML 初学者指南(二) 来源：宝之林 等级：默认等级 发布于2005-11-05 13:33 未经允许，XX 【字体：大 中 小】 一个教学工具要看到你的浏览器当前窗口所显示信息的原始文件, 可以选择浏览器菜单中的 View Source (或者等价操作) 选项. 文件的内容和所有的 HTML 标记将显示在一个新窗口中. 这是学习使用 HTML 和掌握技巧和构造的一个非常好的方式. 当然

20、, 你看的 HTML 不一定在技术上是正确的. 当你熟悉了 HTML 并且看了很多这方面的参考资料，你将能够区分 好的 和 不好的 HTML. 记住你可以保存 HTML 编码的源文件，用做你的 Web 页的模板，或者把它修改之后用做其他用途. HTML 标记HTML该元素指明你的文件包含 HTML-编码 信息. 文件扩展名 .html 也指明该文件是一个 HTML 文档而且 必须使用. (如果你的系统受 8.3 制文件名的限制 (如., LeeHome.htm）, 可以用 .htm 做扩展名.) HEAD头元素 head 是你的 HTML-编码 文档中包含标题 title 的第一部分. 标题是

21、作为你的浏览器窗口的一部分来显示的 (见下文). TITLE标题 title 元素含有你的文档标题并且作为一种全局上下文识别其内容. 标题通常显示在浏览器窗口的某个位置 (通常在顶端), 而不是在文本区. 标题同时也用于热点列表 hotlist 或书签列表 bookmark list 中的显示, 因此标题的选择因当是描述性的, 独特的, 和相对简洁的. 标题在 WAIS 服务中还用于搜索服务器. 例如, 你可能在一章的内容中包含一个短小的书本的标题: NCSA Mosaic 指南 (Windows): 安装. 这个标题说明了软件的名称, 使用平台, 和本章内容, 它比简单地把该文档称为 安装.

22、 要好得多。一般你的标题应该不超过 64 个字符. BODYHTML 文档的第二部分，也是最大的部分是正文 body, 它含有你的文档的内容 (显示在你的浏览器窗口文本区的部分). 下面介绍的标记用在 HTML 文档的正文 body 内. 标题字体HeadingsHTML 有六级标题字体, 从 1 到 6 编号, 1 号最小. 标题字体的显示比普通文本字体大或者粗. 每个文档中的第一个标题字体应该标记为 . 标题字体元素的语法为: 标题字体文本 其中 y 是从 1 到 6 的数字，指明标题字体的等级. 在你的文档中不要跳跃使用标题字体等级. 例如, 不要用一级标题 () 开始，然后跟随一个三级

23、标题 () . 段落Paragraphs不同于多数字处理器中的文档, HTML 文件中的换行是不重要的. 你不用担心你的文本中行的长度 ( 当然最好不要超过 72 个字符). 在你的源文件中任何地方可以使用换行, 多个空白在你的浏览器中被重叠成为一个空白. 在“最小的 HTML 文档”中给出的例子中第一段的编码为 Welcome to the world of HTML. This is the first paragraph. While short it isstill a paragraph! 源文件中各行之间有换行. Web 浏览器忽略这些换行，只有遇到另一个 标记时才开始新段落 要点

24、: 你必须用 元素指明段落. 浏览器忽略源文件中的任何缩进或空行. 如果没有 元素, 文档将被看作一个大段落处理. (一个例外的情况是把文本标记为 preformatted, 下文中将做介绍.) 例如, 下面的内容的输出和第一个 HTML 例子完全相同: Level-one heading Welcome to the world of HTML. This is the first paragraph. While short it is still aparagraph! And this is the second paragraph. 为了保持 HTML 文件的可读性, 标题字体应该独

25、占一行, 在开始一个新的部分之前加一到两行空行，段落之间也用空行隔开( 除了用 标记以外). 这些额外的空白在你编辑文件时将会有用 ( 但是你的浏览器将忽略这些空白因为它有自己的关于空白的规则，不依赖于你源HTML 初学者指南(二) 来源：宝之林 等级：默认等级 发布于2005-11-05 13:33 未经允许，XX 【字体：大 中 小】 文件中的空白). 注意: 结束标记 可以省略. 这是因为当浏览器遇到一个 标记时, 它认为前一个段落到此结束. 使用 和 作为段落标记使得你可以通过在源文件中使用 ALIGN=alignment 属性使一个段落居中排列. 这是一个居中的段落. 见下面的输出形

26、式 这是一个居中的段落.HTML 初学者指南(三) 来源：宝之林 等级：默认等级 发布于2005-11-05 13:33 未经允许，XX 【字体：大 中 小】 列表ListsHTML 支持不编号 unnumbered, 编号numbered, 和定义definition 三种列表. 你也可以嵌套列表, 但是不要嵌套过多，否则会使读者感到不清晰。 不编号列表Unnumbered Lists 制作一个不编号的，公告式列表, 用开始标记 ( unnumbered list 的简记) 开始 输入 (list item) 标记，后面跟独立的项; 不需使用 标记 用 标记结束整个列表 下面是一个有三个项的

27、列表: apples bananas grapefruit 输出形式为: apples bananas grapefruit 项可以含有多个段落. 用段落标记 指明. 编号列表Numbered Lists 编号列表 (也称为 有序列表ordered list) 和不编号列表相同, 只是用 代替 . 各项同样用 标记. 下面的 HTML 代码: oranges peaches grapes 产生的输出为: oranges peaches grapes 定义列表Definition Lists 定义列表 (编码为 ) 通常含有交替出现的 定义术语definition term (编码为 ) 和定义

28、描述definition definition (编码为 ). Web 浏览器通常另起一行显示定义描述. 下面是一个定义列表的例子: NCSA NCSA, the National Center for Supercomputing Applications,is located on the campus of the University of Illinois at Urbana-Champaign. Cornell Theory Center CTC is located on the campus of Cornell University in Ithaca,New York. 输

29、出形式为: NCSA NCSA, the National Center for Supercomputing Applications, is located on the campus of the University of Illinois at Urbana-Champaign. Cornell Theory Center CTC is located on the campus of Cornell University in Ithaca, New York. 和 项可以包含多个段落 (用 标记指示), 列表, 或其他的定义信息. COMPACT 属性可能会被经常使用，如果你的定义术语很简短的话. 例如，如果你想显示一些计算机选项, 它们可以和定义的开始处于同一行中. -iinvok