初识html
<!DOCTYPE html>
<html lang="en">
<head>
<!--自闭合标签-->
<meta charset="UTF-8" />
<!--标签属性-->
<title name="wang">配置管理</title>
<!--对title添加图标-->
<link rel="shortcut icon" href="favicon.ico">
<!--5秒自动刷新-->
<!--<meta http-equiv="refresh" content="5" />-->
<!--10秒自动跳转-->
<!--<meta http-equiv="refresh" content="10; url=http://www.bing.com.cn" />-->
<!--关键字-->
<meta name="keywords" content="软件配置管理" />
<!--描述-->
<meta name="description" content="介绍软件配置管理" />
<!--专门针对兼容IE使用，表示使用最新的IE浏览器去执行-->
<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge" />
</head>
<body>
<!--块级标签（div,h1,p等），默认占一行-->
<div style="background: blue">加载</div>
<!--内联标签(span,select,a等)，内容有多少就占多少-->
<span style="background: red">继续加载</span>
<!--大于、小于、空格特殊符号显示-->
<a >a
<!--段落p标签，换行br标签-->
<p>我的家在湖北，洞庭湖旁<br>我的家在湖北，洞庭湖旁</p>
<p>我的家在湖北，洞庭湖旁</p>
<!--a标签中的跳转，不会新建窗口-->
<a href="http://www.baidu.com">跳转到百度</a>
<!--a标签中的跳转，会新建窗口-->
<a href="http://www.bing.com.cn" target="_blank">跳转到必应</a>
<!--设置高度-->
<!--<div style="height: 500px";>我的家乡</div>-->
<!--锚点-->
<!--寻找页面中id=i1的标签，将其标签放置在页面顶部-->
<a href="#i1">第一章</a>
<a href="#i2">第二章</a>
<a href="#i3">第三章</a> <!--页面中id属性值不允许重复，可以不写-->
<div id="i1" style="height: 500px";>第一章内容</div>
<div id="i2" style="height: 500px";>第二章内容</div>
<div id="i3" style="height: 500px";>第三章内容</div> <!--标题标签h，默认从大到小-->
<h1>企业级软件配置管理</h1>
<h2>企业级软件配置管理</h2>
<h3>企业级软件配置管理</h3>
<h4>企业级软件配置管理</h4>
<h5>企业级软件配置管理</h5>
<h6>企业级软件配置管理</h6> <!--定制标题大小-->
<h6 style="font-size: 65px;">企业级软件配置管理</h6>
</body>
</html>
input系列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<div style="border: 1px solid red;">
<p>用户名：<input type="text" /></p>
<p>密码：<input type="password" /></p>
<!--email只对最新的浏览器有效，需要自己实现-->
<p>邮箱：<input type="email" /></p>
<p>性别：
<!--单选name相同互斥-->
<br />男<input type="radio" name="gender" />
<br />女<input type="radio" name="gender" />
</p>
<p>爱好：
<!--复选框-->
<br />看书<input type="checkbox" />
<br />看电影<input type="checkbox" />
<br />听音乐<input type="checkbox" />
</p>
<p>城市：
<select>
<option>西安</option>
<option>武汉</option>
<option>合肥</option>
</select>
<!--multiple支持多选,size最多看见几个-->
<select multiple size="5">
<option>北京</option>
<option>上海</option>
<option>深圳</option>
<option>深圳</option>
<option>深圳</option>
<option>深圳</option>
<option>深圳</option>
<option>深圳</option>
<option>深圳</option>
<option>深圳</option>
</select>
<select>
<optgroup label="一线城市">
<option>北京</option>
<option>上海</option>
</optgroup>
<optgroup label="二线城市">
<option>大连</option>
<option>汉口</option>
<option>厦门</option>
</optgroup>
</select>
</p>
<p>上传文件：<input type="file" /></p>
<p>备注：<textarea></textarea></p>
<!--submit提交当前表单，button普通按钮，reset重置表单-->
<input type="submit" value="submit"/>
<input type="button" value="button"/>
<input type="reset" value="reset"/>
</div>
</form>
</body>
</html>
form标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<div style="border: 1px solid red;">
<p>用户名：<input type="text" /></p>
<p>密码：<input type="password" /></p>
<!--email只对最新的浏览器有效，需要自己实现-->
<p>邮箱：<input type="email" /></p>
<p>性别：
<!--单选name相同互斥-->
<br />男<input type="radio" name="gender" />
<br />女<input type="radio" name="gender" />
</p>
<p>爱好：
<!--复选框-->
<br />看书<input type="checkbox" />
<br />看电影<input type="checkbox" />
<br />听音乐<input type="checkbox" />
</p>
<p>城市：
<select>
<option>西安</option>
<option>武汉</option>
<option>合肥</option>
</select>
<!--multiple支持多选,size最多看见几个-->
<select multiple size="5">
<option>北京</option>
<option>上海</option>
<option>深圳</option>
<option>深圳</option>
<option>深圳</option>
<option>深圳</option>
<option>深圳</option>
<option>深圳</option>
<option>深圳</option>
<option>深圳</option>
</select>
<select>
<optgroup label="一线城市">
<option>北京</option>
<option>上海</option>
</optgroup>
<optgroup label="二线城市">
<option>大连</option>
<option>汉口</option>
<option>厦门</option>
</optgroup>
</select>
</p>
<p>上传文件：<input type="file" /></p>
<p>备注：<textarea></textarea></p>
<!--submit提交当前表单，button普通按钮，reset重置表单-->
<input type="submit" value="submit"/>
<input type="button" value="button"/>
<input type="reset" value="reset"/>
</div>
</form>
</body>
</html>
form练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form练习</title>
</head>
<body>
<!--<form action="https://www.sogou.com/web" method="get">-->
<!--<input type="text" name="query"/>-->
<!--<input type="submit" value="提交" />-->
<!--</form>-->
<!--需要上传文件时，加上enctype="multipart/form-data"-->
<form action="http://127.0.0.1:8000/index/" method="post" enctype="multipart/form-data">
<!--name-->
<label for="name1">
用户名：<input type="text" id="name1" name="user"/>
</label>
<label for="name2">
密码：<input type="password" id="name2" name="pwd" />
</label>
<!--value-->
男<input type="radio" name="gender" value="1"/>
女<input type="radio" name="gender" value="0"/>
<p>爱好：
篮球<input name="favor" type="checkbox" value="1">
足球<input name="favor" type="checkbox" value="2">
排球<input name="favor" type="checkbox" value="3">
</p>
<p>文件：
<input type="file" name="oldboy">
</p>
<p>
<!--name和value-->
<select name="city">
<option value="1">北京</option>
<option value="2">西安</option>
<option value="3">郑州</option>
</select>
</p>
<p>
备注：<textarea name="extra"></textarea>
</p>
<ul>
<li>计算机专业</li>
<li>软件工程专业</li>
<li>密码学专业</li>
</ul>
<ol>
<li>计算机专业</li>
<li>软件工程专业</li>
<li>密码学专业</li>
</ol>
<dl>
<dt>计算机专业</dt>
<dd>网络</dd>
<dd>计算机组成原理</dd>
<dt>软件工程专业</dt>
<dd>python</dd>
<dd>java</dd>
<dt>密码学专业</dt>
<dd>加密算法</dd>
</dl>
<input type="submit" value="提交" />
</form>
<!--提交的格式：
{'query':'输入的内容'}
-->
<hr/>
<form>
<input type="text" />
<input type="submit" value="提交" />
</form>
</body>
</html>
合并单元格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table练习</title>
</head>
<body>
<!--表格-->
<table border="1">
<!--写标题-->
<thead>
<!--tr表示一行-->
<tr>
<!--th在head中,左右合并单元格，colspan占位-->
<th colspan="2">第一列</th>
<th>第二列</th>
<th>第三列</th>
</tr>
</thead>
<!--写内容-->
<tbody>
<tr>
<!--td表示列-->
<td>第一列</td>
<td>第二列</td>
<td>第三列</td>
<td>第四列</td>
</tr>
<tr>
<!--td表示列-->
<td>第一列</td>
<td>第二列</td>
<td>第三列</td>
<td>第四列</td>
</tr>
<tr>
<!--td表示列-->
<td>第一列</td>
<td>第二列</td>
<td>第三列</td>
<td>第四列</td>
</tr>
</tbody>
</table>
<hr />
<table border="1">
<!--写标题-->
<thead>
<!--tr表示一行-->
<tr>
<!--th在head中-->
<th>第一列</th>
<th>第二列</th>
<th>第三列</th>
<th>第四列</th>
</tr>
</thead>
<!--写内容-->
<tbody>
<tr>
<!--td表示列-->
<td>第一列</td>
<!--上下合并单元格-->
<td rowspan="2">第二列</td>
<td>第三列</td>
<td>第四列</td>
</tr>
<tr>
<!--td表示列-->
<td>第一列</td> <td>第三列</td>
<td>第四列</td>
</tr>
<tr>
<!--td表示列-->
<td>第一列</td>
<td>第二列</td>
<td>第三列</td>
<td>第四列</td>
</tr>
</tbody>
</table>
<hr />
<table border="1">
<!--写标题-->
<thead>
<!--tr表示一行-->
<tr>
<!--th在head中-->
<th>第一列</th>
<th>第二列</th>
<th>第三列</th>
<th>第四列</th>
</tr>
</thead>
<!--写内容-->
<tbody>
<tr>
<!--td表示列-->
<td>第一列</td>
<td>第二列</td>
<td>第三列</td>
<td>第四列</td>
</tr>
<tr>
<!--td表示列-->
<td>第一列</td>
<td>第二列</td>
<td>第三列</td>
<td>第四列</td>
</tr>
<tr>
<!--td表示列-->
<td>第一列</td>
<td>第二列</td>
<td>第三列</td>
<td>第四列</td>
</tr>
</tbody>
</table>
<hr />
<table border="1">
<!--写标题-->
<thead>
<!--tr表示一行-->
<tr>
<!--th在head中-->
<th>第一列</th>
<th>第二列</th>
<th>第三列</th>
<th>第四列</th>
</tr>
</thead>
<!--写内容-->
<tbody>
<tr>
<!--td表示列-->
<td>第一列</td>
<td>第二列</td>
<td>第三列</td>
<td>第四列</td>
</tr>
<tr>
<!--td表示列-->
<td>第一列</td>
<td>第二列</td>
<td>第三列</td>
<td>第四列</td>
</tr>
<tr>
<!--td表示列-->
<td>第一列</td>
<td>第二列</td>
<td>第三列</td>
<td>第四列</td>
</tr>
</tbody>
</table>
</body>
</html>
fieldset、iframe
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>不常用标签</title>
</head>
<body>
<h1>fieldset</h1>
<fieldset>
<legend>登录</legend>
<p>用户名：</p>
<p>密码：</p>
</fieldset>
<h1>老男孩Python培训</h1>
<iframe style="width: 100%;height: 2000px" src="http://autohome.com.cn"></iframe>
</body>
</html>
CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS</title>
<link rel="stylesheet" href="common.css" />
<!--标签选择器-->
<!--<style>-->
<!--div{-->
<!--background-color: red;-->
<!--color: blue;-->
<!--}-->
<!--</style>-->
</head>
<body>
<!--除非单独需要设置，不建议放到div中-->
<div style="background-color: aqua; color: #000;;">CSS样式</div>
<div>CSS样式</div>
<div>CSS样式</div>
<div>CSS样式</div>
</body>
</html>
common.css
div{
background-color: red;
color: blue;
}
CSS选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS</title>
<!--标签选择器-->
<style>
div{
background-color: red;
color: blue;
}
/*找id为i1的标签*/
#i1{
font-size: 32px;
color: blue;
}
/*class选择器*/
.c1{
background-color: blueviolet;
}
/*层级选择器*/
/*.c2 div p a{*/
/*background-color: black;*/
/*}*/
.c2 div p .c3{
background-color: black;
}
/*逗号为组合，组合选择器*/
.c4,.c5,.c6{
background-color: chocolate;
}
</style>
</head>
<body>
<!--除非单独需要设置，不建议放到div中-->
<!--<div style="background-color: aqua; color: #000;;">CSS样式</div>-->
<a id="i1">配置管理</a>
<div>CSS样式</div>
<div>CSS样式</div>
<div>CSS样式</div>
<!--class可以重复-->
<span class="c1">配置管理</span>
<span class="c1">配置管理</span>
<span class="c1">配置管理</span> <div class="c2">
<div>
<p>
<span>00</span>
<a class="c3">11</a>
</p>
</div>
</div>
<div class="c3">哈哈</div> <div class="c4">哈哈</div>
<div class="c5">哈哈</div>
<div class="c6">哈哈</div>
</body>
</html>
color、height、width
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS样式</title>
<style>
.c1{
color: red;
/*颜色的三种表示*/
background-color: blue;
/*background-color: #dddddd;*/
/*background-color: rgb(25,18,20);*/
font-size: 32px;
/*高度不能100%*/
height: 60px;
/*宽度可以100%，也可以设置像素*/
width: 500px;
}
</style>
</head>
<body>
<div class="c1">配置管理</div>
<div style="width: 500px;">
<div style="width: 20%; background-color: darkmagenta">哈哈</div>
<div style="width: 80%; background-color: blue">呵呵</div>
</div>
</body>
</html>
小图片显示处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS样式</title>
<style>
.img{
background-image: url("4.gif");
height: 150px;
width: 400px;
/*不重复填充*/
background-repeat: no-repeat;
}
.img2{
background-image: url("1.jpg");
height: 50px;
width: 50px;
/*移动图片位置*/
background-position: 95px 145px;
}
</style>
</head>
<body>
<!--没有加高度和宽度看不见图片-->
<div class="img"></div>
<div class="img2"></div>
</body>
</html>
小图标显示实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS样式</title>
<style>
.img{
background: #dddddd url("jd2015img.png") 5px -140px no-repeat;
height: 20px;
width: 25px;
}
</style>
</head>
<body>
<div class="img"></div>
</body>
</html>
border、display
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS样式</title>
</head>
<body>
<!--边框solid表示四周都是实线-->
<div style="border:4px solid red; height: 10px;"></div>
<!--左边框,顺时针顺序（top,right,bottom,left）-->
<div style="border-left:4px solid red; height: 20px;"></div>
<!--虚线-->
<div style="border:2px dotted red; height: 10px;"></div>
<!--虚线-->
<div style="border:1px dashed red; height: 10px;"></div>
<!--隐藏标签并且位置消失-->
<div style="display:none;background-color: blue">CSS样式</div>
<!--位置保留，内容消失-->
<div style="visibility:hidden;background-color: blue">CSS样式</div>
<!--display: inline块级标签变成内联标签-->
<div style="display: inline;background-color: brown">CSS样式</div>
<!--display:block内联标签变成块级标签-->
<span style="display:block;background-color: darkviolet">哈哈</span>
<!--内联标签默认不能设置高度和宽度-->
<span style="background-color: greenyellow; height: 50px;width: 200px;">配置管理</span>
<!--当设置display:inline-block时，可以对内联标签设置高度和宽度-->
<span style="display:inline-block;background-color: greenyellow; height: 50px;width: 200px;">配置管理</span> <!--display:none在弹窗时使用；左侧菜单-->
<!--cursor:定制鼠标展示方式-->
</body>
</html>
margin、padding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边距</title>
</head>
<body>
<!--外边距(本身不增加)margin-->
<!--内边距(本身增加)padding-->
<div style="height: 70px;border: 1px solid blue;">
<div style="height: 30px;background-color: red;"></div>
</div>
<hr />
<div style="height: 100px;background-color: #dddddd;border: 1px solid red;">
<div style="margin-top: 30px;margin-left: 100px;">
<input />
<input />
<input />
</div>
</div> </body>
</html>
float
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>漂浮</title>
</head>
<body>
<div style="width: 500px;height: 500px;border:1px solid darkred">
<!--float: left往左漂-->
<div style="width: 30%;background-color: red;float: left;">开发</div>
<div style="width: 30%;background-color: blue;float: right;">测试</div>
<!--style="clear: both必须加在最后-->
<div style="clear: both;"></div>
</div>
</body>
</html>
position
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Position</title>
</head>
<body>
<div style="height: 1000px;background-color: #dddddd"></div>
<!--position根据窗口定位,fixed固定，不随着页面滚动而移动-->
<div style="position: fixed;bottom:100px;right: 200px;">返回顶部（fixed）</div>
<!--absolute随着页面滚动而移动-->
<div style="position: absolute;bottom:100px;right: 200px;">返回顶部（absolute）</div>
</body>
</html>
absolute+relative
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Position</title>
</head>
<body>
<!--relative需要和absolute结合使用，absolute定位根据父级标签中的relative定位，无论有多少个父级标签，它只会找relative定位-->
<div style="height: 500px;width: 400px;border: 1px solid red;position: relative;">
<div style="height: 200px;background-color: darkviolet">
<div style="position: absolute;bottom: 0;right: 0">固定位置</div>
</div>
</div>
</body>
</html>
img
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image</title>
</head>
<body>
<img src="1.jpg" style="height: 500px;width: 500px">
</body>
</html>
display应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
/*模态对话框*/
.modal{
width: 400px;
height:300px;
background-color: blue;
position: fixed;
top:50%;
left:50%;
margin-left: -200px;
margin-top: -150px;
/*优先级，值越大优先级越高*/
z-index: 10;
}
.shadow{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
/*background-color: black;*/
/*!*透明度*!*/
/*opacity: 0.6;*/
background-color: rgba(0,0,0,.6);
z-index: 9;
}
</style>
</head>
<body>
<input class="hide" type="button" value="添加" />
<div class="shadow"></div>
<div class="modal">
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
</div>
<div style="height: 2000px;"></div>
</body>
</html>
页面布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网站</title>
<style>
/*去掉空白*/
body{
margin: 0;
}
ul{
margin: 0;
list-style-type: none;
}
ul li{
float: left;
padding: 0 8px 0 8px;
color: white;
cursor: pointer;
}
/*当鼠标移动到li标签时，自动应用样式*/
ul li:hover{
background-color: greenyellow;
}
.pg_header{
height: 44px;
background-color: #2459a2;
/*居中*/
line-height: 44px;
}
.w{
width: 980px;
margin: 0 auto;
background-color: red;
}
</style>
</head>
<body>
<div class="pg_header">
<div class="w">
<ul>
<li>菜单一</li>
<li>菜单二</li>
<li>菜单三</li>
</ul>
</div>
</div> <div class="pg_body"> </div> <div class="pg_footer"> </div>
</body>
</html>