前端知识
web服务的本质：
基于B/S网络架构，浏览器和服务端的交互
浏览器发送请求，服务端接收请求，服务端响应请求，服务端吧HTML文件内容发给浏览器，浏览器渲染页面
发送请求通过OSI网络七层模型：应用层，表示层，会话层，传输层，网络层，数据链路层，物理层
一、HTML介绍
html是超文本标记语言，用于创建网页的标记语言
本质是浏览器能识别的规则，不过容易出现浏览器的兼容问题导致渲染效果不同
网页文件的拓展名：.html或htm
注：html不是编程语言，只是一种标记语言；标记语言是不存在逻辑的
1、html文档结构
html文件的创建：
在pycharm中创建html文件，找到html文件直接创建
在其它编译软件中创建html文件，和在pycharm中类似
手动创建就先先创建一个.txt文件，然后把文件后缀名改成.html文件，然后在文件中写入固定格式
1.声明文件为html5文档
2.是文档的开始标记和结束标记。是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body）
3.定义了HTML文档的开头部分，他们之间的内容不会在浏览器的窗口直接显示。包含了文档的元（meta）数据，配置信息等，是给浏览器的用的，用户看到的直接效果是body里面写的。
4.注：在中文网页需要使用声明编码，否则会出现乱码。有些网站的默认编码是gbk，所以把utf-8改成gbk即可
2、html标签格式
html的标签格式是严格封闭的
html的标签是成对出现的
全封闭标签
标签的开始是尖括号<>加关键字
标签的结尾是尖括号和斜杠加关键字
例：、
这种标签叫全封闭标签
自封闭标签
只有单独的前面部分
例：![]()
、
、
全封闭标签还有另一种写法，就是在前半部分的>前面加一个斜杠
例：
3、html常用标签
meta标签的三个参数
name="keywords"：搜索关键字
name="description"：显示栏后面的介绍内容
http-equiv="refresh" content="2;URL=https://www.oldboyedu.com"：在2秒后页面自动跳转到百度
4、浏览器的内核
浏览器内核：
浏览器 内核
IE trident
chrome blink
火狐 gecko
Safari webkit
注：浏览器内核是浏览器采用的渲染引擎，宣言引擎决定了浏览器如何显示网页内容以及页面的格式信息。渲染引擎也是兼容性问题出现的根本原因
二、body内常用的标签
（1）块级标签（行外标签）：块级标签单独用页面一快空间，单独占用一行空间可设置宽度和高度
（2）内联标签（行内标签）：内联标签不会单独占用一块空间，不能单独占用一行空间无法设置宽度和高度
内联标签
加粗
斜体
下划线
删除
块级标签
段落标签
标题1
标题2
标题3
标题4
标题5
标题6
换行
线
（3）特殊字符
| 空格 | |
| > | > |
| < | < |
| & | & |
| ￥ | ¥ |
| 版权标识符（） | © |
| 注册（®） | ® |
（4）div标签：div标签是块级标签，通过块级标签可以对块以极快内的元素进行样式的修改与设定
（5）span标签：span标签是内联标签，可进行针对段落的微调与设定
但要注意div与span使用时的嵌套关系，div内可多层嵌套使用div，也可使用span，但是span内不能嵌套span或者div等块级标签
（6）img标签：超链接标签；所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。
点我
_blank：表示以新页面打开链接
_self：表示在当前标签页中打开目标网页
（7）列表
无序列表
type属性：
disc（实心圆点，默认值）
circle（空心圆圈）
square（实心方块）
none（无样式）
有序列表
type属性：start是从数字几开始
1数字列表，默认值
A 大写字母
a 小写字母
Ⅰ大写罗马
ⅰ小写罗马
无序列表
有序列表
标题列表
（8）表格
表格是一个二维数据空间，一个表格由若干行组成，一个行又有若干单元格组成，单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。
表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式（即按行和列组织）的数据。
表格的基本结构：
#标题部分
#一行
#内容部分
#一行
属性:
border: 表格边框.
cellpadding: 内边距 （内边框和内容的距离）
cellspacing: 外边距.（内外边框的距离）
width: 像素 百分比.（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）
（9）input标签
| type属性 | 表现形式 | 代码 |
|---|---|---|
| text | 单行输入文本 | |
| password | 密码输入框（不显示明文） | |
| date | 日期输入框 | |
| checkbox | 复选框 | |
| radio | 单选框 | |
| submit | 提交按钮 | #发送浏览器上输入标签中的内容，配合form表单使用，页面会刷新 |
| reset | 重置按钮 | #页面不会刷新，将所有输入的内容清空 |
| button | 普通按钮 | |
| hidden | 隐藏输入框 | |
| file | 文本选择框 | （等学了form表单之后再学这个） |
属性说明:
name：表单提交时的“键”，注意和id的区别
value：表单提交时对应项的值
type="button", "reset", "submit"时，为按钮上显示的文本年内容
type="text","password","hidden"时，为输入框的初始值
type="checkbox", "radio", "file"，为输入相关联的值
checked：radio和checkbox默认被选中的项
readonly：text和password设置只读
disabled：所有input均适用
(10)select标签
属性说明：
multiple：布尔属性，设置后为多选下拉框，否则默认单选
disabled：禁用
selected：默认选中该项
value：定义提交时的选项值
（11）label标签
定义： 标签为 input 元素定义标注（标记）。如果不用这个label给input标签一个标记，input会变黄，不影响使用，只是提示你，别忘了给用户一些提示，也就是这个label标签。
说明：label 元素不会向用户呈现任何特殊效果。但是点击label标签里面的文本，那么和他关联的input标签就获得了光标，让你输入内容;
# 只能是id属性
（12）textarea多行文本
可设置是否允许手动拉伸：resize: none;
属性说明：
name：名称
rows：行数 #相当于文本框高度设置
cols：列数 #相当于文本框长度设置
disabled：禁用
maxlength：显示字符数，例如：maxlength='10' 最多输入十个字符
（13）form表单
action属性：指定提交路径
method属性：提交方式
form表单会将form表单里面的数据全部提交到指定路径
1、css
css的文件的引入方式
# 第一种引入方式
head标签中引入
head标签中引入
# 第二种引入方式
外部文件引入 工作中常用的
创建一个css文件,stylesheet文件,比如test.css文件
里面写上以下代码
div{
/* css注释 */
width: 200px;
height: 200px;
background-color: red;
}
在想使用这些css样式的html文件的head标签中写上下面的内容
href对应的是文件路径
# 第三种引入方式
内联样式:
2、css选择器
基本选择器：元素选择器、id选择器、类选择器、属性选择器、后代选择器、组合选择器（通过逗号连接）
（1）元素选择器
div{width:100px;}
标签名称{css属性:值}
（2）id选择器
html示例代码:
css写法:
#d1{
background-color: green;
width: 100px;
height: 100px;
}
（3）类选择器
html代码:
李晨浩
李海煜
张建志
css写法
.c1{
background-color: green;
width: 100px;
height: 100px;
}
（4）后代选择器
html代码示例:
张建志
xxxxxxx
css代码:
div a{
color:orange; /* 字体颜色 */
}
（5）组合选择器（通过逗号连接）
html代码
李晨浩
xxx222
xxxxxxx
官人,你好!
css代码: 注意:a标签字体颜色设置,必须找到a标签才能设置
#d1 a,#d3 a{
background-color: pink;
color:yellow;
}
3、css样式
高度宽度、字体、字体格式、颜色、背景、边框、盒子模型、内边距、外边距、display属性、浮动
（1）高度宽度
html代码:
div1
span1
css写法:
div{
height: 100px;
width: 100px;
background-color: pink;
}
span{
height: 100px;
width: 100px;
background-color: green;
}
width: 50%; 宽度高度可以设置百分比,会按照父级标签的高度宽度来计算
（2）字体
html代码:
窗前明月光,地上鞋三双!
css写法:
font-size: 20px; /* 默认字体大小是16px */
color:green; /* 字体颜色 */
/*font-family: '楷体','宋体'; !* 字体格式 *!*/
font-weight: 400; /* 字体粗细 100-900,默认是400 */
（3）字体格式
html代码:
只身赴宴鸡毛装!!!
css代码:
height: 100px;
width: 200px;
background-color: yellow;
text-align: center; 水平居中
/*text-align: right;*/
line-height: 100px; 和height高度相同,标签文本垂直居中
（4）颜色
三种方式:
英文单词:red;
十六进制: #ff746d;
rgb: rgb(155, 255, 236);
带透明度的: rgba(255, 0, 0,0.3); 单纯的就是颜色透明度
标签透明度:opacity: 0.3; 0到1的数字,这是整个标签的透明度
（5）背景
html代码:
css写法:
/*background-color: #ff746d;*/
/*background-color: rgb(155, 255, 236);*/
/*background-image: url("fage.png");*/ url写图片路径,也可以是网络地址路径
/*background-repeat: no-repeat;*/
/*background-repeat: repeat-y;*/
/*background-position: right top;*/
/*background-position: 100px 50px;*/
/* 简写方式 */
background: #ff0000 url("fage.png") no-repeat right bottom;
（6）边框
html代码
都是同学装鸡毛!
css写法:
/* 边框简写方式,对四个边框进行设置 */
/*border:1px solid red;*/
/*border-left: 1px solid green;*/
/*border-top: 1px solid blue;*/
border-width: 5px; 边框宽度
border-style: dashed; 边框样式
border-color: aqua; 边框颜色
（7）盒子模型
占用空间大小
margin: 外边距 距离其他标签或者自己父级标签的距离
padding: 内边距 内容和边框之间的距离
border: 边框
content: 内容部分 设置的width和height
（8）内边距
html代码:
英姿飒爽雄鸡装,飞上枝头变凤凰!
css写法:
width: 200px;
height: 100px;
border: 4px solid red;
/*padding: 6px 8px;*/
/*padding: 4px 2px 6px 8px;*/
/*padding-left: 20px;*/
/*padding-top: 20px;*/
/*padding-right: 20px;*/
/*padding-bottom: 20px;*/
（9）外边距
html代码:
英姿飒爽雄鸡装,飞上枝头变凤凰!
css写法:
.c1{
background-color: red;
height: 100px;
width: 100px;
/*margin-left: -1000px;*/
/*margin: 10px 15px;*/
}
.c2{
background-color: green;
height: 20px;
width: 20px;
/*margin: 10px 15px;*/
margin-left: 20px;
}
（10）display属性
示例:
html代码:
我是span标签
鹅鹅鹅,曲项向天歌!
拔毛烧开水,铁锅炖大鹅!
css写法:
span{
/*display: block;*/
}
.c1{
background-color: red;
height: 100px;
width: 100px;
/*display: inline;*/
/*display: inline-block;*/
display: none;
}
.c2{
background-color: green;
height: 100px;
width: 100px;
}
display的几个值:
inline: 将块级标签变成了内联标签
block:将内联标签变成块级标签
inline-block: 同时具备内联标签和块级标签的属性,也就是不独占一行,但是可以设置高度宽度
none: 设置标签隐藏
（11）浮动
浮动的元素,不独占一行,并且可以设置高度宽度
html代码
css样式
body{
margin: 0;
}
.c1{
background-color: red;
height: 100px;
width: 200px;
float: left;
}
.c2{
background-color: brown;
height: 100px;
width: 200px;
float: right;
}
.c3{
background-color: pink;
height: 100px;
width: 100%;
}
浮动,造成父级标签塌陷的问题,没有高度了
解决父级标签塌陷问题:
方式1:
给父级标签加高度
方式2:
清除浮动:clear属性
方式3: 常用
.clearfix:after{
content: '';
display: block;
clear: both;
}
html代码:
方式4: 给父级标签css属性设置overfloat：hidden