1、相对地址与绝对地址
相对地址：相对于引用文件本身去定位被引用的文件地址
绝对地址：相对于磁盘的位置去定位文件的地址 ps：当整体文件迁移，顶层目录和盘符改变而找不到文件
2、列表标签
（1）有序列表
<ol>
<li>列表标题一</li>
<li>列表标题二</li>
<li>列表标题三</li>
</ol>
（2）无序列表
<ul>
<li>列表标题一</li>
<li>列表标题二</li>
<li>列表标题三</li>
</ul>
（3）自定义列表
<dl>
<dt>列表标题</dt>
<li>子标题一</li>
<li>子标题二</li>
</dl>
3、列表技巧
1、列表的内容是可以链接的，点击链接到新闻或者文章的具体内容
<li><a href="#">列表标题一</a></li>
2、去掉样式（对i定义列表无效） list-style 去掉列表项的小圆点，比如：list-style:none
4、html表单
如果想要把页面的很多信息传递到后台去，那么需要使用表单标签form
1>action属性 定义表单数据提交的地址
2>method属性 定义表单提交的方式，一般有GET和POST方法
<form action="地址。。。" method="GET"></form>
input标签
（1）input标签（输入框标签）
type属性功能是: 决定input输入框是什么类型的。 text: 输入普通文本 password: 输入密码，会隐藏信息
value属性： 定义表单元素的值，
name属性： 定义表单元素的名称，此名称是提交数据时的键名
<input>
<input type="text">
<input type="password">
补充：空格
&emsp； -> 全角
&ensp； -> 半角
（2）
<label for="inp1">用户名：</label><input type="text" id="inp1"><br><br>
（3）radio 单选按钮 -> input的的type属性的值
单选按钮：(radio)如果两个或者多个只能选一个，name值必须相同
设置默认值：checked (H5新规定 当属性和值相同时，可以只写属性不写值)
<input type="radio" name="gender" checked>男 <input type="radio" name="gender">女<br><br>
（4）checkbox 多选按钮 -> input的type属性的值
设置默认值 ：checked
爱好：<input type="checkbox" checked>足球<input type="checkbox">篮球<input type="checkbox">乒乓球<br><br>
（5）file 上传文件 -> input的type属性的值
<input type="file">
（6）submit 上传文件 -> input的type属性的值
<input type="submit">
（7）reset 重置按钮 -> input的type属性的值
<input type="reset"> <!--reset需要写在form标签内-->
（8）button 普通按钮 -> input的type属性的值
<input type="button" value="按钮1">
非input标签
（1）textarea 文本框
禁止拖拽：resize: none;
去掉蓝色外边线 ：outline-style: none;
（2）select标签
selected:可以设置默认选项
size: 可以显示多个选项
mutiple： 可以选择多个选项
（3）button普通按钮
<button disabled>普通按钮2</button> <!-- disabled: 禁用标签，标签变灰色，也可以禁用文本框-->
5、css选择器二
（4）id选择器
通过id名来选择元素，元素的id名称不能重复，id名一般给程序使用，所以不推荐使用id作为选择器。
#box{color:red}
-------------------------------
<p id="box">这是一个段落标签</p>
（5）组选择器
如果有同样的样式使用设置多个选择器
box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}
---------------------------------------------
<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>
（6）伪类选择器
常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态。
.box1:hover{width:300px;}
6、CSS盒子模型
模型分为内外四层（内—>外）：
（1）content
（2）padding
内边距：查看元素的时候，默认是绿色
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
四个方向：
padding: 10px; 四个方向
padding: 10px 100px; 上下 左右
padding: 10px 100px 200px; 上 左右 下
padding: 10px 20px 30px 40px; 上 右 下 左
（3）border
边线:border:粗细 类型 颜色
border-top: 10px solid yellowgreen;
border-bottom: 10px solid yellowgreen;
border-left: 10px solid yellowgreen;
border-right: 10px solid yellowgreen;
ps：solid:直线 dashed:虚线 dotted:点线
（4）margin
外边距:查看元素的时候，默认时土黄色
块级元素:右侧或者空白的部分，都用margin补齐
7、其他
（1）body
body 默认有8px的margin，(很多标签在去除样式之后在使用)
box-sizing: border-box 盒子的宽高是在加上padding和border之后的值
（2）颜色
1>单词： red；
2>#ffffff； 0-9abcdef------如果两位两位i一样可简写如： aabbdd -> abd
3>单词；rgb（255，255，255）； -> (0,0,0) 是黑色。
（3）盒子居中：
1>margin: auto；
2>margin:0 auto；
3>margin-left: auto;
4>margin-right: auto;
（4）文字居中
左右居中：text-align:center;
上下居中：line-height: 200px;
（5）css初始化
* {
padding: 0;
margin: 0;
list-style: none;
}
8、显示和隐藏盒子
（1）隐藏盒
display: none; -> 不占位
visibility: hidden; -> 占位
（2）显示盒子
display: block -> 占位
display: inline -> 一行显示，不能设置宽高
（3）css元素溢出
overflow属性：当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式
overflow的设置项：
1、visible 默认值。内容不会被修剪，会呈现在元素框之外。
2、hidden 内容会被修剪，并且其余内容是不可见的。
3、scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
4、auto 当超出时滚动条显示，没有超出不显示
（4）浮动
想让两个块级独占一行的元素在一行显示，可以使用浮动(float)或者定位
1、float: none 默认值。代表盒子本身没有浮动。
2、float: left 让填写代码的盒子以左侧为基准，对齐了浮动。
3、float: right 让填写代码的盒子以右侧为基准，对齐了浮动。
解决办法: 把浮动的盒子单独用包起来，父盒子设置高度或者设置overflow: hidden;
总结：
1、浮动的盒子不占位置，所以下面的盒子会顶上来，被浮动的盒子盖住。
2、一个盒子里的子盒子要么都浮动，要么都不浮动