HTML5个人笔记
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
HTML5个人笔记
一、新增结构元素标签
用于对整个页面或页面中一个内容区块的标题进行组合
figure内容:该元素表示一段独立的流内容或文档主体流内容中的一个独立单元;相当于html以前的dl
页面展示效果:
二、新增内容元素标签
1.
Controls表示显示该控件;具体属性W3C参考手册
示例:
页面展示效果:
2.
示例:
你的浏览器不支持audio元素时提示本消息
页面展示效果:
3.
用来插入各种格式多媒体,且加载完立刻播放,MIDI、WAV、MP3等
示例:
页面展示效果:
4.:关键字高亮
突出文字显示,起高亮作用,常用于搜索关键字
示例:
浏览器
页面展示效果:
5.
表示运行中的进程,例如:下载进度;属性max为最大值,value为当前值
示例:
表示运行中的进程
var flag=0;
window.onload=function(){
//暂停多久开始执行
//setTimeout("load("+13+")",1000);
//每多久循环执行一次
setInterval("load()",100);
}
//progress进度条
function load(){
var pro=document.getElementById("pro");
flag++;
pro.value=flag;
if(flag==101){
clearInterval();
}
}
页面展示效果:
6.:注释
漢
汗
页面展示效果:
7.
表示软换行,窗口宽度才不够换行,对中文文本支持不太好,支持英文文本。示例:
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaas
页面展示效果:
8.
window.onload=function(){
myCanvas();
}
//测试canvas标签,画图
function myCanvas(){
var canvas=document.getElementById('myCanvas');
//绘制矩形
var ctx=canvas.getContext('2d');
ctx.fillStyle='green';
ctx.fillRect(10,10,180,200);
ctx.strokeStyle="red";
ctx.clearRect(20,20,90,90);
ctx.strokeRect(30,30,50,50);
//绘制圆形
ctx.strokeStyle='#00f';
ctx.beginPath();
ctx.arc(250,60,50,180,0.5*Math.PI,true);
ctx.stroke();
}
页面展示效果: