1.前端与后端的概念
1.前端:任何与用户直接打交道的界面,都可以称之为前端(类似于前台接待的角色)。
2.后端:不直接与用户打交道,主要负责内部真正的业务逻辑的执行(类似于幕后操作者。)
3.前端三剑客:
HTML:网页的骨架
CSS:网页的样式
JavaScript:网页的动态
2.前端前戏
1.编写服务器(处理客户端的请求)
2.浏览器充当客户端访问服务器
3.浏览器无法正常展示服务端内容(因为服务端的数据没有遵循标准)
4.HTTP协议>>>:最主要的内容就是规定了浏览器与服务端之间数据交互的格式
"""
我们之前学习socket模块,可以连接客户端和服务端。我们可以使用浏览器充当客户端,来访问服务端。但是我们我们用浏览器(IP地址+端口号)访问提示'127.0.0.1 发送的响应无效',说明服务端没有遵循浏览器的格式。只要是使用B/S架构使用浏览器与服务端交互就必须遵循该协议。
"""
3.HTTP协议
规定了服务端和浏览器数据交互的格式
1.四大特性:
1.1基于请求响应:客户端发送请求,服务端回应响应。
1.2基于TCP、IP作用于应用层之上的协议,该协议属于应用层。
1.3无状态:服务端不会保存客户端的状态以及任何信息。
1.4无\短链接:客户端与服务端之间不会长久地保持连接。如果想要长链接,可以使用其他协议。
2.数据格式
2.1 请求格式:
1.请求首行:填写请求版本,请求方式
2.请求头:一大堆K:V键值对
换行
3.请求体:存放敏感信息,并不是所有的请求方式都有请求体(用户名、密码)
2.2响应格式(基本和请求格式一样):
1.响应首行:填写响应版本,响应方式
2.响应头:一大堆K:V键值对
换行
3.响应体(存放给浏览器展示的数据)
2.3响应状态码:
用数字来表达一些文字意义(类似于暗号)
1XX:服务端已经接收到了你的请求正在处理,客户端可以继续发送或者等待;
2XX:200 OK:请求成功,服务端发送了对应的响应;201:创建成功
3XX:301:临时重定向;302:永久重定向(重定向:例如我去访问京东,本想添加购物车,但是会马上跳转到登录界面。临时重定向是还可以回来,永久重定向跳转过去就无法回来)。
4XX:403:无权访问;404:请求资源不存在
5XX:服务器内部错误(服务端问题与客户端无关)
'''在公司中我们还会自定义更多的响应状态码,通常以10000起步'''
4.HTML简介
1.直接发送手写的数据:HTML协议固定的格式首先向服务端发送b'HTTP/1.1 200 OK\r\n\r\n',然后直接在后面跟手动编写位的数据。由于TCP协议是流式协议,所以可以将自己编写的内容和固定格式分开发送。
2.发送文件内的数据:由于TCP协议下内容需要以二进制格式发送,所以文件读直接用'rb'模式读出来再发送(暂且只能发英文,中文会乱码)。
"""
和我们之前使用socket模块不同的是,给网页版的服务端发送内容之前需要加上此行代码b'HTTP/1.1 200 OK\r\n\r\n':
"""
3.可以在文件中编写超文本标记语言(HTML语法),传输到浏览器中的服务端,详解见下文。
5.HTML概览
1.什么是HTML:超文本标记语言（Hypertext Markup Language, HTML）是一种用于创建网页的标记语言,它包括一系列标签,通过这些标签可以将网络上的文档格式统一。HTML是一种标记语言(markup language),不是一种编程语言。
2.HTML使用标签来描述网页。
"""
本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性问题）
"""
3.HTML注释语法:<!--注释内容-->
4.HTML:文档结构
4.1<html>:固定格式,html是文档开始和结束的标记,是HTML页面的根元素,在它们之间是文档的头部（head）和主体（body）。
4.2<head>:定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据。
4.3:<body>:之间的文本是可见的网页主体内容。
"""
注意：对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。
"""
5.HTML标签属性:
5.1HTML的标签是由尖括号包围的关键字,如<html,<div>等
5.2HTML标签通常是成对出现的，比如：<div>和</div>，第一个标签是开始，第二个标签是结束。结束标签会有斜线。
5.3也有一部分标签是单独呈现的，比如：<br/>、<hr/>、<img src="1.jpg" />等。
6.标签的分类:
1.单标签<img/>;双标签<h1></h1>
2.行内标签、块儿级标签:
行内标签:两边没有换行符,大小完全取决于内部的内容长短(span、img、a、label、input)。
块儿级标签:内容独占一行(div、p、h1-h6、form、ul、ol、dl、dt、dd、li)。
6.head常见标签
"""
1.网页信息数据一般也会存放于文件中,文件名后缀是.html
2.pycharm支持前端所有类型的文件编写
3.html文件的打开内只有自动调用浏览器的功能
"""
1.<title></title>:定义网页标题
2.meta:定义网页源信息
<meta name='description' content='网页简介'>
# description中content内容是搜索时的描述
<meta name='keywords' content='关键字查询'>
keywords中content的内容是搜索时查询的关键字,关键字越多用户使用的时候查找到的概率越大。
3.style:内部支持编写css代码,对字体颜色等属性做一些修改(css代码后面还会继续学习)
eg:h1 {
color: deeppink;
}
4.link:引入外部css文件:将刚才的h1代码剪切到mycss.css文件中,在html文件head中写入<link rel="stylesheet" href="css文件名">,也可以达到修改字体颜色的效果。
5.script支持内部编写js代码也可以引入外部js文件
<script>
prompt('好好活着','不要浪费生命')
</script>
<script src="myjs.js"></script>
'''该功能会在进入网页时有一个提示'''
ps:了解每个标签大致的作用即可
7.body内基本标签
1.标题标签:h1-h6:分别表示一级标题到六级标题;
2.段落标签:标签p会把正文分割成一个个段落
3.其他标签:
u:下划线
i:斜体
s:删除线
b:加粗
"""
只要不加p标签,就不会自动换行
"""
4.换行与分割线:
换行:<br>; 分割线:<hr>;换行不仅可以用<p>,也可以用<br>
8.body内常见符号
1. 空格;可以看到我们不加此符号也能实现空格操作,但是如果有多个空格网页中只能显示一个;采用 写几个就能实现几个空格。
2.>:大于;
3.<:小于;
4.&&符;
5.¥:¥
6.©:©
7.®:®
9.body内布局标签:
布局标签主要用于前期布局,主要有两个:div和span;
div:div标签用来定义块级元素,一行只可以定义一个div标签。
span:标签用来定义内联(行内)元素,一行可以定义多个span标签。
"""
块级标签可以相互嵌套,并且理论上可以无限套娃;块级标签内部可以嵌套块级标签和行内标签,行内标签只能嵌套行内标签。p标签虽然是块儿级标签,但是它的内部也不能嵌套块儿级标签(如果强行嵌套系统会进行优化,优化成两行)。
"""
10.body内常用标签
1.a标签:链接标签;<a href=""></a>中href="">称之为默认属性,<a href=""xyz=111></a>称为自定义属性。
1.1:链接标签:<a href="地址">链接的提示信息</a>
eg:<a href="https://i.cnblogs.com/posts">郑凯泽的博客园</a>
"""
a标签可以通过此代码来取消文字下划线:
a {
text-decoration: none;
}
"""
1.2目标属性target:
在地址的后面填写target参数,target="_self"指在本页跳转目标地址,target="_blank"指在新的页面跳转目标地址。
<p><a href="https://i.cnblogs.com/posts"target="_self">郑凯泽的博客园</a></p>
<p><a href="https://www.baidu.com"target="_blank">百度的链接</a></p>
1.3填写其他标签的id值,具备锚点功能: href='#id'。
2.img标签:
1.<img src="" alt="">;src中填写的是图片地址(本地或者网络都可以);其他特性在后面内容讲解。
11.列表标签
1.无序列表:用u标签嵌套li标签。市面上所有有规则排列的横向或者竖向的数据 一般使用的都是无序列表
<ul>
<li>标题1</li>
<li>标题2</li>
</ul>
"""
ul {list-style-type: none;}可以将无序列表前面的原点去掉。
如果想将无序标签水平排列用float浮动。
"""
2.有序列表:用ol标签嵌套li标签来表示,type可以指定起始字符,type="3"表示从3开始。
<ol type="3">
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
3.标题列表:用dl标签嵌套dt(大标题)标签再嵌套dd标签(小标题);
<dl>
<dt>标题1</dt>
<dd>小标题1</dd>
<dd>小标题2</dd>
<dt>标题2</dt>
<dd>小标题1</dd>
<dd>小标题2</dd>
</dl>
12.表格标签
1.先写基本骨架
<table>
<thead></thead>
<tbody></tbody>
</table>
2.再写表头及表单数据:用table,thead/tbody,tr嵌套。首行table border=""表示边框粗细,数字越大边框越粗,thead标签套tr标签套th标签表示表头,tbody标签套tr标签套td标签表示表内实际数据。
<table border="3"> # 加了breder参数表示边框,数字越大边框越粗
<thead> # 表头
<tr>
<th>编号</th> # th表示加粗
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody> # 数据
<tr>
<td>1</td>
<td>max</td>
<td>male</td>
<td>25</td>
</tr>
</tbody>
<tbody>
<tr>
<td>2</td>
<td>jack</td>
<td>male</td>
<td>28</td>
</tr>
</tbody>
</table>
13.表单标签
表单标签可以获取到用户的数据并且发送给服务端,表单标签代码也放在body当中。
form标签:
action:控制数据的提交地址
method:控制数据的提交方法
input标签:获取用户输入
<form action="">
<p>用户名:<input type="text"></p> # 用块儿级标签包起来目的是换行
<p>密码:<input type="password"></p> # 类型改为password输入的是密文
<p>生日: <input type="date"></p> # 类型改为date可以直接从网页上选取日期
<p>邮箱: <input type="email"></p> # email类型用户必须输入@才可以
<p>gender:
<input type="radio" name="gender" values="male">男
<input type="radio" name="gender" values="female">女
<input type="radio" name="gender" values="others">其他 # radio模式是单项选择,要制定name,以及values传递给服务端。选项不能通过用户输入获取到值所以必须手动添加至传递。
</p>
<p>hobbies:
<input type="checkbox" name="hobbies" values="basketball">篮球
<input type="checkbox" name="hobbies" values="soccer">足球
<input type="checkbox" name="hobbies" values="run">跑步
<input type="checkbox" name="hobbies" values="run">读书
</p> # checkbox是多选
<p>请上传您的简历<input type="file"></p> # file只能上传一个文件
<p>请上传您的附件 <input type="file" multiple></p> # file后面加multiple可以上传多个文件
<input type="submit"> # 提交按钮
<input type="reset"> # 重置按钮,会清空当前
<input type="button" value="按钮"> # 目前暂无用处,value可以指定按钮内容
<p>学历:
<select name="" id="" > # 在id后面加multiple可以多选
<option value="">大专</option>
<option value="">本科</option>
<option value="">硕士</option>
</select>
</p> # 下拉选择
<p>info:
<textarea name="" id="" cols="30" rows="10"></textarea>
</p> # 获取大段文本
</form>
"""
input标签应该有name属性
name属性相当于字典的键 input标签获取到的用户数据相当于字典的值
点击发送就会组织成字典的形式发送给服务端 这样才具有明确意义
"""
14.表单标签的补充说明
基于form表单发送数据:
1.用于获取用户数据的标签应该含有name属性,name属性相当于字典的键,用户输入的数据会被保存在标签中的value属性中,value相当于字典的键。
2.如果不需要用户填写数据,只需要用户选择(单选或多选),那我们需要自己填写value。
<p>gender:
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
<input type="radio" name="gender" value="others">其他
</p>
'''没有name属性的标签,form表单会直接忽略,不会发送给服务端'''
3.针对input标签理论上应该是一个label标签,但是也可以不写。
<p>
<label for="d1">username:</label>
<input type="text" id="d1">
</p>
4.标签的属性名如果和属性值相等,也可以不写。
<p>
<input type="file" multiple>
</p>
multiple是multiple="multiple"的简写
5.针对选择类型的标签可以提前把设置默认选项。只需要在name后面加上checked,checked是shecked='checked'的缩写。
<p>gender:
<input type="radio" name="gender" checked>男
<input type="radio" name="gender">女
<input type="radio" name="gender">其他
</p>
6.下拉框与文件上传可以复选
文件:后面加上multiple即可
<p>请插入附件:
<input type="file" multiple>
</p>
下拉框多选:在选项value后面加上selected表示默认值,在id后面加上multiple表示可以多选
<p>
<select name="" id="" multiple>
<option value="">大专</option>
<option value="" selected>本科</option>
<option value="">研究生</option>
</select>
</p>
浙公网安备 33010602011771号