网页设计基础第八讲容器、块级与行级标签大汇总及实践应用本文深入探讨HTML中容器标签、块级标签及行级标签的使用技巧

本文深入探讨HTML中容器标签、块级标签及行级标签的使用技巧，通过实际案例演示如何高效地组织和美化网页内容。从基础的div、p到语义化的article、nav，再到行内标签如a、span，我们将逐一解析其特性和应用场景，帮助读者构建结构清晰、视觉吸引的网页布局。

知识回顾

容器标签（Container Elements）

容器标签是用于包含其他元素的标签，可以是块级或行内的。它们的主要作用是组织和分组其他标签。常见的容器标签包括：

1. 结构相关的容器标签

<div> ：通用的块级容器，用于分组和组织其他元素，没有特定的语义。
<section> ：表示文档中的一个独立区域，通常包含与主题相关的一组内容。
<article> ：表示独立的内容块，通常是可以单独发布的内容，如博客文章、新闻报道等。
<header> ：定义页面或部分的头部内容，通常包含标题、导航菜单等元素。
<footer> ：定义页面或部分的底部内容，通常包含版权信息、联系信息和相关链接。
<nav> ：定义页面中的导航部分，包含导航链接，帮助用户在不同页面之间进行跳转。
<aside> ：表示与主内容无关的附加信息，通常用于侧边栏、补充信息或广告等。
<main> ：表示文档的主要内容区域，在同一文档中只出现一次，包含主要的主题内容。

2. 文本和列表相关的容器标签

<p> ：定义段落。
<ul> ：定义无序列表的容器。
<ol> ：定义有序列表的容器。
<li> ：列表项，通常嵌套在<ul>或<ol>内。
<dl> ：定义描述列表，通常包含描述项和描述文本（<dt>和<dd>）。

3. 表格相关的容器标签

<table> ：定义数据表格，包含行和列的结构。
<tr> ：定义表格行。
<th> ：定义表头单元格。
<td> ：定义表格单元格。
<caption> ：定义表格的标题。

4. 表单相关的容器标签

<form> ：创建用户输入的表单，包含各种输入元素。
<fieldset> ：用于对表单中的一组输入元素进行分组。
<legend> ：为<fieldset>定义标题。
<label> ：为表单元素定义标签。

5. 其他相关的容器标签

<figure> ：封装图像及其说明（<figcaption>）。
<details> ：用于表示可展开和折叠的内容区域。
<summary> ：为<details>定义可见标题。

块级标签（Block-level Elements）

块级标签在HTML文档中占据整个行，并在前后自动换行。它们通常用于创建页眉、段落、列表等结构。常见的块级标签包括：

<div>
- 通用的块级容器，用于创建网页的结构和布局，没有特定的语义。
<p>
- 段落标签，用于表示文本段落。
<h1> 到 <h6>
- 标题标签，从<h1>（最高级）到<h6>（最低级），表示不同级别的标题。
<ul>
- 无序列表的容器，用于创建以项目符号表示的列表。
<ol>
- 有序列表的容器，用于创建以数字表示的列表。
<li>
- 列表项，通常嵌套在<ul>或<ol>标签中。
<table>
- 表格标签，用于创建数据表格，包含行和列结构。
<tr>
- 表格行标签，用于定义表格中的一行。
<th>
- 表头单元格标签，用于定义表格的表头。
<td>

-   表格单元格标签，用于定义表格中的数据单元格。

11. <header>

-   页眉标签，用于定义页面或部分的头部，通常包括标题和导航。

12. <footer>

-   页脚标签，用于定义页面或部分的底部，通常包含版权信息、联系信息等。

13. <nav>

-   导航标签，用于定义页面中的导航链接。

14. <section>

-   主题区域标签，表示文档中的一个独立区域，通常包含一组相关内容。

15. <article>

-   独立内容块标签，表示可以独立发布的内容，如博客文章、新闻报道。

16. <aside>

-   侧边栏标签，表示与主内容无关的附加信息。

17. <blockquote>

-   引用块标签，用于表示长引用的文本。

18. <form>

-   表单标签，用于创建用户输入的表单。

19. <fieldset>

-   表单中的分组标签，用于将相关表单元素分组在一起。

20. <legend>

-   `<fieldset>`的标题标签，用于提供描述。

21. <main>

-   主要内容标签，表示文档的主要内容区域，通常只出现一次。

22. <canvas>

-   用于绘制图形的标签，通常与JavaScript联合使用。

23. <details>

-   可展开和折叠的内容区标签。

24. <summary>

-   提供`<details>`中的可见标题。

行级（行内）标签（Inline Elements）

行内标签不会在前后换行，仅占据其内容所需的宽度，通常用于格式化文本。常见的行内标签包括：

<span>
- 用于标记文档中的小块文本，通常用于添加样式。
<a>
- 定义超链接，用于链接到其他页面或资源。
<strong>
- 表示文本的重要性，通常以粗体显示。
<em>
- 表示文本的强调，通常以斜体显示。
<b>
- 用于以粗体呈现文本，但不表示重要性。
<i>
- 用于以斜体呈现文本，但不表示强调。
<small>
- 用于表示较小的文本，通常用于注释或附加信息。
<sub>
- 用于表示下标文本，小于正常文本的一部分。
<sup>
- 用于表示上标文本，通常用于数学公式或引用。
<img>

-   插入图像的标签，展现图像内容。

11. <br>

-   插入换行符，用于在文本中添加换行。

12. <hr>

-   表示主题的分隔线，通常用于视觉上的分隔。

13. <code>

-   用于呈现计算机代码或其他计算机文本。

14. <blockquote>

-   用于引入另一来源的引用内容，但可以作为行内元素使用。

15. <time>

-   用于表示时间、日期或时间范围。

16. <cite>

-   用于引用书籍、文章或其他文献的标题。

17. <var>

-   用于表示变量，通常在数学公式中使用。

设计时注意事项

在设计样式时，使用块级标签和行内标签时应该注意以下几点：

块级标签的注意事项

默认行为：
- 块级标签默认占据整行，后续内容会自动换行。在设计时，需要考虑这种特性，以避免布局混乱。
边距（Margin）和填充（Padding） ：
- 块级标签的外边距通常会发生合并（margin collapsing），这可能会导致意外的间距。在设置边距时，应考虑使用padding来为块级标签增加内部空间。
宽度和高度：
- 块级元素默认宽度为其父元素的100%，如果需要自定义宽度，必须使用CSS进行设置，例如使用width属性。此外，若希望高度为内容的高度，可以使用height: auto;。
弹性布局：
- 使用CSS Flexbox或Grid布局时，块级元素可以灵活地排布和对齐，不再受到传统流式布局的限制。了解如何使用这些布局模型会使设计更为高效。
响应式设计：
- 确保块级元素在不同屏幕尺寸上显示良好，通常通过相对单位（如百分比或vw、vh）以及媒体查询来实现响应式。

行内标签的注意事项

换行特性：
- 行内标签不会自动换行，因此在使用它们时，需要注意文本流动的完整性，确保它们在上下文中合理且美观。
自定义间距：
- 行内标签的间距通常需要通过padding和margin进行自定义。margin不总是有效，因为行内元素默认不支持外边距。
背景与边框：
- 行内元素可以设置背景色和边框，但宽度和高度的设置可能不会按照预期生效，因为它们只占据其内容的空间。可以通过将行内元素转换为块级（使用display: inline-block;）来达到预期效果。
文本样式：
- 行内标签适合用于调整文本样式，如强调、链接、代码片段等。使用时要确保样式一致，保持页面视觉整洁。
相对与绝对定位：
- 行内元素跟随文档流。如果需要定位，可以使用position属性，但要确保不会影响其他文本或元素的布局。

块级元素和行级元素差异

默认情况下，行内元素不会以新的一行开始，而块级元素会新起一行。

当行内元素在一行内排不下的时候才会换行，而且其宽度随着元素的内容而变化。块级元素的则宽度自动填满其父元素宽度。

块级元素可以设置 width, height属性，注意：块级元素即使设置了宽度，仍然是独占一行的。而行内元素设置width, height无效。
块级元素可以设置margin 和 padding。行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果，但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。（也就是水平方向有效，竖直方向无效）
块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素

设置居中的方法

行内元素想要设置水平居中，只需要text-align属性即可。

div{
    text-align:center  /*div当中的行内元素均会水平居中*/ 
}

而块级元素想要设置水平居中，需要设置宽度为父容器宽度才能居中。

margin:0 auto; 
width:500px; /*块级元素父容器的宽度*/

行内元素设置垂直居中，设置外层行高为行内元素的高度即可。

height:30px; 
line-height:30px

而块级元素想要设置垂直居中，要先设置外层div的宽度，然后设置内层块级元素的样式。

margin:0 aut0;
height:30px;
line-height:30px

任务描述

个人博客案例，学会块级标签、容器标签、行级（行内）标签的应用。动画.gif

任务实施

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人博客</title>
    <style>
        /* 全局样式 */
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 0;
            line-height: 1.6;
            background-color: #f5f5f5;
            color: #333;
            overflow: hidden; /* 禁用滚动条 */
        }

        /* 页眉样式 */
        header {
            background-color: #4CAF50; /* 更加鲜明的绿色 */
            color: white;
            text-align: center;
            padding: 0.5em 0; /* 降低顶部和底部的内边距 */
        }

        header h1 {
            margin: 0;
            font-size: 2em; /* 调整字体大小 */
            letter-spacing: 1px; /* 字母间距 */
        }

        /* 导航样式 */
        nav ul {
            list-style-type: none;
            padding: 0;
            margin: 10px 0;
        }

        nav ul li {
            display: inline;
            margin: 0 20px;
            font-size: 1.2em;
        }

        nav ul li a {
            color: white;
            text-decoration: none; /* 去掉下划线 */
            transition: color 0.3s; /* 添加过渡效果 */
        }

        nav ul li a:hover {
            color: #FFD700; /* 悬停时颜色变化 */
        }

        /* 主内容样式 */
        main {
            max-width: 800px; /* 限制正文最大宽度 */
            margin: 20px auto; /* 居中对齐 */
            padding: 20px;
            background: white; /* 背景为白色 */
            border-radius: 8px; /* 圆角 */
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
            height: calc(100vh - 120px); /* 确保 main 不超过可视高度，减去 header 和 footer 的高度 */
            overflow-y: auto; /* 如果内容过多，允许纵向滚动 */
        }

        article {
            margin-bottom: 30px; /* 每篇文章之间的间距 */
        }

        img {
            max-width: 100%;
            height: auto;
            border-radius: 8px; /* 图片圆角 */
        }

        /* 列表样式 */
        ul, ol {
            padding-left: 20px; /* 列表左侧内边距 */
        }

        /* 表单样式 */
        .form-container {
            margin: 20px 0;
            padding: 20px;
            background: #e7f3fe; /* 表单背景色 */
            border: 1px solid #b8e0f8; /* 表单边框 */
            border-radius: 8px; /* 圆角 */
        }

        .form-container h2 {
            margin-top: 0; /* 表单标题去掉顶部外边距 */
        }

        label {
            display: block; /* 标签块级显示 */
            margin-bottom: 5px; /* 标签底部间距 */
            font-weight: bold;
        }

        input[type="text"], textarea {
            width: 100%; /* 输入框和文本区域宽度 */
            padding: 10px;
            margin-top: 5px;
            margin-bottom: 15px; /* 输入框之间的间距 */
            border: 1px solid #ccc; /* 边框 */
            border-radius: 4px; /* 圆角 */
            font-size: 1em; /* 字体大小 */
        }

        input[type="submit"] {
            background-color: #4CAF50; /* 按钮背景色 */
            color: white; /* 按钮字体颜色 */
            padding: 10px 15px; /* 内边距 */
            border: none; /* 无边框 */
            border-radius: 4px; /* 圆角 */
            cursor: pointer; /* 鼠标悬停形状 */
            font-size: 1em; /* 字体大小 */
            transition: background-color 0.3s; /* 添加过渡效果 */
        }

        input[type="submit"]:hover {
            background-color: #45a049; /* 按钮悬停效果 */
        }

        /* 页脚样式 */
        footer {
            background-color: #2E8B57;
            color: white;
            text-align: center;
            padding: 1em 0;
            position: relative;
            bottom: 0;
            left: 0;
            right: 0;
        }
    </style>
</head>
<body>

<header>
    <h1>我的个人博客</h1>
    <nav>
        <ul>
            <li><a href="#home">首页</a></li>
            <li><a href="#about">关于我</a></li>
            <li><a href="#contact">联系我</a></li>
        </ul>
    </nav>
</header>

<main>
    <article>
        <h2>Docker：容器化的未来</h2>
        <img src="img/10002.png" alt="Docker介绍图">
        <p>Docker是一种开放源代码的容器化平台，允许开发者将应用程序及其依赖项一起打包到一个轻量级、可移植的容器中。这些容器可以在任何支持Docker的操作系统上运行，为应用程序的分发和部署提供了极大的便利。</p>

        <h3>Docker的要点</h3>
        <ul>
            <li>轻量级：Docker容器比传统虚拟机更轻量，启动速度快。</li>
            <li>可移植性：容器可以在不同的环境中运行，确保一致性。</li>
            <li>版本控制：Docker允许对容器进行版本管理，便于回滚和更新。</li>
        </ul>

        <h3>推荐的书籍</h3>
        <ol>
            <li><cite>《Docker权威指南》</cite> - Jeffrey Scholz</li>
            <li><cite>《Docker — 从入门到实践》</cite> - 朱赟</li>
            <li><cite>《Kubernetes in Action》</cite> - Marko Luksa</li>
        </ol>
    </article>

    <article>
        <h2>Docker的基本概念</h2>
        <img src="img/10003.png" alt="Docker基本概念图">
        <p>理解Docker的基本概念对于开始使用Docker至关重要。这包括镜像、容器、Dockerfile和Docker Hub等。</p>
        <h3>重要概念</h3>
        <ul>
            <li><strong>镜像（Image）：</strong> 镜像是Docker容器的模板，包含了应用程序及其所有依赖项。</li>
            <li><strong>容器（Container）：</strong> 容器是镜像运行时的实例，提供了在不同环境中运行应用程序的能力。</li>
            <li><strong>Dockerfile：</strong> Dockerfile是一个文本文件，其中包含构建Docker镜像的指令。</li>
            <li><strong>Docker Hub：</strong> Docker Hub是一个公共的镜像库，用户可以在其中分享和获取Docker镜像。</li>
        </ul>
    </article>

    <div class="form-container">
        <h2>留言表单</h2>
        <form action="/submit-comment" method="post">
            <label for="name">姓名:</label>
            <input type="text" id="name" name="name" required>

            <label for="message">留言:</label>
            <textarea id="message" name="message" rows="4" required></textarea>

            <input type="submit" value="提交">
        </form>
    </div>
</main>

<footer>
    <p>© 2023 我的个人博客. 保留所有权利。</p>
</footer>

</body>
</html>

实验实训

实验实训一：设计一个侧边栏增加文章分类与标签导航功能

设计要求

文章分类：
- 在博客首页上添加“分类”部分，使用<section>和<ul>展示不同的文章分类。例如：“编程”，“设计”，“生活”等。
文章标签：
- 在每篇文章的底部添加标签部分，使用<ul>展示相关标签。标签应用于过滤文章的功能。
样式设计：
- 为分类和标签部分应用CSS样式，使其与博客整体风格一致。

网页设计基础 第八讲 容器、块级与行级标签大汇总及实践应用