1. 简单的博客页面

1.1 页面结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <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>
    <section id="home">
        <article>
            <h2>第一篇文章</h2>
            <p>这里是第一篇文章的内容...</p>
        </article>
        <article>
            <h2>第二篇文章</h2>
            <p>这里是第二篇文章的内容...</p>
        </article>
    </section>
    <footer>
        <p>版权所有 &copy; 2023 我的博客</p>
    </footer>
</body>
</html>

1.2 代码解析

  • <!DOCTYPE html>：声明文档类型为HTML5。
  • <html>：HTML文档的根元素。
  • <head>：包含文档的元数据，如字符集、标题等。
  • <body>：包含可见的页面内容。
  • <header>：页面的页眉部分，通常包含标题和导航链接。
  • <nav>：导航链接的容器。
  • <ul>：无序列表。
  • <li>：列表项。
  • <section>：定义文档中的一个区域。
  • <article>：代表页面中的一块与上下文独立的内容。
  • <footer>：页面的页脚部分，通常包含版权信息。

2. 产品展示页面

2.1 页面结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>产品展示</title>
</head>
<body>
    <header>
        <h1>产品展示</h1>
    </header>
    <main>
        <section>
            <h2>产品1</h2>
            <img src="product1.jpg" alt="产品1">
            <p>这里是产品1的描述...</p>
        </section>
        <section>
            <h2>产品2</h2>
            <img src="product2.jpg" alt="产品2">
            <p>这里是产品2的描述...</p>
        </section>
    </main>
    <footer>
        <p>版权所有 &copy; 2023 产品展示</p>
    </footer>
</body>
</html>

2.2 代码解析

  • <main>：表示页面中的主要内容区域。
  • <section>：定义文档中的一个区域，通常包含标题和内容。
  • <img>：嵌入图片，src属性指定图片路径，alt属性提供图片的替代文本。

3. 个人简历页面

3.1 页面结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>个人简历</title>
</head>
<body>
    <header>
        <h1>张三的简历</h1>
    </header>
    <section>
        <h2>个人信息</h2>
        <p>姓名：张三</p>
        <p>性别：男</p>
        <p>年龄：25岁</p>
    </section>
    <section>
        <h2>教育背景</h2>
        <ul>
            <li>2015-2019：某某大学，计算机科学与技术专业</li>
        </ul>
    </section>
    <section>
        <h2>工作经历</h2>
        <ul>
            <li>2019-至今：某某公司，软件工程师</li>
        </ul>
    </section>
    <footer>
        <p>版权所有 &copy; 2023 张三的简历</p>
    </footer>
</body>
</html>

3.2 代码解析

  • <ul>：无序列表，用于展示项目列表。
  • <li>：列表项。

4. 在线问卷调查页面

4.1 页面结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>问卷调查</title>
</head>
<body>
    <header>
        <h1>问卷调查</h1>
    </header>
    <form>
        <fieldset>
            <legend>基本信息</legend>
            <label for="name">姓名：</label>
            <input type="text" id="name" name="name">
            <label for="age">年龄：</label>
            <input type="number" id="age" name="age">
        </fieldset>
        <fieldset>
            <legend>问题1</legend>
            <label><input type="radio" name="question1" value="A"> A</label>
            <label><input type="radio" name="question1" value="B"> B</label>
            <label><input type="radio" name="question1" value="C"> C</label>
        </fieldset>
        <button type="submit">提交</button>
    </form>
</body>
</html>

4.2 代码解析

  • <form>：表单元素，用于收集用户输入。
  • <fieldset>：将表单元素分组。
  • <legend>：定义分组标题。
  • <label>：定义输入字段的标签。
  • <input>：输入字段，type属性指定输入类型。
  • <button>：按钮元素，用于提交表单。

5. 在线音乐播放器页面

5.1 页面结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>在线音乐播放器</title>
</head>
<body>
    <header>
        <h1>在线音乐播放器</h1>
    </header>
    <audio controls>
        <source src="song.mp3" type="audio/mpeg">
        您的浏览器不支持音频播放。
    </audio>
</body>
</html>

5.2 代码解析

  • <audio>：音频元素，用于播放音频文件。
  • <source>：指定音频文件的路径和类型。
  • <controls>：为音频元素添加控件，如播放、暂停、音量等。

通过以上5个实用页面代码的解析，相信你已经对HTML5页面设计有了更深入的了解。在实际应用中，你可以根据自己的需求对代码进行修改和扩展。祝你学习愉快！