Day14 html简介
初识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>
Day14 html简介的更多相关文章
- day14 linux三剑客之sed命令
day14 linux三剑客之sed命令 sed命令 Sed 主要用来自动编辑一个或多个文件.简化对文件的反复操作.编写转换程序等. sed(流式编辑器) : sed主要用来修改文件. 1.sed命令 ...
- ASP.NET Core 1.1 简介
ASP.NET Core 1.1 于2016年11月16日发布.这个版本包括许多伟大的新功能以及许多错误修复和一般的增强.这个版本包含了多个新的中间件组件.针对Windows的WebListener服 ...
- MVVM模式和在WPF中的实现（一）MVVM模式简介
MVVM模式解析和在WPF中的实现(一) MVVM模式简介 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在 ...
- Cassandra简介
在前面的一篇文章<图形数据库Neo4J简介>中,我们介绍了一种非常流行的图形数据库Neo4J的使用方法.而在本文中,我们将对另外一种类型的NoSQL数据库——Cassandra进行简单地介 ...
- REST简介
一说到REST,我想大家的第一反应就是“啊,就是那种前后台通信方式.”但是在要求详细讲述它所提出的各个约束,以及如何开始搭建REST服务时,却很少有人能够清晰地说出它到底是什么,需要遵守什么样的准则. ...
- Microservice架构模式简介
在2014年,Sam Newman,Martin Fowler在ThoughtWorks的一位同事,出版了一本新书<Building Microservices>.该书描述了如何按照Mic ...
- const,static,extern 简介
const,static,extern 简介 一.const与宏的区别: const简介:之前常用的字符串常量,一般是抽成宏,但是苹果不推荐我们抽成宏,推荐我们使用const常量. 执行时刻:宏是预编 ...
- HTTPS简介
一.简单总结 1.HTTPS概念总结 HTTPS 就是对HTTP进行了TLS或SSL加密. 应用层的HTTP协议通过传输层的TCP协议来传输,HTTPS 在 HTTP和 TCP中间加了一层TLS/SS ...
- 【Machine Learning】机器学习及其基础概念简介
机器学习及其基础概念简介 作者:白宁超 2016年12月23日21:24:51 摘要:随着机器学习和深度学习的热潮,各种图书层出不穷.然而多数是基础理论知识介绍,缺乏实现的深入理解.本系列文章是作者结 ...
随机推荐
- Nodejs负载均衡：haproxy，slb以及node-slb - i5ting的个人空间 - 开源中国社区
Nodejs负载均衡:haproxy,slb以及node-slb - i5ting的个人空间 - 开源中国社区 undefined
- Java 8：不要再用循环了
本文由 ImportNew - 进林 翻译自 deadcoderising.欢迎加入翻译小组.转载请见文末要求. 正如我之前所写的,Java 8中的新功能特性改变了游戏规则.对Java开发者来说这是一 ...
- List<Map<String,String>>操作(遍历，比较)
1.List<Map<String,String>>的遍历: Map<String,String> map = new HashMap<String, Str ...
- UVa1151 Buy or Build
填坑(p.358) 以前天真的以为用prim把n-1条边求出来就可以 现在看来是我想多了 #include<cstdio> #include<cstring> #include ...
- 查看pid
可以使用ps -ef | grep httpd查看PID 然后kill –l PID
- windows 与Linux 互传文件
下载putty,将putty的安装路径添加到Windows的环境变量中: 我的电脑->属性->高级->环境变量->系统变量,双击其中的Path,在分号后添加putty的 ...
- java文件处理工具类
import java.io.BufferedInputStream; import java.io.BufferedOutputStream; import java.io.BufferedRead ...
- http学习笔记一
- MVC+MEF+UnitOfWork+EF架构，网站速度慢的原因总结！（附加ANTS Memory Profiler简单用法）
(最近使用内存分析工具ANTS Memory Profiler,以及其他网友提供的意见发现最终导致内存泄漏的就是MEF,在此特地更新下,与大家分享!最下面红色字体) 最近参考使用了郭明峰的一套架构来做 ...
- How to customize authentication to my own set of tables in asp.net web api 2?
ssuming your table is called AppUser, convert your own AppUser domain object to IUser(using Microsof ...