前端基础总结
一：前端实现的原理：
小实例：
01：第一步：创建一个socket服务端：
import socket
server=socket.socket()
ip_port=("127.0.0.1",8009)
server.bind(ip_port)
server.listen(4)
while 1:
conn, addr = server.accept()
from_client_msg=conn.recv(1024)
conn.send(b"http/1.1 200 ok
")
conn.send(b"<h1>hello world,my friends!</h1>")
conn.close()
02：第二步。在电脑浏览器中输入 127.0.0.1：8009 即可显示： hello world,my friends!
总结：通信过程：
浏览器发送请求---〉http协议--〉服务端接受请求--〉服务端返回响应--〉服务端把html文件内容发给浏览器--〉浏览器渲染页面
03：浏览器兼容性：
浏览器内核：
浏览器 -- 内核
IE -- trident
chrome --- blink
火狐 --- gecko
Safari --- webkit
PS：「浏览器内核」也就是浏览器所采用的「渲染引擎」，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。
渲染引擎是兼容性问题出现的根本原因。
二：html说明：
html语言是一种超文本标记语言，是一种创建网页的标记语言。它不是一种编程语言
01:html文档结构：
基本文档格式实例：
<!doctype html>
<html lang="en">
<head>
这个是头部
<!-- #申明编码是utf-8 根据浏览器的要求不同，有些是 <meta charset="gbk"> ，
现在大多数的浏览器是utf-8模式 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>这个是标题</title>
</head>
<body>
</body>
</html>
001：<!doctyep html> 申明其为html文档
002：<html lang="en"> 申明语言是英语，如果需要时中文，则需要将 "en" 改为 “zh-CN”
003：<html> </html> 开头和结尾标记，这个是一个双标签。在他们之间的事<body> </body> 和<head></head>,<title> </title>等等
004：<titile></title> 定义了在浏览器顶端显示的内容
005：<body></body> 之间的文本是显示在可见的 网页主题内容。
三：注释和特别说明
html注释 ctrl+/ 键在pycharm 里面可以直接注释 html语句
<!doctype> 申明必须是html文档中的第一行，，位于<html>标签之前
四：body内的常用标签（单标签，双标签）
01：基本标签
<b>加粗</>
<i>斜体</>
<u>下划线</>
<s>删除</s> #在文字中间显示一行删除线
<p>段落标签</p> #独占一个段落，一行
#h标签随着数字增大，在浏览器中显示的文字越来越小，一共有1到6个等级
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<br> 换行 #单标签
<hr> #就是单独的在一行显示一个水平线
<img src="图片地址" alt="图片未加载时的显示" title="鼠标放在上面的显示内容" height="高度" width="宽度">
height和width只写一个会自动等比例缩放
02：div标签和span标签
001:<div>写的内容</div> ,div标签主要用来定义块级元素，没有实际意义，主要通过css样式为其赋予不同的表现
002:<span> 标签用来定义内联元素，无实际意义，主要通过css样式为为其赋予不同的表现
03：a标签（a标签是双标签）
01:a标签：超链接标签
<a href="www.baidu.com">链接 </a> #点击”链接“ 则自动跳转到 百度的网址
02:a标签：跳转到指定页面或则位置（锚点，像博客中点击一个目录，直接就跳转到相关目录下）
例子：
<a href="#p1">哈哈</a> #点击”哈哈“ 则自动跳转到 ”锚点跳转“
<p id="p1">锚点跳转</p>
五：列表
01：无序列表
<!--<ul type="disc">-->
#<!--<ul type="circle">-->
#<!--<ul type="square">-->
#<ul type="none">
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
type：disc（实心圆），circle（空心圆），square（实心方块）
02：有序列表
<ol type="A" >
<li>无序列表ol</li>
<li>无序列表ol</li>
<li>无序列表ol</li>
<li>无序列表ol</li>
</ol>
i,I 罗马数字增加
type:A（A，B，C....）,a(a,b,c,...),I,i ，1，默认是从1开始，往后面开始排序（1，2，3）
六：标题
<dl>标题
<dt>标题dt一</dt>
<dd>内容dd</dd>
<dt>标题dt二</dt>
<dd>内容dd二</dd>
</dl>
七：表格
表格是一个二维数据空间，一个表格由若干行组成，一个行又有若干个单元格组成，单元格可以包含文字，列表，图案
单表等等
<!--cellspacing 内边距 边框和内容之间的距离
cellpadding 外边距 内外边框之间的距离
-->
<table border="2" cellpading="20" cellspacing="20">
<thead align="right"> <!-- 左/右对齐 -->
<tr>
<th>序号</th> <!-- #一行 <th></th> 单元格(一个标签表示一个单元格) -->
<th>姓名</th>
<th>爱好</th>
</tr>
</dt>
</thead>
<!-- 内容部分 -->
<tbody>
<!--内容第一个空格-->
<tr> <!-- 第二行第一个单元格 -->
<td> 111</td>
<td> 111</td>
<!-- <td rowspan="2"> 一个单元格竖跨多少行，<td colspan="2"> 一个单元格横跨多少列 -->
<td> 111</td>
</tr>
<!-- 第二行第一个单元格 -->
<td> 222</td>
<td> 222</td>
<td> 222</td>
</tr>
</tbody>
</table>
属性:
border: 表格边框.
cellpadding: 内边距 （内边框和内容的距离）
cellspacing: 外边距.（内外边框的距离）
像素 百分比.（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）