HTML 從零開始的學習過程(3)

2021-10-05 17:16:05 字數 3467 閱讀 5923

結構:

標題<

/caption>

<

!-- 表頭 --

>

<

/th>

<

!-- **頭,內容居中顯示,加粗顯示 --

>

<

/tr>

<

/thead>

<

!-- **主體 --

>

<

/td>

<

!-- 表體,預設靠左顯示,不加粗 --

>

<

/tr>

<

/tbody>

<

/table>

<

!-- 腳注 --

>

<

/td>

<

!-- 表體,預設靠左顯示,不加粗 --

>

<

/tr>

<

/tfoot>

<

/body>屬性:

frame—外部邊框樣式:

void,不顯示外側邊框;

above,顯示上部外側邊框;

below,顯示下部的外側邊框;

hsides,顯示上下部;

vsides,顯示左右;

lhs,顯示左邊;

rhs,顯示右邊;

box,顯示所有四個邊;

border,顯示四個邊。

tr標籤的屬性設定:

align: left,center,right, justify,char,行內容的水平對齊方式;

valign: top,middle,bottom,baseline, 行內容的垂直對齊方式;

bgcolor:rgb(x,x,x),#******,colorname,行的背景顏色。

colorname:規定顏色的名稱,比如;red yellow blue green

#****** /#***:16進製表示方式:#0~f的值

rgb(x,x,x):規定rgb**的字型顏色,0~255

(拓展:rgba) – 對於顏色設定不支援

顏色的三原色:紅綠藍

td和th屬性設定:

align: left,center,right, justify,char,單元格的水平對齊方式;

valign: top,middle,bottom,baseline, 單元格的垂直對齊方式;

bgcolor:rgb(x,x,x),#******,colorname,單元格的背景顏色;

width:px % 單元格的寬度;

height:% px 單元格的高度。

thead,tbody, tfoot屬性設定:

align: left,center,right, justify,char,單元格的水平對齊方式;

valign: top,middle,bottom,baseline, 單元格的垂直對齊方式;

colspan – 列合併

rowspan – 行合併

**的巢狀:

結構:..

.<

/td>

<

/td>

<

/tr>

<

/table>

<

/td>

<

/tr>

<

/table>

<

/body>注意點:

要是完整的**結構;

放到td標籤中。

示例(課程表製作):

<

!doctype html>

課程表<

/title>

"utf-8"

>

<

/head>

"center" valign=

"middle" border=

"1" width=

"500" cellspacing=

"0" cellpadding=

"5">

<

!-- 邊框為1,整體寬度500,居中顯示,單元格間距為0,單元格與內容間距為5

-->

課程表<

/caption>

"center"

>

"pink"

>

<

!-- 首行背景顏色為粉色 --

>

星期一<

/th>

星期二<

/th>

星期三<

/th>

星期四<

/th>

星期五<

/th>

<

/tr>

<

/thead>

"center"

>

"2">語文<

/td>

<

!-- 第二行第一列與第三行第一列合併 --

>

數學<

/td>

化學<

/td>

英語<

/td>

生物<

/td>

<

/tr>

數學<

/td>

化學<

/td>

英語<

/td>

生物<

/td>

<

/tr>

"5">課間活動<

/td>

<

!-- 課間活動那行都合併 --

>

<

/tr>

語文<

/td>

數學<

/td>

化學<

/td>

英語<

/td>

生物<

/td>

<

/tr>

<

/tbody>

"center"

>

語文<

/td>

數學<

/td>

化學<

/td>

英語<

/td>

生物<

/td>

<

/tr>

<

/tfoot>

<

/table>

<

/body>

<

/html>效果圖:

HTML 從零開始的學習過程 1

1.html的概念 html hyper text markup language 超文字標記語言,使用一系列的標籤對文件 圖示以及其他資訊資源進行統一關聯。特點 1.不需要編譯,直接由瀏覽器執行 2.文字檔案 3.檔案字尾名為html 4.對大小寫不敏感。2.html基礎語法部分 基本結構 doc...

HTML 從零開始的學習過程(5)

概念 css層疊樣式表 cascading style sheets 一種用來表現html或xml的語言。作用 結構與樣式分離的方式,便於後期的維護和修改 可以用多套樣式,使網頁有任意樣式切換的效果 使得頁面載入的更快,降低伺服器的成本。樣式分類 1.內部樣式 utf 8 document titl...

HTML 從零開始的學習過程(7)

position 定位 relative 相對 absolute 絕對 static 無定位 fixed 固定。相對定位 相對定位的偏移參考元素是元素本身,不會使元素脫離文件流,元素的初始衛視佔據的控制項會被保留 語法 position relative 相對定位的偏移是自己之前的位置作為參照進行的...