html中标签的个体属性

102 阅读2分钟

html中的标签有些只具有全局属性,有些除了全局属性之外,还具有个体属性。

  • 根元素:html🈶
  • 元数据脚本:head、title、meta🈶、base🈶、link🈶、style🈶、script🈶、noscript
  • 文本语义:span、a🈶、rt、rp、dfn、abbr、q🈶、cite、em、time🈶、var、samp、i、b、sub、sup、small、strong、mark、ruby、ins🈶、del🈶、bdi、bdo、s、kbd、wbr、code、u
  • 分组内容:br、hr、figure、figcaption、p、ol🈶、ul、li🈶、div、pre、blockquote🈶、dl、dt、dd
  • Forms表单:fieldset🈶、meter🈶、legend、label🈶、input🈶、textarea🈶、form🈶、select🈶、optgroup🈶、option🈶、output🈶、button🈶、datalist、progress🈶
  • 文档块:body、aside、address、h1~h6、section、header、nav、article、footer、hgroup、main
  • 表格数据:col🈶、colgroup🈶、caption、table、tr、td🈶、th🈶、tbody、thead、tfoot
  • 交互元素:sunmmary、details🈶、dialog🈶、menu🈶
  • 嵌入内容:img🈶、picture、map🈶、area🈶、embed🈶、object🈶、iframe🈶、canvas🈶、audio🈶、video🈶、source🈶、slot🈶、track🈶、template

标注了🈶的表示该标签还有个体属性,无标注表示该标签只有全局属性。

个体属性跟标签的语义有关,一般来说,标签的含义和应用场景决定着它将会有哪些属性,且功能越多则属性越多。

根元素有个体属性,请参考 《html中的根标签》

元数据脚本元素有些具有个体属性,请参考《html中的元数据脚本标签》

文本语义元素大部分不具备个体属性,只有5个标签有个体属性

  • a:download、href、hreflang、ping、referrerpolicy、rel、target、type
  • q:cite
  • time:datetime、pubdate
  • ins:cite、datetime
  • del:cite、datetime

分组内容元素大部分不具备个体属性,只有3个标签有个体属性

  • ol:reversed、start、type
  • li:value
  • blockquote:cite

表单元素大部分具备个体属性,由此也可以看出表单元素具有丰富的功能性

  • fieldset:disabled、form、name
  • meter:value、min、max、low、high、optimum、form
  • label:for、form
  • input:type、accept、alt、autocomplete、capture、checked、dirname、disabled、form、formaction、formenctype、formmethod、formnovalidate、formtarget、height、list、max、maxlength、min、minlength、multiple、name、pattern、placeholder、readonly、required、size、src、step、type、value、width
  • textarea:autocomplete、autofocus、cols、disabled、form、maxlength、minlength、name、placeholder、readonly、required、rows、spellcheck、wrap
  • form:accept-charset、autocomplete、name、rel、action、enctype、method、novalidate、target
  • select:autocomplete、autofocus、disabled、form、multiple、name、required、size
  • optgroup:disabled、label
  • option:disabled、label、selected、value
  • output:for、form、name
  • button:autofocus、disabled、form、formaction、formenctype、formmethod、formnovalidate、formtarget、name、type、value
  • progress:max、value

文档块元素都不具备个体属性

表格元素有4个具备个体属性

  • col:span
  • colgroup:span、width
  • td:colspan、headers、rowspan
  • th:colspan、headers、rowspan、scope

交互元素有3个具备个体属性

  • details:open
  • dialog:open
  • menu:type

嵌入内容元素大部分具备个体属性

  • img:alt、crossorigin、decoding、height、ismap、loading、referrerpolicy、sizes、src、srcset、width、usemap
  • map:name
  • area:alt、coords、download、href、hreflang、media、rel、shape、target、type
  • embed:height、src、type、width
  • object:data、form、height、name、type、usemap、width
  • iframe:allow、allowfullscreen、allowpaymentrequest、height、name、referrerpolicy、sandbox、src、srcdoc、width、
  • canvas:height、width
  • audio:autoplay、controls、crossorigin、currentTime、duration、loop、muted、preload、src
  • video:autoplay、controls、crossorigin、height、loop、muted、playsinline、poster、preload、src、width
  • source:type、src、srcset、sizes、media、height、width
  • slot:name
  • track:default、kind、label、src、srclang