HTML表格，表單和框架
阿新 • • 發佈：2019-02-07
表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<!--
表格基本框架：
<table>
<tr>
<td>單元格內容</td>
<td>單元格內容</td>
...
</tr>
...
</table>
屬性：
boder，表格邊框的寬度
width，以百分比或者畫素指定表格的寬度
height，以百分比或者畫素指定表格的高度
cellspacing ，相鄰單元格的間距和單元格外邊沿和表格邊沿的距離
cellpadding，單元格內容和單元格邊沿的間距
表格分組： thead 表頭分組
tfoot 表尾分組
tbody 表格主體分組
colgroup 列分組
caption指定表格標題
列和行的屬性（合併單元格使用）：
colspan 指定一列橫跨幾列（水平方向）
rowspan指定一行橫跨幾列（豎直方向）
width，height 以百分比或者畫素指定單元格的寬度，高度
align 單元格水平對其方式（left ，center ，right）
valign 單元格豎直對其方式（top，middle，bottom）
bgcolor 單元格的顏色
bodercolor 單元格邊框顏色
background 單元格背景圖片
--> 表單
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表單使用1</title>
</head>
<body>
<!--
表單是一個容器空間，用來收集客戶端要提交到伺服器端的資訊，客戶端將資訊填寫在表單的控制元件中，
當點選表單的提交按鈕時，表單中包含的控制元件中的資訊九江提交給表單action中action屬性指定的處理程式
表單的工作流程
1.通過表單控制元件來設計表單
2.通過瀏覽器將表單呈現給客戶端的瀏覽器
3.客戶端填寫相關控制元件中的資訊，單擊表單的提交按鈕，將表單中的資料提交給處理程式
4.伺服器處理完表單後，將生成的結果返回給客戶端瀏覽器
<form name="..." action="..." methoad="post/get"
target="..." enctype="..." onsubmit="..."
onreset="..." accept="..." accept-charset="..">
</form>
1.name指的是表單的名字，指定表單名字，便於引用，例如使用javascript對錶單資料進行驗證
2. action指的是處理表單或者接受表單資料的程式的url（例如servlet jsp）,不指定action將提交到當前頁面
3.methoad指的是提交的方法，區別：get方法將表單中控制元件的內容轉換成引數附加在請求的url上（使用者瀏覽器位址列可見，不安全），
資料量小，一般為2kb；post方法，將資料放在html頭資訊中提交的到拂去其，使用者不可見，安全，傳輸資料量大，對於表單，為了安全和容量，一般使用post方法
4.target指的是目標視窗，和超連結的target類似
5.enctype指的是提交資料的格式，對於沒有檔案域的表單一般不用填寫，對於檔案，需要將enctype指定為multipart/form-data。此外tetx/plain一般用於郵件傳送（不會改變編碼）
6.onsubmit和onreset分別值得是表單提交和重置的時候需要執行的指令碼
7.accept指的是檔案上傳時候檔案的型別（一般瀏覽器都不支援）
8.accept-charset指的是伺服器處理表單資料所接受的字符集
-->
<form name="form1" action="" method="post">
<table border="1" width="400" cellspacing="0" cellpadding="0">
<tr>
<td>文字框</td>
<!--
input標籤包含許多控制元件的使用，通過type屬性來指定不同的控制元件型別
單行文字框，
屬性：
value 初始預設值
size 最寬顯示支付的字數
maxlength 允許輸入的最大文字數
onchage 文字改變呼叫的指令碼
onselect 文字選中呼叫的指令碼
onfocus 文字框獲得焦點呼叫的指令碼
-->
<td><input type="text" name="name" maxlength="4" value="請輸入姓名" /></td>
</tr>
<tr>
<td>密碼框</td>
<!--
密碼框
輸入密碼會以*顯示在螢幕上，其他的和文字框類似
-->
<td><input type="password" name="password" /></td>
</tr>
<tr>
<td>單選按鈕</td>
<!--
單選按鈕
定義一組單選按鈕，對於同一組單選按鈕，要想得到互斥效果，需要將name屬性指定為相同，確保他們是同一組單選按鈕
-->
<td>
<input type="radio" name="gender" value="boy" />男
<input type="radio" name="gender" value="girl" />女
</td>
</tr>
<tr>
<td>複選框</td>
<!--
複選框
checked屬性指定預設選中狀態
同一組複選框name屬性值要相同
-->
<td>
<input type="checkbox" name="hobby" value="reading" />讀書
<input type="checkbox" name="hobby" value="music" />聽音樂
<input type="checkbox" name="hobby" value="run" />跑步
<input type="checkbox" name="hobby" value="swimming" />游泳
</td>
</tr>
<tr>
<td>普通按鈕</td>
<!--
普通按鈕，主要利用onclick屬性來新增點選事件，執行對應指令碼
-->
<td>
<input type="button" value="button" />
</td>
</tr>
<tr>
<td>檔案域</td>
<!--
上傳檔案域
value指的是上傳檔案域中按鈕的提示文字 （選擇檔案 瀏覽...）
-->
<td>
<input type="file" value="請選擇檔案" />
</td>
</tr>
<tr>
<td>隱藏域</td>
<!--
隱藏域對使用者不可見，一般通過隱藏域來為開發者傳遞一些資訊，用於會話跟蹤等
-->
<td>
<input type="hidden" />
</td>
</tr>
<tr>
<td>下拉列表</td>
<!--
name是下拉列表的名字
size指的是下拉列表可見的選項數目
onfocus（獲的焦點） onblur（失去焦點） onchange（改變）的時候呼叫的指令碼函式
multiple指的是允許多選，預設不允許，設定後下拉列表會展開
<option>中selected屬性指定初始預設選中的選項
-->
<td>
<select name="fruit">
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="banana">Banana</option>
<option value="cherry">Cherry</option>
<option value="pear">Pear</option>
<option value="watermelon">watermelon</option>
</select>
<select name="fruit" size="6" multiple="multiple">
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="banana">Banana</option>
<option value="cherry">Cherry</option>
<option value="pear">Pear</option>
<option value="watermelon">watermelon</option>
</select>
</td>
</tr>
<tr>
<td>文字區域</td>
<!--
name指定的是文字框的名稱
cols指的是多行文字框的寬度，超過會自動換行，沒有設定則會出現滾動條
rows指的是超過行數出現滾動條
wrap指的是多方文字框時候自動換行，預設值off，即啟動自動換行功能；
virture將實現自動換行，但是在傳輸給伺服器的時候，文字子再使用者按下enter鍵的地方換行；
physical將實現文字區域的自動換行，並且以在文字框看到的效果傳給伺服器
readonly指的是文字框的制度屬性，設定後文本框不可編輯
onfocus onblur onchange和其他控制元件類似
-->
<td>
<textarea name="suggestion" wrap="hard" rows="6" cols="20"></textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" /><input type="reset" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<!--
提交按鈕
-->
<input type="submit" value="提交" />
<!--
重置按鈕
點選後表單中的控制元件會回到預設狀態
-->
<input type="reset" value="重置" />
</td>
</tr>
</table>
</form>
</body>
</html>框架
frame.html
<!DOCTYPE html>
<html>
<!--
框架將瀏覽器視窗劃分為多區域，每個區域都是一個框架，每個區域引用一個原始檔
每個框架腹互不影響，但是可以通過target=“framename”屬性來改變其他框架的內容
-->
<!--
frameset
cols定義列的數目和尺寸（單位：畫素，百分比，*）
rows定義行的數目和尺寸（單位：畫素，百分比，*）
frameboder 0或1，隱藏或顯示框架邊框，預設顯示。
framespacing 邊框寬度，畫素為單位
framecolor 邊框顏色
scrolling 是否顯示滾動條yes no auto
noresize 不允許改變框架大小
-->
<frameset rows="10%,*">
<!--
frame
src指定原始檔
name用來表示框架
frameboder 0或者1，控制邊框
marginheight marginwidth 指定上下左右邊距
scrolling 是否顯示滾動條yes no auto
-->
<frame name="top" src="top.html" />
<frameset cols="20%,*">
<frame name="left" src="left.html" />
<frame name="right" src="right_chapter1.html" />
</frameset>
</frameset>
</html>top.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1 align="center">這裡是TOP</h1>
</body>
</html>left.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li>
<a href="right_chapter1.html" target="right">第一章</a>
</li>
<li>
<a href="right_chapter2.html" target="right">第二章</a>
</li>
<li>
<a href="right_chapter3.html" target="right">第三章</a>
</li>
</ul>
</body>
</html>right_chapter1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
（前面還有一個序章，大家不要漏看。）<br /><br /> 石村，位於蒼莽山脈中，四周高峰大壑，茫茫群山巍峨。<br /><br /> 清晨，朝霞燦燦，仿若碎金一般灑落，沐浴在人身上暖洋洋。<br /><br /> 一群孩子，從四五歲到十幾歲不等，能有數十人，在村前的空地上迎著朝霞，正在哼哈有聲的鍛鍊體魄。一張張稚嫩的小臉滿是認真之色，大一些的孩子虎虎生風，小一些的也比劃的有模有樣。<br /><br /> 一個肌體強健如虎豹的中年男子，穿著獸皮衣，面板呈古銅色，黑髮披散，炯炯有神的眼眸掃過每一個孩子，正在認真指點他們。<br /><br /> “太陽初升，萬物初始，生之氣最盛，雖不能如傳說中那般餐霞食氣，但這樣迎霞鍛體自也有莫大好處，可充盈人體生機。一天之計在於晨，每日早起多用功，強筋壯骨，活血煉筋，將來才能在這蒼莽山脈中有活命的本錢。”站在前方、指點一群孩子的中年男子一臉嚴肅，認真告誡，而後又喝道：“你們明白嗎？”<br /><br /> “明白！”一群孩子中氣十足，大聲迴應 。
<br /><br /> 山中多史前生物出沒，時有遮蔽天空之巨翼橫過，在地上投下大片的陰影，亦有荒獸立於峰上，吞月而嘯，更少不了各種毒蟲伏行，異常可怖。<br /><br /> “明白呀。”一個明顯走神、慢了半拍的小傢伙奶聲奶氣的叫道。<br /><br /> 這是一個很小的孩子，只有一兩歲的樣子，剛學會走路沒幾個月，也在跟著鍛鍊體魄。顯然，他是自己湊過來的，混在了年長的孩子中，分明還不應該出現在這個隊伍裡。<br /><br /> “哼哼哈嘿！”小傢伙口中發聲，嫩嫩的小手臂賣力的揮動著，效仿大孩子們的動作，可是他太過幼小，動作歪歪扭扭，且步履蹣跚，搖搖擺擺，再加上嘴角間殘留的白色奶漬，引人發笑。<br /><br /> 一群大孩子看著他，皆擠眉弄眼，讓原本嚴肅的晨練氣氛輕緩了不少。<br /><br /> 小不點長的很白嫩與漂亮，大眼睛烏溜溜的轉動，整個人像是個白瓷娃娃，很可愛，稚嫩的動作，口中咿咿呀呀，憨態可掬。這讓另一片場地中盤坐在一塊塊巨石上正在吞吐天精的一些老人也都露出笑容。<br /><br /> 就是那些身材高大魁梧、上半身*、肌腱光亮並隆起的成年男子們，也都望了過來，帶著笑意。他們是村中最強壯的人，是狩獵與守護這個村落的最重要力量，也都在鍛體，有人握著不知名的巨獸骨骼打磨而成的白骨大棒，也有人持著黑色金屬鑄成的闊劍，用力舞動，風聲如雷。<br /><br /> 生存環境極其惡劣，多洪荒猛獸毒蟲，為了食物，為了生存，很多男子還未成年就過早夭折在了大荒中，想要活下去，唯有強壯己身。清晨用功，無論是成年人，亦或是老人與孩子，這是每一個人自幼就已養成的習慣。<br /><br /> “收心！”負責督促與指導孩子練功的中年男子大聲喊道。一群孩子趕緊認真了起來，繼續在柔和與燦爛的朝霞中鍛鍊。<br /><br /> “呼……咿呀，累了。”小不點長出了一口氣，一屁墩兒坐在了地上，看著大孩子們鍛鍊體魄。可僅一會兒工夫他就被分散了注意力，站起身來，搖搖擺擺，衝向不遠處一隻正在蹦蹦跳跳的五色雀，結果磕磕絆絆，連摔了幾個屁墩兒，倒也不哭，氣呼呼，哼哼唧唧爬起來再追。<br /><br /> “好了，收功！”<br /><br /> 隨著一聲大喝，所有孩子都一陣歡呼，揉了揉痠疼的手腳，而後一鬨而散，衝向各自的家中，準備吃早飯。<br /><br /> 老人們都笑了，自巨石上起身。而那些身材健壯如虎的成年人則是一陣笑罵，數落著自己的孩子，拎著骨棒與闊劍也快步向自家中走去。<br /><br /> 石村不是很大，男女老少加起來能有三百多人，屋子都是巨石砌成的，簡樸而自然。<br /><br /> 在村頭有一截巨大的雷擊木，直徑十幾米，此時主幹上唯一的柳條已經在朝霞中掩去了瑩光，變得普普通通了。<br /><br /> “噢，居然有土龍肉，給我一塊！”<br /><br /> 這些孩子都很活潑與好動，即便吃飯時也都不太老實，不少人抱著陶碗從自家出來，湊到了一起。<br /><br /> 石村周圍草木豐茂，猛獸眾多，可守著大山，村人的食物相對來說卻算不上豐盛，只是一些粗麥餅、野果以及孩子們碗中少量的肉食。<br /><br /> 事實上，食物不充裕對於石村來說一直是一個很嚴重的問題。山脈中十分危險，那些異獸凶禽過於強大與恐怖，每一次去狩獵都可能會有人丟掉性命。<br /><br /> 如果有選擇，村人是不願進山的。因為進山就意味著可能會有流血與犧牲。<br /><br /> 食物對於他們來說非常寶貴，容不得浪費，每一個孩子從小就懂得這一點，飢餓、食物、狩獵、性命、鮮血這些是相連的。<br /><br /> 村頭是老族長石雲峰的院落，由巨石堆砌而成，緊挨著焦黑而巨大的柳木
</html>right_chapter2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
在族長與一些老人的禱告下，所有青壯年都露出鄭重之色，進行禮拜。而不少婦孺也都趕了過來，默默祈禱，祈求去狩獵的親人可以無恙的回來。<br /><br /> 山脈中太危險，離開柳木守護的村子，外面將是一個完全不同的世界，那裡充滿了恐怖的猛禽與巨獸。<br /><br /> 就這樣，村中最強壯的一批人揹著巨弓、帶著闊劍出發了，走進了山川大澤間，頓時一股大荒氣息迎面撲來。<br /><br /> 目送狩獵隊伍離去，老族長石雲峰領著一群孩子來到村頭的草地上，盤坐下來，道：“好了，你們這群皮猴子也該用功學習了。”<br /><br /> 一群孩子頓時愁眉苦臉，一個個沒精打采，不情不願的圍坐在了四周，像是晒蔫了的葉子一般。<br /><br /> “族長爺爺，那些鳥文龜字像鬼怪符一樣複雜，實在難學，用心記它做什麼？”<br /><br /> “就是啊，還不如阿爸教我的箭法有用呢！”<br /><br /> 一群孩子全都是苦瓜臉，很抵觸 。
<br /><br /> “你們這群娃子真不曉事理，骨文是強橫的太古遺種天生顯化在骨骼上的符號，蘊含了神祕莫測的力量，多少人想學都沒有門路。一旦學有所成，不知會比你們的父輩強大多少倍。”老族長恨鐵不成鋼，數落他們。<br /><br /> “族長爺爺，你為我們演示一下骨文的力量吧。”有一個稍大些的孩子說道。<br /><br /> “小不點過來。”族長衝著遠處喊道。<br /><br /> 小不點追完五色雀後正在賣力拉扯一條大黃狗的尾巴，聞言迷糊的轉頭，鬆開手後屁顛屁顛的跑了過來，眨動著明亮的大眼，道：“咿呀咿呀，族長爺爺什麼事呀？”<br /><br /> “將我教你的那個骨文使用出來。”石雲峰道。<br /><br /> “好呀。”小不點很聽話，伸出兩隻小手，閉上嘴巴，渾身不斷用力，憋的小臉都紅撲撲了。<br /><br /> “嗡”的一聲，他的手心出現一塊光亮，浮現出一個奇怪的文字，像是以金屬澆鑄而成，擁有一種金屬光澤與質感，很快另一隻手也出現了。<br /><br /> 小不點上前走了兩步，將一塊比他還高的青石抱了起來。<br /><br /> “真厲害！”一群孩子驚呼，那才是一個一歲多的小傢伙，怎麼能搬起這樣一塊不小的石頭？<br /><br /> “小不點你將吃奶的力氣都用出來了吧？”大孩子逗他。<br /><br /> “咿呀，是的，力氣都用光了。”小不點扔下青石，一屁股坐在了地上，沒心沒肺的笑著，很純淨，而手心的符文則迅速暗淡、消失。<br /><br /> “族長爺爺，這就是你十幾年來研究的神祕骨文力量？”一群孩子雙眼放光，與不久前興趣缺缺的樣子截然不同。<br /><br /> “別興奮，這些只能引你們上路而已，比古代傳說中出現的天骨文還差的遠。”老人點了點頭，又搖了搖頭。<br /><br /> “族長爺爺給我們講一講外面的世界吧。”一群孩子露出希冀之色。<br /><br /> 石村中所有人都知道，老族年輕時曾與村中十幾個強大的族人去過遙遠的大地盡頭，在外界闖蕩過。<br /><br /> 可是十幾年前，只有兩個人滿身是血的回來，其中一人沒多久就死去了，唯有石雲峰一個人活了下來。<br /><br /> 這些年他一直在研究神祕的骨文，不時以村中體質強的人做試驗，這些孩子清楚的知道，他們那些強壯如虎龍的父輩每次被叫去時都會在那座石院中發出陣陣令人心顫的嚎叫，讓這些孩子過早的產生了抵觸與敬畏之心。<br /><br /> 直到近年老族長的研究緩和下來，才不怎麼令村人害怕了。而且，那吃百獸奶與百家飯長起來的小不點被他領養了，成為了最好的研究人選。<br /><br /> “外界啊……”老人露出回憶之色，一陣出神與悵然後才道：“世界太大，廣袤無垠，從一域到另一域動輒數以百萬裡，沒人知道真正有多麼廣闊，一個人徒步走上一輩子也走不出一域之地，大荒茫茫無盡。人族不同地域間很難通訊往來，因為實在太危險了，大地上強橫物種諸多，可怕而神祕，縱然是幾十萬人的部落或者巨集偉的巨城，也可能在一夜間被幾頭太古遺種毀掉。當然，也有強大到難以想象的人類，媲美其他物種的絕頂戰力，神威無匹，可稱之為人族天驕。”<br /><br /> 一群孩子心有敬畏，同時也很嚮往，對未知的世界感到好奇，有人問道：“大地山川間有能讓人一夜脫胎換骨的地寶與仙藥嗎，人族最厲害的天驕有多麼大的威勢？”<br /><br /> 老人笑了，道：“想知道的話就讓自己先強大起來。”<br /><br /> “我們如果掌握了骨文的神祕力量，就能去闖天下各域嗎？”有些孩子露出憧憬之色 。
<br /><br /> 石雲峰摸了摸一個孩子的頭，道：“不要說其他各域，就是我們這一域，若是有奇人能橫穿一半疆土就了不得了！”<br /><br /> 所有孩子都發呆。<br /><br /> “我能做到的僅是把你們引上路，以後究竟走到哪一步要看你們自己，我教給你們的東西應該不會比外界同齡的孩子學到的差。”老人說到最後，眼中露出異光，摸了摸懷中一塊奇異的玉骨。<br /><br /> 一群孩子圍坐在老族長的身邊，終於收心，開始認真聆聽教誨，一直到午時才散去。<br /><br /> “太難了，族長居然說要幾年才有個別人能將少許骨文化入體內，而大多數人可能永遠不會成功。”<br /><br /> “可是小不點才豆丁那麼大，他居然做到了。”<br /><br /> 小不點很無辜的眨巴著大眼，而後又去拉扯那條大黃狗的尾巴了，大黃狗則更無辜的汪汪叫了起來。<br /><br /> 紅日西墜，在夕陽的餘暉中，整片石村都被染上了一層淡金色的光彩，遠處猿啼虎嘯，而這裡大片的石屋卻宛如遠古神廟般神聖、祥寧。<br /><br /> 數十人出現在地平線上，被夕陽在地上拉扯出長長的影跡，而身體的輪廓則被晚霞鑲上了道道金邊，顯得無比高大與雄健，幾乎每一個人都拖著一頭巨大的猛獸，滿載而歸。<br /><br /> “回來了！”早已站在村頭等待多時的一群婦孺一陣歡呼，心中的不安與惶懼一下子消失了，大聲的呼喊了起來。<br /><br /> “阿爸他們平安回來了！”<br /><br /> “天啊，竟然有這麼多的獵物，真是一次罕見的大豐收！”<br /><br /> 這次狩獵非常成功，幾十名成年男子都有所獲，獵物中有體形龐大的龍角象、有狀若牛的獨足夔獸、還有水桶粗細並生有雙翼的飛蟒……<br /><br /> 村中的老人們露出驚色，這些生物平日間很難對付，有些稱得上是凶獸，而今日卻被獵殺了這麼多，血跡斑斑，實在出人意料。<br /><br /> 比如那龍角象，象身堅若鐵，鐵矛都難以刺透，一雙龍角更是鋒利如鑽刀，能將巨石輕易粉碎。而那夔獸其音如雷，若在近前，可將人活活震死。至於那肋生巨翼的飛蟒則是山林殺手，可以突然自一座山頭撲殺而下，極其可怖。<br /><br /> 獵物中還有幾種更厲害的生物，如通體赤紅的雙頭火犀、血脈不純的貔貅……這些可都是名副其實的凶獸，發現它們後應該遠遠地