清單和表格---學習筆記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