文章目录
第一章 基本标签及使用
前端简介
前端你可以理解为是跟用户直接打交道的交互界面
后端你可以理解为是幕后操作者不直接跟用户打交道
学习前端的流程
前端基础之三剑客(必学)
HTML
CSS
JavaScript
前端框架
jQuery
Bootstrap
fontawesome
sweetalter
三剑客详解
HTML(网页的骨架)
CSS(网页的样式)
JavaScript(网页的动态效果)
# eg:蜡笔小新一丝不挂的站在你的面前(HTML)
# 给他穿上裙子，涂上口红，穿上高跟鞋(CSS)
# 给他一根钢管，让他跳起来(JS)
web服务端
软件开发架构
cs架构
bs架构
bs架构本质也是cs架构
# 建议:养成看源码的习惯
简易服务端
import socket
server = socket.socket() # 参数不写默认就是TCP协议
server.bind(('127.0.0.1',8080))
server.listen()
"""
服务端
1.固定的IP和PORT
2.能够24小时不间断提供服务
3.能够支持高并发
"""
# 链接循环
while True:
conn, addr = server.accept()
data = conn.recv(1024)
print(data)
# 响应要遵循HTTP协议
conn.send(b'HTTP:/1.1 200 OK\r\n\r\n')
# conn.send(b'<h1>hello baby<h1>')
# 文件操作
with open(r'a.txt','rb') as f:
res = f.read()
conn.send(res)
conn.close()
HTTP协议
规定了服务端与浏览器之间数据传输的格式
1.四大特性
1.基于TCP/IP作用于应用层之上的协议
2.基于请求响应
3.无状态
cookie
session
token
4.无连接(短连接)
长连接(websocket:服务端主动给客户端发送消息)
2.数据格式
请求格式
请求首行(请求方式)
请求头(一大堆K:V键值对)
(这里必须要有一个换行符)
请求体(携带的数据)
eg:post请求提交数据
响应格式
响应首行(协议版本 响应状态码)
响应头(一大堆K:V键值对)
(这里必须要有一个换行符)
响应体(携带的数据)
案例1:浏览器要展示给用户看的数据
3.响应状态码
用一串简单的数字来表示一串中文意思
1XX:服务端已经接受到你的数据正在处理你可以继续提交
2XX:服务端成功返回响应数据
3XX:重定向
4XX:403请求无权限、404请求资源不存在
5XX:500服务器内部错误
不同的公司还会自己定制自己的响应状态码
"""
请求方法
1.get请求
朝别人要数据(也可以携带额外的数据条件)
数据是直接放在url后面携带的
url?username=wuchangwen&password=123
get请求携带的数据大小是有限制的，其次get请求只能携带一些不敏感的信息，因为一眼就能看到
eg:浏览器地址栏属于网址朝服务端所要对应的数据
2.post请求
朝别人提交数据
eg:用户名登录
数据是放在请求体里面的，并且数据大小理论上是没有限制的
"""
HTML简介
超文本标记语言
用来构建网页的骨架，可以毫不夸张的说，如果你想让浏览器展示你的页面，那么你就必须书写HTML(所有浏览器能够展示出来的页面内部其实都由HTML构成的)
注意HTML的学习是非常简单的，它没有任何的逻辑，我们只需要知道每一个标签表示的意思即可
h1 标题标签
a 链接标签
img 图片标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是最牛的网页</title>
<!-- <style>-->
<!-- h1 {-->
<!-- color: yellowgreen;-->
<!-- }-->
<!-- </style>-->
<link rel="stylesheet" href="mycss.css">
<!-- <script>-->
<!-- alert(123)-->
<!-- </script>-->
<!-- <script src="myjs.js"></script>-->
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
</head>
<body>
<h1>这是一个网页</h1>
</body>
</html>
web服务的本质
1.浏览器地址栏输入网址
2.朝服务端发送请求
3.服务端发送响应
4.浏览器接收响应展示结果(文件)
文件
前端HTML文件的后缀名是.html
HTML语法结构
书写前端页面，我们一般会创建.html结尾的文件
<html>
<head></head>
<body></body>
</html>
head内书写的内容一般都不是给人看的
body内书写的内容是浏览器直接展示给人看的
HTML注释
单行
<!--单行注释-->
多行
<!--
多行注释
多行注释
多行注释
-->
由于html没有逻辑并且标签就那么多，而一个html文件内html标签非常的多并且重复，我们在维护修改的时候回非常的难找
<!--导航条开始-->
<!--导航条结束-->
<!--左侧菜单开始-->
<!--左侧菜单结束-->
标签的分类01
1.单标签(自闭和标签)
<img/>
2.双标签
<a></a>
# 在HTML中标签之间是可以相互嵌套的(但是需要遵循一些规范)
类似于俄罗斯套娃
head内常用标签
title 控制网页标题
style 内部支持直接书写css代码
link 可以引入外部css文件
script 内部可以直接书写js代码也可以导入外部js文件
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name="description" content="老男孩教育Python学院">
body内基本标签
h1~h6 多级标题标签
s 删除线
b 加粗
i 斜体
u 下划线
p 段落标签
br 换行
hr 分割线
标签的分类02
1.块儿级标签 h1~h6 p
独占一行
2.行内标签 u i s b
自身文本多大就占多大
块儿级标签内部可以嵌套其他任意的标签(p标签除外)
p标签只能嵌套行内标签
行内标签只能嵌套行内
"""
前端不像后端逻辑那么严谨
有时候你不按照规范写也不会有问题
"""
body内常用标签
链接标签a(行内标签)
默认颜色的变化
蓝色:之前没有访问过
紫色:之前访问过
默认是在当前页面跳转，我们可以修改
target="_self" 当前页面
target="_blank" 新建页面
a标签除了可以有链接功能之外还具有锚点功能
href里面放其他标签的# + id值
图片标签img(行内标签)
<img src="111.jpg" alt="这是个美女" title="很有气质" height="200" width='200'>
src 图片地址
alt 图片加载不出来 提示的信息
title 鼠标悬浮上去之后提示的信息
height/width
用于调节图片的大小，修改一个另外一个自动等比例缩放
div
块儿级标签
主要用于前期页面的布局
span
行内标签
主要应用文本占位
HTML标签重要参数
id
由于同一个前端页面文件内相同的标签太多了
为了作区分，可以给标签设置id，类似于是标签的身份证号
即在同一个页面内标签的id不能重复
class
你可以看成是python里面的面向对象的继承
一个标签可以有多个类属性值，相当于继承了多个类属性特点
常用标签合集
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--<a href="https://www.baidu.com" target="_self">点我去百度</a>-->
<!--<a href="https://www.sogo.com" target="_blank">点我去搜狗</a>-->
<!--<a href="https://www.xiaohuar.com">点我去搜狗</a>-->
<!-- <h1>111</h1>-->
<!-- <h2>222</h2>-->
<!-- <h3>333</h3>-->
<!-- <h4>444</h4>-->
<!-- <h5>555</h5>-->
<!-- <h6>666</h6>-->
<!--<h1 id="d1">开头</h1>-->
<!--<div style="height: 1000px;background: red"></div>-->
<!--<div style="height: 1000px;background: black"></div>-->
<!--<div style="height: 1000px;background: blue"></div>-->
<!--<h1 id="d2">中间</h1>-->
<!--<div style="height: 1000px;background: red"></div>-->
<!--<div style="height: 1000px;background: black"></div>-->
<!--<div style="height: 1000px;background: blue"></div>-->
<!--<a href="#d1">回到顶部</a>-->
<!--<a href="#d2">回到中部</a>-->
<!--<h1 class="c1 c2 c3"></h1>-->
<!--<b>加粗</b>-->
<!--<i>斜体</i>-->
<!--<u>下划线</u>-->
<!--<s>删除</s>-->
<!--<p>奥斯卡惊呆了看见爱上大家爱丽丝建档立卡数据</p>-->
<!--<p>奥斯卡惊呆了看见爱上大家爱丽丝建档立卡数据</p>-->
<!-- <br>-->
<!--<p>奥斯卡惊呆了看见爱上大家爱丽丝建档立卡数据</p>-->
<!-- <hr>-->
<!--<p>奥斯卡惊呆了看见爱上大家爱丽丝建档立卡数据</p>-->
<!--<p>p1-->
<!-- <p>p2</p>-->
<!--</p>-->
<!--<img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1596842670,3419824800&fm=26&gp=0.jpg" alt="">-->
<!--<img src="111.jpg" alt="这是个美女" title="很有气质" height="400" width="200">-->
<!--<div></div>-->
<!--<span></span>-->
</body>
</html>
特殊符号
内容 对应代码
空格
> >
< <
& &
¥ ¥
版权 ©
注册 ®
列表标签
1.无序列表(知道)
ul
li
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
只要是有顺序排列的基本上使用的都是无序列表
2.有序列表(了解)
ol
li
3.标题列表(了解)
dl
dt
dd
表格标签
table
thead 表头
tr 一个tr就表示一行内容
th/td 单元格的数据
tbody 表单
tr
td
border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
width: 像素 百分比.（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）
表单标签
能够将前端获取到的用户数据发送给后端
主要用于注册登录功能界面
<form action=""></form>
label标签的作用
<!--label与input结合使用方式1-->
<label for="d1">username:
<input type="text" id="d1">
</label>
<!--label与input结合使用方式2-->
<label for="d2">password:</label>
<input type="text" id="d2">
input标签
input标签可以说是前端的变形金刚
type属性
text 普通文本
password 加密展示
email 邮箱格式
date 日期格式
radio 单选
checkbox 多选
submit 提交按钮
button 普通按钮
reset 重置按钮
select标签
下拉框，默认是单选可以改为多选
一个个选项就是一个个option标签
textarea标签
获取大段文本内容
表单重点知识
1.form表单中的参数
action
控制数据的提交路径
method
控制数据的提交方式get/post
# 注意form表单默认是get请求
enctype
控制数据的编码格式urlencoded/formdata
2.用户获取用户数据的标签都应该有name属性
其实我们可以将获取用户数据的标签看成是一个构造字典的工厂
用户的数据就类似于是字典的value而name参数指定的数据就类似于字典的key
3.默认值
radio和checkbox统一使用
checked="checked"
option使用
selected="selected"
如果参数名和参数值相同，则可以直接简写
checked="checked" 简写 checked
selected="selected" 简写 selected
4.能够触发form表单提交数据的标签有两个
<input type="submit" value="注册">
<button>我行!</button>
CSS层叠样式表
给HTML标签设置样式的
css语法结构
选择器 {属性名1:属性值1;属性名2:属性值2}
注释
/*注释*/
具体使用
/*这是小米官网首页的css样式表*/
/*导航条样式开始*/
控制导航条样式的css代码
/*导航条样式结束*/
引入方式
1.直接在style标签内部书写
<style>
h1 {
color: red;
}
</style>
2.利用link标签导入外部css文件
<link rel="stylesheet" href="mycss.css">
3.行内式(使用频率较低)
<h1 style="color: yellow">今天有点困!</h1>
最正规的写法就是单独开设一个css文件，但是我们为了教学方便就直接在style标签内书写
CSS学习流程
虽然css是用来给html标签设置样式的，但是一个html文件内相同的标签非常的多，如何做到给相同的标签设置不同的样式？？？
eg:第一个p设置为红色，第二个p标签设置为蓝色
在学习如何给标签设置样式之前我们应该先学会"如何查找标签"
CSS选择器
# 基本选择器
id选择器
#d1 {}
class选择器
.c1 {}
标签选择器
p {}
通用选择器(了解)
* {}
# 组合选择器
后代选择器
div p {}
儿子选择器
div>p {}
毗邻选择器
div+p {}
弟弟选择器
div~p {}
# 属性选择器
/*1.将所有含有name属性的标签文本颜色设置为红色*/
/*属性选择器*/
/*[name] {*/
/* color: red;*/
/*}*/
/*2.将所有含有name属性并值为jason的标签文本颜色设置为蓝色*/
/*[name='jason'] {*/
/* color: blue;*/
/*}*/
/*3.将所有含有name属性并值为jason的p标签文本颜色设置为蓝色*/
/*p[name='jason'] {*/
/* color: yellowgreen;*/
/*}*/
分组与嵌套
多种选择器之间可以相互混用
/* 分组*/
/* div,p,span {*/
/* color: yellow;*/
/* }*/
/* 嵌套*/
.c1,#d1,span {
color: yellowgreen;
}
伪类选择器
以a标签为例
/*鼠标悬浮上去之后颜色改变*/
a:hover {
color: yellowgreen;
}
伪元素选择器
p:first-letter {
font-size: 48px;
color: red;
}
p:before {
content:"*";
color:red;
}
p:after {
content:"*";
color:red;
}
before和after多用于清除浮动
选择器优先级
1.当选择器相同的情况下我们采用的是就近原则
谁离标签越近听谁的
2.选择器不同的情况下 是有优先级之分
行内选择器 > id选择器 > 类选择器 > 标签选择器
给标签设置样式
宽和高
width属性可以为元素设置宽度。
height属性可以为元素设置高度。
块级标签才能设置宽度，内联标签的宽度由内容来决定。
字体大小
font-size
文本颜色
方式1
color:red
方式2
color:rgb(126,111,234)
方式3
color:#4d4d4d
方式4
color:rgba(126,111,234,0.4)
"""
颜色的获取方式
1.pycharm提供的取色器
2.微信或者qq提供的截图功能
"""
文字属性
text-align:center 居中对齐
a {
text-decoration: none;
}
ul {
list-style-type: none;
list-style: none;
}
背景属性
backgroud作为前缀
规律:
如果多个参数的前缀都是一样的，那么一般情况下都可以有简写的形式，就是以该前缀为参数
div {
background-image: url("111.jpg");
height: 800px;
width: 800px;
background-repeat: no-repeat;
/*background-repeat: repeat-x;*/
/*background-repeat: repeat-y;*/
background-color: gray;
/*background-position: center center;*/
background-position: 100px 100px;
}
div {
height: 800px;
width: 800px;
background: url("111.jpg") gray no-repeat center center;
}
利用背景图片布局
background-attachment: fixed;
边框
div {
border-style: solid;
border-color: red;
border-width: 5px
}
div {
border:dashed 5px blue
}
画圆
display展示
用于控制HTML元素的显示效果。
值 意义
display:"none" HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display:"block" 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
display:"inline" 按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:"inline-block" 使元素同时具有行内元素和块级元素的特点。
补充
HTML标签即可以设置自带的属性也可以设置自定义的属性(大白话就是啥都可以写)
<p name='jason' password=123>111</p>
参考文章
https://www.cnblogs.com/Dominic-Ji/p/10864457.html
作者：吴常文
出处：https://blog.csdn.net/qq_41405475
本文版权归作者和CSDN共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接。
527
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
