HTML 之元素周期表

280 阅读1分钟

Periodic Table of the HTML Elements 115 tags

898a951004a5b39b5e7610cbe3d0052.jpg

各位掘友们,先上图为敬!(社群里看到的赶紧珍藏了)

Root element 根元素

graph TD
Root-element-根元素   -->   html

Metadata and scripting 元数据脚本

graph TD
Metadata-and-scripting-元数据脚本   -->   head
Metadata-and-scripting-元数据脚本   -->   title
Metadata-and-scripting-元数据脚本   -->   meta
Metadata-and-scripting-元数据脚本   -->   template
Metadata-and-scripting-元数据脚本   -->   base
Metadata-and-scripting-元数据脚本   -->   slot
Metadata-and-scripting-元数据脚本   -->   link
Metadata-and-scripting-元数据脚本   -->   noscript
Metadata-and-scripting-元数据脚本   -->   Style
Metadata-and-scripting-元数据脚本   -->   script

Document sections 文档块

graph TD
 Document-sections-文档块   -->   body
 Document-sections-文档块   -->   section
 Document-sections-文档块   -->   nav
 Document-sections-文档块   -->   main
 Document-sections-文档块   -->   header
 Document-sections-文档块   -->   footer
 Document-sections-文档块   -->   h1
 Document-sections-文档块   -->   h2
 Document-sections-文档块   -->   h3
 Document-sections-文档块   -->   h4
 Document-sections-文档块   -->   h5
 Document-sections-文档块   -->   h6
 Document-sections-文档块   -->   aside
 Document-sections-文档块   -->   address
 Document-sections-文档块   -->   article

Grouping content 分组内容

graph TD
Grouping-content-分组内容   -->   div
Grouping-content-分组内容   -->   p
Grouping-content-分组内容   -->   hr
Grouping-content-分组内容   -->   figcaption
Grouping-content-分组内容   -->   br
Grouping-content-分组内容   -->   pre
Grouping-content-分组内容   -->   figure
Grouping-content-分组内容   -->   ol
Grouping-content-分组内容   -->   ul
Grouping-content-分组内容   -->   li
Grouping-content-分组内容   -->   dd
Grouping-content-分组内容   -->   dl
Grouping-content-分组内容   -->   dt
Grouping-content-分组内容   -->   blockquote
Grouping-content-分组内容   -->   dialog

Text-level semantics 文本语义

graph TD
Text-level-semantic-文本语义   -->   span
Text-level-semantic-文本语义   -->   a
Text-level-semantic-文本语义   -->   em
Text-level-semantic-文本语义   -->   strong
Text-level-semantic-文本语义   -->   small
Text-level-semantic-文本语义   -->   cite
Text-level-semantic-文本语义   -->   s
Text-level-semantic-文本语义   -->   q
Text-level-semantic-文本语义   -->   abbr
Text-level-semantic-文本语义   -->   data


graph TD

Text-level-semantic-文本语义   -->   time
Text-level-semantic-文本语义   -->   code
Text-level-semantic-文本语义   -->   var
Text-level-semantic-文本语义   -->   samp
Text-level-semantic-文本语义   -->   kbd
Text-level-semantic-文本语义   -->   sub
Text-level-semantic-文本语义   -->   sup
Text-level-semantic-文本语义   -->   i
Text-level-semantic-文本语义   -->   b
Text-level-semantic-文本语义   -->   mark

graph TD

Text-level-semantic-文本语义   -->   ruby
Text-level-semantic-文本语义   -->   rb
Text-level-semantic-文本语义   -->   rt
Text-level-semantic-文本语义   -->   rtc
Text-level-semantic-文本语义   -->   rp
Text-level-semantic-文本语义   -->   bdo
Text-level-semantic-文本语义   -->   dfn
Text-level-semantic-文本语义   -->   u
Text-level-semantic-文本语义   -->   bdi
Text-level-semantic-文本语义   -->   ins
Text-level-semantic-文本语义   -->   del
Text-level-semantic-文本语义   -->   wbr


Embedding content 嵌入内容

graph TD
Embedding-content-嵌入内容   -->   img
Embedding-content-嵌入内容   -->   picture
Embedding-content-嵌入内容   -->   iframe
Embedding-content-嵌入内容   -->   embed
Embedding-content-嵌入内容   -->   object
Embedding-content-嵌入内容   -->   param
Embedding-content-嵌入内容   -->   video
Embedding-content-嵌入内容   -->   audio
Embedding-content-嵌入内容   -->   source
Embedding-content-嵌入内容   -->   canvas
Embedding-content-嵌入内容   -->   map
Embedding-content-嵌入内容   -->   area
Embedding-content-嵌入内容   -->   track

Tabular data 表格数据

graph TD
Tabular-data-表格数据   --> table
Tabular-data-表格数据   --> col
Tabular-data-表格数据   --> thead
Tabular-data-表格数据   --> colgroup
Tabular-data-表格数据   --> tbody
Tabular-data-表格数据   --> caption
Tabular-data-表格数据   --> captin
Tabular-data-表格数据   --> tfoot
Tabular-data-表格数据   --> tr
Tabular-data-表格数据   --> th
Tabular-data-表格数据   --> td

Forms 表单 && Interactive elements 互动元素

graph TD
Forms-Interactive-elements   --> menu
Forms-Interactive-elements   --> command
Forms-Interactive-elements   --> summary
Forms-Interactive-elements   --> details

HTML5 新增标签

graph TD
Start --> Stop

Most commonly used 最常用标签