2017/2/17 学习html的第三天

列表的学习

列表

1、有序


<ol type="" start="">
  <li></li>  <!--列表项-->
  <li></li>
</ol>


type=""  1 , a ,A ,i,I


start="数字"  序列号  (第几个)




2、无序(重点)
 
80%


<ul type="disc">
  <li></li>
  <li></li>
</ul>


type="circle"  空心的圆点


type="square"  实心正方形


3、定义


<dl>
  <dt></dt>  <!-- 标题列 -->title
  <dd></dd>  <!-- 定义列 --> description
  <dd></dd>
  <dt></dt>
  <dd></dd>
</dl>




列表的嵌套


列表中可嵌套多个列表


<ul>
  <li>女装/内衣
      <ul>
         <li>春装
           <ul>
              <li>上衣</li>
              <li>裤子</li>
           </ul>
         </li>
         <li>夏装</li>
         <li>秋装</li>
         <li>冬装</li>
      </ul>
  </li>


  <li>男装/户外运动</li>
  <li>女鞋/男鞋/箱包</li>
</ul>






表格


没有div+css时， 表格布局


现在：数据的陈列


<table border="">


 <caption>表格的标题</caption>


 <!--列(单元格)包括在行中-->


 <tr>  <!--行-->


  <th></th>  <!--标题列-->
  <th></th>


 </tr>


 <tr>  <!--行-->


  <td></td>  <!--数据列-->
  <td></td>


 </tr>

</table>


每行中的列数一定相等

表格的属性


border="1"  边框宽度为1


bordercolor="red"   边框线颜色 red 


cellspacing="0"  格线与格线的间距


cellpadding=""   内容与格线的间距(不推荐用控制表格的尺寸)


width="" height="" 宽高


align=""  对齐方式  left/center/right


bgcolor=""  背景色


background=""   背景图片


tr,td ,th的属性


width=""  height=""


bgcolor=""  


background=""


align="" 


td ,th 的区别(th有的，td没有)


居中，字体加粗


就近原则
table , tr, td(或th)的背景同时设置


td(或th) > tr >table


合并单元格


(1)合并列（在同行中，从左到右 ,在同行中删除被吃掉的单元格）
   
  colspan="2"  合并两个单元格
  


(2)合并行(在相邻行中，从上到下，在相邻行中删除被吃掉的单元格)


 rowspan="2"   合并两个单元格