1、HTML中常用的标签
1.1、<h1>~<h6>标签
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
运行结果：
02.png
1.2 <p>标签
<p>hello world</p>
运行结果：
03.png
1.3 <ul>、<li>标签
<ul>
<li>小米手机</li>
<li>苹果手机</li>
<li>华为手机</li>
<li>vivo手机</li>
</ul>
运行结果：
06.png
1.4 <input><button>标签
<input type="text"><button>百度一下</button>
运行结果：
05.png
1.5 <img>标签
<img sr="image/test.cjpg" height="400" width="300" alt="这是一个美女" >
<!--
img 图片标签
src:标签的属性
功能：指定图片的位置
alt：当图片加载不出来时，用来描述图片
-->
运行结果：
04.jpg
1.6 <a>、<dl>、<td>、<dd>标签
<a href="https://www.jianshu.com/">简书</a>
<dl>
<dt>html</dt>
<dd>负责网页的结构</dd>
</dl>
运行结果：
07.png
2、CSS样式
<style>
p{
background-color: pink;
color: white;
height: 50px;
line-height: 50px;/*行高会文本在行高中垂直居中*/
text-align: center;/*设置文本对齐方向*/
font-size: 20px;
}
</style>
<body>
<p>不下巨海无以的无上珠宝，不入污泥无以生境界莲花</p>
</body>
运行结果：
08.png
3、CSS常用选择器
3.1 "class""id"
<style>
.one{
color:pink;
}
.two{
color:rgba(47, 226, 107, 0.342);
}
#id{
color:tomato;/*每个ID名都是独一无二的，写样式的时候尽量不用ID选择器*/
}
h1:hover/*鼠标经过时显示的颜色*/{
color:chartreuse;
}
</style>
<body>
<p class="one">hello wolrd</p>
<p class="two">hello wolrd</p>
<p id="three">hello wolrd</p>
<p>hello wolrd</p>
<p>hello wolrd</p>
<h1>hello wolrd</h1>
</body>
运行结果：
09.png
4、盒子模型
<style>
div{
width: 50px;
height: 50px;
background: red;
margin-left: 100px;
margin-top: 100px;
border-style: solid;
border-color: black;/*border--改变元素的宽度*/
padding-left: 20px;
/*padding改变元素的width,height*/
padding-right: 20px;
padding-top: 30px;
padding-bottom: 30px;
}
</style>
<body>
<div>
</div>
</body>
运行结果：
10.png
5、水平居中
<style>
div{
text-align: center;
width: 200px;
height: 200px;
background-color: red;
/*水平居中*/
margin-left: auto;
margin-right: auto;
font-size: 60px;
}
</style>
<body>
<div>hello wolrd</div>
</body>
运行结果：
11.png
6、CSS样式重置
/*样式重置
写样式之前首先要进行样式重置*/
<style>
*{margin: 0;
padding: 0;}
</style>
