整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
過使用框架，你可以在同一個瀏覽器窗口中顯示不止一個頁面。
iframe語法:
<iframe src="URL"></iframe>
該URL指向不同的網頁。
Iframe - 設置高度與寬度
height 和 width 屬性用來定義iframe標簽的高度與寬度。
屬性默認以像素為單位, 但是你可以指定其按比例顯示 (如："80%").
實例
<iframesrc="demo_iframe.htm"width="200"height="200"></iframe>
Iframe - 移除邊框
frameborder 屬性用于定義iframe表示是否顯示邊框。
設置屬性值為 "0" 移除iframe的邊框:
實例
<iframesrc="demo_iframe.htm"frameborder="0"></iframe>
使用iframe來顯示目錄鏈接頁面
iframe可以顯示一個目標鏈接的頁面
目標鏈接的屬性必須使用iframe的屬性，如下實例:
實例
<iframesrc="demo_iframe.htm"name="iframe_a"></iframe><p><a>RUNOOB.COM</a></p>
HTML iframe 標簽
| 標簽 | 說明 |
|---|---|
| <iframe> | 定義一個內聯的iframe |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
oger 打開了手機上新聞類的 app，想尋找一些有趣的東西來看。他翻過關于如何更有創意的文章，翻過關于如何成為一個成功企業家的文章，翻過如何使文筆更好的文章。
當他正準備打開 Twitter 的時候，一個標題映入了他的眼簾：
丟掉 Angular, 忘掉 React，接下來是 Tupress---JavaScript 的終極框架。
“嗯，也許是時候學習一個框架了?！盧oger 這樣想著。這幾個月以來，他一直在研究 JavaScript。為什么不看看這篇聲明所有框架都是大驚小怪的文章都寫了些什么？在瀏覽過這篇文章—文章中包括“直觀”，“靈活”和“萬能”之類的詞語—之后，Roger 覺得值得一試。
他打開了他的 MacBook, 在 Google 中搜索“Tupress 教程”，并打開了最上面的搜索結果。該教程自稱會教他如何構建一個雙用戶界面 app。完成后，該 app 可以將一個（2，2，2，2，2，2）的英語列表轉換成法語列表（le 2, le 2, le 2, le 2, le 2, le 2）。
教程的第一步是安裝 Tupress。然后，呃，Roger 還必須安裝 Bisup—一個輕量級的包裝器，雖然不知道它有什么作用。再然后，他必須安裝 Claster，它提供了一層輕量的使用方法和中間件。雖然 Roger 也不知道這個有什么意義，但是還是安裝了它。
最后，他還得安裝 Pirend，這是一個實時的約定接口規范微服務層，用于使用 JSON 實現增刪改查和 Ajax 請求。這個一定很重要，Roger 想，否則就不會有這些縮略詞了。
現在所有的東西都安裝好了，Roger 很開心的想要開始編寫代碼。但是根據教程，他還得完成幾步操作。首先，他必須得安裝 Git，配置一個基于云的數據庫，構建一個約定接口規范的服務器，實現 API 端點，更新依賴關系，并建立一個基于組件的項目結構。
Roger 承認，這聽起來非常復雜，但是他已經安裝了太多東西，現在不能半途而廢。
接下來的兩周內，Roger 搜索了 179 次 Google，終于弄懂了如何完成所有的設置。他打開了一個終端窗口，輸入“tupr start”，然后打開 Chrome 瀏覽器并導航到 localhost:3000。根據教程，他應該會看到“Tupress Works!”這句話。
但是，糟糕的是，Tupress 根本就沒有啟動。Roger 什么都沒有看到，根本什么都沒有！
“唉”，Roger 嘆了一口氣。為了弄清楚到底出了什么問題，Roger 在 Chrome 瀏覽器中打開了開發者工具里面的控制臺?！把健?，Roger 很驚訝，控制臺里面一路飄紅，比權利的游戲里滿屏的血腥還要紅。
“我只是想寫一些代碼來制作一個簡單的 app”，Roger 覺得很沮喪，怎么會這么困難呢？
不過，他并沒有放棄。他將控制臺里的每一個錯誤都剪切并復制到 Google 中。在 Stack Overflow 上他發現，這個為期一個月的教程使用了 Tupress 的 1.3.2 版，Bistup 的 1.2.1 版，Claster 的 3.7.2 版和 Pirend 的 4.2.1 版。
而 Roger 已經安裝了這些軟件的最新版本，而這些最新版本并不適用于這個框架。同時，Tupress 5 剛剛出來，完全不同于 Tupress 1（中間沒有 Tupress 2，3 或者 4 版本）。
從另一個編程論壇上，Roger 了解到，Bistup 由于不夠輕量已經不再受大部分開發者的青睞。而 Claster，顯然也并沒有承諾的那樣美好。所以瑞士的一位開發者創造了一個更好的替代品—Focrux.js。
在多次卸載又重裝所有的軟件，閱讀了 Stack Overflow 上面所有的內容，看了 YouTube 上面關于 JavaScript 框架的所有視頻，并且閱讀了“關于 Tupress 的所有 13 個您不知道的內容”……七周后，Roger 的 Chrome 瀏覽器的控制臺終于不再飄紅。
“噢耶”，Roger 忍不住歡呼。
他打開一個終端窗口，輸入“tupr start”，并且開啟了 localhost:3000，最后，他終于看到了：
原文地址：
https://medium.freecodecamp.org/every-javascript-framework-tutorial-written-more-than-5-minutes-ago-f96642d4f05
本文轉載自InfoQ垂直公眾號前端之巔，ID：frontshow，推薦關注！
2017 年軟件研發領域有很多新的變化，新一年的技術新趨勢 QCon 全球軟件開發大會也與你一同關注。目前，我們已經確認多位技術專家：Netflix 工程總監 Katharina Probst、Kotlin 團隊工程師 Roman Elizarov、Apache Spark Structured Streaming 的核心開發人員朱詩雄、愛奇藝科學家李典等老師將在現場分享前沿技術案例，共呈技術盛宴。2018 北京站現在報名享 7 折優惠，立減 2040 元。有任何問題可咨詢購票經理 Hanna，電話：15110019061，微信：qcon-0410。
如果您看過《HTML是什么？——零基礎自學網頁制作》這篇教程，請按照其中說明創建一個txt文件。具體過程如下：
step1：在您方便的磁盤中建立一個文件夾，命名為"零基礎自學網頁制作"。例如我在D盤中建立了"零基礎自學網頁制作"文件夾。
step2：在文件夾中創建"HTML框架.txt"文件。鼠標移動到空白處點擊右鍵選擇"文本文檔"。
命名為"html框架"，如下圖所示。
如果您的電腦沒有顯示".txt"后綴的話，請做如下操作：點擊"工具"，找到"文件夾選項"
菜單如下：點擊"查看選項"。
下拉滑條，找到"隱藏已知文件類型的擴展名"選項，將前面的對勾去掉。
如果您使用的是win10的話請參考《邊學邊做網頁篇------初識HTML》，這也是我做的教程，不過以后都使用這個賬號來發了。
step3：把"HTML框架"復制粘貼到"html框架.txt"文件中。HTML框架代碼如下：
<!DOCTYPE HTML> <html> <head> </head><body> </body> </html>代碼講解請參照《HTML是什么？——零基礎自學網頁制作》這篇教程中的講解。
粘貼后效果如下：使用CTRL+s組合鍵保存文件。
step4：復制"html框架.txt"文件，更名為"第一個網頁.txt"。原始的"html框架.txt"文件為以后備用。
如圖所示：
step5：把"第一個網頁.txt"的后綴名".txt"改為".html"。
首先將光標放在"第一個網頁.txt"文件上，點擊右鍵，選擇"重命名"。如圖：
選擇".txt"
更改為".html",敲擊回車鍵。這時會彈出一個對話框，如圖:
大膽的點擊"是"即可。
修改后文件是這樣的，如圖：因為我的默認瀏覽器是360，所以，".html"文件圖標顯示為360瀏覽器的圖標，顯示其他瀏覽器的圖標也沒有問題。
step6：將鼠標移動到"第一個網頁.html"文件上，單擊右鍵，選擇打開方式，如圖：
選擇任何一個瀏覽器打開即可，我使用的是火狐瀏覽器（Firefox），打開后如圖所示：空白一片。
點擊鍵盤F12鍵，看一下控制臺，如圖：查看器中已經顯示我們的代碼框架了。成功！
如果網頁是一道菜，那么，html框架我們可以理解為裝菜的白盤子，所以我們打開框架時，瀏覽器顯示一片白。下面我們為盤子中加些簡單的"菜"。
首先我們為頁面添加"標題"
在添加標題前，我們來看一下html框架代碼中的內容，在<html></html>標簽中有<head></head>和<body></body>兩個兄弟標簽。
我們在頁面中看到的所有的內容都是添加到<body></body>標簽中間！
<head></head>標簽中的內容并不會顯示在頁面中。
那么如何添加"標題"呢？
標題在HTML中用<h></h>標簽表示。在<h></h>中間加入文字內容即可。如下所示：
<h>第一個頁面</h>右鍵，使用"記事本"打開"第一個網頁.html"文件。如圖所示：如果您的"打開方式"中沒有"記事本"請點擊"選擇默認程序"
在"其他程序"中找到"記事本"。點擊"確定"。從此，"記事本"就一直存在于"打開方式"中了。
我們把這句代碼粘貼到<body></body>之間。如下所示：保存后使用瀏覽器打開。
<!DOCTYPE HTML><html><head> </head> <body> <h>第一個頁面</h> </body> </html>然后，使用瀏覽器打開，如圖所示：標題出現在頁面中了。
下面，我們來添加段落內容。
段落在HTML中使用<p></p>標簽添加。代碼如下
<p>千里之行始于足下</p>請各位自行將代碼添加到"第一個網頁.html"文件中吧！示例代碼如下：
<!DOCTYPE HTML> <html> <head> </head> <body> <h>第一個網頁</h><p>千里之行始于足下</p> </body> </html>結果如圖所示：
通過這個練習，我們可以發現一個規律，在<body></body>中，子元素代碼的上下順序代表了它在頁面中顯示的排版順序。
這也簡單回答了代碼結構與排版的關系，html的標簽語句只是標記了它所承載的信息的屬性和版面位置。
基于這個特性，html被稱為超文本標記語言。
下一期我們具體討論頁面中文字編輯的技巧。
喜歡的小伙伴請加關注，有任何問題請給我留言，歡迎大家給與指正！感激不盡！
HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作
HTML是什么？——零基礎自學網頁制作
HTML頁面中head標簽有啥用？——零基礎自學網頁制作
初識meta標簽與SEO——零基礎自學網頁制作
HTML中的元素使用方法1——零基礎自學網頁制作
HTML中的元素使用方法2——零基礎自學網頁制作
HTML元素中的屬性1——零基礎自學網頁制作
HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作
使用HTML添加表格1（基本元素）——零基礎自學網頁制作
使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作
使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作
使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作
16進制顏色表示與RGB色彩模型——零基礎自學網頁制作
HTML中的塊級元素與內聯元素——零基礎自學網頁制作
初識HTML中的<div>塊元素——零基礎自學網頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作
封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作
HTML表單元素初識1——零基礎自學網頁制作
HTML表單元素初識2——零基礎自學網頁制作
HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作
HTML表單4（form的action、method屬性）——零基礎自學網頁制作
HTML列表制作講解——零基礎自學網頁制作
為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作
HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
