今天学到了什么
1.HTML常用的标签
① p--段落标签
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>6级标题</h6>
②img 图片标签
特殊：单标签
src--标签的属性
功能:指定图片所在的位置
alt--当图片加载不出来,用来描述图片的
title--鼠标移动到图片上时，图片的说明
<img src="images/test.jpg" alt="描述语句">
③ul 无序列表
li 列表项
<ul>
<li>小米手机</li>
<li>华为手机</li>
<li>苹果手机</li>
<li>苹果手机</li>
</ul>
④a 链接标签
href--指定你所要访问的网址
<a href="https://www.jianshu.com">简书</a>
⑤div标签：用于在网页中开辟位置
<div>content</div>
⑥dl -- 定义列表
dt -- 定义的术语
dd -- 定义的描述
<dl>
<dt>HTML</dt>
<dd>负责网页的结构</dd>
</dl>
1.1常用快捷键
end
可以快速的切换到标签的末尾
shift+alt+↓ -- 快速复制到下一行
2.CSS样式
<style>
/*
color--文字的颜色
line-height--行高会文本在行高中垂直居中
background-color:设置背景颜色
text-align:设置文本的对齐方向
font-size:设置字体大小
*/
</style>
p{
background-color: pink;
height:50px;
line-height: 50px;
color:#fff;
text-align: center;
font-size: 12px;
}
<p>文字</p>
2.1 CSS常用选择器
①元素选择器（慎重使用）
p{
color:red;
}
②class选择器 （
.+ClassName{}
特点：
可以给多个标签相同的class名
可以给一个标签多个class名）
.one{
color:pink;
}
.two{
background:#eee;
}
③id选择器（#+id名{}
特点:每一个id名都是唯一的
--写样式的时候不要使用id选择器）
#three{
color:yellow;
}
④伪类选择器（元素名:hover{}）
h1:hover{
color:green;
}
实例
<p class="one two">hello world</p>
<p class="one">hello world</p>
<p class="one">hello world</p>
<p id="three">hello world</p>
<p >hello world</p>
<h1>hover</h1>
3.盒子模型
marge功能:可以改变元素的位置
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;
}
3.1div水平居中
margin-left: auto;
margin-right: auto;
3.2样式重置
<style>
/* 样式重置
写样式之前首先要进行样式重置
*/
*{margin:0;padding:0}
</style>
