当前位置：首页 > 行业动态 > 正文

html5网站示例

admin
行业动态
2025-05-10
3

HTML5网站示例含语义标签、多媒体支持，结构简洁兼容多

HTML5 网站采用语义化标签构建基础框架，提升可读性与SEO优化,核心结构包括：

<!DOCTYPE html>：声明文档类型为HTML5
<html>：根元素
<head>：包含元数据（编码、视口、标题、链接等）
<body>区域

头部配置示例

<head>
  <meta charset="UTF-8">         <!-字符编码 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-响应式视口 -->HTML5 网站示例</title>
  <link rel="stylesheet" href="style.css"> <!-外部样式表 -->
  <script src="script.js" defer></script> <!-延迟加载脚本 -->
</head>

导航栏实现

<nav>
  <ul class="nav-list">
    <li><a href="#home">首页</a></li>
    <li><a href="#about">关于我们</a></li>
    <li><a href="#services">服务</a></li>
    <li><a href="#contact">联系</a></li>
  </ul>
</nav>

CSS 样式：

html5网站示例第1张

.nav-list {
  display: flex;
  list-style: none;
}
.nav-list li {
  margin-right: 20px;
}

布局

<main>
  <section id="hero">
    <h1>欢迎访问HTML5网站</h1>
    <p>本示例展示HTML5的核心特性与最佳实践</p>
  </section>
  <article>
    <h2>HTML5新特性</h2>
    <p>语义化标签、本地存储、Canvas绘图、多媒体支持等</p>
  </article>
</main>

表单功能示例

<form id="subscribe">
  <label for="email">邮箱订阅：</label>
  <input type="email" id="email" name="email" placeholder="example@domain.com" required>
  <button type="submit">提交</button>
</form>

验证特性：

type="email"：自动校验邮箱格式
required：必填项提示

多媒体标签应用

<section>
  <h3>视频演示</h3>
  <video controls width="400">
    <source src="demo.mp4" type="video/mp4">
    您的浏览器不支持HTML5视频
  </video>
  <h3>音频播放</h3>
  <audio controls>
    <source src="bgm.mp3" type="audio/mpeg">
  </audio>
</section>

响应式设计适配

/ 平板及以上 /
@media (min-width: 768px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }
}
/ 手机适配 /
@media (max-width: 767px) {
  .nav-list {
    flex-direction: column;
  }
}