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 rebeccapurple
border-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; position
position: 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>
417
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
