当前位置： 首页 > news >正文

HTML5教程

news 2026/5/12 3:12:21

HTML5读书笔记

jack

2023.10.24

来源：HTML5 Canvas | 菜鸟教程

常识：

HTML5 是下一代 HTML 标准。

HTML , HTML 4.01的上一个版本诞生于 1999 年

<!DOCTYPE html>用于声明下面代码是H5;

浏览器支持

你可以让一些较早的浏览器（不支持HTML5）支持 HTML5。

现代的浏览器都支持 HTML5

HTML5 <canvas>

HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.

使用 JavaScript 来绘制图像

使用 style 属性来添加边框:

Canvas 坐标：左上角是00；

可以画线段，圆，字符，渐变，图像，

HTML5 SVG

SVG 定义为可缩放矢量图形。SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失。

把 SVG 直接嵌入 HTML 页面。

SVG 是一种使用 XML 描述 2D 图形的语言。

Canvas 通过 JavaScript 来绘制 2D 图形。

HTML5 MathML

HTML5 可以在文档中使用 MathML 元素，对应的标签是 <math>...</math> 。

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

HTML5 拖放（Drag 和 Drop）

拖放（Drag 和 drop）是 HTML5 标准的组成部分。

HTML5 Geolocation（地理定位）

HTML5 Geolocation API 用于获得用户的地理位置。

HTML5 Video(视频)

HTML5 规定了一种通过 video 元素来包含视频的标准方法。

HTML5 <video> 和 <audio> 元素同样拥有方法、属性和事件。

<video> 和 <audio>元素的方法、属性和事件可以使用JavaScript进行控制.

HTML5 Audio(音频)

HTML5 提供了播放音频文件的标准。

HTML5 规定了在网页上嵌入音频元素的标准，即使用 <audio> 元素。

HTML5 新的 Input 类型

HTML5 表单元素

<datalist> : <datalist> 元素规定输入域的选项列表。

<keygen>: <keygen> 元素的作用是提供一种验证用户的可靠方法。<keygen> 元素的作用是提供一种验证用户的可靠方法。

<keygen>标签规定用于表单的密钥对生成器字段。

当提交表单时，会生成两个键，一个是私钥，一个公钥。

私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。

<output>

<output> 元素用于不同类型的输出，比如计算或脚本输出：

HTML5 新的表单属性

HTML5 的 <form> 和 <input>标签添加了几个新属性.

<form>新属性：

autocomplete: autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。

novalidate: novalidate 是一个布尔（true 或 false）属性。

novalidate 属性是 HTML 表单元素的一个布尔属性，用于设置浏览器不对表单进行验证。

<input>新属性：

autocomplete

autofocus: autofocus 属性是一个布尔属性。

autofocus 属性规定在页面加载时，域自动地获得焦点。

form: form 属性规定输入域所属的一个或多个表单。

formaction: The formaction 属性用于描述表单提交的URL地址.

formenctype: formenctype 属性描述了表单提交到服务器的数据编码 (只对form表单中 method="post" 表单)

formmethod: formmethod 属性定义了表单提交的方式。

formnovalidate

formtarget

height 与 width

list: list 属性规定输入域的 datalist。datalist 是输入域的选项列表。

min 与 max

multiple: multiple 属性是一个 boolean 属性.

pattern (regexp): pattern 属性描述了一个正则表达式用于验证 <input> 元素的值。

placeholder: placeholder 属性提供一种提示（hint），描述输入域所期待的值。

required: required 属性是一个 boolean 属性.

step: step 属性为输入域规定合法的数字间隔。

HTML5 语义元素

语义= 意义

语义元素 = 有意义的元素

无语义 元素实例: <div> 和 <span> - 无需考虑内容.

语义元素实例: <form>, <table>, and <img> - 清楚的定义了它的内容.

<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

<article> 标签定义独立的内容。.

<nav> 标签定义导航链接的部分。

<aside> 标签定义页面主区域内容之外的内容（比如侧边栏）。

<header>元素描述了文档的头部区域

<footer> 元素描述了文档的底部区域.

<figure>标签规定独立的流内容（图像、图表、照片、代码等等）。

HTML5 Web 存储

HTML5 web 存储，一个比 cookie 更好的本地存储方式。

客户端存储数据的两个对象为：

localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。

sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

HTML5 Web SQL 数据库

openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。

transaction：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。

executeSql：这个方法用于执行实际的 SQL 查询。

HTML5 应用程序缓存

使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。

指定该页面需要进行缓存操作。

<!DOCTYPE HTML>

<html manifest="demo.appcache">

...

</html>

manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。

manifest 文件可分为三个部分：

CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存

NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存

FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

一旦应用被缓存，它就会保持缓存直到发生下列情况：

用户清空浏览器缓存

manifest 文件被修改（参阅下面的提示）

由程序来更新应用缓存

HTML5 Web Workers

web worker 是运行在后台的 JavaScript，不会影响页面的性能。

HTML5 服务器发送事件(Server-Sent Events)

HTML5 服务器发送事件（server-sent event）允许网页获得来自服务器的更新。

Server-Sent 事件 - 单向消息传递

Server-Sent 事件指的是网页自动获取来自服务器的更新。

EventSource 对象用于接收服务器发送事件通知：

HTML5 WebSocket

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

相关文章：

HTML5教程

HTML5读书笔记 jack 2023.10.24 来源&#xff1a;HTML5 Canvas | 菜鸟教程 常识&#xff1a; HTML5 是下一代 HTML 标准。 HTML , HTML 4.01的上一个版本诞生于 1999 年 <!DOCTYPE html>用于声明下面代码是H5; 浏览器支持 你可以让一些较早的浏览器&#xff08;不支…...

编程日记 2023/10/31 5:54:03

vulnhub momentum 靶机复盘

环境配置 到学校了 原来的桥接配置要改 这里记录几个点备忘 1.virtualbox 桥接 未指定 重新安装驱动VBoxNetLwf.inf 2.配置完靶机启动失败 手动安装VBoxNetLwf.inf 不要用virtualbox自带的netlwfinstall 3.配置完nmap扫不到 rw init/bin/bash 进去看看网卡配置 信息收集…...

编程日记 2023/10/31 5:53:01

c++和java实现策略模式的差异

一、C和java的差异 实例化方式 c的对象有两种实例化方式&#xff0c;一种是局部变量中直接实例化。一种是new出来的。 MyClass myclass; //第一种方式 MyClass* myclassPtrnew MyClass(); //第二种方式java的对象构建&#xff0c;没有第一种方式&#xff0c;java的对象都…...

编程日记 2023/10/31 5:52:00

vim

简介 vim是一款多模式的文本编辑器&#xff0c;vim里面还有很多子命令&#xff0c;来进行代码的编写操作 常用模式图 命令模式 光标移动 shif $ 光标定义到当前行的最右侧结尾 shift ^ 光标定义到当前行的最左侧开头 shift g 光标定位到文本最末尾…...

编程日记 2023/10/31 5:50:59

AcWing93. 递归实现组合型枚举：输出从1~n中随机选出的m个整数

题目 从 1∼ n n n 这 n n n 个整数中随机选出 m m m 个&#xff0c;输出所有可能的选择方案。 输入格式 两个整数 n , m , n,m, n,m, 在同一行用空格隔开。 输出格式 按照从小到大的顺序输出所有方案&#xff0c;每行 1 个。 首先&#xff0c;同一行内的数升序排列&a…...

编程日记 2023/10/31 5:49:58

Java修仙传之Flink篇

大道三千:最近我修Flink 目前个人理解&#xff1a; 处理有界&#xff0c;无界流的工具 FLINK&#xff1a; FLINK定义&#xff1a; Flink特点 Flink分层API 流的定义 有界数据流&#xff08;批处理&#xff09;&#xff1a; 有界流&#xff1a;数据结束了&#xff0c;程序也…...

编程日记 2023/10/31 5:48:57

网络新闻发稿为何经久不衰？

有的老板可能看不到新闻营销的直接回报&#xff0c;一直不乐意在此方面投入&#xff0c;但是却看到竞争对手一直在搞新闻营销&#xff0c;也就安排个PR做做新闻公关。小马识途营销顾问观察&#xff0c;自互联网诞生以来&#xff0c;新闻营销一直是网络营销工作中的一个重点。 如…...

编程日记 2023/10/31 5:47:55

Java SimpleDateFormat 中英文时间格式化转换

SimpleDateFormat是一个以与语言环境有关的方式来格式化和解析日期的具体类。它允许进行格式化&#xff08;日期 -> 文本&#xff09;、解析&#xff08;文本 -> 日期&#xff09;和规范化。 SimpleDateFormat使得可以选择任何用户定义的日期-时间格式的模式。但是&…...

编程日记 2023/10/31 5:46:54

机器学习-基本知识

 任务类型 ◼ 有监督学习(Supervised Learning) 每个训练样本x有人为标注的目标t&#xff0c;学习的目标是发现x到t的映射&#xff0c;如分类、回归。 ◼ 无监督学习(Unsupervised Learning) 学习样本没有人为标注&#xff0c;学习的目的是发现数据x本身的分布规律&#xf…...

编程日记 2023/10/31 5:44:52

Xilinx 7 系列 1.8V LVDS 和 2.5V LVDS 信号之间的 LVDS 兼容性

如果通过LVDS进行接口&#xff0c;可以按照以程图中的步骤操作&#xff0c;以确保满足正确使用LVDS的所有要求。 40191 - 7 系列 - 1.8V LVDS 和 2.5V LVDS 信号之间的 LVDS 兼容性 与LVDS兼容驱动器和接收器连接时&#xff0c;7系列LVDS和LVDS_25输入和输出应该不存在兼容性问…...

编程日记 2023/10/31 5:43:51

R语言在生态环境领域中的实践技术应用

R语言作为新兴的统计软件&#xff0c;以开源、自由、免费等特点风靡全球。生态环境领域研究内容广泛&#xff0c;数据常多样而复杂。利用R语言进行多元统计分析&#xff0c;从复杂的现象中发现规律、探索机制正是R的优势。为此&#xff0c;以鱼类、昆虫、水文、地形等多样化的生…...

编程日记 2023/10/31 5:42:50

ChineseChess.2023.10.31.01

中国象棋残局模拟器&#xff1a;黑双卒压禁区 中国象棋残局模拟器ChineseChess.2023.10.31.01...

编程日记 2023/10/31 5:41:48

数据库扩展语句和约束方式以及用户管理

数据库扩展语句和约束方式以及用户管理 create TABLE if not exists ky32 ( id int(4) zerofill primary key auto_increment, name varchar(10) not null, cradid int(18) not null unique key, hobby varchar (50) ); auto_increment&#xff1a;表示该字段可以自增长&…...

编程日记 2023/10/31 5:40:46

JMM 简单理解

JMM 简单理解 1 Java 内存模型 Java 内存模型&#xff08;Java Memory Model&#xff0c;JMM&#xff09;&#xff0c;主要为了屏蔽各种硬件和操作系统的内存差异&#xff0c;以实现让 Java 程序在各种平台下都能达到一致的内存访问效果&#xff0c;而设计的 2 工作内存与主内…...

编程日记 2023/10/31 5:39:45

微软Azure文本转音频，保存成MP3文件【代码python3】

标签&#xff1a; 文本转音频并保存mp3文件&#xff1b; 微软Azure&#xff1b; 微软Azure可以将文本转音频&#xff0c;并保存mp3文件&#xff0c;直接上代码 代码格式&#xff1a;python 3 import os import azure.cognitiveservices.speech as speechsdk# This example re…...

编程日记 2023/10/31 5:38:43

基于单片机的超声波探伤仪设计

摘要 超声波探伤仪是目前工业制造和现代化检测的重要途径之一&#xff0c;广泛的应用在质量检测和产品检测中&#xff0c;通过使用其产品能够有效地降低产品次品的风险。尽管随着电子技术的发展&#xff0c; 国内出现了一些数字化的超声检测仪器&#xff0c;但其数据处理及扩展…...

编程日记 2023/10/31 5:37:41

idea的设置

1.设置搜索encoding,所有编码都给换为utf-8 安装插件 eval-reset插件 https://www.yuque.com/huanlema-pjnah/okuh3c/lvaoxt#m1pdA 设置活动模板,idea有两种方式集成tomcat,一种是右上角config配置本地tomcat,一种是插件,如果使用插件集成,则在maven,pom.xml里面加上tomcat…...

编程日记 2023/10/31 5:36:38

高等数学啃书汇总重难点（八）向量代数与空间解析几何

持续更新&#xff0c;高数下第一章&#xff0c;整体来说比较简单&#xff0c;但是需要牢记公式&#xff0c;切莫掉以轻心~ 一.向量平行的充要条件 二.向量坐标的线性运算 三.向量的几何性质 四.数量积 五.向量积 六.混合积 七.曲面方程 八.空间曲线方程 九.平面的点法式方程 十…...

编程日记 2023/10/31 5:34:36

C#开发DLL，CAPL调用（CAPL＞＞ .NET DLL）

文章目录 展示说明新建类库工程C# 代码生成dllCAPL脚本调用dll，输出结果展示 ret为dll里函数返回的值。 说明 新建类库工程 在visual studio中建立。 C# 代码 using...

编程日记 2023/10/31 5:33:35

0-1背包问题【穷举法+二维dp数组】

问题描述&#xff1a; 使用穷举法解决0/1背包问题。问题描述&#xff1a;给定n个重量为{w1, w2, … ,wn}、价值为{v1, v2, … ,vn} 的物品和一个容量为C的背包&#xff0c;求这些物品中的一个最有价值的子集&#xff0c;且要能够装到背包中。 穷举法&#xff1a;每件物品装还是…...

编程日记 2023/10/31 5:32:34

LynxPrompt Action：GitHub Actions 实现 AI 配置中心化与自动化管理

1. 项目概述&#xff1a;为什么我们需要一个AI配置的“中央仓库”&#xff1f; 如果你和我一样&#xff0c;日常开发中同时用着Cursor、Claude Code、GitHub Copilot&#xff0c;甚至还在尝试Windsurf和Aider&#xff0c;那你一定遇到过这个头疼的问题&#xff1a;每个工具的配…...

编程新知 2026/5/12 3:05:28

Polkadot 正在补完 L1 里没人做过的“垂直 RISC-V 集成“

作者&#xff1a; PaperMoon团队 位 Parity 工程师周末买了一块 RISC-V 板子&#xff0c;把节点跑起来看看会断在哪里。配图是一张工程师的桌子&#xff0c;板子、线、调试器、电源。 很多人会觉得这就是一个 maker culture 风格的小实验。但如果你把过去三年 Polkadot 在 IS…...

编程新知 2026/5/12 2:57:22

BLE技术解析：物联网低功耗无线通信核心

1. BLE技术概述&#xff1a;物联网的无线连接基石蓝牙低功耗技术&#xff08;Bluetooth Low Energy&#xff0c;简称BLE&#xff09;自2010年作为蓝牙4.0核心规范的一部分推出以来&#xff0c;已成为物联网设备无线通信的事实标准。与经典蓝牙技术相比&#xff0c;BLE在保持相似…...

编程新知 2026/5/12 2:45:19

Vivado时序约束实战：输入/输出延时设置背后的时序模型与设计考量

1. 时序约束的本质&#xff1a;从理论到实践的桥梁 刚接触FPGA设计时&#xff0c;我最头疼的就是时序约束。那些建立时间、保持时间的概念看得人云里雾里&#xff0c;更别说要在Vivado里实际设置了。直到有一次项目因为时序问题导致整板无法工作&#xff0c;我才真正明白时序约…...

编程新知 2026/5/11 23:16:17

混合原型验证：软硬件协同的芯片设计革命

1. 混合原型验证&#xff1a;从割裂到统一的芯片设计革命在芯片设计的漫长周期里&#xff0c;硬件工程师和软件工程师常常像是在两个平行世界里工作。硬件团队埋头于RTL编码、综合、布局布线&#xff0c;最终将设计烧录进FPGA原型板&#xff0c;进行物理层面的调试和性能测试。…...

编程新知 2026/5/11 23:08:43

深度相机三剑客：TOF、双目与结构光的场景化选型指南

1. 深度相机技术入门&#xff1a;从原理到应用 第一次接触深度相机时&#xff0c;我被各种技术名词搞得晕头转向。TOF、双目、结构光听起来都很高大上&#xff0c;但到底有什么区别&#xff1f;经过多年项目实战&#xff0c;我发现这三种技术就像不同的"眼睛"&#…...

编程新知 2026/5/11 22:57:02

告别空转！用RT-Thread PM组件给你的IoT设备省电：从投票机制到外设管理的完整指南

告别空转&#xff01;用RT-Thread PM组件给你的IoT设备省电&#xff1a;从投票机制到外设管理的完整指南 在电池供电的物联网设备开发中&#xff0c;功耗优化往往成为决定产品成败的关键因素。想象一下&#xff0c;一个部署在偏远地区的环境监测节点&#xff0c;如果因为功耗问…...

编程新知 2026/5/11 22:43:28

告别PPO采样地狱！用SAC算法在连续控制任务中实现高效训练（附PyTorch代码）

SAC算法实战&#xff1a;突破PPO采样瓶颈的连续控制解决方案 在机器人控制、自动驾驶和游戏AI开发中&#xff0c;强化学习工程师们经常面临一个共同困境&#xff1a;算法需要与环境进行海量交互才能学到有效策略。以Ant机器人行走任务为例&#xff0c;传统PPO算法可能需要500万…...

编程新知 2026/5/11 22:08:04

人生杠杆具象化的庖丁解牛

它的本质是&#xff1a;**找到那些 投入一次努力&#xff0c;却能产生无限次复用或指数级放大效果 的工具、媒介或关系。它打破了“时间金钱”的线性交换逻辑&#xff0c;实现了 “单位时间产出最大化”。这是一种 从“加法思维”到“乘法思维” 的范式转移。 如果把人生比作物…...

编程新知 2026/5/11 21:21:57

AD7606模块的20kHz高速采样怎么玩？深入对比带缓存与不带缓存的两种采集模式

AD7606模块20kHz高速采样的工程实践&#xff1a;带缓存与无缓存模式深度解析 在工业自动化、电力监测和振动分析等领域&#xff0c;多通道高速数据采集系统常面临一个关键抉择&#xff1a;如何在有限的处理器资源下实现最优的采样性能&#xff1f;AD7606作为一款经典的八通道16…...

编程新知 2026/5/11 21:12:31