前端
任何能够直接和用户打交道的交互界面 即为前端
1）软件开发架构
c/s结构
b/s架构：本质上也是c/s架构
2）浏览器输入网址发生了几件事？
1.输入网址
2.朝服务端发送请求
3.服务器接收请求并查询浏览器想要的数据返回给浏览器
4.浏览器拿到数据展示页面
3）HTTP协议
超文本传输协议
客户端服务端在数据交互的时候都必须遵循该协议
4）电子设备识别、传输信息的特点：二进制↓
1.基于网络传输，只有遵循http协议编写才便于通用解析
2.文件后缀名到底给谁看呢？仅仅是给人看的
web服务的本质
import socket sk = socket.socket() sk.bind(("127.0.0.1", 8080)) sk.listen(5) while True: conn, addr = sk.accept() data = conn.recv(8096) conn.send(b"HTTP/1.1 200 OK ") conn.send(b"<h1>Hello world!</h1>") conn.close()
HTML介绍
超文本标记语言 Hypertext Markup Language, 用于创建网页
HTML不是一种编程语言！！！它使用标签来描述网页。
本质：是浏览器可识别的规则，按照规则编写网页，浏览器根据规则渲染网页；
对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性问题）
网页文件的扩展名：.html或.htm
html文件打开方式：
方式1：找到该文件选择浏览器打开
方式2：pycharm内自动打开
1）文档结构
<!DOCTYPE html> <!--声明为HTML5文档,必须是 HTML 文档的第一行--> <html lang="en"> <head> <!--head存放的内容用户是看不到的，主要是给浏览器和搜索引擎使用--> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--用户能够看见的内容都在body里面--> </body> </html>
2）标签的语法：
<标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
- <html>、</html>是文档的开始标记和结束的标记。HTML页面的根元素，中间为文档的头部（head）和主体（body）
- <head>、</head>定义了HTML文档的开头部分。包含了文档的元（meta）数据。
- <title>、</title>定义了网页标题，在浏览器标题栏显示。
- <body>、</body>之间的文本是可见的网页主体内容。
- 注意：对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。
- 有些浏览器会设置 GBK 为默认编码，则需要设置为 <meta charset="gbk">。
- <!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令
3）几个很重要的属性：
- id：定义标签的唯一ID，HTML文档树中唯一
- class：为html元素定义一个或多个类名（classname）(CSS样式类名)
- style：规定元素的行内样式（CSS样式）
HTML常用标签
<head></head>内常用标签
<title></title> 页面标题
<style></style> 编写css代码
<script></script> 内部可以直接写js代码，也可以通过src属性引入外部js代码文件
<link/> 通过href引入外部css文件
<meta/> 定义网页原信息
<body></body>内常用标签
1）基本标签
<p>段落标签</p> <h1>标题1</h1> <!--最大号--> <h2>标题2</h2> <h3>标题3</h3> <h4>标题4</h4> <h5>标题5</h5> <h6>标题6</h6> <!--最小号--> <b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除</s> <!--换行--> <br> <!--水平线--><hr>
2）特殊字符
空格 & & < < > > ¥ ￥ © © 版权 ® ® 注册
特殊字符编码：https://www.jb51.net/onlineread/htmlchar.htm
3）常用标签 * * * * * *
<div></div> <!--用来定义一个块级元素，另起一行--> <span></span> <!--用来定义一个行内元素--> <p></p> <!--p标签：不能包含块级标签，也不能包含p标签--> <a href=""></a> <!--超链接标签--> <img src="" alt=""> <!--图片标签-->
4）列表标签
ul 无序列表 type属性：
-
- disc （实心圆点，默认值）
- circle（空心圆圈）
- square（实心方块）
- none （无样式）
ol 有序列表 type属性：
-
- 1 数字列表，默认值
- A 大写字母
- a 小写字母
- Ⅰ大写罗马
- ⅰ小写罗马
<ul type=""> <!--无序列表--> <li>a</li> </ul> <ol type=""> <!--有序列表--> <li>111</li> </ol> <dl> <!--标题列表--> <dt>标题</dt> <dd>内容</dd> </dl>
5）表格标签
固定就以下面的格式书写
<table>
<thead></thead>
<tbody></tbody>
</table>
tr 一个tr表示一行
rowspan 垂直方向合并
colspan 水平方向合并
border 调整列表的边框
cellspacing 调单元格与外边框之间的距离
cellpadding 调文本与单元格之间的距离
<table border="1" cellspacing="20" cellpadding="10"> <!--表单标签--> <thead> <tr> <!--一行--> <th>name</th> <th>age</th> <th>hobby</th> </tr> </thead> <tbody> <tr> <td colspan="2">json</td> <!--横向方向占两格--> <!--<td>18</td>--> <td rowspan="2">read</td> <!--竖直方向占两格--> </tr> <tr> <td>nick</td> <td>18 </td> <!--<td>run</td>--> </tr> </tbody> <tefooter></tefooter> </table>
6）form表单：前后端数据交互 * * * * * *
获取用户输入(手动输入/选择/默认值)，并将获取到的用户信息发送给后端
form表单中只有input的type类型为submit才会触发提交信息的动作
如果不想通过input标签来触发提交动作 那么可以直接写一个<button>button按钮</button>
input
通过控制type的类型从而实现不同的获取用户输入的标签样式
text 普通文本
password 密文
date 日历
radio 单选框
checkbox 多选框
file 获取文件
submit 触发提交数据的行为
button 普通的按钮
reset 重置form表单内容
select
选择框 默认是单选的 可以通过multiple参数将单选变为多选
一个option就是一个选项
textarea
获取用户大段文本值
form表单中几个重要的属性
action:用来控制数据到底提交给谁 写url来指定提交给谁
form表单默认是get请求 可以通过method属性修改提交方法
form表单中需要给每一个获取用户输入的标签加上name属性用来标识当前数据的类型
你可以将name属性当做字典的key 用户输入的当做字典的value 并且你可以手动设置value值
form表单发送文件 需要修改enctype属性的值
默认是urlencoded不支持传输文件
需要将其修改为multipart/form-data
GET请求与POST请求
get请求:获取想要的数据
post请求:提交数据
1、标签分类1
双标签：h1~h6、p、a
自闭和标签：img、br、hr
2、标签分类2
块儿级标签：div、 h1~h6、 p、 br、 hr
1.独占一行
2.块儿级标签：能够嵌套块儿级标签和行内标签
3.p标签虽然是块儿级标签，但是它不能嵌套任何的块儿级标签
4.块儿级标签能够设置长宽
行内标签：span、 img、a、i、 s 、b、 u
1.自身内容有多的就占多大
2.行内标签不能设置长宽
3、常用标签
所有的html标签都应该有一个id属性，用来唯一标识当前标签 为后续的DOM操作提供基础
也就意味着同一份html中标签的id不能重复，不写id属性也是可以的
a 标签：
可以通过href跳转到指定的网址
锚点功能:回到顶部
<a href="" id="a1">top</a>
<a href="#a1">bottom</a>
ps：target属性用来控制是否在当前页面跳转
默认是_self当前页
也可以指定成_blank新建页面跳转
img标签
src图片路径:即可以是网络上的图片地址也可以是本地的图片地址
alt当图片加载失败之后自动展示的提示信息
title鼠标悬停在图片上时显示的文本
图片调节长宽的时候只需要调节一个 另外一个参数自动等比例缩放
4、URL
统一资源定位符 Uniform Resource Locator，也称 网页地址，是因特网上标准的资源的地址
URL举例：
http://www.sohu.com/stu/intro.html
http://222.172.123.33/stu/intro.html
URL地址由4部分组成，各部分之间用“/”符号隔开。
第1部分：协议：http://、ftp://等
第2部分：站点地址：可以是域名或IP地址
第3部分：页面在站点中的目录：stu
第4部分：页面名称，例如 index.html