其他元素

2019-11-22 本文已影响0人 WhiteStruggle

脚本

canvas元素

使用方法见：https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API

<canvas>元素可被用来通过脚本（通常是JavaScript）绘制图形。比如,它可以被用来绘制图形,制作图片集合,甚至用来实现动画效果。你可以(也应该)在元素标签内写入可提供替代的的代码内容，这些内容将会在在旧的、不支持<canvas>元素的浏览器或是禁用了JavaScript的浏览器内渲染并展现。

属性：

height

该元素占用空间的高度，以 CSS 像素（px）表示，默认为 150。

moz-opaque

通过设置这个属性，来控制canvas元素是否半透明。如果你不想canvas元素被设置为半透明，使用这个元素将可以优化浏览器绘图性能。

width

该元素占用空间的宽度，以 CSS 像素（px）表示，默认为 300。

注意：可以通过CSS来控制<canvas>的大小。在渲染的过程中<canvas>元素中的内容会根据情况缩放来适应需要的大小。如果您发现<canvas>元素中展示的内容变形，您可以通过<canvas>自带的height和width属性进行相关设置，而不要使用CSS。

如果你没有设置<canvas>元素的透明度，可以考虑使用moz-opaque属性。下面给出的示例代码

"<canvas id="mycanvas" moz-opaque></canvas>"

可用于页面渲染优化。但需要您注意的是只能在基于Mozilla内核的浏览器内生效。

noscript元素

如果页面上的脚本类型不受支持或者当前在浏览器中关闭了脚本，则在 HTML <noscript> 元素中定义脚本未被执行时的替代内容。

当脚本被禁用并且它是 <head>元素的后代时：

以下顺序任意，零个或者多个<link>元素，零个或者多个<style>元素，零个或者多个<meta>元素。
当脚本被禁用并且它不是 <head> 元素的子元素时：任何transparent content 都可以，但是在它的后代中必须没有 <noscript>元素。
否则：flow content 或 phrasing content 。

script元素

用于嵌入或引用可执行脚本。

指明响应的脚本类型。它可能属于以下类别中的一个。

async HTML5
该布尔属性指示浏览器是否在允许的情况下异步执行该脚本。该属性对于内联脚本无作用 (即没有src属性的脚本）。
关于浏览器支持请参见浏览器兼容性。另可参见文章asm.js的异步脚本。

crossorigin
那些没有通过标准CORS检查的正常script 元素传递最少的信息到 window.onerror。
可以使用本属性来使那些将静态资源放在另外一个域名的站点打印错误信息。
参考 CORS 设置属性了解对有效参数的更具描述性的解释。
<script src="" crossorigin="anonymous"></script>

defer
这个布尔属性被设定用来通知浏览器该脚本将在文档完成解析后，触发 DOMContentLoaded 事件前执行。如果缺少 src 属性（即内嵌脚本），该属性不应被使用，因为这种情况下它不起作用。
对动态嵌入的脚本使用 `async=false` 来达到类似的效果。

integrity
包含用户代理可用于验证已提取资源是否已无意外操作的内联元数据。参见 Subresource Integrity。

nomodule
这个布尔属性被设置来标明这个脚本在支持 ES2015 modules 的浏览器中不执行。 — 实际上，这可用于在不支持模块化JavaScript的旧浏览器中提供回退脚本。

src
这个属性定义引用外部脚本的URI，这可以用来代替直接在文档中嵌入脚本。指定了 src 属性的script元素标签内不应该再有嵌入的脚本。

type
      该属性定义script元素包含或src引用的脚本语言。属性的值为MIME类型; 支持的MIME类型包括text/javascript, text/ecmascript, application/javascript, 和application/ecmascript。如果没有定义这个属性，脚本会被视作JavaScript。
   如果MIME类型不是JavaScript类型（上述支持的类型），则该元素所包含的内容会被当作数据块而不会被浏览器执行。
        如果type属性为module，代码会被当作JavaScript模块 。请参见ES6 in Depth: Modules
    在Firefox中可以通过定义type=application/javascript;version=1.8来使用如let声明这类的JS高版本中的先进特性。 但请注意这是个非标准功能，其他浏览器，特别是基于Chrome的浏览器可能会不支持。

text
和 textContent 属性类似，本属性用于设置元素的文本内容。但和 textContent  不一样的是，本属性在节点插入到DOM之后，此属性被解析为可执行代码。

charset 
字符集如果存在。它的值必须是不区分大小写的“utf-8”匹配。这两个都不需要指定charset属性，因为文档必须使用UTF-8, anc脚本元素从文档中继承其字符编码。

language 
和type属性类似，这个属性定义脚本使用的语言。 但是与type不同的是，这个属性的可能值从未被标准化过。请用type属性代替这个属性。

关于如何引入特殊编程语言，请参见:https://developer.mozilla.org/en-US/docs/Archive/Add-ons/Code_snippets/Rosetta

交互元素

details元素

可创建一个挂件，仅在被切换成展开状态时，它才会显示内含的信息。<summary> 元素可为该部件提供概要或者标签。

属性：
open
此布尔属性指示细节(即details元素的内容)当前是否可见。默认的false表示细节不可见。

样式：<details open>Hello World！</details>

事件：

除了HTML元素支持的常见事件之外，details元素还支持toggle事件，每当details元素的状态在打开和关闭之间发生变化时，该事件就会被分派到 details元素。它是在状态更改之后发送的，但是如果在浏览器可以调度事件之前状态更改了多次，则将事件合并在一起，以便只发送一个事件。您可以侦听toggle事件，以检测小部件何时更改状态:

dialog元素

表示一个对话框或其他交互式组件，例如一个检查器或者窗口。

但是 tabindex 特性不能被使用在 <dialog> 元素上。

open
指示这个对话框是激活的和能互动的。当这个 open 特性没有被设置，对话框不应该显示给用户。

<form> 元素可在此对话框中使用，但需要指定属性 method="dialog" 。当提交表单时，对话框的 returnValue 属性将会等于表单中被使用的提交按钮的 value 。
::backdrop CSS 伪元素可用于更改 <dialog> 背景元素样式，例如在对话框被打开激活时，调暗背景中不可访问的内容。仅当使用 HTMLDialogElement.showModal() 显示对话框时才会绘制 backdrop 背景。

当单击“更新详细信息”按钮时，此示例打开一个包含一个表单的弹出对话框。

menu元素

呈现了一组用户可执行或激活的命令。这既包含了可能出现在屏幕顶端的列表菜单，也包含了那些隐藏在按钮之下、当点击按钮后显示出来的文本菜单。

menu 和 ul 元素都呈现了无序列表元素。最主要的区别是，ul 主要是为了展示选项，而 menu 则是为了交互。

属性：

label

显示给用户的菜单名。在嵌套菜单中使用，以提供可通过其访问子菜单的标签。必须仅在上下文菜单状态下的父级为<menux时指定。

type

此属性指示要声明的菜单的类型，可以是两个值之一。
上下文:指示弹出菜单状态，表示通过另一个元素激活的一组命令。这可以是<button>元素的菜单属性引用的按钮菜单，也可以是具有contextmenu属性的元素的上下文菜单。如果缺少属性，并且父元素也是<menu>元素，则此值是默认值工具栏
指示工具栏状态，表示由一系列用户交互命令组成的工具栏。这可以是无序列表oi li元素的形式。或者，如果元素没有 li 元素子元素，则使用描述可用命令的流内容。如果属性缺失，则此值为默认值。

使用：

HTML菜单可用于创建上下文菜单(通常通过右键单击另一个元素来激活)或工具栏。
上下文菜单：由一个<menu>元素组成，该元素包含菜单中每个可选选项的<menuitem>元素，菜单中的子菜单的<menu>元素，分隔线的 hr 元素，用于将菜单内容分成多个部分。然后，上下文菜单被附加到通过使用关联元素的ontextmenu属性激活的元素上，或者对于附加到 button 元素上的按钮激活菜单，附加到菜单属性上
工具栏菜单：包含一个<menu>元素的内容是描述两种方式中的一种作为一个无序列表的项目由 li 元素(每个代表一个命令或选项,用户可以使用),或(如果没有 li 元素),流内容描述可用的命令和选项。

menuitem元素

过时了（除了火狐都不支持）

用户可以通过HTML <menuitem> 元素生成一个弹出式菜单。这包括上下文菜单，以及按钮可能附带的菜单。

summary元素

用作一个details 元素的一个内容的摘要，标题或图例。
控制
<details>
</details>

使用summary：

< details>
< summary>
结果
</summary>
</details>

web组件

content元素

已废弃

Web 组件的技术套件的废弃部分 — 用于 Shadow DOM 内部作为 insertion point，并且不可用于任何正常的 HTML，现在已被 <slot> 元素代替，它在 DOM 中创建一个位置，Shadow DOM 会插入这里。

element元素

已被删除，但部分浏览器支持

被定义在最新的 HTML DOM 元素中。

shadow元素

已废弃

Web 组件技术套件的废弃部分 — 目的是用作 Shadow DOM insertion point。如果你在 shadow host 下面创建了多个 shadow root，你就可能已经使用了它。在正常的 HTML 没有任何用处。

slot元素

是 Web Components 技术套件的一部分，是Web组件内的一个占位符，可以使用自己的标记填充，这样您就可以创建单独的DOM树并将它们组合在一起。

属性：
name

插槽的名字
拥有name属性的插槽叫具名插槽。

template元素

是一种用于保存客户端内容机制，该内容在加载页面时不会呈现，但随后可以(原文为 may be)在运行时使用JavaScript实例化。

将模板视为一个可存储在文档中以便后续使用的内容片段。虽然解析器在加载页面时确实会处理<template>元素的内容，但这样做只是为了确保这些内容有效；但元素内容不会被渲染。

HTMLTemplateElement 有个属性： content , 这个属性是只读的DocumentFragment 包含了模板所表示的DOM树。

我们有一个表，稍后我们将使用JavaScript代码在其中插入内容。然后是模板，它描述了表示单个表行的HTML片段的结构。
既然已经创建了表并定义了模板，我们使用JavaScript将行插入到表中，每一行都是以模板为基础构建的。

来源MDN