一.html的结构，标签

1.1常用标签

<p></p>

段落标签

<h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6>

标题标签

<ul>
      <li>(文本)</li>
        .....
     <li>          </li>
</ul>

ul 是无列表项
li 是列表项

1.2 链接标签

<a href="https://www.       .com/">(链接名称)</a>

a 是链接标签
href 是指定你所访问的网址

1.3

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

2.1.css样式

在<head></head>中书写“style”样式，即

<head>
        <style>
        </style>
</head>

2.2.css样式中的标签结构

color：
line-height：
text-align：
......

color -- 文字的颜色
line-height -- 行高文本在行高中垂直居中
text-align 文本的状态样式（居中，偏左，偏右）
p{} 元素选择器
.+className{}

eg：
p{
            background-color:red;
            height:50px;
            line-height:50px;
            color:#fff;
            text-align：center；
            font-size：12px;
}

{ #+idName{ } 特点每个id名都是唯一的--写样式时不要用id选择器}

二.标签作用

1.1.水平居中

<style>
        div{
            width:100px;
            height:100px;
            text-align:center;
            margin-left: auto;
            margin-right: auto;
            color:red;
            background-color: black
        }
  </style>

margin-left: 水平向左移动
margin-right: 水平向右移动

#######1.2样式重置

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

1.3.盒子模型

 div{
       width:100px;
       height:100px;
       background:rgb(226, 47, 47);
       margin-left: 100px;

       border-width:10px;
       border-style:solid;
       border-color:black;
       padding-left:20px;
       padding-right:20px;
       padding-top:30px;
       padding-bottom:30px; }

/* margin
功能:可以改变元素的位置
border -- 改变元素的宽度
padding --改变元素的width,heigh