day02

今天学到了什么

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>