内容概要
- 前端简介
- HTTP协议
- HTML简介
- HTML基本标签
- HTML常用符号
- HTML常用标签
- 列表标签
- 表格标签
- 表单标签
内容详细
前端
# 什么是前端
任何与操作系统打交道的界面都可以称之为"前端"
手机界面(app) 电脑界面(软件) 平板界面(软件)
# 什么是后端
不直接与用户打交道，而是控制核心逻辑的运行
各种编程语言编写的代码(python代码、java代码、c++代码)
"""全栈开发:前后端都会!!!
优势在于一个人干两个人的活 意味着工资也相当于两个人的薪资
缺陷在于一个人干两个人的活 有时候会忙不过来压力很大
"""
# 前端的学习流程
前端三剑客
HTML 网页的骨架(没有样式很丑)
CSS 网页的样式(给骨架美化)
JS 网页的动态效果(丰富用户体验)
BS架构
我们在编写TCP服务端的时候 针对客户端的选择可以是自己写的客户端代码也可以是浏览器充当客户端(bs架构本质也是cs架构)
我们自己编写的服务端发送的数据浏览器不识别 原因在于
每个人服务端数据的格式千差万别 浏览器无法自动识别
没有按照浏览器固定的格式发送
"""
浏览器可以访问很多服务端 如何做到无障碍的与这么多不同程序员开发的软件实现数据的交互
1.浏览器自身功能强大 自动识别并切换(太过消耗资源)
2.大家统一一个与浏览器交互的数据方式(统一思想)
"""
HTTP协议
协议:大家商量好的一个共同认可的结果
HTTP协议:规定了浏览器与服务端之间数据交互的方式及其他事项
如果我们开发的时候不遵循该协议 那么浏览器就无法识别我们的网站
网站就需要自己编写一个客户端(可以不遵循)
# 1.四大特性
1.基于请求响应
服务端永远不会主动给客户端发消息 必须是客户端先发请求
如果想让服务端主动给客户端发送消息可以采用其他网络协议
2.基于TCP、IP作用于应用层之上的协议
应用层(HTTP)、传输层、网络层、数据链路层、物理链接层
3.无状态
不保存客户端的状态信息
早期的网站不需要用户注册 所有人访问的网页数据都是一样的
"纵使见她千百遍 我都当她如初见"
4.无连接/短连接
两者请求响应之后立刻断绝关系
# 2.数据格式
请求格式
请求首行(网络请求的方法)
请求头(一堆k:v键值对)
(换行符 不能省略)
请求体(并不是所有的请求方法都有)
响应格式
响应首行(响应状态码)
响应头(一堆k:v键值对)
(换行符 不能省略)
响应体(即将交给浏览器的数据)
# 3.响应状态码
用数字来表示一串中文意思
1XX:服务端已经接受到了数据正在处理 你可以继续发送数据也可以等待
2XX:200 OK请求成功 服务端返回了相应的数据
3XX:重定向(原本想访问A页面 但是自动跳转到了B页面)
4XX:403没有权限访问 404请求资源不存在
5XX:服务器内部错误
"""
公司还会自定义状态码 一般以10000开头
参考:聚合数据
"""
HTTP前戏
import socket
server = socket.socket()
server.bind(('127.0.0.1',8081))
server.listen()
"""
请求首行
b'GET / HTTP/1.1\r\n
请求头
Host: 127.0.0.1:8080\r\n
Connection: keep-alive\r\n
sec-ch-ua: " Not;A Brand";v="99", "Google Chrome";v="97", "Chromium";v="97"\r\n
sec-ch-ua-mobile: ?0\r\n
sec-ch-ua-platform: "macOS"\r\n
Upgrade-Insecure-Requests: 1\r\n
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.71 Safari/537.36\r\n
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9\r\n
Sec-Fetch-Site: none\r\n
Sec-Fetch-Mode: navigate\r\n
Sec-Fetch-User: ?1\r\n
Sec-Fetch-Dest: document\r\n
Accept-Encoding: gzip, deflate, br\r\n
Accept-Language: zh-CN,zh;q=0.9\r\n
\r\n
请求体(当前为空)
'
"""
while True:
sock, addr = server.accept()
while True:
data = sock.recv(1024)
if len(data) == 0:break
print(data)
# 遵循HTTP响应格式
sock.send(b'HTTP/1.1 200 OK\r\n\r\n')
sock.send(b'<h1>hello big baby<h1>')
sock.send(b'<a href="https://www.jd.com">good see<a>')
sock.send(b'<img src="https://imgcps.jd.com/ling4/100013209930/54iG5qy-55u06ZmN/6YOo5YiG5q-P5ruhMTk55YePMTAw/p-5bd8253082acdd181d02fa06/a677079b/cr/s/q.jpg"/>')
# with open(r'data.txt','rb') as f:
# data = f.read()
# sock.send(data)
HTML简介
HTML是构造网页的骨架>>>:几乎所有的网站都是由HTML构建而成
HTML:超文本标记语言
# 不是一门编程语言 没有任何的逻辑 只有固定的标记功能
"""
HTML标签的分类
1.双标签(有头有尾)
<a></a>
2.自闭合标签(单标签)
<img/>
"""
# HTML文档结构
<html>
<head>编写给浏览器查看的内容</head>
<body>编写展示给用户查看的内容</body>
</html>
'''在使用编程工具创建的时候就会自动编写文档结构'''
# HTML语法注释
<!--单行注释-->
<!--
多行注释
多行注释
-->
'''在编写的时候 编程工具也有注释快捷键 ctrl+?'''
如何创建及展示
"""
存档网页骨架的文件后缀名一般都是.html
该类型文件主要的打开方式为浏览器形式
"""
1.以pycharm为例
右键new点击HTML FILE创建即可
2.如何打开展示
右上方会提供多种浏览器(注意需要提前下载)
# 编写HTML标签的时候 不需要自己写大括号小括号 只需要写标签名称+tab键即可自动补全(所有支持编写html文件的工具内部自带的插件语法功能)
head内常见标签
title 定义网页标题
style 内部支持css代码
script 内部支持编写js代码 还可以通过src属性导入外部js文件
link 通过href属性引入外部的css文件
meta 定义网页源信息
keywords关键字搜索
description网页描述信息
"""
在html文件中 可以编写html和css以及js
但是实际工作中三者其实是分开存放的 这样有利于后期维护和扩展
"""
body内基本标签
h1~h6 标题标签
p 段落标签
b 加粗
i 斜体
u 下划线
s 删除线
br 换行
hr 水平分割线
"""有时候相同的样式 可能有多种标签可以实现!!!"""
标签分类
分类1:单双标签
分类2:
块儿级标签 h1~h6 p
独占一行(后期可以通过css实现不占一行)
行内标签 u i s b
自身文本多大就占多大
特殊符号
空格
> 大于号
< 小于号
& &符号
¥ 羊角符
© 版权符
® 注册
常见标签
# 网页在制作之前需要提前布局好
布局标签
div 块儿级标签
span 行内标签
"""
标签是可以嵌套的 但是需要遵循以下规律
块儿级标签 可以无限制的嵌套块儿级标签和行内标签
特例:p标签虽然是块儿级标签但是也不能嵌套块儿级标签
行内标签不能嵌套块儿级标签 可以嵌套行内标签
知识点扩展
页面布局的技巧
先用div划分区域 之后再考虑填充具体内容
可以参考小米官网练习该技巧
"""
1.a标签>>>:链接标签
用法1:通过href属性指定网址(URL)点击跳转
跳转过程中有两种方式
1.当前页面跳转 target="_self" 默认
2.新建页面跳转 target="_blank"
用法2:锚点功能
通过href属性指定标签的id值点击即可跳转到对应位置
"""
网址其实并不是一个非常专业的名词
URL:统一资源定位符
"""
2.img标签>>>:图片标签
src属性指定图片地址
可以是本地的地址也可以是网络上的地址
alt属性编写文本
用于在图片无法加载出来的情况下的提示信息
title属性写文本
用于鼠标悬浮在图片上之后提示的文本信息
height、width属性写像素
用于调整图片的尺寸
需要注意调整的时候 修改一个另外一个自动等比例缩放
如果同事调整两个 那么可能会造成图片的失真
标签的两大重要属性
1.id属性 个体查找
类似于标签的身份证号 在同一个html页面上id不能重复
2.class属性 群体查找
类似于python面向对象中的类的继承
可以将多个标签划为一类
<h1 class='c1'></h1>
<p class='c1'></p>
并且一个标签可以有很多类
<h1 class='c1 c2 c3'></h1>
<p class='c1 c8 c9'></p>
列表标签
1.无序列表(掌握)
# 前面没有用于标识数字顺序的提示
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
"""
网页上有规则排列的多个横向或者竖向内容 几乎都是无序列表
要想实现需要css相关知识
"""
2.有序列表(了解)
<ol>
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
3.标题列表(了解)
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
表格标签
# 当需要展示一些具体固定格式的多条数据的时候可以考虑使用(excel)
# 表格标签的格式
<table>
<thead></thead> 表头
<tbody></tbody> 表单
</table>
# tr标签
tr就表示一行
# th标签
在表头的字段名称
# td标签
普通的单元格数据
<table>
<thead>
<tr>
<th>姓名</th>
<th>密码</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>jason</td>
<td>123</td>
<td>18</td>
</tr>
</tbody>
</table>
border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
width: 像素 百分比.（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）
