正文

HTML5常用符号速查手册，快速掌握必备元素与代码示例

/0 浏览量
0706

目录

  1. 基本结构符号
  2. 文档类型声明（Doctype）
  3. 字符引用与实体
  4. 常用HTML5标签
  5. 代码示例
  6. 总结

1. 基本结构符号

HTML5文档的基本结构包括<!DOCTYPE html>声明、<html>标签、<head>标签和<body>标签。

<!DOCTYPE html>
<html>
<head>
    <title>页面标题</title>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

2. 文档类型声明（Doctype）

文档类型声明（Doctype）告诉浏览器该页面的文档类型，确保浏览器能够按照正确的HTML规范进行渲染。

<!DOCTYPE html>

对于HTML5，可以使用上述声明。

3. 字符引用与实体

字符引用和实体用于表示无法直接使用的特殊字符，例如&lt;表示小于号（<）。

<p>这是一个小于号：&lt;</p>

4. 常用HTML5标签

HTML5引入了许多新标签，下面是一些常用标签及其简要说明：

  • <header>：代表页面或区域的页眉。
  • <nav>：代表页面的导航链接部分。
  • <article>：代表页面中的一个内容块，通常由标题和段落组成。
  • <section>：代表页面中的一个章节，可以是标题和内容的组合。
  • <footer>：代表页面的页脚部分，通常包含版权信息或联系方式。

代码示例

<!DOCTYPE html>
<html>
<head>
    <title>常用HTML5标签示例</title>
</head>
<body>
    <header>
        <h1>标题</h1>
        <nav>
            <ul>
                <li><a href="#section1">部分一</a></li>
                <li><a href="#section2">部分二</a></li>
            </ul>
        </nav>
    </header>
    <article>
        <h2>部分一</h2>
        <p>这是部分一的内容。</p>
    </article>
    <section id="section1">
        <h2>部分二</h2>
        <p>这是部分二的内容。</p>
    </section>
    <footer>
        <p>版权信息 &copy; 2023</p>
    </footer>
</body>
</html>

5. 代码示例

以下是一些使用HTML5的完整代码示例，用于展示不同的元素和结构。

示例 1：表格

<table border="1">
    <tr>
        <th>标题1</th>
        <th>标题2</th>
    </tr>
    <tr>
        <td>内容1</td>
        <td>内容2</td>
    </tr>
</table>

示例 2：表单

<form action="/submit-form" method="post">
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" required>
    <br>
    <label for="password">密码：</label>
    <input type="password" id="password" name="password" required>
    <br>
    <input type="submit" value="提交">
</form>

示例 3：音频和视频

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    您的浏览器不支持音频元素。
</audio>

<video controls>
    <source src="video.mp4" type="video/mp4">
    您的浏览器不支持视频元素。
</video>

6. 总结

HTML5是现代网页设计的基础，它引入了许多新的功能和改进。通过使用本手册中介绍的符号和代码示例，您可以快速掌握HTML5的必备元素，为构建高效的网页打下坚实的基础。不断学习和实践，您将能够创作出更多具有吸引力和交互性的网页。

-- 展开阅读全文 --