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

HTML5教程

news 2025/6/28 12:36:27

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

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

编程新知 2025/6/15 18:44:30

docker详细操作--未完待续

docker介绍 docker官网: Docker&#xff1a;加速容器应用程序开发 harbor官网&#xff1a;Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台&#xff0c;用于将应用程序及其依赖项&#xff08;如库、运行时环…...

编程新知 2025/6/24 21:12:38

【WiFi帧结构】

文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成&#xff1a;MAC头部frame bodyFCS&#xff0c;其中MAC是固定格式的&#xff0c;frame body是可变长度。 MAC头部有frame control&#xff0c;duration&#xff0c;address1&#xff0c;address2&#xff0c;addre…...

编程新知 2025/6/25 21:43:13

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍，多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解（初学者版） 1. static（默认值） 2. relative（相对定位） 3. absolute（绝对定位） 4. fixed（固定定位） 5. sticky（粘性定位） 三、定位元素的层级关系（z-i…...

编程新知 2025/6/26 1:51:25

生成 Git SSH 证书

&#x1f511; 1. ​​生成 SSH 密钥对​​ 在终端&#xff08;Windows 使用 Git Bash&#xff0c;Mac/Linux 使用 Terminal&#xff09;执行命令&#xff1a; ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" ​​参数说明​​&#xff1a; -t rsa&#x…...

编程新知 2025/6/21 5:49:39

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器&#xff0c;其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机&#xff08;Virtual Host&#xff09;。 1. 简介 Nginx 使用 server_name 指令来确定…...

编程新知 2025/6/17 10:29:06

HTML前端开发：JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

编程新知 2025/6/25 15:20:35

从“安全密码”到测试体系：Gitee Test 赋能关键领域软件质量保障

关键领域软件测试的"安全密码"&#xff1a;Gitee Test如何破解行业痛点 在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的"神经中枢"。从国防军工到能源电力&#xff0c;从金融交易到交通管控&#xff0c;这些关乎国计民生的关键领域…...

编程新知 2025/6/21 9:57:32

nnUNet V2修改网络——暴力替换网络为UNet++

更换前，要用nnUNet V2跑通所用数据集，证明nnUNet V2、数据集、运行环境等没有问题 阅读nnU-Net V2 的 U-Net结构，初步了解要修改的网络，知己知彼，修改起来才能游刃有余。 U-Net存在两个局限，一是网络的最佳深度因应用场景而异，这取决于任务的难度和可用于训练的标注数…...

编程新知 2025/6/24 3:11:44

数据结构：泰勒展开式：霍纳法则（Horner‘s Rule）

目录 &#x1f50d; 若用递归计算每一项&#xff0c;会发生什么&#xff1f; Horners Rule&#xff08;霍纳法则&#xff09; 第一步&#xff1a;我们从最原始的泰勒公式出发 第二步&#xff1a;从形式上重新观察展开式 &#x1f31f; 第三步&#xff1a;引出霍纳法则&…...

编程新知 2025/6/21 20:12:22