整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
随着互联网技术的不断发展和普及，网络与现实生活的结合越来越紧密，网站代表了企业和个人的形象，网页如同个人的社交名片，不可或缺。越来越多的人开始学习和制作网页，更多的企业和个人把自己的“家”搬到网上。
应该说，设计精美的页面效果，需要用户掌握一定的技术，了解相关的知识，初步积累网页设计素养，同时还应该熟悉网站开发的流程。
熟悉网页设计概念
网站是互联网上一个信息小站，网页是互联网上显示的信息页面，如果说网站是一本书，那么网页就是生活中的一页书，是展示信息的最小单元。在网页中包含文字、图像、多媒体等内容，通过这些内容向浏览者传达一定的信息。
网页和网站
网站就是由网页组成的，网页是构成网站的基本元素，是承载各种应用的平台。一个网站如果没有网页，将是一个空站，如果只有域名和虚拟主机而没有制作任何网页的话，任何人都无法访问网站。
网页类型
网页可以分为多种类型，但是由于分类方法不同，也会有不同的类型，根据是否使用了服务器技术，人们把网页分为静态网页和动态网页。
网页构成
网页内可以包含很多内容，如文本、图像、动画等内容，这些信息构成了网页的基本内容，如图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小时内与您取得联系。
