跳到主要内容

元素（Elements）

HTML 语义化

元数据​

元素(Element)说明(Description)接口(Interface)
html根元素HTMLHtmlElement
\- head文档元数据容器HTMLHeadElement
\-- title文档标题HTMLTitleElement
\-- <base />超链接和表单的基本URL和可导航的默认目标HTMLBaseElement
\-- noscript脚本的回退内容HTMLElement
\-- <meta />文本元数据HTMLMetaElement
\-- <link />链接元数据HTMLLinkElement
\-- style嵌入式样式信息HTMLStyleElement
\-- script嵌入式脚本HTMLScriptElement
\- body文档主体HTMLBodyElement

容器​

元素(Element)说明(Description)接口(Interface)元素分组
div通用流容器，或dl元素中名称值组的容器HTMLDivElement块元素
span通用措辞容器HTMLSpanElement行元素？
header头部区域HTMLElement块元素
section部分/剖面HTMLElement块元素
navNavigator 导航区HTMLElement块元素
search搜索区HTMLElement块元素
main主要内容区域HTMLElement块元素
aside侧边栏HTMLElement块元素
article文章区HTMLElement块元素
footer底部区域HTMLElement块元素

示例参考：HTML5元素示例

导航​

元素(Element)说明(Description)接口(Interface)元素分组
menu菜单HTMLMenuElement块元素
a超链接HTMLAnchorElement行元素？
map图片地图HTMLMapElement行元素
\- <area />图片地图上的超链接或死区HTMLAreaElement行元素
<hr />分隔线HTMLHRElement块元素

示例参考：HTML5元素示例

排版​

元素(Element)说明(Description)接口(Interface)元素分组
hgroupHeading container 标题容器HTMLElement块元素
h1Heading 1HTMLHeadingElement块元素
h2Heading 2HTMLHeadingElement块元素
h3Heading 3HTMLHeadingElement块元素
h4Heading 4HTMLHeadingElement块元素
h5Heading 5HTMLHeadingElement块元素
h6Heading 6HTMLHeadingElement块元素
pParagraph 段落HTMLParagraphElement块元素
address页面或文章元素的联系信息HTMLElement块元素
strong强调并粗体HTMLElement行元素？
bBold 粗体HTMLElement行元素？
emEmphasis 强调并斜体HTMLElement行元素？
iItalic 斜体HTMLElement行元素？
small缩写文本/旁注HTMLElement行元素？
supSuperscript 上标HTMLElement行元素？
subSubscript 下标HTMLElement行元素？
delDelete 从文档中删除HTMLModElement行元素？
sStrikethrough 文本不准确HTMLElement行元素？
insInsert 对文档的补充HTMLModElement行元素？
uUnderlined 不清晰的注释HTMLElement行元素？
ruby注释/音标HTMLElement行元素 ruby
\- rt注释文本HTMLElement行元素 ruby-text
\- rp注释文本的括号，回退显示HTMLElement行元素 none
abbrAbbreviation 缩写HTMLElement行元素？
dfnDefining 定义实例HTMLElement行元素？
bdoDirection of Text 局部文本方向HTMLElement行元素？
\- bdi隔离局部文本方向控制HTMLElement行元素？
<wbr />Word Break 单词换行机会HTMLElement行元素？
<br />Break 换行符HTMLBRElement行元素？
qQuotation 引用HTMLQuoteElement行元素
blockquote引用另一来源的一节HTMLQuoteElement块元素
citeCitation 引用作品标题HTMLElement行元素？
code计算机代码HTMLElement行元素？
sampSample 计算机输出HTMLElement行元素？
varVariable 变量HTMLElement行元素？
kbdKeyboard 用户输入HTMLElement行元素？
mark高亮HTMLElement行元素？
prePreformatted 预格式化文本块HTMLPreElement块元素
dlDictionary List 由零个或多个名称值组组成的关联列表HTMLDListElement块元素
\- dtDictionary TitleHTMLElement块元素
\- ddDictionary DataHTMLElement块元素
olOrdered List 有序列表HTMLOListElement块元素
ulUnordered List 无序列表HTMLUListElement块元素
\- liList Item 列表项HTMLLIElement块元素 list-item
table表格HTMLTableElement行块元素 table
\- caption表格标题HTMLTableCaptionElement行块元素 table-caption
\- colgroup表格中的列组HTMLTableColElement行块元素 table-column-group
\-- <col />表格中的列HTMLTableColElement行块元素 table-column
\- thead表中的标题行组HTMLTableSectionElement行块元素 table-header-group
\- tbody表中的行组HTMLTableSectionElement行块元素 table-row-group
\- tfoot表中的页脚行组HTMLTableSectionElement行块元素 table-footer-group
\-- tr表格行HTMLTableRowElement行块元素 table-row
\--- th表头中的单元格HTMLTableCellElement行块元素 table-cell
\--- td表格单元格HTMLTableCellElement行块元素 table-cell
data当前日期的机器可读等效物HTMLDataElement行元素？
time指定日期或时间的机器可读等效物HTMLTimeElement行元素？

示例参考：HTML5元素示例

数据展示​

图片和图形​

元素(Element)说明(Description)接口(Interface)元素分组
figure带有可选标题的图HTMLElement块元素
\- figcaption分组图的标题HTMLElement块元素
picture图片HTMLPictureElement行元素？
<img />图片HTMLImageElement行元素？
<iframe />内联框架HTMLIFrameElement行块元素
<embed />插件HTMLEmbedElement行块元素
object图片、内联框架和插件HTMLObjectElement行块元素
canvas可脚本化的位图画布HTMLCanvasElement行块元素

示例参考：HTML5元素示例

媒体​

元素(Element)说明(Description)接口(Interface)元素分组
audio音频播放器HTMLAudioElement行块元素
video视频播放器HTMLVideoElement行块元素
\- <source />图片源或媒体源HTMLSourceElement-
\- <track />定时字幕HTMLTrackElement-

示例参考：HTML5元素示例

数据录入​

元素(Element)说明(Description)接口(Interface)元素分组
form表单HTMLFormElement块元素
fieldset表单控件组HTMLFieldSetElement块元素
\- legend字段集的标题HTMLLegendElement块元素
label表单控件的标题HTMLLabelElement行元素？
<input />输入框 表单控件HTMLInputElement行块元素
textarea多行文本控件HTMLTextAreaElement行块元素
select列表框控件HTMLSelectElement行块元素
\- optgroup列表框中的选项组HTMLOptGroupElement块元素
\- option列表框或组合框控件中的选项HTMLOptionElement块元素
datalist用于组合框控件选项的容器HTMLDataListElement行元素 none
button按钮控件HTMLButtonElement行块元素
output计算输入值HTMLOutputElement行元素

示例参考：HTML5元素示例

反馈​

元素(Element)说明(Description)接口(Interface)元素分组
progress进度条HTMLProgressElement行块元素
meter计量器HTMLMeterElement行块元素
dialog对话框HTMLDialogElement块元素
details详情HTMLDetailsElement块元素

示例参考：HTML5元素示例

插槽​

元素(Element)说明(Description)接口(Interface)元素分组
template模板HTMLTemplateElement行元素 none
slot插槽HTMLSlotElement行元素 contents

示例参考：HTML5元素示例

遗留/废弃 ⚠️​

元素(Element)说明(Description)接口(Interface)
document.all-HTMLAllCollection
form-HTMLFormControlsCollection
option-HTMLOptionsCollection
paramobject 参数HTMLParamElement
dir目录列表HTMLDirectoryElement
font字体HTMLFontElement
frameset框架集HTMLFrameSetElement
frame框架HTMLFrameElement
marquee跑马灯HTMLMarqueeElement
--HTMLUnknownElement

元素分类​

  • Metadata content
    • Script-supporting elements
  • Flow content
    • Sectioning content
    • Heading content
    • Interactive content
    • Phrasing content
      • Embedded content
      • Palpable content
      • Sectioning roots
      • Form-associated elements
      • Listed elements
      • Submittable elements
      • Resettable elements
      • Autocapitalize-inheriting elements
      • Labelable elements

参考​