1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!-- 典型网页结构 -->
<header>
  <h1>网站标题</h1>
  <nav>
    <a href="#home">首页</a>
    <a href="#news">新闻</a>
  </nav>
</header>

<section>
  <article>
    <h2>文章标题</h2>
    <p>正文内容...</p>
  </article>
  <aside>
    <h3>相关链接</h3>
    <ul>...</ul>
  </aside>
</section>

<footer>
  <p>&copy; 2025 我的网站</p>
</footer>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<!-- 自适应视频 -->
<video controls width="100%">
  <source src="demo.mp4" type="video/mp4">
  <track label="中文字幕" src="subs.vtt" kind="subtitles" srclang="zh">
</video>

<!-- 背景音频 -->
<audio loop autoplay>
  <source src="bgm.mp3" type="audio/mpeg">
  您的浏览器不支持音频播放
</audio>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

<form novalidate>
  <label>电子邮箱：
    <input type="email" required placeholder="name@example.com">
  </label>

  <label>出生日期：
    <input type="date" min="2000-01-01" max="2020-12-31">
  </label>

  <label>密码强度：
    <meter min="0" max="5" value="3"></meter>
  </label>

  <label>文件上传：
    <input type="file" accept=".pdf,.docx">
  </label>
  
  <button type="submit">提交</button>
</form>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<!-- 折叠面板 -->
<details>
  <summary>查看详情</summary>
  <p>隐藏的详细内容...</p>
</details>

<!-- 对话框 -->
<dialog open>
  <p>系统通知内容</p>
  <button onclick="this.parentElement.close()">关闭</button>
</dialog>

<!-- 进度反馈 -->
<progress value="75" max="100"></progress>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<!-- 响应式图片 -->
<img src="small.jpg" 
     srcset="medium.jpg 1000w, 
             large.jpg 2000w"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="响应式图片示例">

<!-- 网页嵌入 -->
<iframe width="560" height="315" 
        src="https://www.youtube.com/embed/..." 
        frameborder="0" 
        allowfullscreen>
</iframe>