day2

1.常用的HTML标签

`h1~h6` 标题标签 独占一行 粗体 （逐渐变小）
`p` 段落标签 成段展示 独占一行
`img` 图片标签 特殊单标签
`src`--单标签的属性
   功能：指定图片所在位置
`alt`--当图片加载不出来，用来描述图片的
`ul` 无序列表
`li` 列表项
`a` 链接标签
`herf`--指定你所要访问的网址
`dl`--定义列表
`dt`--定义的术语
`dd`--定义的描述

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>6级标题</h6>

01.png

 `<p>hello world</p>`

02.png

 <img src="[images/test.jpg](images/test.jpg)" alt="这个一个美女"> <br> 
<input type="text"><button>百度一下</button> |

03.png

<ul>
           <li>小米手机</li>
           <li>华为手机</li>
           <li>苹果手机</li>
           <li>苹果手机</li>
           
       </ul>
<a href="[https://www.jianshu.com/](https://www.jianshu.com/)">简书</a> 
<div>div</div>
<dl>
           <dt>HTML</dt>
           <dd>负责网页的结构</dd>
       </dl>

04.png

2.css样式

`color`--文字的颜色
`line-height`--行高会文本在行高中垂直居中
`background-color`:设置背景颜色
`text-align`:设置文本的对齐方向
`font-size`:设置字体大小
 `margin:0;padding:0 `样式重置 (写样式前首先要进行样式重置)

 p{
            background-color: pink;
            height:50px;
            line-height: 50px;
            color:#fff;
            text-align: center;
            font-size: 12px;
        }
 <p>不下巨海无以的无上珠宝,不入污泥无以生境界莲花</p>

05.png

3.css常用选择器

`p{} `元素选择器  慎重使用
`.+ClassName{}`
特点：
1.可以给多个标签相同的class名
2.可以给一个标签多个class名
`#+idName{}`
特点:每一个id名都是唯一的
--写样式的时候不要使用id选择器
伪类选择器
`element:hover{}`

4.盒子模型

`margin`--可以改变元素的位置
`borde`r -- 改变元素的宽度
`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;
        }

06.png

5.水平居中

`margin-left: auto;`
`margin-right: auto;`
    元素水平居中

 div{
            text-align: center;
            width:200px;
            height:200px;
            background-color: red;
            margin-left: auto;
            margin-right: auto;
        }

07.png