一、head.demo.html
<!--html5-->
<!DOCTYPE html>
<html lang="en">
<head>
<!--head中写的东西有个特点 就是不会在页面中呈现-->
<!--字符集编码-->
<!--自闭合标签-->
<meta charset="UTF-8">
<!--标签中存在属性-->
<!--有标签自带属性和自定义属性-->
<!--打开页面1秒后刷新-->
<!--<meta http-equiv="refresh" content="1">-->
<!--打开页面1秒后跳转到百度-->
<meta http-equiv="refresh" content="1;http://www.baidu.com">
<!--title是你浏览器tab的标签名-->
<!--主动闭合标签-->
<title>金牛座</title>
<!--title的图标-->
<!--rel代表告诉浏览器我要把link当做title的图标-->
<link rel="shortcut icon" href="http://ui.imdsx.cn/static/image/dsx_Small.jpg" >
<!--引入CSS样式表-->
<link rel="stylesheet" href="xx.css">
<!---引入js或者写js的->
<script></script>
</head>
<body>
</body>
</html>
二、body.demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
dfggfgfdgdsf
<!--<p>段落标签-->
<!--<br>换行标签-->
<!--<p>dfggfgfdgdsf<br>-->
<!--dfggfgfdgdsf</p>-->
<!--标题标签-->
<h1>标题标签</h1>
<h2>标题标签</h2>
<h3>标题标签</h3>
<h4>标题标签</h4>
<h5>标题标签</h5>
<h6>标题标签</h6>
<!--div是块级标签-->
<!--块级标签无论自己有多大 都占满一整行-->
<!--伪白板标签-->
<!--<div>水电费</div>-->
<!--span行内标签 或叫 内联标签-->
<!--行内自己有多大 就占多大-->
<!--白板标签 没有附着css样式的就叫做白板标签-->
<!--<span>水电费</span>-->
<!--<p>s123</p>-->
<!--<span>水电费</span>-->
<!--文本框-->
<!--name属性是跟后端交互的key value属性是跟后端交互的值-->
<!--{"username":"admin","passwd":"123123"}-->
<!--<input type="text" placeholder="请输入用户名" value="admin" name="username">-->
<!--passwd 密文-->
<!--<input type="password" placeholder="请输入密码" name="passwd">-->
<!--radio 单选-->
<!--<span>男</span><input type="radio" name="sex">-->
<!--<span>女</span><input type="radio" name="sex">-->
<!--check box 多选框-->
<!--<span>奔驰</span><input type="checkbox" checked="checked">-->
<!--<span>宝马</span><input type="checkbox" name='c' value='1'>-->
<!--上传文件-->
<!--<input type="file">-->
<!--表单标签-->
<form action="http://www.baidu.com" method="post">
<div>
<span>用户名：</span>
<input type="text" placeholder="请输入用户名">
</div>
<div>
<span>密   码：</span>
<input type="text" placeholder="请输入密码">
</div>
<div>
<!--button如果想要有操作 只能通过js绑定事件来做-->
<input type="button" value="登录">
<!--submit按钮如果和form表单连用则会直接触发请求-->
<input type="submit" value="注册">
当reset和form表单连用时，会触发重置操作
<input type="reset">
</div>
</form>
<!--特殊转义符-->
<!--<p></p>-->
<p></p>
<!--label扩展input的可点击范围-->
<!--<label for="i1">用户名</label>-->
<!--<input id="i1" type="text" placeholder="请输入密码">-->
<!--复文本标签-->
<!--<textarea>金牛座复文本标签</textarea>-->
<!--下拉框标签-->
<!--<select name="s1">-->
<!--<option value="1">中秋</option>-->
<!--<option value="2">国庆</option>-->
<!--<option selected="selected">都过不上</option>-->
<!--</select>-->
<!--<select>-->
<!--<optgroup label="黑龙江">-->
<!--<option>请选择城市</option>-->
<!--<option>哈尔滨</option>-->
<!--<option>牡丹江</option>-->
<!--</optgroup>-->
<!--<optgroup label="河北">-->
<!--<option>石家庄</option>-->
<!--<option>秦皇岛</option>-->
<!--</optgroup>-->
<!--</select>-->
<!--超链接标签-->
<!--<a href="http://www.baidu.com">跳转到百度</a>-->
<!--图片标签-->
<!--<img src="http://ui.imdsx.cn/static/image/dsx_Smal1l.jpg" alt="图片加载失败战士的文案" title="鼠标悬浮显示的文案">-->
<!--列表 点的列表-->
<!--<ul>-->
<!--<li>第一列</li>-->
<!--<li>第二列</li>-->
<!--</ul>-->
<!--<!–数字的列表–>-->
<!--<ol>-->
<!--<li>第一列</li>-->
<!--<li>第二列</li>-->
<!--</ol>-->
<table border="1">
<thead>
<tr>
<th>id</th>
<th>请求方式</th>
<th>请求参数</th>
<th colspan="2">操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td rowspan="4">post</td>
<td>{}</td>
<td>修改</td>
<td>执行</td>
</tr>
<tr>
<td>1</td>
<td>{}</td>
<td>修改</td>
<td>执行</td>
</tr>
<tr>
<td>1</td>
<td>{}</td>
<td>修改</td>
<td>执行</td>
</tr>
<tr>
<td>1</td>
<td>{}</td>
<td>修改</td>
<td>执行</td>
</tr>
</tbody>
</table>
</body>
</html>
三、css样式及优先级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--head中style是第一处写css样式的地方-->
<style>
.c1{
background-color: red;
}
</style>
<!--第三种引入css样式表-->
<link rel="stylesheet" href="s.css">
s.css里面：
.c1{
background-color: pink;
}
</head>
<body>
<!--第二种通过属性的方式对标签增加css样式-->
<div class="c1" style="background-color: black">1</div>
<!--优先级-->
<!--由内而外 由近到远-->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*.c1{*/
/*!*宽度*!*/
/*width: 100px;*/
/*!*高度*!*/
/*height: 100px;*/
/*!*背景色*!*/
/**/
/*}*/
/*.c1{*/
/*width: 100px;*/
/*height: 100px;*/
/*!*外边框 1像素 红色 实线*!*/
/*border: 1px red solid;*/
/*!*水平居中*!*/
/*text-align: center;*/
/*!*垂直居中*!*/
/*line-height: 100px;*/
/*}*/
/*.f1{*/
/*width: 100px;*/
/*height: 48px;*/
/**/
/*float: left;*/
/*}*/
</style>
</head>
<body>
<!--<div class="c1"></div>-->
<!--font-size 大小 font-weight 粗细-->
<!--<div style="font-size: xx-large;font-weight: bolder">金牛座</div>-->
<!--<div class="c1">1</div>-->
<!--浮动-->
<!--<div class="f1"></div>-->
<!--<div class="f1" style="</div>-->
<!--<div class="f1" style="float: right"></div>-->
<!--宽度可以使用百分比的方式 高度 不可以 写百分比-->
<!--<div style="width: 30%;height: 48px;</div>-->
<!--display 可以让标签在行内 和 块级之间 自由转换
块转行内display: inline;
行内转块display: block;
即使块 又是 行内display:inline-block;
-->
<!--<div style="display: inline;">金牛座</div>-->
<!--<span style="display: block;">金牛座</span>-->
<!--行内标签不可以应用 宽、高 外边距 内边距的样式-->
<!--<span style="width: 100px;height: 100px">123</span>-->
<!--<span style="display:inline-block;width: 100px;height: 100px;"></span>-->
<!--<div style="display:none;border:1px red solid;width:100px;height: 100px;"></div>-->
<!--<input type="file">-->
<!--外边距
不改变自身，针对外侧进行像素移动
-->
<!--<div style="width: 100%;height: 100px;border: 1px red solid">-->
<!--<div style="margin-top:1px;width: 100%;height: 48px;</div>-->
<!--</div>-->
<!--内边距
改变自身
-->
<!--<div style="width: 100%;height: 100px;border: 1px red solid">-->
<!--<div style="padding-top:1px;width: 100%;height: 48px;</div>-->
<!--</div>-->
<!--分层.html-->
<!--<input type="button" value="登录" style="cursor: pointer">-->
<!--overflow滚动条
overflow: hidden 当图片或内容大于外层div时，自动 截取左上角图片
overflow: auto 当内容或图片小于外层div则自动隐藏滚动条
overflow: scroll 无论大小 都在增加滚动条
-->
<!--<div style="overflow: scroll;border: 1px black solid;width: 200px;height: 200px">-->
<!--<img src="http://ui.imdsx.cn/static/image/dsx_Small.jpg">-->
<!--</div>-->
<!--<div style="background-image: url('http://ui.imdsx.cn/static/image/dsx_Small.jpg');background-repeat:repeat-y;width: 200px;height: 200px;border: 1px black solid">-->
<!--</div>-->
<!--<div style="background-position: 1px 1px;background-repeat: no-repeat;background-image: url('http://ui.imdsx.cn/static/image/icon.png');width: 20px;height: 20px;border: 1px black solid;"></div>-->
</body>
</html>
四、分层
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
height: 48px;
background-color: green;
position: fixed;
top:0;
left: 0;
right: 0;
}
</style>
</head>
<!--postion 分层 fixed 绝对定位-->
<body style="margin: 0">
<!--<div class="c1"></div>-->
<!--<!–<div style="height: 48px;width: 48px;position: fixed;right: 0;bottom: 0;"></div>–>-->
<!--<div style="margin-top:48px;height: 1000px;width: 100%;border: 1px red solid;-->
<!--金牛座 真厉害-->
<!--</div>-->
<!--postion 相对定位-->
<!--<div style="position: relative;width:500px;height:500px;border:1px black solid;">-->
<!--<div style="position: absolute;width: 100px;height: 100px;</div>-->
<!--<div style="position: absolute;width: 100px;height: 100px;</div>-->
<!--<div style="position: absolute;width: 100px;height: 100px;</div>-->
<!--<div style="right: 0;bottom:0;position: absolute;width: 100px;height: 100px;</div>-->
<!--</div>-->
<!--z-index-->
<!--<div style="position: relative;width: 200px;height: 200px;border: 1px red solid">-->
<!--<div style="z-index: 10;position: absolute;width: 200px;height: 200px;</div>-->
<!--<div style="z-index: 9;position: absolute;width: 200px;height: 200px;</div>-->
<!--</div>-->
</body>
</html>
