:::tips 目的：开发一个平台（网站）

  • 前端开发：HTML、CSS，Javascript
  • web框架：接收请求并处理
  • MySQl数据库：储存数据的地方

快速上手：

  • 基于Flask框架让你快速搭建出一个网站

深入学习

  • 基于Django框架（主要） :::

    1.快速开发一个网站

    :::tips pip install flask ::: :::tips from flask import Flask

app = Flask(name)

创建了网址 /show/info 和函数index 的对应关系
#以后用户在浏览器上访问 /show/info,网站自动运行 index

@app.route(“/show/info”)
def index():
return “中国联通”

if name == ‘main‘:
app.run() ::: image.png

  • flask框架让咱们写标签方便，支持将字符串写道文件里 :::tips from flask import Flask,render_template

app = Flask(name)

创建了网址 /show/info 和函数index 的对应关系
#以后用户在浏览器上访问 /show/info,网站自动运行 index

@app.route(“/show/info”)
def index():
#一定要有return,网站才知道你要返回的东西是什么
#return “666”：返回字符串666
#return render_template(“index.html”):返回网页index.html
return render_template(“index.html”)

if name == ‘main‘:
app.run() :::

2.浏览器能识别的标签

2.1编码 (head)

:::tips


:::

2.2title (head)

:::tips




::: image.png

2.2标题 (body)

:::tips

一级标题


二级标题


三级标题


四级标题


五级标题
:::

2.4div和span (body)

  • div,一个人占一行。【块级标签】 :::tips

    山东蓝翔

    挖掘机哪家强
    ::: image.png

  • span,自己多占多少。【行内标签，内联标签】 :::tips 山东蓝翔
    挖掘机哪家强 ::: image.png :::tips <!DOCTYPE html>






    山东蓝翔挖掘机哪家强

    ::: image.png

  • 注意：这两个标签比较素+css样式

  • 按F12查看原代码格式，可以到是否为块级标签 :::tips <!DOCTYPE html>







    时间
    2020-11-20


    茶， 植物学 名： Camellia sinensis (L.) O. Ktze.， 灌木 或 小乔木 ，嫩枝无毛。叶革质，长圆形或椭圆形，先端钝或尖锐，基部楔形，上面发亮，下面无毛或初时有柔毛，边缘有锯齿， 叶柄 无毛。花白色，花柄有时稍长；萼片阔卵形至圆形，无毛，宿存； 花瓣 阔卵形，基部略连合，背面无毛，有时有短柔毛；子房密生白毛；花柱无毛。蒴果3球形或1-2球形，高1.1-1.5厘米，每球有种子1-2粒。花期10月至翌年2月。


    :::

  • 网页样式

image.png

2.5超链接

:::tips text ::: :::tips 跳转到其它网站
点击跳转 ::: :::tips 跳转到自己网站的其它地址
查看更多 ::: 是否打开新的标签页 :::tips

当前页面打开
查看更多

新的Tab页面打开
查看更多

:::

展示
image.png

2.6图片

:::tips Day11 前端_HTML - 图8 ::: :::tips 直接显示别人的图片地址（防盗链）
Day11 前端_HTML - 图9 ::: :::tips Day11 前端_HTML - 图10
显示自己的图片：

  • 自己项目中创建：static目录，图片要放在static
  • 在页面上引入图片

Day11 前端_HTML - 图11 ::: :::tips 关于设置图片的高度和宽度 ::: :::tips Day11 前端_HTML - 图12
Day11 前端_HTML - 图13 :::

小结

  • 学习的标签 

    1. <h1></h1>
    2. <div></div>
    3. <span></span>
    4. <a></a>
    5. <img />

  • 划分 :::tips

  • 块级标签


  • 行内标签



Day11 前端_HTML - 图14 :::

  • 嵌套 :::tips


    xxx
    Day11 前端_HTML - 图15

    :::

    2.7列表标签

  • 无序列表 (块级标签) :::tips


    • 中国联通

    • 中国电信

    • 中国移动

:::

  • 有序列表 （块级标签） :::tips

    1. 中国联通

    2. 中国电信

    3. 中国移动

::: image.png

2.7表格标签

:::tips

#默认边框
#头部标签
#开头结尾





#内容标签




ID 姓名 年龄
10 校长 50
11 主任 40
12 老师 30
::: image.png

2.8案例

  • 案例源代码

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>手机列表</title>
</head>
<body>
  <h1>手机列表</h1>
  <table border="1">
      <thead>
          <tr>
              <th>ID</th>
              <th>图片</th>
              <th>名称</th>
              <th>价格</th>
              <th>查看详情</th>
              <th>操作</th>
          </tr>
      </thead>

      <tbody>
          <tr>
              <td>1</td>
              <td>
                  <img src="/static/a1.png" style="width: 100px">
              </td>
              <td>红米手机</td>
              <td>2000</td>
              <td>
                  <a href="https://www.mi.com/">打开地址</a>
              </td>
              <td>增加 删除</td>
          </tr>
      </tbody>
  </table>
</body>
</html>

  • 效果图

image.png

2.9 input系列 （7个）

:::tips 

<input type="radio" name="n1">男<br />    <input type="radio" name="n1">女

<input type="checkbox">篮球<br />    <input type="checkbox">足球<br />    <input type="checkbox">排球



::: ### 2.10下拉框 - 单选下拉框 :::tips ::: image.png - 多选下拉框 :::tips ::: 按住shift可以实现多选
image.png ### 2.10多行文本 :::tips

多行文本


::: image.png :::tips

多行文本


::: 默认为5行文本 :::tips

多行文本


::: ### 2.10案例：用户注册 :::tips <!DOCTYPE html>







用户名：


密码：

性别：
男
女

爱好：
篮球
排球
乒乓球

城市


擅长领域


备注






::: image.png ### 知识点回顾补充 - 创建新项目 - 创建flask代码 页面上的数据，想要提交到后台: - form标签包裹要提交到后台的数据 提交方式：method=’get’
提交的地址：action=”/xxx/xxx/x”
在form标签里面必须有一个submit标签 - 在form里面的一些标签：input/select/textarea 一定要写name属性 ### 2.11
表单和提交 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户注册——提交方式</title> </head> <body> <form action="/register_get" method="get"> 用户名：<input type="text" name="user"> 密码：<input type="password" name="user"> <input type="submit" value="submit提交(get)"> </form> <form action="/register_post" method="post"> 用户名：<input type="text" name="user"> 密码：<input type="password" name="pwd"> <input type="submit" value="submit提交(post)"> </form> </body> </html> ### 数据打印（get）和（post） :::tips @app.route(‘/register_get’)
def register_get():
# 1.接收用户通过get形式发送过来的数据
print(request.args)
# 2.用户在返回结果
return render_template(‘/register_get.html’) @app.route(‘/register_post’,methods=[‘POST’])
def register_post():
# 1.接收用户通过post形式发送过来的数据
print(request.form)
# 2.用户在返回结果
return render_template(‘/register_post.html’) ::: ### 总结 1.称呼 :::tips - 浏览器能够识别的标签（不专业） - HTML标签（） 什么是HTML标签？超文本传输语言（与浏览器搭配） ::: 2.HTML标签（默认样式格式，以后通过手段可以改写）
3.HTML标签与编程语言无关 - java+HTML - C#+HTML - php+HTML - python+HTML 4.提醒：HTML标签比较多 ## 3.CSS css，专门用来“美化标签”。 - 基础CSS，写简单页面&看懂&该。 - 模块，调整和修改。 ### 3.1快速了解 :::tips Day11 前端_HTML - 图23
中国联通
::: ### 3.2CSS 应用方式 #### 3.1在标签上 :::tips Day11 前端_HTML - 图24
中国联通
::: #### 3.2在head标签中（） - .c1在标签中和class搭配 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ color:red ; } </style> <style> .c2{ height: 50px; } </style> </head> <body> <h1 class="c1"> 用户登录 </h1> <form action="/login" method="post"> <div class="c2" > 用户名：<input type="text" name="user"> </div> <div class="c2"> 密码：<input type="password" name="pwd"> </div> <input type="submit" value="submit提交(post)"> </form> </body> </html> image.png #### 3.3在文件中 （） :::tips
::: html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href = "common.css"> </head> <body> </body> </html> #### 案例 image.png
image.png ### CSS选择器 - ID选择器 :::tips #c1{
} ::: :::tips
广西
::: - 类选择器 (最多) :::tips .c2{ } ::: :::tips
::: - 标签选择器 :::tips div{
—} ::: :::tips
xxx
::: - 属性选择器 :::tips input[type=’text’]{
border:1px solid red;
} ::: :::tips ::: - 后代选择器 :::tips .yy li{
color: darkblue;
}
.yy > a{
color: deeppink;
} ::: :::tips

百度


  • 日本

  • 新加坡



::: ### 关于选择器 :::tips 多：类型选择器、标签选择器、后代选择器
少：属性选择器、ID选择器 ::: 关于多个样式＆覆盖的问题： - 下面的格式会覆盖上面的格式 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ color: blue; border: 1px solid red; } .c2{ font-size: 28px ; color: red; } </style> </head> <body> <div class="c1 c2">中国联通</div> </body> </html> 补充：不要覆盖我
!important html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ color: blue !important; border: 1px solid red; } .c2{ font-size: 28px ; color: red; } </style> </head> <body> <div class="c1 c2">中国联通</div> </body> </html> ## 样式 ### 1.高度和宽度 :::tips .c1{
height: 300px;
width: 500px;
}
.c1{
height: 300px;
width: 50%;
} ::: 注意事项 - 宽度，支持百分比 - 行内标签：默认无效 - 块级标签：默认有效（霸道，右侧区域即使是空白，也不给别人占用） ### 2.块级和行内标签 - 块级 - 行内 - CSS样式：标签-> inline-block html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ display: inline-block; height: 100px; width: 200px; border: 1px solid red; } </style> </head> <body> <span class="c1">中国</span> <span class="c1">联通</span> <span class="c1">北京</span> <span class="c1">上海</span> </body> </html> image.png
示例：块级和行内标签的设置 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="display: inline-block">中国</div> <span style="display: block">联通</span> </body> </html> 注意：块级+块级&行内。 ### 3.字体设置 - 颜色 - 大小 - 加粗 - 字体格式 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ color: chocolate; font-size: 40px; font-weight: 555; font-family: "Open Sans", Arial, Helvetica, Sans-Serif; } </style> </head> <body> <div class="c1">中国联通</div> <div>中国联通</div> </body> </html> ### 4.文字对齐方式 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ height: 59px; width: 300px; border: 1px solid red; /*水平居中*/ text-align: center; /*垂直居中行的高度为多少，一般line-height为多少，可实现垂直居中*/ line-height: 59px; } </style> </head> <body> <div class="c1">中国电信</div> </body> </html> ### 5.浮动 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <span>左边</span> <span style="float: right">右边</span> </body> </html> 效果图
image.png
div是块级标签（霸道），如果浮动起来，就不一样了 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .item{ float: left; width: 280px; height: 170px; border: 1px solid red; } </style> </head> <body> <span class="item">右边</span> <span class="item"> </span> <span class="item"> </span> <span class="item"> </span> <span class="item"> </span> </body> </html> 效果图
image.png
如果让标签浮动起来后，会脱离文档流 ### 6.内边距 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .outer{ border: 1px solid red; height: 200px; width: 200px; /*内边距：我自己的内部可以设置距离*/ padding-top: 20px; padding-left: 20px; padding-bottom: 20px; padding-right: 20px; /*上下左右丢失20像素*/ /*padding-right: 20px;*/ /*上、右、下、左边距*/ /*padding: 20px 5px 10px 20px;*/ } </style> </head> <body> <div class="outer"> <div style="background-color: gold"> 听妈妈的话 </div> <div> 你是否有很多的问好 </div> </div> </body> </html> ### 7.外边距 我距离别人加点距离 ```html <!DOCTYPE html> 
<div style="background-color: red;height: 100px; margin-top: 40px"></div>


<a name="W7pI3"></a>
### 8.区域居中
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            width: 980px;
            height: 980px;
            background-color: lightblue;
            /*margin默认就会居中，前提把宽度设置*/
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="c1">
        小米商场
    </div>
</body>
</html>

案例：小米商场-顶部菜单

效果图
image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*这里必须用body作为，因为body就一个。margin 0 为消除边框*/
        body{
            margin: 0;
        }
        .header{
            /*!*header下所有的字体颜色为 #b0b0b0*!*/
            /*color: #b0b0b0;*/
            /*header的背景颜色为#333333*/
            background-color: #333333;

            /*margin-left: auto;*/
            /*width宽度不设置就是占满屏*/
            /*width: 1920px;*/
            /*margin-right: auto;*/
        }
        .container{
            /*顶部所占宽度为1200像素*/
            width: 1200px;
            /*左右宽度自适应，即居中*/
            margin-right: auto;
            margin-left: auto;
        }
        .header .menu{
            /*菜单左浮起*/
            float: left;
        }
        .header .account{
            /*右浮起*/
            float: right;
        }
        .header a{
            /*行高为40像素，可以撑起来，在子标签中定义高度，父标签可以不用定义，就把标签撑起来*/
            line-height: 40px;
            /*设置为行内+块级标签，因为a标签不可以设置默认宽度和高度等样式*/
            display: inline-block;
            /*字体宽度为12像素*/
            font-size: 12px;
            /*左外边距为10像素*/
            margin-right: 10px;
            /*a标签中的字体颜色为#b0b0b0*/
            color: #b0b0b0;
       }
    </style>
</head>
<body>
    <div class="header">
        <div class="container">
            <div class="menu">
                <a>小米商城</a>
                <a>MIUI</a>
                <a>loT</a>
                <a>云服务</a>
                <a>天星教科</a>
                <a>有品</a>
                <a>小米开放平台</a>
                <a>企业团购</a>
                <a>资质证照</a>
                <a>协议规则</a>
            </div>
            <div class="account">
                <a>登录</a>
                <a>注册</a>
                <a>消息通知</a>
            </div>
<!--            结束浮动，把标签样式撑起来，后面也不需要-->
            <div style="clear: both"></div>
        </div>
    </div>
</body>
</html>

总结

  • body标签，默认有一个边距，造成页面四周都有白色的间距。如何去除呢？ :::tips body{
    margin: 0;
    } :::

  • 文本居中，文本会在这个区域中居中 :::tips

    中国电信
    :::

  • 区域居中，自己要有宽度 + margin-left:auto;margin-right:auto :::tips .container{
    width: 980px;
    margin: 0px;
    } :::

  • 父亲没有高度或者没有宽度，被孩子支撑起来。

  • 父亲的高度和宽度，会限制孩子的高度和宽度，孩子高度和宽度不允许超过父亲。
  • 如果存在浮动，一定要记得加入

image.png

  • 关于布局，不知道如何下手

由外到内进行划分

  • image.png