文章目录
  1. 1. Defined
  2. 2. Main()
    1. 2.1. === 01-26 Update ===
    2. 2.2. Layout
    3. 2.3. with Content
      1. 2.3.1. block
      2. 2.3.2. inline
      3. 2.3.3. embed
      4. 2.3.4. tabular data
      5. 2.3.5. Microformats(may deprecated)
      6. 2.3.6. Microdata
  3. 3. Reference

Defined

为了让html更好的被解释.

Main()

=== 01-26 Update ===

发现人家MDN早就给归类了, 下面就当给自己写日记了. HTML element reference

Layout

  1. section-MDN
    a list of search results and a map display and its controls don’t have specific elements, and could be put inside a <section>.and normally will attach a heading. 一般用于文档提纲(outline)

  2. <header> navigation | introductory | logo | search form | name.etc

  3. nav>.*>a:href navigation
  4. <main> tag唯一.
  5. <footer> author | copyright | links | section页脚
  6. <aside> 一般为和主旨不相关的内容(广告, 外传etc.)

上述布局样例: demo-MDN

with Content

block

  1. <pre> content with preformatted
  2. <blockquote> block paragraph with other source from cite
  3. dl>(dt>dfn + dd>abbr+p) descriptions list
  4. <figure> self-contained / graphic | photo | charts | codes, 通常伴有 <figcaption>.

inline

  1. <q> inline paragrah with other source from cite
  2. <em> emphasize
    <strong> importance
    <mark> notation purpose, mark or highlight
    <b> 无特殊语义, 仅用于区分. e.g. <b class="lead">可以表示文章第一句话.
  3. 指示/特殊名词
  4. <small> 声明类相关(免责/许可) 注意事项
    <s> strikethrough; content with not relevant / not accurate any longer
    <u> underline; stand for name with certain place / person
    underline><ins> insert; with cite and datetime

    类似于text-decoration这种在非必须条件下就可以用前面两种替代了

    delete ><del> delte; with cite and datetime

  5. <cite> the title referred
  6. <abbr> abbreviation 缩写 <dfn> definition | e.g. <dfn><abbr title="Garage Door Opener">GDO</abbr></dfn>
  7. <time> datetime有相关定义 e.g.

    1
    <time class="dtstart" datetime="2005-10-05">October 5</time> - <time class="dtend" datetime="2005-10-07">7</time>
  8. <code> codes <samp> outputs <kbd> user inputs (keyboard)

PS: 提一个input中range属性, 可以直接滑块拖动.

embed

这里不讲了, 和流媒体相关. <object>这些

tabular data

写了一个Gist:

Microformats(may deprecated)

HTML 的扩展, 用来标注人物 / 组织 / 事件 / 地点 / 简历 / 菜谱.etc
更加专业, 不过感觉只需要refer即可. MF-Link
如果需要写相关内容, 建议往专业页面进行参考, 例如名片类型可以参考wikiPedia

Microdata

只能先丢个链接吧…
wikipedia

Reference

前端工程师手册-gitbooks
Semantic-html-顾轶灵

文章目录
  1. 1. Defined
  2. 2. Main()
    1. 2.1. === 01-26 Update ===
    2. 2.2. Layout
    3. 2.3. with Content
      1. 2.3.1. block
      2. 2.3.2. inline
      3. 2.3.3. embed
      4. 2.3.4. tabular data
      5. 2.3.5. Microformats(may deprecated)
      6. 2.3.6. Microdata
  3. 3. Reference