什么是前端？
凡是与用户进行交互的操作界面都称为前端
比如：手机界面，电视屏幕，电脑显示屏等
web服务的本质
在浏览器上输入一个网址后回车进行的操作
1.朝着指定服务器发送请求
2.服务端接收相应的请求
3.服务端返回相应的响应
4.浏览器接收响应 按照特点的规则渲染页面展示给用户看
import socket
server = socket.socket
server.bind(('127.0.0.1',9527))
server.listen(5)
while True:
conn,addr = server.accept()
data = conn.recv(1024)
conn.send(b'HTTP/1.1 200OK
')
conn.send(b'HELLO WORLD')
conn.close()
HTTP协议
超文本传输协议
规定了浏览器与服务端之间数据传输的格式
四大特性
-
1.基于请求响应
-
一次请求对应一次响应
-
-
2.基于TCP/IP作用于应用层之上的协议(还有ftp协议)
-
3.无状态
-
不保留客户端的状态（不管请求几次，待如初见）
-
所以就需要 cookie(储存在用户本地终端上的数据) session token
-
-
4.无连接
-
长链接 websocket(类似于http协议的大补丁)
数据格式
请求格式
1.请求首行(请求方式 协议版本)
2.请求头(一大堆的k,v键值对)
3.请求体(携带的数据)
响应格式
1.响应行首(响应状态码)
2.响应头(一大堆的K,V键值对)
3.响应体(浏览器展示给用户看的数据)
响应状态码
用数据来表示一大堆提示信息
1XX:服务端成功接收到客户端的数据正在处理 你可以继续提交
2XX:200请求成功 服务端已经返回了你想要的数据
3XX:重定向(原本想访问A但是内部自动给你转到了B上面)
4XX:404请求资源不存在，403你当前不具备请求该资源的条件
5XX:500服务端内部错误 机房着火 雨你无瓜
公司内部可以定制自己响应状态码
请求方式
1.get请求
朝服务端要资源(获取数据)
类似于浏览器窗口输入www.baidu.com获取百度首页
2.post请求
朝服务端提交数据(提交数据)
类似于登录注册功能
HTML是什么？
-
超文本标记语言（Hypertext Markup Language, HTML）是一种用于创建网页的标记语言。
-
本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，同个标签可能有不同的解释(浏览器的兼容性问题)
-
网页文件的扩展名：.html或.htm
HTML注释
单行注释:<!--注释内容--> 多行注释:<!-- 注释内容1 注释内容2 -->
注释是代码之母。
<!DOCTYPE标签>
<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。
HTML文档结构
最基本的HTML文档:
<!DOCTYPE html> <html lang="zh-CN"> <head> #head内放的内容不是给用户看的 是给浏览器去识别做相应操作的 <meta charset="UTF-8"> <title>css样式优先级</title> </head> <body> #body内放的内容就是浏览器展示给用户看到的花里胡哨的页面 </body> </html>
1.<!DOCTYPE html>声明为HTML5文档
2.<html>、</html>是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body）。
3.<head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据。
4.<title></title>定义了网页标题，在浏览器标题栏显示
5.<body>、</body>之间的文本是可见的网页主体内容。
*注意：对于中文网页需要使用 声明编码，否则会出现乱码。有些浏览器会设置 GBK 为默认编码，则你需要设置为 。*
HTML打开方式
1.pycharm自动调用浏览器打开
2.手动查找路径之后选择浏览器打开
HTML标签格式
-
HTML标签是由尖括号包围的关键字，如<html>, <div>等
-
HTML标签通常是成对出现的，比如：<div>和</div>，第一个标签是开始，第二个标签是结束。结束标签会有斜线。
-
也有一部分标签是单独呈现的，比如： 、<hr/>、等。
-
标签里面可以有若干属性，也可以不带属性。
标签的语法：
-
<标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
-
<标签名 属性1=“属性值1” 属性2=“属性值2”…… />
几个很重要的属性：
-
id：定义标签的唯一ID，HTML文档树中唯一
-
class：为html元素定义一个或多个类名（classname）(CSS样式类名)
-
style：规定元素的行内样式（CSS样式）
head内常用标签
| 标签 | 意义 |
|---|---|
| <title></title> | 定义网页标题 |
| <style></style> | 定义内部样式表，内部支持直接写CSS代码 |
| <script></script> | 定义JS代码或引入外部JS文件 |
| <link/> | 引入外部样式表文件或网站图标 |
| <meta/> | 定义网页原信息 name属性keywords，description |
什么是URL
URL:统一资源定位符
body内常用标签
基本标签
<b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除</s> <p>段落标签</p> #独占一行 <h1>标题1</h1> <h2>标题2</h2> <h3>标题3</h3> <h4>标题4</h4> <h5>标题5</h5> <h6>标题6</h6> <!--换行--> <br> <!--水平线--><hr>
div标签用来定义一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。 span标签用来定义内联(行内)元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。
本身没有特殊意义
块级元素与行内元素的区别： 所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。 这两个元素是专门为定义CSS样式而生的。
注意：
关于标签嵌套：通常块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。
p标签不能包含块级标签，p标签也不能包含p标签。
img图片标签
src：
1.可以写一个网站图片地址
2.还可以写本地的图片地址
3.url(自动朝该url发送get请求要数据)
alt：
当图片加载不出来的时候 默认展示的提示信息
title
当鼠标悬浮在图片上的时候 展示的提示信息
width,height
修改一个 另一个会自动等比例缩放
如果两个都修改图片会失真
<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">
a链接标签
herf：
放一个url
三种地址类型：
-
绝对URL - 指向另一个站点（比如 href="http://www.jd.com）
-
相对URL - 指当前站点中确切的路径（href="index.htm"）
-
锚URL - 指向页面中的锚（href="#top"）
target:
控制是否有在当前页跳转
默认是在当前页跳转
_self
新建页面跳转
_blank
锚点功能
href不单单可以写url 也可以写另外一个a标签id值
点击就会跳转到id值所对应的a标签所在的位置
列表标签
1.无序列表
<ul type="disc"> <li>第一项</li> <li>第二项</li> </ul>
type属性：
-
disc（实心圆点，默认值）
-
circle（空心圆圈）
-
square（实心方块）
-
none（无样式）
2.有序列表
<ol type="1" start="2"> <li>第一项</li> <li>第二项</li> </ol>
type属性：
-
1 数字列表，默认值
-
A 大写字母
-
a 小写字母
-
Ⅰ大写罗马
-
ⅰ小写罗马
3.标题列表
<dl> <dt>标题1</dt> <dd>内容1</dd> <dt>标题2</dt> <dd>内容1</dd> <dd>内容2</dd> </dl>
表格标签
展示网站数据时，一般情况下可以使用表格标签
<table> <thead> <tr> <th></th> </tr> </thead> <tbody> <tr> <td></td> </tr> </tbody> </table>
属性:
-
border: 表格边框.
-
cellpadding: 内边距
-
cellspacing: 外边距.
-
像素 百分比.（最好通过css来设置长宽）
-
rowspan: 单元格竖跨多少行
-
colspan: 单元格横跨多少列（即合并单元格）
注意：先表格标签 先写结构 然后写数据
一个tr就是一行
th和td的区别 一个加粗一个不加粗
通常情况下表头用th，表单内容用td
表单标签
form标签
表单用于向服务器传输数据，从而实现用户与Web服务器的交互
表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含textarea、select、fieldset和 label标签。
action参数
用来控制数据提交的路径(到底朝哪个后端服务器提交数据) 三种写法: 1.不写 默认就是朝当前该页面所在的地址提交数据 2.全路径(https://www.baidu.com) 3.只写路径后缀(/index/)
表单属性
input
<input>
属性说明:
-
name：表单提交时的“键”，注意和id的区别
-
value：表单提交时对应项的值
-
type="button", "reset", "submit"时，为按钮上显示的文本年内容
-
type="text","password","hidden"时，为输入框的初始值
-
type="checkbox", "radio", "file"，为输入相关联的值
-
-
checked：radio和checkbox默认被选中的项
-
readonly：text和password设置只读
-
disabled：所有input均适用
一个个选项就是一个个option标签 默认是单选的 可以加一个multiple该成多选 <select name="" id="" multiple> <option value="">新垣结衣</option> <option value="">明老师</option> <option value="">嫖老师</option> <option value="">波老师</option> </select> 如何让option标签默认选中 加selected="selected" <select name="" id="" multiple> <option value="" selected="selected">新垣结衣</option> <option value="">明老师</option> <option value="" selected>嫖老师</option> <option value="">波老师</option> </select>
属性说明：
-
multiple：布尔属性，设置后为多选，否则默认单选
-
disabled：禁用
-
selected：默认选中该项
-
value：定义提交时的选项值
label标签
label通常是配合input一起使用的
for用来填写对应的input标签id值
定义：<label> 标签为 input 元素定义标注（标记）。 说明：
-
label 元素不会向用户呈现任何特殊效果。
-
<label> 标签的 for 属性值应当与相关元素的 id 属性值相同。
<form action=""> <label for="username">用户名</label> <input type="text" id="username" name="username"> </form>
<textarea name="memo" id="memo" cols="30" rows="10"> 默认内容 </textarea>
属性说明：
-
name：名称
-
rows：行数
-
-
disabled：禁用
标签应该具备的属性
1.id属性:类似于身份证号 用来唯一标识当前html页面中的某一个标签 在同一个html页面中 id值不能重复
2.class属性:类似于面向对象的继承 直接引用别的类的样式
<input type="submit">
可以通过value属性来指定按钮文本内容
<input type="submit" value="注册"><button>点我</button>
标签的分类2
1.块儿级标签内部可以嵌套任意的块儿级标签和行内标签 2.特列:p虽然是块儿级标签 但是它的内部只能嵌套行内标签 不能嵌套块儿级标签 如果嵌套了 没有问题 知识不符合html语法规范
2.行内标签 u s i b span
自身文本多大 就占多大
行内标签内部不能嵌套块儿级标签和行内标签