返回课程

1.什么是HTML5?

  HTML 5是近十年来Web开发标准最巨大的飞跃。和以前的版本不同,HTML 5并非仅仅用来表示Web内容,它的新使命是将Web带入一个成熟的应用平台,在HTML 5平台上,视频,音频,图象,动画,以及同电脑的交互都被标准化。

  什么是 HTML5?

  HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。

  HTML 的上一个版本诞生于 1999 年。自从那以后,Web 世界已经经历了巨变。

  HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。

  HTML5 是如何起步的?

  HTML5 是 W3C 与 WHATWG 合作的结果。

  注1:W3C 指 World Wide Web Consortium,万维网联盟。

  注2:WHATWG 指 Web Hypertext Application Technology Working Group。

  WHATWG 致力于 web 表单和应用程序,而 W3C 专注于 XHTML 2.0。在 2006 年,双方决定进行合作,来创建一个新版本的 HTML。

  为 HTML5 建立的一些规则:

  新特性应该基于 HTML、CSS、DOM 以及 JavaScript。

  减少对外部插件的需求(比如 Flash)

  更优秀的错误处理

  更多取代脚本的标记

  HTML5 应该独立于设备

  开发进程应对公众透明

  HTML5草案的前身名为Web Applications 1.0。于2004年被WHATWG提出, 于2007年被W3C接纳,并成立了新的HTML工作团队。在2008年1月22日,第一份正式草案已公布,预计将在2010年9月正式向公众推荐。WHATWG表示该规范是目前正在进行的工作,仍须多年的努力。

  新标记

  HTML5提供了一些新的元素和属性,例如(网站导航块)和。这种标签将有利于搜索引擎的索引整理,同时更好的帮助小屏幕装置和视障人士使用,除此之外,还为其他浏览要素提供了新的功能,如和标记。

  一些过时的HTML4标记将被取消。其中包括纯粹显示效果的标记,如和

  ,它们已经被CSS取代。

  新特性

  HTML5 中的一些有趣的新特性:

  用于绘画的 canvas 元素

  用于媒介回放的 video 和 audio 元素

  对本地离线存储的更好的支持

  新的特殊内容元素,比如 article、footer、header、nav、section

  新的表单控件,比如 calendar、date、time、email、url、search

  浏览器支持

  最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。

  HTML5: 标签的改变

  HTML5 吸取了 XHTML 2 的一些建议,包括一些用来改善文档结构的功能,比如,新的 HTML 标签 header, footer, dialog, aside, fugure 等的使用,将使内容创作者更加语义地创建文档,之前的开发者在这些场合是一律使用 div 的。

  HTML5 还包含了一些将内容和展示分离的努力,开发者们也许会惊讶,b 和 i 标签依然存在,但它们的意义已经和之前有所不同,这些标签的意义只是为了将一段文字标识出来,而不是为了为它们设置粗体或斜体式样。u,font,center,strike 这些标签则被完全去掉了。

  新标准适用了一些全新的表单输入对象,包括日期,URL,Email 地址,其它的对象则增加了对非拉丁字符的支持。HTML5 还引入了微数据,一种使用机器可以识别的标签标注内容的方法,使语义 Web 的处理更为简单。总的来说,这些与结构有关的改进使内容创建者可以创建更干净,更容易管理的网页,这样的网页对搜索引擎,对读屏软件等更为友好。

  新应用程序接口(API)

  除了原先的DOM接口,HTML5增加了更多API,如:

  1. 用于即时2D绘图的Canvas标签

  2. 定时媒体回放

  3. 离线数据库存储

  4. 文档编辑

  5. 拖拽控制

  6. 浏览历史管理

  与HTML 4的不同之处

  新的解析顺序新的元素:section, video, progress, nav, meter, time, aside, canvasinput元素的新属性:日期和时间,email, url。新的通用属性:ping, charset, async全域属性:id, tabindex, repeat。移除元素:center, font, strike。

  HTML 5有两大特点:

  首先,强化了Web网页的表现性能。除了可描绘二维图形外,还准备了用于播放视频和音频的标签。

  其次,追加了本地数据库等Web应用的功能。

  异常处理

  HTML5(text/html)浏览器将在错误语法的处理上更加灵活。HTML5在设计时保证旧的浏览器能够安全的忽略掉新的HTML5代码。与HTML4.01相比,HTML5给出了解析的详细规则,力图让不同的浏览器即使在发生语法错误时也能返回相同的结果。

  HTML 5 正在改变 Web

  HTML5 是近十年来 Web 标准最巨大的飞跃。和以前的版本不同,HTML 5 并非仅仅用来表示 Web 内容,它的使命是将 Web 带入一个成熟的应用平台,在这个平台上,视频,音频,图象,动画,以及同电脑的交互都被标准化。尽管 HTML 5 的实现还有很长的路要走,但 HTML 5 正在改变 Web。

  HTML 最近的一次升级是1999年12月发布的 HTML 4.01。自那以后,发生了很多事。最初的浏览器战争已经结束,Netscape 灰飞烟灭,IE5 作为赢家后来又发展到 IE6, IE7。Mozilla Firefox 从 Netscape 的死灰中诞生,并跃居第二位。苹果和 Google 各自推出自己的浏览器,而小家碧玉的 Opera 仍然嘤嘤嗡嗡地活着,并以推动 Web 标准为己命。我们甚至在手机和游戏机上有了真正的 Web 体验,感谢 Opera,iPhone 以及 Google 已经推出的 Android。

  然而这一切,仅仅让 Web 标准运动变得更加混乱,HTML 5 和其它标准被束之高阁,结果,HTML 5 一直以来都是以草案的面目示人。

  于是,一些公司联合起来,成立了一个叫做 Web Hypertext Application Technology Working Group (Web 超文本应用技术工作组 - WHATWG) 的组织,他们将重新拣起 HTML 5。这个组织独立于 W3C,成员来自 Mozilla, KHTML/Webkit 项目组,Google,Apple,Opera 以及微软。尽管 HTML 5 草案不会在短期内获得认可,但 HTML 5 总算得以延续。

  HTML 5 将带来什么?以下是 HTML 5 草案中最激动人心的部分:

  全新的,更合理的 Tag,多媒体对象将不再全部绑定在 object 或 embed Tag 中,而是视频有视频的 Tag,音频有音频的 Tag。本地数据库。这个功能将内嵌一个本地的 SQL 数据库,以加速交互式搜索,缓存以及索引功能。同时,那些离线 Web 程序也将因此获益匪浅。不需要插件的富动画。Canvas 对象将给浏览器带来直接在上面绘制矢量图的能力,这意味着我们可以脱离 Flash 和 Silverlight,直接在浏览器中显示图形或动画。一些最新的浏览器,除了 IE,已经开始支持 Canvas。浏览器中的真正程序。将提供 API 实现浏览器内的编辑,拖放,以及各种图形用户界面的能力。内容修饰 Tag 将被剔除,而使用 CSS。理论上讲,HTML 5 是培育新 Web 标准的土壤,让各种设想在他的组织者之间分享,但 HTML 5 目前仍处于试验阶段。

  Mozilla 的技术副总裁 Mike Shaver 说,HTML 5 是一个被寄予厚望的概念,它既是 WHATWG 组织的实验田,又是 W3C 的标准之路。

  Shaver 认为,Mozilla 的兴趣和 WHATWG 实验相吻合,Mozilla 在 HTML 5 工作组中非常活跃,我们对一些早期的细则进行实验并将成熟的结果提交 W3C。

  在过去的几年,Mozilla 随着各种出现的新标准,推出多个富有前瞻性的项目,包括 Prism,一个用于离线运行 Web 程序的系统,以及 Weave,一个数据存储框架。

  Shaver 说,HTML 5 运动肇始于对 W3C 的不耐烦,Web 标准中的很多进展都因 W3C 将重点从 HTML 转移到 XML 而停滞不前。

  很多基于 XML 架构的新技术被设计出来替代 HTML,Shaver 说,这不是一条正确的道路,人们不应象黑瞎子掰玉米把样一边掰一边丢。

  HTML 5 的新实验在 Firefox 以及 基于 Webkit 的 Safari 和 Chrome 浏览器中逐渐得到强化,但仍有不少问题。

  Chrome 的开发者 Darin Fisher 说,Chrome 仍在襁褓中时,就不得不面临几个问题,尽管使用的是最新的 Webkit,HTML 5 的本地数据库功能在 Chrome 的初期版本中并没有实现。因为 Chrome 的沙箱机制和 Webkit 的数据库功能有冲突。

  而由于 Chrome 属于秘密开发,Chrome 的开发人员也不便参与 Webkit 的开发。

  我们要想保守 Chrome 的秘密,就无法参与 Webkit 社区。Fisher 说,我们很希望可以在某些方面给 Webkit 以帮助,我们拥有众多经验丰富的开发者,我们很想知道人们目前遇到的挑战并乐意提供帮助。

  随着 Chrome 的发布,Fisher 说他的团队成员有时会和 Webkit 的人一起吃饭,有些人私下里还成了好朋友。Fisher 称,他们迫切地想同其他 Webkit 开发组一起工作解决离线数据库的问题。

  Chrome 里面还包含Google 的开源 Gears 技术,用来实现与 HTML 5 类似的离线功能。

  Gears 可以看作已有 API 的替代品,Fisher 说,HTML 5 对新浏览器来说是非常好的东西,但绝大多数用户还使用旧浏览器。Gears 可以让那些旧浏览器也获得这样的 API,我们正在为 HTML 5 版 API 提供兼容。

  Gears 兼容性非常好,它正成为将 HTML 5 带向人们桌面的另外一条途径。

  目前,绝大多数工作由 Apple,Mozilla, Opera, Google 以及 Trolltech 展开。微软在干什么?IE 因其对 Web 标准的迟钝而闻名,更不要说 HTML 5。但 IE8 可能会做出改变。

  微软 IE 平台与 WHAT 工作组主席 Chris Wilson 在邮件中称,我们希望我们现在开始的工作可以在 HTML 工作组创建一套测试系统。Wilson 说,IE 开发组仍然对 HTML 5 的一些提议感到担忧。我觉得工作组的所有成员都会承认我们还有很多事要做。

  目前处于 Beta 版的 IE8,已经包含 HTML 5 的诸多新功能。它拥有一个跨文档消息系统,本地存储,以及一些离线事件来检测网络的中断。但还有些功能还未提上议程,如 Canvas。

  HTML 5 非常庞大,仍处在开发阶段,我认为浏览器厂商应当尽快达成一致,而每个浏览器的具体实现时间可以自己选择。Web 开发者和浏览器厂商会同意 Wilson 的下面这句话,这确切无疑是一个激动人心的时刻,我们希望看到 Web 成为新的应用平台。

2.为什么使用HTML4.0

HTML 3.2 真的是特别糟糕!
最初的 HTML 绝没有打算要包含支持格式化文档的标签。HTML 标签原打算用于定义文档的的内容。

<p>This is a paragraph</p>

<h1>This is a heading</h1>

当诸如 <font> 这样的标签和 color 属性被加入 HTML3.2 的规范当中,它开始成为开发者的一场噩梦。那些不得不将字体和文字信息添加到每个单一网页的站点,其开发过程最终变成了漫长、昂贵和极其痛苦的过程。

 

HTML4.0 的优秀特性
通过使用 HTML4.0,所有的格式化信息都可以从 HTML 文件中剥离,并植入一个独立的样式表。

因为 HTML4.0 将文档的表现与其结构分离,我们从而得到了我们一直需要的东西:在不把文档内容搞糟的情况下,对表现层进行完全的控制。

 

我们应该做些什么?
停止在 HTML 标签内部使用表现样式属性。

我们的完整的 HTML 标签参考手册对 HTML4.0 标签和属性进行了简要的说明。

请同时参阅我们的 CSS 教程,开始您崭新的开发生涯吧。

 

为 XHTML 做好准备
XHTML 是新的 HTML。你现在就应该为此做好准备。而您可以做的最重要的事情就是开始编写正确的 HTML4.01 代码。并且使用小写字母编写标签。记得关闭标签。决不要在没有 </p> 标签的情况下结束一个段落。

提示:官方的 HTML4.01 标准推荐使用小写的标签。

如果您希望学习如何将站点升级至 XHTML,请阅读我们的 XHTML 教程。

 

验证 HTML文件
HTML 文档是根据文档类型声明进行验证的。如果希望 HTML 文件被正确地验证,就要将恰当的 DTD 添加到文件的第一行。

HTML 4.01 Strict DTD 包含没有被反对使用或者不出现在框架中的元素和属性:

<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"HTML'>http://www.duote.com/TR/html4/strict.dtd">HTML 4.01 Transitional DTD 包含 strict DTD 中所有的内容,外加被反对使用的元素和属性:

<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"HTML'>http://www.duote.com/TR/html4/loose.dtd">HTML 4.01 Frameset DTD 包含 transitional DTD 中所有的内容,外加对框架的支持:

<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.duote.com/TR/html4/frameset.dtd">

3.概要

HTML 概要
本教程已教你如何使用 HTML 创建站点。

HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本,添加图片,创建链接、输入表单、框架和表格等等,并可将之存为文本文件,浏览器即可读取和显示。

HTML 的关键是标签,其作用是指示将出现的内容。

 

现在,你已学完HTML,接下来该学习什么呢?
下一步,你应该学习 XHTML 和 CSS 。

XHTML
XHTML 是新的 HTML 。最新的HTML版本是 HTML 4.01,同时也是最终的版本。

HTML 将被 XHTML 取代,XHTML 是更严格且更纯净的 HTML 版本。

 

CSS
CSS被用来同时控制多重网页的样式和布局。

通过使用 CSS,所有的格式化均可从 HTML 中剥离处来,并存储于一个独立的文件中。

CSS 给予你对布局的完全控制,同时不会弄乱文档内容。

 

选修课:HTML 5
HTML 5 是下一代的 HTML。

HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。

在 W3School 的 HTML 5 教程中,您将了解 HTML5 中的新特性。

4.基本概念

什么是HTML文件?
HTML的英文全称是Hypertext Marked Language,中文叫做“超文本标记语言”。
和一般文本的不同的是,一个HTML文件不仅包含文本内容,还包含一些Tag,中文称“标记”。
一个HTML文件的后缀名是.htm或者是.html。
用文本编辑器就可以编写HTML文件。
这就试写一个HTML文件吧!
打开你的Notepad,新建一个文件,然后拷贝以下代码到这个新文件,然后将这个文件存成first.html。

<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first homepage. <b>This text is bold</b>
</body>
</html>
要浏览这个first.html文件,双击它。或者打开浏览器,在File菜单选择Open,然后选择这个文件就行了。

示例解释
这个文件的第一个Tag是<html>,这个Tag告诉你的浏览器这是HTML文件的头。文件的最后一个Tag是</html>,表示HTML文件到此结束。

在<head>和</head>之间的内容,是Head信息。Head信息是不显示出来的,你在浏览器里看不到。但是这并不表示这些信息没有用处。比如你可以在Head信息里加上一些关键词,有助于搜索引擎能够搜索到你的网页。

在<title>和</title>之间的内容,是这个文件的标题。你可以在浏览器最顶端的标题栏看到这个标题。

在<body>和</body>之间的信息,是正文。

在<b>和</b>之间的文字,用粗体表示。<b>顾名思义,就是bold的意思。

HTML文件看上去和一般文本类似,但是它比一般文本多了Tag,比如<html>,<b>等,通过这些Tag,可以告诉浏览器如何显示这个文件。

HTML元素(HTML Elements)
HTML元素(HTML Element)用来标记文本,表示文本的内容。比如body, p, title就是HTML元素。 
HTML元素用Tag表示,Tag以<开始,以>结束。
Tag通常是成对出现的,比如<body></body>。起始的叫做Opening Tag,结尾的就叫做Closing Tag。
目前HTML的Tag不区分大小写的。比如,<HTML>和<html>其实是相同的。
HTML元素(HTML Elements)的属性
HTML元素可以拥有属性。属性可以扩展HTML元素的能力。

比如你可以使用一个bgcolor属性,使得页面的背景色成为红色,就像这样:


<body bgcolor="red">
再比如,你可以使用border这个属性,将一个表格设成一个无边框的表格。如下:

<table border="0">
 

属性通常由属性名和值成对出现,就像这样:name="value"。上面例子中的bgcolor, border就是name,red和0就是value。属性值一般用双引号标记起来。

属性通常是附加给HTML的Opening Tag,而不是Closing Tag。

5.事件属性

HTML 4 的新特性之一是可以使 HTML 事件触发浏览器中的行为,比方说当用户点击某个 HTML 元素时启动一段 JavaScript。

在现代浏览器中都内置有大量的事件处理器。这些处理器会监视特定的条件或用户行为,例如鼠标单击或浏览器窗口中完成加载某个图像。通过使用客户端的 JavaScript,可以将某些特定的事件处理器作为属性添加给特定的标签,并可以在事件发生时执行一个或多个 JavaScript 命令或函数。

事件处理器的值是一个或一系列以分号隔开的 Javascript 表达式、方法和函数调用,并用引号引起来。当事件发生时,浏览器会执行这些代码。例如,当您把鼠标移动到一个超链接时,会启动一个 JavaScript 函数。支持 JavaScript 的浏览器支持 <a> 标签中的一个特殊的 "mouse over"事件处理器 - 被称为 onmouseover 来完成这项工作:

<a href="/index.html" onmouseover="alert('Welcome');return false"></a>

 

窗口事件 (Window Events)

仅在 body 和 frameset 元素中有效。

属性 描述
onload 脚本 当文档被载入时执行脚本
onunload 脚本 当文档被卸下时执行脚本

表单元素事件 (Form Element Events)

仅在表单元素中有效。

属性 描述
onchange 脚本 当元素改变时执行脚本
onsubmit 脚本 当表单被提交时执行脚本
onreset 脚本 当表单被重置时执行脚本
onselect 脚本 当元素被选取时执行脚本
onblur 脚本 当元素失去焦点时执行脚本
onfocus 脚本 当元素获得焦点时执行脚本

图像事件 (Image Events)

该属性可用于 img 元素:

属性 描述
onabort 脚本 当图像加载中断时执行脚本

键盘事件 (Keyboard Events)

在下列元素中无效:base、bdo、br、frame、frameset、head、html、iframe、meta、param、script、style 以及 title 元素。

属性 描述
onkeydown 脚本 当键盘被按下时执行脚本
onkeypress 脚本 当键盘被按下后又松开时执行脚本
onkeyup 脚本 当键盘被松开时执行脚本

鼠标事件 (Mouse Events)

在下列元素中无效:base、bdo、br、frame、frameset、head、html、iframe、meta、param、script、style 以及 title 元素。

属性 描述
onclick 脚本 当鼠标被单击时执行脚本
ondblclick 脚本 当鼠标被双击时执行脚本
onmousedown 脚本 当鼠标按钮被按下时执行脚本
onmousemove 脚本 当鼠标指针移动时执行脚本
onmouseout 脚本 当鼠标指针移出某元素时执行脚本
onmouseover 脚本 当鼠标指针悬停于某元素之上时执行脚本
onmouseup 脚本 当鼠标按钮被松开时执行脚本

6.标准属性

核心属性 (Core Attributes)

以下标签不提供下面的属性:base、head、html、meta、param、script、style 以及 title 元素。

属性 描述
class classname 规定元素的类名(classname)
id id 规定元素的唯一 id
style style_definition 规定元素的行内样式(inline style)
title text 规定元素的额外信息(可在工具提示中显示)

语言属性 (Language Attributes)

以下标签不提供下面的属性:base、br、frame、frameset、hr、iframe、param 以及 script 元素。

属性 描述
dir ltr | rtl 设置元素中内容的文本方向。
lang language_code 设置元素中内容的语言代码。语言代码参考
xml:lang language_code 设置 XHTML 文档中元素内容的语言代码。语言代码参考

键盘属性 (Keyboard Attributes)

属性 描述
accesskey character 设置访问元素的键盘快捷键。
tabindex number 设置元素的 Tab 键控制次序。

7.表单介绍

HTML表单(Form)是HTML的一个重要部分,主要用于采集和提交用户输入的信息。

举个简单的例子,一个让用户输入姓名的HTML表单(Form)。示例代码如下:

<form action="http://www.duote.com/html/asdocs/html_tutorials/yourname.asp" method="get">
请输入你的姓名:
<input type="text" name="yourname">
<input type="submit" value="提交">
</form>


学习HTML表单(Form)最关键要掌握的有三个要点:

表单控件(Form Controls)
Action
Method
先说表单控件(Form Controls),通过HTML表单的各种控件,用户可以输入文字信息,或者从选项中选择,以及做提交的操作。比如上面的例句里,input type= "text"就是一个表单控件,表示一个单行输入框。

用户填入表单的信息总是需要程序来进行处理,表单里的action就指明了处理表单信息的文件。比如上面例句里的http://www.duote.com/html/asdocs/html_tutorials/yourname.asp

至于method,表示了发送表单信息的方式。method有两个值:get和post。get的方式是将表单控件的name/value信息经过编码之后,通过URL发送(你可以在地址栏里看到)。而post则将表单的内容通过http发送,你在地址栏看不到表单的提交信息。那什么时候用get,什么时候用post呢?一般是这样来判断的,如果只是为取得和显示数据,用get;一旦涉及数据的保存和更新,那么建议用post。

HTML表单(Form)常用控件(Controls)
HTML表单(Form)常用控件有:

表单控件(Form Contros) 说明
input type="text" 单行文本输入框
input type="submit" 将表单(Form)里的信息提交给表单里action所指向的文件
input type="checkbox" 复选框
input type="radio" 单选框
select 下拉框
textArea 多行文本输入框
input type="password" 密码输入框(输入的文字用*表示)


表单控件(Form Control):单行文本输入框(input type="text")
单行文本输入框允许用户输入一些简短的单行信息,比如用户姓名。例句如下:

<input type="text" name="yourname">


表单控件(Form Control):复选框(input type="checkbox")
复选框允许用户在一组选项里,选择多个。示例代码:

<input type="checkbox" name="fruit" value ="apple">苹果<br>
<input type="checkbox" name="fruit" value ="orange">桔子<br>
<input type="checkbox" name="fruit" value ="mango">芒果<br>


用checked表示缺省已选的选项。

<input type="checkbox" name="fruit" value ="orange" checked>桔子<br>


表单控件(Form Control):单选框(input type="radio")
使用单选框,让用户在一组选项里只能选择一个。示例代码:

<input type="radio" name="fruit" value = "Apple">苹果<br>
<input type="radio" name="fruit" value = "Orange">桔子<br>
<input type="radio" name="fruit" value = "Mango">芒果<br>


用checked表示缺省已选的选项。

<input type="radio" name="fruit" value = "Orange" checked>桔子<br>


表单控件(Form Control):下拉框(select)
下拉框(Select)既可以用做单选,也可以用做复选。单选例句如下:

<select name="fruit" >
  <option value="apple">苹果
  <option value="orange">桔子
  <option value="mango">芒果
</select>


如果要变成复选,加muiltiple即可。用户用Ctrl来实现多选。例句:

<select name="fruit" multiple>


用户还可以用size属性来改变下拉框(Select)的大小。

 

表单控件(Form Control):多行输入框(textarea)
多行输入框(textarea)主要用于输入较长的文本信息。例句如下:

<textarea name="yoursuggest" cols ="50" rows = "3"></textarea>
其中cols表示textarea的宽度,rows表示textarea的高度。

 

表单控件(Form Control):密码输入框(input type="password")
密码输入框(input type="password")主要用于一些保密信息的输入,比如密码。因为用户输入的时候,显示的不是输入的内容,而是黑点符号。。例句如下:

<input type="password" name="yourpw">


表单控件(Form Control):提交(input type="submit")
通过提交(input type=submit)可以将表单(Form)里的信息提交给表单里action所指向的文件。例句如下:

<input type="submit" value="提交">


表单控件(Form Control):图片提交(input type="image")
input type=image 相当于 input type=submit,不同的是,input type=image 以一个图片作为表单的提交按钮,其中 src 属性表示图片的路径。

<input type="image" src ="images/icons/go.gif"
alt = "提交" NAME="imgsubmit">

8.图片介绍

用 <img> 这个 Tag 可以在HTML里面插入图片。最基本的语法如下:

<img src="url">
url表示图片的路径和文件名。比如 url 可以是 images/logo/blabla_logo01.gif,也可以是个相对路径 "../images/logo/blabla_logo01.gif"。

 

图片alt属性
<img>中有一个alt属性,英文叫alternate text。例句如下:

<img src = "../images/html_tutorials/smile.jpg" alt="smile face">
假使浏览器没有载入图片的功能,浏览器就会转而显示Alt属性的值。

其实,现在大多数浏览器都支持图片载入。在此介绍Alt属性,是因为它的另外一个重要功能。目前搜索引擎抓取工具无法识别图像中所含的文字,所以用ALT属性写上图片的说明,便于搜索引擎抓取你网页的内容。

 

图片align属性
用align属性,可以改变图片的垂直(居上、居中、居下)对齐方式和水平对齐方式(居左、居中、居右)。

 

图片的大小
在缺省状况下,图片显示原有的大小。你可以用height和width属性改变图片的大小。不过图片的大小一旦被改变,图片会相应放大或缩小,显示出来的结果可能会很难看。

 

建议
图片相对文字,所占的字节数较多,比如一个全屏的图片,即使经过压缩,也要占去大约50k字节,这相当于25000字的文本。因此浏览器载入图片比较费时,建议一个HTML文件里不要包含过多的图片,否则会影响你的网页显示速度。

9.字体介绍

在HTML里,可以用font这个元素及其属性来设定字体的大小,颜色和字体风格。

字体大小
用字体大小属性(size)来设定字体的大小。示例代码如下:

<p><font size="2">这一段的字体大小的值是2。</font></p>


字体风格
用face属性来设定字体风格。示例代码如下:

<p><font fac="arial">这一段的字体风格是arial。</font></p>


字体颜色
用颜色属性(color)来设定字体颜色。

字体颜色代码请参见HTML颜色参考(HTML Color Reference)。

<p><font color="#FF0000">这一段的字体颜色是红色</font></p>


注意
HTML4的标准中,已经不建议使用font及其属性来设定字体,而是建议用CSS来设定字体的大小,颜色,字体风格等。

10.列表介绍

HTML有三种列表形式:排序列表(Ordered List);不排序列表(Unordered List);定义列表(Definition List)。

排序列表(Ordered List)
排序列表中,每个列表项前标有数字,表示顺序。

排序列表由<ol>开始,每个列表项由<li>开始。

 

不排序列表(Unordered List)
不排序列表不用数字标记每个列表项,而采用一个符号标志每个列表项,比如圆黑点。

不排序列表由<ul>开始,每个列表项由<li>开始。

 

定义列表
定义列表通常用于术语的定义。

定义列表由<dl>开始。术语由<dt>开始,英文意为Definition Term。术语的解释说明,由<dd>开始,<dd></dd>里的文字缩进显示

11.头部信息介绍

HTML头部信息(head)里包含关于所在网页的信息。头部信息(head)里的内容,主要是被浏览器所用,不会显示在网页的正文内容里。

另外,搜索引擎如google,yahoo,baidu等也会查找你网页中的head信息。为了让搜索引擎能够收录你的网页,你也要填写适当的head信息。(网站被搜索引擎收录,还有其它的方法,比如被其它网站链接,这里不赘述,请浏览搜索引擎网站。)

下面说几个常用的head信息里的html元素,如标题(title),链接(link),样式(style)以及关于信息(meta)。

 

标题(title)
标题(title)是最常用的head信息。它不显示在HTML网页正文里,显示在浏览器窗口的标题栏里。见图:

 

示例代码如下:

<head><title>HTML中文教程头部信息(head)之标题(title)说明</title></head>

 

链接(link)
用链接(link)可以建立和外部文件的链接。常用的是对CSS外部样式表(external style sheet)的链接。示例代码如下:

<link rel="stylesheet" href="mainstyles.css" type="text/css">
有关CSS外部样式表和示例,详见CSS简介。

 

样式(style)
用样式(style)可以设值网页的内部样式表(internal style sheet)。示例代码如下:

<head>
<style>
   body {background-color:white; color:black;}
   h1 {font: 18pt arial bold;}
</style>
</head>
有关CSS内部样式表和示例,详见CSS简介。

 

关于网页信息(meta)
在计算机语言里,你经常可以看到一个前缀 -- meta,meta就是“关于”(about)的意思。

这meta解释起来比较拗口,比如metadata,意为描述data的data,英文即data about data。还有一个词叫metalanguage,表示一种描述其它语言的语言。再举一个例子,metafile,表示描述其它文件的文件。

在HTML里,meta标记(meta tags)表示用来描述网页的有关信息。示例代码如下:

<meta name="description" content="HTML中文教程之头部信息">
<meta name="keywords" content="HTML,tutorials,source codes">
<meta name="author" content="多特软件站">
 

利用meta中的Refresh你还可以实现自动跳转页面的功能。示例代码:

<meta http-equiv="Refresh" content="5;url=http://www.duote.com/html/html_tutorials/index.html">

12.HTML常用格式

HTML定义了一些文本格式的Tag,比如利用Tag,可以将字体变成粗体或者斜体。从下面的示例,你可以了解各种文本格式Tag如何改变HTML文本的显示。

常用文本格式Tag

Tag Tag说明
<b> 粗体bold
<i> 斜体italic
<del> 文字当中划线表示删除
<ins> 文字下划线表示插入
<sub> 下标
<sup> 上标
<blockquote> 缩进表示引用
<pre> 保留空格和换行
<code> 表示计算机代码,等宽字体

13.基本的HTML 标签

本章向您讲解 HTML 标签的概念,通过实例向您演示最常用的 HTML 标签。

提示:不要担心本章中您还没有学过的例子,您将在下面的章节中学到它们。

提示:学习 HTML 最好的方式就是边学边做实验。我们为您准备了很好的 HTML 编辑器。使用这个编辑器,您可以任意编辑一段 HTML 源码,然后单击 TIY 按钮来查看结果。
什么是 HTML 标签
HTML 文档和 HTML 元素是通过 HTML 标签进行标记的
HTML 标签由开始标签和结束标签组成
开始标签是被括号包围的元素名
结束标签是被括号包围的斜杠和元素名
某些 HTML 元素没有结束标签,比如 <br />
注释:开始标签的英文翻译是 start tag 或 opening tag,结束标签的英文翻译是 end tag 或 closing tag。
HTML 标题
HTML 标题(Heading)是通过 <h1> - <h6> 等标签进行定义的。

实例
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

HTML 段落
HTML 段落是通过 <p> 标签进行定义的。

实例
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

HTML 链接
HTML 链接是通过 <a> 标签进行定义的。

实例
<a href="http://www.duote.com">This is a link</a>

注释:在 href 属性中指定链接的地址。

(您将在本教程稍后的章节中学习更多有关属性的知识)。
HTML 图像
HTML 图像是通过 <img> 标签进行定义的。

实例
<img src="w3school.jpg" width="104" height="142" />

注释:图像的名称和尺寸是以属性的形式提供的。

14.如何创建HTML表格

HTML表格用<table>表示。一个表格可以分成很多行(row),用<tr>表示;每行又可以分成很多单元格(cell),用<td>表示。

这三个Tag是创建表格最常用的Tag。


border属性
在缺省情况下,如果不设置表格的边界,表格是不显示边界的。


要显示表格的边界,可使用border这个属性。


表格的表头
用<th>来表示表格的表头,表头的字是粗体显示的。


空的单元格
如果表格的单元格<td></td>之间没有内容,那么这个单元格的边界是不会被显示出来的,尽管整个表格已设置边界值。要显示这个单元格的边界,可以插入一个&nbsp;空格符。

15.一些基础的HTML Tag

HTML里,比较基础的Tag主要用于标题,段落和分行。

学习HTML最好的方法,就是跟着示例学。为了各位学习的方便,我们准备了一个简单的HTML编辑器,你可以在左边写HTML代码,然后点击上面的按钮,查看HTML的显示结果。

 

正文标题
这个示例告诉你如何在HTML文件里定义正文标题。

HTML用<h1>到<h6>这几个Tag来定义正文标题,从大到小。每个正文标题自成一段。

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>


段落划分
在HTML里用<p>和</p>划分段落。

<p>This is a paragraph</p>
<p>This is another paragraph</p>


换行
通过使用<br>这个Tag,可以在不新建段落的情况下换行。<br>没有Closing Tag。

用<p>换行是个坏习惯,正确的是使用<br>。

<p>This <br> is a para<br>graph with line breaks</p>

HTML注释
在HTML文件里,你可以写代码注释,解释说明你的代码,这样有助于你和他人日后能够更好地理解你的代码。

注释可以写在<!--和-->之间。浏览器是忽略注释的,你不会在HTML正文中看到你的注释。

<!-- This is a comment -->


一些小建议
HTML文件会自动截去多余的空格。不管你加多少空格,都被看做一个空格。 一个空行也被看做一个空格。

有些Tag能够将文本自成一段,而不需要使用<p></p>来分段。比如<h1></h1>之类的标题Tag。

16.简单学习HTML5的标签

  HTML是人们在万维网上沟通和交流所必须要使用的核心标记语言。最新版本的超文本标记语言HTML5已经带着新的功能和要素推出了,这里提供一些信息供您学习HTML5.

  HTML5是基于HTML4.01,XHTML1.0和DOM级别2HTML的下一代推荐标准。它的目标是减少对专有RIA技术的需要,就比如Adobe Flash, MicrosoftSilverlight 和 Sun JavaFX.

  这个改进HTML的想法由WHATWG始于2004年且现在还在继续,虽然一些改进的部分已经完成并被使用了,但这是一个持续性的工作,将会持续很多年。

  它当然拥有一系列新元素和属性去改进现代的网站,一些基本元素已经被增加包括为一些通用块和内联元素的语义替换。其他元素将会在标准化接口下运行,比如<audio>和<video>元素。

  当你学习了HTML5,你会发现有很多元素已经从HTML4.01中被淘汰。其中一个特性就是关于<font>和<centers>的表象元素已经被CSS功能替代了。

  最后,你会发现HTML语法已经不再基于SGML,现在变成了和SGML文档类型声明很像的一种新的引导语句,使用“DOCTYPE sniffing”语句则允许在所有的浏览器中使用标准统一的语言。

  在一个升级改进后的软件或程序版本中找到新的元素和附件总是另人期待的,同样的在HTML5中你会找到新的标签。最新版本在通过如何操作不同的HTML元素上制定了明确的规则,降低了开发成本的同时提升了协同工作功能.

  在万维网语言中有几个不同的元素具备了新的功能。一些新的功能用于插入音频、视频、图片,客户端数据存储和交互式文档。此外,你会发现像,,等新的元素。

  你将会找到HTML5利用了超过100种新的HTML5标签。你会发现一些新的标签是用于定义一则评论,文档类型,超链接,文本,主体元素等等。

  正如刚刚提到的,HTML5有多个新标签帮助我们定义娱乐功能。在这一领域一些新的标签包括<video>,<img>是为图片使用的,<canvas>则是描述图片,还有<audio>用于定义声音文件。在越来越多的网站在其网页上支持视频和音频播放的时候,认识并了解这些标签是必要的。

  超过100种不同的标签被添加进改进版的HTML,这也许会需要一些时间才能完全熟悉这些标签。当然,其中一些将会比其他的更加流行,特别在一些特定的情形下。认识那些你最常用到的标签,并尽可能熟悉那些与你业务有关的标签。

17.在FrontPage中的应用

  虽然FrontPage已经给我们提供了很多面很强大的所见即所得的工具,但是随着HTML语言不断的进步,总有一些新内容新功能需要我们修改HTML代码来完成。而FrontPage中提供了这样的功能,让你的页面随时保持“新鲜”。

  在插入WEB组件的选项窗口中,选择高级控件里的HTML,这里插入的HTML语言是不能用FRONTPAGE 2002进行修改的。

  我们只需把HTML代码插入到HTML的弹出窗口中,即可完成HTML的添加。
 

HTML在FrontPage中的应用


图7.1

  但是上面提到的功能只适合与在网页中的某位置插入HTML代码,如果我想在<head>等不能用鼠标在所见即所得的页面中选出的地方呢?

  FrontPage 2002当然不会忘记这个好传统。在工作区的下方,如果你新建一个页面,你可以看到普通、HTML、预览三个选项。点击其中的HTML,你就可以任意的修改HTML代码,这里改起来肯定要比用记事本方便得多。
 

HTML在FrontPage中的应用


图7.2

  下面介绍两个新效果,你可以试着添加到HTML中。

  如何使你的主页自动被搜索引擎收录

  你一定为了让你的网站名扬天下而去各个搜索引擎注册吧?在网上有很多机器人,它们自动搜寻关键字,我们只要在我们的网站上设立这样的关键字,就有可能被它们找到。

  <head><meta http-equiv="keywords" content="yancheng,science,technolodgy,information,network,politics,economic, charset=gb2312"></head>


  其中CONTENT这个属性主要让你放置一些你主页里的关键词,而且这些关键词最好容易使人想到。

  如何强制浏览器浏览信息时必须从服务器中读取

  我们有时希望刷新时重新下载网页,而不是从缓存中读取旧的文件,为了解决这个问题,你可以在你的网页的<head>部分中加入以下HTML源代码就可以了:

  <META HTTP-EQUIV="Pragma" CONTENT="no-cache">

18.正则表达式删除指定的HTML标签

  抓取某网页的数据后(比如描述),如果照原样显示的话,可能会因为它里面包含没有闭合的HTML标签而打乱了格式,也可能它里面用了比较让人 "费解" 的HTML标签,把预订的格式搅乱. 如果全盘删除里面的 HTML 标签,可能会造成阅读上的困难(比如 a, img 这些标签), 最好是删除一部分,保留一部分.

  正则表达式里,判断 包含某些字符串 是非常容易理解的,但是如何判断 不包含某些字符串 (是字符串,不是字符,是某些,不是某个) 确实是个费解的事.

  <(?!((/?\s?li)|(/?\s?ul)|(/?\s?a)|(/?\s?img)|(/?\s?br)|(/?\s?span)|(/?\s?b)))[^>]+>

  这个正则是判断HTML标签不包含 li / ul / a / img / br / span / b 的,就上面的要求来说,是要 删除 除这里列出的HTML标签,这也是我摸索了很长时间才搞出来的.

  (?!exp) 匹配后面跟的不是exp的位置

  /?\s? 我一开始试着把它写到最前面的 < 后面,但是测试失败了.

  下面是一个简单的函数,把要保留的TAG串起来,生成一个正则表达式,然后把不需要的TAG删除...

  private static string RemoveSpecifyHtml(string ctx) {

  string[] holdTags = { "a", "img", "br", "strong", "b", "span" };//要保留的 tag

  // <(?!((/?\s?li)|(/?\s?ul)|(/?\s?a)|(/?\s?img)|(/?\s?br)|(/?\s?span)|(/?\s?b)))[^>]+>

  string regStr = string.Format(@"<(?!((/?\s?{0})))[^>]+>", string.Join(@")|(/?\s?", holdTags));

  Regex reg = new Regex(regStr, RegexOptions.Compiled | RegexOptions.Multiline | RegexOptions.IgnoreCase);

  return reg.Replace(ctx, "");

  }

  ----------------------------

  修正:

  上面的正则,如果保留了 li , 实际运行会发现 link 也给保留下来了, 保留 a 会把 addr 也给保留下来, 解决办法就是加 \b 断言.

  <(?!((/?\s?li\b)|(/?\s?ul)|(/?\s?a\b)|(/?\s?img\b)|(/?\s?br\b)|(/?\s?span\b)|(/?\s?b\b)))[^>]+>

  private static string RemoveSpecifyHtml(string ctx) {

  string[] holdTags = { "a", "img", "br", "strong", "b", "span", "li" };//保留的 tag

  // <(?!((/?\s?li\b)|(/?\s?ul\b)|(/?\s?a\b)|(/?\s?img\b)|(/?\s?br\b)|(/?\s?span\b)|(/?\s?b\b)))[^>]+>

  string regStr = string.Format(@"<(?!((/?\s?{0})))[^>]+>", string.Join(@"\b)|(/?\s?", holdTags));

  Regex reg = new Regex(regStr, RegexOptions.Compiled | RegexOptions.Multiline | RegexOptions.IgnoreCase);

  return reg.Replace(ctx, "");

  }

19.html文件打开出错怎么办

  html文件如何打开,默认我们是用ie浏览器打开的。最可能的原因是:未连接到 Internet。 该网站遇到了问题。 在地址中可能存在键入错误。 您可以尝试以下操作: 检查您的 Internet 连接。尝试访问其他网站以确保已连接到 Internet。

  可以浏览打开方式 选择你桌面的IE 或者另存为 “文件名.html”文件

  如果打不开,可能是关联的IE出了问题。这里给大家讲一个比较直接的建立关联的方法:

  1、在.html文件上点右键,选打开方式。如图

html文件打开出错怎么办

  2、点选择程序后在下面的窗口里点ie浏览器。然后把下面的始终用这个打开这种文件。确定。就可以了

html文件打开出错怎么办

  当然你的喜欢别的浏览器打开,也在这里也是可以选其它的浏览器的。

20.HTML 中dl(dt,dd)、ul(li)、ol(li) 的使用方法

HTML <dl> 标签

#定义和用法

<dl> 标签定义了定义列表(definition list)。

<dl> 标签用于结合 <dt> (定义列表中的项目)和 <dd> (描述列表中的项目)。

#实例

代码如下:

<dl>

<dt>计算机</dt>

<dd>用来计算的仪器 ... ...</dd>

<dt>显示器</dt>

<dd>以视觉方式显示信息的装置 ... ...</dd>

</dl>

HTML <ul> 标签

#定义和用法

<ul> 标签定义无序列表。

#实例

无序 HTML 列表:

代码如下:

<ul>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ul>

HTML <ol> 标签

#定义与用法

<ol> 标签定义有序列表。

#实例

有序 HTML 列表:

代码如下:

<ol>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ol>

ul可以结合ol定义菜单及子菜单

代码如下:

<ul>

<li><a href="#">内容过滤</a><li>

<li><a href="#">词语过滤</a></li>

<li class="s">

<div class="lsub">

<div>论坛</div>

<ol>

<li><a href="#">论坛主题管理</a></li>

<li><a href="#">论坛批量删帖</a></li>

</ol>

</div>

</li>

<ul>

以上HTML 中dl(dt,dd)、ul(li)、ol(li) 的使用方法,希望对大家有所帮助,感谢您对2345软件大全的支持,更多软件教程请关注2345软件大全。