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 。

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

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

相关文章

telnet的交互原理(wireshark分析)

telnet的交互原理&#xff08;wireshark篇&#xff09; telnet的协议类型是tcp&#xff0c;他的密钥用的是明文的&#xff0c;容易被捕获&#xff0c;所以后来的windows基本弃用了telnet服务端但依然保留了客户端。 下面是他的交互抓包&#xff1a; 这里面的前三条运用的是tc…

Go 语言中并发的威力

发挥效率和响应能力 并发是现代软件开发中的一个基本概念&#xff0c;它使程序能够同时执行多个任务&#xff0c;提高效率和响应能力。在本文中&#xff0c;我们将探讨并发在现代软件开发中的重要性&#xff0c;并深入了解 Go 处理并发任务的独特方法。 在现代软件开发中并发…

基于Antd4 和React-hooks的项目开发

基于Antd4 和React-hooks的项目开发 https://github.com/dL-hx/react-cnode 项目依赖使用 react 16.13react-redux 7.xreact-router-dom 5.xredux 4.xantd 4axiosmoment 2.24 (日期格式化)qs 项目视图说明 首页主题详情用户列表用户详情关于 配置按需加载 https://3x.an…

Panoply查看nc文件的时间维

打开的是全球灌溉农田灌溉用水量遥感估算数据集&#xff08;2011-2018&#xff09;&#xff0c;该文件以nc格式储存。nc格式文件就是一个多维的数据库。经纬度占了两维&#xff0c;可能还有时间维度&#xff0c;就是时空谱。 双击打开刚打开时只能看到2018年1月的灌溉数据 打…

软件测试真的看不到前途吗?

看到这个问题和问题后的说明&#xff0c;题主的显性问题就有两个&#xff1a; 1、软件测试有没有前途 2、若从事没有前途的测试&#xff0c;该怎么办&#xff08;真的只能转行么&#xff09;&#xff1f; 一、软件测试有没有前途&#xff1f; 先说结论&#xff1a;如果在2020年…

C++刷题 -- 字符串

C刷题 – 字符串 文章目录 C刷题 -- 字符串1.重复的子字符串 1.重复的子字符串 https://leetcode.cn/problems/repeated-substring-pattern/submissions/490209402/ 暴力解法 第一个for循环用来标定子串的末尾&#xff0c;根据末尾取出子串 第二个while循环用来检查原字符串是…

我在代码随想录|写代码Day6之 454.四数相加II ,三数之和

第一题: 454.四数相加II 题目 解答思路 我们要四数相加等于0一般的思路是暴力破解直接4个for循环,然后通过4个for循环得到答案, 但是这样的时间复杂度是O(n4),会超时然后我们通过将循环拆分,比如将 代码 第二题 : 题目: 代码 class Solution { public:vector<vector<…

后台管理项目多数据源管理方案实战

后台管理项目多数据源管理方案实战 整个权益商城后台本质上是一个访问频率比较低的CRUD管理系统&#xff0c;所以本身不需要考虑微服务拆分的事情。接入微服务体系也只是为了能够调用其他的微服务。 但是&#xff0c;在做电商管理项目时&#xff0c;我们为了简化业务流程&…

图书管理系统jsp + servlet+mysql

图书管理系统 项目使用jsp servletmysql实现&#xff1b; 登陆注册 首页 首页显示图书信息 图书管理 1添加书籍 2查询书籍 3预览书籍 4修改书籍 用户管理 1查询用户 2修改用户 3 删除用户 链接&#xff1a;https://pan.baidu.com/s/1QXK--ypb6OadbmKFlc0jUQ

【Deformable DETR】

最近学习CV中的Transformer有感而发,网上关于Deformable DETR通俗的帖子不是很多,因此想分享一下最近学习的内容。第一次发帖经验不足,文章内可能有许多错误或不恰之处欢迎批评指正。 Abstract DETR消除了目标检任务中的手工设计痕迹,但是存在收敛慢以及Transformer的自注…

macOS系统下载百度网盘的操作流程

第一步 进入百度网盘的官网&#xff0c;链接&#xff1a;百度网盘-免费云盘丨文件共享软件丨超大容量丨存储安全​​​​​​​&#xff0c;选择“客户端下载” 第二步 根据自己的电脑配置选择版本进行下载。芯片的查看路径是系统设置-通用-关于本机 第三步 点击右上角的图标…

自监督学习综述

1.简介 其实自监督学习的核心思想很简单&#xff0c;利用大量的无标签数据训练模型&#xff0c;然后将其作为预训练模型在下游任务上进行微调&#xff08;有标签&#xff09;。在用无标签图像训练模型时主要通过设计辅助任务&#xff0c;用图像自身的信息作为标签训练。常见的…

linux存储管理

固态硬盘SSD SSD的优势 SSD采用电子存储介质进行数据存储和读取的一种技术&#xff0c;拥有极高的存储性能&#xff0c;被认为是存储技术发展的未来新星。 内存直接当成硬盘使用 与传统硬盘相比&#xff0c;SSD固态电子盘具有以下优点 第一&#xff0c;SSD完全的半导体化&…

go语言函数二、init函数定义与作用

go语言init函数定义与作用 在go语言中&#xff0c;每一个源文件都可以包含一个init函数&#xff0c;这个函数会在main函数执行前&#xff0c;被go运行框架调用&#xff0c;注意是在main函数执行前。 package main import ("fmt" )func init() {fmt.Println("i…

实战案例:缓存不一致问题的解决(redis+本地缓存caffine)

一.问题引入 目前在写项目的时候&#xff0c;在B端查看文章&#xff0c;A端修改文章。为了增加效率&#xff0c;以及防止堆内存溢出&#xff0c;在B端选择本地缓存文章的方案。但是目前出现了A端对文章修改之后&#xff0c;B端读的还是旧数据&#xff0c;出现了缓存不一致的问…

阿赵UE学习笔记——2、新建项目和项目设置

阿赵UE学习笔记目录 大家好&#xff0c;我是阿赵。继续来学习虚幻引擎的使用。这次介绍一下新建项目和项目设置。 一、新建项目 通过桌面快捷方式&#xff0c;或者EPIC Games Loader&#xff0c;启动虚幻引擎。 启动完成后&#xff0c;会打开项目管理的界面&#xff0c;可以看…

C++共享和保护——(5)编译预处理命令

归纳编程学习的感悟&#xff0c; 记录奋斗路上的点滴&#xff0c; 希望能帮到一样刻苦的你&#xff01; 如有不足欢迎指正&#xff01; 共同学习交流&#xff01; &#x1f30e;欢迎各位→点赞 &#x1f44d; 收藏⭐ 留言​&#x1f4dd; 耕耘者的汗水是哺育种子成长的乳汁&am…

超结MOS/低压MOS在5G基站电源上的应用-REASUNOS瑞森半导体

一、前言 5G基站是5G网络的核心设备&#xff0c;实现有线通信网络与无线终端之间的无线信号传输&#xff0c;5G基站主要分为宏基站和小基站。5G基站由于通信设备功耗大&#xff0c;采用由电源插座、交直流配电、防雷器、整流模块和监控模块组成的电气柜。所以顾名思义&#xf…

vue中的侦听器和组件之间的通信

目录 一、侦听器 监听基本数据类型&#xff1a; 监听引用数据类型&#xff1a; 计算属性和watch区别&#xff1f; 二、组件通信/传值方式 1.父子组件传值 父组件给子组件传值&#xff1a; &#xff08;1&#xff09;props &#xff08;2&#xff09;provide inject &…

玩转大数据20:大数据应用容器化与部署实践

一、容器化技术介绍和优势 随着云计算的快速发展&#xff0c;容器化技术作为一种轻量级虚拟化技术&#xff0c;已经成为应用部署的主要方式。容器化技术通过共享操作系统&#xff0c;将应用程序及其依赖项打包成一个独立的、可移植的容器&#xff0c;从而实现应用的快速部署和…