一、前端开发整体介绍
- HTML：搭建页面结构
- CSS：美化页面样式
- JavaScript：实现页面动态交互效果
学习路线： 快速上手：基于 Flask Web 框架搭建网站 深度学习：Django 框架（主力学习）
Flask 快速实战代码示例
示例 1：简单路由返回文本
# 安装flask：pip install flask
from flask import Flask
app = Flask(__name__)
# 路由：访问地址与函数绑定
@app.route("/show/info")
def index():
return "中国联通"
if __name__=='__main__':
app.run()
示例 2：返回 HTML 模板页面
模板文件默认存放在项目下templates文件夹
from flask import Flask,render_template
app = Flask(__name__)
@app.route("/show/info")
def index():
# 读取templates下index.html返回给浏览器
return render_template("index.html")
if __name__=='__main__':
app.run()
二、浏览器可识别 HTML 常用标签
2.1 网页编码设置
<meta charset="UTF-8">
2.2 网页标题
<title>网页标题</title>
2.3 表格标签
<table>
<thead>
<tr>
<th>表头单元格</th>
</tr>
</thead>
<tbody>
<tr>
<td>内容单元格</td>
</tr>
</tbody>
</table>
- <thead>：存放表头
- <tbody>：存放表格主体数据
三、网络请求基础
浏览器输入 URL 回车访问网站，底层会向服务端发送字符串格式请求报文。
GET 请求
- 数据拼接在 URL 地址上，参数可见
- 示例： https://www.sogou.com/web?query=安卓&age=19&name=xx
- 特点：请求参数暴露在浏览器地址栏
POST 请求
- 提交的数据不在 URL 中，存放在请求体内部
- 适合传递敏感、大量数据
CSS 样式
CSS 专门用于美化 HTML 标签
1.CSS 三种引入方式
2.CSS 选择器
input[type='text']{}
.v1[xx='456']{
color: red;
}
示例标签：
<div class="v1" xx="123">s</div>
<div class="v1" xx="456">f</div>
<div class="v1" xx="999">a</div>
3. 样式覆盖与优先级
- 多个样式，后面定义的会覆盖前面重复样式；不重复样式会合并生效。
- !important强制提升样式优先级
color: red !important;
4. 基础样式属性
width: 200px; /*宽度，像素/百分比*/
height:100px; /*高度*/
font-weight:bold; /*字体加粗，也支持数字*/
font-family:"微软雅黑"; /*设置字体*/
块级、行内、行内块标签
display:block; /*块级标签*/
display:inline; /*行内标签*/
display:inline-block; /*行内块*/
5. 文本对齐
text-align:center; /*水平居中*/
line-height:59px; /*单行文本垂直居中，值等于盒子高度*/
6. 浮动
float:left; /*左浮动*/
clear:both; /*清除浮动*/
清除浮动方案 1：同级末尾增加空 div
<div style="clear:both"></div>
清除浮动方案 2：:after伪类（推荐）
.clearfix:after{
content:"";
display:block;
clear:both;
}
7. 边距
padding:10px; /*内边距：内容与边框之间距离*/
margin:10px; /*外边距：盒子和盒子之间距离*/
注意：body 默认自带 margin，页面四周会出现白边，可以重置 margin 消除。
- 文本居中：在父容器设置text-align:center
- 盒子区域居中：盒子必须设置宽度，margin-left:auto;margin-right:auto
- 父盒子不设置宽高，可以被内部子元素自动撑开。
8. 其他常用样式
opacity:0.5; /*透明度0~1*/
cursor:pointer; /*鼠标悬浮变成小手*/
9. 伪类与伪元素
/*鼠标悬浮效果*/
div:hover{
color:blue;
}
/*伪元素after，在元素后方追加内容*/
div:after{
content:"文本内容";
}
10.position 定位
position:fixed; /*固定窗口位置，滚动不跟随*/
position:relative; /*相对定位，相对于自身原来位置*/
position:absolute; /*绝对定位，相对于父级relative盒子*/
使用技巧：父盒子设置relative，子盒子设置absolute，配合top left bottom right调整位置。
11.z-index 层级
z-index:999;
控制盒子堆叠层级，数值越大越优先显示在上层。
12.border 边框
border:1px solid transparent;
transparent透明边框，hover 切换边框样式不会造成页面抖动。
Bootstrap 框架
1. 使用步骤
2. 栅格系统
- 将一行总宽度划分为 12 列
- 响应式类：.col-sm- .col-md- .col-lg- 根据屏幕宽度自动适配
- 非响应式：.col-xs-6
- 支持列偏移
3. 图标
Bootstrap 自带图标较少，一般搭配Font Awesome图标库
<link rel="stylesheet" href="plugins/font-awesome-4.7.0/css/font-awesome.css">
4.Bootstrap 依赖
Bootstrap JS 组件依赖 JQuery 库，引入顺序：先 JQuery，后 Bootstrap js
<script src="js/jquery-3.4.1.min.js"></script>
<script src="plugins/bootstrap-3.4.1/js/bootstrap.min.js"></script>
JavaScript
JavaScript 是浏览器内置解释执行的编程语言
- DOM、BOM：JS 内置模块（类比 Python re/random）
- JQuery：JS 第三方库（类比 Python requests）
1.JS 代码存放位置
2. 变量与字符串
var name = "高清";
var v1 = name.length; // 获取字符串长度
var v2 = name[0]; //按下标取字符
var v3 = name.charAt(3);
var v4 = name.trim(); //去除首尾空格
var v5 = name.substring(0,2); //切片，前取后不取
3. 数组
//定义数组
var v1 = [11,23,33,44];
v1.push("aa"); //尾部追加
v1.unshift("联通"); //头部追加
v1.splice(索引,0,"元素"); //指定位置插入
v1.pop(); //尾部删除
v1.splice(2,1); //索引2位置删除1个元素
4. 循环
//方式1 for in 获取下标
for(var idx in v1){
var data = v1[idx];
}
//方式2 普通for循环
for(var i = 0;i<v1.length;i++){
}
支持break、continue
5.JS 对象（类似字典）
var info = {
name:"高清",
age:18
}
//取值两种方式
info.age
info["age"]
//修改
info.name = "郭志";
info["name"] = "郭智";
//删除属性
delete info["age"];
6. 条件判断
if(条件){
}else if(条件){
}else{
}
7. 函数
function func(){
//函数体
}
func(); //调用
8.DOM 操作（操作页面标签）
DOM：JS 提供操作 HTML 标签的模块。
//根据id获取标签
var tag = document.getElementById("xx");
tag.innerText; //获取标签文本
tag.innerText = "文本内容"; //修改标签文本
//创建标签
var tr = document.createElement("tr");
//追加子标签到父容器
var bodytag = document.getElementById("body");
bodytag.appendChild(tr);
9. 事件绑定完整示例：输入框添加 li 列表
<body>
<input type="text" placeholder="请输入内容" id="txtUser">
<input type="button" value="点击添加" onclick="addCityInfo()" >
<ul id="city"></ul>
<script type="text/javascript">
function addCityInfo(){
//1 获取输入框标签
var txtTag = document.getElementById("txtUser");
//2 获取输入内容
var wenben=txtTag.value;
if(txtTag.value.length>0){
//创建li标签
var newTag = document.createElement("li");
newTag.innerText=wenben;
//追加到ul
var parentTag = document.getElementById("city");
parentTag.appendChild(newTag);
//清空输入框
txtTag.value="";
}else{
alert("输入为空，请重新输入");
}
}
</script>
</body>
原生 DOM 操作代码繁琐，实际开发使用 JQuery、Vue、React 简化开发。
