目錄
第二章 HTML第二天
本章要點：
-
Html表單
-
Html 框架(frameset)
-
Html內嵌框架。
一、Html表單
1. 表單
表單用於蒐集不同類型的用戶輸入，表單由不同類型的標籤組成，實現一個特定功能的表單區域（比如：註冊），首先應該用<form>標籤來定義表單區域整體，在此標籤中再使用不同的表單控件來實現不同類型的信息輸入，具體實現及註釋可參照以下僞代碼：
<!-- form定義表單區域,action定義表單數據提交的地址，method屬性定義提交的方式.-->
<form action="http://www..." method="get">
<!-- label標籤定義表單控件的文字標註，input類型爲text定義了一個單行文本輸入框-->
<p>
<label>姓名：</label><input type="text" name="username" />
</p>
<!-- input類型爲password定義了一個密碼輸入框 -->
<p>
<label>密碼：</label><input type="password" name="password" />
</p>
<!-- input類型爲radio定義了單選框 -->
<p>
<label>性別：</label>
<input type="radio" name="gender" value="0" /> 男
<input type="radio" name="gender" value="1" /> 女
</p>
<!-- input類型爲checkbox定義了單選框 -->
<p>
<label>愛好：</label>
<input type="checkbox" name="like" value="sing" /> 唱歌
<input type="checkbox" name="like" value="run" /> 跑步
<input type="checkbox" name="like" value="swiming" /> 游泳
</p>
<!-- input類型爲file定義上傳照片或文件等資源 -->
<p>
<label>照片：</label>
<input type="file" name="person_pic">
</p>
<!-- textarea定義多行文本輸入 -->
<p>
<label>個人描述：</label>
<textarea name="about"></textarea>
</p>
<!-- select定義下拉列表選擇 -->
<p>
<label>籍貫：</label>
<select name="site">
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">廣州</option>
<option value="3">深圳</option>
</select>
</p>
<!-- input類型爲submit定義提交按鈕
還可以用圖片控件代替submit按鈕提交，一般會導致提交兩次，不建議使用。如：
<input type="image" src="xxx.gif">
-->
<p>
<input type="submit" name="" value="提交">
<!-- input類型爲reset定義重置按鈕 -->
<input type="reset" name="" value="重置">
</p>
</form>
二、Html框架(frameset)
所謂框架便是網頁畫面分成幾個框窗，同時取得多個 URL。只要 <FRAMESET> <FRAME> 即可，而所有框架標記要放在一個總起的 html 檔，這個檔案只記錄了該框架 如何劃分，不會顯示任何資料，所以不必放入 <BODY> 標記。<FRAMESET> 是用以劃分框窗，每一框窗由一個 <FRAME> 標 記所標示，<FRAME>必須在 <FRAMESET> 範圍中使用。如下例：
<frameset cols="50%,*">
<frame name="hello" src="up2u.html">
<frame name="hi" src="me2.html">
</frameset>
<FRAMESET> 參數設定：
例子：<frameset rows="90,*" frameborder="0" border=0 framespacing="2" bordercolor="#008000"> COLS="90,*" 垂直切割畫面(如分左右兩個畫面)，接受整數值、百分數， * 則代表佔用餘下空 間。數值的個數代表分成的視窗數目且以逗號分隔。例如 COLS="30,,50%" 可以 切成三個視窗，第一個視窗是 30 pixels 的寬度，爲一絕對分割，第二個視窗是當 分配完第一及第三個視窗後剩下的空間，第三個視窗則佔整個畫面的 50% 寬度 爲 一相對分割。您可自己調整數字。 ROWS="120," 就是橫向切割，將畫面上下分開，數值設定同上。唯 COLS 與 ROWS 兩參數儘量 不要同在一個 <FRAMESET> 標記中 frameborder="0" 設定框架的邊框，其值只有 0 和 1 ， 0 表示不要邊框， 1 表示要顯示邊框。（避免使用 yes 或 no ） border="0" 設定框架的邊框厚度，以 pixels 爲單位。 bordercolor="#008000" 設定框架的邊框顏色。 framespacing="5" 表示框架與框架間的保留空白的距離。
三、Html內嵌框架
<iframe>標籤會創建包含另外一個html文件的內聯框架（即行內框架），src屬性來定義另一個html文件的引用地址，frameborder屬性定義邊框，scrolling屬性定義是否有滾動條，代碼如下：
<iframe src="http://www..." frameborder="0" scrolling="no"></iframe>
內嵌框架與a標籤配合使用
a標籤的target屬性可以將鏈接到的頁面直接顯示在當前頁面的iframe中，代碼如下：
<a href="01.html" target="myframe">頁面一</a>
<a href="02.html" target="myframe">頁面二</a>
<a href="03.html" target="myframe">頁面三</a>
<iframe src="01.html" frameborder="0" scrolling="no" name="myframe"></iframe>
四、項目實戰
l 項目需求分析
l 項目步驟劃分
l 項目功能模塊的實現
項目需求分析
所謂”需求分析“，是指對要解決的問題進行詳細的分析，弄清楚問題的要求，包括需要輸入什麼數據，要得到什麼結果，最後應輸出什麼.
需求分析是一個項目的開始，主要是弄明白這個項目需要做什麼，用來做什麼。簡單來說就是弄明白這個項目(應用)要從什麼點出發達到什麼目的。一個好的需求分析是整個項目成功的一半。明白客戶的需求，才能時刻清楚要去做什麼，如何去做好。
項目需求分析
這個環節是由項目經理完成，項目經理首先和客戶進行交流，瞭解客戶的需求，然後分析項目的可行性，如果項目可以被實現，項目經理寫出項目需求文檔交給設計師完成後續的開發。
頁面設計
這個環節主要是UI設計師參與，UI設計師根據產品需求分析文檔，對產品的整體美術風格、交互設計、界面結構、操作流程等做出設計。負責項目中各種交互界面、圖標、LOGO、按鈕等相關元素的設計與製作。
編碼
這個部分由程序員來實現。（程序員分爲WEB前端開發工程師和後臺開發工程師。前端開發人員主要做我們可以在網頁上看的見的頁面，後臺就做一些我們看不見的管理系統以及功能的實現。）程序員根據UI設計師的設計，用編碼來完成整個項目的各個功能。
測試
這部分由程序測試員來完成。程序測試員主要就是測試尋找程序還存在的bug，一般來說剛編碼完成的程序都是存在問題的，就需要測試人員反覆不斷的測試並將存在問題的測試結果交給編碼人員進行bug的修復。等到幾乎所有bug修復完成，這個項目差不多就可以上線了。
維護
程序的維護是整個項目的最後一個階段，但也是耗時最多，成本最高最高的的一個階段。程序的維護包括程序上線後後續bug的修復和程序版本的更新。
項目功能模塊實現
INDEX.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>英萊特科技IT學院</title>
<link rel="shortcut icon" href="img/InLett-logo.png"/>
</head>
<frameset rows="20%,*" frameborder="0">
<frame noresize="noresize" src="top.html" scrolling="no"/>
<frame src="ContentSection.html" noresize="noresize"/>
</frameset>
</html>
TOP.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body bgcolor="cornflowerblue">
<form>
<table border="0" width="1500" align="center">
<tr height="80">
<td rowspan="2"><img src="C:/Program%20Files/Typora/img/InLett-logo.png" width="100" height="100"/></td>
<td colspan="5">
<h1>英萊特IT學院</h1>
</td>
<td colspan="8" align="right">
<input type="text" placeholder="請輸入查詢的內容" size="30"/>
<button>搜索</button>
</td>
</tr>
<tr bgcolor="whitesmoke" align="center" height="50">
<td><a href="#"><font color="gray" size="5" face="仿宋">網站首頁</font></a></td>
<td><a href="#"><font color="gray" size="5" face="仿宋">免費課程</font></a></td>
<td><a href="#"><font color="gray" size="5" face="仿宋">職業路徑</font></a></td>
<td><a href="#"><font color="gray" size="5" face="仿宋">實戰課程</font></a></td>
<td><a href="#"><font color="gray" size="5" face="仿宋">技術問答</font></a></td>
<td><a href="#"><font color="gray" size="5" face="仿宋">VIP會員</font></a></td>
<td><a href="#"><font color="gray" size="5" face="仿宋">線上名師</font></a></td>
<td><a href="#"><font color="gray" size="5" face="仿宋">學員作品</font></a></td>
<td><a href="#"><font color="gray" size="5" face="仿宋">就業明星</font></a></td>
<td><a href="#"><font color="gray" size="5" face="仿宋">課程分類</font></a></td>
<td><a href="#"><font color="gray" size="5" face="仿宋">教學服務</font></a></td>
<td><a href="#"><font color="gray" size="5" face="仿宋">師資團隊</font></a></td>
<td><a href="#"><font color="gray" size="5" face="仿宋">關於我們</font></a></td>
</tr>
</table>
</form>
</body>
</html>
ContentSection.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body bgcolor="aliceblue">
<table border="0" width="1500" align="center">
<tr>
<td>
<table border="0" width="400" align="right" bgcolor="dimgrey">
<tr height="100">
<td>
<h3>課程分類</h3>
</td>
</tr>
<tr height="60">
<td>
<p>前端開發</p>
</td>
</tr>
<tr height="60">
<td>
<p>後端開發</p>
</td>
</tr>
<tr height="60">
<td>
<p>移動端開發</p>
</td>
</tr>
<tr height="60">
<td>
<p>數據庫</p>
</td>
</tr>
<tr height="60">
<td>
<p>雲計算&大數據</p>
</td>
</tr>
<tr height="60">
<td>
<p>運維&測試</p>
</td>
</tr>
</table>
</td>
<td>
<img src="C:/Program%20Files/Typora/img/banner_04.png" width="1080" />
<table width="1080">
<tr>
<td align="center">
<img src="C:/Program%20Files/Typora/img/img_01.png" />
</td>
<td align="center">
<img src="C:/Program%20Files/Typora/img/img_02.png" />
</td>
<td align="center">
<img src="C:/Program%20Files/Typora/img/img_03.png" alt="" />
</td>
<td align="center">
<img src="C:/Program%20Files/Typora/img/img_04.png" alt="" />
</td>
<td align="center">
<img src="C:/Program%20Files/Typora/img/img_05.png" alt="" />
</td>
</tr>
<tr>
<td align="center">
Web前端工程師
<br /> 互聯網時代很火爆的技術
</td>
<td align="center">
PHP工程師
<br /> 適用廣泛，火爆，上升潛力大
</td>
<td align="center">
Android工程師
<br /> 移動設備市場份額高
</td>
<td align="center">
IOS工程師
<br /> 非常泛用的操作系統
</td>
<td align="center">
Java工程師
<br /> 安全，實用，適用廣泛
</td>
</tr>
</table>
</td>
</tr>
</table>
<table align="center" border="0" width="1500" bgcolor="white">
<tr align="center">
<td colspan="4">
<h2>實戰推薦</h2>
<p>熱門就業課程</p>
</td>
</tr>
<tr align="center">
<td>
<img src="C:/Program%20Files/Typora/img/tag_img01.png" width="300" />
<br />
<a href="#"><font face="宋體" size="4" color="black">全網熱門Python3入門+進階更快上手實際開發</font></a>
<br />
<p>全新改版課程 實戰 初級</p>
<p><pre><font size="6">￥299.00</font> <input type="button" value="預約"/></pre></p>
</td>
<td>
<img src="C:/Program%20Files/Typora/img/tag_img02.png" width="300" />
<br />
<a href="#"><font face="宋體" size="4" color="black">Android 通用框架設計與完整的電商 APP 開發</font></a>
<br />
<p>全新改版課程 實戰 初級</p>
<p><pre><font size="6">￥299.00</font> <input type="button" value="預約"/></pre></p>
</td>
<td>
<img src="C:/Program%20Files/Typora/img/tag_img03.png" width="300" />
<br />
<a href="#"><font face="宋體" size="4" color="black">ThinkPHP 5.0開發微信小程序商場打通全 棧項目架構</font></a>
<br />
<p>全新改版課程 實戰 初級</p>
<p><pre><font size="6">￥299.00</font> <input type="button" value="預約"/></pre></p>
</td>
<td>
<img src="C:/Program%20Files/Typora/img/tag_img04.png" width="300" />
<br />
<a href="#"><font face="宋體" size="4" color="black">
Spring Security開發安全的REST服務操作系統</font></a>
<br />
<p>全新改版課程 實戰 初級</p>
<p><pre><font size="6">￥299.00</font> <input type="button" value="預約"/></pre></p>
</td>
</tr>
</table>
<table align="center" border="0" width="1500" bgcolor="ghostwhite">
<tr align="center">
<td colspan="4">
<h2>新上好課</h2>
<p>新上就業課程</p>
</td>
</tr>
<tr align="center">
<td>
<img src="C:/Program%20Files/Typora/img/tag_img05.png" width="300" />
<br />
<a href="#"><font face="宋體" size="4" color="black">對接真實數據 從0開發前後端分離企業級 上線項目</font></a>
<br />
<p>全新改版課程 實戰 初級</p>
<p><pre><font size="6">￥299.00</font> <input type="button" value="預約"/></pre></p>
</td>
<td>
<img src="C:/Program%20Files/Typora/img/tag_img06.png" width="300" />
<br />
<a href="#"><font face="宋體" size="4" color="black">BAT大咖助力 全面升級Android面試操作系統</font></a>
<br />
<p>全新改版課程 實戰 初級</p>
<p><pre><font size="6">￥299.00</font> <input type="button" value="預約"/></pre></p>
</td>
<td>
<img src="C:/Program%20Files/Typora/img/tag_img07.png" width="300" />
<br />
<a href="#"><font face="宋體" size="4" color="black">
SSM到Spring Boot 從零開發校園商鋪平 臺系統</font></a>
<br />
<p>全新改版課程 實戰 初級</p>
<p><pre><font size="6">￥299.00</font> <input type="button" value="預約"/></pre></p>
</td>
<td>
<img src="C:/Program%20Files/Typora/img/tag_img08.png" width="300" />
<br />
<a href="#"><font face="宋體" size="4" color="black">企業級剛需Nginx入門，掌握Nginx配置 +快速搭建</font></a>
<br />
<p>全新改版課程 實戰 初級</p>
<p><pre><font size="6">￥299.00</font> <input type="button" value="預約"/></pre></p>
</td>
</tr>
</table>
<table align="center" border="0" width="1500" bgcolor="ghostwhite">
<tr align="center">
<td colspan="4">
<h2>新手入門</h2>
<p>--------零基礎課程--------</p>
</td>
</tr>
<tr align="center">
<td colspan="2">
<img src="C:/Program%20Files/Typora/img/tag_img09.png" alt="" width="690" height="100" />
</td>
<td colspan="2">
<img src="C:/Program%20Files/Typora/img/tag_img10.png" alt="" width="690" height="100" />
</td>
</tr>
<tr align="center">
<td>
<img src="C:/Program%20Files/Typora/img/tag_img11.png" width="300" />
<br />
<a href="#"><font face="宋體" size="4" color="black">
編程小白入門 C++遠征之起航篇 項目入 門必看</font></a>
<br />
<p>全新改版課程 實戰 初級</p>
<p><pre><font size="6">￥299.00</font> <input type="button" value="預約"/></pre></p>
</td>
<td>
<img src="C:/Program%20Files/Typora/img/tag_img12.png" width="300" />
<br />
<a href="#"><font face="宋體" size="4" color="black">編程小白入門 Java C++算法與數據結構精 講課程</font></a>
<br />
<p>全新改版課程 實戰 初級</p>
<p><pre><font size="6">￥299.00</font> <input type="button" value="預約"/></pre></p>
</td>
<td>
<img src="C:/Program%20Files/Typora/img/tag_img13.png" width="300" />
<br />
<a href="#"><font face="宋體" size="4" color="black">
編程小白入門HTML5與CSS3實現動態網 頁項目開發</font></a>
<br />
<p>全新改版課程 實戰 初級</p>
<p><pre><font size="6">￥299.00</font> <input type="button" value="預約"/></pre></p>
</td>
<td>
<img src="C:/Program%20Files/Typora/img/tag_img14.png" width="300" />
<br />
<a href="#"><font face="宋體" size="4" color="black">編程小白入門PHP從基礎語法到原生項目 開發項目操作</font></a>
<br />
<p>全新改版課程 實戰 初級</p>
<p><pre><font size="6">￥299.00</font> <input type="button" value="預約"/></pre></p>
</td>
</tr>
</table>
<table align="center" border="0" width="1500" bgcolor="ghostwhite">
<tr align="center">
<td colspan="4">
<h2>技能提升</h2>
<p>--------學習增值進階--------</p>
</td>
</tr>
<tr align="center">
<td colspan="2">
<img src="C:/Program%20Files/Typora/img/tag_img15.png" alt="" width="690" height="100" />
</td>
<td colspan="2">
<img src="C:/Program%20Files/Typora/img/tag_img16.png" alt="" width="690" height="100" />
</td>
</tr>
<tr align="center">
<td>
<img src="C:/Program%20Files/Typora/img/tag_img17.png" width="300" />
<br />
<a href="#"><font face="宋體" size="4" color="black">聚焦Python分佈式爬蟲必學框架打造搜索 引擎Scrapy</font></a>
<br />
<p>全新改版課程 實戰 初級</p>
<p><pre><font size="6">￥299.00</font> <input type="button" value="預約"/></pre></p>
</td>
<td>
<img src="C:/Program%20Files/Typora/img/tag_img18.png" width="300" />
<br />
<a href="#"><font face="宋體" size="4" color="black">課程進階Android高級面試 10大開源框架 源碼解析</font></a>
<br />
<p>全新改版課程 實戰 初級</p>
<p><pre><font size="6">￥299.00</font> <input type="button" value="預約"/></pre></p>
</td>
<td>
<img src="C:/Program%20Files/Typora/img/tag_img19.png" width="300" />
<br />
<a href="#"><font face="宋體" size="4" color="black">
Java SpringBoot Spring Boot帶前後端 企業級博客系統</font></a>
<br />
<p>全新改版課程 實戰 初級</p>
<p><pre><font size="6">￥299.00</font> <input type="button" value="預約"/></pre></p>
</td>
<td>
<img src="C:/Program%20Files/Typora/img/tag_img20.png" width="300" />
<br />
<a href="#"><font face="宋體" size="4" color="black">Android高級面試 10大開源框架源碼解析 項目實戰</font></a>
<br />
<p>全新改版課程 實戰 初級</p>
<p><pre><font size="6">￥299.00</font> <input type="button" value="預約"/></pre></p>
</td>
</tr>
</table>
<table border="0" width="1500" align="center" bgcolor="cornflowerblue">
<tr align="center">
<td colspan="4">
<h1>明星導師</h1>
<p>--------明星公開新課--------</p>
</td>
</tr>
<tr align="center">
<td>
<img src="C:/Program%20Files/Typora/img/teacher_01.jpg" width="300" />
</td>
<td>
<img src="C:/Program%20Files/Typora/img/teacher_02.jpg" width="300" />
</td>
<td>
<img src="C:/Program%20Files/Typora/img/teacher_03.jpg" width="300" />
</td>
<td>
<img src="C:/Program%20Files/Typora/img/teacher_04.jpg" width="300" />
</td>
</tr>
</table>
<table border="0" width="1500" align="center">
<tr>
<td colspan="2">
<h2>|熱門話題</h2>
<hr />
</td>
<td colspan="2">
<h2>|手記文章</h2>
<hr />
</td>
<td colspan="2">
<h2>|相關問答</h2>
<hr />
</td>
</tr>
<tr>
<td>
<img src="C:/Program%20Files/Typora/img/tag_img21.jpg" />
</td>
<td>
是時候說說 #挨踢狗們の國慶假期#了 眼瞅着舉國歡慶的國慶節假期就要來啦！在座各位挨踢狗們準備如何度過這雞凍人心的小長假呢？不管是自備泡麪の8天宅家計劃...
</td>
<td>
<img src="C:/Program%20Files/Typora/img/tag_img22.jpg" />
</td>
<td>
探究Java虛擬機棧—Java進階 前言Java 虛擬機的內存模型分爲兩部分：一部分是線程共享的，包括 Java 堆和方法區；另一部分是線程私有的，包...
</td>
<td>
<img src="C:/Program%20Files/Typora/img/tag_img23.jpg" />
</td>
<td>
不使用 JS 匿名函數的三個理由 無論你在什麼時候讀代碼，您都必須注意到匿名函數。有時它們被稱爲 lambda，有時是匿名函數，不管怎樣，我認爲他們...
</td>
</tr>
<tr>
<td colspan="2">
<ul>
<li>
<a href="#">
<font size="4" color="darkslateblue">iOS自動佈局框架-Masonry詳解</font>
</a>
</li>
<br />
<li>
<a href="#">
<font size="4" color="darkslateblue">給Java新手的一些建議——Java知識點歸納(Java基礎部分)</font>
</a>
</li>
<br />
<li>
<a href="#">
<font size="4" color="darkslateblue">給一個新手程序員的建議</font>
</a>
</li>
<br />
<li>
<a href="#">
<font size="4" color="darkslateblue">servlet+ajax實現智能搜索框提示</font>
</a>
</li>
</ul>
</td>
<td colspan="2">
<ul>
<li>
<a href="#">
<font size="4" color="darkslateblue">iOS自動佈局框架-Masonry詳解</font>
</a>
</li>
<br />
<li>
<a href="#">
<font size="4" color="darkslateblue">給Java新手的一些建議——Java知識點歸納(Java基礎部分)</font>
</a>
</li>
<br />
<li>
<a href="#">
<font size="4" color="darkslateblue">給一個新手程序員的建議</font>
</a>
</li>
<br />
<li>
<a href="#">
<font size="4" color="darkslateblue">servlet+ajax實現智能搜索框提示</font>
</a>
</li>
</ul>
</td>
<td colspan="2">
<ul>
<li>
<a href="#">
<font size="4" color="darkslateblue">iOS自動佈局框架-Masonry詳解</font>
</a>
</li>
<br />
<li>
<a href="#">
<font size="4" color="darkslateblue">給Java新手的一些建議——Java知識點歸納(Java基礎部分)</font>
</a>
</li>
<br />
<li>
<a href="#">
<font size="4" color="darkslateblue">給一個新手程序員的建議</font>
</a>
</li>
<br />
<li>
<a href="#">
<font size="4" color="darkslateblue">servlet+ajax實現智能搜索框提示</font>
</a>
</li>
</ul>
</td>
</tr>
<tr bgcolor="black" align="center">
<td colspan="6">
<pre><font size="5" face="宋體" color="white">首頁 熱門課程 職業路徑 實戰課程 文章問答 </font></pre>
</td>
</tr>
<tr bgcolor="black">
<td colspan="4">
<pre><font size="4" face="宋體" color="white">
InLett科技
掃查看手機版網站
©2019 - 陝西科技網站 版權所有
手機版 |本站僅供內部使用 | 管理登錄
</font></pre>
</td>
<td colspan="2" align="center">
<img src="C:/Program%20Files/Typora/img/%E5%AE%98%E6%96%B9%E5%85%AC%E4%BC%97%E5%8F%B7.jpg" alt="" width="100" height="100" />
</td>
</tr>
</table>
</body>
</html>