1.html是框架，有两种排版方式
表格的真正作用是用来展示数据的，排版有点不太美观。

2.表格的规范写法：
*<table><tr><td>(table row;table data)首行会自动缩进一个TAB距离。
      （添加）table标签 放 caption和tr标签 tr里放两种单元格标签。
tr标签内，除了两个单元格标签外不允许插入任何标签
*小技巧：可以整行复制

3.表格标签的属性（table）
*align设置对其方式：center居中 left right
*cellspacing 单元格与单元格之间的距离
（border width height）

4.*单元格合并
1）是跨行还是跨列呢？
在同一行就 跨列合并colspan  （col列）
在同一列就 跨行合并rowspan)(row行)
2)根据顺序 先上后下 先左后右
找到目标单元格标签，写上rowspan="合并数量"
3）删除多余的数量（合并数量-1）
拓展：table标签内
thead表头   tbody主体  tfoot 可以分别控制，来实现不同的效果
*表的主体或表格可以放在tbody里面，方便以后修改
表头主题要合并，不必要用thead，tbody.


5.表格标题标签caption ，放在table标签里面
  表头标签th（* table head）：整行或整列会加粗并居中显示（第二种单元格标签）

6.列表
*表格是用来显示数据的，列表是用来布局的。
  表格规范             列表布局自由，随意摆放。

7帮助
ctrl+shift+C    查看表格等像素
右键查看源代码
W3C 查看文档   ctrl+F查看

8.input标签控件
属性type 属性值 text        单行文本输入框（用户名）
                password     密码输入框  （密码）
              1）radio        单选按钮（不可取消）
              2）checkbox    复选框（可以勾选并取消）
                             默认勾选 checked="checked"
              1)button      普通按钮
              2)sumbit      提交按钮
              3）reset      重置按钮
              4）image      图像提交按钮 （*效果：做注册，提交等效果）  
              5）file       文件域（可以打开文件提交窗口）
属性name     用于分组。结合form表单域提交使用
            （添加）纠错：二选一按钮可以用到 （name一致）
*属性value属性placeholder  value默认文本
                          placeholder为占位符，用户输入会消失（效果）

9.label标签：提升用户体验（效果）
          点label标签内容，光标到文本框内
          1）label标签直接包含文字和input
          2）label包含文字并加上for="id名"，放在input标签（已经加入id）上

10下拉列表标签：select（效果）
      <select>   <option>第一个option选项</option>   </select>  

*11.无序列表（unorder list）
     <ul>   <li>第一个li选项</li>   </ul>  
     作用：导航栏，京东商品展示
         一个div,可以放n个列表项

  12（添加）自定义列表，网页底部用的最多



css





     CSS属性   字体.文本.边框.背景.   盒子模型（内外边距内外边距）


1.CSS层叠性：
当权重值值一样时，给同一个标签一样的
    *   .box1
        .box2 {
        height: 220px; width: 200px;
        background-color:red;
         }
        .box2{
        background-color: pink;
         }

               <div class="box1"></div>
        <div class="box2"></div>



2.CSS聚成性      聚成父标签的某些样式属性
     （text- ，font- ，line-  color开头，与文字有关的属性，盒子属性不能聚成）


4.*权重值叠加
   *1） 分析修改样式的标签有没有被选中（特例：标签a需要先在style里面定义样式）
   2）标签未被直接选中，直接分析*父亲*的权重（聚成权重值为0）；
      标签被选中，看权重值      ID>         类及伪类 > 标签
       ？？？    标签样式>标签默认样式（a）>通配符>聚成
      特例.权重值相同，选离的最近的标签
          *后代选择器所有标签都被选中

5.
no-repeat（repeat重复）不平铺（repeat-x横向平铺）
             位置：方位名词top bottom left等 第二种跟任意一个精确单位 左边   X抽 右边Y周


6.*插入图片：用作产品展示。
          （*通过盒模型移动位置，改图片标签的内边距margin 或者改父盒子的内边距 padding）
           （text-align：center 也可以设置居中对齐）
             用margin：auto； 设置没用。
      //插入图片，无法垂直居中
   背景图片：用作logo等。
          （通过background-position:;移动位置）
     //背景上可以插图，图片不能


7.  * 字体颜色：color；
  背景综合写法： background:颜色 url() 平铺 滚动 位置         （没有顺序）




4.字体连写（综合写法）
    *类{font:style weight size/line-height 字体系列family }

     (顺序不变，字号 字体系列两个不能少。)
     *倾斜样式font-styl: italic normal(正常，不倾斜)
      字体加粗样式：加粗 700 不加粗 400





5.文本的外观（样式）属性（5个）：
         *用处：文本类标签p,a     
  *行高（行间距） line-height：   一般行高比字大7-8像素。

  *首行缩进  text-indent:2em;    1个em是1个font-size大小.  
         //(不能用：span a em strong del ins)

  *文本修饰（下划线删除线）   对齐方式  颜色



8.边框
       border:1px solid red;
      宽度 边框样式 颜色    shi线 dashed虚线 点选
        ？？?细线表格（border-collapse:collapse;）


9.边框圆角：
   border:radious
   5%矩形圆角 50%圆 高度的一半   高度的一半（两头是圆）



          盒子的内外边距


9. *内边距外边距
     padding（内容到边框的距离）和margin（盒子到四边的距离）
                       只能设置四个方向
      一个值:上下左右；
      两个值：上下 左右；
      三个值：上 左右 下；
      四个值：上 右 下 左；（顺时针）



10.padding和margin都会撑大盒子
     //*嵌套里面，子盒子是可以撑开子盒子超过父盒子
     //不会撑开的例子：如果没有给一个盒子指定宽度， 此时，如果给这个盒子指定padding， 则不会撑开盒子（上下不受影响

）

1.html是框架，有两种排版方式
表格的真正作用是用来展示数据的，排版有点不太美观。

2.表格的规范写法：
*<table><tr><td>(table row;table data)首行会自动缩进一个TAB距离。
      （添加）table标签 放 caption和tr标签 tr里放两种单元格标签。
tr标签内，除了两个单元格标签外不允许插入任何标签
*小技巧：可以整行复制

3.表格标签的属性（table）
*align设置对其方式：center居中 left right
*cellspacing 单元格与单元格之间的距离
（border width height）

4.*单元格合并
1）是跨行还是跨列呢？
在同一行就 跨列合并colspan  （col列）
在同一列就 跨行合并rowspan)(row行)
2)根据顺序 先上后下 先左后右
找到目标单元格标签，写上rowspan="合并数量"
3）删除多余的数量（合并数量-1）
拓展：table标签内
thead表头   tbody主体  tfoot 可以分别控制，来实现不同的效果
*表的主体或表格可以放在tbody里面，方便以后修改
表头主题要合并，不必要用thead，tbody.


5.表格标题标签caption ，放在table标签里面
  表头标签th（* table head）：整行或整列会加粗并居中显示（第二种单元格标签）

6.列表
*表格是用来显示数据的，列表是用来布局的。
  表格规范             列表布局自由，随意摆放。

7帮助
ctrl+shift+C    查看表格等像素
右键查看源代码
W3C 查看文档   ctrl+F查看

8.input标签控件
属性type 属性值 text        单行文本输入框（用户名）
                password     密码输入框  （密码）
              1）radio        单选按钮（不可取消）
              2）checkbox    复选框（可以勾选并取消）
                             默认勾选 checked="checked"
              1)button      普通按钮
              2)sumbit      提交按钮
              3）reset      重置按钮
              4）image      图像提交按钮 （*效果：做注册，提交等效果）  
              5）file       文件域（可以打开文件提交窗口）
属性name     用于分组。结合form表单域提交使用
            （添加）纠错：二选一按钮可以用到 （name一致）
*属性value属性placeholder  value默认文本
                          placeholder为占位符，用户输入会消失（效果）

9.label标签：提升用户体验（效果）
          点label标签内容，光标到文本框内
          1）label标签直接包含文字和input
          2）label包含文字并加上for="id名"，放在input标签（已经加入id）上

10下拉列表标签：select（效果）
      <select>   <option>第一个option选项</option>   </select>  

*11.无序列表（unorder list）
     <ul>   <li>第一个li选项</li>   </ul>  
     作用：导航栏，京东商品展示
         一个div,可以放n个列表项

  12（添加）自定义列表，网页底部用的最多



css





     CSS属性   字体.文本.边框.背景.   盒子模型（内外边距内外边距）


1.CSS层叠性：
当权重值值一样时，给同一个标签一样的
    *   .box1
        .box2 {
        height: 220px; width: 200px;
        background-color:red;
         }
        .box2{
        background-color: pink;
         }

               <div class="box1"></div>
        <div class="box2"></div>



2.CSS聚成性      聚成父标签的某些样式属性
     （text- ，font- ，line-  color开头，与文字有关的属性，盒子属性不能聚成）


4.*权重值叠加
   *1） 分析修改样式的标签有没有被选中（特例：标签a需要先在style里面定义样式）
   2）标签未被直接选中，直接分析*父亲*的权重（聚成权重值为0）；
      标签被选中，看权重值      ID>         类及伪类 > 标签
       ？？？    标签样式>标签默认样式（a）>通配符>聚成
      特例.权重值相同，选离的最近的标签
          *后代选择器所有标签都被选中

5.
no-repeat（repeat重复）不平铺（repeat-x横向平铺）
             位置：方位名词top bottom left等 第二种跟任意一个精确单位 左边   X抽 右边Y周


6.*插入图片：用作产品展示。
          （*通过盒模型移动位置，改图片标签的内边距margin 或者改父盒子的内边距 padding）
           （text-align：center 也可以设置居中对齐）
             用margin：auto； 设置没用。
      //插入图片，无法垂直居中
   背景图片：用作logo等。
          （通过background-position:;移动位置）
     //背景上可以插图，图片不能


7.  * 字体颜色：color；
  背景综合写法： background:颜色 url() 平铺 滚动 位置         （没有顺序）




4.字体连写（综合写法）
    *类{font:style weight size/line-height 字体系列family }

     (顺序不变，字号 字体系列两个不能少。)
     *倾斜样式font-styl: italic normal(正常，不倾斜)
      字体加粗样式：加粗 700 不加粗 400





5.文本的外观（样式）属性（5个）：
         *用处：文本类标签p,a     
  *行高（行间距） line-height：   一般行高比字大7-8像素。

  *首行缩进  text-indent:2em;    1个em是1个font-size大小.  
         //(不能用：span a em strong del ins)

  *文本修饰（下划线删除线）   对齐方式  颜色



8.边框
       border:1px solid red;
      宽度 边框样式 颜色    shi线 dashed虚线 点选
        ？？?细线表格（border-collapse:collapse;）


9.边框圆角：
   border:radious
   5%矩形圆角 50%圆 高度的一半   高度的一半（两头是圆）



          盒子的内外边距


9. *内边距外边距
     padding（内容到边框的距离）和margin（盒子到四边的距离）
                       只能设置四个方向
      一个值:上下左右；
      两个值：上下 左右；
      三个值：上 左右 下；
      四个值：上 右 下 左；（顺时针）



10.padding和margin都会撑大盒子
     //*嵌套里面，子盒子是可以撑开子盒子超过父盒子
     //不会撑开的例子：如果没有给一个盒子指定宽度， 此时，如果给这个盒子指定padding， 则不会撑开盒子（上下不受影响

）