初识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>