君语贤
时光静好,与君语;细水流年,与君同;繁华落尽,与君老...

首页>前端设计>html>正文

块元素与行内元素说明及示例

2023-12-13 18:57 标签:块元素行内元素

块级元素(Block-level elements):

块级元素通常用于构建页面的整体结构,如段落、标题、列表、表格等。它们独占一行,从新行开始显示,宽度默认为父元素的100%。

  1. <div>

    • 说明: 通用的块级容器,用于组合其他元素。
    • 示例:
      <div>
        <!-- 内容 -->
      </div>
  2. <p>

    • 说明: 定义段落。
    • 示例:
      <p>这是一个段落。</p>
  3. <h1><h6>

    • 说明: 定义标题,级别从1到6逐渐减小。
    • 示例:
      <h1>这是一级标题</h1>
      <h2>这是二级标题</h2>
  4. <ul><ol>

    • 说明: 分别定义无序列表和有序列表。

    • 示例:

      <ul>
        <li>项目1</li>
        <li>项目2</li>
      </ul>
      
      <ol>
        <li>第一项</li>
        <li>第二项</li>
      </ol>
  5. <li>

    • 说明: 定义列表项。
    • 示例:
      <ul>
        <li>项目1</li>
        <li>项目2</li>
      </ul>
  6. <table>

    • 说明: 定义表格。
    • 示例:
      <table>
        <tr>
          <th>表头1</th>
          <th>表头2</th>
        </tr>
        <tr>
          <td>数据1</td>
          <td>数据2</td>
        </tr>
      </table>
  7. <form>

    • 说明: 定义表单。
    • 示例:
      <form action="/submit" method="post">
        <!-- 表单元素 -->
      </form>

行内元素(Inline elements):

行内元素通常用于包裹文本或其他行内元素,它们不会独占一行,宽度仅包含内容所需的宽度,不会产生明显的换行。

  1. <span>

    • 说明: 通用的行内容器,用于包裹一小段文本或其他行内元素。
    • 示例:
      <span>这是一小段文本</span>
  2. <a>

    • 说明: 定义超链接。
    • 示例:
      <a href="https://www.example.com">访问示例网站</a>
  3. <strong><em>

    • 说明: <strong>表示强调文本,<em>表示斜体文本。
    • 示例:
      <p><strong>重要信息</strong></p>
      <p><em>斜体文本</em></p>
  4. <img>

    • 说明: 插入图片。
    • 示例:
      <img src="image.jpg?x-oss-process=image/resize,w_700,limit_1/format,webp" alt="图片描述">
  5. <abbr>

    • 说明: 定义缩写。
    • 示例:
      <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

这些是一些常见的块级元素和行内元素,它们用于构建文档结构、定义内容和实现布局。在实际开发中,根据具体需求和语义要求选择合适的元素是很重要的。

图文推荐
    热门标签
    float换行脱离文档流文档流浮动标签嵌套inline-blockblockinline类型转换元素行内元素样式重置html5xmlxhtml开发工具HTML开发图标调用ico图标