HTML 框架

過使用框架，你可以在同一個瀏覽器窗口中顯示不止一個頁面。

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，我們一起飛！

者：俊欣

來源：關于數據分析與可視化

今天小編來為大家安利另外一個用于繪制可視化圖表的Python框架，名叫Dash，建立在Flask、Plotly.js以及React.js的基礎之上，在創建之出的目的是為了幫助前端知識匱乏的數據分析人員，以純Python編程的方式快速制作出交互特性強的數據可視化大屏，在經過多年的迭代發展，如今不僅僅可以用來開發在線數據可視化作品，即便是輕量級的數據儀表盤、BI應用甚至是博客或者是常規的網站都隨處可見Dash框架的影子，今天小編就先來介紹一下該框架的一些基礎知識，并且來制作一個簡單的數據可視化大屏。

Dash框架中的兩個基本概念

我們先來了解一下Dash框架中的兩個基本概念

Layout
Callbacks

Layout顧名思義就是用來設計可視化大屏的外觀和布局，添加一些例如下拉框、單選框、復選框、輸入框、文本框、滑動條等組件，其中Dash框架對HTML標簽也進行了進一步的封裝，使得我們直接可以通過Python代碼來生成和設計每一個網頁所需要的元素，例如

<div>
    <h1>Hello World!!</h1>
    <div>
        <p>Dash converts Python classes into HTML</p>
    </div>
</div>

我們轉化成Dash的Python結構就是

html.Div([
    html.H1('Hello Dash'),
    html.Div([
        html.P('Dash converts Python classes into HTML'),
    ])
])

Callbacks也就是回調函數，基本上是以裝飾器的形式來體現的，實現前后端異步通信的交互，例如我們在點擊按鈕或者下拉框之后出現的功能就是通過回調函數來實現的。

安裝和導入模塊

在導入模塊之前，我們先用pip命令來進行安裝，

! pip install dash   
! pip install dash-html-components
! pip install dash-core-components                           
! pip install plotly

然后我們導入這些剛剛安裝完的模塊，其中dash-html-components用來生成HTML標簽，dash-core-components模塊用來生成例如下拉框、輸入框等組件，這里我們還需要用到plotly模塊，因為我們需要用到的數據來自該模塊，里面是一眾互聯網公司過去一段時間中股價的走勢

import dash
import dash_html_components as html
import dash_core_components as dcc
import plotly.graph_objects as go
import plotly.express as px

讀取數據并且繪制折線圖

那么我們讀取數據并且用plotly來繪制折線圖，代碼如下

app = dash.Dash()   #實例化Dash
df = px.data.stocks() #讀取股票數據 

def stock_prices():
    # 繪制折線圖
    fig = go.Figure([go.Scatter(x=df['date'], y=df['AAPL'],
                                line=dict(color='firebrick', width=4), name='Apple')
                     ])
    fig.update_layout(title='股價隨著時間的變幻',
                      xaxis_title='日期',
                      yaxis_title='價格'
                      )
    return fig
    
app.layout = html.Div(id='parent', children=[
    html.H1(id='H1', children='Dash 案例一', style={'textAlign': 'center',
                                                 'marginTop': 40, 'marginBottom': 40}),
    dcc.Graph(id='line_plot', figure=stock_prices())
])

if __name__ == '__main__':
    app.run_server()

我們點擊運行之后會按照提示將url復制到瀏覽器當中便可以看到出來的結果了，如下所示

從代碼的邏輯上來看，我們通過Dash框架中的Div方法來進行頁面的布局，其中有參數id來指定網頁中的元素，以及style參數來進行樣式的設計，最后我們將會指出來的圖表放在dcc.Graph()函數當中。

添置一個下拉框

然后我們再添置一個下拉框，當我們點擊這個下拉框的時候，可是根據我們的選擇展示不同公司的股價，代碼如下

dcc.Dropdown(id='dropdown',
             options=[
                 {'label': '谷歌', 'value': 'GOOG'},
                 {'label': '蘋果', 'value': 'AAPL'},
                 {'label': '亞馬遜', 'value': 'AMZN'},
             ],
             value='GOOG'),

output

options參數中的label對應的是下拉框中的各個標簽，而value對應的是DataFrame當中的列名

df.head()

output

添加回調函數

最后我們將下拉框和繪制折線圖的函數給連接起來，我們點擊下拉框選中不同的選項的時候，折線圖也會相應的產生變化，

@app.callback(Output(component_id='bar_plot', component_property='figure'),
              [Input(component_id='dropdown', component_property='value')])
def graph_update(dropdown_value):
    print(dropdown_value)
    # Function for creating line chart showing Google stock prices over time
    fig = go.Figure([go.Scatter(x=df['date'], y=df['{}'.format(dropdown_value)],
                                line=dict(color='firebrick', width=4))
                     ])
    fig.update_layout(title='股價隨著時間的變幻',
                      xaxis_title='日期',
                      yaxis_title='價格'
                      )
    return fig

我們看到callback()方法中指定輸入和輸出的媒介，其中Input參數，里面的component_id對應的是下拉框的id也就是dropdown，而Output參數，當中的component_id對應的是折線圖的id也就是bar_plot，我們來看一下最后出來的結果如下

最后，全部的代碼如下所示

譯局是36氪旗下編譯團隊，關注科技、商業、職場、生活等領域，重點介紹國外的新技術、新觀點、新風向。

編者按：JavaScript在前端的地位不可撼動，相關職位的薪資待遇也在穩步提升。在這種繁榮的局面下，各種框架和工具層出不窮，一時間令初學的開發者眼花繚亂，不知該做何選擇。為此，從事軟件開發教學創業的Eric Elliott通過分析Google搜索趨勢、State of JS Survey、Stack Overflow等調查數據，以及NPM下載量、匯總的職位發布情況等，給出了有助于獲得一份JS編程工作的相關推薦，并且對未來十年的前沿技術進行了展望。原文發表在medium上，標題是：Top JavaScript Frameworks and Topics to Learn in 2020 and the New Decade

如果您想獲得一份出色的JavaScript工作，或者想跟上2020及今后10年的重要技術，那這篇文章你找對了。本文的目的不是要告訴你哪些技術棧和框架是“最好的”或者最受歡迎的技術，而是要介紹一下哪些技術棧和框架能為你在2020年及今后拿到一份好工作提供最佳機會。

我們會研究各種來源的數據：

按照主題跟蹤Google Search趨勢
State of JS Survey的數據
Stack Overflow Survey調查
Npm下載量
匯總的職位發布情況

這些指標都不完美，但就我們的目的而言，npm下載量和職位發布情況最為重要，當我們把這些指標匯總起來看的時候，就能清晰一致地描繪出JavaScript技術的版圖和趨勢。根據這些指標來選擇要學習什么框架是個好主意嗎？那要取決于你的目標是什么。

既然我們有一個明確的目標——為求職者尋找學習的投資回報率——那這項任務就比告訴每個人什么是最好的要容易多了。盡管沒有對所有目的而言都是最佳的東西，但客觀地定義什么能為你實現特定的具體目標提供最大的機會還是比較容易的。我們不妨看一些數據。

首先是JavaScript的學習

在你開始太過操心技術棧之前，還是請先學習好JavaScript以及怎么用它來編寫軟件吧。如果你還沒有辦法解釋什么是函數組合，什么是對象組合，什么模塊，請從此處開始（https://medium.com/javascript-scene/composing-software-the-book-f31c77fc3ddc）。一切軟件開發都是組合：我們把一個龐大而復雜的問題分解成可以用軟件的建構塊（函數、對象、模塊等）解決的小問題。然后再把這些解決方案組裝成我們的應用。我們的2020就先從充分了解JavaScript和軟件組合開始吧。

React統治了2019，很有可能還會統治2020

我喜歡npm下載量這個指標，因為它能夠很好地說明框架使用的活躍度*。業界常用的框架中下載量方面的得分會高得離譜，因為用戶是在本地機器上跑npm install的。

注：此處并不包括jQuery ，因為很多jQuery 項目都是不用npm的老項目，所以不管怎樣它都會被嚴重低估。把Svelte放進來是為了讓大家看看它在市場當中的相對地位如何，并解釋為什么它會缺席圖表的其他地方——因為還沒有足夠的數據可供Svelte做出有意義的展示。比方說，Google搜索趨勢里面還沒有這個主題。

招聘廣告匯總

此圖統計了目前提到了某個特定框架的職位空缺。*

按UI框架統計的崗位需求

跟去年相比，React的領先優勢擴大了，而Angular和jQuery都輸給了Vue 。這個餅圖顯示了每個框架的相對就業市場份額：

頂級框架在工作市場的份額

2019年，JavaScript開發人員的平均工資再次上漲，從11.1萬美元年收入增加到11.4萬美元。

*統計方法：在Indeed.com上搜索求職情況。為了消除假陽性，我把搜索跟關鍵字“軟件”進行配對以增強相關性，然后乘以?1.5（這大概是編程崗位列表中使用了“軟件”與與不使用“軟件”的之間的差異。）所有搜索結果頁均按日期排序，并抽查過相關性。這里得出的數字不是100％準確的，但是對于本文來說，這種精度已經足夠好了。

Google搜索趨勢

就像你可能會想到的那樣，搜索興趣*多少反映出就業市場的份額情況，但有一些有趣的差異。我們可以清楚地看到，從2017年到今天，大家對jQuery的興趣正在減弱，而對Vue.js的搜索興趣出現了強勁增長。以下是搜索的份額情況：

跟招聘廣告一樣，React有很大的領先優勢，吸引了前端框架36％的搜索量，其次是Angular（約27％）和jQuery （25％）。對Vue.js的搜索興趣比其在招聘市場的份額要大得多，但該數據通常與排名中的招聘市場數據一致。看來我們已經成功地證實了這一點。

*研究方法：所有術語、數據均按主題而不是搜索字收集，以便從無關的關鍵字匹配中排除掉假陽性。

未來值得關注的框架

跟其他受歡迎但使用不那么廣泛的框架（比方說Svelte或Vue，這兩個的滿意度排名都很高，但行業采用率相對較小）相比，更多的崗位要找的是具備React技能的人。

學習Svelte或Vue 可能顯得很酷——但是，如果你的目標是找到一份工作的話，如果你先去學習React就會有更好的機會。

盡管如此，Svelte和Vue 在《State of JavaScript 2019》調查當中都獲得了很高的用戶滿意度分數。在過去，React的用戶滿意度得分高預示著會搶占當時占主導地位但滿意度得分相對不高的Angular的份額。

2019年，React的用戶滿意度排名最高，用戶滿意度達到了89％。緊隨其后的是Svelte（88％）和Vue.js（87％，低于去年的91％）。Svelte或Vue 不太可能搶奪太多的React用戶，但是還有有很多的Angular和jQuery 用戶可能會變節轉投Svelte或Vue ，從而在2020年推動這兩個框架取得進一步的強勁增長。

可以肯定的是，掌握React會增加你在2020年找到并保住好工作的幾率。

TypeScript 與JavaScript

毫無疑問，過去幾年的時間里TypeScript的增長非常迅速，根據State of JavaScript調查，89％的TypeScript 用戶會再次選擇使用這門語言，有66％的受訪者要么用過TypeScript ，要么對使用TypeScript感興趣（略低于去年的71％）。

但是，盡管大家對TypeScript很感興趣，且使用率似乎也在迅速增長，但是招聘市場對具備TypeScript經驗的要求還不高。只有約7％的JavaScript招聘廣告的崗位描述中提到了TypeScript。當然這可能會低估了對TypeScript 職位的需求情況，因為招聘經理一般預期JavaScript開發人員掌握起TypeScript來不會有太大麻煩所以有可能不會在崗位描述中提及TypeScript 。

但我個人堅持認為學TypeScript這門語言的投資回報率可能會比較低，甚至是負的。這有可能會降低而不是提高生產率，并且，如果您已經有TDD，代碼審查和設計審查等很好的漏洞預防措施的話，則用TypeScript編程不太可能會帶來顯著的減少漏洞的好處。

話雖如此，并不缺少對TypeScript的熱愛，所以你當然不應該怕它，或者因為人家用的是TypeScript 而不是JavaScript而拒絕別人求職。由于TypeScript 是JavaScript的超集，所以從JavaScript轉到學TypeScript并不像學習完全不同的語言那樣具有挑戰性。

想在2020年的就業市場競爭中脫穎而出你也許不需要學習TypeScript，但是TypeScript 引擎相當有用，哪怕對于標準JavaScript也是如此。

我每天用Visual Studio Code的時候都用他來給標準JavaScript 提供智能感知。甚至還可以利用JSDoc （TypeScript引擎可理解并解釋這種類型注釋）或外部d.ts 文件來增強這種智能感知，VS Code會自動獲取你所使用的模塊的TypeScript 定義。

注：用TernJS 和Atom這么多年我也一直享受著類似的好處，但是這種結合缺乏TypeScript 引擎+ VS Code 的維護性和社區支持。

如果你還沒用過Visual Studio Code，你可以先試用一下VS Code。順便說一句，VS Code在JSState調查受訪者心目當中是JavaScript IDE市場的領導者，占有57％的市場份額（其次是WebStorm ，占有14％的市場份額）。

數據管理

Redux 在狀態管理器的競賽中仍然具有領先優勢，但是GraphQL 和Apollo在滿意度和興趣方面是增加的。預計2020年GraphQL會繼續保持增長。

話雖如此，哪怕你用的是GraphQL ，我仍然認為使用Redux 狀態管理有充分的理由，而且我認為即使不用框架，每個人都將從學習Redux中受益。

GraphQL 是近年來流行的查詢語言。它的語法簡單，但是由于它是跨整個技術棧使用的，而且學這個東西意味著必須學習怎么把它連接到數據存儲層，因此集成可能會令人生畏——但這是值得付出的努力。

GraphQL 不會在短期內完全取代JSON REST API，但是它在2019年的增長甚至變得更快了，我預計這種強勁的增長會持續到2020年。

后端

Express 是主導性的Node框架，用戶滿意度很高，2020年Express不會遇到重大的挑戰者，但是隨著無服務器（serverless）的興起，我預計在新的十年到來之際，Express的統治地位會逐漸下滑。

Next.js是一個一開始建構在Express基礎之上的全棧React框架，但此后已從Express轉換到到無服務器和靜態優化，然后就像瘋了一樣發展起來。

當我們把EricElliottJS.com從Express換到無服務器的Next.js時，我們的托管費用降低了90％，而且頁面加載速度也加快了。所以我再怎么強烈推薦這個都不夠。我們現所有的應用都是用Next.js和Zeit 托管的。

測試

Jest和Cypress分別單元測試和功能測試最受歡迎的工具，但是我個人非常喜歡RITEWay 和TestCafe 。RITEWay 是單元測試之禪：一個始終回答了每個單元測試必須要回答的5個問題的測試框架。

跟Cypress一樣，TestCafe也是一種功能測試工具，這個工具不需要你跟Selenium糾纏不清，但是擁有更好的跨瀏覽器支持和一個很酷的測試記錄器/ IDE。我強烈建議QA小組試試TestCafe 。

函數工具

Lodash 、Ramda 、Immer、Redux以及RxJS都是我經常使用的函數工具。

Ramda在 2019年進步神速，它提供了一些Lodash 所沒有的工具，比如lenses（透鏡）和transducer（變形器）。RxJS通過pipeable運算符提供transducer風格的函數性。

Immer使得在不改變JavaScript對象的情況下對其進行操作變得很容易。而Redux 是一種狀態管理工具。

2020年的技術格局

在接下來的十年時間里，有幾種新興技術即將對人類生活產生巨大影響。以下是這些技術最新發展情況的概要：

人工智能也許是有史以來最具變革性的技術。不同的學者和自以為是的億萬富翁都把AI說成是奇跡般的烏托邦，或者人類的終結。

這肯定是我們所知的人類的終結，但也可能是人類與機器之間美好合作的開始。我們才剛剛開始瞥見AI可能會變成什么樣子。其中有些令人恐懼（比方說深度偽造），而另一些則非常有用（比方說Adobe Premiere對視頻編輯的新的auto-reframe功能）。事實上，到目前為止，人工智能既極其可怕又極其有用。人工智能會繼續制造一些令人恐懼的事情，但是通過人工智能改善人類生活的潛力是巨大的。潘多拉的盒子已經打開，再也無法關閉，所以我希望你善加利用好AI，用來解決重要問題和改善生活。

2019年在AI領域取得了許多重要突破。近年來，研究團隊一直在各種視頻游戲領域爭相實現超人的表現，但有些游戲類型對AI來說仍然充滿挑戰，比方說像《星際爭霸》II這樣的策略游戲。DeepMind的AlphaStar程序利用跟人類玩家能用到的相同資源，在Battle.net官方服務器實現了大師級的水平。《星際爭霸》是一款復雜的游戲，需要進行長期的策略思考，這種能力曾經被認為是AI所不能及的。戰略思維代表了通向通用AI道路上的一個重大的里程碑。

如果說把資源用到游戲上看起來似乎很愚蠢的話，不妨想想DeepMind 這樣的項目在文本轉語音方面也取得了令人難以置信的進步， AI代理和私人助理被賦予了表現更自然的聲音，但同樣重要的是，通過這樣可以把聲音還給那些失聲的人。

人工智能還被用來診斷癌癥，預測蛋白質折疊（可用于了解疾病和發現新藥），恢復殘疾人的肢體控制，生成逼真的圖像等。

無人車

無人車在變革性AI技術當中應該有自己的一席之地。這個生態體系的大玩家主要包括Cruise、Uber、Waymo、Nuro\Aurora以及福特等。這項技術仍處在初級階段，過分樂觀已給這個行業帶來了真正的問題，但毫無疑問，2020年代我們將見證超越人類水平的自動駕駛能力。2015年我曾對自動駕駛技術做出過預測：

“到2045年的時候，一倆人開的車看起來會像馬拉的雙輪單座車一樣。”

現在距離這一預測已過去5年，我想我可能低估了自動駕駛汽車進入市場的速度。Waymo的車在2018年的行駛里程超過了100萬英里，美國已經有24座城市的道路上有無人車上路。現在我的預測是到2025年，多個制造商將會推出多種L5級（全自動）的車型。請密切關注Tesla、通用、福特及寶馬的表現。

在過去十年的時間里，AI研究論文的出版量增長了10倍，現在，AI正在把實用、有用的工具交到主流用戶手中，預計這種趨勢在未來十年仍將持續。

我們已經開始看到AI能做到一些幾年前大多數人都不敢相信的事情。預期AI在2020年代會取得更大的奇跡。

區塊鏈和加密貨幣

2019年對于區塊鏈和加密貨幣來說是具有里程碑意義的一年。區塊鏈技術開始進入主流。我預計2020年會有更大的發展并為主流所采用。

對用戶友好，實現無需許可，無需銀行的借貸的DeFi （去中心化金融）出現了爆發式增長。目前，有6.5億美元（包括4.5億美元的無銀行貸款）被鎖定進DeFi 合同里面，而2019年是該技術出現的元年。隨著越來越多的人投資于加密貨幣，我預計將來會出現更多有加密支持的DeFi 貸款。

大家可以在不犧牲自己的加密貨幣投資機會成本的情況下獲得流動性，或利用DeFi貸款對加密貨幣進行杠桿投資（投資的風險/回報均增加了）。

加密貨幣和區塊鏈技術正在突破主流。比特幣和以太坊的日活地址在2018年1月達到了頂峰，隨后一年，由于市場下跌，大家的興趣變弱了（每上漲10倍之后，加密貨幣的價格就會大幅回落，然后又會在下一個周期攀爬到比上一個高峰高出10倍的新高）。

比特幣和以太坊區塊鏈上的日活地址數

Square的Cash App的Android下載量已超過1000萬次，在有著出色UX的簡單app里面，用戶可以購買，出售，接收比特幣。
Coinbase 的Android下載也超過一千萬。
Brave推出了內置的以太坊錢包，月活用戶數一下子從2019年10月的870萬增加到11月底的1040萬。
因為有了Sliver.tv和DLive，2000萬視頻游戲迷正在利用Theta網絡進行去中心化的流媒體直播。

2019年我最喜歡的進展是Fortmatic 的推出。不管你是不是在開發加密應用，你都可以用Fortmatic來替換用戶身份驗證并提高安全性，并且擺脫被供應商鎖定，還可以增加諸如端到端加密，簽名交易等功能。

如果你打算在2020年開發新應用，不妨考慮一下Fortmatic，而不是再得輸入自己的用戶名/密碼進行身份驗證（2020年沒人應該再這樣做了），或者把身份驗證這件事交給Google、Facebook等。

我曾經寫過一篇文章討論如何利用加密技術來改善應用的身份驗證和安全性。我很期待在2020年能看到主流應用開始采用Fortmatic等技術。

2019年以太坊輕松贏下了智能合約平臺大戰的勝利。我預計2020年以太坊仍將繼續占據主導地位。

擴展現實（XR）

自2015年以來，我每年都對AR未來充滿希望我，從小就夢想著它的實現。將來，XR將會取代手機。這只是個時間問題。需要多長時間仍然有待討論，但似乎這種轉變可能會在未來十年內出現。甚至可能在未來5年內開始。

隨著VR與AR之間的界限逐漸模糊，該行業現在正在把整個領域泛指為XR（擴展現實）。自問世以來，ARKit 和ARCore （分別是蘋果和Google的增強現實SDK）自引入以來已取得了長足的發展。月活用戶數已從2017年的4700萬增長到2019年5月的1.5億。

WebAR 在2019年已站穩了腳跟，2020年很可能會繼續發展。如果你對此感到好奇的話，不妨看看AR.js、React 360或Viro React。

硬件也取得了很多進展。2016年推出的Hololens 1大概是5000美元。自此之后又發生了什么呢？

Hololens 2的價格仍然高達3500美元，他們還沒有為消費者準備。剪切、SLAM（實時定位與地圖構建）及視野等方面仍然存在問題。你不會想一整天都戴著這樣的東西。但是，因為現在它的定價是每月99美元上手個開發者工具包還是有可能的，雖說你得在等待名單上等一段時間。

無人機

在美國已經售出了大約200萬架無人機，它們已經改變了建筑，地理調查，制圖，電影，航空攝影，農業，環境科學和娛樂等領域。2020年商用無人機物流配送最終可能在美國成為現實。

FPV無人機比賽是我最喜歡的觀賞運動，還有Drone Racing League直播賽事。如果你想了解它是什么樣的，他們還提供了精心設計的模擬器。

所有這些新的無人機活動均需要大量軟件支持，包括圖像處理，無人機地圖軟件，物流飛行規劃，遙測記錄和處理，分析，行業應用集成等。

這跟AI也有很多重合之處——自主飛行的無人機需要圖像處理，碰撞避免等。

結論

2010年代為我們提供了大量變革性技術，其中許多我們已經視為理所當然，但其實是產生了巨大影響的：

Instagram
Spotify
虛擬助手
無線耳機
主流VR
增強現實（熱門游戲“精靈寶可夢”就用這個）
經濟實惠的Tesla
共享經濟（汽車，電動滑板車，自行車）
主流平板電腦
主流生物識別技術（觸摸ID，面部ID）
眾籌

我已經迫不及待想看看你在新的十年會創造出什么樣的東西。

開始表演你的魔術吧。

譯者：boxi。

在線咨詢

上一篇：HTML 表格標簽
下一篇：初識HTML-列表標簽和表單標簽

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商