day02

今天学到了什么

1常用的标签

- 标题标签//h1~h6（大小不一）
-段落标签//<p>一大段</p>
-快捷键 end
        可以快速的切换到标签的末尾
        shift+alt+↓ -- 快速复制
-img  图片标签
 特殊：单标签
src--标签的属性 
 功能:指定图片所在的位置
图片加载不出来,用来描述图片的//<img src="images/test.jpg" alt="这个一个美女"> <br>//换行
-input 输入框
 button 按钮//<input type="text"><button>百度一下</button>
-ul 无序列表
 li 列表项（例： <ul>
           <li>小米手机</li>
<ul>）
-a 链接标签
           href--指定你所要访问的网址//
<a href="https://www.jianshu.com/">简书</a>
-div //创建一 盒子
-dl -- 定义列表
   dt -- 定义的术语
  dd -- 定义的描述//1 <dl>
           <dt>HTML</dt>
           <dd>负责网页的结构</dd>
       </dl>
2<dl>
<dt>尼采说:</dt>
     <dd>
    对待生命你不妨大胆点，因为它终将离你远去
     </dd>
    </dl>

2常用css

- color--文字的颜色
        line-height--行高会文本在行高中垂直居中
        background-color:设置背景颜色//如果插入背景图 background-color:url（图片地址//一般不用根地址 除非图片文件夹和某.html不在同一大文件夹中）
        text-align:设置文本的对齐方向
        font-size:设置字体大小

3常用盒子选择器

-p，li，h1,.content，{
color:yellow;（其它css都能用）
} 元素选择器
.+ClassName{}
        特点：
        1.可以给多个标签相同的class名
        2.可以给一个标签多个class名//先在body中定义<p class="one">hello world</p>
再在style中运用.one{
            color:pink;
        }
-伪类选择器
        element（h1，p 都行）:hover{}
        h1:hover{
            color:green;
cursor: pointer;//指针鼠标变手
        }
-  #+idName{

        }
        特点:每一个id名都是唯一的
        --写样式的时候不要使用id选择器//例：
<style>
#three{
            color:yellow;
        }
</style>
<p id="three">hello world</p>

盒子模型

   -   margin()
        功能:可以改变元素的位置
        border -- 改变元素的宽度
        padding --改变元素的width,height//top bottom left right
-元素居中 //margin-left: auto;
            margin-right: auto;(一般情况直接一个大盒子<div> </div>)

样式重置

        写样式之前首先要进行样式重置//

 *{margin:0;padding:0}//
*代表所有标签

一个小技巧

//如何微操作盒子内或者说html中你想要的部分调整一些有关数字的css样式

1.png