<!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）...
图像 表格 实际应用-菜谱 课堂练习-课程表 8-11 5.无序列表 有序列表 框架 8-12 1.浮动窗口 表单及表单控件① 8-12 2.表单及表单控件② 8-12 3.多媒体页面 标签汇总① 地图映射1 8-12 4.多媒体页面 标签汇总① 地图...
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作为一门简洁易读的编程...
- 对于JAVA和C++，学习者需选择其中一个进行初步学习，如果已有基础则选择熟悉的语言，无基础则推荐学习JAVA，重点在于掌握基础语法。 ### 第二阶段：直播加练习阶段（7-9月） #### 学习目标： 1. 深入学习各章节...
了解这些基础知识后，你可以继续深入学习HTML5的新特性，如语义化标签、多媒体支持、离线存储等，以及如何结合CSS和JavaScript实现更复杂的网页效果。不断实践和学习，你将逐渐掌握HTML，并向全栈开发迈进。
在这个“HTML.zip_html5”压缩包中，我们可以通过几个关键文件来学习HTML5中如何创建表单以及实现网页效果。 1. **超链接（Anchor）**：在“超出位置.html”中，我们可以学习到如何使用`<a>`标签创建超链接，它允许...
关卡11至20在SQL-labs中属于较高难度的部分，这一阶段的学习者需要对SQL注入有了初步的认识和实践操作的基础。在这个阶段中，学习者将通过解决具体的挑战，进一步理解SQL注入的原理和各种技术手段。这些关卡可能涉及...
从名称上推测，这可能是学生在初步学习阶段的练习项目，用以巩固和展示他们对于html5、css和js的掌握情况。文件的具体内容虽然未能详细查看，但可以想象，在这个文件夹中，应当包含了网页的基本结构代码、样式设计...
网页学习-DIV篇主要关注的是使用HTML和CSS中的DIV元素进行网页布局设计。在网页制作中，HTML（超文本标记语言）是...通过不断练习和学习，你可以逐步提升自己的网页布局设计能力，创造出更多令人印象深刻的网页作品。
通过这个项目，开发者可以深入理解HTML如何构建静态页面，并初步了解动态数据处理的概念。 首先，HTML（HyperText Markup Language）是用于创建网页的标准标记语言。在用户资料管理系统中，HTML用于定义页面结构和...
在学习过程中，不断练习和实验是至关重要的，因为理论知识只有与实际应用相结合，才能真正巩固和深化。 最后，这个资源还会持续更新，意味着你将有机会学习到更多的前端技术，如JavaScript、jQuery、Bootstrap等，...
本次提供的资源是一套综合学习指南，包括实际问题和实验室练习，由Nouman Ahmed Khan和Abubakar Saeed等人共同编著。学习指南的目的是帮助考生深入理解Azure基础，并通过实践问题加强记忆，同时实验室练习则提供了一...
HTML（HyperText Markup Language，超文本标记语言）是用于创建网页的标准标记语言。...HTML的学习亦是如此，通过不断的练习和尝试，初学者可以逐步从理解基础标签和结构，过渡到能够独立设计和构建自己的网页。
5. 学习如何防范SQL注入，提高个人或企业Web应用的安全防御能力。 6. 练习利用现成的注入工具进行攻击，理解自动化工具的工作原理和限制。 7. 学习如何防御SQL注入，包括输入验证、使用参数化查询、存储过程、最小...
最后，"5-作业"可能是一系列的练习题目或者小项目，旨在检验学习者对Vue基础知识的掌握程度。通过完成作业，学习者可以巩固所学，发现并解决潜在的理解误区，进一步提升实战能力。 总的来说，"Vue基础day3学习资料....
通过阅读《Python学习手册(第4版)》高清中文PDF，读者将能够系统地掌握Python编程语言，同时具备开发网络爬虫和进行初步机器学习项目的能力。书中的实例和练习有助于读者巩固所学知识，并能应用于实际工作场景中。
5. 学习如何引入和使用外部CSS文件，以及内联样式和内部样式表的使用场景。 6. 了解和应用响应式设计原则，使网页在不同屏幕尺寸下都能正常显示。 7. 图像的使用，包括`<img>`标签的属性、背景图片、CSS精灵图等方法...