HTML第一课：B/S结构&C/S结构、HTML、六种常用标签

一、B/S和C/S结构

1.C/S(client/server)结构流程

    客户端将用户请求通过网络，发送给目标服务器，服务器接收到请求后作出响应，再通过网络将请求传递给用户。

2.B/S(browser/server)结构流程

    用户使用浏览器将请求通过网络发送给目标服务器，服务器接收到请求后作出响应，再通过网络传递给用户浏览器进行展示。

3.两者主要差异对比：

①硬件环境不同：

    C/S 一般建立在专用的网络上, 小范围里的网络环境, 局域网之间再通过专门服务器提供连接和数据交换服务.  B/S 建立在广域网之上的, 不必是专门的网络硬件环境,例与电话上网, 租用设备. 信息自己管理. 有比C/S更强的适应范围, 一般只要有操作系统和浏览器就行

②对安全要求不同：

    C/S 一般面向相对固定的用户群，对信息安全的控制能力很强，一般高度机密的信息系统采用C/S 结构适宜。可以通过B/S发布部分可公开信息，B/S 建立在广域网之上, 对安全的控制能力相对弱, 面向是不可知的用户群。

③系统维护不同 ：

    C/S 程序由于整体性, 必须整体考察, 处理出现的问题以及系统升级. 升级难. 可能是再做一个全新的系统B/S 构件组成,方面构件个别的更换,实现系统的无缝升级. 系统维护开销减到最小.用户从网上自己下载安装就可以实现升级. 

郑重强调：目前绝大多数互联网公司均采用B/S结构

二、静态网页和动态网页

 1.静态网页定义：纯粹采用html编写的网页，相对于动态网页而言，没有后台数据库支持，不包含程序，数据基本为固定数据

 2.动态网页定义：采用ASP、JSP、PHP、CGI等程序动态生成的页面，这种页面只有在接收到用户请求后才会进行动态生成，根据后台所传递过来的数据不同，而展现给用户的效果也会不同。

二者的对比：

——————————————————————————————————————————————

                      静态网页                      动态网页  

 

内容：              网页内容固定                 网页内容动态生成  

后缀：              .html、.htm                 .asp、.jsp、.php等   

优点：              不需要系统实时生成           日常维护简单、更改结构方便、极强的交互性   

缺点：              交互性能差、维护繁琐         需要大量系统资源合成网页   

数据库：            不支持                       支持

——————————————————————————————————————————————

    在实际生活中，我们不可以仅仅根据文件的后缀来判断一个网页究竟是动态的网页还是静态的网页，例如  index.html重命名为index.jsp，尽管这个文件的后缀是符合动态网页所拥有的后缀，但其本质依旧是一个静态网页。

三、接下来我们来明确两件事情

    1、html：是一种描述语言，用于开发生活中的页面，全称HyperText Mark-up Language，我们平时所看见的网页上拥有的任何一内容，均是用这门语言进行编写的。 

      

    2、每一个页面，其本质其实都是一个用html这门语言所编写的html文档。用户电脑上的浏览器对我们的html文档进行解析，将解析后的内容再展现给用户。        

    而每一个html文档，都是由三大部分组成:HTML元素、HEAD元素和BODY元素，并且每一个元素中又包含格子独有的其他标记（标签）。       

    html元素是最外层元素，里面包含着head元素和body元素，head元素中包含的是文档的基本信息，body元素中包含的是我们平时能在网页上看到的具体内容。        

    一言概之，关于网页自身的信息放在head元素中，我们想给用户看到的东西放在body中。而无论是什么内容，其实都是对应着html中的某一种标签，并且大多数html的标签均是成对出现的。   

    第一课要求大家掌握的标签共有六大种：标题、文本、图像、背景、列表和超链接。   

    取图片标签的一个不容易被大家理解的属性来进行一下简单讲解，属性名为usermap。

    这个属性的作用是：可以将一张图片划分成不同区域，每一块区域都映射着一个不同的url，当用户单击其中某一个区域时，将被链接到不同的文档中。        

    例如如下这张图片，将五个电影放在同一张图片中，用户点击不同电影所在的区域，会跳转到区域所对应的具体电影播放界面。

    usemap属性提供了一种“客户端”的图像映射机制，有效地消除了服务器端对鼠标坐标的处理，以及由此带来的网络延迟问题。通过特殊的 <map> 和 <area> 标签，HTML 创作者可以提供一个描述 usemap 图像中超链接敏感区域坐标的映射，这个映射同时包含相应的超链接 URL。usemap 属性的值是一个 URL，它指向特殊的 <map> 区域。用户计算机上的浏览器将把鼠标在图像上单击时的坐标转换成特定的行为，包括加载和显示另外一个文档。        

    我们举例说明一下，下面这段源代码将一个 100x100 像素的图像 map.gif 映射为 4 个区域，当用户单击其中某一个区域时，将被链接到不同的文档中。

1. 1. <a href="/example/map">  
   2.   <img src="/i/map.gif" usemap="#map" />  
   3. </a>  
   4. <map name="map">  
   5.   <area coords="0,0,49,49" href="link1.html">  
   6.   <area coords="50,0,99,49" href="link2.html">  
   7.   <area coords="0,50,49,99" href="link3.html">  
   8.   <area coords="50,50,99,99" href="link4.html">  
   9. </map>  

    早期的视频网站和地图会采用此种方式，但随着IT技术的不断进步，已经出现了更多更简便的解决方式，因此大家对于usemap这个属性进行一个了解即可。

    其他五种标签就不进行逐一累述了，html的标签学习起来并没有什么难度，重点在于勤加练习！