python学习-day14-前端之html、css
一、Html
1、本质：一个规则，浏览器能认识的规则
2、开发者：
学习Html规则
开发后台程序：
- 写Html文件（充当模板的作用） ******
- 数据库获取数据，然后替换到html文件的指定位置（Web框架）
3、html固定格式介绍
<!DOCTYPE html> <!-- #doctype指定统一规范：html -->
<html>
类似html这种格式（<html></html>），称之为标签，html标签，head标签等,标签内部可以写属性
<head lang="en"> #lang="en" 内部属性，
<meta charset="UTF-8"> #指定编码
<title></title>
</head>
<body>
</body>
</html>
html、head、body是固定格式，不可变
<!-- 注释内容-->，注释
4、标签
1、标签分类
标签可以嵌套
标签存在的意义：用于定位，通过标签+标签里面的属性（如id=“1”，name=“xx”等），定位后，用于css、js操作
- 自闭和标签 如：<meta> 后面不需要再跟个</meta>这样的叫做自闭和标签。为了方便查看自闭和标签需要在后面加个/,例: <meta />
- 手动闭合标签 如：<html> </html>
- 行内标签（内联标签）：所有标签占据一个行。
- 块级标签：无论内容有多少，一个标签就占据一行
2、head标签
1、meta标签
属性：编码、刷新、设置页面编码、关键词（针对搜索引擎），跳转，描述
- 页面编码（告诉浏览器是什么编码）：< meta http-equiv=“content-type” content=“text/html;charset=utf-8”>
- 刷新：<meta http-equiv="Refresh" content="10"> #每过10秒刷新一次
- 跳转：<meta http-equiv="Refresh" content="3;Url=http://www.baidu.com"> #过3秒跳转到www.baidu.com
- 关键词：<meta name="keywords" content="老男孩，博客，小游戏"> #设置关键词，用于爬虫爬，百度搜索引擎搜索这些关键词的时候，将页面（网站）加入搜索结果
- 描述：描述网站是做什么的
2、title标签
网页头部信息
3、link标签
- css
< link rel="stylesheet" type="text/css" href="css/common.css" >
- icon
< link rel="shortcut icon" href="image/favicon.ico"> #浏览器上的图片
3、body标签
1、各种符号
http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html
空格 大于号> 小于号<
<a href="www.baidu.com">lw </a> #俩个空格
2、p标签和br标签
p标签：段落，默认2个段落段落之间是有间距的
br标签：换行
<p>1111<br />ggggggg</p>
<p>123</p> #第一个段落（p标签）和第二个段落在浏览器打开的时候是有间隔的（2行），第一个段落加上br换行后，变成2行，但是没有间距，是属于一个段落
3、h标签
标题标签，h1到h6，从大到小
4、span标签
span标签，白板一个，什么属性都没有，行内标签，所有标签都是一行。通过css可使其变成任何特性的标签
5、div标签
块级标签，也是白板，没有任何属性，因为是块级标签，一个div就是一行，但是行直接没有间距，也是可以通过css使其变成任何标签
1、div标签中可以加属性，js通过属性查找div标签中的内容及css装饰
6、input输入框标签
get和post区别：
http请求的时候会有2部分，一部分是请求头，一部分是请求内容
get提交方式，请求的数据是在请求头中，也就是在url中可以直接看到，
post方式，请求的数据在请求内容中（body），url中看不到
input type=‘text’ name属性，value （默认）
input type=‘password’ name属性
input type=‘submit’ #提交表单
input type=‘button’ #按钮（可以通过css修饰属性）
input type=‘radio’ #单选框，value，check=“checked”，name属性（name相同则互斥）
input type=‘checkbox’ #复选框，value，checked=“checked” （默认就可以），name属性（批量获取数据）
input type=‘file’ #上传文件属性，依赖form表单中的一个属性，chctype=“multipart/form-data” #如果没有这个属性，则不会传输文件，
只有加了这个属性，点击上传的时候才会一点点的将文件传输过去
input type=‘rest’ #重置，点击后会重置输入（或选择）的东西
后台只能拿到input中的内容
<input type="text" /> #input标签的text属性：文本
<input type="password" /> #type属性：password属性，输入的时候是加密的
<input type="button" value="登录"/> #button，按钮，button仅仅是按钮，并不能提交
<input type="submit" value="登录"/> #submit，提交
注：仅仅是这样并不能提交，需要在外面加入一个form标签（表单），上面点击按钮，即将表单提交到form属性里面定义的地方（action）。
例：
<form action="http://localhost:8888/index">
<input type="text" name="user" /> #后台根据name属性“user”去匹配值，后台程序里面定义根据user获取（后台去获取什么值，这里就写什么）
<input type="text" email="email"/ >
<input type="password" password="pwd"/>
<input type="button" value="登录1"/>
<input type="submit" value="登录2"/>
</form>
例：
<body>
<form action="http://192.168.16.35:8888/index" method="POST">
<input type="text" name="user" / value=“默认”> #value后面的东西是默认值，就是打开浏览器在输入框中默认存在的值
<input type="text" name="email"/>
<input type="password" name="pwd"/>
<!--{'user': '用户输入的用户','email': 'xx', 'pwd': 'xx' }-->
<input type="button" value="登录1"/>
<input type="submit" value="登录2"/>
</form>
<br/>
<form>
<input type="text" />
<input type="password" />
<input type="button" value="登录1"/>
<input type="submit" value="登录2"/>
</form>
</body>
选框：
<form>
<div>
<p>请选择性别</p>
男：<input type="radio" name="gender" value="1"/> #name属性，互斥，就是只能选择一个，通过value判断选择的是哪一个
女: <input type="radio" name="gender" value="2"/> #name后面的东西可以随意，只有和后台程序中写的程序获取的一致即可
</div>
</form> <div>
<p>爱好</p>
篮球：<input type="checkbox" name="favor" value="1"/> #多选框，可以选择多个,还是通过value判断选择了哪些
足球：<input type="checkbox" name="favor" value="2"/>
台球：<input type="checkbox" name="favor" value="3"/>
网球：<input type="checkbox" name="favor" value="4"/> </div>
7、textarea
多行文本输入:
<div style="height: 50px;width: 100px;background-color: #dddddd"></div>
8、select标签
选择标签，下拉框选择
<select name="city"size="3" multiple="multiple"> #提交到后台后根据name（city）获取，size：显示多少，默认显示一个，即size=1；multiple：多选（可以选择多个） <optgroup label="中国城市"> #optgroup分组：下面的选项在这个分组中，分组不能选，只能显示
<option value="1">北京</option> #根据value获取选择的是哪个
<option value="2">河北</option>
<option value="3" selected="selected">南京</option> #selectd默认选择哪一个
</optgroup>
</select>
9、a标签
跳转
<a href="http://www.baidu.com">百度</a> #href 超链接，必须加http，否则出错
<a href="http://www.baidu.com" target="_blank">百度</a> #target="_blank"表示在新的标签页打开
锚：
<a href="#i1">第一章</a> -- #id和下面的id对应
<a href="#i2">第二章</a>
<a href="#i3">第三章</a>
<div id="i1">第一章的内容</div>
<div id="i2">第二章的内容</div>
<div id="i3">第三章的内容</div> 注：锚：当一个页面很长的时候，在点击第一章的时候会跳转到第一章的内容处；
10、img标签
图片标签
<img src="1.jpg" style="height: 200px;width: 200px"> #--src后面直接跟图片的路径，style后面可以设置图片的尺寸！
<img src="1.jpg" title="博客园" style="height: 200px;width: 200px" alt="啦啦图">
注：title：将鼠标放到图片上方时将出现文字：博客园
alt：当这张图片不存在的时候，图片位置显示文字：啦啦图。
点击图片跳转，可以将img标签放到a标签里面
<a href="http://www.xxx.com/1.jpg">
<img src="1.jpg" style="height: 200px;width: 200px">
</a>
可以点击图片，查看这张图片
11、列表--ul，ol，dl
不常用，一般通过css改造
代码、效果：
<ul> #ul、ol和li对应，配对的
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
<ol>
<li>test4</li>
<li>test5</li>
<li>test6</li>
</ol>
<dl>
<dt>www</dt>
<dd>test7</dd>
<dd>test8</dd>
<dt>www2</dt>
<dd>test9</dd>
<dd>test10</dd>
</dl>
效果：
12、table表格标签
tr表示行
td表示列
<table border="1"> #border表示加上边框，不加则没有边框
<tr>
<td>第一行，第一列</td>
<td>第一行，第二列</td>
<td>第一行，第三列</td>
</tr>
<tr>
<td>第二行，第一列</td>
<td>第二行，第二列</td>
<td>第二行，第三列</td>
</tr>
</table>
上面代码效果：
表头都单独的标签
<table border="1">
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.1.1.1</td>
<td>80</td>
<td>查看详细</td>
</tr>
<tr>
<td>2.2.2.2</td>
<td>80</td>
<td>
<a href="s1.html">查看详细</a> #可以点击查看详细
</td>
</tr>
</tbody>
</table>
合并单元格：
<table border="1">
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td colspan="2">1</td> #相当于合并单元格，占两列，但是第三列需要删掉，否则就挤出单元格了。
</tr>
<tr>
<td>2</td>
<td rowspan="2">2</td> #相当于合并丹阳，占两行，下面一行的相对应得列需要删掉，否则就挤出单元格
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
</tr>
</tbody>
</table>
13、lable
<label form="username">用户名：</label> #label就是一个普通的文本，和form一起使用
和下面的id=username联系起来，在点击用户名的时候，光标就会到下面input的输入框中！
<input id="username" type="text" name="user">
二、CSS
做html的时候先分为3块（3个div）
在标签上面设置style属性
一般css文件单独写在css的文件中，在html中导入：<link rel="stylesheet" href="commont.css" />
css文件注释：/* */
一个标签可以应用2个样式，如果不一样，就全部应用，如果一样，就按顺序往下设置
选择器：
- id选择器：
#i1,#i2,#i3{
background-color: #dddddd;
}
<div id="i1">1</div>
<div id="i2">2</div>
<div id="i3">3</div>
#对应id
- class选择器：
.c1{
background-color: #dddddd;
}
<div class="c1">4</div>
点.对应class，上面用点定义，下面用class调用，class可以重复，c1是名称
- 标签选择器
div{
background-color: #dddddd;
}
#下面所有div标签的全部设置上div标签选择器里面的样式。
- 层级选择器
span div{
ackground-color: #dddddd;
}
#span div中间空格，下面span里面的div标签设置上上面的样式
其他的一样，.c1 div span...下面可以写很多，但是很深了就不合适了。
- 属性选择器
input[type='text']{
width: 10px;
height: 20px;
}
#找到input标签，里面的text的属性，设置样式，中括号【】里面是属性，可以在input标签里面随意写
input[n='eeee']{
width: 10px;
height: 20px;
}
<input type="text" n="eee"/>
CSS单独文件例子：
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="zcss.css" /> #引入css
</head>
<body>
<div id="i1">1</div>
<div id="i2">2</div>
<div id="i3">3</div>
<div class="c1 c2">4</div> #css里面定义的c1和c2样式
</body> CSS文件zcss：
.c1{
font-size: 50px;
color: black;
}
.c2{
background-color: red;
color: white;
}
边框
c3{
border: 1px solid red; #border：边框（四面全都有，想要一面有，使用border-top），1px，solid：实体的，还有虚线的等等（自己可以通过ptcharm试验）。
可以总结为：宽带，样式，颜色
}
属性介绍
height：高度，一般使用像素（px），也可以使用百分比
width：宽度，像素，百分比
text-align:center ：水平方向居中
line-height：根据标签高度居中
color：字体颜色
font-size：字体大小
font-weight：字体加粗
背景
background-color: #dddddd
float
python学习-day14-前端之html、css的更多相关文章
- Python开发【前端】：CSS
css样式选择器 标签上设置style属性: <body> <div style="background-color: #2459a2;height: 48px;" ...
- python学习 day14 (3月19日)----
04 json # 1. 用于多种语言 交互 编程语言通用数据 # 内置的 不需要安装直接导入使用 import json # 导入 # # dumps loads dump load # dic = ...
- 我的Python学习方向-前端辅助-后端框架django学习-浅谈（一）
初始python,很直观的感受是编译格式多样,代码简介易懂 作为一门通用编程语言,python能编写多种用途的编程语言,当然对于我目前,我的方向便是借助其前端编辑器,实现后台框架的连接学习 1.首先便 ...
- python学习-day14：集合，函数，格式化
一.集合 定义:由不同元素组成的集合.集合是一组无序排列的可hash值, 可以作为字典的key.元素必须是不可变类型:只能存放数字,字符串,字典 特性:集合的目的是将不同的值放在一起,不同的集合之间可 ...
- Python开发【前端篇】CSS
1.css基本语法及页面引用 css基本语法 css的定义方法是: 选择器 { 属性:值; 属性:值; 属性:值;} 选择器是将样式和页面元素关联起来的名称,属性是希望设置的样式属性每个属性有一个或多 ...
- python学习day14 装饰器(二)&模块
装饰器(二)&模块 #普通装饰器基本格式 def wrapper(func): def inner(): pass return func() return inner def func(): ...
- Python学习 day14
一.生成器函数进阶 1.最后一个yield后的代码 先看示例: def generator(): print(123) yield 'a' print(456) yield 'b' print(789 ...
- python学习Day14 带参装饰器、可迭代对象、迭代器对象、for 迭代器工作原理、枚举对象、生成器
复习 函数的嵌套定义:在函数内部定义另一个函数 闭包:被嵌套的函数 -- 1.外层通过形参给内层函数传参 -- 2.返回内部函数对象----> 延迟执行, 开放封闭原则: 功能可以拓展,但源代 ...
- 前端学习 第五弹： CSS （一）
前端学习 第五弹: CSS (一) 创建css: <link rel="stylesheet" type="text/css" href="my ...
- 前端学习日记之HTML、CSS 简单总结
前端学习日记之HTML.CSS 简单总结 标签(空格分隔): html css 前端学习日记 html超文本标记语言 一. h标题标签 h1-h7 <!DOCTYPE html> < ...
随机推荐
- asp.net调用存储过程详解
摘要 存储过程的调用在B/S系统中用的很多.传统的调用方法不仅速度慢,而且代码会随着存储过程的增多不断膨胀,难以维护.新的方法在一定程度上解决了这些问题. 关键词 ASP.NET:存储过程 在使用 ...
- PHP连接MySQL的时候报错SQLSTATE[HY000] [2002] No such file or directory
错误环境:Mac OS 10.10 找到mysql.sock文件的位置 $sudo find / -name mysql.sock ------结果如下---------- find: /dev/fd ...
- Xcode 7.2.1 下载地址
Xcode 7 下载地址(需要登录苹果开发者帐号) 7.2.1:https://developer.apple.com/services-account/download?path=/Develope ...
- LR自定义函数以及调用
2.2.自定义函数以及调用 2.2.1.虚拟用户编程,使用C# 语言DLL 在VS中建立DLL类库项目,编写函数时使用public声明:实现函数后编译生成DLL: 在LR中建立 .Net Vuser脚 ...
- Nginx ssl证书部署
查看当前安装的OpenSSL版本所支持的密码列表,可以使用下列命令:openssl ciphers 苹果ATS检测:https://www.qcloud.com/product/ssl 刚开始&quo ...
- JavaScript小知识
1.<script>标签的出现使整个页面因脚本解析.运行而出现等待: 2.合并脚本,每个 HTTP请求都会产生额外的性能负担,下载一 个 100KB 的文件比下载四个 25KB的文件要快: ...
- GridView控件RowDataBound事件中获取列字段途径
今天不知道怎么回事怎么也找不到gridview列中的控件,关键是其为编辑时隐藏域中的控件,取值就很成问题了,网上搜了很到,找到这个比较经典的东东了,可能大家都知道,但很少对比整理到一起,有多种方法可以 ...
- js 动态添加行，删除行，并获得select中值赋予 input
<html> <head> <title>Ace Test</title> <script type="text/javascrip ...
- CentOS 7 安装php开发环境
安装服务 : yum install httpd httpd-devel service httpd start 启动 安装mariadb : yum -y install mariadb* ...
- jsp 9大内置对象
http://www.cnblogs.com/xrong/p/3168616.html