day02

今天学到了什么

1.常用HTML标签

1.1 段落标签

<p>hello world</p>

1.2 图片标签<src>

<img src="images/timg.jpg" alt="这是张垃圾图片"><br> //其中alt属性是当图片无法显示时对图片的描述,<br>为换行标签

1.3 文本框，按钮

<input type="text"><button>百度一下</button>

1.4 无序列表ul，列表项li

 <ul> 
        <li>小米手机</li>
        <li>苹果手机</li>
        <li>三星手机</li>
 </ul>

1.5 链接标签<a>

<a href="https://www.jianshu.com/">简书</a> //点击简书时为自动跳转到简书网站

1.6 定义标签

<dl>                    //定义列表
        <dt>HTML</dt>   //定义的术语
        <dd>456</dd>    //定义的描述
</dl>

2.CSS样式

2.1 常用的css样式

color:设置文字的颜色
width:设置一个元素的宽度
height:设置一个元素的高度
background-color:设置背景颜色
background-image:设置一个元素的背景图片
line-height:设置文字的行高
text-align:设置文字对其的方式
border-width:边框的宽度

2.2 给<p>设置一个样式

        p{
            background-color: pink;   /* 背景颜色 */ 
            height: 50px;               /* 设置一个高度 */
            line-height: 50px;          /* 行高会让文本在行高中垂直居中 */
            color: white;             /* 字体颜色 */
            text-align: center;         /* 设置文本的对其方向*/
            font-size: 20px;            /* 设置字体大小*/ 
        }

      <p>hello world</p>

效果展示：

p标签.png

3.css常用选择器

3.1class选择器

        .one{
            color: pink;
        }
        .two{
            background-color: #eee;
        }

    <p class="one two">123</p>
    <p class="one">456</p>
    <p class="two">789</p>

效果展示：

class.png
3.2 id选择器（不常用）

        #ps{
            color: blue;
        }

 <p id="ps">789789</p>

4.盒子模型

  /*
        margin
        功能：可以改变元素的位置
        border: 可以改变元素的宽度
        padding : 可以改变元素的width和height
        */
        div{
            width: 100px;
            height: 100px;
            background-color: 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;
        }

盒子模型.jpg

5.水平居中

<style>
        div{
            /* 元素水平居中 */
            margin-left: auto;
            margin-right: auto;
        }
 </style>

6.样式重置

    <style>
        /* 样式重置
        写样式之前要对所有样式进行重置*/
        *{margin: 0; padding: 0;}
    </style>

今天不会什么

对margin，padding的概念模糊不清，应着重加强记！