前端简介:
什么是前端?
任何与用户直接打交道的操作界面都可以被称为前端, 如: 网页界面, 手机界面....
前端的学习历程和内容:
要学习的内容:
三大重点:
1,web 服务的本质:
浏览器中敲入网址回车发送了几件事?
1. 浏览器超服务端发送请求
2. 服务端接收请求
3. 服务端返回相应的响应
4. 浏览器接收响应 根据特定的规则渲染页面展示给用户看
服务端: 连接 htlm 在页面展示
- import socket
- server= socket.socket()
- server.bind(('127.0.0.1',8080))
- server.listen(5)
- while True:
- conn,addr= server.accept()
- data = conn.recv(1024)
- print(data)
- conn.send(b'HTTP/1.1 200 ok\r\n\r\n')
- conn.send("hell world!".encode('utf-8'))
- with open('a.txt','rb') as f:
- res=f.read()
- conn.send(res)
- conn.close()
Web 需遵循的协议
2,HTTP 协议
超文本传输协议, 规定了浏览器与服务端之间消息传输的数据格式
HTTP 的四大特性:
1. 基于请求响应
2. 基于 TCP/IP 之上的作用于应用层的协议
3. 无状态(服务端无法保存用户的状态, 一个人来一千次 我都记不住 还当你如初见)
4. 无连接(请求来一次我响应一次 之后立马断开连接 两者之间就不再有任何关系了)
websocket 相当于是 HTTP 协议的一个大的补丁, 它支持长连接
Djdigo 内容及一些概念知识:
数据格式:
请求数据格式
1. 请求首行(标识 HTTP 协议版本, 当前请求方式)
2. 请求头(一大堆 k,v 键值对)
请求体(携带的是一些敏感信息比如 密码, 身份证号...)
响应数据格式
1. 响应首行(标识 HTTP 协议版本, 响应状态码)
2. 响应头(一大堆 k,v 键值对)
响应体(返回给浏览器页面的数据 通常响应体都是 html 页面)
响应状态码
用一串简单的数字来表示一些复杂的状态或者提示信息
1XX: 服务端已经成功接收了你的数据正在处理 你可以继续提交额外的数据
2XX: 服务端成功响应 你想要的数据(请求成功 200)
3XX: 重定向(当你在访问一个需要登录之后才能访问的页面 你会发现窗口会自动调到登录页面 301 302)
4XX: 请求错误(请求资源不存在 404, 请求不合法不符合内部规定会权限不够 403)
5XX: 服务器内部错误(500)
请求方式
1.get 请求
朝服务端要资源(比如浏览器窗口输入 www.baidu.com)
2.post 请求
朝服务端提交数据(比如用户登录 提交用户名和密码)
URL: 统一资源定位符(就是指网址)
HTLM 部分:
htlm: 超文本标记语言, 要想让你的页面能够正常被浏览器显示出来, 所写的页面就必须遵循 htlm 标记语法
浏览器只识别: htlm CSS JS
pycharm 修改标签字体颜色:
Web 本质: 浏览器 / 服务器
文件(后缀名是. htlm 结尾的文件, 也就意味着, 只要看到. htlm, 那么它就是一个前端页面文件)
文件的后缀名仅仅是给人看的, 计算机无所谓, 因为都是二进制
HTLM 注释:
- <!-- 单行注释 -->
- <!--
- 多行注释
- 多行注释
- -->
HTLM 是什么?
是超文本标记语言, 是一种用于创建网页的标记语言
扩展名:.htlm 或. htm
HTLM 不是什么?
HTLM 是一种标记语言, 它不是一种编程语言
最基本的 HTLM 文档:
- <!DOCTYPE htlm>
- <htlm lang="zh-CN">
- <head>
- <meta charset="UTF-8">
- <title>CSS 样式优先级</title>
- </head>
- </body>
- </htlm>
- </!doctype>
解释:
1:<!DOCTYPE htlm > 声明为 HTLM5 文档
2:<htlm>,</htlm > 是文档的开始标记和结束的标记. 是 HTLM 页面的跟元素, 在它们之间是文档的头部 (head) 和主体(body).
3:<head>,</head> head 内的标签, 不是用来展示给用户看的, 而是定义一些配置, 主要是给浏览器看的.
4:<title>,</title > 定义了网页标题, 在浏览器标题栏显示.
5:<body>,</body> body 内的标签 就是浏览器展示给用户看的内容
在 pycharm 里输入 title 直接按住 TAB 键 <title>,</title>
注意: 对于中文网页需要使用 < meta charset="utf-8"> 声明编码, 否则会出现乱码. 有些浏览器会设置 GBK 为默认编码,
则你需要设置为 <meta charset="gbk">.
打开 htlm 页面的两种方式:
1. 找到文件路径 选择浏览器打开
2.pycharm 快捷方式直接打开
HTLM 标签格式
.HTLM 标签是由尖括号包围的关键字, 如 < htlm>,<div > 等
.HTLM 标签通常是成对的出现的, 比如:<div > 和 < div>, 第一个标签开始, 第二个标签是结束符, 结束符会由斜线.
标签的语法:
.<标签名 属性 1="属性值 1" 属性 2="属性值 2"....>内容部分</ 标签名>
.<标签名 属性 1="属性值 1" 属性 2="属性值 2"..../>
- <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>
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <script src="jQuery-3.4.1.js"></script>
- </head>
- <body>
- <h1 > 宁</h1>
- <h2 > 静</h2>
- <h3 > 致</h3>
- <h4 > 远</h4>
- <h5 > 路</h5>
- <h6 > 漫</h6>
- <h7 > 漫</h7>
- <h8 > 其</h8>
- <h9 > 修</h9>
- <h10 > 远</h10>
- <h11 > 兮</h11>
- <b>
- 加粗
- </b>
- <i>
- 斜体
- </i>
- <u>
- 下划线
- </u>
- <s>
- 删除
- </s>
- <p>
- 人生得意需尽欢, 莫使金樽空对月
- </p>
- <p>
- 人生得意需尽欢, 莫使金樽空对月
- </p>
- <p>
- 人生得意需尽欢, 莫使金樽空对月
- </p>
- <p>
- 人生得意需尽欢, 莫使金樽空对月
- </p>
- <br>
- <p>
- 人生得意需尽欢, 莫使金樽空对月
- </p>
- <hr>
- <p>
- 人生得意需尽欢, 莫使金樽空对月
- </p>
- </body>
- </HTML>
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- <script src="jQuery-3.4.1.js">
- </script>
- </head>
- <body>
- <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2215934588,2652507557&fm=26&gp=0.jpg"
- alt="校花">
- <stript>
- <p>
- <a href="http://xiaohuar.com">
- 点击有你好看哦!
- </a>
- </p>
- </stript>
- <div>
- div
- <div>
- div1
- </div>
- <div>
- div2
- <p>
- p
- <a href="https://www.luffycity.com">
- a
- </a>
- </p>
- </div>
- </div>
- <span>
- span
- </span>
- <a href="" id="d1">
- 顶部
- </a>
- <!-->
- <div style="height: 100px;background-color: black">
- </div>
- <a href="" id="d2" class="c1">
- 中间
- </a>
- <div style="height: 200px;background-color: green">
- </div>
- <a href="#d2">
- 会到中间
- </a>
- <div style="height: 150px;background-color: yellow">
- </div>
- <a href="#d1" username="jason" password="123">
- 点我回到顶部
- </a>
- </body>
- </html>
- 网页效果: 列表标签: 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>
- HTLM 示例:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- <script src="jQuery-3.4.1.js">
- </script>
- </head>
- <body>
- <p>
- 无序列表
- </p>
- <!--<ul>type="circle"</ul>-->
- <ul>
- type="square"
- <li>
- aaa
- </li>
- <li>
- bbb
- </li>
- <li>
- ccc
- </li>
- <li>
- ddd
- </li>
- <li>
- eee
- </li>
- </ul>
- <p>
- 有序列表
- </p>
- <ol>
- type="I" start="2"
- <li>
- aa
- </li>
- <li>
- bb
- </li>
- <li>
- cc
- </li>
- </ol>
- <p>
- 标题列表
- </p>
- <dl>
- <dt>
- 标题 1
- </dt>
- <dd>
- 内容 1
- </dd>
- <dt>
- 标题 2
- </dt>
- <dd>
- 内容 1
- </dd>
- <dd>
- 内容 2
- </dd>
- </dl>
- </body>
- </HTML>
来源: http://www.bubuko.com/infodetail-3193990.html