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.rhkb.cn/news/223486.html

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

相关文章

Python入门学习篇(六)——for循环while循环

1 for循环 1.1 常规for循环 1.1.1 语法结构 for 变量名 in 可迭代对象:# 遍历对象时执行的代码 else:# 当for循环全部正常运行完(没有报错和执行break)后执行的代码1.1.2 示例代码 print("----->学生检查系统<------") student_lists["张三",&qu…

Python运算符函数化模块

文章目录 标准运算符替代函数实用工具itemgetterattrgettermethodcaller 刷完这60个标准库模块&#xff0c;成为Python骨灰级玩家 作为编程语言&#xff0c;如果无法做到Lisp的括号风格&#xff0c;那么必然羞于承认自己是函数式。python的lambda表达式以及各种生成式&#xf…

网络基础知识制作网线了解、集线器、交换机与路由器

目录 一、网线的制作 1.1、材料 1.2、网线的标准类别 二、集线器、交换机介绍 2.1、概念&#xff1a; 2.2、OSI七层模型 2.3、TCP/IP四层 三、路由器的配置 3.1、概念 3.2、四个模块 1、 网络状态 2、设备管理 3、应用管理 无人设备接入控制 无线桥接 信号调节…

基于多反应堆的高并发服务器【C/C++/Reactor】(中)ChannelMap 模块的实现

&#xff08;三&#xff09;ChannelMap 模块的实现 这个模块其实就是为Channel来服务的&#xff0c;前面讲了Channel这个结构体里边它封装了文件描述符。假如说我们得到了某一个文件描述符&#xff0c;需要基于这个文件描述符进行它对应的事件处理&#xff0c;那怎么办呢&…

面试官:看你简历了解过并发,我们简单聊一聊

前言&#xff1a; 今天和大家探讨最近的面试题&#xff0c;好久没有面试了&#xff0c;所以在此记录一下。本篇文章主要讲解CyclicBarrier和CountDownLatch的知识。该专栏比较适合刚入坑Java的小白以及准备秋招的大佬阅读。 如果文章有什么需要改进的地方欢迎大佬提出&#xf…

HarmonyOS构建第一个ArkTS应用(FA模型)

构建第一个ArkTS应用&#xff08;FA模型&#xff09; 创建ArkTS工程 若首次打开DevEco Studio&#xff0c;请点击Create Project创建工程。如果已经打开了一个工程&#xff0c;请在菜单栏选择File > New > Create Project来创建一个新工程。 选择Application应用开发&a…

Jenkins自动化部署之后端

准备工作参考本人另外几篇Jenkins相关的文章 新建任务 添加参数配置 字符串参数&#xff1a;分支名称 多选框&#xff1a;项目名称&#xff08;Extended Choice Parameter插件必备&#xff0c;插件安装参考我另外的文章&#xff09; 这个分割规则自定义。只要根据Jenkins…

智能优化算法应用:基于爬行动物算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于爬行动物算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于爬行动物算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.爬行动物算法4.实验参数设定5.算法结果6.…

代码随想录-刷题第三十六天

435. 无重叠区间 题目链接&#xff1a;435. 无重叠区间 思路&#xff1a;本题与452. 用最少数量的箭引爆气球非常像&#xff0c;弓箭的数量就相当于是非交叉区间的数量&#xff0c;只要把弓箭那道题目代码里射爆气球的判断条件加个等号&#xff08;认为[0&#xff0c;1][1&am…

PostGreSQL:货币类型

货币类型&#xff1a;money money类型存储固定小数精度的货币数字&#xff0c;小数的精度由数据库的lc_monetary设置决定。windows系统下&#xff0c;该配置项位于/data/postgresql.conf文件中&#xff0c;默认配置如下&#xff0c; lc_monetary Chinese (Simplified)_Chi…

WARNING: HADOOP_SECURE_DN_USER has been replaced by HDFS_DATANODE_SECURE_USER.

Hadoop启动时警告&#xff0c;但不影响使用&#xff0c;强迫症的我还是决定寻找解决办法 WARNING: HADOOP_SECURE_DN_USER has been replaced by HDFS_DATANODE_SECURE_USER. Using value of HADOOP_SECURE_DN_USER.原因是Hadoop安装配置于root用户下&#xff0c;对文件需要进…

《PySpark大数据分析实战》-18.什么是数据分析

&#x1f4cb; 博主简介 &#x1f496; 作者简介&#xff1a;大家好&#xff0c;我是wux_labs。&#x1f61c; 热衷于各种主流技术&#xff0c;热爱数据科学、机器学习、云计算、人工智能。 通过了TiDB数据库专员&#xff08;PCTA&#xff09;、TiDB数据库专家&#xff08;PCTP…

计算机网络——数据链路层-点对点协议(组成部分、PPP帧格式、透明传输、差错检测、工作状态)

目录 介绍 组成部分 PPP帧格式 透明传输 字节填充法 比特填充法 差错检测 工作状态 本篇我们介绍点对点协议PPP 介绍 点对点协议PPP&#xff08;Point-to-Point Protocol&#xff09;是目前使用最广泛的点对点数据链路层协议。 请大家想想看&#xff1a;一般的英特…

哈希拓展攻击CTF题做法

目录 基础&#xff1a; 盐&#xff08;Salt&#xff09;&#xff1a; 哈希长度拓展攻击&#xff1a; kali下载相关工具hash-ext-attack&#xff1a; hash拓展题目特征&#xff1a; 哈希拓展ctf题&#xff1a; 2023楚慧杯upload_shell 实验吧之让我进去&#xff1a; 前言…

nodejs微信小程序+python+PHP计算机网络在线考试系统-计算机毕业设计推荐

目 录 摘 要 I ABSTRACT II 目 录 II 第1章 绪论 1 1.1背景及意义 1 1.2 国内外研究概况 1 1.3 研究的内容 1 第2章 相关技术 3 2.1 nodejs简介 4 2.2 express框架介绍 6 2.4 MySQL数据库 4 第3章 系统分析 5 3.1 需求分析 5 3.2 系统可行性分析 5 3.2.1技术可行性&#xff1a;…

编译opencv和opencv_contrib

1 下载源码 下载opencv源码https://github.com/opencv/opencv 下载opencv源码https://github.com/opencv/opencv_contrib 2 开始编译 构建需要下载ffmpeg的包&#xff0c;cmake构建时会自动下载&#xff0c;但是比较满&#xff0c;这里可以从下面链接直接下载 https://downloa…

新版IDEA中Git的使用(一)

说明&#xff1a;本文介绍如何在新版IDEA中使用Git 创建项目 首先&#xff0c;在GitLab里面创建一个项目&#xff08;git_demo&#xff09;&#xff0c;克隆到桌面上。 然后在IDEA中创建一个项目&#xff0c;项目路径放在这个Git文件夹里面。 Git界面 当前分支&Commit …

VSCode软件与SCL编程

原创 NingChao NCLib 博途工控人平时在哪里技术交流博途工控人社群 VSCode简称VSC&#xff0c;是Visual studio code的缩写&#xff0c;是由微软开发的跨平台的轻量级编辑器&#xff0c;支持几乎所有主流的开发语言的语法高亮、代码智能补全、插件扩展、代码对比等&#xff0c…

Java中的抽象abstract

抽象abstract 什么是抽象类抽象类的注意事项、特点 使用好处常见应用场景&#xff1a;模版方法设计模式可以使用final关键字修饰模版方法 什么是抽象类 在Java中有一个关键字叫:abstract&#xff0c;它就是抽象的意思&#xff0c;可以用它修饰类、成员方法。abstract修饰类&am…

openGauss学习笔记-171 openGauss 数据库运维-备份与恢复-导入数据-深层复制

文章目录 openGauss学习笔记-171 openGauss 数据库运维-备份与恢复-导入数据-深层复制171.1 使用CREATE TABLE执行深层复制171.1.1 操作步骤 171.2 使用CREATE TABLE LIKE执行深层复制171.2.1 操作步骤 171.3 通过创建临时表并截断原始表来执行深层复制171.3.1 操作步骤 openGa…