序言：不会前端的测开不是一个好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把一张空白页面划分成若干区域，之后再在区域内填充具体内容。
②由大到小：<div>板块标签</div>===》<p>行段标签</p>===》<span>行内标签</span>。
③定义尺寸：只有板块标签定义的长宽是有效的，行段标签的长度固定为整行宽度为行数，行内标签的长度就是内容的长度。
④嵌套：大标签内可以嵌套同级或比自己小的标签，反之则无效。
⑤除了单纯显示内容的span标签，i，u，s，b，也是行内标签。
4、图片标签img：
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589228131401&di=6fc2b48525bb09239bcfd8f631e24200&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farchive%2F59abaa6b129cfbacad9b2a96d95947e983c442e4.jpg" alt="图片加载不出来的时候显示的内容" title="当鼠标悬浮于图片上显示的内容" height="600px" width="" > <!--可以放url也可以放文件路径--> <!--当高度或宽度只定义其中之一时，另一个参数会按照原图等比例缩放，若同时定义而为匹配原图比例，显示出来的图片会失真-->
5、链接标签a：
<a href="https://www.baidu.com/" target="_blank">点击跳转百度</a><br> <a href="" id="001">锚点1</a> <div style="height: 600px;background-color: red"></div> <a href="" id="002">锚点2</a> <div style="height: 600px;background-color: red"></div> <a href="" id="003">锚点3</a> <div style="height: 600px;background-color: red"></div> <a href="#001">点击跳转锚点1</a> <a href="#002">点击跳转锚点2</a> <a href="#003">点击跳转锚点3</a> <!--所有标签都可以绑定id，id不能重复，另外标签还有class值，类似于面向对象编程里面的继承，同一个标签可以继承多个class值--> <!--可以放url也可以放其他标签的id--> <!--打开url时，不声明打开模式就是默认的_self的刷新，可以改为_blank的新建--> <!--若声明的是其他标签的id，点击文本会跳转到该标签位于顶行的位置--> <!--基于浏览器的记忆功能，一个链接被点击过的话字体会由原来的蓝色变为紫色-->
6、插播一条鸡哥小技巧：标签既有内置的参数，也可以声明自定义的参数，只不过这些自定义参数并不会产生任何效果，但是由于浏览器的容错机制，这种操作也不会带来任何负面影响，所以可以借此临时存放一些数据。
<p others = "这是临时存放的内容">这是能显示的内容</p>
7、列表标签
①无序列表(使用较多)
<ul type="circle"> <li>第一项</li> <li>第二项</li> <li>第三项</li> </ul>
②有序列表
<ol type="1" start="3"> <li>第一项</li> <li>第二项</li> <li>第三项</li> </ol>
③标题列表
<dl> <dt>标题一</dt> <dd>内容一</dd> <dt>标题二</dt> <dd>内容二</dd> <dt>标题三</dt> <dd>内容三</dd> </dl>
