1.html5开发前准备。
为什么学习html5
新的web时代到来；
跨平台运行；
硬件要求低；
flash之外的选择（代替flash）；
软硬件环境
硬件：双核，2g内存；
软件：window，linux，mac
介绍html5
html：是用来描述的网页的一种语言；指超文本标记语言；不是编程语言，是一种标记语言。
html5新特性：
用于绘画的canvas标签；
用于媒介回放的video和audio的元素；
对本地的离线储存的刚好支持；
新的特殊内容元素eg:article，footer，header，nav，section
新的表单的控件eg：calender，date，time，email，url，search
浏览器的支持：Safari，Chrome，Firefox以及Opera,>=IE9
环境搭建
开发工具：
常用：WebStorm、notepad++、Eclipse、text sublime、 dreamweaver
推荐：Intellij IDEA
常见问题解决
1.寻求问题的根源；
2.查看参考文档；w3c
3.参考示例；
4.常见问题通过搜索引擎搜索
5.问题反馈。
掌握技能需求
1.需要掌握的技能：
html5；xhtml；css3；Js；Jquery：Jquery-ui；Jquery-mobile；
快捷键：
IDEA->file->settings->KeyMap->选择Eclipse模式的快捷键。
2.html5特性简介；
html版本：
html->html+->html2.0->html3.2->html4.01->xhtml 1.0->html5（2012年）->xhtml5（2013）；
3.html学习
html5基础：
声明：<!DOCTYPE html>
<html class="no-js" lang="en">
<html lang="en">代表这是英文的网站。
字符集声明（<meta charset="utf-8">）：
兼容模式的元标签（<meta http-equiv="x-ua-compatible" content="ie=edge">）：
移动端视图<meta name="viewport" content="width=device-width, initial-scale=1">
标签部分1:
a.html基础标签：head、body
b.html标题：<h1>...<h6>
c.html段落：<p>
d.html的链接：<a>
href:代表另一个文档的链接
name：代表文档内的链接
<a href="url网址" >click me</a>
<a href="url网址" ><img src=""></a>
<a href="#tips">click me to name='tips'</a>
<br><br>
<a name=tips ></a>
e.html图像：<img>
src:“***.png”
alt=”defaultlogo“
width：
height：
标签部分2：
表单：
<form> --表单
新的 form 属性：
autocomplete
novalidate
<input> --输入域
<input type="email">
<input type="url">
<input type="number">
<input type="text">
<input type="password">
<input type="range">
<input type="Date">
<input type="month">
<input type="week">
<input type="time">
<input type="datetime">
<input type="datetime-local">
<input type="search">
<input type="color">
新的 input 属性：
autocomplete
autofocus
form
form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
height 和 width
list
min, max 和 step
multiple
pattern (regexp)
placeholder
required
<textarea> --文本域
<label>
--控制标签
<fieldset> --定义域
<legend> --域的标题
<select> --选择列表
<optgroup> --选项组
<option> --下拉列表中的选项
<button> --按钮
<form action="" method="get" autocomplete="on">
<label >username</label>
<input type="text" title="username" placeholder="username" pattern="[A-z]{3}" >
<label>password</label>
<input type="password">
<label>apple</label><input type="checkbox" checked="checked">
<label>apple2</label><input type="checkbox" checked="checked">
<label>apple1</label><input type="checkbox" checked="checked">
<labe>sex</labe>
<input type="radio" name="sex"><input type="radio" name="sex" checked="checked" >
<textarea cols="2" rows="3"></textarea>
<input type="button" value="button" οnclick="btn()">
<input type="submit" value="submit">
<select>
<optgroup label="oppt">
<option>d</option>
</optgroup>
<optgroup label="opt2">
<option>3</option>
</optgroup>
</select>
<input type="email">
<input type="url">
<input type="number">
<input type="text">
<input type="password">
<input type="range" name="points" min="1" max="10" step="2"/>
<input type="Date" id="date">
<input type="month" id="month">
<input type="week" id="week">
<input type="time">
<input type="datetime">
<input type="datetime-local">
<input type="search" id="search">
<input type="color" id="color">
</form>
<script type="text/javascript">
function btn(){
alert("");
console.log(document.getElementById("date").value);
console.log(document.getElementById("month").value);
console.log(document.getElementById("week").value);
console.log(document.getElementById("search").value);
console.log(document.getElementById("color").value);
/* 2016-05-11
2016-05
2016-W19
dd
#80ff00*/
}
</script>
标签部分3：
样式：
标签：1.<style>:样式定义
2.<link>.资源引用
属性：rel=“stylesheet":外部样式表声明
type=“text/css”：引入文档类型
插入方式：
外部样式表：
<link rel="stylesheet" type="text/css" href="....css">
内部样式表；
<style type="text/css">
.p{
}
</style>
内联样式表：
<p style="padding:0px">
标签部分4：
表格：
种类：
没有边框的表格
表格中的表头：th
空单元格：
带有标题的表格：caption
表格内的标签：
跨行，跨列的表格：colpsan=”“ rowspan=”“
单元格填充：cellpadding：
单元格间距：cellaspacing：
想表格添加背景和背景图像：bgcolor ；background
单元中内容排列格式 align
框架属性：frame="box"；frame="above"；frame="below"；frame="hsides"；rame="vsides":
标签部分5：
框架：
frame，frameset，noresize，cols，rows，
现在都用它的iframe框架：
背景：
Background，bgcolor
实体：> , < ,<,>, ,&
标签部分6：
列表：
ul------无序列表 li
属性：disc，circle，quare，
ol------有序列表 li
属性：A，a，I，i，start
dl------自定义列表 dt dd
li------列表
dt------列表项
dd------描述
标签部分7：
块元素：eg：div，h1，内联元素：span
标签部分8:
布局：table布局和div布局
标签部分9：
音频、视频
1.audio(音频)，video(视频)
html5提供了播放音频，视频文件的标准
2.control(控制器)
control属性供添加播放、暂停和音量控件
3.<audio> 定义声音
<source>规定多媒体资源、可以是多个。
4.属性：width，height。
标签部分10:
拖放、拖放本地数据。
1.html5拖放：
拖放(Drag和drop)是html5标准的组成部分。
2.拖动开始：
ondragstart：调用了一个函数，drag(event),它规定了被拖动的数据。
3.设置拖动数据
setData():设置被拖数据的数据类型和值 e.dataTransfer.setData("","")
4.放入位置；
ondragover：事件规定在何处放置被拖动的数据。
5.放置：
ondrop:当放置被拖数据时，会发生drop事件。e.dataTransfer.getData("")
var imgContainer;
window.οnlοad=function(){
imgContainer=document.getElementById('imgContainer');
imgContainer.οndragοver=function(e){
e.preventDefault();
}
imgContainer.οndrοp=function(e){
e.preventDefault();
var f=e.dataTransfer.files[0];
var filereader=new FileReader();
filereader.οnlοad=function (e) {
imgContainer.innerHTML="<img src="+filereader.result+">"
}
filereader.readAsDataURL(f);
}
}
var boxDiv;
var box1Div;
var msgDiv;
var imgObj;
window.onload = function () {
boxDiv = document.getElementById("box");
msgDiv = document.getElementById("msg");
box1Div = document.getElementById("box1");
imgObj = document.getElementById("img1");
/* boxDiv.ondragenter = function (e) {
showObj(e);
}*/
/* imgObj=document.getElementById("imgId")*/
box1Div.οndragοver=function (e) {
e.preventDefault();
}
boxDiv.οndragοver=function(e){
e.preventDefault();
}
imgObj.οndragstart=function(e){
e.dataTransfer.setData("imgId","img1");
}
box1Div.οndrοp=dropImgHandler;
boxDiv.οndrοp=dropImgHandler;
}
function dropImgHandler(e){
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;
}
标签部分11:
canvas标签；
canvas用于图形绘制，通过脚本（eg:js）来完成<canvas>标签只是图形容器，我们必须用脚本来绘制图形。
context重新定义：
他不是简单的上下文，context封装了很多绘图功能的对象，获取对象的方式是：
var context=canvas.getContext("2d");
1.canvas元素绘制图像有两种方法：
a.context.fill();//填充
b.context.stroke();//绘制边框
2.style：在进行图形绘制前，要设置好绘图的样式；
记住：绘制图形前需要先填充样式。
context.fillStyle//填充样式
默认是：fillStyle=black
context.strokeStyle//边框样式
默认是：strokeStyle=black
context.lineWidth///图形边框宽度
颜色表示方式：
fillStyle
strokeStyle
a.red,green,blue;
b.#eeefd8;
c.rgb(2,233,252)
d.rgba(23,32,22,透明度)
阴影：
ctx.shadowBlur=20;
ctx.shadowColor="black";
shadowColor:设置或返回用于阴影的颜色，
shodowBlur：设置或返回用于阴影的模糊级别
shadowOffsetX:设置或返回与形状的水平距离
shadowOffsetY:设置或返回与姓张的垂直距离
方法：
createLinearGradient()创建线性渐变(用在画布内容上)。
createPattern()在指定方向上重复指定的元素。
createRaiialGradient()创建放射状/环状的渐变(用在画布内容上)
addColorStop()规定渐变对象中颜色和停止位置。
线条样式：
lineCap：设置或返回线条的结束端点样式
lineJoin：设置或返回两线条相交是，所创建的拐角类型
lineWidth：设置或返回当前的线条宽度
miterLimit：设置或返回最大斜度接长度
矩形：
rect():创建矩形
fillRect();绘制一个填充矩形
srokeRect();绘制矩形无填充
clearRect();清除矩形内像素
路径:
fill();填充当前绘图
stroke();绘制已定义的路径
bgeinBath();起始一条路径，或充值当前路径
moveTo();把路径移动到画布中的指定点，不创建线条。
clostPath();创建从当前当前点回到起始点的路径
lineTo();添加一个新点，然后在画布中创建从该点到最后指定点线条
clip();从原始画布剪切任意形状和尺寸的区域
guadraticCurveTo();创建二次贝塞尔曲线
bezierCurveTo();创建三次方贝塞尔曲线
arc();创建弧/曲线（用于创建圆形或部分圆
arcTo();创建两切线之间的弧/曲线
isPointInPath();如果指定的点位于当前路径中，则返回 true，否则返回 false
转换
scale();缩放当前绘图至更大或更小
rotate();旋转当前绘图
translate();重新映射画布上的 (0,0) 位置
tarnsform();替换绘图的当前转换矩阵
setTransform();将当前转换重置为单位矩阵。然后运行 transform()
文本：
font：设置或返回文本内容的当前字体属性
textAlign:设置或返回文本内容的当前对齐方式
textBaseline:设置或返回在绘制文本时使用的当前文本基线
fillText():在画布上绘制“被填充的”文本
strokeText():在画布上绘制文本（无填充）
measureText():返回包含指定文本宽度的对象
图像绘制：
方法：drawImage();向画布上绘制图像、画布或视频
属性：width，返回 ImageData 对象的宽度
height,返回 ImageData 对象的高度
data,返回一个对象，其包含指定的 ImageData 对象的图像数据
createImageData()创建新的、空白的 ImageData 对象
getImageData()返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据
putImageData()把图像数据（从指定的 ImageData 对象）放回画布上
合成：globalAlpha，设置或返回绘图的当前 alpha 或透明值
globalCompositeOperation 设置或返回新图像如何绘制到已有的图像上
其他：save();保存当前环境的状态
restore();返回之前保存过的路径状态信息。
createEvent();
getContext();
toDataURL();
3.绘制矩形
context.fillRect(x,y,width,height);填充
context.strokeRect(x,y.width,height)；边框
context.clearRect(x,y,widhth,height);清除
4.绘制圆弧
context.arc(x,y,radius,starAngle,endAngle,anticlokwise);
x:圆心的x座标
y:圆心的y座标
starAngle:开始角度
endAngle:结束角度
anticlockwise:是否逆时针(true)为逆时针，(false)为顺时针。
ps：经过验证，true为顺时针，false为逆时针。
5.绘制扇形代码：
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
context.beginPath();
context.translate(100,100);
context.moveTo(0,0);
context.arc(0,0,50,0,Math.PI*1.5);
context.closePath();
context.fill();
标签部分12:
svg：
标签部分13：
MathML:
mrow
msup
msub
mi
web存储：sessionStorage，声明周期，一次绘画里的。
localStorage, 本地永久的。数据存储非常有用。
两个对象塞值，都是异步的。
web worker：
Worker对象使用。
//安全机制登陆，设定登陆事件，银行系统用到。
var w;
//W用户创建Worker对象，对其进行监听。
function startWorker(){
if(typeof(Worker)!=="undefined"){
if(w)=="undefined"){
w=new Worker("demo.js");
}
w.onmessage=function(event){
document.getElementById("result").innerHTML=event;
}
}
else{
document.getElementById("result").innerHTML="SORRY!";
}
}
function stopWorker()[
w.terminate();
]
demo.js
需要每隔固定的时间想服务器发送数据，然后返回我的程序，得到数据更新。
服务器发送事件：随时获取服务数据的更新。
用到的对象是EventSource对象，
var e=new EventSource("href");
e.onmessage=function(e){}
地理位置：window.navigator.geolocaltion
html5学习摘录
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
uniapp的那些坑
1.selectedColor不起作用 1.查看位置是否寫對，與lis同級 2.是否爲16進制，selectedColor寫的rgb不支持 3.是否被其他樣式覆蓋，其他地方也設置過sele