Web 前端基础｜HTML+CSS+JavaScript+Bootstrap

一、前端开发整体介绍

前端三大技术：HTML、CSS、JavaScript

HTML：搭建页面结构
CSS：美化页面样式
JavaScript：实现页面动态交互效果

Web 框架：接收客户端请求并做业务处理
MySQL 数据库：用于持久化存储业务数据

学习路线：快速上手：基于 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 三种引入方式

行内样式：直接写在标签属性上
页内样式：在head内部写<style>标签
外部样式：单独.css文件，link 标签引入

2.CSS 选择器

ID 选择器 ：#id名{}
类选择器 ：.类名{}
标签选择器 ：标签名{}
属性选择器

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. 使用步骤

下载 Bootstrap 资源文件
HTML 页面引入 Bootstrap 样式文件
按照 Bootstrap 规范写 HTML 结构，可叠加自定义样式

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 代码存放位置

页面内：<script>标签，可以放在 head 或者 body 末尾
外部 js 文件：<script src="xxx.js"></script>引入

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 简化开发。