[TOC]
## 1.常用的HTML标签
### 1.1 h1~h6
表示字体大小依次递减的标题 其中h1最大
表示方法<h1>内容</h1>
### 1.2 p
p--段落标签
表示方法<p>内容</p>
### 1.3 img
img 图片标签
特殊:单标签
用法:<img src="images/test.jpg" alt="这个一个美女"> <br>
### 1.4 src
src--标签的属性
功能:指定图片所在的位置
用法: <img src="images/test.jpg" alt="这个一个美女"> <br>
### 1.5 alt
alt--当图片加载不出来,用来描述图片的
用法: <img src="images/test.jpg" alt="这个一个美女"> <br>
### 1.6 < br>
换行
### 1.7 end
可以快速的切换到标签的末尾
shift+alt+↓ -- 快速复制
### 1.8 ul li 标签
ul 无序列表
li 列表项
用法: <ul>
<li>小米手机</li>
<li>华为手机</li>
<li>苹果手机</li>
<li>苹果手机</li>
</ul>
### 1.9 a
a 链接标签
### 1.10 href
href--指定你所要访问的网址
<a href="https://www.jianshu.com/">简书</a>
### 1.11 dl dt dd
dl -- 定义列表
dt -- 定义的术语
dd -- 定义的描述
<dl>
<dt>HTML</dt>
<dd>负责网页的结构</dd>
</dl>
## 2. css样式
### 2.1 css属性
color--文字的颜色
line-height--行高会文本在行高中垂直居中
background-color:设置背景颜色
text-align:设置文本的对齐方向
font-size:设置字体大小
用法:
p{
background-color: pink;
height:50px;
line-height: 50px;
color:#fff;
text-align: center;
font-size: 12px;
}
cursor: pointer; 表示鼠标经过时变成手的形状
h4:hover{opacity:.5;} 表示鼠标经过时改变的透明度
background-image: url("img/timg2.jpg");背景图片表示方法
border: 1px solid springgreen; 大小 样式 颜色
## 3.css选择器
### 3.1使用方法
1. p{} 元素选择器 慎重使用
2. .+ClassName{}
特点:
1.可以给多个标签相同的class名
2.可以给一个标签多个class名
3. #+idName{
}
特点:每一个id名都是唯一的
--写样式的时候不要使用id选择器
4.伪类选择器
element:hover{}
用法: h1:hover{
color:green;
}
## 4.盒子模型
### 4.1使用方法
margin
功能:可以改变元素的位置
border -- 改变元素的宽度
padding --改变元素的width,height
用法:
div{
width:100px;
height:100px;
background:red;
margin-left: 100px;
margin-top: 100px;
border-width: 10px;
border-style: solid;
border-color: black;
padding-left:20px;
padding-right:20px;
padding-top: 30px;
padding-bottom: 30px;
}
## 5.水平居中
### 5.1使用方法
div{
text-align: center;
width:200px;
height:200px;
background-color: red;
/* 元素水平居中 */
margin-left: auto;
margin-right: auto;
}
## 6.样式重置
### 6.1使用方法
写样式之前首先要进行样式重置
用法:
*{margin:0;padding:0}