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

块级元素（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" alt="图片描述">

5. <abbr>：

   • 说明： 定义缩写。
   • 示例：

     <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

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

本文链接：https://www.weguiding.com/html/973.html