HTML5基础知识点笔记
Posted 过往将来
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML5基础知识点笔记相关的知识，希望对你有一定的参考价值。
章节目录
html5 简介
- html5是html最新的修订版本。2014年10月由万维网联盟(w3c)完成标准制定，为了更完美的显示web页面
- 现代的浏览器都支持 html5 ,此外，所有浏览器，包括旧的和最新的，对无法识别的元素都会作为内联元素自动处理
html5 比 html 新增的元素
canvas标签定义图形，绘制图画，该标签基于javascript的绘图API- 用于媒介回放的
video和audio元素 - html5 对本地离线存储有更好的支持
新多媒体元素：
audio定义音频内容，video定义视频(video 或者 movie)source定义多媒体资源video和audioembed定义嵌入内容，比如插件track为诸如video 和 Audio元素之类的媒介规定外部文本轨道
新的表单元素：
datalist定义选项列表，于input元素配合使用该元素，定义input可能的值keygen规定用于表单的密匙对生成器字段output定义不同类型的输出，比如脚本的输出
html5 新的特殊元素
article定义页面独立的内容区域，aside定义页面侧边栏内容footer定义section 或者 doucument 的页脚nav定义导航链接的部分section定义文档中的节(section,区段)- 新的表单控件，如，calendar ,date,time,email,url,search
- html5 定义了八个新的html语义(semantic)元素，
header, section, footer, aside, nav, main, article, figure {display: block;}
html5 中的 canvas
- canvas 元素用于图形的绘制，通过脚本，通常是 JavaScript 来完成，同时，canvas 标签只是图形容器，即必须使用脚本来绘制图形
简单的示例 <canvas id="myCanvas" width="200" height="100"></canvas>
一个画布在网页中是一个矩形框，通过canvas 元素来绘制
注意：默认情况下，canvas 元素没有边框和内容，
- canvas 标签通常需要指定一个id 属性(脚本中经常饮用)，
- width 和 height 属性定义的画布的大小在一个html页面中可以使用多个 canvas 元素
- canvas 元素本身是没有绘图能力的，所有的绘制工作必须在 JavaScript 内部完成
- SVG指可伸缩矢量图形(Scalable Vector Graphics),用于定义网络的基于矢量的图形
- SVG使用XML格式定义图形，SVG图像在放大或改变尺寸的情况下其图形质量不会有损失
1. var c=document.getElementById("myCanvas"); 找到canvas 元素
2. var ctx=c.getContext("2d"); 创建canvas 实例对象，getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
3. ctx.fillStyle="#FF0000"; 设置fillStyle 属性可以是 CSS颜色，渐变，或团，fillstyle 默认是黑色
4. ctx.fillRect(0,0,150,75); fillRect(x,y,width,height) 定义了矩形当前的填充方式
5. canvas 是一个二维网格，左上角坐标为(0,0),
6. canvas 路径 ，在canvas 上画线，使用两种方法，moveTo(x,y) 定义线条开始坐标，linTo(x,y)定义线条结束坐标，stroke() 方法来结束线条的绘制
7. canvas 文本 font 定义字体，fillText(text,x,y) 在canvas 上绘制实心的文本
HTML 拖拽操作
- 拖放Drag和drop 即抓取对象以后拖到另一个位置， html5标准的组成部分，任何元素都能够拖放
- Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持拖动。
HTML拖放实例：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>拖动 RUNOOB.COM 图片到矩形框中:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img loading="lazy" id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
</html>
HTML拖放实例解析
- 设置元素为可拖动：
<img draggable="true"> ：为了使元素可拖动 将 draggable 属性设置为 true - ondragstart 属性调用了drag(event),它规定了被拖动的数据，
- dataTransfer.setData() 方法设置被拖数据的数据类型和值：
function drag(ev){ ev.dataTransfer.setData("Text",ev.target.id); }
text 是DOMString 表示要添加到 drag object 的拖动数据的类型，值是可拖动元素的id("drag1")
- 当放置被拖动数据时，会发生 drop 事件，在实例中，ondrop属性调用了 drop(event);
function drop(ev){
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
- 调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
- 通过 dataTransfer.getData(“Text”) 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。被拖数据是被拖元素的 id (“drag1”).把被拖元素追加到放置元素（目标元素）中
Geolocation(地理定位) 用于定位用户的位置
- HTML5 Geolocation API 用于获取用户的地理位置(需要用户允许，否则用户信息不可用),Internet Explorer 9+, Firefox, Chrome, Safari 和 Opera 支持Geolocation（地理定位）.
- Geolocation（地理定位）对于拥有 GPS 的设备，比如 iPhone，地理定位更加精确。
地理定位实例分析：
var x=document.getElementById("demo");
function getLocation()
{
检测是否支持地理定位:如果支持，则运行getCurrentPosition()方法，如果不支持，则显示“该浏览器不支持获取地理定位”
if (navigator.geolocation)
{
如果 getCurrentPosition()方法 运行成功，则向参数 showPosition中规定的函数返回一个 coordinates 对象
navigator.geolocation.getCurrentPosition(showPosition);
}
else
{
x.innerHTML="该浏览器不支持获取地理位置。";
}
}
function showPosition(position)
{
x.innerHTML="纬度: " + position.coords.latitude +
"<br>经度: " + position.coords.longitude;
}
地理定位处理错误和拒绝
getCurrentPosition() 方法的第二个参数用于处理错误。它规定当获取用户位置失败时运行的函数：
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="用户拒绝对获取地理位置的请求。"
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="位置信息是不可用的。"
break;
case error.TIMEOUT:
x.innerHTML="请求用户地理位置超时。"
break;
case error.UNKNOWN_ERROR:
x.innerHTML="未知错误。"
break;
}
}
Permission denied - 用户不允许地理定位
Position unavailable - 无法获取当前位置
Timeout - 操作超时
getCurrentPosition() 方法 - 始终会返回 latitude、longitude 以及 accuracy 属性。
video 视频，网站上的视频大多数是通过插件 flash 来显示的，然而，并非所有浏览器都拥有同样的插件
- html5规定了一种通过video 元素来包含视频的标准方法,Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持 元素.
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>
video 元素提供了播放，暂停和音量控件来控制视频，同时video 元素也提供了width 和 height 属性来控制视频的尺寸，
如果设置的高度和宽度，所需要的视频空间会在页面加载时保留，
如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能在加载时保留特定的空间，页面就会根据原始视频的大小而改变
video 标签间插入的内容是提供给不支持video 元素的浏览器显示的，
video 元素支持多个 source 元素，source元素可以链接给不同的视频文件，浏览器将使用第一个可识别的格式
video 元素支持三种视频格式，MP4,WebM,Ogg
实例：<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<div style="text-align:center">
<button onclick="playPause()">播放/暂停</button>
<button onclick="makeBig()">放大</button>
<button onclick="makeSmall()">缩小</button>
<button onclick="makeNormal()">普通</button>
<br>
<video id="video1" width="420">
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
您的浏览器不支持 HTML5 video 标签。
</video>
</div>
<script>
var myVideo=document.getElementById("video1");
function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function makeBig()
{
myVideo.width=560;
}
function makeSmall()
{
myVideo.width=320;
}
function makeNormal()
{
myVideo.width=420;
}
</script>
</body>
</html>
实例分析:video 和 audio 元素同样拥有方法，属性和事件
video 和 audio 元素的方法，属性和事件可以使用 JavaScript 进行控制。
audio 音频，HTML5提供了播放音频文件的标准，到现在为止，大多数音频都是通过插件，Flash 来播放的，
但是，并非所有浏览器都有相同的插件，于是，HTML5规定了在网页上嵌入音频元素的标准，即使用 audio 元素
在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本 。
音频格式：mp3 ，OGG，wav
<audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件
input 输入类型
1. color 类型 用于在input字段主要用于选取颜色 ：选择你喜欢的颜色: <input type="color" name="favcolor">
2. date 类型:允许你从一个日期选择器选择一个日期，生日：<input type="date" name="bday">
3. datetime 类型：允许你选择一个日期(utc时间) ,生日 (日期和时间): <input type="datetime" name="bdaytime">
4. datetime-local 类型 ：允许选择一个日期和时间(无时区)，生日 (日期和时间): <input type="datetime-local" name="bdaytime">
5. email 类型 ：用于应该包含e-mail地址的输入域，E-mail: <input type="email" name="email"> 提交表单时，会自动验证email域的值是否合法有效
6. month类型 ：允许选择一个月份，生日 (月和年): <input type="month" name="bdaymonth">
7. number类型：用于应该包含数值的输入域，还能够设定对所接受的数字的限定 数量 ( 1 到 5 之间 ): <input type="number" name="quantity" min="1" max="5">
8. range类型：用于包含一定范围内数字值的输入域，range类型显示为滑动条 <input type="range" name="points" min="1" max="10">。
9. max -规定允许的最大值，min-规定允许的最小值，step-规定合法的数字间隔，value-规定默认值
10.search类型：用于搜索域，比如站点搜索和Googl搜索 Search Google: <input type="search" name="googlesearch">
11.tel类型 ：定义输入电话号码字段， 电话号码: <input type="tel" name="usrtel">
12.time 类型;允许选择一个时间 选择时间: <input type="time" name="usr_time">
13.url类型：用于应该包含URL地址的输入域，在提交表单时，会自动验证URL域的值 添加您的主页: <input type="url" name="homepage">
14.week 类型：允许你选择周和年 选择周: <input type="week" name="week_year">
HTML5新的表单元素
1. datalist ,keygen,output 不是所有浏览器都支持html5 新的表单元素，但可以使用他们，即使浏览器不支持表单属性，仍然可以显示为常规的表单元素
2. datalist 元素规定输入域的选项列表，规定 form 或 input 域应该拥有自动完成功能，
3. 当用户在<input> 元素使用<datalist>预定义值:
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
4. kengen元素的作用时提供验证用户的可靠方法，keygen标签规定用于表单的密匙对生成器，
5. keygen生成两个键，一个是私有的，一个公开的.私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。
6. 公钥可用于之后验证用户的客户端证书（client certificate）。
<form action="demo_keygen.asp" method="get">
用户名: <input type="text" name="usr_name">
加密: <keygen name="security">
<input type="submit">
</form>
output 元素，output 元素用于不同类型的输出，比如计算或者脚本输出
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100 +
<input type="number" id="b" value="50">=
<output name="x" for="a b"></output>
</form>
以上是关于HTML5基础知识点笔记的主要内容，如果未能解决你的问题，请参考以下文章