整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
隨著互聯網技術的不斷發展和普及，網絡與現實生活的結合越來越緊密，網站代表了企業和個人的形象，網頁如同個人的社交名片，不可或缺。越來越多的人開始學習和制作網頁，更多的企業和個人把自己的“家”搬到網上。
應該說，設計精美的頁面效果，需要用戶掌握一定的技術，了解相關的知識，初步積累網頁設計素養，同時還應該熟悉網站開發的流程。
熟悉網頁設計概念
網站是互聯網上一個信息小站，網頁是互聯網上顯示的信息頁面，如果說網站是一本書，那么網頁就是生活中的一頁書，是展示信息的最小單元。在網頁中包含文字、圖像、多媒體等內容，通過這些內容向瀏覽者傳達一定的信息。
網頁和網站
網站就是由網頁組成的，網頁是構成網站的基本元素，是承載各種應用的平臺。一個網站如果沒有網頁，將是一個空站，如果只有域名和虛擬主機而沒有制作任何網頁的話，任何人都無法訪問網站。
網頁類型
網頁可以分為多種類型，但是由于分類方法不同，也會有不同的類型，根據是否使用了服務器技術，人們把網頁分為靜態網頁和動態網頁。
網頁構成
網頁內可以包含很多內容，如文本、圖像、動畫等內容，這些信息構成了網頁的基本內容，如圖1.4所示。實際上網頁包含的元素是很多的，有些元素可以直觀地看到，而有的元素可能看不到，只有通過代碼才能夠看到。
HTML是一種語言，全稱為Hypertext Markup Language，即超文本標識語言，是用于描述網頁文檔的一種工具。由HTML語言編寫的文檔，就是網頁文檔，這種文檔可以被網頁瀏覽器識別并解析，然后把網頁效果呈現出來。如果沒有瀏覽器的解析，我們所看到的網頁文檔由大量的HTML標簽和文本信息組成，
學習DIV結構
DIV是<div>標簽的習慣性稱呼，因為設計師主要使用<div>標簽構建網頁的結構，使用CSS設計網頁樣式，故把網頁設計簡稱為DIV+CSS布局。
在HTML文檔中，頁面會被劃分為很多區域，不同區域顯示不同的內容，如標題欄、廣告位、導航條、新聞列表、正文顯示區域、版權信息區域等。
學習CSS
有了網頁結構和內容，還需要CSS來美化。CSS是一種語言，與HTML一樣，是一種描述性語言，全稱Cascading Style Sheet，可譯為層疊樣式表或級聯樣式表，它定義如何顯示HTML標簽，用于控制網頁外觀布局和樣式設計。當網頁缺少CSS時，是非常丑陋的，也不適合閱讀和欣賞，
網頁設計的動態化和智能化是一種大趨勢，而如果要趕上這個趨勢，JavaScript是一種腳本語言，但是它包含編程語言的大部分特性和功能，掌握JavaScript編程，你就能夠駕馭網頁動態特效的設計，就能夠把網頁設計得更聰明、更富有人性化。
JavaScript在頁面特效中的應用
與HTML、CSS學習相比，JavaScript學習難度要大很多，當然一旦當你掌握了JavaScript，網頁設計水平會達到一個新的高度，此時自己就不是一個簡單的網頁設計師，而應該是一個前端開發工程師的高級技術師。
網頁設計任務
成功的設計作品一般都很藝術化。但藝術只是設計的手段，而并非設計的任務。設計的任務是要實現設計者的意圖，而并非創造美。
網頁設計的任務，是指設計者要表現的主題和實現的功能。站點的性質不同，設計的任務也不同。根據網站性質，可以把網頁設計任務分為3類：
資訊類網站，這類網站以內容為主，提供大量的信息，因此網頁設計就需要注意頁面的分割、結構的合理、頁面的優化、網頁的親和力等問題。
形象類網站，這類網站以宣傳為主，網站規模較小，頁面少，信息少，功能也較為簡單，網頁設計的主要任務是突出企業形象。因此對設計者的美工水平要求較高。
應用類網站，這類網站在設計上要求較高，網頁信息不求大而全，但是頁面設計追求簡潔、精致、大方，既要保證網站的可操作性，同時還要保證應用的靈活性，突出鮮明的應用特性。
網頁設計原則
網頁設計是有原則的，無論使用什么方法對網頁元素進行組合，都必須要遵循基本原則，
統一原則：就是指設計作品的整體性、一致性。設計作品的整體效果是至關重要的，在設計中切勿將各組成部分孤立分散，那樣會使畫面呈現出一種枝蔓紛雜的凌亂效果。
連貫原則：就是指要注意頁面的相互關系。設計中應利用各組成部分在內容上的內在聯系和表現形式上的相互呼應，并注意整個頁面設計風格的一致性，實現視覺上和心理上的連貫，使整個頁面設計的各個部分極為融洽，猶如一氣呵成。
分割原則：就是指將頁面分成若干小塊，小塊之間有視覺上的不同，這樣可以使觀者一目了然。在信息量很多時為使觀者能夠看清楚，就要注意到將畫面進行有效的分割。分割不僅是表現形式的需要。換個角度來講，分割也可以被視為對于頁面內容的一種分類歸納。
對比原則：就是通過矛盾和沖突，使設計更加富有生氣。對比手法很多，例如，多與少、曲與直、強與弱、長與短、粗與細、疏與密、虛與實、主與次、黑與白、動與靜、美與丑、聚與散等。在使用對比的時候應慎重，對比過強容易破壞美感，影響統一。
和諧原則：就是指整個頁面符合美的法則，渾然一體。如果一件設計作品僅僅是色彩、形狀、線條等的隨意混合，那么作品將不但沒有“生命感”，而且也根本無法實現視覺設計的傳達功能。和諧不僅要看結構形式，而且要看作品所形成的視覺效果能否與人的視覺感受形成一種溝通，產生心靈的共鳴。這是設計能否成功的關鍵。
【Web前端開發 】html+css前端零基礎入門教程 2022新 最全前端學習路線規劃含前端框架項目（資料含源碼+課件）_前端_編程入門_嗶哩嗶哩_bilibili
TML+CSS學完好久了，一直沒啥時間總結，現在總結了下學的過程：
之所以放在一起總結，是因為HTML和CSS沒有啥很多的編程邏輯，都是需要去記住并且熟練使用的，熟練使用是得去一個個敲過一遍。所謂的代碼量積累好像就是這么回事，只有多敲才能會。
小白用的嗶哩嗶哩上的教程視頻，因為個人學習方法的原因，都是跟著那教程去敲的，當然課后練習的話，都是自己先摸索敲了一遍在去看的講解，小白覺得這樣可以加深印象。
還有就是沒有熟練之前要天天的去練，哪怕一天半小時也好。因為一旦一天沒有練就會忘掉，還得回去找之前的筆記來看。（因為有事耽擱了兩三天沒去學，結果又重頭的看了一遍，血淋淋的學習效率教訓。不管怎樣，貴在堅持。）
當然，因為小白基礎是真的差，沒有什么教程是可以完完全全都講完的，使用小白看完了嗶哩嗶哩的教程又跑去了網易云課堂找了一份HTML+CSS的教程來看，為的是查漏補缺。
有一種播放叫做1.5倍播放。看的過程，別跟播放器里一倍的速度看，調成1.5倍或是2.0倍播放速度，因為那些東西，多數都是理解使用的。哪怕忘了，百度一下就可以直接搞定了。打基礎階段所以還是記住熟練使用才好。
HTML小白也就看了兩天吧，用了半天做了下練習；CSS對于零基礎的人來說建議12-15天，當然小白之前有過這些概念，所以用了五天多點的時間。JS才剛剛開始學，所以不知道時間怎么算才好。因為前端三大基石：HTML+CSS+JS，HTML+CSS學習所使用的時間占比才百分之五，剩下的百分之九十五都是JS的學習時間。
找課程時記住，找一兩個課程，一個全心去學，一個查漏補缺就好，別一會兒這個課程看一下，那個課程看一下的。這樣子反而會使自己心浮氣躁沒法靜下心來去學。打基礎的視頻教程，其實都一樣的，沒啥有特別好的特別壞的。
享 | 劉博（又拍云多媒體開發工程師）
又小拍：
如何實現HTML5直播技術是直播創業團隊一直想要攻克的難題。12月1日20:00，深度參與“又拍直播云”開發的工程師劉博就如何利用WebSocket+MSE實現HTML5直播在微信群里進行了分享。小拍馬不停蹄將劉博的分享內容整理成了文字，并插入一些PPT便于大家了解。全文整理如下：
下面就是分享內容啦~
當前為了滿足比較火熱的移動Web端直播需求，一系列的HTML5直播技術迅速的發展起來。
常見的可用于HTML5的直播技術有HLS、WebSocket與WebRTC。今天我向大家介紹WebSocket與MSE相關的技術要點，并在最后通過一個實例來展示具體用法。
分享大綱
⊙WebSocket協議介紹
⊙WebSocket Client/Server API介紹
⊙MSE介紹
⊙fMP4介紹
⊙Demo展示
WebSocket
通常的Web應用都是圍繞著HTTP的請求/響應模型構建的。所有的HTTP通信都通過客戶端來控制，由客戶端向服務器發出一個請求，服務器接收和處理完畢后再返回結果給客戶端，客戶端將數據展現出來。由于這種模式不能滿足實時應用需求，于是出現了SSE、Comet等 "服務器推" 的長連接技術。
WebSocket是基于TCP連接之上的通信協議，可以在單個TCP連接上進行全雙工的通信。WebSocket在2011年被IETF定為標準RFC 6455，并被RFC 7936補充規范，WebSocket API被W3C定為標準。
WebSocket是獨立地創建在TCP上的協議，HTTP協議中的那些概念都和WebSocket沒有關聯，唯一關聯的是使用HTTP協議的101狀態碼進行協議切換時，使用的TCP端口是80，可以繞過大多數防火墻的限制。
WebSocket握手
為了更方便地部署新協議，HTTP/1.1引入了Upgrade機制，使得客戶端和服務端之間可以借助已有的HTTP語法升級到其它協議。這個機制在RFC7230的6.7 Upgrade一節中有詳細描述。
要發起HTTP/1.1協議升級，客戶端必須在請求頭部中指定這兩個字段 ▽
Connection: Upgrade
Upgrade: protocol-name[/protocol-version]
如果服務端同意升級，那么需要這樣響應 ▽
HTTP/1.1 101 Switching Protocols
Connection: upgrade
Upgrade: protocol-name[/protocol-version]
[... data defined by new protocol ...]
可以看到，HTTP Upgrade響應的狀態碼是101，并且響應正文可以使用新協議定義的數據格式。
WebSocket握手就利用了這種HTTP Upgrade機制。一旦握手完成，后續數據傳輸直接在TCP上完成。
WebSocket JavaScript API
目前主流的瀏覽器提供了WebSocket的API接口，可以發送消息（文本或者二進制）給服務器，并且接收事件驅動的響應數據。
Step1. 檢查瀏覽器是否支持WebSocket
if(window.WebSocket) {
// WebSocket代碼
}
Step2. 建立連接
var ws = new WebSocket('ws://localhost:8327');
Step3. 注冊回調函數以及收發數據
分別注冊WebSocket對象的onopen、onclose、onerror以及onmessage回調函數。
通過ws.send()來進行發送數據，這里不僅可以發送字符串，也可以發送Blob或ArrayBuffer類型的數據。
如果接收的是二進制數據，需要將連接對象的格式設為blob或arraybuffer。
ws.binaryType = 'arraybuffer';
WebSocket Golang API
服務器端WebSocket庫我推薦使用Google自己的golang.org/x/net/websocket，可以非常方便的與net/http一起使用。也可以將WebSocket的handler function通過websocket.Handler轉換成http.Handler，這樣就可以跟net/http庫一起使用了。
然后通過websocket.Message.Receive來接收數據，通過websocket.Message.Send來發送數據。
具體代碼可以看下面的Demo部分。
MSE
在介紹MSE之前，我們先看看HTML5<audio>和<video>有哪些限制。
HTML5<audio>和<video>標簽的限制
不支持流
不支持DRM和加密
很難自定義控制, 以及保持跨瀏覽器的一致性
編解碼和封裝在不同瀏覽器支持不同
MSE是解決HTML5的流問題。
Media Source Extensions（MSE）是Chrome、Safari、Edge等主流瀏覽器支持的一個新的Web API。MSE是一個W3C標準，允許JavaScript動態構建<video>和<audio>的媒體流。它定義了對象，允許JavaScript傳輸媒體流片段到一個 HTMLMediaElement。
通過使用MSE，你可以動態地修改媒體流而不需要任何插件。這讓前端JavaScript可以做更多的事情—— 在JavaScript進行轉封裝、處理，甚至轉碼。
雖然MSE不能讓流直接傳輸到media tags上，但是MSE提供了構建跨瀏覽器播放器的核心技術，讓瀏覽器通過JavaScript API來推音視頻到media tags上。
Browser Support
通過caniuse來檢查是否瀏覽器支持情況。
通過MediaSource.isTypeSupported()可以進一步地檢查codec MIME類型是否支持。
fMP4
比較常用的視頻封裝格式有WebM和fMP4。
WebM和WebP是兩個姊妹項目，都是由Google贊助的。由于WebM是基于Matroska的容器格式，天生是流式的，很適合用在流媒體領域里。
下面著重介紹一下fMP4格式。
我們都知道MP4是由一系列的Boxes組成的。普通的MP4的是嵌套結構的，客戶端必須要從頭加載一個MP4文件，才能夠完整播放，不能從中間一段開始播放。
而fMP4由一系列的片段組成，如果服務器支持byte-range請求，那么，這些片段可以獨立的進行請求到客戶端進行播放，而不需要加載整個文件。
為了更加形象的說明這一點，下面我介紹幾個常用的分析MP4文件的工具。
gpac，原名mp4box，是一個媒體開發框架，在其源碼下有大量的媒體分析工具，可以使用testapps；
mp4box.js，是mp4box的Javascript版本；
bento4，一個專門用于MP4的分析工具；
mp4parser，在線MP4文件分析工具。
fragment mp4 VS non-fragment mp4
下面是一個fragment mp4文件通過mp4parser（http://mp4parser.com）分析后的截圖 ▽
下面是一個non-fragment mp4文件通過mp4parser分析后的截圖 ▽
我們可以看到non-fragment mp4的最頂層box類型非常少，而fragment mp4是由一段一段的moof+mdat組成的，它們已經包含了足夠的metadata信息與數據, 可以直接seek到這個位置開始播放。也就是說fMP4是一個流式的封裝格式，這樣更適合在網絡中進行流式傳輸，而不需要依賴文件頭的metadata。
Apple在WWDC 2016大會上宣布會在iOS 10、tvOS、macOS的HLS中支持fMP4，可見fMP4的前景非常的好。
值得一提的是，fMP4、CMAF、ISOBMFF其實都是類似的東西。
MSE JavaScript API
從高層次上看，MSE提供了
一套 JavaScript API 來構建 media streams
一個拼接和緩存模型
識別一些 byte 流類型：
WebM
ISO Base Media File Format
MPEG-2 Transport Streams
MSE內部結構
MSE本身的設計是不依賴任務特定的編解碼和容器格式的，但是不同的瀏覽器支持程度是不一樣的。
可以通過傳遞一個MIME類型的字符串到靜態方法：MediaSource.isTypeSupported來檢查。比如 ▽
MediaSource.isTypeSupported('audio/mp3'); // false
MediaSource.isTypeSupported('video/mp4'); // true
MediaSource.isTypeSupported('video/mp4; codecs="avc1.4D4028, mp4a.40.2"'); // true
獲取Codec MIME string的方法可以通過在線的mp4info（http://nickdesaulniers.github.io/mp4info），或者使用命令行mp4info test.mp4 | grep Codecs，可以得到類似如下結果 ▽
mp4info fmp4.mp4| grep Codec
Codecs String: mp4a.40.2
Codecs String: avc1.42E01E
當前，H.264 + AAC的MP4容器在所有的瀏覽器都支持。
普通的MP4文件是不能和MSE一起使用的, 需要將MP4進行fragment化。
檢查一個MP4是否已經fragment的方法 ▽
mp4dump test.mp4 | grep "\[m"
如果是non-fragment會顯示如下信息 ▽
mp4dump nfmp4.mp4 | grep "\[m"
[mdat] size=8+50873
[moov] size=8+7804
[mvhd] size=12+96
[mdia] size=8+3335
[mdhd] size=12+20
[minf] size=8+3250
[mdia] size=8+3975
[mdhd] size=12+20
[minf] size=8+3890
[mp4a] size=8+82
[meta] size=12+78
如果已經fragment，會顯示如下的類似信息 ▽
mp4dump fmp4.mp4 | grep "\[m" | head -n 30
[moov] size=8+1871
[mvhd] size=12+96
[mdia] size=8+312
[mdhd] size=12+20
[minf] size=8+219
[mp4a] size=8+67
[mdia] size=8+371
[mdhd] size=12+20
[minf] size=8+278
[mdia] size=8+248
[mdhd] size=12+20
[minf] size=8+156
[mdia] size=8+248
[mdhd] size=12+20
[minf] size=8+156
[mvex] size=8+144
[mehd] size=12+4
[moof] size=8+600
[mfhd] size=12+4
[mdat] size=8+138679
[moof] size=8+536
[mfhd] size=12+4
[mdat] size=8+24490
[moof] size=8+592
[mfhd] size=12+4
[mdat] size=8+14444
[moof] size=8+312
[mfhd] size=12+4
[mdat] size=8+1840
[moof] size=8+600
把一個non-fragment MP4轉換成fragment MP4。
可以使用FFmpeg的 -movflags來轉換。
對于原始文件為非MP4文件 ▽
ffmpeg -i trailer_1080p.mov -c:v copy -c:a copy -movflags frag_keyframe+empty_moov bunny_fragmented.mp4
對于原始文件已經是MP4文件 ▽
ffmpeg -i non_fragmented.mp4 -movflags frag_keyframe+empty_moov fragmented.mp4
或者使用mp4fragment ▽
mp4fragment input.mp4 output.mp4
DEMO TIME
劉博在分享的最后階段，展示了兩個demo，分別是MSE Vod Demo、MSE Live Demo
MSE Vod Demo
展示利用MSE和WebSocket實現一個點播服務
后端讀取一個fMP4文件，通過WebSocket發送給MSE，進行播放
MSE Live Demo
展示利用MSE和WebSocket實現一個直播服務
后端代理一條HTTP-FLV直播流，通過WebSocket發送給MSE，進行播放
前端MSE部分做了很多工作, 包括將flv實時轉封裝成了fMP4，這里引用了videojs-flow的實現
Q & A
Q1：對于沒有公網iIP的客戶如何通過RTMP協議推流？
A1：用戶客戶端進行RTMP推流，不需要公網IP，推到直播系統分配給你的地址就可以了。
Q2：MSE客戶端做很多東西，可以轉碼、解碼， 這個會有性能問題嗎？ 還有這個技術，目前有公司在大批量用嗎？
A2：目前該技術在實驗階段，轉封裝的話，對性能要求不高，我們在各自型號的手機上測試都沒有問題。目前除了微信內置瀏覽器對MSE支持不好，大部分瀏覽器對MSE支持都比較好。
Q3：沒做過相關內容，能簡單介紹一下HTTP-FLV么？
A3：HTTP-FLV就是將FLV流以HTTP長連接的形式分發出去，目前在各大直播平臺都用的比較多。大家可以關注下又拍云微信公眾賬號，之前專門有一篇文章介紹HTTP-FLV。
Q4：不大了解HTTP-FLV，既然是長時間的狀態性連接，為什么不用tcp／socket呢？
A5: FLV不能在<video>標簽直接播放，所以需要通過MSE轉封裝成MP4，再吐到<video>標簽進行播放。
Q5：嗶哩嗶哩H5播放器是基于WebSocket與MSE技術實現的嘛？
A5：B站開源的flv.js是一個非常好的項目，是基于 MSE 實現的，實時性做的也比較好，B 站自己已經在網站播放器上使用了。
Q6：VLC器播放和網頁播放，哪個快啊？
A6：播放器端延時，一個重要指標是播放器的緩存區大小。VLC的默認緩存區比較大，所以，VLC通常延時會大一些。
Q7：可以介紹下秒開技術么，以及秒開的原理？
A7：秒開可以在服務器端多緩存一個GoP來實現，這樣播放器請求的第一幀能保證是I幀，可以立即播放，以此達到秒開的效果.
Refs
WebSocket
rfc6455
HTTP Upgrade
WebSocket API
MDN WebSocket
videojs-flow
MSE
W3C
MDN MSE
HTML5 Codec MIME
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
