python 学习总结5 前端学习
目标：
Html -掌握20个标签
CSS -掌握颜色位置
HTML
1、一套规则，浏览器认识的规则。
2、开发者：
学习Html规则
开发后台程序：
- 写Html文件（充当模板的作用） ******
- 数据库获取数据，然后替换到html文件的指定位置（Web框架）
3、本地测试
- 找到文件路径，直接浏览器打开
- pycharm打开测试
4、编写Html文件
- doctype对应关系
- html标签，标签内部可以写属性 ====> 只能有一个
- 注释： <!-- 注释的内容 -->
5、标签分类
- 自闭合标签
<meta charset="UTF-8">
- 主动闭合标签
title>老男孩</title>
6、
head标签中
- <meta -> 编码，跳转，刷新，关键字，描述，IE兼容,X-UA-Compatible是一种IE的兼容模式
<meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;" />
- title标签
- <link /> 搞图标，欠
- <style />欠
- <script> 欠
7、body标签
- 图标， 空格 >> < <
- p标签，段落
- br，换行
======== 小总结 =====
所有标签分为：
块级标签： div（白板），H系列（加大加粗），p标签（段落和段落之间有间距）
行内标签： span（白板）如果span中包括这Div则自动会换行
标签之间可以嵌套
标签存在的意义，css操作，js操作
ps:chorme审查元素的使用
- 定位
- 查看样式
- h系列
- div
- span
- input系列 + form标签
<form action="http://localhost:8888/index">在input的标签前加上
这个标签的话 就会使submit提交的数据提交到那个app.py中
例子：
<body>
<form action="http://localhost:8888/index" method="get"(还可以写 method="post")>
<input type="text" name="h1" />
<input type="password" name="h2" />
<input type="submit" name="h3" value="提交"/>
</form>
</body>
我们要知道get方式的时候是以url的方式传送数据的
而Post是直接将数据放在body中发送过去
input type='text' - name属性，value="赵凡"
input type='password' - name属性，value="赵凡"
input type='submit' - value='提交' 提交按钮，表单
input type='button' - value='登录' 按钮
input type='radio' - 单选框 value，checked="checked"，name属性（name相同则互斥）
input type='checkbox' - 复选框 value, checked="checked"，name属性（批量获取数据）
input type='file' - 依赖form表单的一个属性 enctype="multipart/form-data"
input type='rest' - 重置
<textarea >默认值</textarea> - name属性
select标签 - name,内部option value, 提交到后台，size，multiple
- a标签
- 跳转
<a href="https://hao.360.cn/?360safe"> <div> 东子 </div> </a>
根据a标签中的内容进行网页跳转
- 锚 href='#某个标签的ID' 标签的ID不允许重复
<body>
<a href="#3">第一节</a>
<a href="#4">第二节</a>
<a>第三节</a>
<div id="3" style="height:600px;">第一节内容</div>
<div id="4" style="height:600px;">第二节内容</div>
</body>
- img
src 写上文件的路径
alt 当没有图片时显示的提示
title 图片的标题
style 图片的大小
<body>
<a href="http://www.oldboyedu.com">
<img src="1.jpg" title="大美女" style="height: 200px;width: 200px;" alt="美女">
</a>
</body>
- 列表
ul 选择
li 写上选的项目
ol
li
这个组合就是将点变成了有序的数字
dl
dt 作为标题
dd作为内容
用法 ：
<ul>
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
</ul>
<ol>
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
</ol>
<dl>
<dt>ttt</dt>
<dd>ddd</dd>
<dd>ddd</dd>
<dd>ddd</dd>
<dt>ttt</dt>
<dd>ddd</dd>
<dd>ddd</dd>
<dd>ddd</dd>
</dl>
- 表格
table
thead
tr
th
tbody
tr
td
colspan = '' 列合并
rowspan = '' 行合并
<table border="1">
<thead> <tr> <th>表头1</th> <th>表头1</th> <th>表头1</th> <th>表头1</th> </tr> </thead> <tbody> <tr> <td>1</td> <td colspan="3">1</td> </tr> <tr> <td rowspan="2">1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> </tbody> </table>
- label
用于点击文件，使得关联的标签获取光标
- fieldset 不常用不过是建立了一种格式
<body>
<fieldset>
<legend>登录</legend>
<!--为username写的标签用for -->
<label for="username">用户名：</label>
<input id="username" type="text" name="user" />
<br />
<label for="pwd">密码：</label>
<input id="pwd" type="text" name="user" />
</fieldset>
</body>
CSS
在标签上设置style属性：
background-color: #2459a2;
height: 48px;
...
编写css样式：
1. 标签的style属性
2. 写在head里面 style标签中写样式
- id选择区
#i1{
background-color: #2459a2;
height: 48px;
}
- class选择器 ******
.名称{
...
}
<标签 class='名称'> </标签>
- 标签选择器
div{
...
}
所有div设置上此样式
- 层级选择器（空格） ******
.c1 .c2 div{
}
- 组合选择器（逗号） ******
#c1,.c2,div{
}
- 属性选择器 ******
对选择到的标签再通过属性再进行一次筛选
.c1[n='alex']{ width:100px; height:200px; }
PS:
- 优先级，标签上style优先，编写顺序，就近原则
2.5 css样式也可以写在单独文件中
<link rel="stylesheet" href="filename.css" />
3、注释
/* */
4、边框
- 宽度，样式，颜色 (border: 4px dotted red;)
- border: 2px solid #e8e8e8;(我们也可以单独设置边框的上下左右）
5、
height， 高度 百分比
width， 宽度 像素，百分比
text-align:ceter/left/right 水平方向居中
line-height，垂直方向根据标签高度
color、 字体颜色
font-size、 字体大小
font-weight 字体加粗
6、float
块级标签也可以堆叠
我们呢：
<div style="clear: both;"></div>
clear:both 是用于清除浮动
比如
<div style="clear:both">
<div style="float:left"></div>
<div style="float:right"></div>
</div>
解释下
1个框框里有2个框框，一个在左边 一个在右边，然后把这个2个框框套住的这个外围框框就需要clear:both
7、display
display: none; -- 让标签消失
display: inline;
display: block;
display: inline-block;
具有inline,默认自己有多少占多少
具有block，可以设置无法设置高度，宽度，padding margin
******
行内标签：无法设置高度，宽度，padding margin
块级标签：设置高度，宽度，padding margin
8.margin:0 auto 可是这一区域的标签趋于中间 margin 0 0 0; 分别对应与top 与Left的边距，第三个不知道
9.padding 通过增加或减少自身来调整内容
10.text-indent ：可以调整文字内容与边界的距离 注意margin 或padding之后 要以之后的边界开始计算距离
11.一下是我写的淘宝网页的静态界面 时间有限 重复的地方不在写 第一次写，希望以后日益更正，有很多细致上的东西还写不好 希望自己努力继续更改
效果图：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模仿淘宝网页设计</title> <link rel="stylesheet" href="Basecolor.css" /> <style> .c1 { font-size:12px; color:#F22E00; } .c2 { font-size:21px; color:#F40; line-height: 45px; margin-right: 5px; } </style> </head> <body style="margin:0"> <div class="toplogin" > <div style="width: 980px;margin: 0 auto;"> <div class="c2" style="float:left;text-indent:-5em">淘宝网</div> <a class="c1" style="float:left;text-indent:-2em ">亲，请登录</a> <a style="float:left;color:gray; font-size: small;text-indent:1em">免费注册</a> <div style="float:right;color:gray;font-size: small;text-indent:3em ;">联系客服</div> <div style="float:right;color:gray;font-size: small;">网址导航</div> </div> </div> <div class="toptitle"> <!--我们要将这个url设置为一个背景--> <div style="margin:25px 40px 0;"> <div style="float:left; width:25%; height: 73px; background: url(//img.alicdn.com/tps/TB1YZkPLpXXXXbzXXXXXXXXXXXX-213-57.png) no-repeat; background-position:1px 5px;"> </div> </div> <div style="float:left; margin:15px 0px 0;"> <input type="text" name="t1" style="width:720px;height: 40px; text-align:left;border: 1px solid red;" > <input type="submit" name="s1" value="搜索" style="width:90px;height: 45px; text-align:center ;border: 1px solid red;background-color: #F22E00;" > </div> </div> <div class="toptitl2"> <!--我们要注意Margin移动的是整个模块的相对边界位置--> <div style="margin:-12px 0 0;line-height:45px;" > <div style="float:left ;text-indent:4em;" >首页</div> <div style="float:left ;text-indent:6em;" >腔调-风格</div> <div style="float:right ;text-indent:-10em;" >女装帮派</div> </div> </div> <div style="height: 40px;background-color: white;"> <div style="margin:10px 55px 0;line-height:25px;height:10px;font-size:12px; "> 所有分类 > 女装/女士精品> </div> </div> <div style="height: 47px;background-color: white;margin:-5px 0 0"> <div style="margin:0 50px 0;height:47px;width:800px;background-color: #f5f5f5;border: 2px solid #e8e8e8;"> <a href="" style=";color:#F22E00;float:left;line-height: 45px;text-indent:1em;background-color:white ;text-align:left; ;">综合排序</a> <div style="float:left ;text-indent:2em;line-height: 45px;"> 人气</div> <div style="float:left;text-indent:2em;line-height: 45px;"> 销量</div> <div style="float:left;text-indent:2em;line-height: 45px;"> 价格</div> <div style="float:left;text-indent:2em;line-height: 45px;"> 信用</div> <input type="text" style="float:right;width:40px;margin:15px 200px 0px; " > <input type="text" style="float:right;width:40px;margin:-22px 130px 0px; " > </div> </div> <div style="width: 850px;height:1000px;border: 1px solid #e8e8e8;;margin:10px 50px 0;float:left; "> <div style="width: 190px;height:300px;border: 1px solid #e8e8e8;;float: left;margin:10px 0 0;"> <a href="http://www.oldboyedu.com"> <img src="1.jpg" title="裤子1" style="height: 200px;width: 190px;" alt="裤子1"> </a> <div style="color:#F40;font-size:18px;font-weight: 700;text-indent:1em;float:left;">¥45.00</div> <div style="color:gray;font-size:10px;font-weight: 700;float:right;margin:5px 12px 0;">0人付款</div> <div style="font-size:12px;float:left">春秋运动裤白条校服裤男女初中高中学生裤松紧裤青少年休闲裤团购</div> </div> <div style="width: 190px;height:300px;border: 1px solid #e8e8e8;;float: left;margin:10px 20px 0;"> <a href="http://www.oldboyedu.com"> <img src="2.jpg" title="裤子2" style="height: 200px;width: 190px;" alt="裤子2"> </a> <div style="color:#F40;font-size:18px;font-weight: 700;text-indent:1em;float:left;">¥45.00</div> <div style="color:gray;font-size:10px;font-weight: 700;float:right;margin:5px 12px 0;">0人付款</div> <div style="font-size:12px;float:left">春秋运动裤白条校服裤男女初中高中学生裤松紧裤青少年休闲裤团购</div> </div> <div style="width: 190px;height:300px;border: 1px solid #e8e8e8;;float: left;margin:10px 20px 0;"> <a href="http://www.oldboyedu.com"> <img src="3.jpg" title="裤子3" style="height: 200px;width: 190px;" alt="裤子3"> </a> <div style="color:#F40;font-size:18px;font-weight: 700;text-indent:1em;float:left;">¥45.00</div> <div style="color:gray;font-size:10px;font-weight: 700;float:right;margin:5px 12px 0;">0人付款</div> <div style="font-size:12px;float:left">春秋运动裤白条校服裤男女初中高中学生裤松紧裤青少年休闲裤团购</div> </div> <div style="width: 190px;height:300px;border: 1px solid #e8e8e8;;float: left;margin:10px 0 0;"> <a href="http://www.oldboyedu.com"> <img src="4.jpg" title="裤子4" style="height: 200px;width: 190px;" alt="裤子4"> </a> <div style="color:#F40;font-size:18px;font-weight: 700;text-indent:1em;float:left;">¥45.00</div> <div style="color:gray;font-size:10px;font-weight: 700;float:right;margin:5px 12px 0;">0人付款</div> <div style="font-size:12px;float:left">春秋运动裤白条校服裤男女初中高中学生裤松紧裤青少年休闲裤团购</div> </div> <div style="width: 190px;height:300px;border: 1px solid #e8e8e8;;float: left;margin:10px 0 0;"> <a href="http://www.oldboyedu.com"> <img src="5.jpg" title="裤子5" style="height: 200px;width: 190px;" alt="裤子5"> </a> <div style="color:#F40;font-size:18px;font-weight: 700;text-indent:1em;float:left;">¥45.00</div> <div style="color:gray;font-size:10px;font-weight: 700;float:right;margin:5px 12px 0;">0人付款</div> <div style="font-size:12px;float:left">春秋运动裤白条校服裤男女初中高中学生裤松紧裤青少年休闲裤团购</div> </div> <div style="width: 190px;height:300px;border: 1px solid #e8e8e8;;float: left;margin:10px 20px 0;"> <a href="http://www.oldboyedu.com"> <img src="6.jpg" title="裤子6" style="height: 200px;width: 190px;" alt="裤子6"> </a> <div style="color:#F40;font-size:18px;font-weight: 700;text-indent:1em;float:left;">¥45.00</div> <div style="color:gray;font-size:10px;font-weight: 700;float:right;margin:5px 12px 0;">0人付款</div> <div style="font-size:12px;float:left">春秋运动裤白条校服裤男女初中高中学生裤松紧裤青少年休闲裤团购</div> </div> <div style="width: 190px;height:300px;border: 1px solid #e8e8e8;;float: left;margin:10px 20px 0;"> <a href="http://www.oldboyedu.com"> <img src="7.jpg" title="裤子7" style="height: 200px;width: 190px;" alt="裤子7"> </a> <div style="color:#F40;font-size:18px;font-weight: 700;text-indent:1em;float:left;">¥45.00</div> <div style="color:gray;font-size:10px;font-weight: 700;float:right;margin:5px 12px 0;">0人付款</div> <div style="font-size:12px;float:left">春秋运动裤白条校服裤男女初中高中学生裤松紧裤青少年休闲裤团购</div> </div> <div style="clear: both;"></div> </div> <div style="width:300px;height:800px;border: 1px solid #e8e8e8;;float:left;margin:10px 0 0;"> <div style="font-size:20px ;color:gray;text-indent:1em;margin :10px 0 0;"> 掌柜热卖 </div> <div style="width: 230px;height:200px;border: 1px solid #e8e8e8;;float: left;margin:10px 20px 0;"> <a href="http://www.oldboyedu.com"> <img src="7.jpg" title="裤子7" style="height: 200px;width:230px;" alt="裤子7"> </a> <div style="color:#F40;font-size:18px;font-weight: 700;text-indent:1em;float:left;">¥45.00</div> <div style="color:gray;font-size:10px;font-weight: 700;float:right;margin:5px 12px 0;">0人付款</div> </div> <div style="width: 230px;height:200px;border: 1px solid #e8e8e8;;float: left;margin:40px 20px 0;"> <a href="http://www.oldboyedu.com"> <img src="6.jpg" title="裤子6" style="height: 200px;width:230px;" alt="裤子6"> </a> <div style="color:#F40;font-size:18px;font-weight: 700;text-indent:1em;float:left;">¥45.00</div> <div style="color:gray;font-size:10px;font-weight: 700;float:right;margin:5px 12px 0;">0人付款</div> </div> </div> </body> </html>
