# HTML-CSS01-PM
- 为什么要学习HTML
- HTML和CSS是什么
- 常用的HTML标签
- 常用的CSS样式
- 盒子模型
## 1.为什么要学习HTML和CSS
![](https://box.kancloud.cn/01b4c77fe3c3a4ea2a79f277664f81f5_698x513.png)
网页就是由HTML和CSS书写而成
## 2. HTML和CSS是什么
把网页比作一个房子
![](https://box.kancloud.cn/820ab3cc05642b8cde9af554ff0c284e_1200x801.jpg)
网页就是由一个个HTML标签组成
![](https://box.kancloud.cn/5356d6414428c0abec7f3063c46eb99b_1080x789.jpg)
CSS样式负责修饰HTML标签
## 3.了解HTML标签
```
//开始标签
<body>
</body>
//结束标签
```
## 4.HTML标签的特点:语义化
(https://blog.csdn.net/njcgosling/article/details/47130723
)
## 5.常用的HTML标签
```
h1~h6,p,img,div,a,input,button,ul,li,dl,dt,dd
```
## 6.常用的css样式
### 6.1 css的语法
![](https://box.kancloud.cn/4e99bd5022914f1812c125cb6f272a6e_349x119.png)
```
selector {property: value}
selector选择器通常是您需要改变样式的 HTML 元素
属性(property)是您希望设置的样式属性(style attribute)
eg:
//HTML
<h1>hello world</h1>
//css
h1 {color:red; font-size:14px;}
```
### 6.2css常用选择器
```
<p class="one" id="two">hello world</p>
p{} //元素选择器
p.one{} //class选择器
p#two{} //id选择器
```
### 6.3盒子模型
```
//元素居中仅仅针对块元素有效
margin-left:auto;
margin-right:auto;
```
### 6.4样式重置
```
*{margin:0;padding:0}
```
### 6.5常用的css样式
```
color:设置文字的颜色
width:设置一个元素的宽度
height:设置一个元素的高度
background-color:设置背景颜色
background-image:设置一个元素的背景图片
line-height:设置文字的行高
text-align:设置文字对其的方式
border-width:边框的宽度
border-style:边框的样式
border-color:边框的颜色
p:hover{color:blue}当鼠标移动到元素上时可以改变元素的css样式
```