HTML5刷题笔记

news2024/12/26 14:34:58

5ec40b2edc424bc8a9010883d7e4c32e.png

6e0fc285e7c14ac9808614bed414c57d.png

31a6502f30a64a5a87d531cd0288bd31.png

d74b2c47a69a404fbff1a0fedf734529.png

6c67c931f7d546dd82e83dea85ef93fc.png

903f77ef932a4456974679b2962375f5.png

在 HTML5 中,onblur 和 onfocus 是:事件属性
onblur 和 onfocus 属于焦点事件:
onblur:失去焦点
onfocus:获取焦点

HTML5事件
window 事件属性 针对 window 对象触发的事件:
onafterprint    script    文档打印之后运行的脚本。
onbeforeprint    script    文档打印之前运行的脚本。
onbeforeunload    script    文档卸载之前运行的脚本。
onerror    script    在错误发生时运行的脚本。
onhaschange    script    当文档已改变时运行的脚本。
onmessage    script    在消息被触发时运行的脚本。
onoffline    script    当文档离线时运行的脚本。
ononline    script    当文档上线时运行的脚本。
onpagehide    script    当窗口隐藏时运行的脚本。
onpageshow    script    当窗口成为可见时运行的脚本。
onpopstate    script    当窗口历史记录改变时运行的脚本。
onredo    script    当文档执行撤销(redo)时运行的脚本。
onstorage    script    在 Web Storage 区域更新后运行的脚本。
onundo    script    在文档执行 undo 时运行的脚本。

Form 事件 由 HTML 表单内的动作触发的事件(应用到几乎所有 HTML 元素,但最常用在 form 元素中):
oncontextmenu    script    当上下文菜单被触发时运行的脚本。
onformchange    script    在表单改变时运行的脚本。
onforminput    script    当表单获得用户输入时运行的脚本。
oninvalid    script    当元素无效时运行的脚本。
Mouse 事件 由鼠标或类似用户动作触发的事件:
ondrag    script    元素被拖动时运行的脚本。
ondragend    script    在拖动操作末端运行的脚本。
ondragenter    script    当元素元素已被拖动到有效拖放区域时运行的脚本。
ondragleave    script    当元素离开有效拖放目标时运行的脚本。
ondragover    script    当元素在有效拖放目标上正在被拖动时运行的脚本。
ondragstart    script    在拖动操作开端运行的脚本。
ondrop    script    当被拖元素正在被拖放时运行的脚本。
onmousewheel    script    当鼠标滚轮正在被滚动时运行的脚本。
onscroll    script    当元素滚动条被滚动时运行的脚本。
Media 事件 由媒介(比如视频、图像和音频)触发的事件(适用于所有 HTML 元素,但常见于媒介元素中,比如 <audio>、<embed>、<img>、<object> 以及 <video>):
oncanplay    script    当文件就绪可以开始播放时运行的脚本(缓冲已足够开始时)。
oncanplaythrough    script    当媒介能够无需因缓冲而停止即可播放至结尾时运行的脚本。
ondurationchange    script    当媒介长度改变时运行的脚本。
onemptied    script    当发生故障并且文件突然不可用时运行的脚本(比如连接意外断开时)。
onended    script    当媒介已到达结尾时运行的脚本(可发送类似“感谢观看”之类的消息)。
onerror    script    当在文件加载期间发生错误时运行的脚本。
onloadeddata    script    当媒介数据已加载时运行的脚本。
onloadedmetadata    script    当元数据(比如分辨率和时长)被加载时运行的脚本。
onloadstart    script    在文件开始加载且未实际加载任何数据前运行的脚本。
onpause    script    当媒介被用户或程序暂停时运行的脚本。
onplay    script    当媒介已就绪可以开始播放时运行的脚本。
onplaying    script    当媒介已开始播放时运行的脚本。
onprogress    script    当浏览器正在获取媒介数据时运行的脚本。
onratechange    script    每当回放速率改变时运行的脚本(比如当用户切换到慢动作或快进模式)。
onreadystatechange    script    每当就绪状态改变时运行的脚本(就绪状态监测媒介数据的状态)。
onseeked    script    当 seeking 属性设置为 false(指示定位已结束)时运行的脚本。
onseeking    script    当 seeking 属性设置为 true(指示定位是活动的)时运行的脚本。
onstalled    script    在浏览器不论何种原因未能取回媒介数据时运行的脚本。
onsuspend    script    在媒介数据完全加载之前不论何种原因终止取回媒介数据时运行的脚本。
ontimeupdate    script    当播放位置改变时(比如当用户快进到媒介中一个不同的位置时)运行的脚本。
onvolumechange    script    每当音量改变时(包括将音量设置为静音)时运行的脚本。
onwaiting    script    当媒介已停止播放但打算继续播放时(比如当媒介暂停已缓冲更多数据)运行脚本
 

ee191d97e9574349b64d21a08f474c49.png

以下的 HTML 4.01 元素在HTML5中已经被删除:

  • <acronym>
  • <applet>
  • <basefont>
  • <big>
  • <center>
  • <dir>
  • <font>
  • <frame>
  • <frameset>
  • <noframes>
  • <strike>

8228e2aecabe43e99552a4205e374304.png

contextmenu指定一个元素的上下文菜单。当用户右击该元素,出现上下文菜单
spellcheck检测元素是否拼写错误

ca428ea58d7d4e7687a937ec9df3873c.png

2a9171913f02428d810db59032138aee.png

5c42efbb00b04f03925e0974cecff4af.png

<canvas> 会创建一个固定大小的画布,会公开一个或多个渲染上下文(画笔),使用渲染上下文来绘制和处理要展示的内容。

var canvas = document.getElementById('tutorial');
//获得 2d 上下文对象
var ctx = canvas.getContext('2d');

3de3252cd8f94809a6f87e77184429f3.png

8419994621a548fa9e7b30c679caa282.png

typebutton
checkbox
color
date
datetime
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week
type 属性规定要显示的 <input> 元素的类型。

80f84b1fec184f9a92e292d9998b325b.png

<meter> 标签定义度量衡。仅用于已知最大和最小值的度量。

34b256ce1b724ca998537a1b4a8d4fc1.png

标记一个内联框架:

标记一个内联框架:

<iframe src="https://www.runoob.com"></iframe>

HTML5 不支持 <frameset> 标签。

<frameset> 标签定义一个框架集。

<frameset> 元素被用来组织一个或者多个 <frame> 元素。每个 <frame> 有各自独立的文档。

<frameset> 元素规定在框架集中存在多少列或多少行,以及每行每列占用的百分比/像素。

HTML5 不支持 <frame> 标签。

<frame> 标签定义 <frameset> 中的子窗口(框架)。

<frameset> 中的每个 <frame> 都可以设置不同的属性,比如 border、scrolling, noresize 等等。

fbece2e3619a4750b9d46d09be4aa63e.png

87ebc16b99944ada953e84194d11cd7f.png

ede6b9f1d4884d1a91e7402d4744dfb1.png

bdfc5c4097ea46f1b466dfe22a455668.png

83f524deb4484bac825aad3e170c4309.png

cf0803f4f28642019534ae7886b07a0c.png

<ins> 标签定义已经被插入文档中的文本。

<del> 和 <ins> 一起使用,描述文档中的更新和修正。浏览器通常会在已删除文本上添加一条删除线,在新插入文本下添加一条下划线。

ec2ab1a706e24cd1a47e73e7df19e50d.png

<mark> 标签定义带有记号的文本。

请在需要突出显示文本时使用 <mark> 标签。

<highlight> <blink>不存在。

<strong>加粗文本</strong>。

所有短语标签:

标签描述
<em>呈现为被强调的文本。
<strong>定义重要的文本。
<dfn>定义一个定义项目。
<code>定义计算机代码文本。
<samp>定义样本文本。
<kbd>定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。
<var>定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。

72bb95c2f3bf474a82e4ab13d0d7ae00.png

HTML <article> 标签 | 菜鸟教程 (runoob.com)

69f563ff64984484a0ce918d39521780.png

HTML5 中的新属性。

属性描述
autoplayautoplay如果出现该属性,则音频在就绪后马上播放。
controlscontrols如果出现该属性,则向用户显示音频控件(比如播放/暂停按钮)。
looploop如果出现该属性,则每当音频结束时重新开始播放。
mutedmuted如果出现该属性,则音频输出为静音。
preloadauto
metadata
none
规定当网页加载时,音频是否默认被加载以及如何被加载。
srcURL规定音频文件的 URL。

72be36ad8bbf4373b35b623c0e96c08a.png

974fa96bb8fb4ec7bb2a4cc2ec5d8000.png

ea99bfd0f9934b83a8ded1bc359a09f3.png

定义一个嵌入的对象。请使用此元素向您的 XHTML 页面添加多媒体。此元素允许您规定插入 HTML 文档中的对象的数据和参数,以及可用来显示和操作数据的代码。

<object> 标签用于包含对象,比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash。

object 的初衷是取代 img 和 applet 元素。不过由于漏洞以及缺乏浏览器支持,这一点并未实现。

浏览器的对象支持有赖于对象类型。不幸的是,主流浏览器都使用不同的代码来加载相同的对象类型。

而幸运的是,object 对象提供了解决方案。如果未显示 object 元素,就会执行位于 <object> 和 </object> 之间的代码。通过这种方式,我们能够嵌套多个 object 元素(每个对应一个浏览器)。

27db4bd20f8740e39db05372bda60983.png

f237e4a6481741f28a995957908ef080.png

6c741012a3b649118b4a9fc0d6d76f6c.png

0f056cd67f6048bb8f9f79e8b5c51015.png

通过 <optgroup> 标签把相关的选项组合在一起:

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

22686af284a44c6eb70fd68d17c0316b.png

b9d8b723c4484933890d6f323e54f77b.png

491d301cb81740e6a271af19f07f6751.png

f5752bfc9efe46d6bf45dd0b6db033bc.png

94ad4677b8aa490c855ac6cdd293cd04.png

d3364a575aa844e7b538c6fb278be7f2.png

f04a30cb9d874ff693d9b712ab5d12e3.png

1073826ed9184f759e7ac0c107876923.png

cdf213a0392e4c328b5784111818df2a.png

bdd506272c4b404e9cc767f615576aae.png

b3f4ce1b926c41a6b4e7ef6227ace653.png

9fd9b0c4e0b94a208aa5c646e1074a2a.png

faec64c50eb941b1944f773c906ed953.png

006ea0e8c4e74bc5aa26042c9fd27cd8.png

010cdc139f204b12897e17d015e8fc27.png

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

只读属性 readyState 表示连接状态,可以是以下值:

  • 0 - 表示连接尚未建立。

  • 1 - 表示连接已建立,可以进行通信。

  • 2 - 表示连接正在进行关闭。

  • 3 - 表示连接已经关闭或者连接不能打开。

0fd99ef3d7414510892fa39067f4078c.png

onabort 事件在视频/音频(audio/video)终止加载时触发。

该事件在多媒体数据终止加载时触发,而不是发生错误时触发。

提示: 影响多媒体加载的事件有:

  • onemptied
  • onerror 事件在视频/音频(audio/video)数据加载期间发生错误时触发。
  • onstalled 事件在浏览器获取媒体数据,但媒体数据不可用时触发。
  • onsuspend 事件在浏览器读取媒体数据中止时触发。

5087b2a8ee61487f9886b0ab121ee9c5.png

onloadstart 事件在浏览器开始寻找指定视频/音频(audio/video)触发。

在视频开始加载时执行 JavaScript:

<video onloadstart="myFunction()">

视频/音频(audio/video)在加载过程中,触发的顺序如下:

  1. onloadstart 在浏览器开始寻找指定视频/音频(audio/video)触发。
  2. ondurationchange  事件在视频/音频(audio/video)的时长发生变化时触发。
  3. onloadedmetadata 事件在指定视频/音频(audio/video)的元数据加载后触发。
  4. onloadeddata 事件在当前帧的数据加载完成且还没有足够的数据播放视频/音频(audio/video)的下一帧时触发。
  5. onprogress 事件在浏览器下载指定的视频/音频(audio/video)时触发。
  6. oncanplay 事件在用户可以开始播放视频/音频(audio/video)时触发。
  7. oncanplaythrough 事件在视频/音频(audio/video)可以正常播放且无需停顿和缓冲时触发。

onoffline 事件在浏览器离线工作时触发。onoffline 事件的相反事件是 ononline 。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1327042.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Chrome】ERR_SSL_PROTOCOL_ERROR问题

文章目录 前言一、下载二、使用步骤总结 前言 Edge升级最新版后&#xff0c;有的https访问不了&#xff0c;报如下错误 发现新版Chrome以及Chromium内核访问nginx ssl时报错&#xff0c;顺着这个思路接着查看到大佬的结论&#xff1a;服务器nginx使用的openssl版本过低&#…

新下载的Redis启动任务管理器不显示服务

遇到问题&#xff1a;刚刚下载的Redis解压后启动&#xff0c;在任务管理器无法找到Redis服务 但是Redis确实是启动的 解答&#xff1a; 那是因为还需要使用管理员的身份打开终端运行安装一次 命令如下&#xff1a; redis-server.exe --service-install redis.windows.conf --…

Ubuntu 常用命令之 reboot 命令用法介绍

&#x1f4d1;Linux/Ubuntu 常用命令归类整理 reboot命令在Ubuntu系统中用于重新启动系统。这个命令通常需要管理员权限才能执行。 reboot命令的参数如下 -f 或 --force&#xff1a;强制重启&#xff0c;不调用shutdown -r进行友好重启。-p 或 --poweroff&#xff1a;在重启…

7-1 单身狗(PTA - 数据结构)

由于这道题在留的作业中&#xff0c;排序和查找都有&#xff0c;所以我先写这道题&#xff08;图的先放放&#xff09; “单身狗”是中文对于单身人士的一种爱称。本题请你从上万人的大型派对中找出落单的客人&#xff0c;以便给予特殊关爱。 输入格式&#xff1a; 输入第一行…

【Earth Engine】协同Sentinel-1/2使用随机森林回归实现高分辨率相对财富(贫困)制图

目录 1 简介与摘要2 思路3 效果预览4 代码思路5 完整代码6 后记 1 简介与摘要 最近在做一些课题&#xff0c;需要使用Sentinel-1/2进行机器学习制图。 然后想着总结一下相关数据和方法&#xff0c;就花半小时写了个代码。 然后再花半小时写下这篇博客记录一下。 因为基于多次拍…

二叉搜索树(AVL树,红黑树)+封装

就像学习其他的东西一样&#xff0c;首先我们要知道二叉搜索树的作用和定义是什么&#xff01; 首先顾名思义&#xff0c;二叉搜索树肯定是被用来为搜索服务的数据结构。 并且它的搜索效率可以达到logN,也就是一百万的数据也只用查找几十次&#xff08;AVL树可以控制在20次左…

日常工作中常用的抓包工具都有哪些呢?

&#x1f4e2;专注于分享软件测试干货内容&#xff0c;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01;&#x1f4e2;交流讨论&#xff1a;欢迎加入我们一起学习&#xff01;&#x1f4e2;资源分享&#xff1a;耗时200小时精选的「软件测试」资…

电子合同的分类有哪些?

1、从电子合同订立的具体方式的角度&#xff0c;可分为利用电子数据交换订立的合同和利用电子邮件订立的合同&#xff1b; 2、从电子合同标的物的属性的角度&#xff0c;可分为网络服务合同、软件授权合同、需要物流配送的合同等&#xff1b; 3、从电子合同当事人的性质的角度…

使用Gitee中的CI/CD来完成代码的自动部署与发布(使用内网穿透把本地电脑当作服务器使用)

&#x1f4da;目录 &#x1f4da;简介:⚙️ 所需工具&#xff1a;&#x1f4a8;内网穿透配置&#x1f4ad;工具介绍✨命令安装&#x1f38a;配置Cpolar&#x1f573;️关闭防火墙&#x1f95b;防火墙端口放行规则&#xff08;关闭防火墙可以忽略&#xff09;&#x1f36c;小章总…

【python】作用域与闭包 || global与nonlocal

python作用域 其他语言的作用域&#xff1a;块级、函数、类、模块、包等由小到大的级别但是python没有块级&#xff08;if语句块、for语句块&#xff09;&#xff0c;所以if中定义的变量&#xff0c;相当于普通语句 >>> if True: # if语句块没有作用域x …

华为云之ECS云产品快速入门

华为云之ECS云产品快速入门 一、ECS云服务器介绍二、本次实践目标三、创建虚拟私有云VPC1.虚拟私有云VPC介绍2.进入虚拟私有云VPC管理页面3.创建虚拟私有云4.查看创建的VPC 四、创建弹性云服务器ECS——Linux1.进入ECS购买界面2.创建弹性云服务器(Linux)——基础配置步骤3.创建…

如何使用 templ 在 Go 中编写 HTML 用户界面?

关注公众号【爱发白日梦的后端】分享技术干货、读书笔记、开源项目、实战经验、高效开发工具等&#xff0c;您的关注将是我的更新动力&#xff01; 简介 templ 是一个在 Go 中编写 HTML 用户界面的语言。使用 templ&#xff0c;我们可以创建可呈现 HTML 片段的组件&#xff0c…

基于改进YOLOv7的绝缘子缺陷检测算法

摘要 现有的检测方法面临着巨大的挑战&#xff0c;在识别绝缘子的微小缺陷时&#xff0c;针对输电线路图像与复杂的背景。为保证输电线路的安全运行&#xff0c;提出一种改进的YOLOv 7模型&#xff0c;以提高检测结果。 首先&#xff0c;基于K-means对绝缘子数据集的目标盒进…

Redis“垃圾”过期死键管理与优化

【作者】付磊 Redis死键的定义不尽相同&#xff0c;通常有两种&#xff1a; 写到Redis里后&#xff0c;由于过期时间过长或者压根没有过期时间&#xff0c;加之长期不访问&#xff0c;这类key可以被称为死键。 明明已经过了过期时间&#xff0c;但还占用Redis内存&#xff08…

利用tf-idf对特征进行提取

TF-IDF是一种文本特征提取的方法&#xff0c;用于评估一个词在一组文档中的重要性。 一、代码 from sklearn.feature_extraction.text import TfidfVectorizer import numpy as npdef print_tfidf_words(documents):"""打印TF-IDF矩阵中每个文档中非零值对应…

Nacos-服务发现与配置管理v1.0

Nacos - 服务发现和配置管理 教学目标 1&#xff09;能够理解微服务架构的特点 2&#xff09;能够理解服务发现的流程 3&#xff09;能够说出Nacos的功能 4&#xff09;掌握Nacos的安装方法 5&#xff09;掌握RESTful服务发现开发方法 6&#xff09;掌握Dubbo服务发现开…

AIGC绘画关键词 - 神兽类(一)

Unity3D特效百例案例项目实战源码Android-Unity实战问题汇总游戏脚本-辅助自动化Android控件全解手册再战Android系列Scratch编程案例软考全系列Unity3D学习专栏蓝桥系列ChatGPT和AIGC &#x1f449;关于作者 专注于Android/Unity和各种游戏开发技巧&#xff0c;以及各种资源分…

JNI学习(二)

静态注册 接着上篇博客学习 JNI函数 JNIEXPORT void JNICALL Java_com_example_jnidemo_TextDemo_setText(JNIEnv *env, jobject this, jstring string){ __android_log_print(ANDROID_LOG_ERROR, "test", "invoke set from C\n");char* str (char*)(*e…

每日一题——链表的回文结构

链表的回文结构 1. 题目描述 对于一个链表&#xff0c;请设计一个时间复杂度为O(n),额外空间复杂度为O(1)的算法&#xff0c;判断其是否为回文结构。 给定一个链表的头指针A&#xff0c;请返回一个bool值&#xff0c;代表其是否为回文结构。保证链表长度小于等于900。 测试…

SpringBoot集成swagger-ui

1.引入依赖&#xff1a; <!--swagger--><dependency><groupId>io.springfox</groupId><artifactId>springfox-swagger2</artifactId><version>2.7.0</version></dependency><dependency><groupId>io.sprin…