<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>块级元素示例</title>
</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>
        <section id="home">
            <h2>欢迎来到我的网站</h2>
            <p>这是一个关于块级元素的示例页面。</p>
        </section>
        
        <section id="about">
            <h2>关于我们</h2>
            <p>我们是一家专注于Web开发的公司。</p>
            
            <blockquote>
                <p>设计优秀的网站是我们的使命。</p>
            </blockquote>
        </section>
        
        <article>
            <h2>HTML块级元素</h2>
            <p>块级元素是HTML中的重要概念...</p>
            
            <figure>
                <img src="block-elements.jpg" alt="块级元素示意图">
                <figcaption>图1：块级元素在页面中的表现</figcaption>
            </figure>
        </article>
    </main>
    
    <aside>
        <h3>相关链接</h3>
        <ul>
            <li><a href="#">HTML教程</a></li>
            <li><a href="#">CSS教程</a></li>
        </ul>
    </aside>
    
    <footer>
        <p>&copy; 2023 我的网站. 保留所有权利。</p>
        <address>
            联系我们: <a href="mailto:info@example.com">info@example.com</a>
        </address>
    </footer>
</body>
</html>

列表示例

<h2>无序列表</h2>
<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橙子</li>
</ul>

<h2>有序列表</h2>
<ol>
    <li>第一步</li>
    <li>第二步</li>
    <li>第三步</li>
</ol>

<h2>描述列表</h2>
<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言，用于创建网页的标准标记语言。</dd>
    
    <dt>CSS</dt>
    <dd>层叠样式表，用于描述HTML文档样式的语言。</dd>
    
    <dt>JavaScript</dt>
    <dd>一种编程语言，使网页具有交互性。</dd>
</dl>

表格示例

<table>
    <caption>员工信息表</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>部门</th>
            <th>职位</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>技术部</td>
            <td>前端开发</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>设计部</td>
            <td>UI设计师</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>市场部</td>
            <td>市场经理</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">共3名员工</td>
        </tr>
    </tfoot>
</table>

表单示例

<form action="/submit" method="post">
    <fieldset>
        <legend>个人信息</legend>
        
        <p>
            <label for="name">姓名:</label>
            <input type="text" id="name" name="name">
        </p>
        
        <p>
            <label for="email">电子邮箱:</label>
            <input type="email" id="email" name="email">
        </p>
    </fieldset>
    
    <fieldset>
        <legend>留言</legend>
        
        <p>
            <label for="message">您的留言:</label>
            <textarea id="message" name="message" rows="5" cols="30"></textarea>
        </p>
    </fieldset>
    
    <p>
        <button type="submit">提交</button>
        <button type="reset">重置</button>
    </p>
</form>

其他块级元素示例

<details>
    <summary>点击查看更多信息</summary>
    <p>这里是更多的详细信息，点击上面的文字可以展开或折叠此内容。</p>
    <p>块级元素可以包含其他块级元素和行内元素。</p>
</details>

<hr>

<pre>
function example() {
    console.log("这是预格式化文本");
    console.log("空格和换行会被保留");
}
</pre>

块级元素与CSS

块级元素的默认CSS属性通常包括：

display: block;
width: 100%;
margin-top: 1em;
margin-bottom: 1em;

可以通过CSS修改块级元素的显示方式：

/* 将块级元素转换为行内元素 */
h1 {
    display: inline;
}

/* 将块级元素转换为行内块元素 */
div {
    display: inline-block;
    width: 200px;
    height: 100px;
}

/* 使用弹性布局 */
section {
    display: flex;
    justify-content: space-between;
}

/* 使用网格布局 */
main {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

块级元素与行内元素的区别

特性	块级元素	行内元素
显示	独占一行	在一行内显示
宽度	默认为100%	取决于内容
高度	可以设置	通常不起作用
margin	四个方向都有效	只有左右方向有效
padding	四个方向都有效	四个方向都有效，但可能影响布局
可以包含的元素	块级和行内元素	通常只能包含行内元素

块级元素的嵌套规则

虽然大多数块级元素可以包含其他块级元素，但也有一些例外和最佳实践：

<p>元素不应该包含其他块级元素
<h1>-<h6>元素通常不应该包含其他块级元素
<dt>和<dd>元素只应该出现在<dl>元素内
<li>元素只应该出现在<ul>或<ol>元素内
<tr>元素只应该出现在<table>、<thead>、<tbody>或<tfoot>元素内
<th>和<td>元素只应该出现在<tr>元素内

块级元素的可访问性考虑

正确使用块级元素对于网页的可访问性非常重要：

使用语义化的块级元素（如<header>, <nav>, <main>, <article>等）可以帮助屏幕阅读器理解页面结构
正确使用标题层级（<h1>-<h6>）可以创建清晰的文档大纲
使用<figure>和<figcaption>为图像提供描述
使用<table>的相关元素（<caption>, <thead>, <tbody>等）创建可访问的表格

最佳实践

使用语义化元素：优先使用有语义的块级元素（如<article>, <section>, <nav>等），而不是通用的<div>
保持结构清晰：创建清晰的文档结构，使用适当的嵌套
避免过度嵌套：过多的嵌套会使HTML结构复杂化，影响可读性和维护性
正确使用标题层级：遵循正确的标题层级，不要跳过级别
验证HTML：使用W3C验证器检查HTML的有效性

总结

块级元素是HTML中的基础构建块，它们帮助我们创建结构化的文档。通过正确使用块级元素，我们可以创建语义化、可访问且易于维护的网页。随着CSS的发展，块级元素的显示方式变得更加灵活，但理解它们的基本特性和正确使用方法仍然是Web开发的重要基础。

在实际开发中，建议结合HTML5的内容分类模型和CSS的布局技术，充分发挥块级元素的优势，创建现代化的Web页面。