Python web开发（一）：认识网页

朱雀 2022-10-11 15:57 166阅读 0赞

### **Python爬虫、数据分析、网站开发等案例教程视频免费在线观看** ###

https://space.bilibili.com/523606542

# [Python学习交流群：1039649593][Python_1039649593] #

# 认识网页 #

网页主要由文字、图像和超链接等元素构成。当然，除了这些元素，网页中还可以包含音频、视频等。

![bb3f857d9605bdcb689066de07c5a113.png][]

网页有图片、链接、文字等元素组成，我们后面的任务就是要把这部分网页元素用代码写出来。。。

## 浏览器（显示代码） ##

平时我们浏览网页，是在浏览器地址栏中输入网页地址，就可以访问我们的页面了。你的浏览器呢？

![ee12f1de16910f11276356ae60206925.png][]

浏览器是网页显示、运行的平台，常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。我们平时称为五大浏览器。

![df7ec25e3294b0f01426ee6dfd922a2d.png][]

可能你最熟悉的是 IE浏览器，但是。。。

![04e6a0741f0085c73ab76d94bc619cf0.png][]

# Web标准（重点） #

目标

记忆：

*  能说出网页 中 web 标准三层组成

理解：

*  能结合人来表述web标准三层

Web标准不是某一个标准，而是由W3C组织和其他标准化组织制定的一系列标准的集合。

W3C 万维网联盟是国际最著名的标准化组织。1994年成立后，至今已发布近百项相关万维网的标准，对万维网发展做出了杰出的贡献。

**w3c就类似于现实世界中的联合国。**

### 为什么要遵循WEB标准呢？ ###

通过以上浏览器的内核不同，我们知道他们渲染或者排版的模式就有些许差异，显示就会有差别。

> 问： 哪个方言再全国基本都可以听得懂？

![3a825c9b734f5fe8f6d4d4d8ed7eb367.png][]

### Web 标准的好处 ###

1.  让Web的发展前景更广阔
2.  内容能被更广泛的设备访问
3.  更容易被搜寻引擎搜索
4.  降低网站流量费用
5.  使网站更易于维护
6.  提高页面浏览速度

专业的人做专业的事。 来呀快活呀反正有大把时间~

### Web 标准构成 ###

**构成：** 主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。

*  结构标准：结构用于对网页元素进行整理和分类，咱们主要学的是 HTML。 对于网页来说最重要的一部分
 *  表现标准：表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是 CSS
 *  行为标准：行为是指网页模型的定义及交互的编写，咱们主要学的是 Javascript

理想状态我们的源码： .HTML .css .js

直观感受：

![abd47cce8f45ecc3ba830af8a93d339a.png][]

# 总结WEB标准： #

结构标准：决定你是否有个好天然身体

结构层：通过对语义的分析，可以对其划分结构。具有了结构的内容，将更容易阅读

表现标准： 决定你是否打扮的美丽外观

表现层：是为了让网页就能展现出灵活多样的显示效果

行为标准： 决定你是否有吸引人的行为

行为层：用户对网页进行操作，网页可以做出响应性的变化。

### 小结 ###

*  web标准有三层结构，分别是结构（html）、表现（css）和行为（javascript）
 *  结构类似人的身体， 表现类似人的着装， 行为类似人的行为动作
 *  理想状态下，他们三层都是独立的， 放到不同的文件里面

[Python_1039649593]: https://jq.qq.com/?_wv=1027&k=SBLaYU2c
[bb3f857d9605bdcb689066de07c5a113.png]: /images/20221005/fb7b67f78d6145798fb87f05bf78f943.png
[ee12f1de16910f11276356ae60206925.png]: /images/20221005/b34e79895e1e4f2d823bbc7c5759f778.png
[df7ec25e3294b0f01426ee6dfd922a2d.png]: /images/20221005/de5f1332197a4914bba1066e0309a224.png
[04e6a0741f0085c73ab76d94bc619cf0.png]: /images/20221005/b09736340dd240dda49a0d8956089064.png
[3a825c9b734f5fe8f6d4d4d8ed7eb367.png]: /images/20221005/8afada62705c4efbba1e79b9133bf7b6.png
[abd47cce8f45ecc3ba830af8a93d339a.png]: /images/20221005/e233b2d2af614d4eaba8675c2ac11073.png