HTML 组合内容

文本内容

[1] 段落 p：表示文本的一段内容。通常表现为一整块与相邻文本分离的文本，或以垂直空白隔离或首行缩进。

HTML 文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。

[2] pre 标签    预定义格式文本，内容编排会保留原有的换行符、空格。

应用场景：已排版内容，如代码块、字符画

[3] blackquote 标签    大段引用，代表其中的文字是引用内容

通常在渲染时，这部分的内容会有一定的缩进。若引文来源于网络，则可以将原内容的出处 URL 地址设置到 cite 特性上，若要以文本的形式告知读者引文的出处时，可以通过 <cite> 元素。

[ 属性 ]  cite=”引用文字的出处”

[4] hr 标签 水平线 / 段落级元素间的主题转换（如，故事中的场景改变或章节的主题改变）

之前，hr 一直表示水平线；现在它仍表现为水平线，但目前被定义为语义上的（分隔内容），而非表现层面上。

列表元素

列表是信息资源的一种展现形式。它可以使信息结构化和条理化，并以列表的样式显示出来。从某种意义上讲，不是描述性文本的任何内容都可以认为是列表。人口普查、太阳系、餐馆菜单等都可以表示为一个列表或列表的列表。

列表分为：无序列表、有序列表和自定义列表

  • 无序列表中的每一项都是平级的，没有级别之分，且列表项中的内容一般都是相对简单的标题性内容；
  • 有序列表会依据列表项的顺序进行显示，常用于显示带有顺序编号的特定场合；
  • 自定义列表一般适用于带有标题和标题解释性内容的场合。

[1] 无序列表（unorder list），即无数值排序项的集合，且它们在列表中的顺序是没有意义的。

[ 特点 ]  ul 作为无序列表的声明，li 作为每一个列表项的开始

  • 没有顺序，每个 li 独占一行（块级元素）；
  • 默认 li 标签项前有一个实心小圆点，可通过 CSS 设置；
  • 常见无序列表：导航、侧边栏新闻、用户列表等；
  • 遵循 W3C 标准，ul 标签中只能嵌套 li 标签，不能嵌套其他标签；li 标签中可以嵌套任意标签。

[ type 属性 ]  值：disc（实体圆心，默认）、square（实体方心）、circle（空心圆）...

[2] 有序列表（order list），表示多个有序列表项。

通常情况下，有序列表中显示在项前面的编号，可以是任何形式的，如数字、字母或罗马数字甚至简单的点。

[ 特点 ]  有顺序，每个 li 独占一行（块级元素）； 默认 li 前面有顺序标记； 常见有序列表：排行榜、试卷等。

[ 属性 ]

  • type，值：1  A/a  Ⅰ/ⅰ
  • start，可设定起始位置，取值为数值。
  • reversed：降序（IE 和 safari 不支持）

[ maker ]  marker 表示 ol 或 ul 中 li 的列表项标志，虽然 list-style 只能应用于 display 的值为 list-item 的元素，但由于该样式可继承，所以可以将其应用在 ol 或 ul，然后通过继承，使所有的 li 都获取设置的 list-style 样式。

[3] 自定义列表（define list）：一系列 name_value，名值对的列表，如问题_回答

dl 作为自定义列表的开始，dt 作为每个 列表项的开始， dd 表示每个列表项的描述。

  • dl，是一个包含术语定义以及描述的列表，通常用于展示词汇表或者元数据（键-值对列表）
  • dt，定义元素（define list title）用于在一个定义列表中声明一个术语。
  • dd，描述元素（define list describe）用来指明一个描述列表 dl 元素中一个术语的描述。

[ 特点 ]   dt 仅能作为 dl 的子元素出现，通常在该元素后面会跟着 dd 元素，一个 dt 可对应多个 dd

  • 没有顺序，每个 dt、dd 标签独占一行（块级元素）；
  • 默认样式：没有标记，dd 标签会有一定的缩进；
  • 一般用于（一个标题下有一个或多个列表项）* n 的情况。