1、基础知识学习
HTML5 JS CSS http://www.w3school.com.cn/
VUE https://cn.vuejs.org/v2/guide/ 官网上面看完基础部分就可以
2、开发工具
Webstrorm vue开发工具
IDEA STS 服务端开发工具
Android Studio , Eclipse Android开发工具
1.什么是HTML5?
HTML5将成为 HTML、XHTML 以及 HTML DOM 的新标准。增加了一些新特性新功能等。
为 HTML5 建立的一些规则:
新特性应该基于 HTML、CSS、DOM 以及 JavaScript。
减少对外部插件的需求(比如 Flash)
更优秀的错误处理
更多取代脚本的标记
HTML5 应该独立于设备
开发进程应对公众透明
基础学习:
1.《video》
video 元素支持三种视频格式:Ogg、MPEG4(mp4)、WebM。
controls 属性供添加播放、暂停和音量控件。
<video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的:
<video width="320" height="240" controls="controls">
<source src="/i/movie.ogg" type="video/ogg">
<source src="/i/movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
HTML5 <video> 元素同样拥有方法、属性和事件。
其中的方法用于播放、暂停以及加载等。其中的属性(比如时长、音量等)可以被读取或设置。其中的DOM 事件能够通知您,比方说,<video> 元素开始播放、已暂停,已停止,等等。
<video> 标签的属性
autoplay如果出现该属性,则视频在就绪后马上播放。
controls如果出现该属性,则向用户显示控件,比如播放按钮。
height设置视频播放器的高度。
loop如果出现该属性,则当媒介文件完成播放后再次开始播放。
preload如果出现该属性,则视频在页面加载时进行加载,并预备播放。
如果使用 "autoplay",则忽略该属性。
src要播放的视频的 URL。
width设置视频播放器的宽度。
2.《audio》
audio 元素支持三种音频格式:Ogg 、MP3、Wav。
control 属性供添加播放、暂停和音量控件。
<audio> 与 </audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的
属性:autoplay、controls、loop、src、preload同上video
<audio controls="controls">
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
3.《拖放Drag 和 drop》
<style type="text/css">
#div1, #div2
{float:left; width:198px; height:66px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
//dataTransfer.setData() 方法设置被拖数据的数据类型和值:
}
function drop(ev)
{
ev.preventDefault();//阻止对元素的默认处理方式
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
//调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)
//通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
//被拖数据是被拖元素的 id ("drag1")
//把被拖元素追加到放置元素(目标元素)中
}
</script>
//放到何处 - ondragover
//默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。
//进行放置 - ondrop
<div id="div1" οndrοp="drop(event)" οndragοver="allowDrop(event)">
//设置元素为可拖放:draggable="true"
//拖动什么 - ondragstart 和 setData():
<img src="/i/eg_dragdrop_w3school.gif" draggable="true" οndragstart="drag(event)" id="drag1" />
</div>
<div id="div2" οndrοp="drop(event)" οndragοver="allowDrop(event)"></div>
4.《画布canvas元素用于在网页上绘制图形》
通过 JavaScript来绘制canvas元素本身是没有绘图能力的。
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
5.《SVG指可伸缩矢量图形 (Scalable Vector Graphics)》
什么是SVG?
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用于定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG 是万维网联盟的标准
SVG 的优势
与其他图像格式相比(比如 JPEG 和 GIF),使用 SVG 的优势在于:
SVG 图像可通过文本编辑器来创建和修改
SVG 图像可被搜索、索引、脚本化或压缩
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
6.Canvas 与 SVG 的比较
Canvas
依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏,其中的许多对象会被频繁重绘
SVG
不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序(比如谷歌地图)
复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)
不适合游戏应用
7.在客户端存储数据
HTML5 提供了两种在客户端存储数据的新方法:
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储
HTML5 使用 JavaScript 来存储和访问数据
localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。
如何创建和访问 localStorage:
<script type="text/javascript">
localStorage.lastname="Smith";
document.write(localStorage.lastname);
</script>
sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。
如何创建并访问一个 sessionStorage:
<script type="text/javascript">
sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);
</script>
8.《应用缓存》
使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本。
什么是应用程序缓存(Application Cache)?
HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势:
离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
Cache Manifest 基础
如需启用应用程序缓存<html manifest="demo.appcache">
manifest 文件的建议的文件扩展名是:".appcache"。
请注意,manifest 文件需要配置正确的 MIME-type,即 "text/cache-manifest"。必须在 web 服务器上进行配置。
Manifest 文件
manifest 文件是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容)。
manifest 文件可分为三个部分:
CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)
更新缓存
一旦应用被缓存,它就会保持缓存直到发生下列情况:
用户清空浏览器缓存
manifest 文件被修改(参阅下面的提示)
由程序来更新应用缓存
9.HTML5表单
《Input 类型》 这些新的输入类型:type="email、url、number、range[range类型显示为滑动条。]、search、color、Date pickers (date, month, week, time, datetime, datetime-local)"
《表单元素》
新的表单元素:
datalist:
datalist 元素规定输入域的选项列表。
列表是通过 datalist 内的 option 元素创建的。
如需把 datalist 绑定到输入域,请用输入域的 list 属性引用 datalist 的 id:
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3School" value="http://www.W3School.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
keygen
keygen 元素的作用是提供一种验证用户的可靠方法。
keygen 元素是密钥对生成器(key-pair generator)。当提交表单时,会生成两个键,一个是私钥,一个公钥。
私钥(private key)存储于客户端,公钥(public key)则被发送到服务器。公钥可用于之后验证用户的客户端证书(client certificate)。
output:output 元素用于不同类型的输出,比如计算或脚本输出
10.HTML5 的新的表单属性
新的 form 属性:autocomplete、novalidate
新的 input 属性:
autocomplete、autofocus、form、
form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
height 和 width【只适用于 image 类型的 <input> 标签】、list、min, max 和 step、multiple、pattern (regexp)、placeholder、required
11.什么是CSS?:
CSS 指层叠样式表 (Cascading Style Sheets):定义如何显示HTML元素(渲染页面达到美观效果)。
12.样式表的种类?
外部样式表(.css外部文件)、内部样式表(<style标签>)、内联样式(style属性)
优先权:外部<内部<内联样式表
外部样式表
<link> 标签在(文档的)头部:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
内部样式表
当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表
<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>
内联样式
<p style="color: sienna; margin-left: 20px"> This is a paragraph</p>
13.选择器的种类?
ID选择器(#)、类选择器(.)、标签选择器(属性选择器[属性]或者[属性=值]、派生类选择器、锚伪类选择器等等)
选择器的定义格式:
在 HTML5 中不再支持 <script> 元素的type属性