Python学习:前端之HTML+CSS
概述
HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，他是一种制作万维网页面标准语言（标记）。相当于定义统一的一套规则，大家都来遵守他，这样就可以让浏览器根据标记语言的规则去解释它。
浏览器负责将标签翻译成用户“看得懂”的格式，呈现给用户！(例：djangomoan模版引擎)
1. HTML
超文本标记语言，规则
作用：模板
a. 请求周期
b. 规则对应关系
h1 -> 加大加粗
c. 静态&动态
学习规则：
头部
meta系列,借用博客园的头部信息
title
link
<head><!-- 页面编码 --><meta charset="UTF-8" /><!-- 页面跳转 --><!--<meta http-equiv="Refresh" Content="5; Url=http://www.oldboyedu.com" />--><!-- 关键字 --><meta name="keywords" content="开发者,博客园,开发者,程序猿,程序媛,极客,编程,代码,开源,IT网站,Developer,Programmer,Coder,Geek,技术社区" /><!-- 描述 --><meta name="description" content="博客园是一个面向开发者的知识分享社区。自创建以来，博客园一直致力并专注于为开发者打造一个纯净的技术交流社区，推动并帮助开发者通过互联网分享知识，从而让更多开发者从中受益。博客园的使命是帮助开发者用代码改变世界。" /><!-- 用IE最新的引擎去渲染HTML --><meta http-equiv="X-UA-Compatible" content="IE=Edge" /><!-- 头部图标 --><link rel="shortcut icon" href="favicon.ico"><!-- 头部标题 --><title>矮哥Linux</title><!--欠四个标签--></head>身体部分
<body></body> - p- br- div- span- table thead tbody tr th td : colpan rowspan- a: href target- img: src alt title- ul li ol li dl dt dd- 提交数据- form : action method enctype- input： text password radio checkbox file --> name value checked- input: submit button reset --> value- select option --> name value(option) selected multip- textarea: name 块级和内联
<!--块级标签--><h1>刘浩</h1><h1>吴春维</h1><!--内联标签--><a>矮 哥</a><!--<a>Alex</a>--><!--一大波符号--><!--http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html-->p段落标签，br换行
<p>asdfasdfasdfasdfkas;dfkja;skdjf;askdjf;laskjdf;kajsdf;kjas;dfkja;sdljkf</p><p>asdfasdfasdfasdfkas;dfkja;skdjf;askdjf;laskjdf;kajsdf;kjas;dfkja;sdljkf</p><p>asdfasdfasdfasdfkas;dfkja;skdjf;askdjf;laskjdf;kajsdf;kjas;dfkja;sdljkf</p>a标签
<!--a标签 跳转,重定向 锚--><a href="http://www.oldboyedu.com" target="_blank">矮哥</a><a href="#c1">第一章</a><a href="#c2">第二章</a><a href="#c3">第三章</a><div id="c1" style="height: 700px;background-color: rebeccapurple;">辰东所著的第五部小说又称《遮天前传》，《圣墟》为后传首发于起点，辰东结婚后的第一部作品
一粒尘可填海，一根草斩尽日月星辰，弹指间天翻地覆。群雄并起，万族林立，诸圣争霸，乱天动地；问苍茫大地，谁主沉浮？一个少年从大荒中走出，一切从这里开始
16年11月完美荣登2016中国泛娱乐指数盛典中国IP价值榜-网络文学榜top10</div><div id="c2" style="height: 700px;background-color: antiquewhite">辰东所著的第五部小说又称《遮天前传》，《圣墟》为后传首发于起点，辰东结婚后的第一部作品
一粒尘可填海，一根草斩尽日月星辰，弹指间天翻地覆。群雄并起，万族林立，诸圣争霸，乱天动地；问苍茫大地，谁主沉浮？一个少年从大荒中走出，一切从这里开始
16年11月完美荣登2016中国泛娱乐指数盛典中国IP价值榜-网络文学榜top10</div><div id="c3" style="height: 700px;background-color: brown;">辰东所著的第五部小说又称《遮天前传》，《圣墟》为后传首发于起点，辰东结婚后的第一部作品
一粒尘可填海，一根草斩尽日月星辰，弹指间天翻地覆。群雄并起，万族林立，诸圣争霸，乱天动地；问苍茫大地，谁主沉浮？一个少年从大荒中走出，一切从这里开始
16年11月完美荣登2016中国泛娱乐指数盛典中国IP价值榜-网络文学榜top10</div>h系列，标题标签
<!--标题--><h1>矮哥</h1><h2>矮哥</h2><h3>矮哥</h3><h4>矮哥</h4><h5>矮哥</h5><h6>矮哥</h6><h6>矮哥</h6>纯洁标签
<!--纯洁标签--><div>我是块级</div><div>我是块级</div><span>我是内联</span><span>我是内联</span>列表
<!--列表--><ul><li>菜单一</li><li>菜单二</li><li>菜单上</li></ul><ol><li>菜单一</li><li>菜单二</li><li>菜单上</li></ol><dl><dt>标题一</dt><dd>内容一</dd><dd>内容一</dd><dd>内容一</dd><dt>标题一</dt><dd>内容一</dd><dd>内容一</dd><dd>内容一</dd></dl>表格
<!--表格--><table border="1"><thead><tr><th>序号</th><th>主机名</th><th>端口</th></tr></thead><tbody><tr><td>1</td><td colspan="2">c1.com</td></tr><tr><td>2</td><td>c1.com</td><td>80</td></tr><tr><td>3</td><td rowspan="2">c1.com</td><td>80</td></tr><tr><td>4</td><td>80</td></tr></tbody></table>lable和fieldset
<label for="user">用户名</label> <input id="user" type="text" /><fieldset><legend>登录</legend>asdfasdfasdfas</fieldset>input和select
<a href="http://www.xiaohuar.com"><img src="2.jpg" alt="贺磊" title="我是贺磊，旋涡选我选我"></a><form action="http://192.168.12.120:8000/index/" method="POST" enctype="multipart/form-data"><!--普通文本框--><input type="text" name="username" value="alex" /><!--<input type="text" name="username" placeholder="请输入内容" />--><!--邮箱格式文本框--><!--<input type="email" name="em" />--><!--密码格式文本框--><input type="password" name="pwd"/><!--单选框--><div><input type="radio" name="gender1" value="1" />男<input type="radio" name="gender1" value="2" checked="checked" />女</div><!--多选框--><div><input type="checkbox" name="hobby" value="11" checked="checked" />男<input type="checkbox" name="hobby" value="12" />女<input type="checkbox" name="hobby" value="13" checked="checked" />男女<input type="checkbox" name="hobby" value="14" />多男女</div><!--文件: enctype="multipart/form-data" --><div><input name="fafafa" type="file" /></div><!--城市--><div><select name="city"><option value="bj">北京</option><option value="sh" selected="selected">上海</option><option value="ss">沙河</option></select><select name="city2" multiple><option value="bj">北京</option><option value="sh" selected="selected">上海</option><option value="ss" selected="selected">沙河</option></select></div><div><textarea name="memo">默认值</textarea></div><input type="submit" value="Submit提交" /><input type="button" value="button提交" /><input type="reset" value="重置" /></form>img
<div><div></div><div><a><img src="2.jpg"><p>asdf</p></a></div></div>2.CSS
层叠样式表找到某个或某些
选择器
直接
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>/*!* ID选择器 *!*//*#wc{*//*color: red;*//*}*//*!* 属性选择器 *!*//*input[type="text"] {*//*color: rebeccapurple;*//*}*//*!* class选择器 *!*//*.c1{*//*color: red;*//*}*//*!* 标签选择器 *!*//*a{*//*color: red;*//*}*//*.c1{*//*color: green !important;*//*}*//*.c2{*//*color: red;*//*}*//*div p{*//*color: green;*//*}*/.c1 > p span{color: green;}.c10:hover{color: green;}</style>
</head>
<body><div class="c1 c2">矮哥</div><img src="../1.HTML部分/2.jpg"><div class="c1" id="i2"><p id="wc">矮哥</p><p n="1" class="c1">矮哥<a>阿斯顿发斯蒂芬</a>根</p><a><p>a<span>asdf</span>sdf</p></a></div><a n="1">矮哥</a><p class="c1">矮哥</p><input type="text" /><input type="text" /><input type="text" /><input type="password" /><div class="c3">fff</div><a class="c4">aaa</a><a class="c10">菜单一</a></body>
</html><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style></style>
</head>
<body><!--<div>1</div>--><!--<div>2</div>--><!--<a>3</a>--><!--<a>4</a>--><!--<div style="display: inline">1</div>--><!--<div style="display: inline">2</div>--><!--<a style="display: block">3</a>--><!--<a style="display: block">4</a>--><a style="background-color: rebeccapurple;height: 200px;width: 400px;display: inline-block;">asdfasdf</a><a style="background-color: green;height: 200px;width: 400px;display: inline-block;">asdfasdf</a>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>.c1{color: red;font-size: 30px;}.hide{display: none;}</style>
</head>
<body><input type="button" value="出现吧" onclick="showDiv();" /><input type="button" value="小时吧" onclick="hideDiv();" /><div id="i1" class="c1 hide">aaaaaaaaaaaaaa</div><script>function showDiv() {document.getElementById('i1').classList.remove('hide');}function hideDiv() {document.getElementById('i1').classList.add('hide');}</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>.modal{height: 300px;width: 400px;background-color: white;position: fixed;left: 50%;margin-left: -200px;top: 50%;margin-top: -150px;z-index: 99;}.hide{display: none;}.zz{position: fixed;background-color: black;top:0;left: 0;right: 0;bottom: 0;z-index: 98;opacity: 0.5;}</style>
</head>
<body><div style="height: 3000px;background-color: #dddddd"><input type="button" value="出现吧" onclick="showDiv();" /><div>asdfjas;dfiupasjdf;aksjdfpoiuas;df;askdjfpalsjdf;lkajsdf;kajsd;fkj</div></div><div id="i2" class="zz hide"></div><div id="i1" class="modal hide"><input type="button" value="取消" onclick="hideDiv();" /></div><script>function showDiv() {document.getElementById('i1').classList.remove('hide');document.getElementById('i2').classList.remove('hide');}function hideDiv() {document.getElementById('i1').classList.add('hide');document.getElementById('i2').classList.add('hide');}</script>
</body>
</html>间接：
# 层级选择器div p{color: green;}div>p{color: green;}伪类
hover 当鼠标放在上部时，css生效.c10:hover{color: green;}<a class="c10">菜单一</a>PS: 优先级
1. ID选择器 属性选择器 class选择器 标签选择器2. 相同选择器：就近原则3. !important“穿衣服”
穿衣服走一波
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>.sb{/*字体颜色*/color: white;/*背景颜色*/background-color: red;/*字体大小*/font-size: 16px;/*font-weight: bold;*//*高度*//*height: 200px;*//*height: 10%;*//*宽度*//*width: 400px;*//*width: 40%;*/background-image: url(2.jpg);background-repeat: no-repeat;height: 200px;}.c1{background-image: url(5.png);background-repeat: no-repeat;background-position-y: -111px;background-position-x: -106px;/*background: url(5.png) no-repeat -106px -111px;*/height: 60px;width: 60px;}</style>
</head>
<body><div class="sb">矮哥有话说</div><div class="c1"></div>
</body>
</html> /*字体颜色*/color: white; /*背景颜色*/background-color: red; /*字体大小*/font-size: 16px;/*font-weight: bold;*/ /*高度*//*height: 200px;*//*height: 10%;*/ /*宽度*//*width: 400px;*//*width: 40%;*/ /* 背景图片 */background-image: url(5.png);background-repeat: no-repeat;background-position-y: -111px;background-position-x: -106px; 隐藏标签display: none;隐藏设置内联&块级display: block;display: inline;display: inline-block; 边框border: 3px solid rebeccapurpleborder-left: 3px solid rebeccapurple<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>.c2{background-color: #dddddd;padding: 10px;border-left: 3px solid transparent;}.c2:hover{border-left: 3px solid rebeccapurple;}</style>
</head>
<body><div style="height: 200px;border: 1px solid red;"></div><div style="background-color: #dddddd;border-left: 3px solid rebeccapurple;padding: 10px;">搜索数据</div><br/><div class="c2">搜索数据</div>
</body>
</html> 边距内边距padding外边距margin 鼠标移动上方时，显示的图标 cursor: wait; positionposition: relative;position: absolute;position: fixed;1. 场景一：position: fixed; # 永远在窗口的某个位置2. 场景二：position: absolute; # 滚动滑轮看效果3. 场景三：position: relative; # 单独使用，并没有任何效果。有点类似标签position: absolute; # 找到relative进行定位<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>.tip{position: fixed;bottom: 300px;right: 0;}.ab{position: absolute;bottom: 10px;right: 0;}.rel{position: relative;height: 300px;width: 300px;background-color: rebeccapurple;}.abs{position: absolute;top: 0;right: 0;}</style>
</head>
<body><div class="rel"><div><div class="abs">asdf</div></div></div><div style="background-color: #dddddd;height: 2000px;"></div><div class="tip">返回顶部</div><div class="ab">返回顶部</div></body>
</html> float：float: left<div style="clear: both;"></div><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>body{margin: 0;}</style>
</head>
<body><div style="height: 48px;background-color: brown;line-height: 48px;">矮哥<a>矮哥</a><a>矮哥</a><a>矮哥</a></div><br/><div style="background-color: rebeccapurple;"><div style="float: left;background-color: green;">内容一</div><div style="float: left;background-color: green;">内容一</div><div style="float: right;background-color: green;">内容二</div><div style="clear: both;"></div></div><div style="height: 48px;background-color: brown;line-height: 48px;">矮哥</div><br/><div style="height: 48px;background-color: brown;text-align: center;">矮哥</div></body>
</html> line-height & text-align上下居中：line-height:48px;左右居中：text-align:center; body{margin:0; # 去掉边距，或者叫做占满屏}<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title></head>
<body><div style="margin: 50px;background-color: rebeccapurple;color: white;">鼻子</div><div style="padding: 50px;background-color: rebeccapurple;color: white;">鼻子</div>
</body>
</html> 布局属性：.w{width: 980px;margin: 0 auto;}CSS存在形式- 标签- 当前页面 <style></style>- 文件 <link rel='stylesheet' href='' /> *<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>body{margin: 0;}.w{width: 980px;margin: 0 auto;}.left{float: left;}.right{float: right;}.pg-header{height: 48px;background-color: brown;color: white;line-height: 48px;}.pg-header .menus a{padding: 0 10px;display: inline-block;}.pg-header .menus a:hover{background-color: bisque;}</style>
</head>
<body><div class="pg-header"><div class="w"><div class="menus left"><a href="#">菜单一</a><a href="#">菜单一</a><a href="#">菜单一</a><a href="#">菜单一</a></div><div class="menus right"><a href="#">登录</a><a href="#">注册</a></div></div></div><div class="pg-body"><div class="w">asdka;sdfjk;alsd</div></div>
</body>
</html>
