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

洒一地阳光 發表於 2019-7-11 15:36:00

一、简介
<div class="cnblogs_code">
<pre>前端： html5+css+javaScript(js+jq+bs)
h5 不擅长应用程序
小程序是基于h5的封装产物</pre>
</div>
<div class="cnblogs_code">
<pre>html(html有三个载体：pc端浏览器，移动端浏览器，移动端app)
*** 标签
*** 层级关系

css
*** 样式
*** 选择器 (通过css来控制html，就是用选择器来建立这个控制的桥梁)
*** 布局</pre>
</div>
 
二、了解h5
<div class="cnblogs_code">
<pre>标签：被<>包裹，以字母开头，可以结合合法字符(-、数字)，能被浏览器解析的符号，被称之为标签
指令：<!> => <!doctype>规定文档类型，
转义字符：&nbsp; 空格转义,基本不用转义字符(http://tool.oschina.net/commons?type=2)
数据：文本、图片、视频。。。</pre>
</div>
1 分析第一个h5页面
<div class="cnblogs_code"><img id="code_img_closed_e79824c0-fe28-4add-9422-1c8ee63970be" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_e79824c0-fe28-4add-9422-1c8ee63970be" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_e79824c0-fe28-4add-9422-1c8ee63970be" class="cnblogs_code_hide">
<pre>
<!DOCTYPE html>




<head>
 <meta charset="UTF-8">
 <title>第一个页面</title>

</head>


<abc>ABC</abc>


<body>

</body>
</html></pre>
</div>
View Code</div>
 
2 常用标签
<div class="cnblogs_code"><img id="code_img_closed_4b849637-ad51-4db4-8b59-dbbd83ed58bf" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_4b849637-ad51-4db4-8b59-dbbd83ed58bf" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_4b849637-ad51-4db4-8b59-dbbd83ed58bf" class="cnblogs_code_hide">
<pre>### h1~h6，p、span、i、b 标签建议h1代表页面标题，在同一个页面中只出现一次
### a(herf|targer) img(src|alt|title) hr|br
### ul>litable(了解) form(表单)</pre>
</div>
常用标签</div>
 
3 单双标签
<div class="cnblogs_code"><img id="code_img_closed_21c07394-c587-41f7-a290-a16136f9912a" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_21c07394-c587-41f7-a290-a16136f9912a" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_21c07394-c587-41f7-a290-a16136f9912a" class="cnblogs_code_hide">
<pre>有头有尾的就是双标签
img，input等都是单标签
所有的标签都是有结束标志,
单标签，默认省略了 "/"，建议省略
双标签，如果省略了结束标志的话，系统会默认按系统自行判断进行添加，开发过程中不建议省略
单标签：主功能（一般不需要内容）
双标签：主内容（要显示字标签，及内容）</pre>
</div>
单双标签</div>
 
4 层级关系
<div class="cnblogs_code"><img id="code_img_closed_436fec42-e6ff-4398-aa4a-22fe0fbcc420" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_436fec42-e6ff-4398-aa4a-22fe0fbcc420" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_436fec42-e6ff-4398-aa4a-22fe0fbcc420" class="cnblogs_code_hide">
<pre>




<div class="wrapper">

<div class="header"></div>


<div class="navigation"></div>


<div class="body">
 
 <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></pre>
</div>
层级关系</div>
 
5 css
<div class="cnblogs_code"><img id="code_img_closed_c3c06b37-a756-4143-bcc2-13da818c318d" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_c3c06b37-a756-4143-bcc2-13da818c318d" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_c3c06b37-a756-4143-bcc2-13da818c318d" class="cnblogs_code_hide">
<pre># 选择器: html页面标签的某种名字, 用来将html与css建立起链接, 就可以通过css来控制html样式
# 作用域: {}, 写在作用域中的样式块就是控制作用域前名字(选择器)的
# 样式块: 样式语句们</pre>
</div>
css</div>
 
6 css引入
<div class="cnblogs_code"><img id="code_img_closed_cbd81140-88e3-455a-82b0-8f953700d31d" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_cbd81140-88e3-455a-82b0-8f953700d31d" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_cbd81140-88e3-455a-82b0-8f953700d31d" class="cnblogs_code_hide">
<pre># 1.行间式: 将css样式直接书写在标签style属性中
# 优点: 直观(对样式操作简单粗暴)缺点: 可读性极差, 复用性差

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

# 3.外联式: 将css样式书写在css文件中, 用html文件中link标签将两个文件建立起联系
# 优点: 适合团队开发</pre>
</div>
css引入</div>
 
7 基础选择器
<div class="cnblogs_code"><img id="code_img_closed_25aee1a1-669e-4c7a-9b5e-5d3bd673addd" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_25aee1a1-669e-4c7a-9b5e-5d3bd673addd" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_25aee1a1-669e-4c7a-9b5e-5d3bd673addd" class="cnblogs_code_hide">
<pre>通配: *
标签选择器: 标签名 div
class选择器: .box
id选择器: #box

# 基础选择器优先级: !important > 行间式 > id > class > 标签 > 通配</pre>
</div>
基础选择器</div>
 
8 高级选择器
<div class="cnblogs_code"><img id="code_img_closed_9a73dd0b-69f3-499d-8724-3134926d2aa4" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_9a73dd0b-69f3-499d-8724-3134926d2aa4" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_9a73dd0b-69f3-499d-8724-3134926d2aa4" class="cnblogs_code_hide">
<pre># 群组选择器，隔开控制多个
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></pre>
</div>
高级选择器</div>
 
9 高级选择器优先级
<div class="cnblogs_code">
<pre>1 高级选择器的优先级由个数决定
2 高级选择器的优先级与类别无关(后代、子代、兄弟、相邻等同等对待)
3 id无限大于class，id无限大于标签
4 上方结果之后优先级还是一致，则跟顺序有关</pre>
</div>
 
10 伪类选择器
<div class="cnblogs_code"><img id="code_img_closed_6e3e2ca1-920b-4456-9dfe-350fe5ef6894" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_6e3e2ca1-920b-4456-9dfe-350fe5ef6894" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_6e3e2ca1-920b-4456-9dfe-350fe5ef6894" class="cnblogs_code_hide">
<pre> :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;
}</pre>
</div>
伪类选择器</div>
<div class="cnblogs_code"><img id="code_img_closed_a481f687-5d6f-49f2-bb54-2c38143b8ed7" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_a481f687-5d6f-49f2-bb54-2c38143b8ed7" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_a481f687-5d6f-49f2-bb54-2c38143b8ed7" class="cnblogs_code_hide">
<pre>.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;
}</pre>
</div>
鼠标悬浮伪类</div>
 
11 字体操作
<div class="cnblogs_code"><img id="code_img_closed_4bec8df8-7c00-420a-8d21-5b3cfc55ac1f" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_4bec8df8-7c00-420a-8d21-5b3cfc55ac1f" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_4bec8df8-7c00-420a-8d21-5b3cfc55ac1f" class="cnblogs_code_hide">
<pre>.box {
/* 字重大小/行高字族 */
font: 900 30px/200px "STSong";
/*字体水平居中方式*/
text-align: center;
/*字体颜色*/
color: red;
}</pre>
</div>
字体操作</div>
 
12 背景图片操作
<div class="cnblogs_code"><img id="code_img_closed_cd5a3297-76e8-4ada-b3b2-cd349293c7ff" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_cd5a3297-76e8-4ada-b3b2-cd349293c7ff" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_cd5a3297-76e8-4ada-b3b2-cd349293c7ff" class="cnblogs_code_hide">
<pre>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</pre>
</div>
背景图片操作</div>
 
13 浮动布局
<div class="cnblogs_code"><img id="code_img_closed_6b907b27-44fd-4b06-9c2f-4d459dfeae9c" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_6b907b27-44fd-4b06-9c2f-4d459dfeae9c" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_6b907b27-44fd-4b06-9c2f-4d459dfeae9c" class="cnblogs_code_hide">
<pre><!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></pre>
</div>
浮动布局介绍</div>
<div class="cnblogs_code"><img id="code_img_closed_08caa82d-6aaf-44f1-8fa1-ac8260217437" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_08caa82d-6aaf-44f1-8fa1-ac8260217437" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_08caa82d-6aaf-44f1-8fa1-ac8260217437" class="cnblogs_code_hide">
<pre>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></pre>
</div>
浮动布局案例</div>
 
14 盒模型
<div class="cnblogs_code"><img id="code_img_closed_c5c5f4e5-5b60-4a93-83e5-2ba81b9f7aee" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_c5c5f4e5-5b60-4a93-83e5-2ba81b9f7aee" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_c5c5f4e5-5b60-4a93-83e5-2ba81b9f7aee" class="cnblogs_code_hide">
<pre>margin: 外边距,控制居上 margin-top 居左 margin-left 的距离
border: 边框 1px solid black
padding: 内边距, 将内容"内挤", 本质在content与border区域之间添加了留白区域
content: width * height</pre>
</div>
盒模型边框设定</div>
 
15 浮动
<div class="cnblogs_code"><img id="code_img_closed_63c2ccea-b0d8-4fdd-a070-a744f2f22976" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_63c2ccea-b0d8-4fdd-a070-a744f2f22976" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_63c2ccea-b0d8-4fdd-a070-a744f2f22976" class="cnblogs_code_hide">
<pre>'''
<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;
}
'''</pre>
</div>
浮动</div>
 
16 reset重置css系统默认样式
<div class="cnblogs_code"><img id="code_img_closed_fa4b17fd-42b9-4da4-a827-39bd6b22b971" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_fa4b17fd-42b9-4da4-a827-39bd6b22b971" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_fa4b17fd-42b9-4da4-a827-39bd6b22b971" class="cnblogs_code_hide">
<pre>body, h1, h2, h3, ul {
margin: 0;
padding: 0;
}
ul {
/*列表样式*/
list-style: none;
}
a {
color: black;
/*字体划线*/
text-decoration: none;
}</pre>
</div>
reset</div>
 
17 定位布局
<div class="cnblogs_code"><img id="code_img_closed_975b8850-5c6f-4180-842c-b2067f3222ba" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_975b8850-5c6f-4180-842c-b2067f3222ba" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_975b8850-5c6f-4180-842c-b2067f3222ba" class="cnblogs_code_hide">
<pre>'''
# 参照父级定位: 父相子绝
# 注意: 父子都必须设置自身宽高
.sup {
position: relative;
}
.sub {
position: absolute;
/*通过 top|left|right|bottom 四个方位参照父级的四边进行位置调整*/
/*上下取上左右取左*/

/*通过z-index修改显示层级(图层发生重叠了)*/
}

# 参照窗口定位: 固定定位
.dc {
position: fixed;
/*通过 top|left|right|bottom 四个方位参照父级的窗口进行位置调整*/
/*上下取上左右取左*/

/*通过z-index修改显示层级(图层发生重叠了)*/
}

'''</pre>
</div>
定位布局，父相子绝</div>
  
来源：https://www.cnblogs.com/lich1x/p/11166577.html

頁: [1]

琼殿技术论坛's Archiver

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