态网页与动态网页之间的区别
什么是静态网页
所谓”静态”指的是网页内容”固定不变”,当浏览者通过互联网的HTTP协议向Web服务器请求替换网页内容时,服务器仅仅是将原来已经设计好的静态HTML文档传送给用户的流量器,其页面的内容使用仅仅是标准的HTML代码,静态网页文件通常以htm、html等为后缀名。
什么是动态网页
所谓”动态”,并不是指在网页中放几个带动画的GIF或者SWF图片和动画,而是指用户在浏览此网页时,可以根据本身的需求在网页中进行操作,而网页根据用户的输入,能够产生相应的结果来响应用户,那样的网页才叫动态网页,动态网页文件通常以.asp、.php等为后缀。
静态网页与动态网页的区别
1、编程技术不同
很多人容易将动态网页与页面的动态内容混为一谈,其实,动态网页与网页中的动态内容,如flash动画、滚动字幕等并没有直接关系。所谓的动态网页是指利用HTML程序语言、其他高级程序设计语言和数据库技术编程生成的网页。静态网页是指利用HTML程序语言编程生成的网页,随着HTML代码的生成,页面内容和显示效果不会再在发生改变,除非修改代码。而动态网页不容,页面代码虽然不发生变化,但显示的内容可以根据数据库操作的结果发生改变。
2、被搜索引擎收录的状况不同
由于编程技术不容,静态网页是纯粹HTML格式的网页,页面内容稳定,不论是网页是否被访问,页面都被保存在网站服务器上,很容易被搜索引擎收录。而动态网页的内容是当用户点击请求时才从数据库中调出返回给用户一个网页的内容,并不是存放在服务器上的独立文件,相比较于静态网页而言,动态网页很难被搜索引擎收录。
3、用户访问速度不同
用户访问动态网页时,网页在获得搜索指令后经过数据库的调查匹配,再将与指令相符的内容传递给服务器,通过服务器的编译将网页编译成标准的HTML代码,从而传递给用户浏览器,多个读取过程大大降低了用户的访问速度。而静态网页不同,由于网页内容直接存取在服务器上,省去了服务器的编译过程,用户访问网页速度很快。
4、制作和后期维护工作量不同
动态网页的设计以数据库技术为基础,可以实现多种功能,降低了网站维护的工作量。而静态网页由于没有数据库的支持,网页内容更改时需要直接修改代码,在网站内容制作和维护中,所需的工作量更大。
动态网页与静态网页各有特点,网站设计师在网页设计时,主要根据网站的功能需求和网站内容多少选择不同网页。如,网站包含信息量太大时,就需要选择动态网页,反之,则选择静态网页。
GDCA(数安时代)拥有国内自主签发信鉴易 TrustAUTH SSL证书以及是国际多家知名品牌:GlobalSign、Symantec、GeoTrust SSL证书指定的国内代理商。为了让国内更多的网站升级到安全的https加密传输协议。近日,GDCA推出多种国际知名SSL证书优惠活动,实现HTTPS加密并展示网站真实身份信息。详情请资讯GDCA产品官网在线客服https://www.trustauth.cn/。
文章转载:https://www.trustauth.cn/news/wiki/15753.html
者有话要说:此文是作者自己的学习总结,供大家参考,不足之处还请见谅和指正~
在学习完了基本的HTML+CSS标签之后,就可以尝试写一些简单的静态网页啦~练习的过程是充满成就感的,值得反复体会和思考!
网页结构
简单提一下常用于表示网页机构的标签:
header 整个页面的标题(也可表示一个内容区块)
main 页面主体部分
footer 整个页面的脚注(也可表示一个内容区块)
article 一块与上下文无关的独立内容
section 表示一个内容区块,常嵌套于article中
aside 在article之外与其内容相关的辅助信息
nav 页面中的导航栏
figure 表示一段独立的流内容
基本网站结构
三栏布局
一个网页最少由header、main、footer三部分组成,那么从三栏布局开始练习吧。无论是上-中-下结构还是左-中-右结构,关键都在于设置中间部分的宽高或位置。我们知道网页的主体内容(版心)是处于居中位置、随网页缩放而缩放的。那么左右(或上下)两栏固定后,须使中间部分自适应。以下总结了几种三栏布局的方法,以左-中-右结构为例:
先写左中右三个盒子。
body部分
1.使用float
利用float使左右脱离文档流
需要注意的是,使用float方法需要在body部分改一下center盒子的位置,把center盒子放在right盒子之后(否则right盒子会跑到下一行右侧)。以上代码中,设置center盒子的左右外边距来实现宽度自适应,若父盒子layout无高度要求,可用min-height实现高度自适应。不加高度自适应也可,在未设置center盒子高度的情况下本身高度会随文本内容的扩充而自动增加。
2.使用position
利用绝对定位脱离文档流
三个盒子都分别使用绝对定位,left、right分别距离窗口左右端为0,center距离窗口左端的间距为left盒子的宽度,距离窗口右端的间距为right盒子的宽度。
3.使用flex
利用弹性盒固有属性
须给父盒子layout加上弹性盒属性,给center盒子设置大于0的flex值,利用弹性盒自动拉伸效果实现center盒子的宽度自适应。
4.使用table
设置为表格
给父盒子layout设置为table,宽度为整个窗口,给三个子盒子都设置为table-cell,此时三个盒子就有了表格的属性。固定left、right盒子的宽度,center盒子自动占满父盒子剩余宽度。需要注意的是,因为父盒子具有表格属性,当left、center、right三者中任意一个盒子高度改变时,其他两个盒子会跟着改变。
5.使用grid
设置为网格
将父盒子layout设置为grid,宽度为整个窗口,用template-rows设置行高,用template-columns分别设置三个盒子的宽度,其中auto实现center盒子的宽度自适应。需要注意的是,这里用template-rows设置了固定的行高,因此center的高度不会自适应。
仿写练习
适合初学者练习的网页有很多,可以打开网址之家去里面挑一挑,以静态页面为主的网站。作者自己是以豆瓣首页(局部)进行练习的。练习过程中,千万不要去看网站源码(此时你也有很多地方看不懂),先试着自己分析和思考,用所学的知识看看能做到哪一步。
笔者学习时的仿写
放上对比图,还是有很多不一样的地方,网页也没有功能,作为初学者这都是正常的。静态网页练习的主要目的是熟悉HTML+CSS布局,培养做网页的思维。具体细节随着学习的深入,可以让网页更还原、页面更精美,网页功能也能逐步完善起来,实现真正的网站开发。
页可以分为静态网页、动态网页两种类型。关于这两种网页的介绍如下。
1.静态网页
静态网页包含的诸如文本、图像、Flash动画、超链接等内容,在编写网页源代码时已经确定。除非网页源代码被重新修改,否则这些内容不会发生变化。例如,某汽车品牌的网站首页就是一个静态网页,具体如图所示。
静态网页具有以下几个特点。
? 静态网页的内容相对稳定,一旦上传至网站服务器,无论是否有用户访问,内容都会一直保存在网站服务器上。
? 静态网页被访问的速度快,访问过程中无须连接数据库。
? 静态网页没有数据库的支持,内容更新与维护比较复杂。
? 静态网页的交互性较差,在功能方面有较大的限制。
值得一提的是,静态网页上展示的内容并非完全静止的,它也可以有各种视觉上的动态效果,如GIF动图、Flash动画、滚动字幕等。
2.动态网页
相比静态网页,动态网页有数据库支撑、包含程序以及提供与用户交互的功能,如用户登录、用户注册、信息查询等功能,根据用户传入的不同参数,网页会显示不同的数据。例如,登录某网站后查询百度公司信息的页面是一个动态网页,如图所示。
动态网页具有以下一些特点。
? 动态网页一般以数据库技术为基础。
? 动态网页并不是独立存在于服务器上的网页文件,只有当用户发送请求时,服务器才会返回完整的网页。
? 采用动态网页技术的网站可以实现更多的功能,如用户注册、用户登录、在线调查、用户管理、订单管理等。
对于网络爬虫来说,静态网页的内容都写在源代码中,比较容易抓取;动态网页的内容不一写在网页源代码中,可能需要用户登录后才能显示完整,这增加了抓取难度。
*请认真填写需求信息,我们会在24小时内与您取得联系。