HTML5基础知识

一声笙笙

已于 2022-07-07 11:50:54 修改

阅读量693

点赞数

文章标签： html5 前端

于 2022-07-07 11:44:56 首次发布

本文链接：https://blog.csdn.net/l_537/article/details/125640021

版权

HTML5

1、HTML5 <!DOCTYPE>

<!doctype> 声明必须位于 HTML5 文档中的第一行,使用非常简单:
<!DOCTYPE html>

2、HTML5的改进

新元素
新属性
完全支持CSS3
Video和Audio
2D、3D绘图
本地存储
本地SQL数据
Web应用

3、HTML5多媒体

video
<audio>

4、HTML5应用

本地数据存储
访问本地文件
本地SQL数据
缓存引用
JavaScript工作者
XHTMLHttpRequest 2

5、HTML5图形

绘制简单的图形
使用<canvas>元素
使用内联SVG
使用CSS3 2D转换、CSS3 3D转换

6、HTML5使用CSS3

新选择器
新属性
动画
2D\3D转换
圆角
阴影效果
可下载的字体

7、语义元素

在这里插入图片描述

8、HTML5表单

新表单元素、新属性、新输入类型、自动验证

9 、已移除元素

在这里插入图片描述

10、`Canvas`

<canvas>定义图形，必须使用JavaScript脚本来绘制图形
默认情况下<canvas>元素没有边框和内容，可以使用style属性来添加边框
使用JavaScript来绘制图形

首先，找到 <canvas> 元素:
var c=document.getElementById("myCanvas");
然后，创建 context 对象：
var ctx=c.getContext("2d");
设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。
ctx.fillStyle="#FF0000";
fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。
ctx.fillRect(0,0,150,75);

<canvas>坐标
- <canvas>是一个二维网络
- <canvas>的左上角坐标为(0,0)
<canvas> 路径
- moveTo(x,y)定义线条开始坐标
- lineTo(x,y)定义线条结束坐标

定义开始坐标(0,0), 和结束坐标 (200,100)。然后使用 stroke() 方法来绘制线条:
![在这里插入图片描述](https://img-blog.csdnimg.cn/bb2c43d26423407db3509054b57f7123.png)


JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

<canvas>绘制圆形
- arc(x,y,r,start,stop)

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

<canvas>文本
- foot定义字体
- fillText(text,x,y)在canvas上绘制实心的文本

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);

strokeText(text,x,y) 在 canvas 上绘制空心的文本

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);

<canvas>渐变
- createLinearGradient(x,y,x1,y1) - 创建线条渐变

当我们使用渐变对象，必须使用两种或两种以上的停止颜色。

addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.

使用渐变，设置fillStyle或strokeStyle的值为 渐变，然后绘制形状，如矩形，文本，或一条线。

使用 createLinearGradient():
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
 
// 创建渐变
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
 
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

在这里插入图片描述

createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
 
// 创建渐变
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
 
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

在这里插入图片描述

Canvas图像
- 把一幅图像放置到画布上
- drawImage(image,x,y)

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);

11、`SVG`

SVG定义为可缩放矢量图形,在放大或改变尺寸的情况下图形质量不会有损失
HTML5支持内联SVG
HTML<avg>元素是SVG图形的容器
SVG有多种绘制路径、框、圆、文本和图形图像的方法
SVG优势
- 可通过文本编辑器来创建和修改
- 可被搜索、索引、脚本话或压缩
- 可伸缩的
- 可在任何的分辨率下被高质量的打印
- 可在图像质量不下降的情况下被放大
SVG 五角星
SVG有3种图形对象，分别是矢量图形，点阵图像，文本

<!DOCTYPE html>
<html>
<body>
 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
 
</body>
</html>

12、`SVG`与`Canvas`的区别

SVG 是一种使用 XML 描述 2D 图形的语言。
Canvas 通过 JavaScript 来绘制 2D 图形。
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

13、`SVG`与`Canvas`的比较

在这里插入图片描述

14、`MathML`

<math>...</math>
MathML 是数学标记语言，是一种基于XML（标准通用标记语言的子集）的标准，用来在互联网上书写数学符号和公式的置标语言。

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>菜鸟教程(runoob.com)</title>
   </head>
       
   <body>
       
      <math xmlns="http://www.w3.org/1998/Math/MathML">
               
         <mrow>
            <msup><mi>a</mi><mn>2</mn></msup>
            <mo>+</mo>
                               
            <msup><mi>b</mi><mn>2</mn></msup>
            <mo>=</mo>
                               
            <msup><mi>c</mi><mn>2</mn></msup>
         </mrow>
                       
      </math>
               
   </body>
</html>

15、`拖放Drag、Drop`

拖放是一种常见的特性，即抓取对象以后拖到另一个位置。
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
设置元素可拖放把 draggable 属性设置为 true
拖动什么 - ondragstart 和 setData()

dataTransfer.setData() 方法设置被拖数据的数据类型和值：

function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
}
Text 是一个 DOMString 表示要添加到 drag object 的拖动数据的类型。值是可拖动元素的 id ("drag1")。

放到何处 - ondragover
- ondragover 事件规定在何处放置被拖动的数据。默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。这要通过调用 ondragover 事件的 event.preventDefault() 方法：
进行放置 - ondrop

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")
把被拖元素追加到放置元素（目标元素）中

16、`Geolocation（地理定位）`

getCurrentPosition() 方法来获得用户的位置。

17、`Video(视频）`

<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 元素的浏览器显示的。
<video> 元素支持多个 <source> 元素. <source> 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式：
音频、视频的方法

18、`Audio（音频）`

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>

control属性供添加播放、暂停和音量控件
<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本。
<audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件

19、`新的Input类型`

color 类型用在input字段主要用于选取颜色

选择你喜欢的颜色: <input type="color" name="favcolor">

date 类型允许你从一个日期选择器选择一个日期。

 生日: <input type="date" name="bday">

datetime 类型允许你选择一个日期（UTC 时间）。

生日 (日期和时间): <input type="datetime" name="bdaytime">

datetime-local类型允许你选择一个日期和时间 (无时区).

生日 (日期和时间): <input type="datetime-local" name="bdaytime">

email类型用于应该包含 e-mail 地址的输入域。

E-mail: <input type="email" name="email">

month类型允许你选择一个月份。

生日 (月和年): <input type="month" name="bdaymonth">

number类型用于应该包含数值的输入域。

数量 ( 1 到 5 之间 ): <input type="number" name="quantity" min="1" max="5">

使用下面的属性来规定对数字类型的限定：
range类型用于应该包含一定范围内数字值的输入域。显示为滑动条。

<input type="range" name="points" min="1" max="10">

使用下面的属性来规定对数字类型的限定：
search类型用于搜索域，比如站点搜索或 Google 搜索。

Search Google: <input type="search" name="googlesearch">

tel定义输入电话号码字段:

电话号码: <input type="tel" name="usrtel">

time类型允许你选择一个时间

选择时间: <input type="time" name="usr_time">

url类型用于应该包含url地址的输入域
在提交表单时会自动验证url域的值

添加您的主页: <input type="url" name="homepage">

week类型允许你选择周和年

选择周: <input type="week" name="week_year">

20、`新的表单元素`

<datalist>元素
- <datalist>规定输入域的选项列表
- <datalist>属性规定form或input域应该拥有自动完成的功能。

<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>

在这里插入图片描述

<keygen>元素
- <keygen>元素的作用是提供一种验证用户的可靠方法
- <keygen>标签规定用于表单的密钥对生成器字段。当提交表单时，会生成两个键，一个是私钥，一个是公钥，私钥存储于客户端，公钥存储则被发送到服务器。公钥用于之后验证用户的客户端证书

带有keygen字段的表单:

<form action="demo_keygen.asp" method="get">
用户名: <input type="text" name="usr_name">
加密: <keygen name="security">
<input type="submit">
</form>

<output>元素
- <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>

21、新的表单属性

<form>新属性：
- autocomplete 规定form或input域应该拥有自动完成功能
- novalidate属性是一个布尔类型
- novalidate属性规定在提交表单时不应该验证form或input域
<input>新属性：
- autocomplete
- autofocus属性是一个布尔类型，规定也买你加载时，域自动获得焦点
- form 属性规定输入域所属的一个或多个表单
- formaction 属性用于描述表单提交的url地址
- formenctype属性描述了表单提交到服务器的数据编码（只对form表单中method=“post”表单）
- formmethod属性定义了表单的提交的方式
- formnovalidate 属性是一个布尔类型，描述了<input>元素在提交表单的时候不需要被验证
- formtarget 属性指定一个名称或一个关键字来指明表单提交数据接收后的提示
- height 和 width 属性属性规定用于image类型的input的图像高度和宽度
- list属性规定输入域的选项列表
- min 和 max 属性用于包含数字或日期的input类型规定限定
- multiple 属性是一个布尔类型，规定input元素中可选择多个值
- pattern 属性描述了一个正则表达式用于验证input元素的值
- placeholder 属性提供一种提示（hint），描述输入域所期待的值。
- required 属性是一个 boolean 属性.规定必须在提交之前填写输入域（不能为空）。
- step 属性为输入域规定合法的数字间隔。

22、新的语义元素

<section> 定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
<article> 标签定义独立的内容。.
<nav> 标签定义导航链接的部分。
<aside> 标签定义页面主区域内容之外的内容（比如侧边栏）。
<header>元素描述了文档的头部区域
<footer> 元素描述了文档的底部区域.
<figure> 和 <figcaption> 元素

23、`localStorage`

用于长久保存整个网页的数据，保存的数据没有过期时间，直到手动去除
存储的额数据没有时间限制。第二天、第二周或下一年注资后，数据依然可以用

// 存储
localStorage.setItem("sitename", "菜鸟教程");
 
// 查找
document.getElementById("result").innerHTML = "网站名：" +  localStorage.getItem("sitename");·

移除 localStorage 中的 "sitename" :

localStorage.removeItem("sitename");

可使用的API都相同，常用的有如下几个：

保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);

24、`sessionStorage`

针对一个session进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

if (sessionStorage.clickcount)
{
    sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
}
else
{
    sessionStorage.clickcount=1;
}
document.getElementById("result").innerHTML="在这个会话中你已经点击了该按钮 " + sessionStorage.clickcount + " 次 ";

25、`WebSocket`

WebSocket是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议
WebSocket是的客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输
在WebSocket API中，浏览器和服务器只需要做一个握手的额动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送
HTML5定义的WebSocket协议，能更好的节省服务器资源和带宽，并且能够耿实时的进行通讯
浏览器通过JavaScript向服务器发出建立WebSocket连接的请求，连接建立以后，客户端和服务端就可以通过TCP连接直接交换数据。
当获取WebSocket连接后，可以通过send()方法向服务器发送数据，并通过onmessage事件来接收服务器返回的数据

以下 API 用于创建 WebSocket 对象。

var Socket = new WebSocket(url, [protocol] );

第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的，指定了可接受的子协议。

WebSocket属性
WebSocket事件
WebSocket方法

一声笙笙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5基础知识

HTML新增的元素、属性大集合！！！！
复制链接

扫一扫

HTML5基础知识

HTML5

1、HTML5 <!DOCTYPE>

2、HTML5的改进

3、HTML5多媒体

4、HTML5应用

5、HTML5图形

6、HTML5使用CSS3

7、语义元素

8、HTML5表单

9 、已移除元素

10、Canvas

11、SVG

12、SVG与Canvas的区别

13、SVG与Canvas的比较

14、MathML

15、拖放Drag、Drop

16、Geolocation（地理定位）

17、Video(视频）

18、Audio（音频）

19、新的Input类型

20、新的表单元素

21、新的表单属性

22、新的语义元素

23、localStorage

24、sessionStorage

25、WebSocket

“相关推荐”对你有帮助么？

10、`Canvas`

11、`SVG`

12、`SVG`与`Canvas`的区别

13、`SVG`与`Canvas`的比较

14、`MathML`

15、`拖放Drag、Drop`

16、`Geolocation（地理定位）`

17、`Video(视频）`

18、`Audio（音频）`

19、`新的Input类型`

20、`新的表单元素`

23、`localStorage`

24、`sessionStorage`

25、`WebSocket`