html5+css实例

HTML5 和 CSS 是构建网页的基础技术。HTML5 提供了更多的语义化标签，使得网页结构更加清晰，同时也引入了一些新的 API，如 Canvas、Web Storage 等，增强了网页的功能性。CSS 则用于网页的样式设计，通过层叠样式表来控制网页的外观。

基础概念

HTML5: 是 HTML 的第五个版本，增加了许多新的元素和属性，如 <header>, <footer>, <article>, <section> 等，以及新的 API。
CSS: 层叠样式表，用于描述 HTML 或 XML（包括 SVG 和 XHTML）文档的样式。

优势

语义化: HTML5 提供了更多的语义化标签，有助于搜索引擎优化和可访问性。
多媒体支持: 内置对音频和视频的支持，无需插件即可播放多媒体内容。
离线存储: 通过 Web Storage API，可以实现数据的本地存储，提高网页的响应速度和用户体验。
设备兼容性: HTML5 和 CSS 的设计考虑到了跨平台的兼容性，可以在多种设备上良好运行。

类型

结构化标签: 如 <header>, <nav>, <main>, <article>, <section>, <aside>, <footer> 等。
表单控件: 如 <input type="email">, <button>, <select> 等。
多媒体元素: 如 <audio>, <video>。
图形和动画: 如 <canvas>, CSS3 动画。

应用场景

网页设计: 构建各种类型的网站，如企业官网、博客、电子商务平台等。
移动应用: 利用 HTML5 和 CSS 构建响应式网页，适配各种移动设备。
游戏开发: 使用 <canvas> 或 WebGL 进行游戏开发。
数据可视化: 利用 HTML5 和 CSS 结合 JavaScript 进行数据可视化。

示例代码

以下是一个简单的 HTML5 和 CSS 实例，展示了一个基本的网页布局：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 + CSS 示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }
        .container {
            width: 80%;
            margin: 0 auto;
            overflow: hidden;
        }
        header {
            background: #333;
            color: #fff;
            padding-top: 30px;
            min-height: 70px;
            border-bottom: #6ab47b 3px solid;
        }
        header a {
            color: #fff;
            text-decoration: none;
            text-transform: uppercase;
            font-size: 16px;
        }
        header ul {
            padding: 0;
            list-style: none;
        }
        header ul li {
            display: inline;
            padding: 0 20px 0 20px;
        }
        header #branding {
            float: left;
        }
        header #branding h1 {
            margin: 0;
        }
        header nav {
            float: right;
            margin-top: 10px;
        }
        header .highlight, header .current a {
            color: #e8491d;
            font-weight: bold;
        }
        header a:hover {
            color: #ffffff;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <header>
        <div class="container">
            <div id="branding">
                <h1>我的网站</h1>
            </div>
            <nav>
                <ul>
                    <li class="current"><a href="#">首页</a></li>
                    <li><a href="#">关于我们</a></li>
                    <li><a href="#">服务</a></li>
                    <li><a href="#">联系我们</a></li>
                </ul>
            </nav>
        </div>
    </header>
</body>
</html>