current position：Home>Tag attributes you don't know

Tag attributes you don't know

2022-08-06 19:02:44【SoulReader】

携手创作,共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第5天,点击查看活动详情

原文地址

HTML全局属性

  • accesskey 规定激活元素的快捷键,使元素获得焦点（OperaThe browser does not support this option）

    以下元素支持accesskey a, area, button, input, label, legend 以及 textarea

  • contenteditable 规定元素内容是否可编辑,如果元素未设置contenteditable 属性,Then the element will inherit the property from its parent element

    contenteditable = true | false

  • contextmenu 规定 div The element's context menu.The context menu appears when the user right-clicks on an element,contextmenu 属性的值是要打开的 menu 元素的 id,目前只有fireFox支持

      <div contextmenu="mymenu">
    <menu type="context" id="mymenu">
      <menuitem label="Refresh"></menuitem>
      <menuitem label="Twitter"></menuitem>
    </menu>
  </div>
复制代码

  • data-* Used to embed custom data,Empower us at all HTML 元素上嵌入自定义 data 属性的能力,属性名不应该包含任何大写字母,并且在前缀 "data-" 之后必须有至少一个字符

  • dir 属性规定元素内容的文本方向 ltr: 从左到右 rtl: 从右到左

    dir属性在以下标签中无效base, br, frame, frameset, hr, iframe, param 以及 script

  • draggable 规定元素是否可拖拽 true|false|auto

    It should be used in conjunction with functionsondragstart,ondragover,ondrop

      <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style> html,body{ width: 100%; height: 100%; } #div{ position: absolute; top: 200px; border: 1px solid rebeccapurple; height: 20px; width: 100px; } </style>
  </head>
  <body >
    <div id="div" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <p id="drag" draggable="true" dropzone="link" ondragstart="drag(event)">3242342342</p>
    <script> function drag(e) { console.log(e) e.dataTransfer.setData('Text', e.target.id) } function drop(e) { var data = e.dataTransfer.getData("Text"); e.target.appendChild(document.getElementById(data)); e.preventDefault(); } function allowDrop(e) { e.preventDefault(); } </script>
  </body>
  </html>
复制代码

    在与contenteditableDoes not work when used together

  • dropzone Dragging data produces a copy of the dragged data

    • copy Dragging data produces a copy of the dragged data.
    • move Dragging data causes the dragged data to be moved to a new location.
    • link Dragging the data results in a link to the original data.

    No browser support yet

  • hidden Specifies whether the element is displayed 是布尔属性 hiddenAttributes can be used to prevent users from viewing elements,Know to match certain conditions

    在 XHTML 中,Property shorthand is prohibited,hidden 属性必须定义为 <element hidden="hidden">

  • lang Specifies the language of the element's content zh,en

    lang 属性在以下标签中无效：<base>, <br>, <frame>, <frameset>, <hr>, <iframe>, <param> 以及 <script>.

  • spellcheck 规定是否对元素进行拼写和语法检查

    • input 元素中的文本值（非密码）
    • <textarea> 元素中的文本
    • 可编辑元素中的文本

  • tabindex 规定元素的 tab 键控制次序（当 tab 键用于导航时）

    以下元素支持 tabindex 属性：<a>, <area>, <button>, <input>, <object>, <select> 以及 <textarea>,Almost all browsers do tabindex 属性,除了 Safari

  • translate Specifies that certain elements should not be translated

    All major browsers do not support it properly translate 属性,请使用 class="notranslate" 替代

HTML事件属性

  • Window 事件属性 针对 window 对象触发的事件（应用到 标签）

    onload 页面结束加载之后触发

    onresize Fired when the browser window is resized

    onunload 一旦页面已下载时触发（或者浏览器窗口已被关闭）

  • Form 事件 由 HTML 表单内的动作触发的事件（应用到几乎所有 HTML 元素,但最常用在 form 元素中）

    onblur 元素失去焦点时运行的脚本

    onchange Script to run when element value is changed

    onfocus 当元素获得焦点时运行的脚本

    onselect 在元素中文本被选中后触发

    onsubmit 在提交表单时触发

  • keyboard 事件

    onkeyup 用户释放按键时触发

    onkeydown Fired when the user presses a key

    onkeypress Fired when the user hits the button

  • mouse 事件

    onclick Fired when a mouse click occurs on an element

    ondbclick Fired when an element is double-clicked

    ondrag, ondragend, ondragstart ondrop, ondragenter, ondragerleave, ondragover Fired when the element is dragged

    onmousedown 按下鼠标按钮时触发

    onmouseup 释放鼠标按钮时触发

    onmousemove Triggered when the mouse pointer moves over an element

    onmouseover Fired when the mouse pointer is moved out of the element

    onmousewheel Script that runs when the mouse wheel is scrolling

    onscroll 当元素滚动条被滚动时运行的脚本

  • Media 事件

    onabort 在退出时运行的脚本

    oncanplay 当文件就绪可以开始播放时运行的脚本(缓冲已足够开始时)

    onwaiting When the media has stopped and the playlist intends to continue playing

标签

  • base 标签

    <base href="http://www.baidu.com/static/">

    <base> The tag specifies the default address and default destination for all links on the page,Under normal circumstances, the browser will sign the document from a single oneurlExtract the elements of the response to fill inURL中的空白,但是<base>Labels can change a bit,浏览器随后将不再使用当前文档的url,Instead use the specified baseurl,包括<a>,<img>,<link>,<form>标签中的URL

    <base>标签必须位于head元素内部

  • basefont 标签

    <basefont color="red" size="5">

    Specifies the default font color and size on the page, Major browsers do not currently support this tag

  • blockquote 标签

<blockquote> 标签定义块引用, All text in the label is separated from regular text,Often there is a gap on the left and right sides,而且有时会使用斜体,That is, block references have their own space

make the page as strict XHTML 进行验证,那么 <blockquote> 元素必须包含块级元素

  • datalist 标签

    datalist 描述了input Possible values ​​for the label

      <input id="myCar" list="cars">
  <datalist id=cars>
    <option value="BMW">
    <option value="FORD">
    <option value="VOLVO">
  </datalist>  
复制代码

    datalist Labels Labels define a list of options,与input元素配合使用,定义input可能的值,datalistand its elements are not displayed,Just a list of valid input values, 用input的list属性来绑定datalist

  • del 删除线

  • details 标签

    用于描述文档或者文档某个部分的细节

      <details>
    <summary>Copyright 2011.</summary>
    <p>All pages and graphics on this web site are the property of W3School.</p>
  </details>
复制代码

    目前只有 Chrome 支持 <details> 标签.

  • dialog 标签

    dialog A label defines what a dialog or window isHTML5的新标签

  • embed 标签

    <embed> 标签定义嵌入的内容,比如插件.

      <embed src="helloworld.swf" type="MIME_type" />
复制代码

  • fieldset 标签

      <form>
    <fieldset>
      <legend>health information</legend>
      height: <input type="text" />
      weight: <input type="text" />
    </fieldset>
  </form>
复制代码

    <fieldset> 元素可将表单内的相关元素分组,将表单内容的一部分打包,生成一组相关表单的字段

    <legend> 标签为 <fieldset> 元素定义标题.

  • figcaption 标签

    用作文档中插图的图像,带有一个标题

      <figure>
    <figcaption>黄浦江上的的卢浦大桥</figcaption>
    <img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
  </figure>
复制代码

    <figcaption> 标签定义 figure 元素的标题,应该被置于 "figure" 元素的第一个或最后一个子元素的位置

  • frame 标签

      <frameset cols="25%,50%,25%">
    <frame src="frame_a.htm" />
    <frame src="frame_b.htm" />
    <frame src="frame_c.htm" />
  </frameset>
复制代码

    <frame> 标签定义 frameset 中的一个特定的窗口

  • frameset 标签

    frameset 元素可定义一个框架集.它被用来组织多个窗口（框架）.每个框架存有独立的文档

    • cols 定义框架集中列的数目和尺寸
    • rows 定义框架集中行的数目和尺寸

  • iframe 标签

    iframe 元素会创建包含另外一个文档的内联框架（即行内框架）

    • frameborder 规定是否显示框架周围的边框
    • height 规定iframe的高度
    • width 定义 iframe 的宽度
    • marginheight 定义 iframe 的顶部和底部的边距
    • marginwidth 定义 iframe 的左侧和右侧的边距
    • name 规定 iframe 的名称
    • scrolling yes/no/auto 规定是否在 iframe 中显示滚动条
    • src 规定在 iframe 中显示的文档的 URL

  • img 标签

    • alt 规定图像的替代文本
    • src 规定显示图像的 URL
    • height 定义图像的高度
    • width 设置图像的宽度
    • ismap 将图像定义为服务器端图像映射
    • usemap 将图像定义为客户器端图像映射

  • input 标签

    • accept 规定通过文件上传来提交的文件的类型
    • alt 定义图像输入的替代文本
    • autocomplete on/off 规定是否使用输入字段的自动完成功能
    • autofocus 规定输入字段在页面加载时是否获得焦点,（不适用于 type="hidden"）
    • checked 规定此 input 元素首次加载时应当被选中
    • disabled 当 input 元素加载时禁用此元素
    • form 规定输入字段所属的一个或多个表单
    • list 引用包含输入字段的预定义选项的 datalist
    • max 规定输入字段的最大值
    • min 规定输入字段的最小值
    • maxlength 规定输入字段中的字符的最大长度
    • multiple 如果使用该属性,则允许一个以上的值
    • name 定义 input 元素的名称
    • pattern 规定输入字段的值的模式或格式,Usually used for form input content validation rules
    • placeholder 规定帮助用户填写输入字段的提示
    • readonly 规定输入字段为只读
    • required 指示输入字段的值是必需的
    • size 定义输入字段的宽度
    • src 定义以提交按钮形式显示的图像的 URL
    • type button/checkbox/file/hidden/image/password/radio/reset/submit/text/tel/email/teatarea/radio 规定 input 元素的类型

  • keygen 标签

      <form action="demo_keygen.asp" method="get">
    Username: <input type="text" name="usr_name" />
    Encryption: <keygen name="security" />
    <input type="submit" />
  </form>
复制代码

    <keygen> 标签规定用于表单的密钥对生成器字段.当提交表单时,私钥存储在本地,公钥发送到服务器

  • link 标签

    <link> 标签定义文档与外部资源的关系

    • href 规定被链接文档的位置
    • rel alternate/author/elp/icon/licence/next/pingback/prefetch/prev/search/sidebar/stylesheet/tag 规定当前文档与被链接文档之间的关系
    • type 规定被链接文档的 MIME 类型

  • map 标签

      <map name="planetmap" id="planetmap">
    <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
    <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
    <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
  </map>
复制代码

    定义一个客户端图像映射.图像映射（image-map）指带有可点击区域的一幅图像.

    area 元素永远嵌套在 map 元素内部.area 元素可定义图像映射中的区域

  • mark 标签

    <mark> 标签定义带有记号的文本.请在需要突出显示文本时使用 <m>标签

  • meta 标签

    <meta> 元素可提供有关页面的元信息（meta-information）,比如针对搜索引擎和更新频度的描述和关键词,<meta> 标签位于文档的头部,不包含任何内容.<meta> 标签的属性定义了与文档相关联的名称/值对

    • content 定义与 http-equiv 或 name 属性相关的元信息
    • http-equiv content-type/expires/refresh/set-cookie 把 content 属性关联到 HTTP 头部
    • name author/description/keywords/generator/revised/others 把 content 属性关联到一个名称
    • scheme 定义用于翻译 content 属性值的格式

  • meter 标签

    使用meter elements to measure data within a given range

      <meter value="3" min="0" max="10">十分之三</meter>
复制代码

    <meter> 标签定义已知范围或分数值内的标量测量.也被称为 gauge（尺度）

  • object 标签

    向 HTML The code adds an object

      <object classid="clsid:F08DF954-8592-11D1-B16A-00C0F0283628" id="Slider1" width="100" height="50">
    <param name="BorderStyle" value="1" />
    <param name="MousePointer" value="0" />
    <param name="Enabled" value="1" />
    <param name="Min" value="0" />
    <param name="Max" value="10" />
  </object>
复制代码

copyright notice
author[SoulReader],Please bring the original link to reprint, thank you.
https://en.cdmana.com/2022/218/202208061858275651.html

The sidebar is recommended

guess what you like

Random recommended