本文档展示了千锋旅游网的HTML页面结构，使用了Bootstrap响应式布局，包括顶部横幅、导航栏、轮播图以及产品推荐等元素。同时，介绍了数据库的基础知识，如MySQL的特点和下载安装步骤，强调了数据库操作的重要性，如DQL、DML、DDL和DCL。
目录
一、千锋旅游网
1.step01 分析
1.使用bootstrap来进行布局的，使用响应式布局 2.里面的按钮都是使用bootstrap里面的样式， 3.在html文件里面导入bootstrap相关的文件
2.step02 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../css/bootstrap.css">
<script src="../js/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="../js/bootstrap.js" type="text/javascript"></script>
<style>
.tv_div {
height: 50px;
background-color: orange;
text-align: center;
line-height: 45px;
font-size: 18px;
}
</style>
</head>
<body>
<!-- 第一部分 -->
<div class="container-fluid">
<!-- 第一行 -->
<div class="row">
<img src="../img/top_banner.jpg" alt="图片加载失败" class="img-responsive" style="width: 1920px;">
</div>
<!-- 第二行 -->
<div class="row">
<div class="col-lg-3">
<img src="../img/qian_logo.png" alt="图片加载失败" class="img-responsive">
</div>
<div class="col-lg-6">
<form class="navbar-form navbar-left" style="margin-top: 20px; ">
<div class="form-group">
<input type="text" class="form-control" placeholder="请输入最佳路线" style="width: 400px; border: solid 1px #ffc390;">
</div>
<button type="submit" class="btn btn-default" style="border: solid 1px #ffc390;">搜索</button>
</form>
</div>
<div class="col-lg-3">
<img src="../img/hotel_tel.png" alt="" class="img-responsive">
</div>
</div>
<!-- 第三行 -->
<div class="row">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">首页</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Python <span class="sr-only">(current)</span></a></li>
<li><a href="#">JAVAEE</a></li>
<li><a href="#">HTML5</a></li>
<li><a href="#">云计算</a></li>
<li><a href="#">UI</a></li>
<li><a href="#">大数据</a></li>
</ul>
</div>
</div>
</nav>
</div>
<!-- 第四行 -->
<div class="row">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="../img/banner_1.jpg" alt="图片加载失败" style="width: 1920px;">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="../img/banner_2.jpg" alt="图片加载失败" style="width: 1920px;">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="../img/banner_3.jpg" alt="图片加载失败" style="width: 1920px;">
<div class="carousel-caption">
...
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<!-- 第二部分 -->
<div class="container">
<!-- 第一行 -->
<div class="row">
<div style="border-bottom: solid 2px orange; margin-top: 15px;">
<img src="../img/icon_5.jpg" alt="图片加载失败">
<span>千锋精选</span>
</div>
</div>
<!-- 第二行 -->
<div class="row">
<div class="col-lg-3 img-thumbnail">
<img src="../img/jiangxuan_1.jpg" alt="图片加载失败" style="margin-left: -11px;">
<span>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</span>
<p>￥668</p>
</div>
<div class="col-lg-3 img-thumbnail">
<img src="../img/jiangxuan_2.jpg" alt="图片加载失败" style="margin-left: -11px;">
<span>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</span>
<p>￥668</p>
</div>
<div class="col-lg-3 img-thumbnail">
<img src="../img/jiangxuan_2.jpg" alt="图片加载失败" style="margin-left: -11px;">
<span>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</span>
<p>￥668</p>
</div>
<div class="col-lg-3 img-thumbnail">
<img src="../img/jiangxuan_4.jpg" alt="图片加载失败" style="margin-left: -11px;">
<span>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</span>
<p>￥668</p>
</div>
</div>
<!-- 第三行 -->
<div class="row">
<div style="border-bottom: solid 2px orange; margin-top: 15px;">
<img src="../img/icon_6.jpg" alt="图片加载失败">
<span>国内游</span>
</div>
</div>
<!-- 第四行 -->
<div class="row">
<div class="col-md-4 img-thumbnail">
<img src="../img/guonei_1.jpg" alt="图片加载失败">
</div>
<div class="col-md-8">
<!-- 第一行 -->
<div class="row">
<div class="col-md-4 img-thumbnail">
<div class="thumbnail">
<img src="../img/jiangxuan_1.jpg" alt="图片加载失败">
<span>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</span>
<p>￥668</p>
</div>
</div>
<div class="col-md-4 img-thumbnail">
<div class="thumbnail">
<img src="../img/jiangxuan_1.jpg" alt="图片加载失败">
<span>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</span>
<p>￥668</p>
</div>
</div>
<div class="col-md-4 img-thumbnail">
<div class="thumbnail">
<img src="../img/jiangxuan_1.jpg" alt="图片加载失败">
<span>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</span>
<p>￥668</p>
</div>
</div>
</div>
<!-- 第二行 -->
<div class="row">
<div class="col-md-4 img-thumbnail">
<div class="thumbnail">
<img src="../img/jiangxuan_1.jpg" alt="图片加载失败">
<span>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</span>
<p>￥668</p>
</div>
</div>
<div class="col-md-4 img-thumbnail">
<div class="thumbnail">
<img src="../img/jiangxuan_1.jpg" alt="图片加载失败">
<span>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</span>
<p>￥668</p>
</div>
</div>
<div class="col-md-4 img-thumbnail">
<div class="thumbnail">
<img src="../img/jiangxuan_1.jpg" alt="图片加载失败">
<span>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</span>
<p>￥668</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 第三部分 -->
<div class="container">
<!-- 第一行 -->
<div class="row ">
<img src="../img/footer_service.png" alt="图片加载失败" width="1170px">
</div>
<!-- 第二行 -->
<div class="row tv_div">
<span class="tv_span">千锋教育 运营主体：北京千锋互联科技有限公司 ，属具备计算机技术培训资质的教育培训机构</span>
</div>
</div>
</body>
</html>
二、数据库
2.1 数据库的简介
1.数据库是按照数据结构来组织、存储和管理数据的仓库。是一个可以长期存储数据在计算机内的有组织的、可共享 的、统一管理的大量的数据集合
2.2数据库分类
1.分类：关系型数据库，非关系型数据库 2.关系型数据库：数据库之间的表与表之间有联系的数据库 常见的关系型数据库：db2、mysql、sqlite、oracle、sqlsever 3.非关系型数据库：数据库表之间不存在联系的 常见的非关系型数据库：redis(键值对)、mongodb、hbase(列族存储)
2.3 数据库管理系统
1.数据库管理系统： A.是一种操作和管理数据库的一种大型软件,用来建立、使用和维护数据库，简称：DBMS B.对数据库进行统一的管理和控制 2.运维(管理数据库的人员)运维工程师通过对数据库操作系来操作和数据库维护
三、Mysql 数据库
3.1 简介
1.Mysql是一种关系型数据库管理系统，
3.2 特点
1.免费 开源 2.轻量级的 3.学习成本低 容易上手
3.3 下载
1.下载地址:https://www.oracle.com/mysql/free/
3.4 卸载
1.在卸载数据库的时候，注意两个点： A.在控制面板卸载了mysql这个数据库后，需要删除数据库的配置文件，一般在系统盘里面C盘的Program File(x68)这个文件下会有一个MySQL文件夹，需要删除 B.删除数据文件，一般在C盘的ProgramData文件按夹下面有一个MySQL，删除即可
3.5 数据库的安装
step01 点击数据库文件
step02下一步
step03 同意协议
step04 选择版本
step05 安装地址
step06 安装
step 07 下一步
step08 下一步
step09 第一步完成
step10 下一步
step11 下一步
step12 下一步
step13 下一步
step 14 下一步
step15
step16
step17 编码格式的设置
step18
step19
step20
四、数据库操作
4.1 简介
1.数据操作分为四种：DQL DML DDL DCL
2.数据查询语句：DQL
基本结构：SELECT 子句 FROM 子句， WHERE
子句组成的查询块：
SELECT (字段名，表名)
FROM(表或视图名)
WHERE(查询条件)
3.数据操作语言：DML
A.插入：INSERT
B.更新：UPDATE
C.删除：DETELE
4.数据定义语言：DDL
创建数据库里面的各种表、视图、索引等等时候
注意点：这个DDL操作是隐形的
5.数据控制语言：DCL
用来授予数据库的某种特权，对数据库进行实时监控
4.2 sql语法
4.2.1 创建数据库
语法：create database 数据库名；
4.2.2 查询所有的数据库
语法：show databases;
4.2.3 查看数据库的编码格式
语法：show create database 数据库名；
在创建数据库的时候，没有给编码格式，那么它默认的格式就是你安装数据库的时候的选择的编码格式，一般是utf-8
4.2.4 创建带带有编码格式的数据库
语法：create database 数据库名 character set 编码格式；
4.2.5 删除数据库
语法：drop database 数据库名；
扫一扫
897
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
