整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
TML是制作網頁的基礎，我們在網站建設中談論的靜態網頁就是基于HTML的網頁。
早期的網頁直接用HTML代碼編寫，但現在有許多智能網頁制作軟件（常用的如frontpage，dream weaver等）通常不需要手動編寫代碼，而是由這些軟件自動生成。雖然不需要自己寫，但是理解HTML代碼仍然是非常重要的。
了解HTML是什么？它是學習網站建設的重要技術基礎知識
下面我們自己可以動手創建一個非常簡單的網頁，首先我們讓計算機顯示擴展，方法是打開我的電腦，然后現在欄目工具》文件夾選項》查看》高級設置中找到《隱藏已知文件類型的擴展名》將其不勾選，并單擊“應用”以確認設置。然后在桌面上創建一個新的TXT文件，將此文件命名為“xxx.html”（擴展名也可以是htm），這樣你就可以用瀏覽器打開它，你就會看到自己制作的最簡單的頁面。
html是一種超文本標記語言，即html（hypertext markup language），是一種用來描述網絡文檔的標記語言。在頁面的開頭和結尾使用<html></html>標簽。
總結：
1）HTML是我們常說的靜態網頁；
2）HTML是以Html或htm為擴展名的文件；
3）HTML某些標簽代碼規則，讓內容在瀏覽器中呈現出我們所需要的樣式；
4）HTML可以使用記事本創建，并以.html或.htm為擴展名保存。
html文件中的代碼由具有一定的規則規律標簽與內容組成。以指定的HTML結構和內容形成完整的html文件。我們可以直接使用瀏覽器來打開，查看網頁效果。
如果您想在瀏覽器中顯示各式各樣的網頁，我們就需要html文件（HTML基本結構+內容+標簽）和css文件（css樣式）來實現我們需要的漂亮網頁。
動力節點老杜講解的html學習教程，非常詳細全面，完全適合小白入門
內容：講解了HTML基礎語法、HTML概述、W3C概述、B/S架構系統原理、table、背景色與背景圖片、超鏈接、列表、表單、框架等知識點。
通過html教程的學習之后，不但可以開發基本的網頁，還可以看懂別人編寫的HTML頁面。
HTML完整資料下載：
http://www.bjpowernode.com/?toutiaoweb.chai
1.HTML教程:課程內容概述
2.HTML教程:BS結構介紹
3.HTML教程:軟件環境準備
4.HTML教程:HTML概述
5.HTML教程:我的第一個HTML
6.HTML教程:HTML的基本標簽
7.HTML教程:HTML的實體符號
8.HTML教程:HTML的表格
9.HTML教程:HTML的單元格合并1
10.HTML教程:HTML的單元格合并2
11.HTML教程:thead tbody tfoot
12.HTML教程:背景色和背景圖片
13.HTML教程:HTML圖片img標簽
14.HTML教程:HTML超鏈接
15.HTML教程:超鏈接的作用-request和response的概念
16.HTML教程:HTML列表
17.HTML教程:form表單初步
18.HTML教程:用戶注冊表單的實現
19.HTML教程:下拉列表支持多選
20.HTML教程:form的file控件
21.HTML教程:隱藏域hidden控件
22.HTML教程:隱藏域hidden控件2
23.HTML教程:readonly和disabled
24.HTML教程:控件的maxlength屬性
25.HTML教程:HTML文檔中節點的id屬性
26.HTML教程:div和span在網頁中的應用
如果您下載了上一篇《為HTML頁面添加音頻、視頻的方法——零基礎自學網頁制作》（目錄在結尾）中的素材，您會看到有這樣一個文件，如圖
這就是格式工廠軟件的安裝程序
建議大家在學習之前下載素材用以實踐，下載地址如下：https://pan.baidu.com/s/1reRWno0ibYRcYXjw4MClqw
提取碼：td80
因為格式工廠是免費軟件，所以大家直接安裝就可以了，不需要序列號，安裝過程如下：
1.雙擊安裝程序
2.選擇安裝盤符
3.等待進度條跑完就好了。大家注意，安裝時一定要閱讀提示，一些沒必要的捆綁軟件記得不要安裝！
完成安裝后，點擊"開始"菜單，如圖：
這樣我們就可以打開格式工廠了，打開后如圖：
通過這個菜單我們可知，這個軟件不僅可以為音頻、視頻轉換格式，還可以給圖片轉換格式。如圖：
下面我們就來操作一下如何為視頻轉換格式。
step1.點擊"視頻"
點擊后是這樣的，點擊"AVI FLV MOVE"這個區域。
效果如下，出現了一個新的菜單。
step2.選擇要轉換的格式，如圖，我們先選擇ogg，點擊！
點擊"確定"
彈出這樣一個菜單：
step3.選擇文件，如圖，點擊"添加文件"
我們使用"利維坦.mp4"這個文件進行轉換，如圖：
點擊"打開"后，跳到這個界面，如下圖，然后點擊確定。
這時界面就跳回最初的界面上，如下圖，點擊開始，如紅框中。
step4.等待轉換完成，如圖所示：
然后點擊"輸出文件夾"按鈕找到轉換好的文件，如圖：
這時，我們可以把這個轉換好的文件拷走。
完成之后，大家可以按照上述步驟繼續轉換出swf、flv格式的視頻文件。
轉換音頻和視頻的步驟類似，大家可以在音頻欄中進行選擇相應格式并操作。
格式工廠除了音視頻格式轉換外，也具有簡單的圖片處理，視頻拼接，錄屏等功能，感興趣的小伙伴可以自行測試。
學過上一篇《》的小伙伴都會知道，目前音頻也好、視頻也好有非常多的格式存在，不同瀏覽器能支持的格式也不盡相同，就拿swf文件看，2019年以后版本的火狐瀏覽器就不再支持了（還可以通過一些特殊手段播放，這里指的是常規的html標簽用法）。而chrome（google瀏覽器）在使用<embed>標簽導入swf文件后就可以播放，示例代碼如下：
<!DOCTYPE HTML>
<html>
<head>
<title>音視頻導入</title>
<meta charset="utf-8">
</head>
<body>
<embed src="video/利維坦.swf" width="320" height="240" />
</body>
</html>在chrome中可以打開。不過要用戶允許使用flashplayer才行，如圖：
這時我們發現，在默認情況下，播放器控制面板并沒有出現。
使用ie瀏覽器卻不能打開，因為針對swf文件，ie瀏覽器需要使用<object>標簽。示例代碼如下：
<embed src="video/利維坦.swf" width="320" height="240" />
<object data="video/利維坦.mp4" width="320" height="240"></object>如圖所示：沒有正常顯示的是<embed>標簽，打開的是<object>標簽，并且有控制器。如圖：
實際上swf是個歷史遺留問題，<object>主要是針對ie瀏覽器來播放swf或其他需要flashplayer支持的視頻格式。<embed>的標簽則用來解決非ie瀏覽器中播放swf或其他需要flashplayer支持的視頻格式。
而蘋果瀏覽器壓根就不支持swf這一類的文件。
目前網絡視頻格式基本上都統一為MP4格式了，在html5標準中，<video>標簽頁取代了<object>和<embed>標簽來播放視頻，同時支持多種格式選擇的代碼模式，示例代碼如下：
它的結構是<video></video>標簽中套入了多個<source/>標簽來指定不同格式的文件，同時并列套入一個<object></object>標簽，在<object></object>標簽中再套入一個<embed>標簽。這樣的寫法的目的是為了讓使用各種各樣的瀏覽器的用戶都可以打開視頻。這種寫法目前是html認為的最好的寫法。
大家可以試一試，使用之前轉好的不同格式的視頻。
大家回想一下，導入不同格式音頻的寫法也是這個樣子，示例代碼如下：
<audio controls="controls">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.<!--你的瀏覽器不支持這個音頻元素-->
</audio>其他的兼容方法
在w3school的說明中給出了一種包打一切的方法，說起來有點搞笑。
視頻的話，w3school建議可以上傳優酷，然后使用這樣的代碼嵌入自己的頁面中，官方示例代碼如下：
<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" width="480" height="400" type="application/x-shockwave-flash"></embed>當然也可以使用我們之前在《》這篇教程中講到的優酷官方推薦的<iframe>標簽的寫法。
音頻的話，可以調用免費的在線雅虎播放器來播放，官方示例代碼如下：
首先使用一個<a>標簽，使用href屬性指定音頻文件的路徑。然后使用<script></script>標簽來啟東雅虎播放器的JavaScript程序來播放。這個<script>標簽以后在學習JavaScript時，我們會經常和它打交道，它的主要作用就是導入腳本。
出于好奇我試了試，代碼如下：
</video>
<a href="audio/千年的祈禱.mp3">Play Sound</a>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
</body>大家注意，<script>標簽寫在</body>上面即可，也就是在頁面內容的最下面，不必非要和<a>標簽湊在一起。放在<head></head>中也可以！
頁面效果如下：
點擊"Play Sound"之后跳到這樣的界面：
最后給大家介紹一個導入字幕的方法，示例代碼如下：
<video width="320" height="240" controls="controls">
<source src="forrest_gump.mp4" type="video/mp4" />
<source src="forrest_gump.ogg" type="video/ogg" />
<track kind="subtitles" src="subs_chi.srt" srclang="zh" label="Chinese">
<track kind="subtitles" src="subs_eng.srt" srclang="en" label="English">
</video>其中的<track>標簽就是導入字幕的標簽，是一個html5中出現的新標簽。屬性解釋如下：
因為沒有配套的srt文件，因此這里就不演示了，大家了解一下，以后有機會再細致測試一下。
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>標簽實現文本內鏈接——零基礎自學網頁制作
行時是內容和應用加載的地方。之前的兩個運行時是 web 和移動 app，下一個主流的運行時會是什么呢?微信和 Facebook 都想通過各自的手段成為新的運行時，但 Snapchat 卻打起了視頻的主意，通過換臉、加貼紙等把視頻變成了封裝各種內容的手段。Benidict Evans 的這篇分析真是有點腦洞大開。
下面這張內容與分發模型圖是 Jonah Peretti 去年底的時候制作出來的。對于我來說，這張圖有趣的地方在于它反映出了兩個明顯的趨勢—分發平臺的擴散以及內容模式的擴散。
上圖的每一段圓弧都是有著不同的用戶獲取模式的平臺，同時也是有著不同內容格式的平臺。你獲得瀏覽的方式、有效的內容類型以及可能的內容類型都是不同的。(當然，Buzzfeed 跟其他的東西也是理解和優化這一環境的一臺機器)
在這種擴散中，分發模型正在朝著兩個方向發展，一是算法驅動的新聞流(Facebook、Twitter、Instagram)，二是人工策劃(Snapchat Discover)，而內容模型一方面格式變得越來越豐富愈發沉浸式(往往是通過視頻文件的形式交付)，另一方面更輕量的、針對帶寬優化、基于文本的格式也逐漸流行(AMP、Facebook Instant Articles)。盡管 AMP 和 Articles 看重的是加載速度，但就像 Facebook 或 Snapchat 的視頻一樣，這些內容也是受控于平臺所有者的。
與此同時，Google 做 AMP 以及 Facebook 做 Instant Articles 一半的(無論是否隱含)意義在于，通過撤除所有的廣告技術以及分析用的 JavaScript 轉而采用 Google 和 Facebook 自己的解決方案，帶寬可以更省，渲染可以更快。但同樣地，另一端的帶寬卻在增長，Snapchat Discover 讓你得靠平臺告訴你發生了什么。大多數情況下，尤其是在 Facebook 和 Snapchat 這里，相對于一切都要靠 JavaScript 獲取來說，主平臺可以提供更好的使用和用戶方面的信息(理論上也會帶來更好的經濟效益)。也許。與此同時，你得到的不僅是新內容和指標，還包括新的廣告格式(尤其是在 Snapchat 這里)，跟 web 橫幅廣告相比，這種廣告格式會感覺更加原生，跟普通內容自然融為一體。
也就是說，這些模型改變了你獲取受眾的方式，改變了受眾看到的是什么，改變了你對受眾的了解，以及你從中賺錢的方式。(然后，為了省事起見，大概會有 1/3 的移動 web 使用會在 Facebook 上以應用內瀏覽發生)
接下來，雖然 Facebook 有 Instant Articles，但 Google 現在則有 Instant Apps。你點一下鏈接，“原生”(無論如何不會是 HTML)代碼立即(希望如此)就會出現并運行。你可以把這看作是 Java 的回歸(從某種意義上來說 Android 就 “是” Java)，或者 Flash 的回歸。我覺得類似地 Flash 的作用范圍還要廣。Snapchat Discover 當然看起來就像 Flash—盡管技術上來說其交付的格式也許是 h264 視頻，但實際的內容卻非常像 10年 前大家玩 Flash 的那些東西—活動、互動的富媒體內容加上聲音、動作、動畫，有時候還包括真正的實景鏡頭。我們已經從用 Falsh 交付視頻發展到用視頻交付 Flash。也就是說，視頻就是新的 HTML—一種新的內容交付格式，而且根本就未必需要是真人實景。Instant Apps 做的事情一樣，只不過用的是 Android 運行時而不是 Snapchat 的。還有就是盡管 Google IO 上面的 Instant Apps 演示看起來更像是 app 而不是內容，但原理是一樣的—比 HTML 更豐富，但比要跑到應用商店去更好。不過即便 AMP 或 Instant Stories 也都可以做出同樣的詮釋—我們現在已經從舊的、簡單的 HTML 和 JavaScript 轉到擁有更好的體驗上了。
有人可能也會認為這意味著視頻(也包括 GIF 或者任何你想加入的格式)充當著一種新的卡片格式—一種把各類內容封裝起來的手段，讓它可以在互聯網上流轉和分享。把視頻嵌入到社交網絡信息流再次成為替代 HTML 的內容交付格式，還有，這也意味著你可以嵌入任何想要的內容，包括廣告。
這同時指向了另一種擴散—指標的擴散。當 Snapchat 說自己擁有 “100 億視頻日瀏覽量” 時，它說的是什么意思呢?別人又可以拿什么東西跟它比較呢?對自動播放視頻又該怎么看?如果用戶沒有聽聲音或者沒有聲音呢?這當然不能跟電視的觀看情況比較，或者至少，只能在基于跟 Facebook 或其他任何內容相同的基礎上比較總時長。YouTube 至少在概念上跟電視形式是一樣的，但 Snapchat 真不是。并且當然，設計和報告指標的也是平臺所有者自己。
把這個問題延伸一下，如果不能比較時長的話，也就很難比較廣告支出。在大部分觀看都是靜默狀態下(滾屏經過時自動播放往往會被跳過)進行的 “視頻” 平臺上的用時能跟電視熱播節目上的用時相比嗎?電視上播放著節目但是你卻坐在沙發上看智能手機上互動性很強的(h264 格式)富媒體內容又怎么算?(再往前展望一下，是不是還得考慮一下 VR 上的廣告價值與互動性呢?)
反過來，這又讓我覺得移動廣告攔截會變得更加有問題。Facebook 很長一段時間以來一直都是全世界最大的廣告攔截者，正如它是最大的移動 web 瀏覽器之一。但如果平臺從單個 IP 那里給我發送加密數據，而數據就是一段 h264 視頻，但里面正好又有一段廣告，而且內容渲染用的又是設備私有的運行時的話，這種廣告又怎么剔出來呢?所有廣告攔截的最大影響也許就是把內容所有者趕到離開放 web 越來越遠的地方。
關于移動我的思考框架之一是我們正在尋找下一個運行時—一個繼 web 和移動 app 之后、在移動上面營造體驗的地方，這個新的運行時也許還會帶來新的互動和發現模式，可能也包括新的盈利模式。顯然這是審視 Google Assistant 或者 Facebook 的 Bots 平臺的一種有用的方式，但這種審視代碼的方式一樣可以用來審視內容：Snapchat 跟微信一樣也是個開發平臺，只是你要從合適的角度觀察。屏幕本身就是運行時，你能夠做到越豐富越原生就越好。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
