網頁設計中tr100

1、網頁HTML代碼中的h1，p，a，tr，td分別代表什麼意思，還有他們的全英文名是什麼？

這些都是HTML中的常用標簽 他們都有特定的定義
沒有英文全名
HTML標簽詳解
結構
＜html＞
＜head＞
＜title＞標題＜/title＞
＜/head＞
＜body＞
..........文件內容..........
＜/body＞
＜/html＞
1.文件標題
＜title＞..........＜/title＞
2.文件更新--＜meta＞
【1】10秒後自動更新一次
＜meta http-equiv="refresh" content=10＞
【2】10秒後自動連結到另一文件
＜meta http-equiv="refresh" content="10；URL=欲連結文件之URL"＞
3.查詢用表單--＜isindex>
若欲設定查詢欄位前的提示文字：
＜isindex prompt="提示文字"＞
4.預設的基準路徑--＜base>
＜base href="放置文件的主機之URL"＞
版面
1.標題文字 ＜h#＞..........＜/h#＞ #=1~6；h1為最大字，h6為最小字
2.字體變化 ＜font＞..........＜/font＞
【1】字體大小 ＜font size=#＞..........＜/font＞ #=1~7；數字愈大字也愈大
【2】指定字型 ＜font face="字型名稱"＞..........＜/font＞
【3】文字顏色 ＜font color=#rrggbb＞..........＜/font＞ rr：表紅色（red）色碼 gg：表綠色（green）色碼 bb：表藍色（blue）色碼
3.顯示小字體 ＜small＞..........＜/small＞
4.顯示大字體 ＜big＞..........＜/big＞
5.粗體字 ＜b＞..........＜/b＞
6.斜體字 ＜i＞..........＜/i＞
7.打字機字體 ＜tt＞..........＜/tt＞
8.底線 ＜u＞..........＜/u＞
9.刪除線 ＜strike＞..........＜/strike＞
10.下標字 ＜sub＞..........＜/sub＞
11.上標字 ＜sup>..........＜/sup＞
12.文字閃爍效果 ＜blink＞..........＜/blink＞
13.換行 ＜br＞
14.分段 ＜p＞
15.文字的對齊方向 ＜p align="#"＞ #號可為 left：表向左對齊（預設值） center：表向中對齊 right：表向右對齊 P.S.＜p align="#"＞之後的文字都會以所設的對齊方式顯示， 直到出現另一個＜p align="#"＞改變其對齊方向，或遇到 ＜hr＞?＜h#＞標簽時會自動設回預設的向左對齊。
16.分隔線 ＜hr＞
【1】分隔線的粗細 ＜hr size=點數＞
【2】分隔線的寬度 ＜hr size=點數或百分比＞
【3】分隔線對齊方向 ＜hr align="#"＞ #號可為 left：表向左對齊（預設值） center：表向中對齊 right：表向右對齊
【4】分隔線的顏色 ＜hr color=#rrggbb＞
【5】實心分隔線 ＜hr noshade＞
17.向中對齊 ＜center＞..........＜/center＞
18.依原始樣式顯示 ＜pre＞..........＜/pre＞
19.＜body＞指令的屬性
【1】背景顏色 -- bgcolor ＜body bgcolor=#rrggbb＞
【2】背景圖案 -- background ＜body background="圖形文件名"＞
【3】設定背景圖案不會卷動 -- bgproperties ＜body bgproperties=fixed＞
【4】文件內容文字的顏色 -- text ＜body text=#rrggbb＞
【5】超連結文字顏色 -- link ＜body link=#rrggbb＞
【6】正被選取的超連結文字顏色 -- vlink ＜body vlink=#rrggbb＞
【7】已連結過的超連結文字顏色 -- alink ＜body alink=#rrggbb＞
20.註解 ＜!--..........--＞21.特殊字元表示法
符 號 語 法
＜ ＆lt
＞ ＆gt
& ＆amp
" ＆quot
空白 ＆nbsp
圖片
1.插入圖片 ＜img src="圖形文件名"＞
2.設定圖框 -- border ＜img src="圖形文件名" border=點數＞
3.設定圖形大小 -- width?height ＜img src="圖形文件名" width=寬度點數 height=高度點數＞
4.設定圖形上下左右留空 -- vspace?hspace ＜img src="圖形文件名" vspace=上下留空點數 hspace=左右留空點數＞
5.圖形附註 ＜img src="圖形文件名" alt="說明文字"＞
6.預載圖片
＜img src="高解析度圖形文件名" lowsrc="低解析度圖形文件名"＞ P.S.兩個圖的圖形大小最好一致
7.影像地圖（Image Map） ＜img src="圖形文件名" usemap="#圖的名稱"＞ ＜map name="圖的名稱"＞
＜area shape=形狀 coords=區域座標列表 href="連結點之URL"＞
＜area shape=形狀 coords=區域座標列表 href="連結點之URL"＞
＜area shape=形狀 coords=區域座標列表 href="連結點之URL"＞
＜area shape=形狀 coords=區域座標列表 href="連結點之URL"＞ ＜/map＞
【1】定義形狀 -- shape
shape=rect：矩形 shape=circle：圓形 shape=poly：多邊形
【2】定義區域 -- coords
a.矩形：必須使用四個數字，前兩個數字為左上角座標，後兩個數字為右下角座標
例：＜area shape=rect coords=100,50,200,75 href="URL"＞
b.圓形：必須使用三個數字，前兩個數字為圓心的座標，最後一個數字為半徑長度
例：＜area shape=circle coords=85,155,30 href="URL"＞
c.任意圖形（多邊形）：將圖形之每一轉折點座標依序填入
例：＜area shape=poly coords=232,70,285,70,300,90,250,90,200,78 href="URL"＞
表格
1.定義表格 ＜table＞..........＜/table＞
【1】設定邊框的厚度 -- border
＜table border=點數＞
【2】設定格線的寬度 -- cellspacing
＜table cellspacing=點數＞
【3】設定資料與格線的距離 -- cellpadding
＜table cellpadding=點數＞
【4】調整表格寬度 -- width
＜table width=點數或百分比＞
【5】調整表格高度 -- height
＜table height=點數或百分比＞
【6】設定表格背景色彩 -- bgcolor
＜table bgcolor=#rrggbb＞
【7】設定表格邊框色彩 -- bordercolor
＜table bordercolor=#rrggbb＞
2.顯示格線 ＜table border＞
3.表格標題
＜caption＞..........＜/caption＞
表格標題位置 -- align
＜caption align="#"＞ #號可為 top：表標題置於表格上方（預設值）
bottom：表標題置於表格下方
4.定義列 ＜tr＞
5.定義欄位 《1》＜td＞：靠左對齊
《2》＜th＞：靠中對齊?粗體
【1】水平位置 -- align ＜th align="#"＞
#號可為 left：向左對齊
center：向中對齊 right：向右對齊
【2】垂直位置 -- align ＜th align="#"＞ #號可為
top：向上對齊 middle：向中對齊
bottom：向下對齊
【3】欄位寬度 -- width
＜th width=點數或百分比＞
【4】欄位垂直合並 -- rowspan
＜th rowspan=欲合並欄位數＞
【5】欄位橫向合並 -- colspan
＜th colspan=欲合並欄位數＞
清單
一、目錄式清單
＜dir＞ ＜li＞項目1 ＜li＞項目2 ＜li＞項目3 ＜/dir＞ P.S.目錄式清單每一個項目不能超過20個字元（即10個中文字）
二、選項式清單 ＜menu＞ ＜li＞項目1 ＜li＞項目2 ＜li＞項目3 ＜/menu＞
三、有序號的清單 ＜ol＞ ＜li＞項目1 ＜li＞項目2 ＜li＞項目3 ＜/ol＞
【1】序號形式 -- type ＜ol type=#＞或＜li type=#＞ #號可為 A：表以大寫英文字母A?B?C?D...做為項目編號 a：表以小寫英文字母a?b?c?d...做為項目編號 I：表以大寫羅馬數字做為項目編號 i：表以小寫羅馬數字做為項目編號 1：表以阿拉伯數字做為項目編號（預設值）
【2】起始數字 -- start ＜ol start=欲開始計數的序數＞
【3】指定編號 -- value ＜li value=欲指定的序數＞
四、無序號的清單 ＜ul＞ ＜li＞項目1 ＜li＞項目2 ＜li＞項目3 ＜/ul＞
【1】項目符號形式 -- type ＜ul type=#＞或＜li type=#＞ #號可為 disc：實心圓點（預設值） circle：空心圓點 square：實心方塊
【2】原始清單 -- plain ＜ul plain＞
【3】清單排列方式 -- warp 《1》清單垂直排列 ＜ul warp = vert＞ 《2》清單水平排列 ＜ul warp = horiz＞
五、定義式清單 ＜dl＞ ＜dt＞項目1 ＜dd＞項目1說明 ＜dt＞項目2 ＜dd＞項目2說明 ＜dt＞項目3 ＜dd＞項目3說明 ＜/dl＞
緊密排列 -- compact ＜dl compact＞ P.S.如此可使＜dt＞的內容與＜dd＞的內容在同一行，僅 以數格空白相隔而不換行，但若＜dt＞的文字超過一 定的長度後，compact的作用就消失了！
表單
一、基本架構 ＜form action="處理資料用的CGI程式之URL"或"mailto:電子信箱的URL" method="get或post"＞ .......... .......... .......... ＜/form＞
二、輸入文件型表單 ＜form action="URL" method="post"＞ ＜input＞ ＜input＞ .......... .......... ＜/form＞
【1】欄位類型 -- type ＜input type=#＞ #號可為 text：文字輸入 password：密碼 checkbox：多選鈕 radio：單選鈕 submit：接受按鈕 reset：重設按鈕 image：圖形鈕 hidden：隱藏欄位
【2】欄位名稱 -- name ＜input name="資料欄名"＞ P.S.若type為submit?reset則name不必設定
【3】文件上的預設值 -- value ＜input value="預設之字串"＞
【4】設定欄位的寬度 -- size ＜input size=字元數＞
【5】限制最大輸入字串的長度 -- maxlength ＜input maxlength=字元數＞
【6】預設checkbox或radio的初值 -- checked ＜input type=checkbox checked＞ ＜input type=radio checked＞
【7】指定圖形的URL -- src ＜input type=image src="圖檔名"＞
【8】圖文對齊 -- align ＜input type=image align="#"＞ #號可為 top：文字對齊圖片之頂端 middle：文字對齊圖片之中間 buttom：文字對齊圖片之底部
三、選擇式表單 ＜form action="URL" method="post"＞ ＜select＞ ＜option＞ ＜option＞ .......... .......... ＜/select＞ ＜/form＞
A、＜select＞的屬性
【1】欄位名稱 -- name ＜select name="資料欄位名"＞
【2】設定顯示的選項數 -- size ＜select size=個數＞
【3】多重選項 -- multiple ＜select multiple＞
B、＜option＞的屬性
【1】定義選項的傳回值 -- value ＜option value="傳回值"＞
【2】預先選取的選項 -- selected ＜option selected＞
四、多列輸入文字區表單 ＜form action="URL" method="post"＞ ＜textarea＞ .......... .......... ＜/textarea＞ ＜/form＞
【1】文字區的變數名稱 -- name ＜textarea name=變數名稱＞
【2】設定文字輸入區寬度 -- cols ＜textarea cols=字元數＞
【3】設定文字輸入區高度 -- rows ＜textarea rows=列數＞
【4】輸入區設定預設字串 ＜textarea＞ 預設文字 ＜/textarea＞
【5】自動換行與否 -- wrap ＜textarea wrap=#＞ #號可為 off：表輸入的文字超過欄寬時，不會自動換行（預設值） virtual：表輸入的文字在超過欄寬時會自動換行
鏈接
一、連結至其他文件 ＜a href="URL"＞說明文字或圖片＜/a＞
二、連結至文件內之某一處（外部連結）
《1》起點
＜a href="檔名#名稱"＞..........＜/a＞
《2》終點 ＜a name="名稱"＞
三、frame的超連結
【1】開啟新的瀏覽器來顯示連結文件 -- _blank ＜a href="URL" target=_blank＞
【2】顯示連結文件於目前的frame -- _self ＜a href="URL" target=_self＞
【3】以上一層的分割視窗顯示連結文件 -- _parent ＜a href="URL" target=_parent＞
【4】以全視窗顯示連結文件 -- _top ＜a href="URL" target=_top＞
【5】以特定視窗顯示連結文件 --＜a href="URL" target="特定視窗名稱"＞
FRAME
一、分割視窗指令 ＜frameset＞..........＜/frameset＞
【1】垂直（上下）分割 -- rows
＜frameset rows=#＞ #號可為點數：如欲分割為100,200,300三個視窗，則
＜frameset rows=100,200,300＞；亦可以*號代表，如＜frameset rows=*,500,*＞
百分比：如＜frameset rows=30%,70%＞，各 項總和最好為100%
【2】水平（左右）分割 -- cols ＜frameset cols=點數或百分比＞
二?指定視窗內容 -- ＜frame＞
＜frameset cols=30%,70%＞ ＜frame＞ ＜frame＞ ＜/frameset＞
【1】指定視窗的文件名稱 -- src ＜frame src=HTML檔名＞
【2】定義視窗的名稱 -- name
＜frame name=視窗名稱＞
【3】設定文件與上下邊框的距離 -- marginheight
＜frame marginheight=點數＞
【4】設定文件與左右邊框的距離 -- marginwidth
＜frame marginwidth=點數＞
【5】設定分割視窗卷軸 -- scrolling
＜frame scrolling=#＞ #號可為 yes：固定出現卷軸
no：不出現卷軸 auto：自動判斷文件大小需不需要卷軸（預設值）
【6】鎖住分割視窗的大小 -- noresize ＜frame noresize＞

更多更全的請看下面http://www.w3school.com.cn/tags/

2、網頁設計中的表格！

<tr>
<td height="890" background="imega/2.gif" valign="top">
<table width="102%" height="25" border="0" cellpadding="5" cellspacing="1"> <!--這個表格已經至頂 -->
<tr>
<td width="11%"> </td>
<td width="17%" valign="top">|<a href="i.jsp">111</a></td>
<td width="30%" valign="top" >這一段表格至頂</td>
<td width="42%"> </td>
</tr>
</table>
</td>
</tr>

3、網頁設計語言中，製表格中的<tr> <td> 各是什麼含義？

<table>代表表格</table>
<tr>代表表格中的一行</tr>
<td>代表表格中的一列</td>

'tr'與'td'交成一個單元格
<table>...</table>之間有多少個<tr>，就有多少行
<tr>...</tr>之間有多少個<td>，就有多少列

4、請設計一個網頁，在該網頁中通過JavaScript語言生成一個100（行）× 6（列）的表格，及相關內容見下詳情

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>請您試試</title>
<script language="javascript" type="text/javascript">
function tableShow(){
document.write("<table width=800 border=1>");
for (var i = 0; i < 100; i++) {
document.write("<tr>");
for (var j = 0; j < 6; j++) {
document.write("<td>" + 100+Math.floor(900*Math.random()) + "</td>");
}
document.write("</tr>");
}
document.write("</table>");
}
</script>
</head>
<body>
<input type="button" id="button" name="button" value="點擊我將出現您需要的表格" onclick="tableShow()" />
</body>
</html>

5、html網頁製作里設置表格字體和大小的語句有嗎?是什麼?

HTML Table表格的文字大小與字型在傳統的HTML網頁設計規則中，可以透過HTML預設font文字標簽中的size與face分別設定文字大小與字型，這樣的寫法在HTML5以前是相當普遍的，而到了HTML5開始，修改表格文字大小與字型必須使用css來處理，因為HTML5不支援傳統HTML font的size與face屬性，在css的規則里，修改文字大小是用font-size，而修改字型則是使用font-famliy，以下範例分別使用HTML傳統的font標簽以及css的屬性來修改表格文字。

範例一、用HTML font文字標簽修改表格文字大小與字型

<table border="1" cellpadding="5"> 
<tr>
<td><font size="5">這是size = 5的文字大小</font></td>
<td><font face= "DFKai-sb">這是標楷體的文字字型</font></td> 
</tr> 
</table>

呈現結果

誠如第一段所說，若要符合最新的HTML5網頁設計標准，表格內的文字大小與字型就必須使用css來設計，範例二就提供這樣的設計方式，除了可以像範例一這樣每個欄位不同的文字樣式，還可以一次設定整個表格的文字樣式，用起來效率非常好。

範例二、用css的font-size與font-family來修改表格文字大小與字型

<table border="1" style="font-size:18px;font-family:serif;" cellpadding="5"> 
<tr>
<td>這是表格預設文字樣式</td>
<td>< span style="font-size:13px;">這是13px的文字大小</span></td>
<td><span style="font-family:DFKai-sb">這是標楷體字型< /span></td> 
</tr> 
</table>

呈現結果

二在table標簽開頭就先加入了『style="font-size:18px;font-family:serif;"』這樣的語法，代表將整張表格內的所有文字大小都預設為18px，而且字型使用serif，這可是傳統HTML的font標簽沒辦法做到的高效率設計方式，接著我們在表格的三個欄位，分別使用預設文字樣式、修改大小為13px（font-size:13px;） 、字型改為標楷體（font-family:DFKai-sb;），可以清楚的看到，只要在表格中任何欄位或一段文字，用span標簽包起來，就可以特別為文字做不同的樣式設計。

6、網頁源代碼中的"<tr>"、"<td>"、"</tr>"和"</td>"各是什麼意思？

<tr></tr>、<td></td>屬於HTML語言標簽，含義如下：

1、tr 標簽 ，代表HTML表格中的一行，tr標簽是成對出現的，以<tr>開始,以</tr>結束。例如，

<table border="1">

<tr>（開始）

<th>Month</th>

<th>Savings</th>

</tr>（結束）

2、td 標簽 ， 代表HTML表格中的一個單元格，td標簽是成對出現的,以<td>開始，以</td>結束。例如，

<table border="1">

<tr>

<td>Cell A</td>

<td>Cell B</td>

</tr>

</table>

(6)網頁設計中tr100擴展資料

HTML 表格有兩種單元格類型：

表頭單元格 - 包含頭部信息（由 <th> 元素創建）

標准單元格 - 包含數據（由 <td> 元素創建）

<th> 元素中的文本通常呈現為粗體並且居中。

<td> 元素中的文本通常是普通的左對齊文本。

如果需要將內容橫跨多個行或列，請使用 colspan 和 rowspan 屬性。

7、table中如何用CSS控制<tr>><td>的寬度和高度

單獨的一個table的高度，代碼如下：

<style type="text/css">

.main td{ height:30px; border:#CCCCCC 1px solid;}

</style>

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="main">

<tr>

<td> </td>

<td> </td>

<td> </td>

</tr>

<tr>

<td> </td>

<td> </td>

<td> </td>

</tr>

</table>

.main td的意思是指定main類下的td，同理也可以指定tr。這樣的做法只能針對了設定main類的表格。

如果想要所有的table都是同一個高度樣式可以這樣寫：

<style type="text/css">
table td{ height:30px; border:#CCCCCC 1px solid;}
</style>

(7)網頁設計中tr100擴展資料：

注意的是table前不要加點，因為它不是類名，而是html元素。

TD屬性height ：設置單元格的高度。HTML4.01中已經廢棄，HTML5不支持。

在CSS中height屬性具有以下的取值： 

auto ：默認。瀏覽器會計算出實際的高度。

length ：使用 px、cm 等單位定義高度。

% ：基於包含它的塊級對象的百分比高度。

inherit ：規定應該從父元素繼承 height 屬性的值。

參考資料：網路——css表格

8、網頁製作中如何求和

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title>自動計算表格之和</title> <style type="text/css"> *{margin:0;padding:0;} .tab,.tab td {border:1px solid #CCCCCC;border-collapse:collapse;} .tab td {text-align:center;} input {border:0;} </style> <script type="text/javascript"> function getH() { var v=new Array(); v[0]=parseInt(document.getElementById('t1').value); v[1]=parseInt(document.getElementById('t2').value); v[2]=parseInt(document.getElementById('t3').value); v[3]=parseInt(document.getElementById('t4').value); v[4]=parseInt(document.getElementById('t5').value); v[5]=parseInt(document.getElementById('t6').value); var h=v[0]+v[1]+v[2]+v[3]+v[4]+v[5]; document.getElementById('t7').value=h.toString(); } </script> </head> <body> <table width=50 cellpadding="0" cellsapcing=0 border=0 align=center class=tab> <tr> <td width=100% height=27><input type="text" id="t1" size=4 /></td> </tr> <tr> <td width=100% height=27><input type="text" id="t2" size=4 /></td> </tr> <tr> <td width=100% height=27><input type="text" id="t3" size=4 /></td> </tr> <tr> <td width=100% height=27><input type="text" id="t4" size=4 /></td> </tr> <tr> <td width=100% height=27><input type="text" id="t5" size=4 /></td> </tr> <tr> <td width=100% height=27><input type="text" id="t6" size=4 onblur="getH()" /></td><!--當焦點離開第6個表格時，將上面的6個表格內的值相加，然後在第7個表格中顯示--> </tr> <tr> <td width=100% height=27><input type="text" id="t7" size=4 /></td> </tr> </table> </body> </html> 當焦點離開第6個表格時，將上面的6個表格內的值相加，然後在第7個表格中顯示 以上代碼只是簡單地演示如何利用javascript提高用戶輸入的交互性特徵，你可以自由地嵌入到各種開發言語中，無論是Asp或是Php、Jsp、Aspx等等中。 代碼十分簡單，基本上實現你所需要的功能， 如果需要更高級的功能，還需要你進一步去開發