什么是结构化元素

242 阅读3分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

结构化元素

什么是结构化元素

结构化元素就是指 HTML 元素中具有明确含义和作用的元素,例如 <p> 元素表示段落。

如下列表所示展示了部分 HTML 4.01 版本的结构化元素:

  • 标题元素<h1> ~ <h6>

    <h1> 元素字体最大,然后依次减小,<h6> 元素字体最小。

  • 段落元素<p>

    HTML <p> 元素表示一个段落,该元素通常呈现出当前段落的文本与其他段落的文本之间会以空白进行隔离。

  • 粗体元素<b>

    HTML <b> 元素用来定义需要提醒注意的内容。

  • 斜体元素<i>

    HTML <i> 元素用来定义表现因某些原因需要区分普通文本的一系列文本。

  • 上标元素<sup>)与下标元素<sub>

    <sup> 元素定义的文本内容与主体内容相比,显示更高更小。

    <sub> 元素定义的文本内容与主体内容相比,显示更低更小。

  • 换行符<br>

    HTML <br> 元素会在 HTML 页面中生成一个换行符。

  • 水平线元素<hr>

    HTML <hr> 元素用来表示段落元素之间的主题转换。

如下列表所示展示了部分 HTML5 版本新增的结构化元素:

  • <article> 元素

    HTML <article> 元素用来定义 HTML 页面中的可独立分配或可复用结构,例如论坛的帖子、新闻网站的文章等。

  • <section> 元素

    HTML <section> 元素用来定义 HTML 页面中的独立部分,该独立部分没有更具体的的语义元素来描述该元素。

    注意

    1. 一般通过是否包含一个标题元素(<h1>~<h6>)作为子级元素来识别每一个 <section>元素。
    2. 如果元素内容可以分为几个部分的话,应该使用 <article> 元素而不是 <section> 元素。
    3. 不要将 <section> 元素作为一个普通容器使用,这应该是 <div> 元素的用法。
  • <nav> 元素

    HTML <nav> 元素用来定义 HTML 页面中的导航链接,比较常见的是菜单,目录和索引。

  • <aside> 元素

    HTML <asida> 元素用来定义一个和 HTML 页面中其余内容几乎无关的内容,被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。通常比较常见的是侧边栏或者标注框。

  • <header> 元素

  • HTML <header> 元素用来定义 HTML 页面中的具有引导和导航作用的内容,比较常见的是 Logo、搜索框、作者名称等。

  • <main> 元素

    HTML <main> 元素用来定义 HTML 页面中的主要内容。主内容区块指与页面标题或主要功能直接相关的内容。这部分内容在HTML页面中应当是独一无二的,不包含任何任何重复的内容。

  • <footer> 元素

    HTML <footer> 元素用来定义 HTML 元素中的一个章节内容或根元素的页脚。一个页脚通常包含该章节作者、版权数据或文档相关链接等信息。

转义字符

在 HTML 中的字符 <>"'& 等是特殊字符,它们是 HTML 语法自身的一部分。如果想要在浏览器运行 HTML 页面呈现出这些特殊字符,必须通过使用转义字符(有些资料称为实体引用)来实现。

原义字符描述转义字符
``空格``
<小于号<
>大于号>
&和号&
"引号"
©版权(copyright)©
®注册商标®
商标
×乘号×
÷除号÷

语义化元素

什么是语义化元素

语义化元素与结构化元素类似,都是具有具体含义的元素,区别在于语义化元素更多定义一个单词、一行内容的语义或样式。

如下列表所示展示了部分语义化元素:

  • 加粗元素(<strong>
  • 强调元素(<em>
  • 引用元素(<blockquote><q>
  • 引文元素(<cite>
  • 定义元素(<dfn>
  • 地址元素(<address>
  • 内容修改元素(<del><ins>