[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}
