HTML5
==============day01=======================
1.HTML5是什么
HTML5 约等于 HTML+CSS3+Javascript+API
==========================================
==============day02=======================
1.新的文档类型声明（DTD）
HTML5的DTD声明为：
<!doctype html>
<!DOCTYPE html>等也是正确的,因为HTML语法是不区分大小写的。
在编写HTML5文档时，要求指定文档类型，以确保浏览器能在HTML5的标准模式下进行渲染。
2.新增的HTML5标签
2.1.结构标签--用来布局的标签(块状元素，有意义的div)
<article> 标记定义一篇文章
<header> 标记定义一个页面或者一个区域的头部
<nav> 标记定义导航链接
<section> 标记定义一个区域
<aside> 标记定义页面内容部分的侧边栏
<hgroup> 标记定义文件中一个区域的相关信息
<figure> 标记定义一组媒体内容以及它们的标题
<figcaption> 标签定义figure元素的标题
<footer> 标记定义一个页面或一个区域的底部
<dialog> 标记定义一个对话框（会话框）类似微信
新的结构标签带来的事网页布局的改变及提升对搜索引擎的友好
2.2.多媒体标签
<video> 标记定义一个视频
<audio> 标记定义音频内容
<source> 标记定义媒体资源
<canvas> 标记定义图片
<embed> 标记定义外部的可交互的内容或插件 比如flash
HTML5的多媒体标签的出现意味着富媒体的发展以及支持不使用插件的情况下即可操作媒体文件，
极大地提升了用户体验。
2.3.web应用标签
<menu>命令列表
<menuitem>menu命令列表标签FF（嵌入系统）
<command>menu标记定义一个命令按钮
<meter>状态标签（实时状态显示：气压，气温）C,O
<progress>状态标签（任务过程：安装，加载）C，F，O
<datalist>为input标记定义一个下拉列表，配合option F，O
<details>标记定义一个元素的详细内容，配合dt,dd C
2.4.其他标签
2.4.1.注释标签
<ruby>标记定义 注释或音标
<rp>告诉那些不支持Ruby元素的浏览器如何去显示
<rt>标记定义对ruby的注释内容文本
2.4.2.其他标签
<keygen>标记定义表单里一个生成的键值（加密信息传送）O,F
<mark>标记定义有标记的文本(黄色选中状态)
<output>标记定义一些输出类型，计算表单结果配合oninput事件
3.删除的HTML标签
纯表现的元素：
basefont，big，center，font，s，strike，tt，u
对可用性产生负面影响的元素：
frame,frameset,noframes;
产生混淆的元素：
acronym,applet,isindex,dir
4.重新定义的HTML标签
<b> 代表内联文本，通常是粗体，没有传递标识重要的意思
<i> 代表内联文本，通常是斜体，没有传递标识重要的意思
<dd> 可以同details与figure一同使用，定义包含文本，dialog也可用
<dt> 可以同details与figure一同使用，汇总细节，dialog也可用
<hr> 表示主题结束，而不是水平线，虽然显示相同
<menu> 重新定义用户界面的菜单，配合commond或者menuitem使用
<small> 表示小字体，例如打印或者法律条款
<strong> 表示重要性而不是强调符号
5.HTML5崭新的页面布局方式
=================================
音视频的发展史
早期：<embed>+<object>+文件
问题：不是所有浏览器都支持，而且embed不是标准
现状：Realplay,window media ,Quick Time ,Flash
问题：每个厂商每个标准，网站编码和格式也都不相同，flash的出现解决了面的问题，但是apple在07年决定
任何设备将不再支持flash。
HTML5认为浏览器应该原生支持音视频，因为他们现在也是web中的一等公民了。
视频格式的简单介绍
1、常见的视频格式
视频的组成部分：画面，音频，编码格式
视频编码：H.264,Theora,VP8(google开源)
常见的音频格式
视频编码：ACC，MP3，Vorbis
HTML5支持的视频格式
Ogg,MEPG4,WebM
2.标签的使用
2.1.<video>的使用
<video src="文件地址" controls="controls"></video>
<video src="文件地址" controls="controls">
您的浏览器暂不支持video标签，播放视频
</video>
<video controls="controls" width="300">
<source src="move.ogg" type="video/ogg">
<source src="move.mp4" type="video/mp4">
您的浏览器暂不支持video标签。播放视频
</video>
Video的常见属性
autoplay autoplay 视频就绪自动播放
controls controls 向用户显示播放控件
width Pixels(像素) 设置播放器宽度
height Pixels(像素) 设置播放器高度
loop loop 播放完是否继续播放该视频，循环播放
preload preload 是否等加载完再播放
src url 视频url地址
poster imgurl 加载等待的画面图片
autobuffer autobuffer 设置为浏览器缓冲方式，不设置autoplay才有效
HTML5支持的音频格式
Ogg，MP3，Wav
2.2.<audio>的使用
<audio src="文件地址" controls="controls"></audio>
<audio src="文件地址" controls="controls">
您的浏览器暂不支持video标签，播放音频
</audio>
<audio controls="controls" width="300">
<source src="move.ogg" type="audio/ogg">
<source src="move.mp3" type="audio/mp3">
您的浏览器暂不支持video标签。播放音频
</audio>
=========================================================================
========================day03============================================
1.Canvas的使用
<canvas id="canvas" height="100" width="300">
您的浏览器不支持canvas标签
</canvas>
canvas标签在页面中只显示一个设定背景色的画布，如果要产生新内容
或者进行画图操作，需要借助canvasAPI(HTML5的内置对象context)和javascript
操作实现画图或者其他图像操作。
画一条线段
<canvas id="canvas" width="600px" height="600px" style="background:yellow">
您的浏览器不支持canvas标签，请升级浏览器
</canvas>
<script>
//获取画布
var canvas=document.getElementById("canvas");
//设置绘图环境
var cxt=canvas.getContext('2d');
//画一条线段
//设定画笔的宽度
cxt.lineWidth=10;
//设置画笔的颜色
cxt.strokeStyle="#00ff00";
//设定笔触的位置
cxt.moveTo(20,20);
//设置移动的方式
cxt.lineTo(100,20);
//画线
cxt.stroke();
cxt.closePath();
</script>
画一个圆形
//画一个圆形(第1,2为圆心的坐标点，第3个为半径,第4,5个为弧度,第6个为是否为顺时针)
//凡是路径图形必须先开始路径，画完图之后必须结束路径
//开始新路径
cxt.beginPath();
//重新设置画笔
cxt.lineWidth=3;
cxt.strokeStyle="green";
cxt.arc(200,200,50,0,360,false);
cxt.stroke();
//封闭新路径
cxt.closePath();
//画一个实心圆形
cxt.beginPath();
//设置填充的颜色
cxt.fillStyle="rgb(255,0,0)";
cxt.arc(200,100,50,0,360,false);
cxt.fill();
cxt.stroke();
cxt.closePath();
画一个矩形
//画一个矩形 路径方法不用cxt.beginPath和cxt.closePath
cxt.beginPath();
cxt.rect(300,20,100,100);
cxt.stroke();
//其他方法
cxt.strokeRect(300,150,100,100);
cxt.closePath();
//实心矩形
cxt.beginPath();//开启新路径与
cxt.rect(300,350,100,100);
cxt.fill();
cxt.closePath();
//其他方法 建议使用此方式
cxt.fillRect(300,390,100,100);
写一段文字画布中
//设置字体
cxt.font="40px 黑体";//css font属性
cxt.fillText("无兄弟，不编程",20,300);
//将笔触设置为1像素
cxt.lineWidth=1;
cxt.strokeText("无兄弟，不编程",20,350);
画三角形
//画一个三角形 填充或者画路径需要先关闭路径再画
cxt.beginPath();
//移动至开始点
cxt.moveTo(300,500);
cxt.lineTo(300,600);
cxt.lineTo(400,550);
cxt.closePath();
cxt.stroke();
//实心三角形
cxt.beginPath();
//移动至开始点
cxt.moveTo(300,600);
cxt.lineTo(300,700);
cxt.lineTo(400,650);
cxt.closePath();
cxt.fill();
旋转图片
//旋转图片
//设置旋转环境
cxt.save();
//在异次元空间重置0,0点的位置
cxt.translate(20,20);
//图片/形状旋转
//设置旋转角度 参数是弧度 角度 0-360 弧度=角度*Math.PI/180
cxt.rotate(-30*Math.PI/180);
//旋转一个线段
cxt.lineWidth=10;
cxt.beginPath();
cxt.moveTo(0,0);
cxt.lineTo(20,100);
cxt.stroke();
cxt.closePath();
//将旋转之后的元素放回原画布
cxt.restore();
//过程不可颠倒，先设置0,0点，再旋转角度，然后画图
//旋转一张图片
cxt.save();
cxt.translate(20,370);
cxt.rotate(10*Math.PI/180);
var img=new Image();
img.src="2.jpg";
cxt.drawImage(img,0,0,230,306);
cxt.restore();
=====================================================
======================day06==========================
1.新增的表单类型
<body>
<form action="http://localhost/test.php" method="post" id="register"></form>
<input type="text" name="user" value="" form="register"/><br/>
<input type="password" name="" form="register"/><br/>
<select name="year" form="register">
<option value="1989">1989</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
</select><br/>
<input type="submit" value="注册" form="register"></input>
<hr>
邮箱:<input type="email" name="youxiang" value="" form="register" required="required"/> <br/>
URL:<input type="url" name="url" value="" form="register"/> <br/>
Date:<input type="date" name="riqi" value="" form="register"/> <br/>
TIME:<input type="time" name="shijian" value="" form="register"/><br/>
Month:<input type="month" name="month" value="" form="register"/><br/>
Week:<input type="week" name="week" value="" form="register"/><br/>
数字:<input type="number" name="number" value="" form="register"/><br/>
滑动条:<input type="range" name="huadong" value="" form="register" max="5" step="2"/><br/>
搜索框:<input type="search" name="搜索条" value="" form="register" results="n"/><br/>
颜色:<input type="color" name="yanse" value="" form="register"><br/>
</body>
2.新增的表单属性
属性：required 值：required 表单拥有该属性表示其内容不能为空，必填
placeholder 提示文本 表单的提示信息，存在默认值将不显示
autofocus autofocus 自动聚焦属性，页面加载完成自动聚焦到指定表单
pattern 正则表达式 输入的内容必须匹配到指定正则
案例
默认值:<input type="text" name="test" pattern="\d{3}" placeholder="默认值" form="register"/><br/>
邮箱:<input type="email" name="youxiang" value="" form="register" required="required"/> <br/>
自动填充表单
Datalist标签配合option标签实现的自动填充表单功能
<input type="search" name="move" list="search">
<datalist id="search">
<option>1</option>
<option>2</option>
</datalist>
自动输出表单
输出表单的使用<br/>
<form action="" method="post" οninput="result.value=parseInt(no1.value)*parseInt(no2.value)">
<input type="number" name="no1" value=""/>
<input type="number" name="no2" value=""/>
<output name="result"></output>
</form>
============================================================================================
=======================================day07================================================
<body>
<canvas id="canvas" width="1000" height="1000" style="background:#000">
您的浏览器不支持canvas标签
</canvas>
<script>
//设置2d绘图环境
var cxt=document.getElementById("canvas").getContext('2d');
//轨道
function drawTrack(){
for(var i=0;i<8;i++){
cxt.beginPath();
cxt.arc(500,500,(i+1)*50,0,360,false);
cxt.closePath();
//设置笔触颜色
cxt.strokeStyle="#fff";
cxt.stroke();
}
}
drawTrack();
//星球
function star(x,y,radius,cycle,sColor,eColor){
//画出星球需要哪些属性
//星球的坐标点
this.x=x;
this.y=y;
//星球的半径
this.radius=radius;
//公转周期
this.cycle=cycle;
//星球的颜色(开始色，结束色)
this.sColor=sColor;
this.eColor=eColor;
//新建一个渐变颜色空对象
this.color=null;
this.time=0;
this.draw=function(){
//保存之前的画布内容
cxt.save();
//重置0,0坐标点
cxt.translate(500,500);
//设置旋转角度
cxt.rotate(this.time*(360/this.cycle)*Math.PI/180);
//画星球
cxt.beginPath();
cxt.arc(this.x,this.y,this.radius,0,360,false);
cxt.closePath();
//设置星球的填充颜色
//新建渐变对象
this.color=cxt.createRadialGradient(this.x,this.y,0,this.x,this.y,this.radius);
//设置渐变效果
this.color.addColorStop(0,this.sColor);//渐变开始点和颜色
this.color.addColorStop(1,this.eColor);//渐变结束和颜色
cxt.fillStyle=this.color;//将渐变队形赋值给填充画笔
//填充星球
cxt.fill();
//恢复之前保存的画布内容
cxt.restore();
//执行完毕之后时间增加
this.time+=1;
}
}
//创建一个太阳对象的构造对象
function Sun(){
star.call(this,0,0,20,0,"#f00","#f90");
}
//创建一个水星对象的构造方法
function Mercury(){
star.call(this,0,-50,10,87.70,"#A69697","#5C3E40");
}
//创建一个金星对象的构造方法
function Venus(){
star.call(this,0,-100,10,224.70,"#A70697","#5C3E40");
}
//创建一个地球对象的构造方法
function Earth(){
star.call(this,0,-150,10,365.224,"#A69897","#5C3E40");
}
//创建一个火星对象的构造方法
function Mars(){
star.call(this,0,-200,10,686.98,"#A67797","#5C3E40");
}
//创建一个木星对象的构造方法
function Jupiter(){
star.call(this,0,-250,10,4332.598,"#A69959","#5C3E40");
}
//创建一个土星对象的构造方法
function Saturn(){
star.call(this,0,-300,10,10759.5,"#A22697","#5C3E40");
}
//创建一个天王星对象的构造方法
function Uranus(){
star.call(this,0,-350,10,30799.095,"#A45697","#5C3E40");
}
//创建一个海王星对象的构造方法
function Neptune(){
star.call(this,0,-400,10,60152,"#A69644","#5C3E40");
}
//创建太阳对象实例
var sun=new Sun();
//创建水星对象实例
var mercury=new Mercury();
//创建金星对象实例
var venus=new Venus();
/创建地球对象实例
var earth=new Earth();
/创建火星对象实例
var mars=new Mars();
/创建木星对象实例
var jupiter=new Jupiter();
/创建土星对象实例
var saturn=new Saturn();
/创建天王星对象实例
var uranus=new Uranus();
/创建海王星对象实例
var neptune=new Neptune();
function move(){
//清除画布
cxt.clearRect(0,0,1000,1000);
//画出轨道
drawTrack();
//画出每个星球
sun.draw();
mercury.draw();
venus.draw();
earth.draw();
mars.draw();
jupiter.draw();
saturn.draw();
uranus.draw();
neptune.draw();
}
setInterval(move,10);
</script>
</body>
4686
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
