Life Will Change Lyn
  1. 1 Life Will Change Lyn
  2. 2 Last Surprise Lyn
  3. 3 BREAK IN TO BREAK OUT Lyn
  4. 4 Hypocrite Nush
  5. 5 Flower Of Life 发热巫女
  6. 6 Time Bomb Veela
  7. 7 Warcry mpi
  8. 8 One Last You Jen Bird
  9. 9 かかってこいよ NakamuraEmi
  10. 10 Libertus Chen-U
2017-02-12 12:19:37

HTML5常用语义化标签分类整理

为了改掉自己遇事不决DIV的坏习惯,对语义化标签常用场景按照自己的理解做一个整理随时查询,争取养成使用习惯。


纲要和文档节段相关

<main> 呈现文档或应用的主体部分,不包括任何在文档中重复的内容。

  • 在一个文档中只能有一个main标签。
  • 不能是以下元素的继承<article><aside><footer><<header><nav>。

<article> 表示文档,页面,应用中的独立结构节段,意在成为可独立分配或可复用的结构,它可能是帖子,评论,或者交互式组件。

  • 当嵌套使用时,则表示与外层article有关的文章。
  • 作者信息可通过<address>提供,但不适用于嵌套的<article>元素。

<header> 表示节段的一组引导性的帮助,可能包含标题元素,也可能包含logo,分节头部,搜索表单等。

  • 该元素不是分节内容,所以不会引入新分节到大纲中。

<footer> 表示节段的页脚,通常包含作者,版权数据或与文档相关链接信息。

  • footer元素内的作者信息应包含在<address>中。

<section> 表示文档中的一个区域节段,比如article中的某个专题块。一般包含一个标题。

  • 如果元素内容分为几个部分应该用article。
  • 不要把该元素当做普通容器使用,一般该元素应该出现在文档大纲中。

<h1>~<h6> 标题元素有6个不同级别,用来简要描述该节主题。

  • 不要为了减小标题字体而使用低级别的标题。
  • 避免跳过某级标题,要始终从h1开始。
  • h1一般表示页面标题,其他标题例如section元素当从h2开始。

<aside> 表示一个和其余页面无关的节段,不属于大纲,被拆分也不会影响整体。 <nav> 描绘一个含有多个超链接的导航区域节段,不属于大纲。

  • 并不是所有链接都必须用nav元素,只是用来放一些热门链接。
  • 一个网页也可能含有多个该元素,例如一个是网站内导航列表,一个是页面内导航列表。

<figure> 代表一段独立的内容节段。不影响主体大纲。当它属于主体时,它的位置独立于主体,这个标签经常是在主体中引用的图片,插图,表格,代码段等。 <figcaption> 通常用于描述其父节点<figure>元素里的数据,这意味着该元素是<figure>块里第一个或最后一个。 <blockquote> 块级引用节段,代表其中文字是引用内容,不影响主体内容。

  • 若引文来源于网络,可将原出处URL设置到cite特性上。

节段组织内容

<hr> 表示段落级元素间的主题转换。虽然可视化为一条水平线,但更主要的意义在语义上而不是表现上。 <address> 让作者为它最近的<article>或者<body>祖先元素提供联系信息。当应用于<body>时,表示为整个文档提供联系信息。

  • 当表示和联系信息无关的地址时应使用p元素。
  • 这个元素不能包含其他信息,比如出版日期。
  • 通常该元素放在<footer>中。

<pre> 表示预定义格式文本,在该元素中文本通常按原文中的编排以等宽字体形式展现出来。


文字表现相关

<b> 表示相对于普通字体的区别,不表示任何强调或关联。 <em> 通常表现为斜线文本,表示需要用户着重阅读的内容,可嵌套。 <strong> 通常表现为粗体文本,表示文本十分重要。 <mark> 代表突出显示的文字,一般表示与上下文间的关联性。例如搜索结果。 <small> 使文本字体变小一号,除了样式含义,一般语义化表示边注释和附属细则。 <del> 以删除线表示的文本。 <u> 下划线表示文本。 <sub>,<sup> 分别代表上标和下标。 <i> 代表一段不同性质的文字,如技术外语,外文短语等。 <cite> 表示一个作品的引用,必须包含引用作品的简写格式标题或者URL。 <q> 表示短的行内引用文本。相对于块引用<blockquote>。 <abbr> 表示一个缩写,如果需要提供完整描述,可通过title特性添加。 <br> 在文本中产生一个换行(回车)。

  • 不要使用该元素增加行距。
  • 这是一个空元素,必须有一个开始标签,禁止使用结束标签。

<time> 表示24小时制时间或公历日期。 <code> 呈现一段计算机代码,以浏览器默认等宽字体显示。

-- EOF --

添加在分类「 前端开发 」下,并被添加 「HTML」 标签。