列表和表格---学习笔记02

第7章 列表和表格

7.1 有序列表     <ol type="A">       <li>这里是第1个li</li>       <li>这里是第2个li</li>       <li>这里是第3个li</li>     </ol>     ol属性：        type : 数字(1),大小写字母(A,a),大小写罗马数字(I,i)        start: "起始编号位序"表示列表项的开始编号所处的位置序号，即li前面开始的数值 -->  <ol type="a" start="3">       7.2 无序列表     <ul type="square">       <li>这里是第1个li</li>       <li>这里是第2个li</li>       <li>这里是第3个li</li>     </ul>     ul属性：       type->实心圆(disc)->空心圆(circle)->实心矩形(square)       该属性顺序是li中继续包含ul后的type默认属性,后面默认为实心矩形       注意：无论是有序列表还是无序列表，ul和ol能接的标签只能是li，但li中可以添加任意标签       7.3 定义列表     <dl>         <dt>html是什么</dt>         <dd>HyperText Markup Languagehtml         <br/>         是一种超文本标记语言         </dd>     </dl>     dd标签相当于其他列表中的li标签，可以在其中添加任意标签，不过建议只放dt和dd标签，一般情况下使用标签+样式实现文本的解析，不使用多个dd或dt标签       定义列表的应用场景 1.做网站尾部的相关信息 2.做图文混排       7.4 嵌套列表     <ul> -->无序列表       <li>         <ol> -->有序列表           <li>...</li>          -->无序列表中嵌套了一个有序列表         </ol>       </li>     </ul>       7.5 表格      <table bordercolor="边框颜色" title="表格的提示信息，当鼠标移到表格上方时，所提示的信息">     属性：     宽width 高height 对齐方式align 背景颜色bgcolor 背景图片background 边距cellpadding 间距cellspacing 摘要summary 边框显示：frame和rules       对齐属性:       align : 水平方向对齐,值为left,center,right.  适用于table,tr,td       valign: 垂直方向对齐。值为top,middle,bottom. 适用于tr,td       cellspacing :  单元格之间的空白(默认2px)     适用于table       cellpadding :  内容与单元格的空白            适用于table       bgcolor、background 两个属性也适用与表格。(table,tr,td)     在表格里面给宽度并不能真正的限制死表格的宽度，如果内容超出表格的实质宽高，依然会将表格的单元格甚至整个表格撑开       ▷  table的三个基本组成部分：行，列，单元格       ▷  表格标题标记:<caption align="水平对齐方式(左中右)" valign="垂直对齐(上下)"></caption>       ▷  表格可以分成表头、主体和表尾三部分，在HTML语言中分别用thead、tbody、tfoot表示         ★ 这里有三个注意点：         （1）thead和tfoot在一张表中都只能有一个，而tbody可以有多个。         （2）tfoot必须出现在tbody前面，这样浏览器在接收主体数据之前，就能渲染表尾，有利于加快表格的显示速度。这一点对大型表格尤其重要。         （3）thead、tbody和tfoot里面都必须使用tr标签。       ▷  CSS中的table-layout语句    table { table-layout: fixed/auto/inherit }     auto表示单元格的大小由内容决定。fixed表示单元格的大小是固定的，由第一个指定大小的单元格决定；如果所有单元格都没有指定大小，则由第一个单元     格的默认大小决定；如果单元格中的内容超出单元格的大小，则用CSS中的overflow命令控制。微软公司声称使用这个命令，表格的显示速度可以加快100倍。     inherit:从父元素继承table-layout属性的值，任何版本的IE都不支持。       ▷ tr       定义表格的行  th       定义标题单元格  td  定义表格的列,为一般单元格       ▷ colspan  合并列单元格  rowspan  合并行单元格

其他属性还有 summary 属性规定表格内容的摘要。summary 属性不会对普通浏览器中产生任何视觉变化。屏幕阅读器可以利用该属性。        frame和rules属性，可以控制边框的显示。frame属性控制着表格最外围的四条边框的可见性，而 rules 则控制着表格内部边框的可见性。     ▶ frame属性可取的值及含义如下：     ● void - 默认值，表示不显示表格最外围的边框     ● above - 显示上部的外侧边框         ● below - 显示下部的外侧边框     ● lhs - 显示左边的外侧边框           ● rhs - 显示右边的外侧边框     ● hsides - 显示上部和下部的外侧边框  ● vsides - 显示左边和右边的外侧边框     ● box - 在所有四个边上显示外侧边框   ● border - 在所有四个边上显示外侧边框     ▶ rules 属性可取的值有五个，分别是：     ● none - 默认值，无边框     ● rows - 为行加边框                  ● cols - 为列加边框     ● groups - 为行组或列组加边框        ● all - 为所有行列（单元格）加边框   demo：          在浏览器中的显示效果如下图：

My Ultimate Table

cell 1-1	cell 1-2	cell 1-3	cell 1-4
cell 4-1	cell 4-2	cell 4-3	cell 4-4
cell 2-1	cell 2-2	cell 2-3	cell 2-4
cell 3-1	cell 3-2	cell 3-3	cell 3-4