一、关于web
1、web的由来
1989年CERN
(欧洲粒子物理研究所)中由Tim Berners-Lee领导的小组提交了一个针对Internet
的新协议和一个使用该协议的文档系统,该小组将这个新系统命名为World Wide Web
,它的目的在于使全球的科学家能够利用Internet
交流自己的工作文档。
这个新系统被设计为允许Internet
上任意一个用户都可以从许多文档服务计算机的数据库中搜索和获取文档。1990年末,这个新系统的基本框架已经在CERN中的一台计算机中开发出来并实现了,1991年该系统移植到了其他计算机平台,并正式发布。
2、浏览器
浏览器是用来显示在万维网或局域网等内的文字、图像及其他信息的软件,它还可以让用户与这些文件进行交互操作。浏览器是电脑上网时经常使用到的应用软件,浏览器正是Internet时代的产物,随着电脑操作系统的普及、Internet的全球连接及人们对信息需求的爆炸式增长,为浏览器的诞生和兴起提供了强大的动力,同时它也标志着互联网时代的来临。
3、浏览器的内核
浏览器的种类很多,但是主流的内核只有四种,各种不同的浏览器,就是在主流内核的基础上,添加不同的功能构成 。
Trident
内核
代表产品为Internet Explorer,又称其为IE内核。Trident(又称为MSHTML),是微软开发的一种排版引擎。使用Trident渲染引擎的浏览器有:IE、傲游、世界之窗浏览器、Avant、腾讯TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等 。Gecko
内核
代表作品为Mozilla Firefox。Gecko是一套开放源代码的、以C++编写的网页排版引擎,是最流行的排版引擎之一,仅次于Trident。使用它的最著名浏览器有Firefox、Netscape6至9 。WebKit
内核
代表作品有Safari、Chrome。WebKit是一个开源项目,包含了来自KDE项目和苹果公司的一些组件,主要用于Mac OS系统,它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高,导致一些编写不标准的网页无法正常显示 。Presto
内核
代表作品Opera。Presto是由Opera Software开发的浏览器排版引擎,供Opera 7.0及以上使用。它取代了日版Opera 4至6版本使用的Elektra排版引擎,包括加入动态功能,例如网页或其部分可随着DOM及Script语法的事件而重新排版 。
4、Web服务器分类
这里的Web服务器不是指硬件上的服务器,而是指支持解析Web后台语言的服务器。常用的服务器有以下几种:
IIS服务器
。IIS服务器是微软提供的一种Web服务器,它主要是解析微软提供并开发的ASP
和ASP.NET
等后台语言,运行在Windows平台下,对IE内核的浏览器支持良好,并且有些调用Windows接口的Web应用程序只能采用IIS服务器进行解析。IIS服务器优点很多,但是缺点也很明显,通常Windows的漏洞容易导致其安全性大为降低 。Apache服务器
。Apache服务器是开源基金组织Apache提供的一种Web服务器,主要是解析PHP文件,是一款功能强大的免费软件,支持多个操作系统,如Windows、Linux、MacOS等 。Tomcat服务器
。Tomcat服务器也是开源基金组织Apache提供的一种支持JSP组件的Web服务器,它支持Windows、Linux、Mac OS等多个操作系统,安装简便,使用也较为方便,是本书开发使用的服务器组件 。- 其他服务器。如
JBoss
、Weblogic
、WebSphere
等,这些服务器由于在商业上使用较多,也有部分需要付费,本书不进行介绍,有需要的读者可到相应的官方网站上查看 [4] 。
5、W3C
- 万维网联盟创建于1994年,是Web技术领域最具权威和影响力的国际中立性技术标准机构。到目前为止,W3C已发布了200多项影响深远的Web技术标准及实施指南,如广为业界采用的超文本标记语言
HTML
(标准通用标记语言下的一个应用)、可扩展标记语言 XML(标准通用标记语言下的一个子集)以及帮助残障人士有效获得Web信息的无障碍指南(WCAG)等,有效促进了Web技术的互相兼容,对互联网技术的发展和应用起到了基础性和根本性的支撑作用。 - W3C为解决 Web 应用中不同平台、技术和开发者带来的不兼容问题,保障 Web 信息的顺利和完整流通,万维网联盟制定了一系列标准并督促 Web 应用开发者和内容提供者遵循这些标准。标准的内容包括使用语言的规范,开发中使用的导则和解释引擎的行为等等。
- W3C也制定了包括XML和CSS等的众多影响深远的标准规范。 但是,W3C 制定的 web 标准似乎并非强制而只是推荐标准。因此部分网站仍然不能完全实现这些标准。特别是使用早期所见即所得网页编辑软件设计的网页往往会包含大量非标准代码。
- W3C 致力于对web 进行标准化
- W3C 创建并维护了 WWW 标准
- W3C 标准被称为 W3C 推荐标准(
W3C Recommendations
)W3C 最重要的工作是发展web
规范,也就是描述web
通信协议(比如HTML
和XML
)和其他构建模块的“推荐标准”。
二、HTML简介
HTML的英文全称是 Hypertext Marked Language
,即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言,它是标准通用化标记语言SGML
的应用。用HTML编写的超文本文档称为HTML文档,它能独立于各种操作系统平台(如UNIX, Windows等)。使用HTML语言,将所需要表达的信息按某种规则写成HTML文件,通过专用的浏览器来识别,并将这些HTML文件“翻译”成可以识别的信息,即现在所见到的网页。
自1990年以来,HTML就一直被用作WWW
的信息表示语言,使用HTML语言描述的文件需要通过WWW
浏览器显示出效果。HTML是一种建立网页文件的语言,通过标记式的指令(Tag
),将影像、声音、图片、文字动画、影视等内容显示出来。事实上,每一个HTML文档都是一种静态的网页文件,这个文件里面包含了HTML 指令代码,这些指令代码并不是一种程序语言,只是一种排版网页中资料显示位置的标记结构语言,易学易懂,非常简单。HTML的普遍应用就是带来了超文本的技术―通过单击鼠标从一个主题跳转到另一个主题,从一个页面跳转到另一个页面,与世界各地主机的文件链接超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。HTTP协议的制定使浏览器在运行超文本时有了统一的规则和标准。
万维网(world wide web
)上的一个超媒体文档称之为一个页面(外语:page)。作为一个组织或者个人在万维网上放置开始点的页面称为主页(外语:Homepage
)或首页,主页中通常包括有指向其他相关页面或其他节点的指针(超级链接),所谓超级链接,就是一种统一资源定位器(Uniform Resource Locator
,外语缩写:URL)指针,通过激活(点击)它,可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。在逻辑上将视为一个整体的一系列页面的有机集合称为网站(Website或Site)。超级文本标记语言(英文缩写:HTML)是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。
网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。因而,超级文本标记语言是万维网(Web)编程的基础,也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。
- 定义
超级文本标记语言是标准通用标记语言下的一个应用,也是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停止其解释执行过程,编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是,对于不同的浏览器,对同一标记符可能会有不完全相同的解释,因而可能会有不同的显示效果。 - 历史
时间 | 事件 |
---|---|
1993年6月 | HTML 1.0—作为互联网工程工作小组(IETF)工作草案发布(并非标准) |
1995年11月 | HTML 2.0—作为RFC 1866发布,在RFC 2854于2000年6月发布之后被宣布已经过时 |
1997年1月14日 | HTML 3.2—W3C推荐标准 |
1997年12月18日 | HTML 4.0—W3C推荐标准 |
1999年12月24日 | HTML 4.01(微小改进)—W3C推荐标准 |
2000年1月 | XHTML 1.0,W3C推荐标准 |
2001年5月 | XHTML 1.1,W3C推荐标准 |
2014年10月28日 | HTML 5—W3C推荐标准 |
三、HTML5
HTML5的目标是:它通过一些新标签,新功能为开发更加简单、独立、标准的通用Web应用提供了标准。新的标准解决了三大问题:浏览器兼容问题,文档结构不明确的问题,Web应用程序功能受限等问题。
1、Hello Word
- 打开记事本
- 输入以下代码
<html>
<head>
<title>hello world</title>
</head>
<body bgcolor="#F0F0F0">
Hello World !
</body>
</html>
- 将文件保存为
hello word.html
- 在浏览器中打开
hello word.html
2、标签语法
HTML所遵循的基本标签语法是<标签 属性="值">内容</标签>
,例如:
<p align="center">我是一个段落</p>
说明:
- 标签通常是成对出现的,分为开始标签
<p>
和结束标签</p>
,结束标签只是在开始标签前加一个斜杠“/
”。 - 标签可以有属性(上例中是
align
),属性必须有值(上例中是center
) - 开始标签与结束标签中包含的内容称之为标签体,或者区域。
- 一个完成的标签,即包含开始标签、结束标签和标签体,形成一个HTML页面元素。
- 标签不区分大小写,
<p>
和<P>
是相同的。但建议写成小写字母。
3、基本结构
- HTML文件中的第一个标签是
<html>
,这个标签告诉浏览器这个HTML文件的开始点;文件中最后一个标签是</html>
,这个标签告诉浏览器,这是HTML文件的结束点。 - HTML文档有明确的基本结构,包括两个部分,即在
<html>
中包含<head>
部分和<body>
部分。 - 位于
<head>
标签和</head>
标签之间的文本是头信息,头信息不会显示在浏览器窗口中。 <title>
标签和</title>
标签中的文本是文件的标题,标题会显示在浏览器的标题栏。<body>
标签和</body>
标签中是HTML的主体部分,需要在浏览器中显示的内容写在<body></body>
中。<body bgcolor="#F0F0F0">
中bgcolor
是<body>
标签的中的一个属性名称,#F0F0F0
是bgcolor
属性的值。例子中该属性及值表示<body>
部分的背景颜色(bgcolor
)是灰色(#F0F0F0
)
4、文档类型声明<!DOCTYPE>
1、什么是文档声明类型
HTML文件中的第一行通常为文档类型声明:<!DOCTYPE>
。它不是HTML标签,只是为浏览器提供一项信息(声明),即HTML是用什么版本编写的。因为
- Web 世界中存在许多不同类型的文档。只有了解文档的类型,浏览器才能正确地显示文档。
- HTML 也有多个不同的版本,只有完全明白页面中使用的确切HTML版本,浏览器才能完全正确地渲染出 HTML 页面。
2、常见的文档声明
- HTML5的文档声明
<!DOCTYPE html>
- HTML4.01的文档申明
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
- HTML1.0的文档声明
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
5、元信息标签
1、什么是元信息
- 元数据是指从信息资源中抽取出来的用于说明其特征、内容的结构化的数据,用于组织、描述、检索、保存、管理信息和知识资源。
<meta>
标签可提供有关页面的元信息(meta-information
),比如针对搜索引擎和更新频度的描述和关键词。<meta>
标签位于文档的头部,不包含任何内容。故<meta>
有时也被称为头信息。<meta>
标签的属性定义了与文档相关联的名称/值对。
2、元信息实例
<!DOCTYPE html>
<html>
<head>
<title>meta标签</title>
<meta charset="utf-8">
<meta name="keywords" content="软件,开发">
<meta name="description" content="软件开发,软件设计,技术支持,技术服务">
<meta http-equiv="refresh" content="2;URL=http://www.baidu.com">
</head>
<body>
</body>
</html>
说明:
charset=utf-8
元信息就是告诉浏览器当前网页使用utf-8
编码显示。utf-8
是通用字符集,可以显示中文。常用的中文字符集还包括gb2312
,gbk
等。
编码 | 描述 |
---|---|
GB2312 | 是简体中文字符集,主要用于中国大陆和新加坡 |
UTF-8 | 是为通用字符集 |
GBK | 是GB2312的后续标准,添加了更多的汉字和特殊符号 |
BIG5 | 是繁体中文字符集,主要在台湾和香港地区使用 |
keywords
元信息是设置搜索引擎关键字。description
元信息是设置搜索引擎描述信息。refresh
是设置页面跳转,有两种用法
代码 | 描述 |
---|---|
<meta http-equiv="refresh" content="2;URL=http://www.baidu.com"> | 页面加载2秒钟后跳转到百度页面 |
<meta http-equiv="refresh" content="5"> | 每5秒钟刷新一次当前页面 |