HTML5新特性的学习笔记

HTML 超文本标记语言: HyperText Markup Language

这份学习笔记的主要内容是HTML5的新标签
基于菜鸟教程的个人向学习笔记
菜鸟教程

文章目录

HTML5新特性的学习笔记
- - 什么是HTML5
  - HTML5画布标签
  - - 画矩形
    - 画线
    - 画圆
    - 画文字
    - 渐变
  - HTML5多媒体标签
  - - 音频
    - 视频
    - 通用
  - HTML5表单元素
  - - datalist
    - keygen
    - output
  - HTML5表单输入
  - - color
    - date
    - datetime
    - datetime-local
    - email
    - month
    - number
    - range
    - url
  - HTML5表单属性
  - - autocomplete
    - novalidate
    - autofocus
    - form
    - formenctype
    - formmethod
    - pattern
    - placeholder
    - required
    - step
  - HTML5语义和结构标签
  - - article
    - aside
    - bdi
    - command
    - details
    - figure
    - footer
    - header
    - mark
    - meter
    - progress
    - nav
    - ruby
    - section
    - wbr
  - HTML5拖放
  - HTML5 Web存储
  - HTML5 WebSorcket
- 结束

什么是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

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的题注。

Fig1. - A view of the pulpit rock in Norway.

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，感觉很好玩

汉 (Han) 字 (zi)

section

section标签用来给文章分节，主要是给UI设计人员使用的。

WWF

The World Wide Fund for Nature (WWF) is....

wbr

wbr标签规定文本在哪里可以添加换行符，浏览器会优先选择wbr指定的位置进行换行，避免错误的换行导致排版错乱。

学习 AJAX ,您必须熟悉 HttpRequest 对象。

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 socketvar 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(){ // 关闭 websocketalert("连接已关闭..."); };else{// 浏览器不支持 WebSocketalert("您的浏览器不支持 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的学习。