web框架之HTML5前端开发(python3入门)

一、简介

前端： html5+css+javaScript(js+jq+bs)
h5 不擅长 应用程序
小程序是基于h5的封装产物

html(html有三个载体：pc端浏览器，移动端浏览器，移动端app)
*** 标签
*** 层级关系


css
*** 样式
*** 选择器 (通过css来控制html，就是用选择器来建立这个控制的桥梁)
*** 布局

二、了解h5

标签：被<>包裹，以字母开头，可以结合合法字符(-、数字)，能被浏览器解析的符号，被称之为标签
指令：<!> => <!doctype>规定文档类型，<!-- 注释 -->
转义字符：&nbsp; 空格转义,基本不用转义字符(http://tool.oschina.net/commons?type=2)
数据：文本、图片、视频。。。

1 分析第一个h5页面

<!--文档类型的指令：html=》以h5语法来书写的html文件-->
    <!DOCTYPE html>

    <!--html：页面根标签，他只有一个head 和 一个 body-->

    <!--head:头，样式、设置信息、功能(js脚本)-->
    <head>
        <meta charset="UTF-8">
        <title>第一个页面</title>

    </head>

    <!--自定义创建的abc标签 被强行塞到了body里面-->
    <abc>ABC</abc>

    <!--body：身体，这个页面中所有要展现的内容，都要写在body里面-->
    <body>


    </body>
    </html>

View Code

2 常用标签

### h1~h6，p、span、i、b 标签建议h1代表页面标题，在同一个页面中只出现一次
### a(herf|targer) img(src|alt|title) hr|br
### ul>li  table(了解) form(表单)

常用标签

3 单双标签

有头有尾的就是双标签
img，input等都是单标签
所有的标签 都是有结束标志,
    单标签，默认省略了 "/"，建议省略
    双标签，如果省略了结束标志的话，系统会默认按系统自行判断进行添加，开发过程中不建议省略
单标签：主功能（一般不需要内容）
双标签：主内容（要显示字标签，及内容）

单双标签

4 层级关系

<!--案例一-->

<!--div标签是最常用的标签，用于页面结构搭建-->
<!--在出现class和name 优先选择class-->

<div class="wrapper">
    <!--标题与搜索-->
    <div class="header"></div>

    <!--导航栏-->
    <div class="navigation"></div>

    <!--内容-->
    <div class="body">
        <!--.left+center+.right-->
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>

    <!--尾部-->
    <div class="foot"></div>


    <!--案例二-->
    <div class="idea">
        <h3></h3>
        <p></p>
        <p></p>
        <p></p>
        <p>
            <b></b>
        </p>

    </div>

    <!--案例三-->
    <div class="left">
        <div class="list">
            <h3></h3>
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>

        <div class="list">
            <h3></h3>
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>

        <div class="list">
            <h3></h3>
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>


    </div>


</div>

层级关系

5 css

# 选择器: html页面标签的某种名字, 用来将html与css建立起链接, 就可以通过css来控制html样式
# 作用域: {}, 写在作用域中的样式块就是控制作用域前名字(选择器)的
# 样式块: 样式语句们

css

6 css引入

# 1.行间式: 将css样式直接书写在标签style属性中
# 优点: 直观(对样式操作简单粗暴)  缺点: 可读性极差, 复用性差

# 2.内联式: 将css样式书写在style标签中
# 优点: 可读性强, 复用性强  缺点: 延展性(团队开发)

# 3.外联式: 将css样式书写在css文件中, 用html文件中link标签将两个文件建立起联系
# 优点: 适合团队开发

css引入

7 基础选择器

通配: *
标签选择器: 标签名 div
class选择器: .box
id选择器: #box

# 基础选择器优先级: !important > 行间式 > id > class > 标签 > 通配

基础选择器

8 高级选择器

# 群组选择器 ，隔开 控制多个
div, .div , #div{
    
}

# 后代选择器
.sup .sub{
    # sup可以为.sub的父亲 也可以为父辈
}

子代
.sup > ,.sub{
    #.sup 只能为.sub的父亲
}


#兄弟选择器
.div1 ~ .div2 {
    # .div2 在.div1的兄弟 ， .div1是修饰词， 。div1 与.div2之间可以有其他兄弟
}

.div1 + .div2 {
    # .div2 在.div1的兄弟 ， .div1是修饰词， 。div1 与.div2之间不可以有其他兄弟
}

#交叉选择器
h2.h{
    # 是h2标签且有一个class名为h
}

.h1.h2.h3{
    # 有一个标签有三个类名
}
<div class="h1 h2 h3"></div>

高级选择器

9 高级选择器优先级

1 高级选择器的优先级由个数决定
2 高级选择器的优先级与类别无关(后代、子代、兄弟、相邻等 同等对待)
3 id无限大于class，id无限大于标签
4 上方结果之后优先级还是一致，则跟顺序有关

10 伪类选择器

    :nth-child()
    /* 先确定位置, 再匹配类型*/
    /*li:nth-child(3), 先将所有结构下的第3个标签找出来, 再匹配选择器的类型*/
    /*li:nth-child(2n), 匹配偶数位的li*/
    /*li:nth-child(2n - 1), 匹配奇数位的li*/
    /*li:nth-child(3n), 匹配3的倍数的li*/
    li:nth-child(3) {
        color: orange;
    }

伪类选择器

.box {
    width: 200px;
    height: 200px;
    background-color: orange;
    /*过度(实现动画): 过度时间 延迟时间(省略) 动画属性(可省略默认all) 过度曲线(可省略)*/
    transition: 1s all cubic-bezier(0.38, 1.65, 0, -0.97);
}
.box:hover {
    width: 400px;
    height: 400px;
    background-color: red;
}

鼠标悬浮伪类

11 字体操作

.box {
    /* 字重 大小/行高 字族 */
    font: 900 30px/200px "STSong";
    /*字体水平居中方式*/
    text-align: center;
    /*字体颜色*/
    color: red;
}

字体操作

12 背景图片操作

background-color: orange;
/*加载背景图片*/
background-image: url("img/001.png");
/*平铺: repeat | repeat-x | repeat-y | no-repeat*/
background-repeat: no-repeat;
/*背景尺寸: 会缩放背景图*/
background-size: 100px 200px;
/*背景定位: x轴左右偏移 y轴左右偏移*/
background-position: -10px 20px;

background: 颜色 url("图片地址") no-repeat 10px -20px;
精灵图在显示区域向右移动10px向上移动20px

背景图片操作

13 浮动布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动布局</title>
    <style>

        .box {
            width: 200px;
            height: 80px;
            background-color: brown;
            border: 1px solid black;

            /*浮动布局*/
            /*子级一但浮动，就不再撑开父级高度*/
            /*浮动的元素会不完全脱离文档流*/
            /*脱离文档流：高于原文档流内盒子的显示层次*/
            /*不完全：浮动有一个清浮动操作，可以让子级重新撑开父级的高度*/
            /*清浮动：可以让子级重新撑开父级高度*/
            float: left;

        }


        /*子浮动，父级清浮动，父的兄弟显示区域正常*/
        .sup:after{
            content: '';
            display: block;
            clear: both;
        }

        .ele {
            width: 200px;
            height: 80px;
            background-color: red;
        }

        /*border: 1px solid black;*/


    </style>


</head>
<body>
<div class="sup">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
</div>


<div class="ele"></div>


</body>
</html>

浮动布局介绍

  1 css:
  2 /*reset操作：清楚系统默认样式的操作*/
  3 
  4 body{
  5     margin: 0;
  6 }
  7 
  8 
  9 a{
 10     /*统一a标签的字体颜色*/
 11     color: black;
 12     /*清除下划线*/
 13     text-decoration: none;
 14 
 15 }
 16 
 17 
 18 
 19 ul{
 20     list-style: none;
 21     margin: 0;
 22     padding: 0;
 23 
 24 }
 25 
 26 
 27 
 28 #########################
 29 
 30 
 31 h5:
 32 <!DOCTYPE html>
 33 <html lang="en">
 34 <head>
 35     <meta charset="UTF-8">
 36     <title>浮动布局案例</title>
 37 
 38     <link rel="stylesheet" href="./css/reset.css">
 39     <style>
 40         .header {
 41             width: 1210px;
 42             height: 100px;
 43             background-color: orange;
 44             /*margin-left: auto;*/
 45             /*margin-right: auto;*/
 46             /*上下为0 右左为auto*/
 47             margin: 0 auto;
 48         }
 49 
 50         .nav {
 51             /*父级的宽度决定自己一排排列的个数*/
 52             width: 1210px;
 53             margin: 0 auto;
 54 
 55         }
 56 
 57         /*父标签清浮动：高度需要子级撑开，自己可以设置高度，但不一定准确*/
 58         .nav:after {
 59             content: '';
 60             display: block;
 61             clear: both;
 62         }
 63 
 64         /*子标签浮动：同行显示*/
 65         .nav li {
 66             width: 200px;
 67             height: 48px;
 68             background-color: brown;
 69             float: left;
 70 
 71         }
 72 
 73         .body {
 74             width: 1210px;
 75             margin: 0 auto;
 76             background-color: cyan;
 77             height: 100px;
 78         }
 79 
 80         .nav li:nth-child(1) {
 81             width: 155px;
 82             background: url("./img/bg.png") no-repeat;
 83         }
 84 
 85         .nav li:nth-child(2) {
 86             width: 157px;
 87             background: url("./img/bg.png") no-repeat -155px 0;
 88 
 89         }
 90 
 91         .nav li:nth-child(3) {
 92             width: 167px;
 93             background: url("./img/bg.png") no-repeat calc(-155px - 157px) 0;
 94 
 95         }
 96 
 97         .nav li:nth-child(4) {
 98             width: 158px;
 99             background: url("./img/bg.png") no-repeat calc(-155px - 157px - 167px) 0;
100 
101         }
102 
103         .nav li:nth-child(5) {
104             width: 101px;
105             background: url("./img/bg.png") no-repeat calc(-155px - 157px - 167px - 158px) 0;
106 
107         }
108 
109         .nav li:nth-child(6) {
110             width: 185px;
111             background: url("./img/bg.png") no-repeat calc(-155px - 157px - 167px - 158px - 101px) 0;
112 
113         }
114 
115         .nav li:nth-child(7) {
116             width: 177px;
117             background: url("./img/bg.png") no-repeat calc(-155px - 157px - 167px - 158px - 101px - 185px) 0;
118 
119         }
120 
121         .nav li:hover {
122             background-position-y: -48px;
123         }
124 
125 
126     </style>
127 
128 
129 </head>
130 <body>
131 
132 
133 <div class="header"></div>
134 
135 
136 <ul class="nav">
137     <li></li>
138     <li></li>
139     <li></li>
140     <li></li>
141     <li></li>
142     <li></li>
143     <li></li>
144 </ul>
145 
146 <div class="body"></div>
147 
148 
149 </body>
150 </html>

浮动布局案例

14 盒模型

margin: 外边距,控制居上 margin-top 居左 margin-left 的距离
border: 边框 1px solid black
padding: 内边距, 将内容"内挤", 本质在content与border区域之间添加了留白区域
content: width * height

盒模型边框设定

15 浮动

'''
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

# 浮动: 让原来一行一行排列显示的标签 同行显示
li {
    float: left|right;
}
# 清浮动: 让父级适应子级所需的高度
ul:after {
    content: "";
    display: block;
    clear: both;
}


<a></a>
# a默认为inline,inline不支持宽高,要设置a的宽高,必须改变a的显示方式为block
a {
    display: block;
}
'''

浮动

16 reset重置css系统默认样式

body, h1, h2, h3, ul {
    margin: 0;
    padding: 0;
}
ul {
    /*列表样式*/
    list-style: none;
}
a {
    color: black;
    /*字体划线*/
    text-decoration: none;
}

reset

17 定位布局

'''
# 参照父级定位: 父相子绝
# 注意: 父子都必须设置自身宽高
.sup {
    position: relative;
}
.sub {
    position: absolute;
    /*通过 top|left|right|bottom 四个方位参照父级的四边进行位置调整*/
    /*上下取上 左右取左*/
    
    /*通过z-index修改显示层级(图层发生重叠了)*/
}

# 参照窗口定位: 固定定位
.dc {
    position: fixed;
    /*通过 top|left|right|bottom 四个方位参照父级的窗口进行位置调整*/
    /*上下取上 左右取左*/
    
    /*通过z-index修改显示层级(图层发生重叠了)*/
}

'''

定位布局，父相子绝

web框架之HTML5前端开发(python3入门)

推荐阅读