TML5從入門到精通,兄弟連京修隨堂筆記(一)HTML的框架結構,每日都有新內容,訂閱走一波
一個瀏覽器窗體可以通過幾個頁面的組合來顯示。我們可以使用框架來完成(frames)這項工作。(框架可以把HTML文檔分為多個頁面)。也就是將一個瀏覽器文檔窗口分隔成多個窗口,每個窗口都可以顯示一個獨立的網頁文件。
框架頁使用了表格的方式組合,可以分為數行與數列。
框架的優點
重載頁面時不需要重載整個頁面,只需要重載頁面中的一個框架頁(減少了數據的傳輸,增加了網頁下載速度)。
方便制作導航欄。
框架的缺點
會產生很多頁面,不容易管理。
不容易打印。
瀏覽器的后退按鈕無效。
代碼復雜,無法被一些搜索引擎索引到。
多數小型的移動設備(PDA 手機)無法完全顯示框架。
多框架的頁面會增加服務器的http請求。
由于上面諸多缺點,因此不符合標準網頁設計的理念.已被標準網頁設計拋棄
HTML框架標簽
<frameset>標簽 -- 代替body標簽定義了框架頁,并且定義了框架將分為多少行與多少列。常用屬性如下:
cols -- 定義了框架含有多少列與列的大小(每個值使用逗號分隔),取值為象素px或者百分比%
rows -- 定義了框架含有多少行與行的大小(每個值使用逗號分隔),取值為象素px或者百分比%
border -- 定義frame定義的框架頁的邊框(單位像素),使用css實現
frameborder -- 定義框架頁是否邊框(此屬性應寫在frame標簽內部,不應在此出現)
framespacing -- 定義框架頁之間間隔的距離,使用css實現
<noframes>標簽
可為那些不支持框架的瀏覽器顯示文本,和<body>組合使用
<iframe>標簽
創建一個包含另外一個文檔的內聯框架,iframe標簽內的內容可以做為瀏覽器不支持iframe標簽時顯示 。
frame標簽 -- 定義frameset標簽中每個框架頁的內容
frame標簽是單獨出現的,<frame />
常用屬性:
frameborder -- 定義了內容頁的邊框,取值為(1|0),缺省值為1
1 -- 在每個頁面之間都顯示邊框
0 -- 不顯示邊框
name -- 在一個框架頁鏈接到另一框架頁時使用(另一個框架頁可以使用target定義鏈接頁)
noresize -- 定義了瀏覽者是否可以通過拖拽改變框架頁尺寸,取值為(noresize)
scrolling -- 定義是否有滾動條,取值為(yes|no|auto),缺省值為auto
yes -- 顯示滾動條
no -- 不顯示滾動條
auto -- 當需要時再顯示滾動條
src -- 定義了內容頁URL
border – 設置邊框粗細
HTML框架示例
<html> <!-- 網頁開始標記 -->
<head>
<title>使用框架定義后臺管理平臺模型</title>
</head> <!-- 設置網頁標題 -->
<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 />
<!-- 右邊內容窗體 -->
</frameset> <!-- 內層框架結束 -->
<noframes>
<body><p>您的瀏覽器不支持框架,請升級瀏覽器</p></body>
</noframes>
</frameset> <!-- 外層框架結束 -->
</html>
這之前,首先給大家說聲抱歉,因為一些私事,所以頭條號斷更了3天,再次給大家表達歉意。
html5
xhtml文檔是html文檔向html5過渡的一個版本,html5基本遵循xhtml規范文檔要求的。我們先看一下XHTML1.0。
先指定一下名字空間
實際用處不大,所有的文檔名字空間值都是一樣(http://www.w3.org/1999/xhtm)
再看一下:
xml聲明文檔類型
以上文檔結構感覺比較復雜,沒有html5文檔簡單,看下圖html5文檔結構:
html5文檔結構
再接下來大家可以看一看,比較詳盡的html5文檔結構:
html5文檔結構 (與下圖鏈接)
html5文檔結構 (與上圖鏈接,與下圖鏈接)
以上是完整的html5文檔結構
當然,最簡單的就是<!DOCTYPE HTML> 聲明一下,其他的都可以不要,也是html5文檔
最簡單一句話就夠了,大小寫也隨意,都可以
跟一般的html文檔相比,簡短得很多,下圖:
html5聲明和html聲明
以上內容就是html5文檔結構,大家可以熟悉看一看,在此再次表達歉意,也違背了這個標題,抱歉!
聯網的迅速發展,軟件行業成了更多年輕人的就業選擇。HTML5簡單易學門檻低,是Web時代前端開發超好用的工具。而HTML5開發人員的就業薪資也遠遠高于其他行業。
資料顯示,初級HTML5開發人員的平均薪資在8K-10K左右,擁有一定工作經驗的人薪資普遍達到15K-20K。如此廣闊的前景當然吸引了無數專業或非專業人士的加入。HTML5用途范圍廣,下面千鋒廣州小編就來給大家分享常見的HTML5框架。
?
1、Siimpler
Siimpler 是個簡單的 HTML 開發框架,他可以通過選擇你自己喜歡的部分,來幫助你迅速又簡單地創建 HTML5 開發結構。網絡設計者們也可以通過使用 Siimpler 框架類的文件和文件夾來無縫的開始一個 Web 項目。
2、Ionic
Ionic 是個神奇的框架和強大前端開源系統,使用先進的Web技術,比如CSS、HTML 和 JS 來創建令人驚嘆的手機應用。
3、Foundation
Foundation 是世界上精妙的前端響應框架,同時,它可以兼容所有的瀏覽器和網絡設備。Foundation 擁有移動友好型的用戶接口,設置了許多關鍵特性。
4、Enyo
Enyo是一個開源的 Jaa 框架,該框架能夠讓你創建頂級的 HTML5 應用程序,該應用程序能夠運行在各種各樣的電子設備上,比如說手機、臺式機、筆記本、電視以及Web應用。
5、LimeJS
針對于所有的新的桌面瀏覽器和觸屏設備,LimeJS 對于有用戶經驗的游戲開發者而言是教好的和較強大的開發框架。
6、Bootstrap
Bootstrap能讓所有開發者都能迅速上手、所有設備都可以適配、所有項目都適用。此外,bootstrap的官網也有很多教程提供。
7、juery UI
juery UI 主要分為交互、微件和效果庫3個部分,主打代碼開源,操作繼承了juery 的簡單特性,兼容各主流桌面瀏覽器。前端HTML5是當下很多企業都會用到的軟件開發,HTML5是移動互聯網前端的主流開發語言,目前還沒有任何一種前端開發技術能夠取代HTML5。因此,無論是PC端還是APP端的應用,前端樣式都離不開HTML5.
從手機與電腦上網的使用率來看,從事HTML5或者Web相關的開發工作,就業前景還是比較可觀的。而且,現在的網站開發都往移動設備上轉移,所以HTML5或者Web前端是眾望所歸。
這7個框架,你都會用嗎?
*請認真填寫需求信息,我們會在24小時內與您取得聯系。