Python自动化开发学习的第十一周----WEB基础（html+css）
WEB基本概述
web（World Wide Web）即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。
Html
HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，他是一种制作万维网页面标准语言（标记）。相当于定义统一的一套规则，大家都来遵守他，这样就可以让浏览器根据标记语言的规则去解释它。
浏览器负责将标签翻译成用户“看得懂”的格式，呈现给用户！
http://www.w3school.com.cn/html/index.asp
1.Doctype
Dcotype告诉浏览器使用什么样的html和xhtml规范来解析html文档
有和无的区别
- BackCompat：标准兼容模式未开启（或叫怪异模式[Quirks mode]、混杂模式）
- CSS1Compat：标准兼容模式已开启（或叫严格模式[Standards mode/Strict mode]）
这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat,这也就是恶魔的开始 -- 浏览器按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式。如果你的页面添加了那么，那么就等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。
有，用什么？
Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档, dtd文件则包含了标记、attributes 、properties、约束规则。
2.head
meta标签（metadata information）
提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词
<!DOCTYPE html>
<html lang="en">
<head>
页面编码（告诉浏览器是什么编码）
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
刷新
<meta http-equiv="Refresh" content="10">
跳转
<meta http-equiv="Refresh" Content="5;url=http://www.baidu.com">
关键字
<meta name="keywords" content="星际2,星际老男孩,专访,F91,小色,JOY">
描述
<meta name="description" content="数据库获取数据，然后替换到html文件的指定位置（Web框架）">
X-UA-Compatible
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>Title</title>
</head>
<body>
</body>
</html>
Title标签
网页头部信息
Link标签
1.css
< link rel="stylesheet" type="text/css" href="css/common.css" >
2.icon
< link rel="shortcut icon" href="image/favicon.ico">
Style标签
在页面中写样式
例如：
< style type="text/css" >
.bb{
background-color: red;
}
< /style>
Script标签
1.引进文件
< script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script >
2.写js代码
< script type="text/javascript" > ... </script >
3.body
所有标签分为：
块级标签： div（白板），H系列（加大加粗），p标签（段落和段落之间有间距）
行内标签： span（白板）
标签之间可以嵌套
标签存在的意义，css操作，js操作
各种符号
| HTML特殊字符编码大全：往网页中输入特殊字符，需在html代码中加入以&开头的字母组合或以&#开头的数字。下面就是以字母或数字表示的特殊符号大全。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| HTML常用特殊字符：只要你认识了 HTML 标记，你便会知道特殊字符的用处。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
p标签 、 br标签 、h标签 、div标签 、span标签
p:段落 <p></p>
br：换行<br />
h：标题<h1></h1>.......<h6></h6>
div：白板<div></div>
span：白板<span></span>
a标签
1.超链接标签
<a herf="www.baidu.com">百度</a>
2.target="_blank" 会在新窗口打开
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
3.锚 href='#某个标签的ID' 标签的ID不允许重复
<a name="tip">first</a>
<a href="#tip">第一节</a>
input标签 、form标签 、textarea标签 和 select标签
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' - 重置
form表单 ation enctype属性
<textarea >默认值</textarea> - name属性 多行文本输入
select标签 - name,内部option value, 提交到后台，size，multiple
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="http://www.baidu.com" method="get" enctype="multipart/form-data">
<input type="text" name="user"/>
<input type="password" name="pwd"/>
<input type="button" value="登录"/>
<input type="submit" value="登录"/>
<p>请选择性别：</p>
男<input type="radio" name="gender" value="1" checked="checked"/>
女<input type="radio" name="gender" value="2"/>
<p>技能</p>
篮球<input type="checkbox" name="skill" value="1" checked="checked"/>
足球<input type="checkbox" name="skill" value="2"/>
排球<input type="checkbox" name="skill" value="3"/>
<p>课程</p>
音乐<input type="checkbox" name="favor" value="1" checked="checked"/>
体育<input type="checkbox" name="favor" value="2" />
数学<input type="checkbox" name="favor" value="3" />
语文<input type="checkbox" name="favor" value="4" />
物理<input type="checkbox" name="favor" value="5" />
<p>上传文件</p>
<input type="file"/>
<br />
<textarea name="file">asdfasj</textarea>
<br />
<select name="city" size="3" multiple="multiple">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
<option value="4">重庆</option>
</select>
<br />
<select name="city">
<optgroup label="河北省">
<option value="1">邯郸</option>
<option value="2">保定</option>
</optgroup>
<optgroup label="河南省">
<option value="1">南阳</option>
<option value="2">濮阳</option>
</optgroup>
</select>
<input type="submit" name="提交" />
<input type="reset" name="重置" />
</form>
</body>
</html>
img
-src -alt title
列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
第一节<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
第二节<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
</body>
</html>
表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1px">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>地址</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td colspan="2">男</td>
</tr>
<tr>
<td rowspan="2">张三</td>
<td>男</td>
<td>北京</td>
</tr><tr>
<td>男</td>
<td>北京</td>
</tr>
</tbody>
</table>
</body>
</html>
colspan = '' #横向（列）合并单元格
rowspan = ''#竖向（行）合并单元格
label
用于点击文件，使得关联的标签获取光标
<label for="username">用户名：</label>
<input id="username" type="text" name="user" />
css
css是英文Cascading Style Sheets的缩写,称为层叠样式表，用于对页面进行美化。
存在方式有三种：元素内联、页面嵌入和外部引入，比较三种方式的优缺点。
语法：style = 'key1:value1;key2:value2;'
- 在标签中使用 style='xx:xxx;'
- 在页面中嵌入 < style type="text/css"> </style > 块
- 引入外部css文件
必要性：美工会对页面的色彩搭配和图片的美化负责，开发人员则必须知道是如何实现的。
css标签选择器
id选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#l1{
background-color: #2459a2;
height: 48px;
}
#l2{
background-color: darkred;
height: 50px;
}
</style>
</head>
<body>
<div id="l1">人生苦短，我用python</div>
<div id="l2">人生苦短，我用python</div>
<div>人生苦短，我用python</div>
</body>
</html>
class选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background-color: #2459a2;
height: 48px;
}
</style>
</head>
<body>
<div class="c1">人生苦短，我用python</div>
<div class="c1">人生苦短，我用python</div>
<div class="c1">人生苦短，我用python</div>
</body>
</html>
关联选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#c1 p{
background-color: #2459a2;
height: 48px;
}
</style>
</head>
<body>
<div id="c1"><p>人生如梦</p>人生苦短，我用python</div>
<div class="c1">人生苦短，我用python</div>
<div class="c1">人生苦短，我用python</div>
</body>
</html>
组合选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#c1,#c2,.c3{
background-color: #2459a2;
height: 48px;
}
</style>
</head>
<body>
<div id="c1">人生如梦人生苦短，我用python</div>
<div id="c2">人生苦短，我用python</div>
<div class="c3">人生苦短，我用python</div>
</body>
</html>
div选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
background: #2459a2;
height: 25px;
font-size: 10px;
}
</style>
</head>
<body>
<div >人生如梦人生苦短，我用python</div>
<div >人生苦短，我用python</div>
<div >人生苦短，我用python</div>
<p>人生苦短，我用python</p>
</body>
</html>
属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<style>-->
<!--div{-->
<!--background: #2459a2;-->
<!--height: 25px;-->
<!--font-size: 10px;-->
<!--}-->
<!--</style>-->
</head>
<body>
<div style="background-color: aqua;height: 25px">人生如梦人生苦短，我用python</div>
<div >人生苦短，我用python</div>
<div >人生苦短，我用python</div>
<p>人生苦短，我用python</p>
</body>
</html>
- 优先级，标签上style优先，编写顺序，就近原则
css常用属性
http://www.w3school.com.cn/css/index.asp
1.注释 /* */
2.边框
- 宽度，样式，颜色 (border: 4px dotted red;)
- border-left
3.
height， 高度 百分比
width， 宽度 像素，百分比
text-align:ceter, 水平方向居中
line-height，垂直方向根据标签高度
color、 字体颜色
font-size、 字体大小
font-weight 字体加粗
4.float
让标签浪起来，块级标签也可以堆叠
老子管不住：
<div style="clear: both;"></div>
5.display
display: none; -- 让标签消失
display: inline;
display: block;
display: inline-block;
具有inline,默认自己有多少占多少
具有block，可以设置无法设置高度，宽度，padding margin
******
行内标签：无法设置高度，宽度，padding margin
块级标签：设置高度，宽度，padding margin
6.padding margin(0,auto)
padding 内边距
margin 外边距
7. position:
a. fiexd => 固定在页面的某个位置
b. relative + absolute
<div style='position:relative;'>
<div style='position:absolute;top:0;left:0;'></div>
</div>
opcity: 0.5 透明度
z-index: 层级顺序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="
z-index: 10;
position:fixed;
width: 500px;
height: 200px;
background-color: white;
top:50%;
left:50%;
margin-left: -250px;
margin-top: -100px;
">
<div style="text-align: center">
name:<input type="text" /><br />
password:<input type="text" />
</div>
</div>
<div style="z-index: 9;position:fixed;background-color: black;
top: 0;
bottom: 0;
right: 0;
left: 0;
opacity: 0.5;
"></div>
<div style="height: 5000px;background-color: green">text</div>
</body>
</html>
8.overflow: hidden,auto 出现滚动条
9.hover 鼠标移动到某一位置颜色改变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
position: fixed;
top: 0;
right: 0;
left: 0;
background-color: aliceblue;
height: 48px;
line-height: 48px;
}
.pg-body{
margin-top:50px;
background-color: #dddddd;
}
.w{
width: 980px;
margin: 0 auto;
}
.pg-header .muea{
display: inline-block;
padding: 0 10px;
color: blueviolet;
}
.pg-header .muea:hover{
background-color: green;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="w">
<a >logo</a>
<a class="muea">首页</a>
<a class="muea">新闻</a>
<a class="muea">视频</a>
<a class="muea">音乐</a>
</div>
</div>
<div class="pg-body">
<div class="w">11111</div>
</div>
</body>
</html>
10. background-image:url('image/4.gif'); # 默认，div大，图片重复放
background-repeat: repeat-y; #指定是否重复在横竖方向图片的重复放置
background-position-x: #查找图片上的指定位置
background-position-y:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-body{
width: 700px;
height: 400px;
border: 1px solid red;
margin: 0 auto;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="pg-body">
<div style="float: left;width: 398px;height: 200px;text-align: center;margin-top: 100px;">
<img src="1.png" style="width: 200px; height: 200px;"/>
</div>
<div style="float:right;width: 298px;height: 300px;margin-top:50px;padding-top:50px;text-align:center;position: relative;">
<p><a>账号：</a><input type="text" style="height: 40px;width: 170px;padding-right: 40px"/></p>
<span style="position: absolute;right: 20px;top: 70px;
height: 39px;
width: 39px;
background-image: url(user.png);
display: inline-block;
"></span>
<a>密码：</a><input type="password" style="height: 40px;width: 170px;padding-right: 40px"/>
<span style="position: absolute;right: 20px;top: 131px;
height: 39px;
width: 39px;
background-image: url(pwd.png);
display: inline-block;
"></span>
<p>
<input type="submit" value="登录" style="background-color: red;color: white;height: 50px;width: 100px;"/>
</p>
</div>
</div>
</body>
</html>
后台管理布局
1.左侧菜单跟随滚动条
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .pg-header{ 8 margin: 0; 9 height: 48px; 10 background-color: #888888; 11 } 12 .pg-body .menu{ 13 position: absolute; 14 top:48px; 15 left: 0; 16 bottom: 0; 17 width: 200px; 18 background-color: #0a6aa1; 19 } 20 .pg-body .content{ 21 position: absolute; 22 top: 48px; 23 right: 0; 24 bottom: 0; 25 left: 200px; 26 /*background-color: #1AB394;*/ 27 /*overflow: auto;*/ 28 } 29 .left{float: left;} 30 .right{float: right;} 31 32 </style> 33 </head> 34 <body style="margin: 0;"> 35 <div class="pg-header"></div> 36 <div class="pg-body"> 37 <div class="menu left"></div> 38 <div class="content right"> 39 <div style="background-color: #1AB394;"> 40 <p style="margin: 0;">asdfaf</p><p>asdfaf</p><p>asdfaf</p><p>asdfaf</p><p>asdfaf</p> 41 <p>asdfaf</p><p>asdfaf</p><p>asdfaf</p><p>asdfaf</p><p>asdfaf</p> 42 <p>asdfaf</p><p>asdfaf</p><p>asdfaf</p><p>asdfaf</p><p>asdfaf</p> 43 <p>asdfaf</p><p>asdfaf</p><p>asdfaf</p><p>asdfaf</p><p>asdfaf</p> 44 <p>asdfaf</p><p>asdfaf</p><p>asdfaf</p><p>asdfaf</p><p>asdfaf</p> 45 <p>asdfaf</p><p>asdfaf</p><p>asdfaf</p><p>asdfaf</p><p>asdfaf</p> 46 <p>asdfaf</p><p>asdfaf</p><p>asdfaf</p><p>asdfaf</p><p>asdfaf</p> 47 </div> 48 </div> 49 </div> 50 </body> 51 </html>
2.左侧菜单不跟随滚动条（不动）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .pg-header{ 8 margin: 0; 9 height: 48px; 10 background-color: #888888; 11 } 12 .pg-body .menu{ 13 position: absolute; 14 top:48px; 15 left: 0; 16 bottom: 0; 17 width: 200px; 18 background-color: #0a6aa1; 19 } 20 .pg-body .content{ 21 position: absolute; 22 top: 48px; 23 right: 0; 24 bottom: 0; 25 left: 200px; 26 /*background-color: #1AB394;*/ 27 overflow: auto; 28 } 29 .left{float: left;} 30 .right{float: right;} 31 32 </style> 33 </head> 34 <body style="margin: 0;"> 35 <div class="pg-header"></div> 36 <div class="pg-body"> 37 <div class="menu left"></div> 38 <div class="content right"> 39 <div style="background-color: #1AB394;"> 40 <p style="margin: 0;">asdfaf</p><p>asdfaf</p><p>asdfaf</p><p>asdfaf</p><p>asdfaf</p> 41 <p>asdfaf</p><p>asdfaf</p><p>asdfaf</p><p>asdfaf</p><p>asdfaf</p> 42 <p>asdfaf</p><p>asdfaf</p><p>asdfaf</p><p>asdfaf</p><p>asdfaf</p> 43 <p>asdfaf</p><p>asdfaf</p><p>asdfaf</p><p>asdfaf</p><p>asdfaf</p> 44 <p>asdfaf</p><p>asdfaf</p><p>asdfaf</p><p>asdfaf</p><p>asdfaf</p> 45 <p>asdfaf</p><p>asdfaf</p><p>asdfaf</p><p>asdfaf</p><p>asdfaf</p> 46 <p>asdfaf</p><p>asdfaf</p><p>asdfaf</p><p>asdfaf</p><p>asdfaf</p> 47 </div> 48 </div> 49 </div> 50 </body> 51 </html>
3.左右出现滚动条
设置最小宽度 min-width:980px; 那么当页面缩小到一定的范围时候就会出现滚动条
width：80%；
min-width:980px; 那么当80%小于980时候就会出现左右滚动条
4.圆角图片
border-radius：50%；
5.图片的下拉菜单
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .pg-header{ 8 margin: 0; 9 height: 48px; 10 background-color: #888888; 11 } 12 .pg-header .logo{ 13 line-height: 48px; 14 text-align: center; 15 background-color: #1e2e3d; 16 width: 200px; 17 } 18 .pg-header .use{ 19 height: 48px; 20 width: 200px; 21 background-color: #1f6377; 22 } 23 .pg-header .use:hover{ 24 background-color: #0e90d2; 25 } 26 27 .pg-header .use .a img { 28 width: 40px; 29 height: 40px; 30 margin-top: 4px; 31 border-radius: 50%; 32 } 33 .pg-header .use .b { 34 z-index:20; 35 position: absolute; 36 top:50px; 37 right: 150px; 38 background-color: #2b542c; 39 width: 100px; 40 height: 50px; 41 display: none; 42 } 43 .pg-header .use:hover .b{ 44 display: block; 45 } 46 .pg-header .use .b a{ 47 display: block; 48 } 49 .pg-body .menu{ 50 position: absolute; 51 top:48px; 52 left: 0; 53 bottom: 0; 54 width: 200px; 55 background-color: #0a6aa1; 56 } 57 .pg-body .content{ 58 position: absolute; 59 top: 48px; 60 right: 0; 61 bottom: 0; 62 left: 200px; 63 /*background-color: #1AB394;*/ 64 overflow: auto; 65 z-index: 9; 66 } 67 .left{float: left;} 68 .right{float: right;} 69 70 </style> 71 </head> 72 <body style="margin: 0;"> 73 <div class="pg-header"> 74 <div class="logo left">LOGO</div> 75 <div class="use right" style="position: relative;"> 76 <a class="a"> 77 <img src="22.jpg" /> 78 </a> 79 <div class="b"> 80 <a>我的资料</a> 81 <a>注销</a> 82 </div> 83 </div> 84 85 </div> 86 <div class="pg-body"> 87 <div class="menu left"></div> 88 <div class="content right"> 89 <div style="background-color: #1AB394;"> 90 <p style="margin: 0;">asdfaf</p><p>asdfaf</p><p>asdfaf</p><p>asdfaf</p><p>asdfaf</p> 91 <p>asdfaf</p><p>asdfaf</p><p>asdfaf</p><p>asdfaf</p><p>asdfaf</p> 92 <p>asdfaf</p><p>asdfaf</p><p>asdfaf</p><p>asdfaf</p><p>asdfaf</p> 93 <p>asdfaf</p><p>asdfaf</p><p>asdfaf</p><p>asdfaf</p><p>asdfaf</p> 94 <p>asdfaf</p><p>asdfaf</p><p>asdfaf</p><p>asdfaf</p><p>asdfaf</p> 95 <p>asdfaf</p><p>asdfaf</p><p>asdfaf</p><p>asdfaf</p><p>asdfaf</p> 96 <p>asdfaf</p><p>asdfaf</p><p>asdfaf</p><p>asdfaf</p><p>asdfaf</p> 97 </div> 98 </div> 99 </div> 100 </body> 101 </html>
6.网站的图标设置
从网站fontawesome.io上面下载文件free
设置就可以用
<link rel="stylesheet" href="fontawesome-free-5.0.8/web-fonts-with-css/css/fontawesome-all.css" />
<i class="far fa-comment-alt"></i>
