2-HTML

更新时间:2023-09-04 15:20:01 阅读量: 教育文库 文档下载

说明:文章内容仅供预览,部分内容可能不全。下载后的文档,内容与下面显示的完全一致。下载之前请确认下面内容是否您想要的,是否完整无缺。

Web标准Web标准是一些规范的集合,是由W3C和其他的标准化组织共同制定的, 以用它来创建和解释网页的基本内容。这些规范是专门为了那些在网上发 布的可向后兼容的文档所设计,使其能够被大多数人所访问WEB标准的目的在于创建一个统一的用于WEB表现层的技术标准,以便于通 过不同浏览器或终端设备向最终用户展示信息内容

通过学习和使用Web标准会得到许多好处:更简易的开发与维护: 使用更具有语义和结构化的 HTML,将让您更加容易、 快速的理解他人编写的代码。 与未来浏览器的兼容: 当您使用已定义的标准和规范的代码,那么您这个向后 兼容的文本就消除了不能被未来的浏览器识别的后患。 更快的网页下载、读取速度: 更少的 HTML 代码带来的将是更小的文件和更快 的下载速度。如今的浏览器当处于标准模式下将比它在向下兼容模式下拥有更 快的网页读取速度。 更好的可访问性: 语义化的HTML(结构和表现相分离)将让使用读屏器以及 不同的浏览设备的读者都能很容易的看到内容。 更高的搜索引擎排名: 内容和表现的分离使内容成为了一个文本的主体。与语 义化的标记结合会提高您在搜索引擎中的排名。 更好的适应性: 一个用语义化标记的文档可以很好的适应于打印和其他的显示 设备(像掌上电脑和智能电话),这一切仅仅是通过链接不同的 CSS 文件就 可以完成。你同样可以仅仅通过编辑单独的一个文件就完成跨站点般的表现上 的转换Copyright reserved by ZUFE

W3CW3C(World Wide Web Consortium,万维网联盟的简称)是专门致力于创 建Web相关技术标准并促进Web向更深、更广发展的国际组织成立于1994年10月,由Tim Berners-Lee这位Web的先驱联合CERN、MIT等倡 导并组织成立了这个Web的核心技术机构 Web的每一步发展、技术成熟和应用领域的拓展,都离不开的W3C(World Wi de Web Consortium,万维网联盟)的努力

W3C的工作以成员机构为载体负责实施 ,在全球有三个主办机构,还在 各地建有14家办事机构,配有少量的专职工作人员W3C 会员包括生产技术产品及服务的厂商、内容供应商、团体用户、研究实 验室、标准制定机构和政府部门,一起协同工作,致力在万维网发展方向上达 成共识 三个主办机构:W3C的核心最初位于美国麻省理工学院计算机实验室(MIT/LCS) 法国的INRIA(Institut National de Recherche en Informatique et Automatique) ,2003年 由ERCIM(Eruopean Research Consortium in Informatics and Mathematics)接替 日本的Keio大学(庆应大学)

W3C以开发“Web 事实标准”的各种技术规范作为其核心任务目前已开发了超过80个推荐标准。这些推荐标准中大部分是由各个功能组开发 的各种功能

性规范,同时也包括WWW的核心体系结构

http://www.77cn.com.cn,http://www.77cn.com.cn.hk/(香港办事处)Copyright reserved by ZUFE

W3C标准不是某一个标准,而是一系列标准的集合,这些标准 大部分由W3C起草和发布,也有一些是其他标准组织制订的 标准,比如ECMA的ECMAScript标准 网页主要由三部分组成:结构(Structure)、表现(Presenta tion)和行为(Behavior)。对应的标准也分三方面:结构化标准语言主要包括XHTML和XML等 表现标准语言主要包括CSS 行为标准主要包括对象模型(如W3C DOM)、ECMAScript等

WEB标准的出发点是实现内容(结构)和表现分离,这样做的 好处是可以分别处理内容和表现,也方便搜索和内容的再利 用数据的多样显示。通过不同的样式表适应不同的设备,做到内容与设 备无关 保持整个站点的视觉一致性变得非常简单,修改样式表就可以轻松改 版 由于结构清晰,数据的集成、更新和处理更加方便灵活 更有意义的搜索

传统的html代码中结构层和表现层是混杂在一起的HTML 本意就不是用来控制文档外观的,效率低下Copyright reserved by ZUFE

由W3C和其他一些标准 化组织共同制订的W eb标准

例:一个在Web标准的理念下 的WEB开发模式

Copyright reserved by ZUFE

结构标准语言HTML: HyperText Markup Language(超文本标识语言)是Web的基础之一,基于HTML,Web上开始出现丰富多彩的页面,蕴涵了各种信息 , W3C先后推出了多个HTML版本,分别是1997年12月的首个版本、1998年4月的更新、19 99年12月推出HTML 4.01版

XML:Extensible Markup Language(可扩展标识语言)来源于SGML,但XML是一种能定义其他语言的语言。XML最初设计的目的是弥补HTM L的不足,以强大的扩展性满足网络信息发布的需要,后来逐渐用于网络数据的转换和 描述,最终以替代HTML

XHTML:Extensible HyperText Markup Language(可扩展超文本标识语言)XML虽然数据转换能力强大,完全可以替代HTML,但面对成千上万已有的站点,直接 采用XML还为时过早。因此,我们在HTML4.0的基础上,用XML的规则对其进行扩展, 得到了XHTML。简单的说,建立XHTML的目的就是实现HTML向XML的过渡

表现标准语言CSS:Cascading Style Sheets(层叠样式表)创建CSS标准的目的是以CSS取代HTML表格式布局和其他表现的语言。纯CSS布局与结 构式XHTML相结合能帮助设计师分离外观与结构,使站点的访问及维护更加容易

行为标准DOM:Document Object Model(文档对象模型)DOM是一种与浏览器,平台,语言的接口,使得你可以访问页面其他的标准组件。简单 理解,DOM解决了Netscaped的Javascript和Microsoft的Jscript之间的冲突,给予web设计 师和开发者一个标准的方法,让他们来访问他们

站点中的数据、脚本和表现层对像

ECMAScript:是ECMA制定的标准脚本语言(JAVAScript)。目前推荐遵循的 是ECMAScript 262Copyright reserved by ZUFE

HTML基础

Copyright reserved by ZUFE

HTML基础 主要内容HTML句法结构 HTML文档结构和常用元素 HTML标准单位 HTML基本元素的使用文字样式 文本布局 超链接 多媒体

HTML的其他元素表格 框架

Copyright reserved by ZUFE

教学目标

理解和掌握HTML句法、文档结构、基本元素, 其中列表、表单、表格等与后续课程有重要联系 的HTML元素尤为重要; 掌握和熟练使用基于文本的HTML编辑工具,学 习使用Web服务器发布网页; 学习使用浏览器查看网页的源代码

Copyright reserved by ZUFE

HTML基础为了在万维网内发布信息,需要一种能够被普遍理解的语言,一种能为所 有的计算机作为信息发布用的母语,这就是超文本标记语言(Hypertext Markup Language,HTML) HTML是在一般标准化的标签语言(SGML)基础上建立的SGML仅描述了定义一套标签语言的方法,而没有定义一套实际的标签语言, 而HTML就是一个根据SGML制定的特殊应用 XML则是SGML的一个子集, SGML的简化版,省略了其中复杂和不常用的 部分

HTML是纯文本类型的语言,可以使用任何文本编辑器进行编辑包含HTML内容的文件最常用的扩展名是.html,但是DOS这样的旧操作系统 限制扩展名为最多3个字符,所以.htm扩展名也被使用

版本历史HTML最初由Tim Berners-Lee于1990年创立 第一个正式规范在为了和当时的各种HTML标准区分开来,使用了2.0作为其 版本号,于1995年11月作为RFC 1866发布(IETF) HTML3.2——1997年1月,W3C推荐标准 HTML4.0——1998年4月,W3C推荐标准 HTML4.01(微小改进)——1999年12月24日,W3C推荐标准 ISO/IEC15445:2000(“ISO HTML”)——2000年5月15日发布,基于严格的 HTML 4.01语法,是国际标准化组织和国际电工委员会的标准Copyright reserved by ZUFE

HTML基础

使用HTML的可以创建:发布包括标题、正文、表格甚至照片的联机文档; 可以通过超链标记将所建的文档与其他联机文档建立 访问关联; 设计浏览器表单进行远程交互服务,如查找信息、进 行预订、购臵产品等; 可以将电子表格、视频剪辑,声音节目和其他多媒体 信息包括在HTML文档中

可以查看网页的源文件

Copyright reserved by ZUFE

HTML句法结构Google首页的部分源代码<html> <head> <META HTTP-EQUIV="content-type" CONTENT="text/html; charset=GB2312 "> <title>Google</title> ... </head>

另外还有HTML文档主体部分的声明。<body bgcolor=#ffffff text=#000000 link=#0000cc vlink=551a8b alink=#ff0000 onL oad=sf()> <center>

Copyright reserved by ZUFE

HTML文件结构HTML文件的基本结构<html></html>标记HTML 文档的开始

和结束 HTML文档分为头部和主 体两部分

这三个元素一起构成完整的HTML文 档结构模板,所有的HTML文档 都应该遵循这个模板

HTML头部描述HTML 文档相关信息

<html> <head> 头 部 信 息 </head> <body>

<body></body>间的内容 构成HTML文档的主体部分 HTML文档的主要内容都放 在这部分

文 档 主 体, 正 文 部 分</body> </html>

一个HTML文档是普通的ASCII文本文件,由各种嵌入的对 象所组成这些对象称为元素(element) HTML使用标签(tag)分割并描述这些元素Copyright reserved by ZUFE

实例:example.htm

DTDHTML中允许使用哪些标记,每个标记可以包含哪些属性?答案:都在DTD中进行定义

什么是DTD (Document Type Definition,文档类型定义) ?SGML is a system for defining markup languagesSGML是一种通用的文档结构描述符号化语言,主要用来定义一类文档模型 的逻辑和物理类结构 实际上是定义其它标记语言的元语言,它采用DTD来定义这些标记语言,如 HTML 每一个特定的DTD都定义了这样的一类标记语言

A DTD specifies, in effect, the syntax of an “application” of SGML or XM L, such as the derivative language HTML or XHTML一个DTD文档包含:元素的定义规则,元素间关系的定义规则,元素可使用 的属性,可使用的实体或符号规则

由于XML DTD并不能完全满足XML自动化处理的要求,所以W3C于20 01年5月正式推荐XML Schema为XML 的标准模式显然,W3C希望以XML Schema来作为XML模式描述语言的主流,并逐渐 代替XML DTD

实例:一个DTD文件Copyright reserved by ZUFE

DOCTYPE在HTML文档中,<!DOCTYPE>标记放在<html>标记前,在所有代码和标 识之上,主要用来说明你用的XHTML或者HTML是什么版本 DOCTYPE是document type的简写,浏览器根据你DOCTYPE定义的DT D(文档类型定义)来解释和校验页面代码 <!DOCTYPE>标记语法: 顶级元素 可用性 "注册//组织//类型 标签 定义// 语言""URL" HTML4.01提供了三种DOCTYPE可选择:过渡型(Transitional ):包含了用于呈现的元素和属性(是W3C不建议使 用的),使得不支持CSS的浏览器也可以显示各种表现特征

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "htt p://http://www.77cn.com.cn/TR/html4/loose.dtd">严格型(Strict ):Use this when you want clean markup, free of presentatio nal clutter. Use this together with CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://ww http://www.77cn.com.cn/TR/html4/strict.dtd">框架型(Frameset ):用了框架,其余的和Transitional一样,使用Dreamw eaver新建框架集文档,就使用了这种doctype

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " http://www.77cn.com.cn/TR/html4/frameset.dtd"> 参见:example.htmCopyright reserved by ZUFE

HTML句法结构标记(Tag)是用一对尖括号“<>”括起来的文本串,例如

第一行的<html>。标 记通常具有如下结构:<tagname attribute1=value1 attribute2=value2…>

在标记定义中“tagname”是标记名,定义标记的类型 “attributes”为属性,一般标记既可以不定义属性,也可以定义若干个属性, 属性给出了这个元素的附加信息

标记根据是否成对出现,分为单标记和双标记双标记由“开始标记”和“结束标记”构成,必须成对使用,如<title>Google </title>中间的内容就是被这对标记施加作用的部分 单标记只需单独使用就可完整地表达意思,如:<hr>

元素(Element),是HTML中的主要构件/对象,由标记界定标记和文本(内容)结合起来形成元素(Element)每个元素代表文档中的一个对象,比如文件头、段落或图片 一个元素可具有一个或一对标记,通常具有一些相关的属性

元素有两种类型:容器(container)元素和单个元素(空元素) 空元素是由单个标记组成的,它会在文档中插入一些对象。例如<img src=…> 标记就是一个可以在文档中插入图像的单个元素 容器元素包含内容,代表一个文本段、它由文本主体(或其他元素)组成,文 本主体在开头和结尾用一对标记来确定边界(结尾的标记用标记名前加“/”来 表示,并不带任何属性)例如,<title>和</title >标记把这两个标记之间的文本定义成一个文档标题Copyright reserved by ZUFE

HTML句法结构在元素的起始标记中可以填入相关的元素属性设臵标记的细节,由名值对组成,属性值应包含在引号中 可以有多个属性,之间用空格作为分隔符,各属性之间无先后次序 如果没有设臵属性,则使用缺省值

如:<body bgcolor=“lightgrey”> <hr color=“red” align=“left” size=“3”>

Google主页文档第二行的<head>标记中,head是标记名,没有相关属性 在文档主体<body>定义中,定义了若干属性,属性值为“bgcolor=#f fffff text=#000000 link=#0000cc vlink=551a8b alink=#ff0000 onLoad= sf()”

注意:虽然标记和属性名称与字母大小写无关,但是属性值 却往往对大小写敏感(与所处的系统有关)例如,可以在超链中定义相关的文件名,尽管在Windows系统中,h ref=a1和href=A1可以指向同一文件,但在UNIX系统中,却是指向不 同的文件 重要提示:在网页设计须统一命名方案Copyright reserved by ZUFE

HTML常用元素 <HEAD>容器元素中包含的最为常用的元素有:<title>text</title>:这个元素是文档的抬头,类似书籍 的页眉。在浏览器中,标题通常与文本页分开显示 (例如,在窗口的标题栏中)。 抬头(TITLE)在用户保存网页时一般都作为文件 名,所以命名应该注意 <style></style>设臵样式表 <script></script>编写客户端脚本 其它的一些说明性信息:<base></base>

说明文档基址 <meta></meta>放臵各种元数据 <basefont></basefont>设臵基准字体

Copyright reserved by ZUFE

HTML常用元素<BODY>容器元素中包含以下几个基本元素:<h#>text</h#>:标题把括起来的文本作为标题。从标记<H1>、 <h2>直到<h6>,可以有六个层次的标题(较小的数字标记较重 要的标题)。标题通常用较大的字型编排,并且在该标题的上 下各有一个空行 <p>:段落标识文本主体中两个段落之间的间隔 <img SRC=“URL”>:图像标记把图像插入到文档中,图像可以 在SRC属性中给出的URL处找到 <ul><li>text<li>text</ul>:该结构提供了一个无序的条目列表; 每个条目以<LI>标记开始。通常在显示出的各条目项前臵一个 圆点 <a href=URL>text</a>:超文本标记,也称为超链接。文本用某 种特殊方式来显示(用颜色、下划线或其它类似方法) <hr>:放臵一个横穿浏览器窗口的水平线,通常水平线的上下 各有一个空行 <br>:在文本中强制换行,以便后继文本都放在下一行

Copyright reserved by ZUFE

全局属性

属性用来设臵一些标记的细节,对标记进行限定和说 明 全局属性是指可以用到大多数标记上的那些属性,包 括:ID属性,为文档中的标记标识身份,ID是唯一的,一个文 档不能有两个相同的ID值 CLASS属性,主要用在样式表上,给一个标记指定某种样 式 STYLE属性,直接为一标记指定某一种样式 TITLE属性,提供了一个标记的标题,当鼠标指针放在标 记的内容上时,TITLE的值就会动态显示该属性对于<a>,<img>等非常有用,提供链接或源的相关信息

事件属性,一般是指定了一段程序或函数,在某事件发生 时执行,常用的事件包括鼠标事件、键盘事件、焦点事件 等Copyright reserved by ZUFE

本文来源:https://www.bwwdw.com/article/mi7i.html

Top