参照W3Cschool网站上的内容,将HTML5的知识点进行了大致梳理,详情请移步:
https://www.w3cschool.cn/html5/
HTML5知识点总结
| 标签 | 描述 |
<canvas>新元素 | <canvas> | 标签定义图形,比如图表和其他图像,该标签基于JS的绘画API |
新多媒体元素 | <audio> | 定义音频内容 |
<video> | 定义视频(video或者movie) | |
<source> | 定义多媒体资源<video>和<audio> | |
<embed> | 定义嵌入的内容,比如插件 | |
<track> | 为诸如<video>和<audio>元素之类的媒介规定外部文本轨道 | |
新表单元素 | <datalist> | 定义选项列表。与input元素配合使用,来定义input可能的值。 |
<keygen> | 规定用于表单的密钥对生成字段。 | |
<output> | 定义不同类型的输出,比如脚本的输出。 | |
新的语义和结构元素 | <article> | 定义页面独立的内容区域 |
<aside> | 定义页面的侧边栏内容 | |
<bdi> | 允许设置一段文本,使其脱离其父元素的文本方向设置 | |
<command> | 定义命令按钮,比如单选按钮、复选框或按钮 | |
<details> | 用于描述文档或文档某个部分的细节 | |
<dialog> | 定义对话框,比如提示框 | |
<summary> | 标签包含details 元素的标题 | |
<figure> | 规定独立的流内容(图像图表照片代码等) | |
<figcaption> | 定义<figure>元素的标题 | |
<footer> | 定义section或decument的页脚 | |
<header> | 定义文档的头部区域 | |
<mark> | 定义带有记号的文本 | |
<meter> | 定义度量衡,仅用于一直最大和最小的度量 | |
<nav> | 定义运行中的进度 | |
<progress> | 定义任何类型的任务的进度 | |
<ruby> | 定义ruby注释 | |
<rt> |
| |
<rp> |
| |
<section> | 定义文档中的节 | |
<time> | 定义日期或时间 | |
<wbr> | 规定在文本中的何处适合添加换行符 |
画布。该元素用于图形的绘制,标签只是图形容器,必须使用脚本来绘制图形,脚本通常是JavaScript。
默认情况下该元素没有边框和内容。
绘制画布:<canvas id=”myCanvas” width=”200” height=”200”></canvas>
Canvas元素本身是没有绘图能力的,所有的绘制工作必须在JavaScript内部完成。
<script>
var c = document.getElementById(“myCanvas”);//找到<canvas>元素
var ctx = c.getContent(“2d”);//该对象是内建的HTML5对象,拥有多种绘制路径 、矩形、图形、字符以及方法
ctx.fillStyle = “#FF0000”;//可以设置CSS颜色渐变或者图案
ctx.fillRect(0,0,150,75);//该方法定义了矩形当前的填充方式,绘制坐标,在画布上绘制150*75的矩形,从左上角(0,0)开始
</script>
Canvas路径:
两种方法:moveTo(x,y):定义线条开始坐标;lineTo(x,y):定义线条结束坐标。
在绘制线条时,使用storke()方法。例子:定义开始坐标和结束坐标,然后使用storke()方法来绘制线条:
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
绘制圆形:arc(x,y,start,stop)
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
Canvas文本:
属性和方法:
font:定义字体
fillText(text,x,y):在canvas上绘制实心的文本
strokeText(text,x,y):在canvas上绘制空心的文本
Canvas渐变:
两种方法:
createLinearGradient(x,y,x1,y1):创建线条渐变
createRadialGradient(x,y,r,x1,y1,r1):创建一个径向/圆渐变,参数解释:x表示渐变的开始圆的x坐标,r表示开始圆的半径,x1表示渐变的结束圆的x坐标,r1表示结束圆的半径
当我们使用渐变对象时,必须使用两种或者两种以上的颜色。addColorStop()方法指定颜色停止,参数使用坐标来描述,可以是0至1.
Canvas图像:
drawImage(image,x,y);//把一幅图像放置在画布上
SVG是可缩放矢量图形,是基于可扩展标记语言,用于描述二维矢量图形的一种图形格式。
使用XML格式定义图形
SVG图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG是万维网联盟的标准
SVG与DOM和XSL之类的W3C标准是一个整体。
拖放的目的是可以让你将某个对象放置到你想要放置的位置。
拖放(Drag和drop)是HTML5标准的组成部分,任何元素都能够拖放。
设置元素为可拖放,要把draggable属性设置为true:
<img draggable = “true”>
拖动什么:ondragstart()和setData()
规定元素当被拖动时,会发生什么。
HTML5 Geolocation用于定位用户的位置。
通过请求一个位置信息,用户同意后,浏览器会返回一个包含经度和纬度的位置信息。
如果支持地理定位,则运行getCurrentPosition()方法,以下是返回的数据:
大多数视频是通过插件的方式。
HTML5视频工作例子:
<video width=”320" height=”240” controls>
<source src=”movie.mp4” tupe=”video/mp4”>
</video>
<video>元素通过controls属性来提供播放、暂停和音量控制来控制视频。同时提供了视频显示的尺寸。
同视频内容。
HTML5拥有多个新的表单输入类型:
color:用于选取颜色
<input type=”color” name=”myColor”>
date:允许从一个日期选择器中选择一个日期
datetime:允许选择一个日期(UTC时间)
datetime-local:允许选择一个日期和时间(无时区)
email:用于包含e-mail地址的输入域,在提交表单时,会自动验证e-mail的值是否合法有效
month:允许选择一个月份
number:用于应该包含数值的输入域,可以通过max min step:规定合法的数字间隔 value来对数字进行限定
range:包含一定范围内数字值的输入域,显示为滑动条,属性值同上
search:用于定义搜索域
tel:定义输入电话号码字段
time:允许选择一个时间
url:用于应该包含url地址的输入域
week:允许选择周和年
<datalist>属性规定form或input域应该拥有自动完成功能,当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项
使用<input>元素的列表属性与<datalist>元素绑定。
<form>新属性
autocomplete:规定form或input域应该拥有自动完成的功能,用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项。
novalidate:规定表单在提交时不验证form或input域。
<input>新属性
autocomplete
autofocus:规定在页面加载时,域自动获得焦点
form:规定输入域所属的一个或多个表单
formaction:用于描述表单提交的URL地址。
formenctype:描述表单提交到服务器的数据编码,只对form表单中method=post的表单
formnovalidate:会覆盖<form>元素的novalidate属性
formmethod:定义了表单的提交方式:post
height and width
list
min and max:用来限制包含数字或日期的input类型规定约束
step
multiple:设定可以选择多个值:Select images: <input type="file" name="img" multiple>
pattern
placeholder
required
一个语义元素能够清楚的描述其意义给浏览器和开发者。
无语义元素:<div>和<span>
语义元素:<form><table><img>
<section>:定义文档中的节,比如章节、页眉、页脚或文档中的其他部分
<nav>:定义导航链接的部分,但不是所有的链接都包含在其中
<aside>:定义页面主区域内容之外的内容,比如侧边栏
以上的元素都是块级元素(除了<figcaption>)。我们在使用时,需要在CSS文件中设置:
header, section, footer, aside, nav, article, figure { display: block; }
IE8无法使用这些语义标签
一个比cookie更好的本地存储方式。
可以在本地存储用户的浏览数据。数据以键值对存在,web网页的数据只允许该网页访问使用。
客户端存储数据的两个对象:
localStorage:没有时间限制的数据存储,不管时间过去多久数据依然可用。
//存储
localStorage.sitename = “W3Cschool在线教程”;
//查找
Document.getElementById(“result”).innerHTML = localStorage.sitename;
可供使用的API(session也适用):
保存数据:localStorage.steItem(key,value);
读取数据:localStorage.getItem(key);
删除单个数据:localStorage.removeItem(key);
删除所有数据:localStorage.clear();
得到某个索引的key:localStorage.key(index);
sessionStorage:针对一个session的数据存储,当用户关闭浏览器窗口后,数据会被删除。
使用HTML5,通过创建cache manifest文件,可以轻松的创建web应用的离线版本,可以让我们在没网的情况下进行访问。
应用程序缓存的优势:
离线存储——用户可在应用离线时使用它们
速度——已缓存资源加载的更快
减少服务器负载——浏览器将只从服务器下载更新过时或更改过的资源
如需启用应用程序缓存,在文档的<htnl>标签中包含manifest属性:
<!DOCTYPE HTML>
<html manifest = “demo.appcache”>
...
</html>
manifest文件新的建议文件扩展名是:”.appcache”。
Manifest文件是最简单的文本文件,告知浏览器被缓存的内容以及不缓存的内容
分为三个部分:
CACHE MANIFEST——在此标题下列出的文件将在首次下载后进行缓存
NETWORK——在此标题下列出的文件需要与服务器连接,且不会被缓存
FALLBACK——在此标题下列出的文件规定当页面无法访问时回退页面
更新缓存:
一旦应用被缓存,它就会保持缓存直到发生下列情况:
用户清空浏览器缓存
Manifest文件被修改
由程序来更新应用缓存
Web worker是运行在后台的JavaScript,不会影响页面的性能,更好的解释是,可以使用web worker提供的一种简单的方法来为web内容在后台线程中运行脚本,这些线程在执行任务的过程中并不会干扰用户界面。
服务器发送时间(Server-sent Events)是基于WebSocket协议的一种服务器向客户端发送时间和数据的单向通讯。允许网页获得来自服务器的更新。