1. 程式人生 > 其它 >7.7 學習小結

7.7 學習小結

1.

CSS修飾標籤的樣式,有 "內聯" 和 "外引" 兩種方式。

對於大部分標籤,以上兩種方法均可,且修改父級標籤,子級標籤特性也會改變。但某些標籤確無法通過修改父級標籤來改變子級標籤特性,如a標籤,修改其顏色特性,必須直接修改 a 標籤的特性才可。

<a href="#" style="color:red;" rel="nofollow">只能使用"內聯"方式</a>

2.

程式碼中的shape指的是點選區域的形狀,coords指的應該是連結區域在圖片中的座標(畫素為單位)

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
</map>

3.

矩形:左上角頂點座標為(x1,y1),右下角頂點座標為(x2,y2)

<area shape="rect" coords="x1,y1,x2,y2" href=url>

圓形:圓心座標為(X1,y1),半徑為r

<area shape="circle" coords="x1,y1,r" href=url>

多邊形:各頂點座標依次為(x1,y1)、(x2,y2)、(x3,y3) ......

<area shape="poly" coords="x1,y1,x2,y2 ......" href=url>

 4.HTML表格

4.1

表格三要素table、tr、td缺一不可。

<table> 標籤常用屬性:

border="1"   表格邊框的寬度
bordercolor="#fff"   表格邊框的顏色
cellspacing="5"   單元格之間的間距
width="500"   表格的總寬度
height="100"   表格的總高度
align="right"   表格整體對齊方式    (引數有  leftcenterright)
bgcolor="#fff"   表格整體的背景色

<tr> 標籤的常用屬性:

bgcolor="#fff"    行的顏色
align="right"    行內文字的水平對齊方式    (引數有leftcenterright)
valign="top"     行內文字的垂直對齊方式    (引數有topmiddlebottom)

<td>、<th> 標籤的常用屬性:

width="500"    單元格的寬度,設定後對當前一列的單元格都有影響
height="100"   單元格的高度,設定後對當前一行的單元格都有影響
bgcolor="fff"  單元格的背景色
align="right"  單元格文字的水平對齊方式    (引數leftcenterright)
rowspan="3"    合併垂直水平方向的單元格
colspan="3"    合併水平方向單元格
valign="top"   單元格文字的垂直對齊方式    (引數middlebottomtop)

引號裡的數字和顏色程式碼均可以更改。

4.2

表格結構語義標籤:

  • 1.<table>:表格根元素。
  • 2.<thead>:表格頭。
  • 3.<tbody>:表格體。
  • 4.<tfoot>:表格尾,一般可忽略該結構。
  • 5.<tr>:表格行。

表格內容標籤:

  • 1.<th>:表頭單元格。
  • 2.<td>:表體單元格。

跨列:colspan

跨行:rowspan

單元格內邊距:cellpadding

單元格外邊距:cellspacing

col 和 colgroup 用於便捷定義表格指定列的樣式。

5.HTML列表

ul是unordered lists的縮寫 (無序列表)

li是list item的縮寫 (列表專案)

ol是ordered lists的縮寫(有序列表)

dl是definition lists的英文縮寫 (自定義列表)

dt是definition term的縮寫 (自定義列表組)

dd是definition description的縮寫(自定義列表描述)

nl是navigation lists的英文縮寫 (導航列表)

tr是table row的縮寫 (表格中的一行)

th是table header cell的縮寫 (表格中的表頭)

td是table data cell的縮寫 (表格中的一個單元格)

6.HTML區塊、佈局

Tip:由於建立高階的佈局非常耗時,使用模板是一個快速的選項。通過搜尋引擎可以找到很多免費的網站模板(可以使用這些預先構建好的網站佈局,並優化它們)。