软件架构体系：
C/S:
client/Server 客户端/服务端QQ, 酷狗, 爱奇艺, 王者荣耀等3D游戏
B/S:
browser/Server 浏览器/服务端百度/淘宝/京东/网页版的爱奇艺/基于web前端技术实现的一些手机APP[例如：百度地图、喜马拉雅、消消乐、斗地主]
web前端技术
其是基于浏览器实现客户端的一套综合技术，包括了HTML、CSS、javascript等。
UI客户端技术是基于UI模块实现客户端的一种UI模块+打包模块，包括了pygame、pyqt5、Tkinter、wxPython、PyGUI等 结合pyinstaller。
发展历史
Linux--> 90年 --> GUNLinux美苏冷战（2极争霸-> 1超多强）--> 美国 --> 阿帕网（Unix的母公
司、IBM）->冷战结束 -> 博纳斯·李主导设计出了互联网 -> 把网络技术推广进行民用 -> 博纳斯·李（互联网之父） -> 通过计算机网络来推广计算机技术（SGML[仅仅显示文字的格式，不支持图片，视频、音频]->HTML[支持文字、图片、视频、音频]） --> 普通人怎么看得懂HTML代码？ -> 设计出了世界上第一款开源的浏览器以及浏览器内核引擎 -> 网景(现在已经没有了) -> 世界上第一款的商用浏览器（占据世界95%份额）-> 导航者浏览器 -> 微软 --> IE浏览器(2.0, 3.0) --> 进入第一次互联网大战 -> 以微软（IE） 与 网景（导航者）分2大阵营 --> 最开始以插件多少优劣抢夺市场。布兰登·艾克基于java部分语法设计出livescript插件(后改名为javascript，实际上与java没有半毛钱关系)，让导航者浏览器一下打垮了IE浏览器。 但是微软并不想放弃，后面也实现了一个jscript的插件，但是
模仿是很难超越，所以微软开始让windows系统免费捆绑IE浏览器（著名的IE6.0），并卸载导航者浏览器卸载。后面网景就失去了浏览器的市场，随着网景公司的浏览器市场流失，网景直接把微软告上了法庭，由此衍生了世界上第一款反垄断商业法律，经过了十几年后，网景倒闭了，微软基于IE6.0彻底拿来世界上最多的浏览器份额赢得了第一次互联网大战，但是官司失败了，赔了100亿美元。网景的原高管--> Mobila -> 基于导航者浏览器开发出了一款新的浏览器（火狐浏览器）-> 进入了第二次互联网大战（IE阵营对抗现代浏览器阵营[谷歌浏览器、火狐浏览器、欧朋浏览器、苹果浏览器]），最终IE浏览器寿终正寝，微软放弃了IE浏览器，投向了现代浏览器阵营 -> 收购了美国的一个斯巴达浏览（Edge），基于斯巴达浏览器结合IE浏览器重新在windows10版本进行发布，最后现代浏览器阵营赢得了第二次互联网大战。所以，目前世界上使用人数最多的浏览器就变成了谷歌浏览器（2/3）。目前是世界上所有的浏览器多达上百款，其中浏览器的内核引擎（关系到了HTML语法，CSS语法，Javascript语法）只有3款：IE浏览器内核（Trident）、火狐浏览器内核（Gecko）、谷歌浏览器内核（Webkit，后面升级为了Blink）。像苹果浏览器、欧朋浏览器，遨游浏览器，UC浏览器，360极速浏览器，QQ浏览器，搜狗浏览器等等都是基于谷歌内核设计出来了
W3C
w3c:是一个公益基金组织由互联网之父（博纳斯·李）牵头组织起来的。w3c（万维网联盟）专门去维护互联网相关技术的发展与规范的。
w3c标准为了实现互联网网页制作的统一规范，所以设计了三大标准：结构标准、外观标准与行为标准。
web开发技术栈一共有3门语言。
分别是：HTML：译作超文本标记语言，负责通过标签来表达网页的内容页面结构。开发者要遵循结构标准，就需要使用HTML来开发网页的内容与结构，需要遵循HTML语法。CSS：译作层叠样式表标记语言，负责通过属性标记来表达网页的外观效果。开发者要遵循外观标准，就需要使用CSS来设计或修改网页的外
观效果，需要遵循CSS语法。javascript: 简称js，负责通过编程代码来表达网页的行为特效。开发者要遵循行为标准，就需要使用javascript来编写网页的动态特效以及数据交互能力，需要遵javascript ECMA语法。
HTML
Hyper Text Markup Language ，译作超文本标记语言，是一门标记语言，不是编程语言。所以它没有变量，也没有任何语句结构。
所谓的超文本，就是超越了文本范畴的文档格式，普通文本只能显示文字，而超文本可以显示各种的媒体资源，例如：html网页，doc文档，xls文档等等。同时，HTML发展至今，一共经历6个版本：HTML1.0，HTML2.0，HTML3.0，HTML4.0，XHTML1.0（过渡版本），HTML5.0（现行）。
HTML在4.0版本（1999）时，W3C组织与浏览器厂商发生过一次分歧，W3C组织认为HTML作为标记语言，本身的语法不够严谨（就是乱写HTML代码也不会报错），所以发布了新的一门语法更加严谨的标记语言-XML，但是这门语言比HTML更加的复杂和难以使用，所以浏览器厂商要使用XML替代HTML，实际上需要耗费大量成本的，而且在当时全球有上百万的网站使用的都是HTML，所以如果直接从HTML转变到XML，很多公司是无法接受。因此，在2000年时W3C推出了HTML转换成XML的过渡版本，就是XHTML1.0版本。这个版本既有HTML的语法，也兼顾了XML的部分语法，但是在XHTML2.0版本推出的时候，浏览器厂商与W3C闹翻了，浏览器厂商不跟W3C玩了，而是自己组织了一个新的HTML标准团队-WHATWG，发展HTML5.0版本。在随后几年（2004）年，正式推出了HTML5.0试验版本，随后在2014年W3C迷途知返，重新与浏览器厂商的团队合并，在2014年重新发布了HTML5.0版本，同时也宣告了XML替代HTML计划失败，最终XML就慢慢变成了软件的配置文档，数据转换格式的结构，类似json的作用。
python3在出来的时候，实际上也会很多不愿意使用新版本，很多人停留在python2，因为python的开发离不开各种第三方模块，而如果升级到了python3，意味着很多的项目都需要把原来的语法改成python3，因为python2存在的时间跨度太大的历史原因，很多python2的模块已经没有人维护，项目要升级，必须模块也要升级，导致很多人不愿意去升级项目到python3，后续就推出了一个过渡版本python2.7，这个版本既兼容了python2的语法，也兼容了python3的语法。
html的代码必须编写到.html文档中，以.html或者以.htm结尾的文件中。
.htm的出现是基于计算机发展的历史遗留问题，早期计算机的存储能力不强，所以针对文件名的命名存在了8.3规范：要求文件名必须在8个字符以内，文件后缀必须是3个字符以内。因为.html是4个字符，所以不符合8.3规范，因此改成了.htm，类似的情况，还有图片格式里面jpeg，在早期是jpg格式的。
因为HTML网页属于浏览器代码，所有不存在操作系统兼容问题，因此一套HTML代码可以任何操作系统下的浏览器下正常运行。
HTML网页基本结构
<!DOCTYPE html>
<html lang="en"> <head>
<title>我的网页标题</title>
</head> <body>
<h1>大冷门！中国男排以3比0战胜世界排名第一的巴西男排
</h1>
<p>相信没有多少人能预料到这样一个结果，就在北京时间6 月12日晚，
在2022年世界男排联赛巴西利亚站最后一轮比赛中，没有任何心理压力
的中国男排表现出不畏强敌的顽强作风和出众的技战术水平，近30年来
国际赛场上第一次以3比0掀翻世界排名第一的东道主巴西男排，爆出本
年度世界男排联赛一大冷门，得到全场最高的25分的主攻手张景胤更是
成为中国最强攻击点。</p>
</body>
</html>
| 标签名 | 类型 | 描述 |
|---|---|---|
<!DOCTYPEhtml> |
单标签 | 告诉浏览器接下来所有的内容是HTML代码，需要使用HTML解析器来识别 |
<html></html> |
双标签 | 告诉浏览器，这对html标签里面的内容就是网页内容。 |
<head></head> |
双标签 | 告诉浏览器，这是html网页的头部信息，例如：网页标题，编码类型，网页关键字等.... |
<body></body> |
双标签 | 告诉浏览器，这是html网页的正文内容。 |
<title></title> |
双标签 | 属于head的子标签，告诉浏览器，这是html网页的网页标题。 |
<metacharset="UTF-8"/> |
单标签 | 告诉浏览器，这是一个utf-8编码的网页。 |
语法
HTML中的语法有2种：标签、注释。
注释，不会被用户所看到，但是可以在浏览器中，通过鼠标右键->查看网页源代码，让开发人员查看。
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Title</title>
</head> <body>
<!-- HTML的注释 -->
<!-- h1表示大标题，一般 一个网页中只会出现1次，往往用于展示网站的标题，或者网络的logo -->
<h1>h1标题</h1>
<!-- p标签代表的就是一个文本段落，每一个段落就使用1个 p标签，一篇文章可以有多个段落-->
<p>内容段落</p>
</body>
</html>
标签
标签[Tag]，表示HTML网页内容的一个最基本的组织单元，类似语文里面的标点符号，标签的作用就是告诉浏览器当前标签中的内容是有什么作用，要以什么格式进行展示的。
标签从书写结构上分2种：
单标签，格式：<标签名> 或者 <标签名 />。
双标签。格式：<标签名>标签内容</标签名>。
标签从组织结构上分2种：内容标签和结构标签。
内容标签：主要包含和展示内容的，部分标签可以包含其他的内
容标签。
结构标签：主要用于包含其他标签，一般结构标签内部不会直接
包含网页内容[文本、图片、视频、音频等]。
单标签
只有1个标签名的标签闭合的就是单标签。书写格式：
<标签名>
<标签名 />
<标签名 属性名="属性值"/>
常见的单标签
| 标签名 | 描述 |
|---|---|
<meta> |
元信息标签 |
<link> |
css外观样式的外链引入标签，类似python中的import，可以导入css代码到html文档中 |
<img> |
图片标签 |
<input> |
输入框标签 |
<br> |
换行标签，浏览器默认是不识别HTML源码文件中的换行与空格的，所以需要使用br标签告诉浏览器在什么位置需要换行。 |
<hr> |
分割线标签，代表分割内容的一条横线，代表前面的内容已经结束了，横线下方的内容与上方内容没有关联。 |
双标签
成对标签名出现，有开始标签与结束标签的，就是双标签。书写格式。
<标签名></标签名> <标签名 属性名="属性值" 属性名></标签名>
常见的双标签
| 标签名 | 描述 |
|---|---|
<h1></h1> |
网页的一级标签 |
<h2></h2> |
网页的二级标签 |
| ··· | |
<h6></h6> |
网页的六级标签 |
<p></p> |
网页的段落 |
<a></a> |
网页拆链接 |
<div></div> |
块级结构标签 |
<span></span> |
行级结构标签 |
<form></form> |
表单标签，表示网页的一个提供给用户输入数据的表单 |
<ul></ul> |
无序列表结构标签，表示网页的一个内容列表 |
<li></li> |
列表项目标签 |
<table></table> |
表格标签，表示网页的一个表格 |
常见标签使用
标签和段落
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Title</title>
</head> <body>
<!-- HTML中的标签是HTML语法提供的，所以每一个标签都
是固定标签名 -->
<h1>h1标题:常用于网站的logo，网站标题</h1>
<h2>h2标题:常用于网站的板块标题、栏目标题</h2>
<h3>h3标题:常用于网站的板块标题、栏目标题</h3>
<h4>h4标题:常用于网站的附加板块标题，或者文章的标题
</h4>
<h5>h5标题:更小级别的标题，基本用不到</h5>
<h6>h6标题:更小级别的标题，基本用不到</h6>
<p>p->段落：Hyper Text Markup Language</p>
</body>
</html>
标签的属性
标签的作用就是用于展示内容，但是内容有时候并非文本，而且文本的展示需要附加一些额外效果时，就需要使用标签的属性来声明。不管是什么标签，都有属性[Attribute]。标签的属性有两种：
普通属性：
属性与属性值使用 = 号关联 ，属性值使用单引号或双引号圈住，建议使用双引号。
布尔属性：
只有属性名，没有属性值。当标签里面写上这个属性名，则其值就是True，标签没有属性名，则为False
<!DOCTYPE html>
<html lang="en"> <!-- lang 就是HTML标签的属性，代表当前网页的默认语言language：en表示 english -->
<head>
<meta charset="UTF-8"> <!-- charset，是meta元信息标签的属性，表示当前网页的编码是utf-8 -->
<title>Title_python学习网页</title> 6 </head> 7 <body> 8 <!-- 双标签的属性 -->
<!--
align：文本的水平对齐方式：left左[默认值],center中,right右
title：表示当前标签的补充提示，当用户把鼠标放在当前标签上方则自动title属性的值
-->
<h1 align="left" title="提示文本">h1标题:常用于网站的logo，网站标题</h1>
<h2 align="center" title="用于提示而已">h2标题:常用于网站的板块标题</h2>
<h3 align="right">h3标题:常用于网站的板块标题
</h3>
<h4>h4标题</h4>
<h5>h5标题</h5>
<h6>h6标题</h6>
<p align="center" title="用于提示而已">p->段落：
Hyper Text Markup Language</p>
<!-- 单标签的属性：单标签是没有内容的，所以需要依赖于属性来展示对应的内容 -->
<img src="./goods.png"> <!-- src就是用于展示图片的内容 -->
<input type="number"> <!-- 输入框标签[数值输入框]，number表示只允许当前输入框中只能输入数值 -->
<input type="password"> <!-- 输入框标签[密码输入框]，password表示当前输入任何内容都是密码，所以不会展示出来 -->
<input type="text"> <!-- 输入框标签[单行文本输入框]，text表示只允许用于输入一行内容内容，不能回车换行-->
<input type="datetime-local"> <!-- 时间输入框，只需要用户输入时间日期 -->
</body>
</html>