HTML5刷题笔记

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 。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

数据结构课程设计

计算机科学与技术系 《数据结构课程设计》评分表 设计题目 39. 如下图所示&#xff0c;编写可视化算法将从顶点v能到达的最短路径长度为k的所有顶 点标记为红色&#xff08;最短路径以路径上的边数计算&#xff09;。 成绩 课 程 设 计 主 要 内 容 内容编写可视化算…

《网络设备配置与管理》综合训练,华为ensp测试,MSTP\VRRP\OSPF\RIP\BGP\路由引入

1.设备基础信息配置 &#xff08;1&#xff09;根据表2IPv4地址分配表&#xff0c;修订所有设备名称。 &#xff08;2&#xff09;根据公司网络规划&#xff0c;在所有交换机上创建VLAN10、VLAN20。为了保证不同交换机上的同一个VLAN的成员之间能够相互通信&#xff0c;需要配…

同一个数组中对象去重

封装方法 fn1 (tempArr) {this.echartList.map(item > {for (let i 0; i < item.data.length; i) {for (let j i 1; j < item.data.length; j) {if (item.data[i].deviceId item.data[j].deviceId && item.data[i].time item.data[j].time && it…

[网络安全]在win2000虚拟机上创建隐藏账户

手工创建隐藏账户 1.你需要一台win2000 2.winR->cmd->regedt32 增加HEY_LOACL_MACHINE\SAM\的权限,标头有安全&#xff0c;点击&#xff0c;然后勾选 3.新建账号&#xff0c;例如HiddenAccount$($表示在命令行下不现实此用户&#xff09; net user HiddenAccount$ 123456…

Linux:ELF 可执行文件的解析与其加载的原理

文章目录 ELF 可执行文件需要的前置知识ELF 可执行文件的程序头部表 加载可执行目标文件QA加载器如何工作&#xff1f; 参考 ELF 可执行文件 我们已经看到链接器如何将多个目标文件合并成一个可执行目标文件。我们的 C程序&#xff0c;开始时是一组 ASCII 文本文件&#xff0c…

实验4.3 动态路由RIPv2协议的配置

实验4.3 动态路由RIPv2协议的配置 一、任务描述二、任务分析三、具体要求四、实验拓扑五、任务实施1.配置交换机和路由器的接口的IP地址等参数。2.配置动态路由RIPv2协议&#xff0c;实现全网互通。 六、任务验收七、任务小结八、知识链接1&#xff0e;RIP协议简介2&#xff0e…

Linux开发工具——vim篇

vim开发工具的使用 文章目录 vim开发工具的使用认识vimvim常用三种模式vim正常模式命令集模式切换移动光标删除文字赋值替换撤销上一次操作更改跳到指定的行 vim末行模式命令集列出行号跳到文件中的某一行&#xff1a;保存文件离开vim查找字符&#xff1a; 总结题外话&#xff…

spring之面向切面:AOP(2)

学习的最大理由是想摆脱平庸&#xff0c;早一天就多一份人生的精彩&#xff1b;迟一天就多一天平庸的困扰。各位小伙伴&#xff0c;如果您&#xff1a; 想系统/深入学习某技术知识点… 一个人摸索学习很难坚持&#xff0c;想组团高效学习… 想写博客但无从下手&#xff0c;急需…

递归算法:二叉树前序、中序、后序遍历解析与递归思想深度剖析

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《linux深造日志》 《高效算法》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 文章目录 一、二叉树的遍历1.1 链式结构二叉树的创建1.1 二叉树结构图 二、 前序遍历代码演示&#xff1a;2.1 前序遍历递…

万兆网络之疑难杂症(二)

症状&#xff1a;测线仪8芯全亮&#xff0c;网速只有百兆 某台计算机测速发现只有90多M/s速度&#xff0c;关于iperf测速可以参考之前的文章 万兆网络之线路测速 Win11系统查看网络属性为1000Mbps&#xff0c;还是扯皮的装修方&#xff0c;4个工位只布了2条线&#xff0c;还…

智慧安防视频监控EasyCVR如何通过回调接口向第三方平台推送RTSP视频通道离线通知

安防视频监控系统EasyCVR能在局域网、公网、专网等复杂的网络环境中部署&#xff0c;可支持4G、5G、WiFi、有线等方式进行视频的接入与传输、处理和分发。平台能将接入的视频流进行汇聚、转码、多格式输出和分发&#xff0c;具体包括&#xff1a;RTMP、RTSP、HTTP-FLV、WebSock…

海康威视IP网络对讲广播系统命令执行漏洞(CVE-2023-6895)

漏洞介绍 海康威视IP网络对讲广播系统采用领先的IPAudio™技术,将音频信号以数据包形式在局域网和广域网上进行传送,是一套纯数字传输系统。 Hikvision Intercom Broadcasting System 3.0.3_20201113_RELEASE(HIK)版本存在操作系统命令注入漏洞&#xff0c;该漏洞源于文件/ph…

Linux网络编程(一):网络基础(下)

参考引用 UNIX 环境高级编程 (第3版)黑马程序员-Linux 网络编程 1. 协议的概念 1.1 什么是协议 从应用的角度出发&#xff0c;协议可理解为 “规则”&#xff0c;是数据传输和数据解释的规则 假设&#xff0c;A、B双方欲传输文件&#xff0c;规定&#xff1a; 第一次&#xff…

【Redis】五、Redis持久化、RDB和AOF

文章目录 Redis持久化一、RDB&#xff08;Redis DataBase&#xff09;触发机制如何恢复rdb文件 二、AOF&#xff08;Append Only File&#xff09;三、扩展 Redis持久化 面试和工作&#xff0c;持久化都是重点&#xff01; Redis 是内存数据库&#xff0c;如果不将内存中的数据…

网络安全知识图谱 图数据库介绍及语法

本体构建: 资产&#xff1a; 系统&#xff0c;软件 威胁&#xff1a; 攻击&#xff1a; 建模&#xff1a; 3个本体 5个实体类型 CWE漏洞库 http://cwe.mitre.org/data/downloads.html CPECP攻击模式分类库 http://capec.mitre.org/data/downloads.html CPE通用组件库 http:…

计算机基础:网络基础

目录 ​​​​​​​一.网线制作 1.制作所需要工具 网线制作标准 ​编辑 2.水晶头使用 3.网线钳使用 4.视频教学 二.集线器、交换机介绍 1.OSI七层模型 2.TCP/IP四层参考模型 3.集线器、交换机。路由器介绍 集线器 交换机 路由器 区别 三.路由器的配置 1.路由器设…

vscode配置node.js调试环境

node.js基于VSCode的开发环境的搭建非常简单。 说明&#xff1a;本文的前置条件是已安装好node.js(具体安装不再赘述&#xff0c;如有需要可评论区留言)。 阅读本文可掌握&#xff1a; 方便地进行js单步调试&#xff1b;方便地查看内置的对象或属性&#xff1b; 安装插件 C…

写了这么久的vue,Vue中组件和插件有什么区别?

一、组件是什么 回顾以前对组件的定义&#xff1a; 组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念&#xff08;组件&#xff09;来实现开发的模式&#xff0c;在Vue中每一个.vue文件都可以视为一个组件 组件的优势 降低整个系统的耦合度&#xff0c;在保持接口不…

python-dlib实现人脸提取和分割

效果 → 参考资料和资源 GitHub - Onwaier/SegfaceAndAlignByDlib: 用dlib实现脸部分割和人脸对齐 shape_predictor_68_face_landmarks.dat 下载地址_shape_predictor_68_face_landmarks.dat下载-CSDN博客 未运行的参考资料 dlib实现脸部分割与人脸对齐 - 知乎 py代码 &…

opencv入门到精通——图像的基本操作

目录 目标 访问和修改像素值 访问图像属性 图像感兴趣区域ROI 拆分和合并图像通道 为图像设置边框&#xff08;填充&#xff09; 目标 学会&#xff1a; 访问像素值并修改它们 访问图像属性 设置感兴趣区域(ROI) 分割和合并图像 本节中的几乎所有操作都主要与Numpy相…