一、常用的html标签

  1. <body>
  2.     <h1>一级标题</h1>/*标题标签 h1~h6*/
  3.     <!-- 快速复制shift+alt+下箭头-->
  4.     <p>段落标签</p>
  5.     <img src="images/wan.jpg" alt="">/*插入图片*/
  6.     <a href="https://www.baidu.com">百度</a>   /**/<!-- a 超链接-->
  7.     <ul>                       /*无序列表
  8.         <li>html</li>
  9.         <li>css</li>
  10.         <li>javascript</li>
  11.     </ul>                       */
  12.     <div>div</div>    /*场景：在页面上设置一块区域时使用*/
  13.     <input type="text"> <!-- input是一个输入的框框 -->
  14.     <button>百度一下</button>
  15.     <!--
  16.         定义列表 definition list   DL
  17.         定义的术语 definition term  DT
  18.         定义的描述 definition description dd
  19.     -->
  20.     <dl>                           
  21.         <dt>HTML</dt>
  22.         <dd>html负责网页的结构</dd>
  23.     </dl>
  24.     <!-- h1~h6,p,img,a
  25.     ul li
  26.     div
  27.     input button
  28.     dl dt dd
  29.     -->
  30. </body>

二、常用的css样式

<head>
  <style>
p{
    /* ctrl+/ */
    background-color: pink;/* background-color 背景颜色 */
    color:white;/* 设置字体的颜色 */
    text-align:center; /* text-align:文本对齐方向 left,center,right */
    height: 50px; /* height 高度 */             
    line-height: 50px; /* line-height 行高 给文字行高，他会在这个行高中居中*/
    font-size: 28px; /*字号*/
}
</style>
</head>

三、选择器

<head>
<style>
        /*p{}元素选择器 */ 
        /* p{color:red;} */
         /* .one{}class选择器 特点一：可以给多个元素设置同样的class名 二：可以给一个元素设置多个class */   
          .one{
                color:red;/*元素颜色*/
              background-color: black;/*背景颜色*/
            }   
    </style>
</head>

四、盒子模型

style>
        /* 
        盒子模型：就是说元素由几个部分组成 
        morgin 外边距：可以改变元素的位置
        podding 填充: 可以改变元素的width,height
        border  边框
        content 自身的width,height
        */
        div{
            width: 100px;/*宽*/
            height: 100px;/*高*/
            background: red;/**/
            margin-left: 100px;
            margin-top: 200px;
            margin-bottom: 100px;
            padding-left: 50px;
            padding-top: 100px;
            padding-right: 140px; 
            padding-bottom: 100px;
            /* border,width(宽度) style color(颜色)
            style solid/dotted(实虚线)
             */
            border:10px solid black;/*边框颜色  粗细*/
                    }
        </style>
</head>

五、盒子居中

<head>
<style>
    div{
        /* mmargin-left:auto； margin-right:auto 设置盒子居中 */
        width:100px;
        height:100px;
        background-color:red;
        /* text-align:center 设置文本居中 */
        margin-left: auto;
        margin-right: auto;
    }
    </style>
</head>

六、样式重置

<head>
<style>
    /* 样式重置 写样式之前，首先要进行样式重置 */
    *{margin:0;padding:0}
</style>
</head>