整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
天我教大家怎么零基礎(chǔ)編寫html框架
首先建立一個index.html文件，index（為首頁的意思）
請大家先看看效果圖
網(wǎng)站可分為三個部分
head頭
<head></head>
body體
<body><body>
foot腳
<footer></footer>
在剛剛建好的index.html里面寫上html標(biāo)準(zhǔn)代碼
<!--這為文本類型也是html開始代碼-->
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
其次給html寫上編碼讓瀏覽器知道他是什么編碼，不然會出現(xiàn)亂碼
<!DOCTYPE html>
<html>
<head>
<!--網(wǎng)站編碼為utf-8-->
<meta charset="utf-8">
<!--此為網(wǎng)站標(biāo)題-->
<title></title>
</head>
<body>
</body>
</html>
在給網(wǎng)站起個標(biāo)題
<!DOCTYPE html>
<html>
<head>
<!--網(wǎng)站編碼為utf-8-->
<meta charset="utf-8">
<!--此為網(wǎng)站標(biāo)題-->
<title>html框架</title>
</head>
<body>
</body>
</html>
現(xiàn)在我們開始寫body體
先建立三個div塊
我們給這三個塊下個名稱
在給這三個div塊寫上css樣式，css樣式有三種我們先講內(nèi)聯(lián)，下節(jié)課再講外聯(lián)
再給css樣式寫上內(nèi)容
/*width:為寬度;height :為高;background:為網(wǎng)站背景;（也可以用color表示）css樣式要以;結(jié)尾*/
現(xiàn)在我們來看看效果
div塊靠左，不美觀怎么辦？
沒關(guān)系我們寫上css讓它居中更美觀
/*margin:上邊距 右邊距 下邊距 左邊距;margin:0 auto; 0就是塊離瀏覽器上邊框的距離為0個像素點，auto為塊自動居中*/
/*也可以用margin-left：左邊距;margin-right: 右邊距;margin-top: 上邊距;margin-bottom: 下邊距;*/
再讓我們看看效果吧
是不是居中了
只是這樣還不像網(wǎng)站怎辦別急我們再給它寫上幻燈片的框架和做導(dǎo)航和右內(nèi)容框架
我們在建三個塊分別命名為lmage（圖片的意思）left（左）right（右）
我們在給這三個塊寫上css樣式
讓我們看看效果吧
讓我們再給右內(nèi)容區(qū)寫的東西吧
我們再寫上四個塊
我們給這四個塊寫上css樣式
.kuai1{
width: 50%;
height:50%;
background: #bcdbcd;
}
.kuai2{
width: 50%;
height:50%;
float: left;
background: #cdfcdf;
}
.kuai3{
width: 50%;
height:50%;
background: #defdef;
}
.kuai4{
width: 50%;
height:50%;
background: #efbefb;
}
這是我們會發(fā)現(xiàn)板塊亂了怎么辦，別擔(dān)心現(xiàn)在教給你新知識那就是浮動代碼
/*float:為浮動代碼;（意為漂浮起來）*/
/*float:left;(向左浮動)float:right;(向右浮動)*/
讓我們看看效果如何把
是不是很漂亮呢
好了現(xiàn)在我們就回顧一下這節(jié)課的知識點吧
<!--網(wǎng)站編碼為utf-8-->
<meta charset="utf-8">
<!--這為網(wǎng)站標(biāo)題-->
<title>html框架</title>
/*width:為寬度;height :為高;background:為網(wǎng)站背景;（也可以用color表示）css樣式要以;結(jié)尾*/
/*margin:上邊距 右邊距 下邊距 左邊距;margin:0 auto; 0就是塊離瀏覽器上邊框的距離為0個像素點，auto為塊自動居中*/
/*也可以用margin-left：左邊距;margin-right: 右邊距;margin-top: 上邊距;margin-bottom: 下邊距;*/
/*float:為浮動代碼;（意為漂浮起來）*/
/*float:left;(向左浮動)float:right;(向右浮動)*/
<!--這為div（塊）-->
<div class="header"></div>
<div class="body">
<div class="lmage"></div>
<div class="left"></div>
<div class="right">
<div class="kuai1"></div>
<div class="kuai2"></div>
<div class="kuai3"></div>
<div class="kuai4"></div>
</div>
</div>
<div class="footer"></div>
<!--class為塊名稱也可以用//id//,//name//為名稱-->
過使用框架，你可以在同一個瀏覽器窗口中顯示不止一個頁面。
iframe語法:
<iframe src="URL"></iframe>
該URL指向不同的網(wǎng)頁。
Iframe - 設(shè)置高度與寬度
height 和 width 屬性用來定義iframe標(biāo)簽的高度與寬度。
屬性默認以像素為單位, 但是你可以指定其按比例顯示 (如："80%").
實例
<iframesrc="demo_iframe.htm"width="200"height="200"></iframe>
Iframe - 移除邊框
frameborder 屬性用于定義iframe表示是否顯示邊框。
設(shè)置屬性值為 "0" 移除iframe的邊框:
實例
<iframesrc="demo_iframe.htm"frameborder="0"></iframe>
使用iframe來顯示目錄鏈接頁面
iframe可以顯示一個目標(biāo)鏈接的頁面
目標(biāo)鏈接的屬性必須使用iframe的屬性，如下實例:
實例
<iframesrc="demo_iframe.htm"name="iframe_a"></iframe><p><a>RUNOOB.COM</a></p>
HTML iframe 標(biāo)簽
| 標(biāo)簽 | 說明 |
|---|---|
| <iframe> | 定義一個內(nèi)聯(lián)的iframe |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
TML5從入門到精通，兄弟連京修隨堂筆記（一）HTML的框架結(jié)構(gòu)，每日都有新內(nèi)容，訂閱走一波
一個瀏覽器窗體可以通過幾個頁面的組合來顯示。我們可以使用框架來完成(frames)這項工作。(框架可以把HTML文檔分為多個頁面)。也就是將一個瀏覽器文檔窗口分隔成多個窗口，每個窗口都可以顯示一個獨立的網(wǎng)頁文件。
框架頁使用了表格的方式組合，可以分為數(shù)行與數(shù)列。
框架的優(yōu)點
重載頁面時不需要重載整個頁面，只需要重載頁面中的一個框架頁(減少了數(shù)據(jù)的傳輸，增加了網(wǎng)頁下載速度)。
方便制作導(dǎo)航欄。
框架的缺點
會產(chǎn)生很多頁面，不容易管理。
不容易打印。
瀏覽器的后退按鈕無效。
代碼復(fù)雜,無法被一些搜索引擎索引到。
多數(shù)小型的移動設(shè)備（PDA 手機）無法完全顯示框架。
多框架的頁面會增加服務(wù)器的http請求。
由于上面諸多缺點，因此不符合標(biāo)準(zhǔn)網(wǎng)頁設(shè)計的理念.已被標(biāo)準(zhǔn)網(wǎng)頁設(shè)計拋棄
HTML框架標(biāo)簽
<frameset>標(biāo)簽 -- 代替body標(biāo)簽定義了框架頁,并且定義了框架將分為多少行與多少列。常用屬性如下:
cols -- 定義了框架含有多少列與列的大小(每個值使用逗號分隔),取值為象素px或者百分比%
rows -- 定義了框架含有多少行與行的大小(每個值使用逗號分隔),取值為象素px或者百分比%
border -- 定義frame定義的框架頁的邊框(單位像素),使用css實現(xiàn)
frameborder -- 定義框架頁是否邊框(此屬性應(yīng)寫在frame標(biāo)簽內(nèi)部,不應(yīng)在此出現(xiàn))
framespacing -- 定義框架頁之間間隔的距離,使用css實現(xiàn)
<noframes>標(biāo)簽
可為那些不支持框架的瀏覽器顯示文本，和<body>組合使用
<iframe>標(biāo)簽
創(chuàng)建一個包含另外一個文檔的內(nèi)聯(lián)框架，iframe標(biāo)簽內(nèi)的內(nèi)容可以做為瀏覽器不支持iframe標(biāo)簽時顯示 。
frame標(biāo)簽 -- 定義frameset標(biāo)簽中每個框架頁的內(nèi)容
frame標(biāo)簽是單獨出現(xiàn)的，<frame />
常用屬性:
frameborder -- 定義了內(nèi)容頁的邊框,取值為(1|0),缺省值為1
1 -- 在每個頁面之間都顯示邊框
0 -- 不顯示邊框
name -- 在一個框架頁鏈接到另一框架頁時使用(另一個框架頁可以使用target定義鏈接頁)
noresize -- 定義了瀏覽者是否可以通過拖拽改變框架頁尺寸,取值為(noresize)
scrolling -- 定義是否有滾動條,取值為(yes|no|auto),缺省值為auto
yes -- 顯示滾動條
no -- 不顯示滾動條
auto -- 當(dāng)需要時再顯示滾動條
src -- 定義了內(nèi)容頁URL
border – 設(shè)置邊框粗細
HTML框架示例
<html> <!-- 網(wǎng)頁開始標(biāo)記 -->
<head>
<title>使用框架定義后臺管理平臺模型</title>
</head> <!-- 設(shè)置網(wǎng)頁標(biāo)題 -->
<frameset rows="80,*" frameborder="1" border="5"> <!-- 劃分兩行 -->
<frame src="top.html" name="top" scrolling="no" noresize/> <!-- 頂部大類窗體 -->
<frameset cols="200, *"> <!-- 劃分左右兩列 -->
<frame src="menu.html" name="menu" scrolling="no" noresize/>
<!-- 左邊菜單窗體 -->
<frame src="main.html" name="main" noresize />
<!-- 右邊內(nèi)容窗體 -->
</frameset> <!-- 內(nèi)層框架結(jié)束 -->
<noframes>
<body><p>您的瀏覽器不支持框架，請升級瀏覽器</p></body>
</noframes>
</frameset> <!-- 外層框架結(jié)束 -->
</html>
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
