易混淆的概念

在HTML中，有一些概念容易混淆。以下是一些常见的易混淆概念及其区分方法：

块级元素与内联元素
- 区分：块级元素（如<div>、<p>）在页面中会独占一行，默认情况下宽度为100%。内联元素（如<span>、<a>）不会独占一行，只占据刚好容纳其内容的宽度。
ID选择器与类选择器
- 区分：ID选择器使用#标识，一个页面中ID应该是唯一的。类选择器使用.标识，一个页面中可以有多个相同的类。
语义化标签与非语义化标签
- 区分：语义化标签（如<header>、<footer>、<article>）明确地表达了其内容的含义和用途，有助于SEO和无障碍访问。非语义化标签（如<div>、<span>）则没有明确的含义，仅用于布局或样式。
HTML属性与CSS属性
- 区分：HTML属性（如src、alt）是直接写在HTML标签中的特性，用于定义元素的行为或内容。CSS属性（如color、font-size）用于定义元素的外观样式。

要更好地理解和区分这些概念，可以通过实际项目练习，以及查阅相关文档和教程来加深理解。

常见的块状元素和内联元素

块级元素：
- <div>：最常用的块级容器。
- <p>：段落标签。
- <textarea>: 多行文本输入框。
- <h1>到<h6>：标题标签。
- <ul>、<ol>、<li>：列表相关标签。
- <table>、<tr>：表格相关标签。
内联元素：
- <span>：最常用的内联容器。
- <a>：超链接标签。
- <img>：图片标签。
- <strong>、<em>：强调文本标签。
- <button>：按钮标签。

常见的语义化标签

<header>：用于定义页面或区块的头部内容。
<footer>：用于定义页面或区块的底部内容。
<nav>：用于定义导航菜单。
<article>：用于定义独立的内容块，如博客文章、新闻等。
<section>：用于定义文档中的一个主题或一个部分。
<aside>：用于定义侧边栏内容。
<main>：用于定义文档的主要内容区域，每个页面只能有一个<main>标签。
<figure>、<figcaption>：用于定义图像及其说明文字。

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 元素示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        header, footer, nav, main, section, article, aside, figure, figcaption {
            padding: 10px;
            margin: 10px;
            border: 1px solid #ccc;
        }
        header {
            background-color: #f8f9fa;
        }
        footer {
            background-color: #f8f9fa;
            text-align: center;
        }
        nav {
            background-color: #e9ecef;
        }
        main {
            background-color: #ffffff;
        }
        section {
            background-color: #f1f3f5;
        }
        article {
            background-color: #ffffff;
        }
        aside {
            background-color: #e9ecef;
        }
        figure {
            background-color: #f8f9fa;
        }
        figcaption {
            font-size: 0.9em;
            color: #555;
        }
        audio, video {
            width: 100%;
            max-width: 600px;
        }
    </style>
</head>
<body>
    <header>
        <h1>HTML5 元素示例页面</h1>
        <nav>
            <ul>
                <li><a href="#section1">部分1</a></li>
                <li><a href="#section2">部分2</a></li>
                <li><a href="#section3">部分3</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="section1">
            <h2>部分1</h2>
            <article>
                <h3>文章1</h3>
                <p>这是一个段落，使用 <strong>粗体</strong> 和 <em>斜体</em> 标签。</p>
                <p>这是一个段落，包含一个 <a href="https://www.example.com">超链接</a>。</p>
                <p>这是一个段落，包含一个 <img src="https://via.placeholder.com/150" alt="占位图片"> 图片。</p>
            </article>
        </section>
        <section id="section2">
            <h2>部分2</h2>
            <article>
                <h3>文章2</h3>
                <p>这是一个段落，包含一个 <button>按钮</button>。</p>
                <p>这是一个段落，包含一个 <span style="color: red;">内联 span 元素</span>。</p>
                <p>这是一个段落，包含一个 <textarea rows="4" cols="50">多行文本输入框</textarea>。</p>
            </article>
        </section>
        <section id="section3">
            <h2>部分3</h2>
            <article>
                <h3>文章3</h3>
                <p>这是一个段落，包含一个 <ul>
                    <li>无序列表项1</li>
                    <li>无序列表项2</li>
                    <li>无序列表项3</li>
                </ul></p>
                <p>这是一个段落，包含一个 <ol>
                    <li>有序列表项1</li>
                    <li>有序列表项2</li>
                    <li>有序列表项3</li>
                </ol></p>
                <p>这是一个段落，包含一个 <table>
                    <tr>
                        <th>表头1</th>
                        <th>表头2</th>
                    </tr>
                    <tr>
                        <td>数据1</td>
                        <td>数据2</td>
                    </tr>
                    <tr>
                        <td>数据3</td>
                        <td>数据4</td>
                    </tr>
                </table></p>
                <p>这是一个段落，包含一个 <audio controls>
                    <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg">
                    您的浏览器不支持 audio 元素。
                </audio></p>
                <p>这是一个段落，包含一个 <video controls>
                    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
                    <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
                    您的浏览器不支持 video 元素。
                </video></p>
            </article>
        </section>
    </main>
    <aside>
        <h2>侧边栏</h2>
        <p>这是侧边栏内容。</p>
    </aside>
    <footer>
        <p>版权所有 &copy; 2023 示例页面</p>
    </footer>
</body>
</html>

css

html

js

易混淆的概念

常见的块状元素和内联元素

常见的语义化标签

易混淆的概念 ​

常见的块状元素和内联元素 ​

常见的语义化标签 ​

易混淆的概念

常见的块状元素和内联元素

常见的语义化标签