整合營銷服務商

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

          免費咨詢熱線:

          HTML5開發和Flash技術的差異有哪些

          HTML5開發和Flash技術的差異有哪些

          2017年1月,谷歌廣告營銷平臺將不再支持Flash設計的廣告。自從YouTube從Flash轉向HTML5開發以支持視頻,Adobe采用HTML5和蘋果采取開放態度來支持Flash在移動設備上,這標志著HTML5與Flash爭論的另一個轉折點。

          HTML5開發

          Flash和HTML5占領類似的領域,并尋求執行一些相同的功能,其主要功能、優點和缺點是在開發Web時需要考慮的因素。

          HTML5

          什么是HTML5? HTML5是著名的瀏覽器語言的第五版,超文本標記語言(HTML),旨在構建Web文檔(即網頁)。它由文本,標簽,元素和屬性組成,它們定義了如何通過瀏覽器顯示Web內容。文本被打開和關閉的角度包括標簽框架,編程值定義了包含的隱含結構。例如,

          HTML5是HTML的最新版本,功能更強大。它擴大了可以嵌入在網頁中的多媒體元素的列表。HTML5支持可擴展矢量圖形(SVG)的多媒體特定標簽、動畫和使用canvas元素,級聯樣式表(CSS)和JavaScript的音頻和視頻的交互性。

          HTML5無需第三方插件(例如插件和API),以便通過在文檔文本本身中嵌入代碼來運行內容。這解決了以前的迭代發現的兼容性問題,其中需要使用第三方插件或專有API來正確呈現HTML文檔。 這個自主的界面還使HTML5成為在任何設備上部署的輕量級框架。因此,HTML5非常適合移動設備上的自適應渲染,并可為移動和桌面瀏覽器提供相同的互動體驗。

          Flash

          Flash是Adobe的某些專有工具提供的技術的通用名稱,用于創建富互聯網應用程序(RIA)。RIA包含使用Flash平臺設計的圖形、動畫、音頻、視頻和交互性,在網絡上提供沉浸式的用戶體驗。Flash技術包括基于矢量的圖形和動畫,支持音頻和視頻格式以及基于面向對象的基于事件的ActionScript語言中用于交互式Web功能的編程。Flash技術在專有的集成開發環境(IDE)中提供,并附有所有必要的創作工具。它們提供了輕松創建和發布RIA功能的能力,而不需要很多編碼知識。Flash IDE中的發布功能創建壓縮的Shockwave Flash文件(.swf),當與Adobe Flash Player插件一起使用時,它們可以在瀏覽器之間提供一致的性能。

          Flash的優勢包括緊湊的文件格式,短的下載時間和高質量的圖形,可以輕松適應不同的瀏覽器顯示和分辨率。這些功能與廣泛的傳統支持和開發相結合,使Flash成為在網絡上創建增強的用戶體驗的可行工具。

          Html5與Flash之間的優劣對比

          作為現在可以支持Flash類技術的開源語言,HTML5已經成為Web開發的新首選。它提供許多Web文檔結構,樣式和交互功能,例如圖像(通過SVG)中的可搜索文本以及增強文檔顯示的新標簽,元素和屬性。它還具有通過其輕量級框架要求較少的處理能力而使移動性更好的優點。

          相反,作為一項較新的技術,HTML5尚未全面納入所有瀏覽器。在不同的瀏覽器中,由于在不同的開發階段被實現,它仍然容易被不同地顯示出來。它還缺少Flash的更強大的美學功能,例如創建視覺豐富的3D體驗或“電影喜歡的效果”。盡管存在這些缺點,包括需要更多的編碼知識來實現,HTML5正在成為主要的標準。

          相比之下,Flash功能已經成熟,并且有大量熟悉使用其工具的開發人員。絕大多數傳統瀏覽器都采用了這種技術,并且已被證明是跨越瀏覽器平臺的更一致的技術。但是,Flash需要額外的組件Adobe Flash Player插件才能運行; 由于頻繁的崩潰和一些安全問題,較新的瀏覽器不再支持Flash播放器,已經完全失去了移動瀏覽器的支持。雖然瀏覽器不再支持Flash,但它仍然是開發本地游戲和應用程序的熱門選擇,可從Google Play等應用商店下載。Flash還支持桌面應用程序,并提供資源,用于制作和發布網頁內容,而無需廣泛的編程知識。

          未來發展

          如前所述,由于Flash在較新的瀏覽器上缺乏移動支持和不穩定性,像Google,Apple和YouTube這樣的技術巨頭已經穩步遷移到HTML5,其他許多人也紛紛緊隨其后。2010年,史蒂夫·喬布斯寫了他著名的“Flash思想”的信,鞏固了他對Flash技術缺陷的立場。YouTube的一名工程師對HTML5的好處表示了類似的看法,2015年YouTube終于將Flash轉為HTML5作為默認網絡播放器。這項決定是為了跟上HTML5技術壓倒一切的新技術。最后,Adobe也許是最偉大的聲明,Adobe現在提供使用HTML5的工具,以及將Flash技術轉換成即將到來的標準。

          軟件技術供應商將在開發或遷移Flash到移動和網絡技術的HTML5時得到很好的服務,因為從長遠來看,Html5將有望贏得Flash。然而,網站保留Flash是因為它所具有的一些優越的審美功能和傳統的優點,直到HTML5開發能夠完全替代。

          文章來源:http://www.kingwins.com.cn/content-653.html

          、Html的基本結構:

          <!DOCTYPE html>

          <html>

          <head>

          <meta charset=utf-8">

          <title></title>

          </head>

          <body>

          網頁的文本、圖片等信息;

          </body>

          </html>

          二、Head部分:用于表示網頁的元數據即描述網頁的基本信息

          其常用標簽及屬性有:

          1、title標簽:瀏覽器標簽頁顯示的標題

          2、meta標簽:其常用屬性

          ①charset:設置文檔的字符集編碼格式。HTML5中設置字符集編碼:<meta charset="UTF-8">

          常見的字符集編碼格式:

          a.GB-2312:國標碼,簡體中文

          b.GBK:擴展的國標碼

          c.UTF-8:萬國碼 Unicode 常用

          ②http-equiv屬性:將我們的信息寫給瀏覽器看,讓瀏覽器按照這里面的要求執行,可選屬性值:Content-Type(文檔類型) refresh(網頁定時刷新) set-cookie(設置瀏覽器cookie緩存) 需要配合content屬性使用。(http-equiv屬性只是表明需要設置哪一部分,具體的設置內容,放到content屬性中)

          ③name屬性:使用方法同“http-equiv”。將我們的信息寫給搜索引擎看

          常用且需要掌握的屬性值:author(作者) keywords(網頁關鍵字) description(網頁描述) 這兩個屬性設置,網頁必不可少。

          3、link標簽:鏈接網頁圖標(title前的小logo),其常用屬性有:

          ①rel屬性:聲明鏈接文件的類型,此處選icon

          ②type屬性:可以省略

          ③href屬性:表示圖片的路徑地址

          三、body部分:網頁的文本、圖片等信息

          標簽的分類:

          塊級標簽:顯示為塊,前后隔一行(自動換行)

          行級標簽:按行從左往右逐一顯示。

          1、 常見的塊級標簽:

          ①<h1></h1>......<h6><h6>:標題標簽,自動加粗,h1最大,h6最小。

          ②<hr/>:水平線標簽,添加一條水平線。

          ③<p></p>:段落標簽,

          ④<br/>:換行標簽,

          ⑤<blockquote/></blockquote>:引用標簽,cite屬性,表明引用的來源,一般引用網址

          瀏覽器默認首行縮進。

          ⑥<pre></pre>:預格式標簽,用于重載代碼。瀏覽器默認顯示樣式:1、顯示為等寬字體。 2、代碼中的換行、

          空格等元素能在瀏覽器中顯示。

          【補充】html 文件中空格的表示:

          2、 基于布局的塊級標簽

          列表:無序列表、有序列表、定義列表

          ①有序列表:<ol></ol> 列表項:<li></li>

          ②無序列表:<ul></ul> 列表項:<li></li>

          ③定義列表(實現圖文混排):<dl></dl>

          列表標題:<dt>一般只有一項</dt>

          列表描述項:<dd>可以有很多項</dd>

          3、組合標簽:<figure></figure>用于顯示圖片及圖片標題

          他有兩個子標簽:<img />圖片

          <figcaption></figcaption>圖片的標題

          例如:<figure>

          <img src="img/EZ.jpg" height="20%" width="20%" alt="探險家"/>

          <figcaption>探險家 伊澤瑞爾</figcaption>

          </figure>

          4、分區標簽:<div></div>

          5、常見的行級標簽

          <1>span(文本):無實際意義,用于包裹某部分文字,修改特定樣式,例如:

          這是<span style="color: red;font-size: 36px;">span</span>中的文字

          img(圖片):其常用屬性:①src:表示引用圖片的地址。

          路徑地址的寫法:相對路徑:以當前文件為最準,去尋找圖片地址

          a、與文件處于同一層的圖片,直接寫圖片名

          b、圖片在當前文件下一層:文件名/圖片名

          c、圖片在當前文件上一層:../圖片名

          絕對路徑:file:///盤符:/文件夾/圖片名,但 是嚴禁使用

          圖片網址:網絡上的圖片鏈接,但是一般不用

          ②height和width:圖片的高度和寬度。可以用CSS樣式代替

          ③title:圖片標。當鼠標指上之后顯示的文字

          ④alt:當圖片無法顯示的時候,顯示的文字

          <2>em(傾斜強調)

          <3>strong(加粗強調)

          <4>b(加粗)

          <5>i(傾斜)

          Strong、em、b、i的區別

          1、Strong、em都表示強調,Strong為粗體,em為斜體,而Strong的強調 程度逗比em高

          2、Strong和b都能加粗,em和i都能傾斜,,但是Strong和em多了一層強調的語義 。H5要求標簽盡可能實現語義化。

          <6>q(短引用)

          <7>small/big(縮小/放大字體):small和big分別是縮小和擴大字體,都可以多層嵌套直至上限或下限

          <8>a(超鏈接)

          1、href:超鏈接的路徑,可以是網絡鏈接,也可以是本地文件。

          2、target:跳轉頁面打開的位置。_self自身頁面,_blank新頁面。

          3、title:鼠標指在超鏈接上顯示的名稱。

          4、Rel(被鏈接是當前的前/后一篇):指定被鏈接文檔與當前文檔的關系,搜索引擎 會利用該屬性 獲取更多的有關鏈接的信息:

          rel="prev"被鏈接文檔是當前文檔的前一篇文 檔,

          rel="next"被鏈接文檔是當前文檔的后一篇文檔,

          rel="icon"被鏈接文檔是當前文檔的圖標

          rel="stylesheet"被鏈接文檔是當前文檔的樣式表

          5、Rev(當前是被鏈接的前/后一篇)

          錨鏈接:

          ①本頁面錨鏈接:a、設置錨點:<a name="top"></a>

          b、跳轉錨點:#name名

          ①頁面間錨鏈接:a、在即將跳轉頁面的指定位置設置錨點

          b、跳轉錨點:頁面地址.html#name名

          <a href="02_常見的塊級標簽.html#Hbuilder">頁面間錨鏈接</a><br/>

          功能性鏈接: mailto用于給指定郵箱發送郵件

          file:///e:/aaa.png打開本地文件

          tencent://message/?uin=1315618220 給指定QQ發送息

          <9>s標簽,有誤文本:刪除線

          <s>這是S標簽中的文字</s><br />

          <10>cite標簽:瀏覽器顯示為傾斜,常用于書、畫作、作品的引用

          <cite>這是cite中的文本</cite><br />

          <11>code:計算機代碼,不保留代碼格式

          <pre>

          <code></code>

          </pre>

          <12>bdo:表示文本方向,屬性:dir="ltr"表示從左往右,dir="rtl"表示從右往左

          <bdo dir="rtl">1234567</bdo><br />

          kbd:表示需要用戶用鍵盤輸入的內容,瀏覽器顯示為等寬字體

          請輸入“<kbd>Esc</kbd>”推遲系統<br />

          <13>sup:上標文本,sub:下標文本

          x<sub>6</sub><br />

          ? ? 空格

          ? ? 空格 <br />

          <14>u:下劃線

          <u>這是下劃線</u><br />

          mark:高亮或標記文本,瀏覽器顯示為黃色背景

          <mark>mark</mark><br />

          6、表格:表格的行:tr,每行中的列:td,表格的表頭:th

          表格的常用屬性:

          表格行列屬性:[tr和td的屬性]:

          1、width/heigh:單元格的寬高

          2、bgcolor:單元格的背景顏色

          3、align:left center right 單元格中的文字水平對齊方式

          4、valign:top center bottom 單元格中的文字垂直對其方式

          5、nowrap:單元格中文字不換行

          【注意】當表格屬性與行列屬性沖突時,行列屬性優先級高

          7、表單(form)

          【兩個重要屬性】:action-表單提交的服務器地址 method-表單提交數據的方法(get/post)

          get/post區別:

          1>get使用URL傳參:http://服務器地址?name1=value1&name2=value2

          (?表示傳遞參數,?后面采用name=value的形式傳遞,多個參數之間用&連接) ① URL傳參不安全,所有信息可在地址欄看到,并且別人可以很容易url注入,來 攻擊自己的數據庫。

          ② URL傳參數據量有限,只能傳遞少量數據。

          2>post:使用http請求傳遞數據。URL地址看不到數據信息,安全且傳遞信息量沒有限制

          綜上所述:大部分使用post傳參,但是get傳參比Post快

          【input標簽及屬性】

          ①type:input輸入框的類型,可選值有:

          ②name:input輸入框的別名,必填,因為傳參的時候采用name=value的形式傳遞。

          ③value:input輸入框的默認值

          ④placeholder:提示內容,當輸入框有value時,提示內容消失。

          【input特殊屬性值】

          ① checked="checked"默認選中

          ② disabled="disabled"設置控制不能使用,按鈕上不能點擊,輸入框上不能修改,而且如果

          輸入框時disabled,則輸入框信息不傳遞到后臺

          ③hidden=“hidden”隱藏。等同于<input type="hidden" name="username"value="1234" />

          等同于配合disabled或根據其他需要,使用隱藏域傳遞信息.

          【input-type屬性詳解】

          ①text:文本輸入框

          ②password:密碼輸入框,內容不對外顯示

          ③radio:單選按鈕

          checkbox:復選按鈕

          a、單選按鈕,name和value屬性需同時存在,提交時,提交的是value中的屬性值

          例如:<input type="radio" name="sex" value="男"/>提交顯示為"sex=男"

          b、radio憑借name屬性區分是否為同一組,name相同為同組,且只能選擇一個

          c、checked="checked"默認選中,(radio只可以選一個,checkbox可以選多個)

          ④submit:提交按鈕,提交表單數據

          ⑤reset:重置按鈕,重置為默認狀態

          ⑥file:文件上傳按鈕

          ⑦image:圖片提交按鈕,功能同submit,可以提交數據

          ⑧button:普通按鈕,沒什么軟用

          ⑨其他常用屬性值:見下圖

          【select標簽】下拉選擇標簽

          寫法:

          <select name="=city">

          <option>青島</option>

          <option>煙臺</option>

          <option>北京</option>

          <option>紐約</option>

          <option>羅馬</option>

          </select>

          常用屬性

          ①name屬性:寫在select里,所有選項只有一個name

          ②multiple屬性:multiple="multiple"設置select為多選,一般不用

          ③option常用屬性:value=""屬性,當option沒有value屬性時,往后臺傳遞的是<option></option>中間的文字,

          當有value屬性時,傳遞的是value的屬性值。

          title=""屬性,鼠標之上后現實的文字

          select="select"默認屬性值

          ④optgroup屬性: 用于option屬性分組,用lable屬性表示分組名。

          <optgroup label="中國">

          <option>青島</option>

          <option>煙臺</option>

          <option>北京</option>

          </optgroup>

          【textarea】:文本域,其常用屬性 :

          ①設置寬度高度 style="width: 150px;height: 200px;

          ②readonly="readonly":只讀模式,不允許修改編輯

          ③style="resize: none;"設置為寬度高度不允許修改

          ④style="overflow:;"設置文字超出區域時,如何處置,常用屬性值有:

          hidden 超出區域的文字,隱藏無法顯示

          scroll 無論文字多少,均顯示滾動

          auto 自動,根據文字多少自動決定是否會顯示為滾動條

          【fieldset 、legend】表單的邊框與標題

          <fieldset> //邊框

          <legend> //標題

          </legend>

          </fieldset>

          如果想讓標題嵌入到邊框中,需將標題標簽寫到邊框標簽里面

          一個表單可以有多組標題加邊框組合

          【h5智能表單】

          1、H5新增input的form屬性,用于指定特form表單的id,實現input無需放在form標簽之中,即可通過表單進行提交

          <form id=foo>

          ……

          </form>

          <input type="text" name="" form="foo">

          2、 input元素的新增屬性:

          Autocomplete:自動完成功能,記錄用戶之前輸入的內容,并在用戶下次輸入時提示用戶輸入

          》》》屬性值:on/off

          》》》可以再form表單使用,對整個表單的所有控件進行自動完成的開關也可以在input上使用,

          對特定輸入框進行修改

          》》》絕大部分瀏覽器默認開啟

          Autofocus:自動獲得焦點,autofocus="autofocus"只能獲得一個焦點

          Form:所屬表單,通過id確認屬于哪個表單

          Required:必填,required="required",設置必填,否則停止提交

          Pattern:使用正則表達式驗證input的模式

          Placeholder:提示,當有value時取消提示。


          1. 頁運行效果圖

          王寶強個人博客首頁

          個人博客簡介頁面

          個人避開聯系我們頁面


          首頁HTML代碼


          主站蜘蛛池模板: 韩国一区二区三区视频| 色窝窝无码一区二区三区色欲 | 久久久久久综合一区中文字幕| 久久婷婷色一区二区三区| 日本丰满少妇一区二区三区| 亚洲AV成人精品一区二区三区| 久久久久无码国产精品一区 | 亚洲一区精品无码| 日本免费一区二区三区最新vr| 亚洲午夜电影一区二区三区| 亚洲V无码一区二区三区四区观看| 一区二区三区91| 一区二区高清在线| 人妻无码一区二区三区| 天码av无码一区二区三区四区| 国产大秀视频一区二区三区| 日韩在线视频不卡一区二区三区| 多人伦精品一区二区三区视频| 久久中文字幕无码一区二区 | 日韩视频一区二区在线观看 | 插我一区二区在线观看| 本免费AV无码专区一区| 国产综合一区二区在线观看| 国产免费无码一区二区| 日本一区二区不卡视频| 久久综合精品不卡一区二区| 麻豆天美国产一区在线播放| av无码免费一区二区三区| 成人中文字幕一区二区三区| 精品一区二区ww| 能在线观看的一区二区三区| 精品视频在线观看你懂的一区 | 少妇精品久久久一区二区三区| 无码人妻少妇色欲AV一区二区 | 色综合视频一区二区三区44| 国产一区二区三区亚洲综合| 久久精品一区二区影院| 日韩高清国产一区在线| 亚洲欧美日韩中文字幕在线一区 | 精品无码一区二区三区电影| 极品尤物一区二区三区|