<!DOCTYPE HTML>
<html>
<body>
<canvas id="arcCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<canvas id="lineCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<canvas id="grdCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<canvas id="imageCanvas" width="80" height="175" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("arcCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>
<script type="text/javascript">
var c=document.getElementById("lineCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
</script>
<script type="text/javascript">
var c=document.getElementById("grdCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
</script>
<script type="text/javascript">
var c=document.getElementById("imageCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="flower.jpg"
cxt.drawImage(img,0,0);
</script>
<br>
<br>
<br>localStorage
<br>
<script type="text/javascript">
localStorage.lastname="Smith";
document.write(localStorage.lastname);
</script>
<br>
<br>
<script type="text/javascript">
if (localStorage.pagecount)
{
localStorage.pagecount=Number(localStorage.pagecount) +1;
}
else
{
localStorage.pagecount=1;
}
document.write("Visits "+ localStorage.pagecount + " time(s).");
</script>
<form action="/example/html5/demo_form.asp" method="get">
E-mail: <input type="email" name="user_email" /><br />
Homepage: <input type="url" name="user_url" /><br />
Points: <input type="number" name="points" min="1" max="10" /><br />
Points: <input type="range" name="points" min="1" max="10" /><br />
Date: <input type="date" name="user_date" /><br />
Month: <input type="month" name="user_date" /><br />
Week: <input type="week" name="user_date" /><br />
Time: <input type="time" name="user_date" /><br />
Date and time: <input type="datetime" name="user_date" /><br />
Date and time: <input type="datetime-local" name="user_date" /><br />
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>
<input type="submit" />
</form>
</body>
</html>
分享到：
相关推荐
【OSCP自学笔记-October靶机练习1】这篇教程主要介绍了如何通过渗透测试技术攻破一个名为"October"的靶机。靶机来自于Vulnhub平台，作者选择了10台典型的靶机作为OSCP（Offensive Security Certified Professional）...
1. HTML基础：学习HTML的基本结构，包括文档类型声明、头部元信息、以及如何创建简单的网页布局。 2. 文本元素：了解如何使用`<p>`、`<h1>`至`<h6>`、`<em>`、`<strong>`等标签来格式化文本内容。 3. 图像与多媒体：...
通过“web第一天”这个压缩包，你将初步了解HTML的结构和基本语法，这将为你进一步学习网页开发，包括CSS和JavaScript，奠定坚实的基础。同时，提供的博客地址也提供了实践和扩展学习的机会。不断练习和理解这些基础...
3. **第三章**：CSS（Cascading Style Sheets）的初步接触，学习者将学习如何使用CSS控制网页的样式，包括颜色、字体、布局等，使网页更具视觉吸引力。 4. **第四章**：进一步学习CSS，可能会涉及选择器、盒模型、...
这个项目旨在帮助学习者通过实际操作理解Python爬虫的基本原理和流程，同时对数据分析和彩票数据有初步的认识。在本项目中，主要涉及以下几个关键知识点： 1. **Python基础知识**：Python作为一门简洁易读的编程...
了解这些基础知识后，你可以继续深入学习HTML5的新特性，如语义化标签、多媒体支持、离线存储等，以及如何结合CSS和JavaScript实现更复杂的网页效果。不断实践和学习，你将逐渐掌握HTML，并向全栈开发迈进。
在这个“HTML.zip_html5”压缩包中，我们可以通过几个关键文件来学习HTML5中如何创建表单以及实现网页效果。 1. **超链接（Anchor）**：在“超出位置.html”中，我们可以学习到如何使用`<a>`标签创建超链接，它允许...
网页学习-DIV篇主要关注的是使用HTML和CSS中的DIV元素进行网页布局设计。在网页制作中，HTML（超文本标记语言）是...通过不断练习和学习，你可以逐步提升自己的网页布局设计能力，创造出更多令人印象深刻的网页作品。
通过这个项目，开发者可以深入理解HTML如何构建静态页面，并初步了解动态数据处理的概念。 首先，HTML（HyperText Markup Language）是用于创建网页的标准标记语言。在用户资料管理系统中，HTML用于定义页面结构和...
在学习过程中，不断练习和实验是至关重要的，因为理论知识只有与实际应用相结合，才能真正巩固和深化。 最后，这个资源还会持续更新，意味着你将有机会学习到更多的前端技术，如JavaScript、jQuery、Bootstrap等，...
通过阅读《Python学习手册(第4版)》高清中文PDF，读者将能够系统地掌握Python编程语言，同时具备开发网络爬虫和进行初步机器学习项目的能力。书中的实例和练习有助于读者巩固所学知识，并能应用于实际工作场景中。
不过，这已经足够让初学者建立起对Struts框架的初步认识。 在文件名"loginStr"中，可以推测这是一个与登录相关的Struts Action。在实际的项目中，这个Action可能负责接收登录表单的请求，验证用户名和密码，然后...
这些文档的名称分别是：阶段练习十.doc、阶段练习四.doc、阶段练习三.doc、阶段练习二.doc、阶段练习八.doc、阶段练习一.doc、阶段练习六.doc、阶段练习九.doc、阶段练习五.doc和阶段练习七.doc。这些文件很可能是...
最后，"5-作业"可能是一系列的练习题目或者小项目，旨在检验学习者对Vue基础知识的掌握程度。通过完成作业，学习者可以巩固所学，发现并解决潜在的理解误区，进一步提升实战能力。 总的来说，"Vue基础day3学习资料....
5. **响应式设计**：初步接触媒体查询，了解如何根据设备特性调整页面样式，以实现跨设备的友好体验。 **Chapter 12 - CSS实战与页面美化** 1. **CSS布局技巧**：学习网格系统、Flexbox和Grid布局，用于创建灵活的...
2.2. 初步的练习 第二部分. 基本 3. 特殊字符 4. 变量和参数的介绍 4.1. 变量替换 4.2. 变量赋值 4.3. Bash变量是不区分类型的 4.4. 特殊的变量类型 5. 引用 5.1. 引用变量 5.2. 转义 6. 退出和退出状态码 7. 条件...
6. 布局与样式：初步接触CSS（Cascading Style Sheets）的概念，学习如何使用内联样式、内部样式表和外部样式表来控制HTML元素的样式。 7. 演讲PPT：这部分内容可能包含对上述知识点的详细讲解，通过视觉化的方式...
**正文** "DHTML 学习手册详解" 是一本专为那些已经掌握基本HTML，并且正在探索JavaScript、CSS以及...无论是HTML的基础巩固，还是JavaScript和CSS的深入学习，乃至PHP的初步了解，这份手册都将提供宝贵的指导和支持。