html、css

一、常用标签
    <!--注释的内容-->

    <!--标题标签:6个级别-->
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>二级标题</h3>
    <h6>六级标题</h6>
    <!--常用标签-->
    <p>段落标签p，用来存放一大段文字</p>
    <div>做前端布局最最常用的标签，div里面可以放任意内容，任意标签</div>
    <span>经常用来存放几个文字、小图片等</span>

    <br>  换行符号

二、常用的文字控制属性

    color:red; 文字颜色
    font-size:30px;  文字大小
    font-family:"宋体"; 文字类型
    font-weight:bold;  文字加粗
    font-style:italic;  文字倾斜
    text-decoration:underline;  设置下划线
    line-height:26px;   设置行高
    text-indent:2em;    首行缩进两个单位

    三个去掉默认样式：
    font-weight: normal;    文字不加粗
    font-style: normal;     文字不倾斜
    font-decoration: none;  文字没有下划线

三、边框属性
    四个方向的边框：边框粗细 实线/虚线 颜色
    border: 5px solider/dash #000

    四个方向设置边框：
    border-top: 5px solider #000
    border-left:
    border-right:
    border-bottom:

四、列表标签
    1、无序
        <ul>
            <li></li>
        </ul>

    2、有序
        <ol>
            <li></li>
        <ol>

    3、项目列表
        <dl>
            <dt></dt>
            <dd></dd>
            <dd></dd>
            <dd></dd>
        </dl>

    在css中去掉默认样式（列表样式）：
        ul{
            list-style: none;
        }

五、表单(写在表单内的元素才能提交到服务器)
    1、表单区域：
        <form action="要提交到的地址" method="post"></form>

    2、文本框：
        <input type="text" placeholder="请输入用户名">
        <input type="password" placeholder="请输入密码">

    3、提交按钮
        <input type="submit" value="注册">

    4、普通按钮
        <input type="button" value="普通按钮">

    5、重置按钮
        <input type="reset" value="重置">

    6、单选框
        <input type="radio" name="sex" id="man"><label for="man">男</label>
        注意： 1、要实现单选所有文本的name必须相同;
              2、要实现点字也能选,文本中必须有id属性,label中的for属性一定要等于id属性的值(文字写在label内);
              3、默认选中,文本中加上checked

    7、下拉菜单:
        <select>
            <option value="北京">北京</option>
            <option value="广州" selected>广州</option>
        </select>

    8、上传文件：
        <input type="file">

    9、文本域：
        <textarea><textarea>

六、盒子实际尺寸的计算：width+padding+border
    box-sizing:border-box:加上这个样式,盒子的尺寸就固定了

七、文字居中
    1、水平居中：text-align:center;
    2、垂直居中：行高等于字体的大小;

八、盒子水平居中：margin: 0 auto
    margin-left给负值,盒子会向左偏移

九、盒子隐藏与显示
    display: none;   /*隐藏之后不占位*/
    display: block;  /*对应的盒子显示*/

十、盒子内容溢出处理
    1、overflow:visible;默认值。会呈现在盒子之外;
    2、overflow:hidden; 隐藏;
    3、overflow:scroll; 有没有超出都有滚动条
    4、overflow:auto;自调节滚动条

十一、表格标签
     <!--table  表格整体标签-->
     <!--tr  行标签，一个tr表示一行-->
     <!--td  单元格标签，一个td表示一个单元格-->

        <table>
            <tr>
                <td>1-1</td>
                <td>1-2</td>
                <td>1-3</td>
            </tr>
            <tr>
                <td>2-1</td>
                <td>2-2</td>
                <td>2-3</td>
            </tr>
        </table>

        /*设置表格边框折叠*/
        border-collapse:collapse;

        table：大盒子要加边框(大小可调节)
        td:小盒子要加边框(撑满)

        td的标签属性(column列,row行)
        <td colspan="2">1-1</td>  <!--理解成跨了两列，对应删除1-2-->
        <td rowspan="2">1-3</td>  <!--理解成跨了两行，对应删除2-3-->

十二、定位(要配合top、lef等方向属性来使用,子绝父相)
    1、相对定位:position:relative;   以当前位置的左上角为起点(占位)

    2、绝对定位:position:absolute;   以父级的左上角为起点(不占位)

    3、固定定位:position:fixed;      以界面的左上角为起点(不占位)
        定位居中：
            position: fixed;
            right: 50%;
            top: 50%;
            width: 600px;
            height: 600px;
            margin-right: -300px;
            margin-top: -300px;
        盒子居中：
            margin: 0 auto;

十三、css权重
    权重：
        标签选择器 < 类选择器< id选择器 < 行内样式