HTML5新特性的学习笔记
HTML 超文本标记语言: HyperText Markup Language
这份学习笔记的主要内容是HTML5的新标签
基于菜鸟教程的个人向学习笔记
菜鸟教程
文章目录
什么是HTML5
HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。
***注意：*对于中文网页需要使用 声明编码，否则会出现乱码。
HTML5画布标签
Canvas是基于JS代码运行的标签，这是一个画布，允许在网页上绘制图形。
Canvas是一个容器，也可以叫做画布，脚本（通常是JS代码）在Canvas上面绘制图形
Canvas是一个矩形框，没有描边。实际上，Canvas是一个二位网格，左上角坐标为（0，0）
画矩形
<canvas id="myCanvas">你的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>
通过fillRect可以很轻松地绘制矩形，其参数是矩形的左上角左标和矩形的大小。
这段代码可以在页面上绘制一个红色矩形。
画线
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>
moveTo的参数是路径的起始点，lineTo的参数是路径的终点，stroke绘制路径。
这段代码可以在页面上绘制一条路径（一条线）。
画圆
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(100,100,50,0,0.5*Math.PI);
ctx.stroke();
</script>
beginPath是起点，arc的参数是（x,y,r,start,stop），意思是圆心坐标，圆的半径，起始点和角度。值得注意的是，起始点为0时，位于圆的四分之一点处（下图中红圈标出的位置）；角度为2*Math.PI时，可以绘制一个完整的圆。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hzeMLN5O-1657712577521)(/home/ljx/.config/Typora/typora-user-images/image-20220713112533851.png)]
这段代码会在页面上绘制一个圆（或者半圆）。
画文字
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);
</script>
srokeTest是空心的文字，fillText是实心的文字。其参数是文字字符串，左上角坐标。
这段代码会在页面上绘制一些文字。
渐变
渐变是最重要的绘制，主要是其很好看233
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(0.5,"yellow");
grd.addColorStop(1,"orange");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
</script>
上述代码的grd是线性渐变器,并制定了三个颜色停止。其中addColorStop的第一个参数是比例，范围是[0,1]，第二个参数是颜色。
记住要把context的填充方法设置为grd。
这段代码会在页面上会绘制一个渐变的矩形
HTML5多媒体标签
多媒体包括音频和视频标签，包括：
- audio 音频
- vidio 视频
- source 音频+视频
- embed 插件
- track 字幕
通常，多媒体标签需要搭配JS代码进行设置
音频
audio标签支持三种音频格式：MP3、Wav、Ogg
<audio controls>
<source src="horse.ogg" >
<source src="horse.mp3" >
您的浏览器不支持 audio 元素。
</audio>
可以在 <audio> 和 </audio> 之间放置文本内容，这些文本信息将会被显示在那些不支持 <audio> 标签的浏览器中。
视频
video标签支持三种视频格式：MP4、WebM、Ogg
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 video 标签。
</video>
可以在 <video> 和 </video> 之间放置文本内容，这些文本信息将会被显示在那些不支持 <vedio> 标签的浏览器中。
通用
embed标签是一个容器，用来嵌入插件
事实上，embed是一个非常全能的标签。
embed既可以播放视频，也可以播放音频，而且还能嵌入HTML页面（类似iframe）
嵌入图片
<embed type="image/jpg" src="https://static.runoob.com/images/runoob-logo.png" width="258" height="39">
嵌入HTML页面
<embed type="text/html" src="snippet.html" width="500" height="200">
嵌入视频
<embed type="video/webm" src="video.mp4" width="400" height="300">
字幕
track用来给视频添加字幕
track只支持.vtt格式文件
HTML5表单元素
在HTML5新增的表单元素包括以下几个：
- datalist
keygen（已弃用）- output
datalist
datalist是一个下拉列表，类似于select，不过可以自己输入内容获得提示
keygen
已经废弃的标签，用于加密
看不懂
output
output是一个很好玩的标签，用于计算input标签的输入结果。其计算方式要在form标签中自己定义。
0 100 + = ***HTML5表单输入
HTML5新增了许多类型的表单输入，配合已有的表单（form、select）一起使用
color
color标签是一个拾色器，用于输入一种颜色
选择你喜欢的颜色:date
date标签是一个日历，用于输入一个日期
生日:datetime
datetime标签是日历+时钟，用于输入准确的时间（带时区）
生日 (日期和时间):目前测试出来是有bug的，不能选择时间，猜测是deepin的问题
datetime-local
datetime-local标签和datetime标签很像，但它是不带时区的
生日 (日期和时间):email标签会自动检查输入的电子邮箱地址是否正确并报错。
E-mail:month
month标签也是一个日历，但没有日（day），它是不带时区的。
生日 ( 月和年 ):number
number标签输入一个int，而且会对其进行检查。
数量 ( 1 到 5 之间):range
range标签是一个滑动条
Points:url
url标签会对输入的网址进行检查
添加你的主页:HTML5表单属性
这是表单相关的最后一个内容，描述了表单元素的各个属性。
autocomplete
浏览器是否要记住已经输入过的数据？
novalidate
浏览器是否应该验证准备提交给服务器的数据？
autofocus
直接将浏览器的焦点放在这个元素上？非常愚蠢的设计
form
将某个表单输入框放在表单之外？看不出来有什么用
formenctype
发送数据的编码方式？
formmethod
发送数据的方式？（get、post）
pattern
正则检查
placeholder
提示输入域应该输入什么类型的值
required
输入域不能为空
step
输入域应该输入的数字间隔
HTML5语义和结构标签
article
article是一个单纯的文本标签，用于表述论坛帖子、博客文章、新闻故事和评论。
感觉和div没啥区别啊
Internet Explorer 9
Windows Internet Explorer 9(缩写为 IE9 )在2011年3月14日21:00 发布。
aside
aside是侧边栏标签，和article标签配合使用，表述与article内容相关的引用、侧边栏、广告、导航条等附属信息。
感觉也和div没啥区别啊
bdi
bdi标签设置了一段文本，将用户名从周围的文本方向设置中隔离出来。
菜鸟教程和W3C上的实例写的不清不楚的，我的理解是：用户的评论内容是无法预知的，某些内容可能会扰乱用户名的排版，而bdi标签则保护了用户名的排版，防止排版错乱。
- 用户 hrefs: 60 分
- 用户 jdoe: 80 分
- 用户 إيان: 90 分
command
只有IE9才能使用的标签，其他主流浏览器都不支持command标签
那这个标签有什么用吗？
details
只有IE9才能使用的标签，其他主流浏览器都不支持details标签
那这个标签有什么用吗？
figure
figure标签用来表述独立的流内容，它与文档流的位置应该是独立的。即便它被删除，也不应该对文档流产生影响。
figure标签主要表述这些内容：图像、图表、照片和代码。
其中figcaption的内容表述figure的题注。
footer
页脚标签，没啥好说的。
假如使用footer标签来插入联系信息，应该在 footer>元素内使用address标签。
header
页眉标签，也没啥好说的
header 标签不能被放在 footer、address 或者另一个 header 元素内部。
mark
代码高亮工具
Do not forget to buy milk today.
meter
meter标签定义度量衡，也被称为尺度（guage）
用于表征磁盘用量、查询结果的相关性
一般与progress标签配合使用，但不能代替progress标签
不懂有啥用到的地方
2 out of 10
60%
progress
progress显示进度条，基于JS代码，经常与meter标签配合使用
nav
nav是导航标签，用于导航栏，经常用到。
ruby
定义ruby注释（中文注音或者字符），就是给字上面标拼音。
没接触过过ruby，感觉很好玩
汉 字
section
section标签用来给文章分节，主要是给UI设计人员使用的。
WWF
The World Wide Fund for Nature (WWF) is....
wbr
wbr标签规定文本在哪里可以添加换行符，浏览器会优先选择wbr指定的位置进行换行，避免错误的换行导致排版错乱。
学习 AJAX ,您必须熟悉
HTML5拖放
拖动是个很常见的操作，经常需要将某张图片拖入某个地方~~（比如丢入回收站）~~
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;margin:10px;border:1px solid #aaaaaa;}
#div2 {width:350px;height:70px;padding:10px;margin: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)">
<img loading="lazy" id="drag1" src="https://m.runoob.com/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
如这段代码所示，被拖动的元素要指定一个开始事件(ondragstart)，接受元素的元素要指定悬停事件（ondragover）和接受事件（ondrag）。
在拖动过程中还涉及到两个元素之间的通信问题，解决方法也很简单，把id值放入ev.dataTransfer中即可。
这段代码展示如何将一张图片在两个div之间拖来拖去。
HTML5 Web存储
Web存储是一种不同于Cookie的本地存储方式。
Web存储以键值对方式存在。
Web存储分为两种对象：
- LocalStorage，可以永久保存在本地
- SessionStorage，关闭窗口即重置
附上例子：一个很简单的统计单击事件的小网页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function clickCounter()
{
if(typeof(Storage)!=="undefined")
{
if (localStorage.clickcount)
{
localStorage.clickcount=Number(localStorage.clickcount)+1;
}
else
{
localStorage.clickcount=1;
}
document.getElementById("result").innerHTML=" 你已经点击了按钮 " + localStorage.clickcount + " 次 ";
}
else
{
document.getElementById("result").innerHTML="对不起，您的浏览器不支持 web 存储。";
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">点我！</button></p>
<div id="result"></div>
<p>点击该按钮查看计数器的增加。</p>
<p>关闭浏览器选项卡(或窗口),重新打开此页面,计数器将继续计数(不是重置)。</p>
</body>
</html>
HTML5 WebSorcket
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
从图中可以看到，WebSocket无需每次都向服务器发送请求，从而减少了服务器的开销。
菜鸟教程上给出了一个实例：
浏览器页面：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script type="text/javascript">
function WebSocketTest()
{
if ("WebSocket" in window)
{
alert("您的浏览器支持 WebSocket!");
// 打开一个 web socket
var ws = new WebSocket("ws://localhost:9998/echo");
ws.onopen = function()
{
// Web Socket 已连接上，使用 send() 方法发送数据
ws.send("发送数据");
alert("数据发送中...");
};
ws.onmessage = function (evt)
{
var received_msg = evt.data;
alert("数据已接收...");
};
ws.onclose = function()
{
// 关闭 websocket
alert("连接已关闭...");
};
else
{
// 浏览器不支持 WebSocket
alert("您的浏览器不支持 WebSocket!");
}
}
</script>
</head>
<body>
<div id="sse">
<a href="javascript:WebSocketTest()">运行 WebSocket</a>
</div>
</body>
</html>
安装pywebsocket模拟服务器：
git clone https://github.com/googlearchive/pywebsocket
python setup.py build
sudo python setup.py install
sudo python standalone.py -p 9998 -w ../example/
然后就可以演示WebSocket了。
结束
7月13日，完成对HTML5的学习。
2312
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
