整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          HTML的frame框架使用完整總結(web初學必看

          HTML的frame框架使用完整總結(web初學必看)

          一、前言

          《大數據和人工智能交流》頭條號向廣大初學者新增C 、Java 、Python 、Scala、javascript 等目前流行的計算機、大數據編程語言,希望大家以后關注本頭條號更多的內容。

          由于很多web人員需要HTML的frameset和frame來構建窗體和子窗體頁面,但是初學者苦于沒有直接的資料總結,故給廣大初學者完整的HTML的frame框架使用總結


          二、HTML的frame框架使用

          1、主頁面index.htm


          <frameset rows="10%,*" border="5" bordercolor="blue">

          <frame src="page/top.htm"/>

          <frameset cols="10%,*" border="5" bordercolor="blue">

          <frame src="page/left.htm"/>

          <frame src="page/right.htm" name="rightFrame"/>

          <frameset/>

          </frameset>

          2、page文件夾的子頁面

          (1)left.htm

          <a href="add.htm" target="rightFrame">新增數據</a> <br><br><br>

          <a href="update.htm" target="rightFrame">修改數據</a> <br><br><br>

          <a href="query.htm" target="rightFrame">查詢數據</a> <br><br><br>

          <a href="delete.htm" target="rightFrame">刪除數據</a> <br><br><br>

          (2)right.htm

          <center>這是數據區域</center>

          (3)top.htm

          <center>這是頂部頁面</center>

          (4)add.htm

          <center>這是新增數據頁面</center>

          (5)delete.htm

          <center>這是刪除數據頁面</center>

          (6)query.htm

          <center>這是查詢頁面</center>

          (7)update.htm

          <center>這是修改數據頁面</center>



          《大數據和人工智能交流》的宗旨

          1、將大數據和人工智能的專業數學:概率數理統計、線性代數、決策論、優化論、博弈論等數學模型變得通俗易懂。

          2、將大數據和人工智能的專業涉及到的數據結構和算法:分類、聚類 、回歸算法、概率等算法變得通俗易懂。

          3、最新的高科技動態:數據采集方面的智能傳感器技術;醫療大數據智能決策分析;物聯網智慧城市等等。

          根據初學者需要會有C語言、Java語言、Python語言、Scala函數式等目前主流計算機語言。

          根據讀者的需要有和人工智能相關的計算機科學與技術、電子技術、芯片技術等基礎學科通俗易懂的文章。

          lt;frameset></framset>框架組標記

          <frame></frame>框架標記

          語法格式:

          <frameset>

          <frame></frame>

          <frame></frame>

          </franeset>

          <frameset></frameset>元素(雙標簽)

          語法格式:

          <frameset cols="" rows="" frameborder="" border="" framespacing="">

          .......

          </frameset>

          屬性:

          cols 垂直切割窗口(如左右分割兩個窗口)接受整數值,百分數,*(*代表占用余下空間)數值的個數代表分成的部分數目,要以逗號分隔。例:cols="30,*,50%"可以 切成三個視窗,第一部分是30像素(pixels)為絕對分割,第二部分是當分配完第一和第三視圖后剩下的空間,第三部分則占整個窗口的50%寬度,為相對分割。

          rows 就是橫向切割,將窗口上下分開,數值設置同上。

          以上兩屬性盡量不要在同一個<frameset>標記中,因為netscape不支持,盡量采用多重分割。

          frameborder 設置框架的邊框,其值有0不要邊框,1要邊框。

          border 設置框架邊框厚度

          framespacing 表示框架與框架間保留空白的距離

          frame 元素(單標簽)

          語法格式:

          <frame name="" src="url" scrolling="yes/no" noresize>

          屬性:

          name 框架名稱,指定框架來做連接的目標窗口。

          src 框架中要顯示的網頁文當url地址,每個個框架要對應一個html文擋。

          scrolling 是否顯示滾動條,yes/no,auto是自動。

          noresize 設置不讓使用者改變這個框架的大小,

          noframe元素

          指定當使用了框架的頁面在不支持框架的瀏覽器中打開時顯示的信息

          語法格式:

          <noframe>

          ......

          </noframe>

          框架技術可以實現對靜態頁面的互相引用,提高靜態頁面的重用性,因為并不是所有的瀏覽器都能很好的支持,而且對搜索引擎可能也不是很友好,所以一般網頁使用并不多,但是對一些管理系統而言,框架還是很實用的,因為管理系統的布局比較簡單。每一個頁面的效果都差不多,一般使用下面這種布局。

          這個布局頭部,菜單和尾部的內容都是不會變化的,經常變化的就是中間的操作頁面,所有可以把頭部,菜單和尾部以及主頁分別使用四個頁面設計,然后在定義一個框架頁面進行引入即可。

          1、frame頁面

          top.html

          <!doctype html>
          <html>

          <head>
          <meta charset="UTF-8">
          <title>Untitled Document</title>
          </head>

          <body bgcolor="#46D0DA">
          </body>
          </html>

          leftmenu.html

          <!doctype html>
          <html>
          <head>
          <meta charset="UTF-8">
          <title>Untitled Document</title>
          </head>

          <body bgcolor="#1D7A17">
          <ul>
          <li><a href="main.html" target="main">主頁</a></li>
          <li><a href="register.html" target="main">注冊</a></li>
          </ul>
          </body>
          </html>

          footer.html

          <!doctype html>
          <html>
          <head>
          <meta charset="UTF-8">
          <title>Untitled Document</title>
          </head>

          <body bgcolor="#940407">
          </body>
          </html>

          main.html

          <!doctype html>
          <html>
          <head>
          <meta charset="UTF-8">
          <title>Untitled Document</title>
          </head>

          <body bgcolor="#1461C8">
          </body>
          </html>


          2、總頁面frame.html

          <!doctype html>
          <html>
          <head>
          <meta charset="UTF-8">
          <title>frame</title>
          <base href="<%=basePath%>">
          </head>
          <frameset rows="20%,65%,*" border="1">
          <frame src="top.html">
          <frameset cols="25%,*">
          <frame src="leftmenu.html">
          <frame src="main.html" >
          </frameset>
          <frame src="footer.html">
          </frameset><noframes></noframes>
          <body>
          </body>
          </html>

          效果如下:

          3、在main中加載新頁面

          運行上面代碼發現超鏈接是在新的窗口中打開了,如果需要在主框架中顯示,要先給這個主框架定義name的屬性,然后在修改leftmenu.html的超鏈接的target屬性值,寫上主框架的name的值,下面更改frame.html中的frameset代碼如下:

          <frameset rows="20%,65%,*" border="1">
          <frame src="top.html">
          <frameset cols="25%,*">
          <frame src="leftmenu.html">
          <frame src="main.html" name="main">
          </frameset>
          <frame src="footer.html">
          </frameset>
          <body>

          補充register.html代碼如下:

          <!doctype html>
          <html>
          <head>
          <meta charset="UTF-8">
          <title>Untitled Document</title>
          </head>

          <body>
          <h1>注冊頁面</h1>
          </body>
          </html>

          然后在frame.html中點擊注冊效果如下:


          主站蜘蛛池模板: 国产免费播放一区二区| 福利一区福利二区| 亚洲一区二区三区夜色| 国产精品久久久久一区二区| 无码av中文一区二区三区桃花岛| 精品永久久福利一区二区| 国产精品99无码一区二区| 国产另类ts人妖一区二区三区| 精品在线视频一区| 一区精品麻豆入口| 精品一区二区三区色花堂| 日本一区二区三区在线看| 东京热无码一区二区三区av| 一本色道久久综合一区| 国产一区二区三区在线影院| 亚洲美女视频一区| 国产精品第一区第27页| 精品国产一区二区三区不卡| 美女免费视频一区二区三区| 无码乱人伦一区二区亚洲一| 免费看无码自慰一区二区| 香蕉视频一区二区| 亚洲国产AV一区二区三区四区| 一区二区三区在线视频播放| 亚洲国产一区在线观看| 国产av福利一区二区三巨| 国产成人亚洲综合一区| 不卡一区二区在线| 国产亚洲综合一区二区三区| 无码乱人伦一区二区亚洲一| 精品一区精品二区| 在线精品一区二区三区| 美女啪啪一区二区三区| 日本精品一区二区三区在线视频 | 精品成人av一区二区三区| 精品三级AV无码一区| 丰满人妻一区二区三区免费视频| 亚洲熟妇无码一区二区三区导航| 自慰无码一区二区三区| 无码日韩人妻AV一区免费l| 国产香蕉一区二区精品视频|