我的python之路【第十二章】HTML前端学习,CSS
HTML基础
head部分设置
<head>
<!--页面编码-->
<meta charset="UTF-8">
<!--页面刷新-->
<meta http-equiv=“Refresh” Content=“30″>
<!--页面跳转 5s 后自动跳转至百度-->
<!--<meta http-equiv="refresh" content="5; Url=http://www.baidu.com"/>-->
<!--关键词：百度搜索关键字-->
<meta name="keywords" content="星际2,星际老男孩,专访,F91,小色,JOY" >
<!--描述-->
<meta name="description" content="这个描述是在百度搜出来的描述">
<!--使用IE最新的引擎去渲染HTML.....IE兼容性问题-->
<meta http-equiv="x-ua-compatible" content="IE=Edge">
<!--头部图标-->
<link rel="shortcut icon" href="favicon.ico">
<!--头部标题-->
<title>煎蛋</title>
</head>
body部分常用标签
<body>
<!--块级标签-->
<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;<br/>laskjdf;kajsasdfasdfasdf<br/>kas;dfkja;skdjf;askdjf;laskjdf;kajsasdfasdfasdfkas;dfkja;skdjf;askdjf;laskjdf;kajsasdfasdfasdfkas;dfkja;skdjf;askdjf;laskjdf;kajsasdfasdfasdfkas;dfkja;skdjf;askdjf;laskjdf;kajsasdfasdfasdfkas;dfkja;skdjf;askdjf;laskjdf;kajsasdfasdfasdfkas;dfkja;skdjf;askdjf;laskjdf;kajsasdfasdfasdfkas;dfkja;skdjf;askdjf;laskjdf;kajsasdfasdfasdfkas;dfkja;skdjf;askdjf;laskjdf;kajsasdfasdfasdfkas;dfkja;skdjf;askdjf;laskjdf;kajsasdfasdfasdfkas;dfkja;skdjf;askdjf;laskjdf;kajsasdfasdfasdfkas;dfkja;skdjf;askdjf;laskjdf;kajsasdfasdfasdfkas;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>
<p>asdfasdfasdfasdfkas;dfkja;skdjf;askdjf;laskjdf;kajsdf;kjas;dfkja;sdljkf</p>
<!--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>
<!--标题-->
<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>
-->
<!--<label for="user">用户名</label> <input id="user" type="text" />-->
<fieldset>
<legend>登录</legend>
asdfasdfasdfas
</fieldset>
<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"/>
<!--单选框 radio -->
<div>
<input type="radio" name="gender1" value="1" />男
<input type="radio" name="gender1" value="2" checked="checked" />女
</div>
<!--多选框 checkbox -->
<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" -->
<!--上传文件 name='fafafa' 在后端取文件时，使用-->
<div>
<input name="fafafa" type="file" />
</div>
<!--城市 select -->
<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>
<div>
<div></div>
<div>
<a>
<!--图片显示方式-->
<img src="2.jpg">
<p>asdf</p>
</a>
</div>
</div>
</body>
表单使用
<body> <!--显示图片，alt当图片无法显示的时候会显示，title--当光标移动到图片上显示--> <a href="http://www.xiaohuar.com"> <img src="2.jpg" alt="百事可乐" title="美女图~~~~"> </a> <form action="http://192.168.12.120:8000/index/" method="post"> <!--普通文本框div 一个占一行--> <div>用户名:<input type="text" name="username" value="alex"></div> <!--上传文件--> <div> <input name="fafafa" type="file" /> </div> <!--邮箱格式文本框--> <!--<input type="email" name="eml">--> <!--密码格式文本框 自带加密--> <input type="password" name="pwd"> <!--单选框 checked默认选项--> <div> <input type="radio" name="gender" value="nan"/> 男 <input type="radio" name="gender" value="nv" checked="checked"/> 女 </div> <!--多选框--> <div> <input type="checkbox" name="hobby" value="11"> 打球 <input type="checkbox" name="hobby" value="12"> 看电影 <input type="checkbox" name="hobby" value="13"> 聊妹子 <input type="checkbox" name="hobby" value="14"> lol </div> <!--城市下拉列表--> <div> <!--单选下拉--> <select name="city"> <option value="bj">北京</option> <option value="sh">上海</option> <option value="ss">是撒大</option> </select> </div> <div> <!--多选下拉--> <select name="city-mem" multiple> <option value="bj">北京</option> <option value="sh">上海</option> <option value="ss">ss</option> </select> </div> <input type="submit" value="Submit提交">
<body>
<!--显示图片，alt当图片无法显示的时候会显示，title--当光标移动到图片上显示-->
<a href="http://www.xiaohuar.com">
<img src="2.jpg" alt="百事可乐" title="美女图~~~~">
</a>
<form action="http://192.168.12.120:8000/index/" method="post">
<!--普通文本框div 一个占一行-->
<div>用户名:<input type="text" name="username" value="alex"></div>
<!--上传文件-->
<div>
<input name="fafafa" type="file" />
</div>
<!--邮箱格式文本框-->
<!--<input type="email" name="eml">-->
<!--密码格式文本框 自带加密-->
<input type="password" name="pwd">
<!--单选框 checked默认选项-->
<div>
<input type="radio" name="gender" value="nan"/> 男
<input type="radio" name="gender" value="nv" checked="checked"/> 女
</div>
<!--多选框-->
<div>
<input type="checkbox" name="hobby" value="11"> 打球
<input type="checkbox" name="hobby" value="12"> 看电影
<input type="checkbox" name="hobby" value="13"> 聊妹子
<input type="checkbox" name="hobby" value="14"> lol
</div>
<!--城市下拉列表-->
<div>
<!--单选下拉-->
<select name="city">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="ss">是撒大</option>
</select>
</div>
<div>
<!--多选下拉-->
<select name="city-mem" multiple>
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="ss">ss</option>
</select>
</div>
<input type="submit" value="Submit提交">
</form>
</body>
HTML小结
1. HTML
超文本标记语言，规则
作用：模板
a. 请求周期
b. 规则对应关系
h1 -> 加大加粗
c. 静态&动态
学习规则：
- meta系列
- title
- p #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
CSS部分学习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*.c1 class选择器*/
.c1{
/*字体颜色*/
color: red;
/*字体大小*/
font-size: 30px;
}
.hide{
/*设置隐藏,显示为none*/
display: none;
}
</style>
</head>
<body>
<!--onclick 绑定点击 执行函数 -->
<input type="button" value="出现吧" onclick="showDiv();" />
<input type="button" value="消失吧" onclick="hideDiv();" />
<div id="i1" class="c1 hide">aaaaaaaaaaaaaa</div>
<script>
// 通过jquery 增加或删除 class属性
function showDiv() {
document.getElementById('i1').classList.remove('hide');
}
function hideDiv() {
document.getElementById('i1').classList.add('hide');
}
</script>
</body>
</html>
css小结
CSS
层叠样式表
- 找到某个或某些
- 直接：头大 男 女 脑残 黑 ID
/* 标签选择器 */
/* a{
color: red;
}
*/
/* ID选择器 */
/*
#wc{
color: red;
}
*/
/* class选择器 */
/*
.c1{
color: red;
}*/
/* 属性选择器 */
/*input[type="text"]{*/
/*color: rebeccapurple;*/
/*}*/
组合
.c1,c2{
color: green;
}
- 间接：
# 层级选择器
div p{
color: green;
}
div>p{
color: green;
}
- 伪类
hover 当鼠标放在上部时，css生效
.c10:hover{
color: green;
}
<a class="c10">菜单一</a>
a:hover {color: #FF00FF}
当鼠标点击下去的时候颜色变换
a:active {color: #0000FF}
PS: 优先级
1. ID选择器 属性选择器 class选择器 标签选择器
2. 相同选择器：就近原则
3. !important ：最优先选择
- “穿衣服”
/*字体颜色*/
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;
边框
# 宽度 实线 颜色
# 线类型: solid dotted dashed double
border: 3px solid rebeccapurple
border-left: 3px solid rebeccapurple
边距
内边距
padding:四周还属于这个块级标签
右内边距
padding-left:10px
top,right,buttom,left 的顺序
外边距:
margin:外部不属于这个标签
margin-left: 2px
top,right,buttom,left 的顺序
将整个body占满
body{
margin: 0;
}
鼠标移动上方时，显示的图标
cursor: wait;
position
position: relative;
position: absolute;
position: fixed;
1. 场景一：永远固定在浏览器窗口的某个位置
position: fixed;
2. 场景二：固定在浏览器的某个位置，一次
position: absolute;
3. 场景三：配合使用--外部是relative 内部是absolute
position: relative;
position: absolute;
float： 浮动起来
float: left
<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>
line-height & text-align
上下居中：line-height:48px;
左右居中：text-align:center;
body{
margin:0;
}
布局属性：
.w{
width: 980px;
margin: 0 auto;
}
CSS存在形式
- 标签
- 当前页面 <style></style>
- 文件 <link rel='stylesheet' href='' /> *
text-align: 文本居中
line-height: 文本上下居中
cursor: 鼠标放到位置上，变化
z-index: 层级--保证相同层级的优先显示0，1，2
opacity: 透明度20%
样式学习组件：bootstrap
简单布局
<!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>
