HTML5简介

HTML5，作为网页开发的最新标准，自2014年正式发布以来，已经成为了现代网页开发的主流。它不仅提供了更多丰富的标签和功能，还优化了性能，增强了安全性，使得网页开发更加高效和便捷。

HTML5基础标签

1. 文档类型声明

<!DOCTYPE html>
<html>
<head>
    <title>HTML5网页开发</title>
</head>
<body>
    <!-- 网页内容 -->
</body>
</html>

2. 标题标签

<title>标题</title>
<h1>一级标题</h1>
<h2>二级标题</h2>
<!-- ... -->
<h6>六级标题</h6>

3. 段落标签

<p>这是一个段落。</p>

4. 列表标签

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <!-- ... -->
</ul>

<ol>
    <li>有序列表项1</li>
    <li>有序列表项2</li>
    <!-- ... -->
</ol>

5. 表格标签

<table>
    <tr>
        <th>表头1</th>
        <th>表头2</th>
        <!-- ... -->
    </tr>
    <tr>
        <td>数据1</td>
        <td>数据2</td>
        <!-- ... -->
    </tr>
    <!-- ... -->
</table>

HTML5新增标签

1. 块级元素

<header>页眉</header>
<nav>导航栏</nav>
article>文章</article>
section>区域</section>
aside>侧边栏</aside>
footer>页脚</footer>

2. 内联元素

<mark>突出显示</mark>
<time>时间</time>
<progress>进度条</progress>
<meter>度量</meter>
<details>细节</details>
<summary>摘要</summary>

CSS样式

CSS（层叠样式表）用于控制网页的布局和外观。以下是一些常用的CSS样式：

1. 设置字体

body {
    font-family: Arial, sans-serif;
}

2. 设置背景颜色

body {
    background-color: #f0f0f0;
}

3. 设置文本颜色

body {
    color: #333;
}

4. 设置边框

div {
    border: 1px solid #ccc;
    padding: 10px;
}

JavaScript脚本

JavaScript是一种用于网页开发的脚本语言。以下是一些常用的JavaScript代码：

1. 输出文本

document.write("这是一个文本");

2. 弹出对话框

alert("这是一个对话框");

3. 获取用户输入

var name = prompt("请输入您的名字");

实战案例解析

1. 制作一个简单的网页

<!DOCTYPE html>
<html>
<head>
    <title>我的第一个网页</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            color: #333;
        }
        div {
            border: 1px solid #ccc;
            padding: 10px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <header>
        <h1>我的第一个网页</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于</a></li>
            <li><a href="#">联系</a></li>
        </ul>
    </nav>
    <article>
        <h2>欢迎来到我的网页</h2>
        <p>这是一个简单的网页，用于展示HTML5的基本用法。</p>
    </article>
    <footer>
        <p>版权所有 &copy; 2022</p>
    </footer>
</body>
</html>

2. 使用JavaScript实现一个计算器

<!DOCTYPE html>
<html>
<head>
    <title>计算器</title>
    <script>
        function calculate() {
            var num1 = parseFloat(document.getElementById("num1").value);
            var num2 = parseFloat(document.getElementById("num2").value);
            var result = num1 + num2;
            document.getElementById("result").value = result;
        }
    </script>
</head>
<body>
    <h1>计算器</h1>
    <input type="text" id="num1" placeholder="请输入第一个数" />
    <input type="text" id="num2" placeholder="请输入第二个数" />
    <button onclick="calculate()">计算</button>
    <input type="text" id="result" placeholder="结果" readonly />
</body>
</html>

通过以上实战案例，我们可以了解到HTML5网页开发的基本方法和技巧。在实际开发过程中，还需要不断学习和实践，才能成为一名优秀的网页开发者。