1，什么是Web前端技术？
Web前端技术是基于浏览器实现客户端的一套综合技术，包括了HTML,CSS,Javascript等。
UI客户端技术是基于UI模块实现客户端的一种UI模块＋打包模块，包括了Pygame，pyqt5,Tkinter,wxPython,PyGUI等结合pyinstaller.
2，发展历史
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浏览器，搜狗浏览器等等都是基于谷歌内核设计出来了。
3，W3C标准
W3C标准是由国际组织World Wide Web Consortium（万维网联盟）制定的，旨在定义Web技术的规范和指南。这些标准涵盖了HTML、CSS、JavaScript、XML等各个方面的技术规范，以及网络协议、安全性、可访问性和多媒体等领域。W3C标准的目标是确保互联网上的各种技术能够相互兼容、安全可靠，并且能够持续发展。它们为Web开发者、设计师和用户提供了一个共同的规范，使他们能够更好地开发网页，并确保用户能够在不同的设备和浏览器上获得一致的体验。
W3C标准的制定不仅影响着网页和应用程序的开发，也直接关系到互联网的发展方向和未来。其规范不断更新与演进，以适应不断变化的技术和需求。它们提供了编写代码的指南，让开发者们能够创建出更为可靠、稳定且具有跨平台兼容性的网页和应用。
遵循W3C标准的方法包括深入了解HTML、CSS、JavaScript等技术的规范和最佳实践，确保代码符合W3C标准。同时，选择符合W3C标准的工具和框架，例如使用响应式设计和无障碍性支持的CSS框架，也是遵循W3C标准的重要方式。
W3C标准的三大标准：
结构标准，外观标准，行为标准
Web开发技术栈共有三种语言：
- HTML
译作超文本标记语言，负责通过标签来表达网页的内容页面结构，要遵循结构标准，就需要使用HTML来开发网页的内容和结构。 - CSS
译作层叠样式表标记语言，负责通过属性标记来表达网页的外观效果，要遵循外观标准，就需要使用CSS来设计或修改网页的外观效果， - Javascript
简称JS，负责通过编程代码来表达网页的行为特效，需要使用Javascript来编写网页的动态特效以及数据交互能力，需要遵循Javascript ECMA语法。
4，HTML
Hyper Text Markup Language超文本标记语言，是一门标记语言，不是编程语言。所以它没有变量，也没有任何语句结构。
所谓的超文本，就是超越了文本范畴的文档格式，普通文本只能显示文字，而超文本可以显示各种的媒体资源，如：HTML网页，Doc文档，Xls文档等等。
HTML的代码必须编写到.html文档当中，以.html或者.htm结尾的文件中。
因为HTML网页属于浏览器端代码，所以不存在操作系统兼容问题，因此一套HTMl代码可以在任何操作系统下的浏览器下正常运行。
HTML网页基本结构
`
<!DOCTYPE html>
<html lang="en">
<!-- html根标签，表示网页的内容开始 -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网页标题</title>
<link rel="stylesheet" href="./a01.css">
</head>
<body>
<!-- HTML的注释-->
<!--网页的正文内容在body之间-->
<!-- h1表示内容的大标题，
一般一个网页中只会出现1次，往往用于展示网站的标题或者网站的logo -->
<h1 align="center">高冷男孩孙鹏举</h1>
<hr>
<div align="center">
账号：<input type="text"> 密码：
<input type="password"> 日期：
<input type="datetime-local" name="" id="">
</div>
<hr>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.<br>
<br> Error facere maxime deleniti laboriosam eius omnis voluptatum?<br><br>Distinctio corporis nisi officia mollitia at, sint alias quo odio aliquid quos vero reprehenderit!</p>
<hr>
<div><img src="./image.png" alt=""></div>
</body>
</html>
<!-- html根标签，表示网页的内容结束 -->
`
| 标签名 | 类型 | 描述 |
|---|---|---|
<!DOCTYPE html> |
单标签 | 告诉浏览器接下来所有的内容是HTML代码， 需要使用HTML解析器来识别。 |
<html></html> |
双标签 | 告诉浏览器，这对html标签里面的内容就是网页内容。 |
<head></head> |
双标签 | 告诉浏览器，这是html网页的头部信息，例如：网页标题，编码类型，网页关键字等.... |
<body></body> |
双标签 | 告诉浏览器，这是html网页的正文内容。 |
<title></title> |
双标签 | 属于head的子标签，告诉浏览器，这是html网页的网页标题。 |
<meta charset="UTF-8"/> |
单标签 | 告诉浏览器接下来所有的内容是HTML代码， 需要使用HTML解析器来识别。 |
5，语法
HTML中的语法有2种：标签、注释。
注释，不会被用户所看到，但是可以在浏览器中，通过鼠标右键->
查看网页源代码，让开发人员查看。
6，标签
标签[Tag]，表示HTML网页内容的一个最基本的组织单元，类似语
文里面的标点符号，标签的作用就是告诉浏览器当前标签中的内容
是有什么作用，要以什么格式进行展示的。
标签从书写结构上分2种：
单标签，格式：<标签名> 或者 <标签名 />。
双标签。格式：<标签名>标签内容</标签名>。
标签从组织结构上分2种：内容标签和结构标签。
内容标签：主要包含和展示内容的，部分标签可以包含其他的内
容标签。
结构标签：主要用于包含其他标签，一般结构标签内部不会直接
包含网页内容[文本、图片、视频、音频等]。
7，单标签
只有1个标签名的标签闭合的就是单标签。书写格式：
<标签名>
<标签名 />
<标签名 属性名="属性值"/>
常见的单标签
| 标签名 | 描述 |
|---|---|
<meta> |
元信息标签 |
<img> |
图片标签 |
<link> |
css外观样式的外链引入标签，类似python中的import，可以导入css代码到html文中 |
<br/> |
换行标签，浏览器默认是不识别HTML源码文件中的换行与空格的，所以需要使用br标签告诉浏览器在什么位置需要换行。 |
<input> |
输入框标签 |
<hr> |
分割线标签，代表分割内容的一条横线，代表前面的内容已经结束了，横线下方的内容与上方内容没有关联。 |
8，双标签
成对标签名出现，有开始标签与结束标签的，就是双标签。书写格
式：
<标签名></标签名>
<标签名 属性名="属性值" 属性名></标签名>
常见的双标签
| 标签名 | 描述 |
|---|---|
<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