HTML5学习笔记

时间：2024.4.13

1.HTML5简介

什么是 HTML5？

HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。

HTML 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。

HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。

HTML5 是 W3C 与 WHATWG 合作的结果。

为 HTML5 建立的一些规则：

新特性应该基于 HTML、CSS、DOM 以及 JavaScript。
减少对外部插件的需求（比如 Flash）
更优秀的错误处理
更多取代脚本的标记
HTML5 应该独立于设备
开发进程应对公众透明

新特性

HTML5 中的一些有趣的新特性：

用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search

2.HTML5视频

视频格式

当前，video 元素支持三种视频格式：

实例

Your browser does not support the video tag.

</video>

3.HTML5音频

音频格式

当前，audio 元素支持三种音频格式：

实例

Your browser does not support the audio tag.

</audio>

4.HTML画布（Canvas）

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

画布是一个矩形区域，您可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

创建 Canvas 元素

向 HTML5 页面添加 canvas 元素。

规定元素的 id、宽度和高度：

通过 JavaScript 来绘制

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

cxt.fillStyle="#FF0000";

cxt.fillRect(0,0,150,75);

</script>

JavaScript 使用 id 来寻找 canvas 元素：

var c=document.getElementById("myCanvas");

然后，创建 context 对象：

var cxt=c.getContext("2d");

getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

下面的两行代码绘制一个红色的矩形：

cxt.fillStyle="#FF0000";

cxt.fillRect(0,0,150,75);

fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。

实例 - 线条

通过指定从何处开始，在何处结束，来绘制一条线：

JavaScript 代码：

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

cxt.moveTo(10,10);

cxt.lineTo(150,50);

cxt.lineTo(10,50);

cxt.stroke();

</script>

canvas 元素：

Your browser does not support the canvas element.

</canvas>

实例 - 圆形

通过规定尺寸、颜色和位置，来绘制一个圆：

JavaScript 代码：

var c=document.getElementById("myCanvas");

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>

canvas 元素：

Your browser does not support the canvas element.

</canvas>

实例 - 渐变

使用您指定的颜色来绘制渐变背景：

JavaScript 代码：

var c=document.getElementById("myCanvas");

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>

canvas 元素：

Your browser does not support the canvas element.

</canvas>

实例 - 图像

把一幅图像放置到画布上：

JavaScript 代码：

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

var img=new Image()

img.src="flower.png"

cxt.drawImage(img,0,0);

</script>

canvas 元素：

Your browser does not support the canvas element.

</canvas>

4.HTML5 Web存储

在客户端存储数据

HTML5 提供了两种在客户端存储数据的新方法：

localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储

之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。

在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。

HTML5 使用 JavaScript 来存储和访问数据。

localStorage 方法

localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

如何创建和访问 localStorage：

实例

localStorage.lastname="Smith";

document.write(localStorage.lastname);

</script>

亲自试一试

下面的例子对用户访问页面的次数进行计数：

实例

if (localStorage.pagecount)

{

localStorage.pagecount=Number(localStorage.pagecount) +1;

}

else

{

localStorage.pagecount=1;

}

document.write("Visits "+ localStorage.pagecount + " time(s).");

</script>

亲自试一试

sessionStorage 方法

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

如何创建并访问一个 sessionStorage：

实例

sessionStorage.lastname="Smith";

document.write(sessionStorage.lastname);

</script>

亲自试一试

下面的例子对用户在当前 session 中访问页面的次数进行计数：

实例

if (sessionStorage.pagecount)

{

sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;

}

else

{

sessionStorage.pagecount=1;

}

document.write("Visits "+sessionStorage.pagecount+" time(s) this session.");

</script>

亲自试一试

5.HTML5输入类型

HTML5 新的 Input 类型

HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

本章全面介绍这些新的输入类型：

email
url
number
range
Date pickers (date, month, week, time, datetime, datetime-local)
search
color

Input 类型 - email

email 类型用于应该包含 e-mail 地址的输入域。

在提交表单时，会自动验证 email 域的值。

Input 类型 - url

url 类型用于应该包含 URL 地址的输入域。

在提交表单时，会自动验证 url 域的值。

Input 类型 - number

number 类型用于应该包含数值的输入域。

Input 类型 - range

range 类型用于应该包含一定范围内数字值的输入域。

range 类型显示为滑动条

Input 类型 - Date Pickers（数据检出器）

HTML5 拥有多个可供选取日期和时间的新输入类型：

date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间（小时和分钟）
datetime - 选取时间、日、月、年（UTC 时间）
datetime-local - 选取时间、日、月、年（本地时间）

Input 类型 - search

search 类型用于搜索域，比如站点搜索或 Google 搜索。

search 域显示为常规的文本域。

6.HTML5表单元素

HTML5 的新的表单元素：

HTML5 拥有若干涉及表单的元素和属性。

本章介绍以下新的表单元素：

datalist
keygen
output

datalist 元素

datalist 元素规定输入域的选项列表。

列表是通过 datalist 内的 option 元素创建的。

如需把 datalist 绑定到输入域，请用输入域的 list 属性引用 datalist 的 id：

keygen 元素

keygen 元素的作用是提供一种验证用户的可靠方法。

keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。

私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。

目前，浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。

output 元素

output 元素用于不同类型的输出，比如计算或脚本输出

7．HTML5表单属性

HTML5 的新的表单属性

新的 form 属性：

autocomplete
novalidate

新的 input 属性：

autocomplete
autofocus
form
form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
height 和 width
list
min, max 和 step
multiple
pattern (regexp)
placeholder
required

更多相关推荐：

县委中心组学习型党组织建设学习笔记内容之二: 县委中心组学习型党组织建设学习笔记内容之二——什么是学习型政党学习型政党以人的素质提高和人的全面发展为创建的根本宗旨，并最终以党员干部素质率先发展影响、辐射、带动全社会公民素质的全面发展，其实质是一种现代化建设…
陈德权中心组学习笔记: 一、要乐于学习。要沉入进去、静下心来，少一些应酬，多一些读书；少一些浮躁，多一些沉静。要通过学习，提高自身工作能力和水平，解决实际问题，体会到学习的快乐；二、要善于学习。学习不仅是汲取知识的途径，而其本身就是一…
县委中心组学习型党组织建设学习笔记内容之五: 县委中心组学习型党组织建设学习笔记内容之五——学习型党组织建设学习的主要内容（一）坚持用中国特色社会主义理论体系武装头脑。深入学习马克思列宁主义、毛泽东思想，深入学习邓小平理论、“三个代表”重要思想以及科学发展…
10月份团课学习笔记: 时间：20xx年x月x日地点：学习室参加人：全体团员授课人：郑大伟内容：一、《六个“为什么”－－对几个重大问题的回答》连载五：充满活力的基本经济制度二、《关于加强和改进新形势下党建若干重大问题决定》内容一：随着…
NS2学习笔记_tcl和Otcl: NS2学习笔记——tcl和OtclTCL语言1.解释性语言，可以使用命令行或者脚本的方式运行2.以#和;#为注释符，其中#只能在行首注释，;#可以在行尾注释，例如：#注释seti100setj100;#注释3.…
两会学习笔记、学习体会、学习心得-----大学生版: 自两会闭幕至今已快接近一个月了，在这段时间通过参加“深入学习实践科学发展观”的学习、调研、分析、讨论，我深刻地感到：科学发展观有着丰富深刻的内涵，十七大报告明确指出：“科学发展观，第一要义是发展，核心是以人为本…
20xx年政治学习笔记范文: 20xx年政治学习笔记范文20xx年是全面完成“十一五”规划任务的最后一年，也是推动新城经济社会又好又快发展的关键一年。当前，国际经济出现复苏迹象，我国经济回升向好，中央继续实施积极的财政政策和适度宽松的货币政…

20xx政治学习笔记(完整) 2吕军: 政治学习吕军政治学习第一次学习两会精神促进教育发展两会是中国的窗口关注中国就不能不关注两会学校组织全体教职工收看了两会特别报道意义十分重大当前教育背景下作为教师只有不断地学习不断地丰富自己才能让自己不断地发展以...
新课程标准学习笔记: 新课程标准的理念与创新第一讲新课程的基本理念引言课程改革是教育改革的核心课程创新因而是教育制度创新的重点本次改革的宗旨是构建具有中国特色的现代化的基础教育课程体系贯穿本轮课程改革的核心理念是为了中华民族的复兴为...
20xx天津公务员考试申论写作公文范文之学习笔记: 20xx天津公务员考试申论写作公文范文之学习笔记天津公务员考试公务员考试申论中的贯彻执行类题目历来是广大考生成公路上的拦路虎因为贯彻执行类题类目庞杂涵盖范围广体裁不限导致考生复习难度加大在此中公教育专家为各位考...
十八大学习笔记: 学习党的十八大笔记学精神转作风干实事谋发展学习党的十八大报告对于基层来说就是要学精神转作风干实事谋发展学精神学习党的十八大精神就是要把十八大精神作为旗帜作为纲领始终贯彻到各项工作中去紧密联系工作思想实际坚持学以...
学习笔记学习心得: 农村基层干部廉洁履行职责若干规定试行为进一步加强农村党风廉政建设促进农村基层干部廉洁履行职责维护农村集体和农民群众利益推动农村科学发展促进农村社会和谐依据中国共产党章程和其他有关党内法规国家法律法规制定本规定总...

热门关注