01 . 前端之HTML

初识前端

HTML简介历史

HTML(Hyper Text Markup Language)超文本标记语言，它不同于编程语言

超文本就是超过纯文本的范畴，例如描述文本的颜色、大小、字体等信息，或使用图片、音频、视频等非文本内容.

超文本需要显示，就得有软件能呈现超文本定义的排版格式，例如显示图片、表格、显示字体的大小、颜色、这个软件就是浏览器.

超文本的诞生是为了解决纯文本不能格式显示的问题，是为了好看，但是只有通过网络才能分享超文本的内容，所以制定了HTTP协议.

浏览器历史及技术

历史

1980年代，Tim Berners-Lee为CERN（欧洲核研究中心，当时欧洲最大的互联网节点）设计基于超文本思想的ENQUIRE项目，以促进科研人员的信息共享和更新，1989年他编写了《信息化管理：建议》一文，并构建基于Internet的Hypertext系统，并在CERN开发了World Wide Web项目，打造了世界上第一个网站，于1991年8月6日正式上线.

Tim Berners-Lee于1990年发明了第一个浏览器，还发明了HTTP协议.

1994年他创建了W3C,W3C万维网联盟，负责万维网持续发展，他提出W3C的标准应该基于无专利权，无版税.

Marc Andress ssen于1998年发明了Mosaic浏览器，看到了这个技术的前景，不久后他成立自己的公司——网景

Netscape,1994年发布了Netscape Navigator浏览器，席卷全球.

1995年微软发布IE,开启第一次浏览器大战，最终后来居上.

由于IE的捆绑销售行为，网景的单一浏览器市场萎缩，从1990年代的90%下降至2006年的1%.

1999年网景被AOL收购，收购后不就，Netscape公开了浏览器代码，并创建了Mozilla组织。Mozilla组织使用Gecko引擎重写浏览器。

Mozilla组织使用Gecko引擎发布了几款浏览器，最终于2004年更名为Firefox浏览器.

2003年5月，网景被解散.

AOL于2007年12月宣布停止支持Netscape浏览器.

Apple的Safari于2003年发布第一个测试版.

2008年的Google的Chrome浏览器带着V8引擎横空出世.

网景公司的技术

HTTP Cookie,解决HTTP无状态

JavaScript

SSL协议

JAR格式文件，将Java的class文件打包压缩，并加上签名.

2012年4月9日，微软以10亿千六百万美元购买800项美国在线的专利或专利授权，专家认为网景的SSL,Cookie等专利可能是微软愿意出高价的理由之一.

浏览器技术

浏览器是一种特殊的客户端，能够基于HTTP(s)、FTP等协议和WEB服务器进行交互，呈现网页内容的软件.

可以简单的认为浏览器软件分为2个部分:

外壳

外壳提供用户交互的界面

内核（引擎Engine）

提供HTML、CSS、图像的渲染引擎，提供DOM编程接口

提供JavaScript引擎

提供浏览器内建对象.

排版（渲染）引擎	浏览器	说明
Gecko	Firefox	C++开发并最早开源，可以支持复杂的网页效果，提供强大的浏览器扩展接口
Trident	IE,AOL	早期未按W3C标准实现，兼容性很差，IE9之后内核升级已符合标准
KHTML		KDE于1998年开发
Presto	Opera	目前公认的网页浏览器速度最快的内核，但牺牲一部分兼容性
WebKit	Safari、Chrome	WebKit基于KHTML开发，网页浏览器速度较快，但网页容错性不高
Blink	Chrome、Opera	基于WebKit WebCore

其他国内浏览器，一般都是采用以上的一个或两个内核加上外壳实现.

JS引擎

不同浏览器内核中使用不同的JS引擎，常见的JS引擎有JScript、TraceMonkey(Firefox),V8等.这些引擎差异不小，实现ECMA标准不同，甚至有不按标准实现的.

使用JQuery等框架来解决兼容性问题，抹平平台差异.

JavaScript

JavaScript简称JS，是一种动态的弱类型脚本解释性语言，和HTML、CSS并称为三大WEB核心技术，得到了几乎所有主流浏览器支持.

1994年，网景Netscape公司成立并发布了Netscape Navigator浏览器，占据了很大的市场份额，网景意识到WEB需要动态，需要一种技术来实现.

1995年9月网景浏览器发布测试版本LiveScript，随即在12月的测试版更名为JavaScript，同时期，微软推出IE并支持Jscript,VBScript,与之抗衡.

1997年，网景、微软、SUN、Borland公司和其他组织在ECMA确定了ECMAScript语言标准，js就成为ECMAScript标准的实现之一.

ES,ECMAScript是有ECMA国际(前身为欧洲计算机制造商协会，英文名称为European Computer Manufactures Association)通过ECM-262标准化的脚本程序设计语言。该语言被广泛的应用于互联网.

JavaScript是商品名，目前商标权在Oracle公司手中，ES是标准名.

根据ES标准，有很多实现引擎，其中包括JavaScript或JScript，他们都是ECMA-262标准的实现和扩展.

为什么之前浏览器兼容是个大问题?

HTML、CSS、JS技术都在发展，标准版本很多，浏览器内嵌的引擎实现不太一致，甚至有不按标准实现，或减少实现，或改变实现，或增加功能的实现，比如IE,这就导致了开发人员负担，很难做到一套代码可以兼容地跑在多种浏览器中，甚至都不能跑在同一种浏览器的不同版本中.

1997年，制定首个版本ECMA-262.

1999年2月，ES 3,支持更强大的正则表达式等.

ES4太激进，最终放弃

2009年，ES5发布，得到广泛支持，支持严格模式，支持Json

2015年，ES6发布，引入非常多的新的语言特性，还兼容旧版本特性，ES6之前按照版本号命名，从ES6开始使用年份作为版本号，ES6即ECMAScript 2015.

V8引擎

就在浏览器市场一家独大的时候，Firefox,Chrome异军突起.

2008年9月2日，Google的chrome浏览器发布，一并发布的js引擎，就是v8引擎，v8使用BSD协议开源.

V8引擎使用C++开发，将JavaScript编译成了机器码，而不是字节码，还用很多优化方法提高性能，因此V8引擎速度非常快.

V8引擎还可以独立运行，可以嵌入到其他任何C++程序中.

V8引擎的诞生，使得服务器端运行JS成为了可能且方便的事情.

2009年，基于V8引擎，诞生了Nodejs,这是服务端运行JS的运行环境.

CSS(Cascading Style Sheets)层叠样式表

负责以什么样的样式展示网页内容，比如字体大小颜色，背景图片和内容放在什么位置

HTML本身为了格式化显示文本，但是当网页呈现大家勉强的时候，需求HTML提供更多样式能力，这使得HTML变的越来越臃肿，这促进了CSS的诞生.

1994年，W3C成立，CSS设计小组所有成员加入W3C，并努力研发CSS的标准，微软最终加入.

维护HTML和CSS标准的组织是万维网联盟(W3C)

1996年12月发布CSS1.0

1998年5月发布CSS2.0

CSS 3采用了模块化思想，每个模块都在CSS2基础上分别增强功能，所以这些模块是陆续发布的.

不同厂家的浏览器使用的引擎，对CSS的支持不一样，导致网页布局，样式在不同浏览器不一样，因此想要保证不同用户使用不同浏览器看到的网页效果一致非常困难.

动态网页技术

负责用户和网页内容的交互，让网页内容动起来

JS的引入使得浏览器可以显示动态的效果，但这不是动态网页.

发明WEB技术的初衷是为了分享文档，这些内容是静态的，就是写好不变的文件，通过URL定位到这些文档，下载到浏览器，由浏览器呈现.

互联网发展，网民的需求增加，大家希望提供交互式访问，用户提交需求，服务端找到需求匹配的资源并发回浏览器端展示，就是动态网页.

动态网页指的是网页的内容是动态的，URL不变，里面的内容变化，例如访问一个查询页面，提交的关键字不同，下面表格的内容变化.

动态网页，表现的是浏览器端内容的变化，本质上他是一种服务端动态网页技术.

最早诞生的动态网页技术有ASP,JSP,PHP等，后来几乎所有流行的高级语言都提供了开发动态网页的能力.

网页布局

早期的网页只需要做标题，使用
标签分段.

后来有人大量使用表格标签，可以做到很好的内容布局，也出现结构化的布局方案，但随着页面内容的堆积，出现了成百上千个表格嵌套的情况，浏览器绘制很慢.

后来出现了Div + CSS布局风格，舍弃了表格，加上JS，使得前后端开发分离，而且可以做到很好的自适应布局，例如流式瀑布一样的布局.

同步

早期，网页就是一页页的文本，没什么图片，样式.

后来，互联网时代到来，网页内容越拉越大.

浏览器渲染HTML，需要先下载CSS加载好渲染网页，之后，下载网页内容，并逐步渲染，还要构建DOM树，加载JS脚本并执行，JS可能需要修改DOM，网页就要重新渲染.

如果JS放在网页HEAD中，还需要等待JS下载并加载.

图片使用标签，是发起新的请求的，如果图片返回，需要绘制网页.

好不容易，一张网页绘制完毕，用户提交了请求就是想看到查询结果，服务器响应到来后是一个全新的网页内容，哪怕URL不变，整个网页都需要重新渲染，例如，用户填写注册信息，只是2次密码不一致，提交后，整个注册页面重新刷新，所有填写项目重新填写(当然有办法让用户减少重填),这种交互非常不友好.

从代价的角度来看，就是为了注册的一点点信息，结果返回了整个网页内容，不但浪费了网络宽带，还需要浏览器重新渲染网页，太浪费资源了.

上面这些请求的过程，就是同步过程，用户发起请求，页面整个刷新，直到服务器端响应的数据到来并重新渲染.

异步

1996年微软实现了iframe标签，可以在一个网页使用iframe标签局部异步加载内容.

1996年微软退出异步数据传输的ActiveX插件技术，太笨重了，但是也火了很多年，有一个组件XMLHttpRequest被大多数浏览器支持.

AJAX即"AsynchronousJavascript And XML"(异步JavaScript和XML)，使用XMLHttpRequests组件，结合JS,数据格式采用XML（可扩展标记语言），将这三者结合，实现网页的异步请求，AJAX是一种技术的组合，技术的重新发现，而不是发明，但是他深渊的影响了整个WEB开发。

2005年，google在Gmail和地图中应用Ajax,使他大受欢迎并推广开来.

有了异步请求，就可以动态的从浏览器发起请求到服务端，服务端返回响应的数据封装成XML（JSON）返回给浏览器，浏览器只需要使用JS把内容加入到DOM中，局部渲染就可以了，这个过程中，整个网页不用重新刷新，只需要局部动态改变即可.

前端开发

早期前端开发使用网页三剑客: Dreamweaver,Firework,Flash,微软的有Frontpage.

不管使用什么工具，都不能改变JS兼容、CSS兼容、浏览器版本兼容非常头疼.

2006年JQuery库，出现了JS框架，抹平了平台差异，给予他产生了众多的插件，前端开发终于轻松了些.

2008年V8引擎伴随着Chrome浏览器发布

2009年ES5标准发布

2009年Nodejs发布，服务端也可以使用JavaScript了

2009年Angularjs诞生,之后被谷歌收购.

2010年Backbone.js诞生.

2011年React和Ember诞生，React于2013年5月开源.

2014年国人尤雨溪的Vue.js诞生.

2014年HTMLS标准发布.

前端工具和框架越来越多，前端开发也不失随便使用什么文本编辑器就可以完成的了，如果使用框架，需要很多工具的配合，配置好一个开发环境非常重要.

硬件发展

最初，网页就是简单的文本，计算机轻松胜任.

后来，网页对多媒体的支持，动态效果的支持，都需要使用大量的CPU，内存资源，甚至是显卡的渲染能力.

所以，个人PC需要不断升级，否则浏览网页很困难.

移动互联网到来早期，手机看的网页需要单独处理.

手机屏幕小、CPU弱、内存小、能看的网页纯文本加小图，这样产生的流量也小，2G时代也谈不上网速.

2007年第一代iPhone诞生，2008年安卓手机诞生，3G的移动互联网时代到来了.

手机硬件水平不断提升，手机的开发平台可以让众多开发者开发APP，用户可以下载安装使用这些APP.

对于开发者来说，开发就是个问题了，是不是需要开发一套IPhone版本，在开发一套安卓，再开发一套网页的版本尼?

2013年，中国进入4G时代，手机硬件水平也得到了了很大的提升.

众多平台都在思考是否能够以一套架构，解决所有前端问题，使用的技术还是最通用的网页+JS.

如今的前端开发已经不是以前的几个JS文件、几百行代码了，为了适应需求，新框架，新编程模式不断涌现，这些工具大大方便了协作开发，同时解决平台兼容性问题.

HTML基本介绍

HTML大体结构

HTML由一个个标签组成，这些标签各司其职，有的提供网页信息，有的负责图片，有的负责网页布局.

Example1

<!DOCTYPE html>

<!-- 这是一段注释，

注释不能够嵌套 -->

<html lang="en">   <!-- 此标签只能有一个 -->

<head>

<meta charset="UTF   -8">

<title>Title</title>  <!-- 此处的Title为打开某网页，浏览器标签的标头 -->

</head>	<!-- head有开始也有闭合 -->

<body>

<a href="http://www.baidu.com">百度一下</a>

</body>

</html> 

<!-- 1. <!DOCTYPE html>声明为HTML5文档. -->

<!-- 2. <html></html>是文档的开始标记和结束的标记,是HTML页面的根元,在它们之间是文档的头部(head)和主体(body)  -->

<!-- 3. <head>、</head>定义了HTML文档的开头部分,它们之间的内容不会在浏览器的文档窗口显示. 包含了文档的元（meta）数据  -->

<!-- 4. <title>、</title>定义了网页标题，在浏览器标题栏显示。  -->

<!-- 5. <body>、</body>之间的文本是可见的网页主体内容。 -->

标签分类

从书写方式分为

# 1. 自闭合标签(link,meta,pycharm输入没有对称补全的)

# (只有一个大于号和小于号组成，后面的反斜线可以有可以没有，建议都有)

 <meta charset="UTF-8>  

# 2. 主动闭合标签

# (主动闭合标签都是成对出现的，并且后面的必须加反斜线/.以表名此标签内容结束)

从元素(标签)在页面所占据的位置空间来分,可分为

# 1. 块级标签

# 在整个页面里，无论自己内容的多少，自己都会独占一行

# p标签段落和段落之间有间距，h标签加大加粗,div虽然是块级标签.但是类似span白板标签。  

# 2. 内联标签(行内标签)，不独占一行，只占据自己宽度大小的空间.

# 比如span不带有其他属性，因为类似白板标签，通过css可以变成几乎任何标签.  

# 标签之间可以嵌套，由此会出现父子级关系.

# 标签存在的意义,定位操作及css.js操作.

Example1

import socket

server = socket.socket()

server.bind(('127.0.0.1',8001))

server.listen(1024)

while 1:

    conn,addr = server.accept()

    from_browser_msg = conn.recv(1024).decode('utf-8')

    print(from_browser_msg)

    # conn.send(b'hello')

    conn.send(b'HTTP/1.1 200 ok\r\n\r\n')

    with open('Day11/test1.html','rb') as f:

        data = f.read()

    conn.send(data)

    conn.close()

<!DOCTYPE html>

<html lang="en">

<!-- 这是一段注释，注释不能够嵌套 -->

<head>

    <meta charset="UTF-8">

    <title>YouMen</title>

</head>

<body>

    <a href="http://www.baidu.com">百度一下</a>

    <h1 style='background-color:Violet;'>@@@@@<h1>

</body>

</html>

常用标签

head

标签	意义
	定义网页标题
	定义内部样式表
	定义JS代码或引入外部JS文件
	引入外部样式表文件
	定义网页原信息

Body

基本标签

<!-- 不加标签的纯文字也是可以在body中写的 -->

<b>加粗</b>

<i>斜体</i>

<u>下划线</u>

<s>删除</s>

<p>段落标签</p>

<!-- 默认一行文本是不换行的,p标签可以让文本成为一个段落，但是有间距 -->

<h1>标题1</h1>

<h2>标题2</h2>

<h3>标题3</h3>

<h4>标题4</h4>

<h5>标题5</h5>

<h6>标题6</h6>

<!--换行-->

<br>

<!-- br标签让一行文本换行，成为一个段落，但是不会有间距 -->

<hr>

<!-- 就是单独个一个水平线 -->

<!-- 每次加上一些内容，别忘了刷新一下页面，才能看到新添加的效果或者内容，其实上面这些标签很少用 -->

特殊字符

<body>

    <a href="http://www.baidu.com">You&nbsp&lta&gt&nbspMen</a>

    <!-- &nbsp让html解释为一个空格,gt,lt为<>-->

</body>

更多符号请看http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

div,span

白板，可以嵌套

a标签

a标签: 一般做跳转《a href="" target=》，但是不能提交数据库,还可以做锚

锚 : href="#某个标签的ID" 标签ID不要重复

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<a>第三章</a>

<a href="#i4">第四章</a>

<a>第五章</a>

<div style="height: 600px;">第一张内容</div>

<div style="height: 600px;">第二张内容</div>

<div style="height: 600px;">第三张内容</div>

<div id="i4" style="height: 600px;">第四张内容</div>

</body>

</html>

img标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <a href="http://www.baidu.com">

    <img src="1.jpg" title="大美女" style="height: 200px;width: 200px;" alt="美女" >

    <!-- title为鼠标停留在哪里一段时间的文本信息,alt为找不到图片显示的信息d -->

    </a>

</body>

</html>

list标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <ul>

        <li>YouMen</li>

        <li>YouMen</li>

        <li>YouMen</li>

    </ul>

    <ol>

        <li>YouMen</li>

        <li>YouMen</li>

        <li>YouMen</li>

    </ol>

    <dl>

        <li>YouMen</li>

        <li>YouMen</li>

        <li>YouMen</li>

    </dl>

</body>

</html>

table标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<table border="1" cellpadding="10">

    <thead>

    <tr>

        <td>第一行，第一列</td>

        <td>第一行，第二列</td>

        <td>第一行，第三列</td>

    </tr>

    <tr>

        <td>第二行，第一列</td>

        <td>第二行，第二列</td>

        <td>第二行，第三列</td>

    </tr>

    </thead>

    <table border="1" cellpadding="10" cellspacing="20">

        <thead>

        <tr>

            <td>主机名</td>

            <td>端口</td>

            <td>操作</td>

        </tr>

        </thead>

        <tbody>

        <tr>

            <td>1.1.1.1</td>

            <td>80</td>

            <td>

                <a href="test5.html">查看详细</a>

                <a href="#">修改</a>

            </td>

        </tr>

        <tr>

            <td>1.1.1.1</td>

            <td>80</td>

            <td>第二行,第三列</td>

        </tr>

        </tbody>

    </table>

</table>

</body>

</html>

合并单元格

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<table border="1">

    <thead>

    <tr>

        <th>表头1</th>

        <th>表头2</th>

        <th>表头3</th>

    </tr>

    </thead>

    <tbody>

        <tr>

            <td>1</td>

            <td colspan="2">2</td>

            <!-- 表示横向合并2格 -->

        </tr>

        <tr>

            <td rowspan="2">4</td>

            <!-- 表示纵向合并2格 -->

            <td>5</td>

            <td>6</td>

        </tr>

        <tr>

            <td>7</td>

            <td>8</td>

        </tr>

    </tbody>

</table>

</body>

</html>

input(form)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>input</title>

</head>

<body>

    <form action="http://localhost:8080/index" mothod="POST">

<!-- action提交到什么位置,GET会放到URL发过去，POST只会放到内容里面 -->

    <input type="text" />

    <input type="password" />

    <input type="button" value="登录">

    <input type="submit" value="登录2">	# 只有submit才能提交，button默认没什么用.

    </form>	#将按钮什么都会提交当前表单，

</body>

</html>

input系列

# input type='text'		- name属性

# input type='password'	- name

# input type='submit'		- value='提交'  提交按钮，提交表单

# input type='button'		- value='登录' 按钮

# 表单里面只有input和select能提交到后台

# input如果要想后台获取到前端指定数据记得加上name

Example2

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <form action="https://www.sogou.com/web">

        <input type="text" name="query">

        <input type="submit" value="搜索">

    </form>

</body>

</html>

此处只要一点搜索就会提交表单到指定的action地址.

Example3

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <form enctype="multipart/form-data">

        <div>

            <select name="city" size="3" multiple="multiple">

                <!-- multiple 按住ctrl多选 -->

                <option value="1" selected="selected">北京</option>

                <option value="2">上海</option>

                <option value="3">广州</option>

            </select>

            <!-- 下拉框,后台通过name获取,默认通过selected="selected"选择 -->

            <!-- 要想多选的话,通过multiple就可以多选了,size显示多个选项 -->

            <!-- 如果要实现什么地区，什么市那种连级选择通过optgroup来做 -->

            <p>请选择性别</p>

            男: <input type="radio" name="gender" value="1" />

            女: <input type="radio" name="gender" value="2" />

            <!-- input type="radio" 单选框 -->

            <p>爱好</p>

            篮球: <input type="checkbox" name="favor" value="1" />

            足球: <input type="checkbox" name="favar" value="2" checked="checked" />

            台球: <input type="checkbox" name="favar" value="3" />

            网球: <input type="checkbox" name="favar" value="4" />

            <!-- <input type="checkbox"> 多选 -->

            <!-- checked="checked" 默认被选上 -->

            <p>技能</p>

            撩妹: <input type="checkbox" />

            写代码: <input type="checkbox" />

            <p>上传文件</p>

            <input type="file" name="fname" />

            <!-- 上传文件,后台通过fname拿到文件，

            但是需要在form表单加入一个属性,

            enctype="multipart/form-data" 表示将你的文件一点点上传到服务器-->

        </div>

        <textarea name="meno" >YouMen</textarea>

        <!-- 多行文本,后台可以通过meno获取,默认值放中间 -->

        <input type="submit" value="提交">

        <input type="reset" value="重置">

        <!-- 将已勾选的选项还原最初 -->

    </form>

</body>

</html>

# input ytpe='radio'   - 单选框 value,checked="checked", name属性(name相同则互斥)

 # input type='checkbox' - 复选框 value,checked="checked",name属性(批量获取数据)

 # input type='file'	- 依赖form表单的一个属性 enctype="multipart/form-data"

 # input type='rest'	- 重置

 # input type="date"

 # input type="hidden"  - 隐藏的

 # input type=""

 # textarea，文本框默认值</textarea>  - name属性

 # select标签:  - name，内部option,value提交后台,size下拉框多少选项

 # multiple多选,selected默认，optgroup分组.

# input属性说明

# name: 表单提交时的"键",注意和id的区别

# value: 表单提交时的对应项的值

	# type = "button","reset","submit"为按钮上显示的文本内容

    # type = "text","password"

lable fieldse

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <!-- 一般结合着input用 -->

    <!-- label用于点击文件，使得关联标签获取光标 -->

    <label for="username">用户名</label>

    <input id="username" type="text" name="user" />

    <textarea name="text_1" cols="30" rows="10"></textarea>

</body>

</html>

fieldset

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<fieldset style="color: aqua;">

    <legend style="color: aqua">登录</legend>

        <label for="username">用户名</label>

        <input id="username" type="text" name="user">

        <br/>

        <label for="pwd">密码</label>

        <input id="pwd" type="text" name="user">

</fieldset>

</body>

</html>

下面内容如果没有css,js基础建议先看后面的css,js

HTML5新特性

依赖于javascript知识的理解

Audio(音频)

HTML5提供了播放音频文件的标准

control(控制器)

control属性供添加播放,暂停和音量控件

标签

<audio> 定义声音

<source> 规定多媒体资源,可以是多个.

<!-- 属性

width: 宽

height: 高    -->

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>播放音频</title>

</head>

<body>

<button onclick="clickA()">播放/暂停</button>

<button onclick="clickBig()">放大</button>

<button onclick="clickSmall">缩小</button>

<audio id="audio" width="500px" height="500px">

    <source src="1.mp3">

    <source src="1.ogg">

    你的浏览器不支持

</audio>

<script>

    var a = document.getElementById("audio");

    function clickA() {

        if (a.paused) {

            a.play();

        } else {

            a.pause();

        }

    }

    function clickBig() {

        v.width = 800;

        v.height = 800;

    }

    function clickSmall() {

        v.width = 300;

        v.height = 300;

    }

</script>

</body>

</html>

编解码工具

不同浏览器支持的编码可能不一样

我们可以自己准备一个编码工具FFmpeg

www.ffmpeg.org

转码操作

sudo ffmpeg -i 1.mp3 -acodec libvorbis 1.ogg

HTML5拖放

HTML5拖放

拖放(Drag和drop)是HTML5标准的组成部分

拖动开始

ondragstart: 调用了一个函数,drag(event),它规定了被拖动的数据

设置拖动数据

setDate() 设置被拖数据的数据类型和值

放入位置

ondragover 事件规定在何处处置被拖动的数据

放置

ondrop 当放置被拖数据时,会发生drop事件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>拖放</title>

    <style>

        .box {

            width: 400px;

            height: 400px;

        }

        #box1 {

            float: left;

            background-color: #7e55ff;

        }

        #box2 {

            float: left;

            background-color: #FF0000;

        }

    </style>

</head>

<body>

<div id="box1" class="box"></div>

<div id="box2" class="box"></div>

<img id="img1" src="../Project_Demo/1.jpg">

<div id="msg"></div>

<script>

    var box1Div, box2Div, msgDiv, img1;

    window.onload = function () {

        box1Div = document.getElementById("box1");

        box2Div=document.getElementById("box2")

        msgDiv = document.getElementById("msg");

        img1 = document.getElementById("img1");

        box1Div.ondragover = function (e) {

            e.preventDefault();

        }

        box2Div.ondragover = function (e) {

            e.preventDefault();

        }

        img1.ondragstart = function (e) {

            e.dataTransfer.setData("imgId", "img1");

        }

        box1Div.ondrop = dropImghandler;

        box2Div.ondrop = dropImghandler;

    }

    function dropImghandler(e) {

        showObj(e.dataTransfer);

        e.preventDefault();

        var img = document.getElementById(e.dataTransfer.getData("imgId"));

        e.target.appendChild(img);

    }

    function showObj(obj) {

        var s = "";

        for (var k in obj) {

            s += k + ":" + obj[k] + "<br/>"

        }

        msgDiv.innerHTML = s;

    }

</script>

</body>

</html>

数据拖放

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        #imgContainer {

            background-color: darkgray;

            width: 500px;

            height: 500px;

        }

    </style>

</head>

<body>

<div id="imgContainer"></div>

<div id="msg"></div>

<script>

    var imgContainer, msgDiv;

    window.onload = function () {

        imgContainer = document.getElementById("imgContainer");

        msgDiv = document.getElementById("msg");

        imgContainer.ondragover = function (e) {

            e.preventDefault();

        }

        imgContainer.ondrop = function (e) {

            e.preventDefault();

            var f = e.dataTransfer.files[0];

            var fileReader = new FileReader();

            fileReader.onload = function (e) {

                showObj(e.target);

                imgContainer.innerHTML = "<img src=\"" + fileReader.result + "\">"

            }

            fileReader.readAsDataURL(f);

        }

    }

    function showObj(obj) {

        var s = "";

        for (var k in obj) {

            s += k + ":" + obj[k] + "<br/>"

        }

        msgDiv.innerHTML = s;

    }

</script>

</body>

</html>

Canvas标签

创建Canvas标签

HTML5 Canvas 元素用于图形的绘制,通过脚本(通常是JavaScript)来完成canvas标签只是图形容器,你必须使用脚本来绘制图形,你可以通过多种方法使用Canva绘制路径,盒,圆,字符以及添加图像.

绘制图形:

canvas元素本身是没有绘图能力的,所有的绘制工作必须在JavaScript内部完成.

https://developer.mozilla.org/zh-CN/docs/Web/API

EASELJS

SVG

SVG指可伸缩矢量图形(Scalable Vector Graphics)

SVG用来定义网络的基于矢量的图形

SVG使用XML格式定义图形

SVG图像在放大或改变尺寸的情况下其图形质量不会有损失

SVG是万维网联盟的标准

SVG的优势:

SVG图像可通过文本编辑器来创建和修改

SVG图像可被搜索，索引，脚本化或被亚索

SVG是可伸缩的

SVG图像可在任何的分辨率下被高质量地打印

SVG可在图像质量不下降的情况下被放大.

HTML的WEB存储

两种方式

localStorage- 没有时间限制的数据存储

sessionStorage 针对一个session的数据存储

与cookie作对比

之前这些都是由cookie完成的，但是cookie不适合大量数据的存储，因为他们由每个对服务器的请求来传递，这使得cookie速度很慢而且效率不高.

WebWorker

WebWorker是运行在后台的JavaScript，独立于其他脚本，不会影响页面的性能.

服务器推送事件

及时更新浏览器的内容

服务器推送事件(Server-sent Events)是HTML5规范中的一个组成部分，可以用来从服务端推送数据到浏览器端.

传统的服务器端推送技术

WebSocket: WebSocket规范是HTML5重点　一个重要组成部分，已经被很多主流浏览器所支持，也有不少基于WebSocket开发的应用，正如名称所表示的一样,WebSocket使用的是套接字链接，基于TCP协议，使用WebSocket之后，实际上在服务器端额浏览器之间建立一个套接字连接，可以进行双向的数据传输,WebSocket的功能是很强大的，使用起来也灵活，可以使用不同的场景，不过WebSocket技术比较复杂，包括服务器端和浏览器端的实线都不同于一般的Web应用．

HTTP协议: 简易轮询, 即浏览器端定时向服务器端发出请求，来查询是否有数据更新，这种做法比较简单，可以在一定程度上解决问题，不过对于轮询的时间间隔需要进行仔细考虑，轮训的间隔过长，会导致用户不会及时接受更新的数据，轮训的间隔过短，会导致查询请求过多，增加服务器端的负担.

响应式布局

响应式布局介绍

响应式布局是2015年５月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端---而不是为每个终端做一个特定的版本，这个概念是为解决移动互联网浏览而诞生的.

优点:

# 1. 面对不同分辨率设备灵活性强

# 2. 能够快捷解决多设备显示适应问题

缺点

# 兼容各种设备工作量大，效率低下

# 代码累赘，会出现隐藏的元素，加载时间加长.

响应式布局的基本实现

CSS中的Media Query(媒介查询)

设备宽高: device-width,device-height

渲染窗口的宽和高: width,height

设备的手持方向: orientatiion

设备的分辨率: resolution

使用方法:

外联

内嵌样式

BootStrap

响应式布局的实例