序言：不会前端的测开不是一个好DBA---某位未曾署名的全栈工作者的生平日记的第一页如是记录着。
序言二：前端三剑客
1、HTML：是网页的骨架，没有任何样式，只有枯燥的代码，及其乏味。
2、CSS：可以给骨架添加各种样式，使其变得狂拽酷炫吊炸天。
3、JS：添加网页的动态效果，使其具有多人运动的味。
序言三：前端框架预告：Bootstrap，JQuery，Vue等。
序言四：软件开发的架构有CS架构与BS架构，BS架构本质也是CS架构，所以浏览器也可以看成客户端。
序言五：用浏览器输入网址按回车后发生的事
1、浏览器向服务器发送数据请求，如，请求百度首页的数据。
2、服务端接收请求。
3、服务端返回响应，即，返回百度首页数据。
4、浏览器接收响应数据，根据既定规则渲染成页面展示给用户。
5、小结：同一个浏览器可以充当多种服务端的客户端，如百度，腾讯视频，淘宝商城等，是因为浏览器和这些服务端之间有某种统一的标准，服务端正是基于这种标准开发的。
序言六：HTTP协议
1、简介：超文本传输协议，就是用来统一各种服务端与浏览器之间数据交互的格式的。若服务端开发没有遵循这个协议，则该服务端无法通过浏览器被正常访问，需要自行再开发客户端。
2、四大特性：
①是基于“请求/响应”模式的协议。
②是基于TCP/CP协议之上作用于应用层的协议。
③是无状态的：HTTP协议本身是不保存数据的，每次请求都是初次，若要记录状态，需要借助cookie，session，token等插件。
④无/短链接：请求/相应为一组交互，交互完成之后并不会保留链接之类的关系。(PS：长链接---双方建立交互关系后默认不会自动断开，如websocket等。)
3、请求数据的格式：
①请求首行：标识HTTP协议版本，当前请求方式。
②请求头：若干k:v键值对。
③ (/r/n)。
④请求体：并非所有请求方式都有请求体，post有，存放的是post请求提交的敏感数据，如账号密码等。
4、响应数据的格式：
①响应首行：标识HTTP协议版本，响应状态码。
②响应头：若干k:v键值对。
③ (/r/n)。
④响应体：返回给浏览器用于渲染出界面展示给用户。
5、响应状态码：用一串单纯的数字来表示一些复杂的状态或者描述信息。
①1xx：代表服务端已经成功接收了用户的请求正在处理，用户可以继续提交其他请求。
②2xx：代表服务端已经成功响应了用户，如，200 OK---请求成功。
③3xx：代表重定向，即跳转，如，访问一个需要登录才能浏览的页面时，会瞬间跳转到登录界面。
④4xx：代表请求错误， 如，404---请求的资源不存在，403---当前请求不合法或不满足访问资源的条件。
⑤5xx：服务端内部错误，如，500，可能是服务端主机崩溃了等情况导致的。
6、请求方式：
1、url：统一资源定位符，也就是俗称的网址。
2、get请求：向服务端索取数据，如，输入网页的url获取网页展示内容。
3、post请求：向服务端提交数据，如，用户登录，输入登录的账号与密码提交给服务端后台做身份验证。
HTML正戏开始！！！
一、简介：超文本标记语言，所有浏览器展示出来的页面都是基于HTML语法渲染出来的结果，HTML语法就是网页书写的标准。
二、注释：学会注释，等于成功了一半。
<!--单行注释--> <!-- 多行注释1 多行注释2 多行注释3 -->
三、HTML文件的基本结构
<html> <head></head>:head内的标签不是给用户看的，而是定义一些配置主要是给浏览器看的 <body></body>:body内的标签，写什么浏览器就渲染什么，用户就能看到什么 </html>
四、打开HTML文件两种方式
1、右击文件选择浏览器打开。
2、在pycharm内编写的HTML文件，可以直接运行或点击浏览器图标，然后会自动启用浏览器(需要先安装对应的浏览器，推荐使用谷歌的chrome)。
五、标签大分类
1、双标签：如<h1></h1>。
2、单标签(自闭和标签)：如<img/>。
六、head内的常用标签
<title>Title</title> 网页标题 <style> h1 { color: greenyellow; } </style> 内部用来书写css代码 <script> alert(123) </script> 内部用来书写js代码 <script src="myjs.js"></script> 还可以引入外部js文件 <link rel="stylesheet" href="mycss.css"> 引入外部css文件 <meta name="keywords" content="老男孩教育,老男孩,老男孩培训,..."> 当你在用浏览器搜索的时候 只要输入了keywords后面指定的关键字那么该网页都有可能被百度搜索出来展示给用户 <meta name="description" content="淘宝网 - 亚洲较大的网上交易平台，..."> 网页的描述性信息
七、body内常用标签
1、基本标签：
<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6> <b>字体加粗</b> <i>字体变斜体</i> <u>字体加下划线</u> <s>字体加删除线</s> <!--换行--> <br> <!--加水平分割线--> <hr>
2、特殊符号标签：
空 格( ) 大>于( > ) 小<于( < ) 本&体( & ) 金¥币( ¥ ) 版©权( © ) 商®标( ® )
3、级别标签：有大到小---<div>板块标签</div>===》<p>行标签</p>===》<span>行内标签</span>。构造页面之初，一般先用级别标签占位，之后再慢慢丰富样式，尤其是div使用最为频繁，相当先用div把一张空白页面划分成若干区域，之后再在区域内填充具体内容。
原文：https://www.cnblogs.com/caoyu080202201/p/12873339.html