常用的块属性标签及其特征

Epicurus
122 阅读3分钟

常用的块属性标签及其特征

在 HTML 中，块属性标签（Block-level Elements） 是一类默认占据整行空间的元素，它们通常用于构建页面的结构和布局。以下是常见的块属性标签及其特征：

常见的块属性标签

标签描述
<div>通用的块级容器，用于分组内容或布局。
<p>段落标签，用于表示文本段落。
<h1> 到 <h6>标题标签，<h1> 是最高级标题，<h6> 是最低级标题。
<ul>无序列表，包含<li> 列表项。
<ol>有序列表，包含<li> 列表项。
<li>列表项，用于<ul> 或 <ol> 中。
<table>表格标签，包含<tr>（行）、<td>（单元格）等。
<form>表单标签，用于收集用户输入。
<header>页眉标签，通常包含导航或标题。
<footer>页脚标签，通常包含版权信息或联系方式。
<section>分区标签，用于表示文档中的一个独立部分。
<article>文章标签，用于表示独立的内容块（如博客文章）。
<aside>侧边栏标签，用于表示与主要内容相关但不直接相关的内容。
<nav>导航标签，用于包含导航链接。
<main>主体内容标签，用于表示页面的主要内容。
<figure>图表标签，通常包含图片、图表或代码示例。
<figcaption>图表标题标签，用于描述<figure> 中的内容。
<blockquote>块引用标签，用于表示长引用。
<pre>预格式化文本标签，保留文本中的空格和换行。
<hr>水平分割线标签，用于分隔内容。

块属性标签的特征

  1. 独占一行：

    • 块级元素默认占据其父容器的整个宽度，并在前后自动换行。

    • 示例：

      <div>这是一个块级元素</div>
<p>这是另一个块级元素</p>

      这两个元素会分别占据一行。

  2. 可以设置宽度和高度：

    • 块级元素可以通过 CSS 设置宽度（width）和高度（height）。
    • 示例： 
      div {
    width: 200px;
    height: 100px;
}

  3. 支持内外边距：

    • 块级元素可以设置外边距（margin）和内边距（padding）。
    • 示例： 
      p {
    margin: 10px;
    padding: 5px;
}

  4. 默认流式布局：

    • 块级元素按照从上到下的顺序排列，形成流式布局。

  5. 可以包含其他块级元素和内联元素：

    • 块级元素可以嵌套其他块级元素或内联元素。
    • 示例： 
      <div>
    <p>这是一个段落。</p>
    <span>这是一个内联元素。</span>
</div>

  6. 默认样式：

    • 某些块级元素有默认样式，例如：
      • <h1> 到 <h6> 有默认的字体大小和加粗效果。
      • <p> 有默认的外边距。
      • <ul> 和 <ol> 有默认的列表符号。

块级元素 vs 内联元素

特性块级元素内联元素
宽度默认占据整行默认由内容决定
高度可设置由内容决定
内外边距支持仅支持水平方向的内外边距
嵌套规则可包含块级元素和内联元素只能包含内联元素
示例<div>、<p>、<h1><span>、<a>、<strong>

总结

块属性标签是 HTML 中用于构建页面结构的重要元素，它们默认独占一行，支持设置宽度、高度和内外边距。常见的块属性标签包括 <div>、<p>、<h1> 到 <h6>、<ul>、<ol> 等。根据具体需求选择合适的标签，可以更好地组织页面内容！

更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github

avatar
文章
阅读
粉丝