------！bling bling bling  咳咳 ，听好  ，前端这种东西，简单且繁琐，稍微整理了笔记    来来回回也就那些，难度不大还很好玩    够你玩一段时间了。！--------

Web标准：结构  样式  行为    （熟记！）

标题标签：
<h1></h1>
<h2></h2>
...
<h6></h6>

段落标签             水平线标签        换行标签   
<p></p>           <hr />              <br />


图像标签img：（属性之间必须用空格隔开）
<img src="图像url" />
<img/>标记属性
src     图像的路径
alt     图像不能显示时的替换文本
title      鼠标悬停时显示的内容
（width 图像的宽度、height 图像的高度、border 图像的边框）嘿嘿，用css编写更好玩


table标签：
tr 标签 用于定义表格中的行，必须嵌套在 table标签中
td td 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中

表格：
一个完整的表格有表格标签（table），行标签（tr），单元格标签（td）组成，没有列的标签
<tr></tr>中只能嵌套<td></td> 类的单元格
<td></td>标签，它就像一个容器，可以容纳所有的元素


表格属性：           ---！ （当然，我们平时开发 border  cellpadding  cellspacing  为  0，嘿嘿）！---
border 表格边框
cellspacing 设置单元格与单元格边框之间的空白间距
cellpadding 设置单元格内容与单元格之间的空白间隔
width 设置表格的宽度
height 设置表格的高度
align 设置表格在网页中的水平对齐方式


合并单元格：
跨行合并 rowspan=""
跨列合并 colspan=""
1. 先确定是跨行还是跨列合并
2. 根据 先上 后下 先左 后右 的原则找到目标单元格 然后写上 合并方式 还有 要合并的单元格数量
3. 要删除多余的单元格 单元格  


列表    （有三个  其中有序列表比较少用）
无序列表（ul）               注意： 1. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的               
<ul>                          2. <li>与</li>之间相当于一个容器，可以容纳所有元素。
        <li></li>                  3. 无序列表会带有自己样式属性，放下那个样式，让我们的CSS来   ----！blingbling！----
        <li></li>                -----无序列表:里面只能包含li    没有顺序，我们以后布局中最常用的列表-----
</ul>

有序列表（ol）  
<ol>                                      有序列表：1.里面里面只能包含li    2.有顺序， 使用情况较少                                    
        <li></li>                              
        <li></li>
</ol>               

自定义列表（dl）
<dl>                                        自定义列表：里面有2个兄弟，dt和dd
        <dt><dt>
        <dd><dd>
        <dd><dd>
</dl>


select下拉列表
1. select  中至少包含一对 option

2. 在option 中定义selected =" selected "时，当前项即为默认选中项。

3. 但是我们实际开发会用的比较少


input控件（单标签）       ----   &表单控件&    ----

input的属性：
        type：
                text        文本框
                radio      单选按钮      需要设置相同的name
                checkbox      复选按钮
                password      密码框
                button          普通按钮       需要加value
                submit          提交按钮
                reset                     重置按钮
                image    src       图片按钮
                file                文件按钮
        value
        name
        id
        checked：
                    checked     默认选中


css权重：
        div---标签选择器    权重 0，0，0，1
        .nav---类选择器      权重 0，0，1，0
        #nav---id选择器     权重 0，1，0，0
        style=行内样式表    权重 1，0，0，0
        ！important 在样式属性后面添加    权重 无限大


盒子的实际大小  =  内容 + 内边距 + 边框

background          --- 背景 ---
              color   ：pink；      背景颜色
              image ：url（）     背景图片
              repeat ：not-repeat      不平铺
                    repeat-x     横向平铺
                    repeat-y     纵向平铺
             position：x坐标  y坐标                      背景位置
                    right  top；        右上角
                    left   bottom；     左下角
                    center  center；    水平居中 垂直居中
                    left   center；     水平靠左居中
                    10px   50px；      像素
                                        如果只指定了一个方位名词，另一个值默认居中
            attachment： fixed       背景固定
                          scroll       背景滚动
background缩写        ： 颜色     url（）   背景平铺     背景滚动   背景位置
background：rgba（0， 0， 0， 0.2）；          盒子背景半透明，a取值在0-1之间


box-shadow：         ----盒子阴影
                水平阴影  垂直阴影  模糊距离  阴影大小  阴影颜色  内/外阴影；
                 2px  2px  2px  2px  rgba(0, 0, 0, 0.1)


clear：                  清除浮动   
        left；       清除左边浮动
        right；        清除右边浮动
        both；     清除左右两侧浮动       （实际工作中几乎只用both）
        1.额外标签法：     多加一个空标签   例：<div class="clear"></div>      ----不推荐使用。------
        2.父级添加overflow属性
              overflow：hidde；   溢出隐藏，把多的地方隐藏
        3.父级添加after伪元素      ----重点
            .clearfix：：after {
                           content: "" ；         ---不写内容
                        display: block;
                        height: 0;
                        visibility: hidden;
                        clear: both;
                        }
                .clearfix {
                        *zoom: 1;       (IE6,7 专门清除浮动样式)
                        }
        4.父级添加双伪元素


position：        定位 = 定位模式 + 边偏移
        static；   静态定位，没有边偏移，静态定位在布局时我们不用的
        relative；     相对定位，以自身原来的位置移动的，标准流位置保留
           left：100px；
           top：100px；
        absolut；     绝对对位，在父级里移动，    1.如果父级（或祖先）无定位，子盒子则以浏览器为准偏移
                                             如果父级（或祖先）有对位，则以父级为准偏移
                                          2.不占有原来的位置
子绝父相 ： 子盒子绝对定位，父盒子必须相对定位
           父级：position：relative；
           子级：position：absolute；

        fixed：  固定定位， 完全脱标不占位置，跟父级没有任何关系，不需要父亲，只认浏览器可见窗口，不会滚动且是固定型
                 固定的侧边栏 = 版心的一半 + 自己的宽度

------！bling bling bling  咳咳 ，听好  ，前端这种东西，简单且繁琐，稍微整理了笔记    来来回回也就那些，难度不大还很好玩    够你玩一段时间了。！--------

Web标准：结构  样式  行为    （熟记！）

标题标签：
<h1></h1>
<h2></h2>
...
<h6></h6>

段落标签             水平线标签        换行标签   
<p></p>           <hr />              <br />


图像标签img：（属性之间必须用空格隔开）
<img src="图像url" />
<img/>标记属性
src     图像的路径
alt     图像不能显示时的替换文本
title      鼠标悬停时显示的内容
（width 图像的宽度、height 图像的高度、border 图像的边框）嘿嘿，用css编写更好玩


table标签：
tr 标签 用于定义表格中的行，必须嵌套在 table标签中
td td 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中

表格：
一个完整的表格有表格标签（table），行标签（tr），单元格标签（td）组成，没有列的标签
<tr></tr>中只能嵌套<td></td> 类的单元格
<td></td>标签，它就像一个容器，可以容纳所有的元素


表格属性：           ---！ （当然，我们平时开发 border  cellpadding  cellspacing  为  0，嘿嘿）！---
border 表格边框
cellspacing 设置单元格与单元格边框之间的空白间距
cellpadding 设置单元格内容与单元格之间的空白间隔
width 设置表格的宽度
height 设置表格的高度
align 设置表格在网页中的水平对齐方式


合并单元格：
跨行合并 rowspan=""
跨列合并 colspan=""
1. 先确定是跨行还是跨列合并
2. 根据 先上 后下 先左 后右 的原则找到目标单元格 然后写上 合并方式 还有 要合并的单元格数量
3. 要删除多余的单元格 单元格  


列表    （有三个  其中有序列表比较少用）
无序列表（ul）               注意： 1. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的               
<ul>                          2. <li>与</li>之间相当于一个容器，可以容纳所有元素。
        <li></li>                  3. 无序列表会带有自己样式属性，放下那个样式，让我们的CSS来   ----！blingbling！----
        <li></li>                -----无序列表:里面只能包含li    没有顺序，我们以后布局中最常用的列表-----
</ul>

有序列表（ol）  
<ol>                                      有序列表：1.里面里面只能包含li    2.有顺序， 使用情况较少                                    
        <li></li>                              
        <li></li>
</ol>               

自定义列表（dl）
<dl>                                        自定义列表：里面有2个兄弟，dt和dd
        <dt><dt>
        <dd><dd>
        <dd><dd>
</dl>


select下拉列表
1. select  中至少包含一对 option

2. 在option 中定义selected =" selected "时，当前项即为默认选中项。

3. 但是我们实际开发会用的比较少


input控件（单标签）       ----   &表单控件&    ----

input的属性：
        type：
                text        文本框
                radio      单选按钮      需要设置相同的name
                checkbox      复选按钮
                password      密码框
                button          普通按钮       需要加value
                submit          提交按钮
                reset                     重置按钮
                image    src       图片按钮
                file                文件按钮
        value
        name
        id
        checked：
                    checked     默认选中


css权重：
        div---标签选择器    权重 0，0，0，1
        .nav---类选择器      权重 0，0，1，0
        #nav---id选择器     权重 0，1，0，0
        style=行内样式表    权重 1，0，0，0
        ！important 在样式属性后面添加    权重 无限大


盒子的实际大小  =  内容 + 内边距 + 边框

background          --- 背景 ---
              color   ：pink；      背景颜色
              image ：url（）     背景图片
              repeat ：not-repeat      不平铺
                    repeat-x     横向平铺
                    repeat-y     纵向平铺
             position：x坐标  y坐标                      背景位置
                    right  top；        右上角
                    left   bottom；     左下角
                    center  center；    水平居中 垂直居中
                    left   center；     水平靠左居中
                    10px   50px；      像素
                                        如果只指定了一个方位名词，另一个值默认居中
            attachment： fixed       背景固定
                          scroll       背景滚动
background缩写        ： 颜色     url（）   背景平铺     背景滚动   背景位置
background：rgba（0， 0， 0， 0.2）；          盒子背景半透明，a取值在0-1之间


box-shadow：         ----盒子阴影
                水平阴影  垂直阴影  模糊距离  阴影大小  阴影颜色  内/外阴影；
                 2px  2px  2px  2px  rgba(0, 0, 0, 0.1)


clear：                  清除浮动   
        left；       清除左边浮动
        right；        清除右边浮动
        both；     清除左右两侧浮动       （实际工作中几乎只用both）
        1.额外标签法：     多加一个空标签   例：<div class="clear"></div>      ----不推荐使用。------
        2.父级添加overflow属性
              overflow：hidde；   溢出隐藏，把多的地方隐藏
        3.父级添加after伪元素      ----重点
            .clearfix：：after {
                           content: "" ；         ---不写内容
                        display: block;
                        height: 0;
                        visibility: hidden;
                        clear: both;
                        }
                .clearfix {
                        *zoom: 1;       (IE6,7 专门清除浮动样式)
                        }
        4.父级添加双伪元素


position：        定位 = 定位模式 + 边偏移
        static；   静态定位，没有边偏移，静态定位在布局时我们不用的
        relative；     相对定位，以自身原来的位置移动的，标准流位置保留
           left：100px；
           top：100px；
        absolut；     绝对对位，在父级里移动，    1.如果父级（或祖先）无定位，子盒子则以浏览器为准偏移
                                             如果父级（或祖先）有对位，则以父级为准偏移
                                          2.不占有原来的位置
子绝父相 ： 子盒子绝对定位，父盒子必须相对定位
           父级：position：relative；
           子级：position：absolute；

        fixed：  固定定位， 完全脱标不占位置，跟父级没有任何关系，不需要父亲，只认浏览器可见窗口，不会滚动且是固定型
                 固定的侧边栏 = 版心的一半 + 自己的宽度