您现在的位置是：首页 > 前端学习 > Web前端Web前端

了解网页(第一节)(图文)

第十三双眼睛2019-10-14【Web前端】人已围观

简介本章开始，将介绍一些于互联网相关的常用技术解释，以及制作网页时通常要涉及到的领域，需要考虑的问题，本章的知识点很多但是不难理解。本章的知识点如下：
1网页的概念和分类，了解网页的概念，区别静态网页和动态网页的不同
2涉及网页的原则，和工具，了解网页开发的常用工具。
3网页浏览器的工作原理，知道网页浏览器的工作原理。
4HTML,XHTML,HTML5这几个概念的区别。
5HTML的应用，自己写出一个简单的HTML页面

网页其实是在世界上某一个地方的某一台计算机上的一个文件，通过互联网，也就是Internet将两个不同的地址相连，把人们的信息传达到世界的各个角落，人们通过互联网，可以在世界的任何一个地方沟通。
什么是互联网，互联网是一种概念，一个虚拟的东西，人们可以通过浏览器浏览新浪，百度，但是不会有人说浏览互联网，互联网是指把所有网页链接在一起的巨大信息交流形式，它基于很多的协议来提现出它的表现形式，1989年欧洲粒子物理实验室的科学家们提出了一个分类互联网信息的协议，这个协议极大的推动了互联网的发展和普及，后来它有了一个十分响亮的名字，WWW，中文名称又叫做万维网，可以认为20世纪90年代，互联网进入了WEB1.0的时代。
早期的WEB1.0,大部分网页只有文字，图像信息可以浏览，这个时候互联网最典型的网站就是门户网站，比如新浪，搜狐，从2001年开始，人们认为互联网开始进入web2.0时代，这个时候的网页可以包含动画，音频，视频，可以在网页种进行交流，上传文件，使用完全交互式的程序，互联网开始更注重个人化的网络服务，任何使用网络的人，都可以参与到网页的制作种。笼统的说，网页主要由3部分组成，结构，表现和行为，对应的标准也分为3类，其中大部分都是由W3C组织制定，其中就包括HTML和CSS标准，对于初学者来说，了解网页的制作，一定要分清楚HTML和CSS的作用。
HTML标准基于语义学，通过标签来应用语义的过程，使用起来好像是打手语，做一个手势去告诉了对方什么意思，不同的是这里的手势换成了标签。
比如使用<table></table>表示一个表格，而它的外观如何表现出来呢。如颜色，大小，边框，这些问题交给CSS去解决。
静态网页
在网站设计中，纯粹的HTML格式网页被称为静态网页，早期的网站都是由静态网页组成的，特点是不论何时何地去浏览，都将显示出相同的内容，并且无法于网站进行互动。如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>静态页面</title>
</head>
<body>
<h1>这是一个静态页面</h1>
<h3>您只能浏览，不能交互</h3>
</body>
</html>

浏览该页面，结果如上图所示，只能浏览，不能修改。
静态页面使用HTML编写，通常扩展名为htm,html,shtml,xml等。静态网页只能单纯的在网页中展示图片于文字，听起来功能似乎简单，但是它是所有网页的基础。

动态网页
动态网页是与静态网页相对的，动态网页指网页的内容可以根据某种条件的改变而自动改变，如腾讯公司的Qzone空间里，常常会有一些使用者嵌入一个小小的计数器功能，当有人单击设计者的网页时，计数器的值会自动增加，这个技术器就是动态的，还有，目前网络流行的论坛，社区网，其中的用户注册页面，当用户输入正确的用户名和密码，就会成功登录，如果输入的用户名，或者密码错误时，就不能登录，会提示用户。这也是典型的动态网页。
同时，动态页面与静态页面的后缀不同，动态页面是以jsp,asp,php,perl,cgi,等形式作为后缀，并且在动态网页网址中有一个标志性的符号?,动态网页可以是春文本格式的，可以包含各种动画，这些只是网页具体内容的表现形式，并不是动态技术生成的页面，它不能根据用户的要求来生成新的页面，无论一个网页是否具有动态效果，除非是采用动态技术生成的网页，才可以称为动态网页。

早期的动态网页主要采用CGI技术，HTTP服务器与用户或者其他机器上的程序进行交谈的一种工具，其程序必须运行在网络服务器上，可以使用多种不同的程序语言，编写合适的CGI.
当用户在页面上留言，并点击确定按钮时，此时，都是工作在客户端，而接下来浏览器会将用户的信息传递到CGI程序，于是CGI程序按照预先设定的方法进行处理，虽然CGI程序已经应用很长的时间，而且功能强大，但是由于编写困难，逐渐被淘汰。目前常用的技术有3种，他们就是PHP,ASP,JSP语言。
动态页面的制作是离不开静态页面的，每一个动态页面的开发者都必须掌握HTML语言，在实际应用的网页种，有大量的HTML代码，动态网站的交互性能可能给网站带来安全隐患，而且负荷过大可能造成网站崩溃，或者动态网站对于搜索引擎不是很优化，在搜索页面种不容易被查找，这会影响网站的推广。

网页浏览器的工作原理
那么用户的浏览器是如何来浏览网页的呢，WWW是采用一种叫做B/S的架构，即浏览器和服务器，浏览器的工作原理可以分为以下几步来理解：
1浏览器通过HTML表单或超链接请求指向一个应用程序的URL。
2服务器收到用户的请求
3服务器执行已经接受创建的应用程序。
4应用程序通常是基于用户输入的内容执行所需要的操作。
5应用程序把结果格式化为网络服务器和浏览器能理解的文档，即我们所说的HTML网页。
6网络服务器把最后结果返回到浏览器种

HTML和HTML5
最初HTML仅允许研究人员以一种非常高效的方式，在互联网上共享信息，但是这一切在网络浏览器这一工具变得复杂，多样化之后，使设计人员可以在页面中放入更多不同形式的文件，如图像，音频，因此，设计人员开始为HTML加入了各种标签，而使本来设计简单的HTML更加丰富。

HTML5的设计理念
1化繁为简
HTML5为了做到尽可能的简化，避免了一些不比要的复杂设计，例如，DOCTYPE的改进，在过去的HTML文档种，第一行的DOCTYPE过于长，没有几个人能记得住，而在HTML5种就非常简单，只有<!DOCTYPE>
2向下兼容
HTML5有很强的兼容能力，比如一些标签的属性值没有使用引号括起来，标签属性种包含大写字母，有的标签没有闭合。
3支持合理存在内容
HTML5的设计者们用来很大的精力来研究通用的行为，例如很多人都是这样标记导航区的，
<div id="nav"></div>
既然已经大量存在，HTML就会想办法改进，所以就直接增加了一个<nav></nav>标签，表示导航区域。
4解决使用性的问题
对于一些用HTML无法实现的功能，用户会寻求其他的方法来实现，如对于绘图，多媒体，地理位置，实时获取信息等应用，通常会开发一定的插件去实现，HTML5的设计者们研究了这些需求，开发了一系列的用于web的接口。
5最终用户优先
6通用访问
可访问性：HTML5考虑了残障用户的需求，以屏蔽阅读器为基础的元素也已经被添加到规范中，
媒体中立：HTML5规范不仅是为某些浏览器而设计的，也许有一天HTML5的新功能可以在不同的设备上和平台上都能运行。
支持所有语种：例如，新的<ruby>元素支持在东亚页面上的排版。
编写一个简单的页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>静态页面</title>
</head>
<body>
<p>
<h1>这是我的第一个网页，你可以单击这里进入<a href="http://www.baidu.com">百度</a>查找你喜欢的东西</h1>
</p>
</body>
</html>