HTML5知识点总结
参照W3Cschool网站上的内容，将HTML5的知识点进行了大致梳理，详情请移步：
https://www.w3cschool.cn/html5/
HTML5知识点总结
- 开始学习HTML5
- HTML5浏览器支持
- HTML5新元素
|
|
标签 |
描述 |
| 标签定义图形，比如图表和其他图像，该标签基于JS的绘画API |
||
| 新多媒体元素 |
定义音频内容 |
|
| 定义视频(video或者movie) |
||
| |
定义多媒体资源 |
|
| 定义嵌入的内容，比如插件 |
||
| 为诸如 |
||
| 新表单元素 |
定义选项列表。与input元素配合使用，来定义input可能的值。 |
|
| |
规定用于表单的密钥对生成字段。 |
|
| 定义不同类型的输出，比如脚本的输出。 |
||
| 新的语义和结构元素 |
|
定义页面独立的内容区域 |
| 定义页面的侧边栏内容 |
||
| 允许设置一段文本，使其脱离其父元素的文本方向设置 |
||
| |
定义命令按钮，比如单选按钮、复选框或按钮 |
|
| |
用于描述文档或文档某个部分的细节 |
|
| 定义对话框，比如提示框 |
||
| |
标签包含details 元素的标题 |
|
| |
规定独立的流内容（图像图表照片代码等） |
|
| |
定义 |
|
| 定义section或decument的页脚 |
||
| |
定义文档的头部区域 |
|
| 定义带有记号的文本 |
||
| |
定义度量衡，仅用于一直最大和最小的度量 |
|
| 定义运行中的进度 |
||
| 定义任何类型的任务的进度 |
||
| 定义ruby注释 |
||
|
|
||
|
|
||
|
|
定义文档中的节 |
|
| 定义日期或时间 |
||
| |
规定在文本中的何处适合添加换行符 |
- HTML5Canvas
画布。该元素用于图形的绘制，标签只是图形容器，必须使用脚本来绘制图形，脚本通常是JavaScript。
默认情况下该元素没有边框和内容。
绘制画布：”myCanvas” width=”200” height=”200”>
Canvas元素本身是没有绘图能力的，所有的绘制工作必须在JavaScript内部完成。
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);//把一幅图像放置在画布上
- HTML5 内联SVG
SVG是可缩放矢量图形，是基于可扩展标记语言，用于描述二维矢量图形的一种图形格式。
使用XML格式定义图形
SVG图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG是万维网联盟的标准
SVG与DOM和XSL之类的W3C标准是一个整体。
- HTML5拖放
拖放的目的是可以让你将某个对象放置到你想要放置的位置。
拖放（Drag和drop）是HTML5标准的组成部分，任何元素都能够拖放。
设置元素为可拖放，要把draggable属性设置为true：
“true”>
拖动什么：ondragstart()和setData()
规定元素当被拖动时，会发生什么。
- HTML5地理定位
HTML5 Geolocation用于定位用户的位置。
通过请求一个位置信息，用户同意后，浏览器会返回一个包含经度和纬度的位置信息。
如果支持地理定位，则运行getCurrentPosition()方法，以下是返回的数据：
- HTML5 Video（视频）
大多数视频是通过插件的方式。
HTML5视频工作例子：
”320" height=”240” controls>
- HTML5 Audio（音频）
同视频内容。
- HTML5 Input类型
HTML5拥有多个新的表单输入类型：
color：用于选取颜色
”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：允许选择周和年
- HTML5表单元素
属性规定form或input域应该拥有自动完成功能，当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项
使用元素的列表属性与
- HTML5表单属性
autocomplete：规定form或input域应该拥有自动完成的功能，用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。
novalidate：规定表单在提交时不验证form或input域。
新属性
autocomplete
autofocus：规定在页面加载时，域自动获得焦点
form：规定输入域所属的一个或多个表单
formaction：用于描述表单提交的URL地址。
formenctype：描述表单提交到服务器的数据编码，只对form表单中method=post的表单
formnovalidate：会覆盖