不知道從哪說起那就一段一段代碼的說吧
實例一：iframe框架顯示
寫一個這樣的網頁：
分析：
1.需要三個鏈接，一個是默認的百度鏈接，默認顯示在那個框里，另外；兩個是點擊跳轉的超鏈接。
2.需要iframe框架分割
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="content-type" content="text/html;charset=gb2312"><!--固定寫發，指定網頁是是用什么格式來解析的--> <meta name="authoe" content="李強" /><!--authoe:表示作者，叫李強--> <title>第一個網頁文件</title> <meta name="Description" content="李強的第一個站點"/><!--網頁描述--> <meta name="website" content="wwww.baidu.com"/><!--設置網址--> <meta name="keywords" content="wbb前端頁面"/><!--瀏覽器搜索的關鍵字--> </head> <body> <iframe name="topframe" width="100%" height="400px" src="http://www.baidu.com" frameborder="1" scrolling="auto"> <!--iframe 中name屬性為這個要素的名字，src表示地址，frameborder表示如上圖所示百度外圍那有個黑色的邊框，0表示沒有1表示有，scrolling表示在需要的情況下出現滾動條（默認值）。--> </iframe> <p><a href="http://www.sina.com.cn" target="topframe" >新浪</a> <a href="https://blog.csdn.net/xiachengliangkk/article/details/40989411" target="topframe" >博客</a></p> <!-- target="topframe"表示在在目標iframe框架為topframe中顯示--> </body> </html>
實例二：frameset 分割
分析：
1.我們先要上下分割
2.分割完下面之后，我么再分割下面的左右
3.上面的框架里面需要嵌張圖片，
4.下面的左邊需要有三個超鏈接，右邊有默認的內容
代碼如下：
1.下面左邊的三個超鏈接：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>導航欄</title> </head> <body> <h1><a href="http://localhost:63342/HTML/webapp/views/%E5%AF%BC%E8%88%AA%E6%9C%8D%E5%8A%A1.html?_ijt=lmc1ccp8pvgvoe5h4a2bvv01mk" target="rightframe">學習標簽</a> </h1> <h1><a href="http://localhost:63342/HTML/webapp/views/%E8%87%AA%E5%8A%A8%E5%8C%96%E6%A8%A1%E5%9D%97%E5%AD%A6%E4%B9%A0%E5%AF%BC%E8%88%AA.html?_ijt=lmc1ccp8pvgvoe5h4a2bvv01mk" target="rightframe">自動化</a> </h1> <h1><a href="http://localhost:63342/HTML/webapp/views/%E6%80%9D%E6%83%B3%E5%AF%BC%E8%88%AA.html?_ijt=lmc1ccp8pvgvoe5h4a2bvv01mk" target="rightframe">思考方式</a> </h1><!--在前面的框架頁中我們給框架起的名字之快我們的target就指定在某個框架中打開--> </body> </html>
2.默然顯示頁
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>主頁</title> </head> <body> <h1>主頁內容</h1> <p>這個是dgg.js文件，用於處理數據，認真的同學會發現這個文件會創建dgg和_father兩個全局函數。沒錯所有頁面都會有這兩個全局函數，dgg是包含了所有公用的數據和元素處理函數，_father是包含了最頂層框架的函數,為什么要這樣做呢? 1:dgg中繼承zoeDylan.js是為了統一函數，應該公司需要嘛，我就這樣做了， 2:_father是為了調用頂級頁面的一些事件,比如說全屏彈窗、狀態顯示、消息推送等。 這里主要說一說dgg.element這個函數，因為頁面的數據完成基本上都是這個函數在處理。 dgg.element是一個創建頁面組件的處理程序，你傳入一個json格式數據，然后會根據你指定的組件名稱創建一個組件，然后返回一個jq函數的組件。 </p> </body> </html>
3.其余的都在一個HTML中寫着;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="content-type" content="text/html;charset=gb2312"><!--固定寫發，指定網頁是是用什么格式來解析的--> <meta name="authoe" content="李強" /><!--authoe:表示作者，叫李強--> <title>第一個網頁文件</title> <meta name="Description" content="李強的第一個站點"/><!--網頁描述--> <meta name="website" content="wwww.baidu.com"/><!--設置網址--> <meta name="keywords" content="wbb前端頁面"/><!--瀏覽器搜索的關鍵字--> </head> <frameset rows="30%,*" ><!--上下分割比例為3/7--> <frame src="頂部圖片.html" name="topfrome" />,<!-- 圖片顯示在上面的30%里面--> <frameset cols="10%,*"><!--下面的進行左右分割分割比例為1/9--> <frame name="leftframe" src="三個超鏈接.html" noresize="noresize"><!--加noresize框架就不可上下拖動--><!-- 左邊的超鏈接--> <frame name="rightframe"src="默然認顯示頁.html" noresize="noresize"><!--給每個frame起一個名字是為了讓左邊的超鏈接在這個地方顯示--> </frameset> <noframes> <body> <p>此瀏覽器不支持框架</p> </body> </noframes> </frameset> </html>
實例三：table表格
分析：
1.有一個表的標題“我喜歡的歌曲”
2.表頭“歌名”“作者”
3.表的身體部分
4.右下角倒數第二和倒數第四個單元格合並
5.表角
代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <table width="50%" height="200px" border="1" bgcolor="33ff55" cellspacing="0" cellpadding="0"><!-- 表示最外層的那個大的邊框，cellpadding內邊框距離，cellspacing 屬性規定單元之間的空間--> <caption>我喜歡的歌曲</caption><!--表頭標題--> <thead><!--表頭--> <tr><!--表示一個單元格--> <th><!--在這中間的內容都給加粗並且居中，常用作表頭--> 歌名 </th> <th> 作者 </th> </tr> </thead> <tbody><!--表的身子<tbody> 元素應該與 <thead> and <tfoot> 元素結合起來使用，用來規定表格的各個部分（主體、表頭、頁腳）。--> <tr> <td>光輝歲月</td><!--<td> 標簽定義 HTML 表格中的標准單元格。--> <td>buyond</td> </tr> <tr> <td>紅豆</td> <td>王芬</td> </tr> <tr> <td>我只在乎你</td> <td>鄧麗君</td> </tr> <tr> <td>前女幽魂</td> <td rowspan="2">張國榮</td> </tr> <tr> <td>有誰共鳴</td> </tr> </tbody> <tfoot> <tr><td colspan="2" align="right" >現總計5首歌曲</td></tr><!--colspan 屬性定義單元格應該橫跨的列數。align 屬性規定單元格中內容的水平對齊方式。--> </tfoot><!--<tfoot> 標簽用於組合 HTML 表格的頁腳內容。--> </table> </body> </html>
實例四：embed 與object
<!DOCTYPE html> <html lang="en" xmlns="" xmlns=""> <head> <meta charset="UTF-8"> <title>音頻視頻</title> </head> <embed> <embed src="會員功能內部講解_孫智鵬_2018_5_7.m4a" width="400" height="200" autostart="true" loop="true"><!--autostart:自動播放，loop：循環--> </embed> <embed src="____-夕-俐Ξ-+⑦+諏嗣__岳肖-認.swf" width="1000" height="800" loop="true" quality="high" PLUGINSPAGE="http://xiazai.zol.com.cn/detail/15/149406.shtml"><!--播放flash，quality播放質量為高，PLUGINSPAGE假設沒有播放插件從這個網址上自送下載--> </embed> <!--<object classid="每一個播放插件都會有一個這樣的classid" width="300" height="300" codebase="如果沒有播放控件則從這個網址上下載"> <param name="movie" value="會員功能內部講解_孫智鵬_2018_5_7.mp4"><!--name:播放什么格式，value：播放內容--> <!--<param name="play" value="true"><!–play自動播放，true是的–>--> <!--<param name="loop" value="true"><!–loop循環播放，true是–>--> <!--<param name="quality" value="high"><!–quality播放質量，high高–>--> <!--</object>--> <object data="會員功能內部講解_孫智鵬_2018_5_7.m4a"><!--使用object播放音頻--> <param name="src" value="會員功能內部講解_孫智鵬_2018_5_7.m4a"> <param name="autoplay" value="true"><!--autoplay：自動播放--> </object> </body> </html>