H5学习内容

来源：互联网发布：塞班版读书软件编辑：程序博客网时间：2024/06/05 09:08

可编辑内容

<ul contenteditable="true"><li>元素1</li><li>元素2</li><li>元素3</li></ul>

<script>document.designMode = "on";</script>

FORM内容可以写在外面，需要申明form=id

<form id="test"><input type="text" value="test"/></form><textarea form="test"></textarea>

自动聚焦：

表单中enctype="multipart/form-data"的意思，是设置表单的MIME编码。

默认情况，enctype的编码格式是application/x-www-form-urlencoded，不能用于文件上传

预输入属性：placeholder

input预选项：

text<input type="text" name="greeting" list="greetings"><datalist id="greetings" style="display:none"><option value="Good Morning">Good M</option><option value="Good Morning1">Good M1</option><option value="Good Morning2">Good M2</option></datalist>

正则表达式属性pattern:

<form><input pattern="[0-9][0-4]" /><input type="submit" /></form>

canvas：

<body onload="draw('canvas');"><h2>元素示例</h2><canvas id="canvas" width="400" height="300"></canvas></body>function draw(id){var canvas = document.getElementById(id);if(canvas == null)return false;var context = canvas.getContext('2d');context.fillStyle="#EEEEFF";context.fillRect(0,0,600,600);//填充背景颜色context.lineWidth=1;//context.fillStyle="red";//context.fillRect(100,100,400,300);//填充红色区域//context.clearRect(20,11,400,200); //清除这部分区域内容var n=0;for (var i = 0;i < 10; i++) {context.beginPath();context.arc(i*25,i*25,i*10,0,Math.PI*2,true);context.closePath();context.fillStyle = 'rgba(255,0,0,0.25)';context.fill();}}

画一条直线：

context.lineCap = "round";context.lineWidth=11;context.moveTo(10,20);context.lineTo(250,250);context.stroke();

曲线：

context.beginPath();context.moveTo(150,22);context.arcTo(156,100,55,20,30);context.stroke();

加载网上图片：

var canvas = document.getElementById(id);if(canvas == null)return false;var context = canvas.getContext('2d');context.fillStyle="#EEEEFF";context.fillRect(0,0,600,600);var image = new Image();image.src="https://apic.douyucdn.cn/upload/avatar/default/01_middle.jpg?rltime";image.onload=function(){for (var i = 0;i<7;i++) {context.drawImage(image,0+i*50,0+i*25,100,100);}}

context.drawImage(image,23,45,74,54,200,110,100,100);//局部显示
window.location = canvas.toDataURL("image/jpeg");//把绘制的图片转到url，输入到url里就能打开图片

视频控件:

<video autoplay="autoplay" controls="controls" src="http://mvvideo2.meitudata.com/582c588cdf8c46183.mp4" ></video>

a标签下载方法：

Html5里面的标签的 Download 属性可以设置一个值来规定下载文件的名称。所允许的值没有限制，浏览器将自动检测正确的文件扩展名并添加到文件 (.img, .pdf, .txt, .html, 等等)，

但是 Download 的兼容性不怎么样，只有 Firefox 和 Chrome 支持 download 属性。

　测试代码：

<a href="imges/1.jpg" download="图片">　　<img src="imges/1.jpgf" alt="图片"></a>

文字自动换行：word-break:break-all

0 0