第1章：Web工作原理和HTML基础知识资料

InsertPictureHere第一章Web工作原理和HTML基础知识本章内容理解Web的工作原理HTML基础知识HTML概述HTML的基本语法HTML文档的结构网页中的文本网页中的注释和实体超链接和图像Web是什么(1/2)Web的名称Web又称做万维网或环球网，是（WorldWideWeb）的简称，是实质上是一个超文本信息系统Web的功能发布信息搜索和浏览文本和图片信息在线播放音、视频文件发表观点电子购物Web是什么(2/2)Web的实质Web是基于Internet的一个多媒体信息服务系统它基于客户/服务器模式，整个系统由Web服务器、浏览器（Browser）和通信协议等三部分组成通信协议采用的是HTTP协议HTTP协议是超文本传输协议（HypertextTransferProtocol）的简写，HTTP协议处于TCP/IP协议簇的应用层Web工作原理基本原理概述在Web服务器上，主要以网页（WebPage）的形式来发布多媒体信息网页采用超文本标记语言HTML（HyperTextMarkupLanguage）来编写当浏览器软件连接到Web服务器并获取网页后，通过对网页HTML文档的解释执行将网页所包含的信息显示在用户的屏幕上Web组织形式Web的基本组织形式Web是一个超文本文件的集合超文本文件是Web的基本组成单元，也称为网页或HTML文档、Web页等，通常是以.html或.htm为后缀的文件Web页之间通过超文本中的超级链接组织在一起超文本什么是超文本是格式和存储位置均可不同的文件，通过某种方式组织在一起共同来表述一件事情的组织形式超级链接是超文本用来串连信息的“绳索“，又叫做URL超链接超文本的“绳索”——超链接超文本中除了要传达的文字图片等信息外，还包括一类很重要的信息--------超级链接超链接指向的是一个用URL标识的网络资源（文件，图片，媒体等）网页中有超链接的文字或图片一般有特殊的显示方式（下划线或手形鼠标）Web编程语言Web的编写语言HTML（HyperTextMarkupLanguage，超文本标记语言）是编写Web页的语言HTML语言使用带有尖括号的“标记”将网页中的内容逐一标识出来（被标识的部分叫做“元素”），这样做可以让网页以字符流的方式在网络中流动，在用户端使用特殊的软件（浏览器）对这些字符流进行翻译并按照标识的要求显示出来htmlheadtitle第一个网页title/headbodyh1fontcolor=#666666欢迎进入网页制作天地/font/h1/body/htmlHTML是一个扩展性很强的语言，可以嵌套用脚本语言编写的程序段这些脚本语言如：VBScript，JavaScriptWeb信息交互方式Web信息的交互方式Web中的信息（以超文本的形式）是通过一种一问一答的方式进行交互的，这种方式叫做客户/服务模式网络浏览器作为客户端提出访问某个网页的请求，Web服务器作为服务端做出应答并把这个网页发送给浏览器Web浏览器主要Web浏览器产品Netscape通信公司的NavigatorMicrosoft公司的IE（InternetExplorer）SUN公司的HotJava火狐Googlechrome……相同的html代码在不同的浏览器产品上，甚至是同一个浏览器产品的不同版本上显示效果可能不同(跨浏览器问题)IE8以上版本Web服务器(1/2)Web服务器的主要功能存储Web上的内容信息（如：Web页文件），提供管理环境SNMP（SimpleNetworkManagementProtocol）代理功能响应浏览器的请求执行服务器端程序安全功能Web服务器(2/2)主要Web服务器产品微软的IIS（InternetInformationServer）微软的PERSONALWebSERVERSYBASE的SYBASEEASERVERAPACHEWebSERVER（自由软件）APACHETomcat……动态Web什么是动态Web能够动态地安排Web页面元素的显示方式Web页具有动态交互性。用户可以提交信息，服务器可以根据用户提交的信息动态生成返回页面动态Web使得人们可以建立基于浏览器的信息系统，这是电子商务实施的平台动态Web技术客户端技术服务器端技术动态Web开发技术客户端技术的作用自动控制包含在网页中的HTML元素，以实现一些动态效果。（比如让文字走动）响应用户鼠标和键盘消息根据用户的软硬件环境决定页面的显示（比如浏览器的版本）客户端技术主要的客户端技术脚本语言VBScriptJavaScript可下载组件ActiveXJavaApplet服务器端技术服务器端技术的主要作用根据用户提交的请求和查询关键字访问数据库并以HTML页面的方式返回结果用户信息的收集和登记用户访问行为的记录服务器端技术主要的服务器端技术ASP（ActiveServerPage）微软公司，VB语法PHP（HypertextPreprocessor）RasmusLerdorf，可以使用C/C++进行程序扩展JSP（JavaServerPage）Sun公司，Java语法HTML概述HTML语言的起源与发展HTML的特点HTML语言与W3C组织有关术语HTML语言的起源HTML是一种标记语言，起源于SGML（StandardGeneralizedMarkupLanguage）标准通用标记语言SGML是定义电子文档结构和描述其内容的国际标准语言SGML在Web发明之前就存在HTML是SGML的子集HTML由TimBerners-Lee和同事NanielW.Connolly在瑞士日内瓦的欧洲粒子实验室发明，伴随着WEB一起诞生HTML的管理机构:万维网组织W3C（WorldWideWebConsortium）是一个非营利性的负责为HTML制定标准的机构,负责关于万维网的标准的制定,可以通过访问网址相关术语标记标记是用尖括号包围的单词,很多标记是成对的，一个是开始标记,一个是结束标记（单词前加/）元素每一对尖括号包围的部分比如由bodyxxx/body包围的部分就叫做body元素元素通常由三个部分组成开始标记内容结束标记属性用来修饰元素每个属性都有值属性放在开始标记中fontsize=3Oracle/font开始标记属性结束标记元素HTML元素块级元素指一些元素可以在浏览器中用一个矩形框（块）来表示，即使不显示任何内容也可以用这样一个空白矩形来作为占位符如p、body、div元素等内联元素指在文档中插入到块元素中的那部分元素作用：可以控制在块元素内进行如强调、引用、斜体等特殊格式变化包括em（加强）、span（内联元素分组）、sub（下标）、sup（上标）等编辑HTMLHTML文档所有的部分都由某种标记包围着，为了版本兼容，标记单词最好用小写由HTML编写的文件以后缀.html或.htm保存以.htm为扩展名主要是为了和某些操作系统兼容。在一些操作系统中比如dos对扩展名的位数有限制(3位)HTML语法的三种表达方式标记内容/标记标记属性1=参数1属性2=参数2内容/标记标记HTML基本语法(1/4)标记内容/标记--封闭类型标记大多数标记是封闭类型的，它们成对出现，在内容的前面是一个标记，而在内容的后面是另一个标记，第二个标记元素前带有反斜线，表明结束标记对内容的控制示例：h1这是标题/h1如果一个应该封闭的标记没有被封闭，则会产生意料不到的错误HTML基本语法(2/4)标记属性1=参数1属性2=参数2内容/标记利用属性可以进一步设置内容某方面的属性例如：–ptitle=这里有一个段落段落一/p–设置了标记p的title属性一个标记的属性可能不止一个，可以在描述完一个属性后，输入一个空格，然后继续描述其它属性属性只能出现在开始标记中段落开始标记属性参数段落结束标记HTML基本语法(3/4)标记（空标记）--非封闭类型标记最常用的是换行标记br如果希望使一行文字换行（但是仍然同上面的文字属于一个段落），则可以在文字要换行的地方添加标记br，例如：此类型还有base,link,meta标记等p这是一段完整的段落br中间被换行处理/pHTML基本语法(4/4)标记嵌套标记之间可以相互嵌套，形成更为复杂的语法例如：在嵌套标记时需要注意标记的嵌套顺序例如：bi这是一段是粗斜体的文本/i/bbi这是一段是粗斜体的文本/b/iHTML文档的结构一个HTML文档可以看成由以下三个部分构成：版本信息文档头由HEAD/HEAD标识文档主体部分由BODY/BODY标记标识典型的HTML文档结构文件头元素HEAD/HEADHEAD元素包含了与当前文档相关的信息，如文档的标题、关键字（如果该文档希望被搜索引擎搜索到，各部分信息很重要）、以及一些和文档内容无关仅对文档本身进行说明的数据信息文件头元素语法开始标记：head可选内容：title标题元素base文档基础目录元素meta元数据元素script脚本元素style内部样式表的样式元素link链接元素连接到外部样式表结束标记：/head可选标题元素title/title元素标题元素的内容出现在浏览器顶部没有属性必需出现在head元素中且只能有一个标题元素元数据元素meta元数据元素meta的意思是“关于”它是关于某个网页的基本信息搜索引擎对meta元素中数据进行搜索可以帮助访问者找到该网页META的属性META的属性作用name属性指定特性名content属性指定特性的值http-equiv属性使得HTTP服务器根据http-equiv属性的值获取http响应信息头,以便可以让浏览器按某种指定的方式显示页面META的作用举例给网页添加说明（比如网页的作者，关键字等）metaname=Authorcontent=DaveRaggett让网页可以按关键字被搜索到增加关键字可以提高网页被浏览的机会metaname=“keywords”content=这里写关键字定期刷新网页比如在聊天室应用中，需要随时刷新用户的发言metahttp-equiv=refreshcontent=10文档主体元素body/bodybody元素代表网页要显示给读者的内容，几乎所有要显示的内容都被包括在body……/body里面语法：开始标记：body可选内容：可以包含除了html、head外所有元素结束标记：/body可选网页中的文本网页中的信息主要是通过文本传递的，所以文本是Web信息的基本构成。与文本编辑有关的元素，包括：p段落标记br换行标记div、span区块标记hr水平线标记strong、em强调标记h1h2h3h4h5h6文本标题标记liulol列表标记dldtdd定义列表标记p段落元素的语法开始标记：p必需内容：嵌套其它块元素内联元素文本结束标记：/p可选段落元素的属性属性作用id,class和样式表结合使用，给文档中的某一段落赋以唯一的标识title元素的标题，它的作用是设定当鼠标停留在该元素上时，出现的高亮提示文字style直接指定该元素的样式align对齐属性。建议不使用，