HTML5教程

介绍

HTML5是一种用于创建网页和应用程序的标准。HTML5不仅提供了新的语言元素，还支持HTML4中的语言元素。此外，HTML5还引入了一些新概念和功能，例如视频、音频、绘图和数据库等。

HTML5基础语法

HTML5文档结构

在HTML5中，文档由头、身体和脚组成。HTML文档会以<!doctype html>开始并以</html>结束。

HTML5文档结构示例：

<!doctype html>
<html>
  <head>
    <title>网页的标题</title>
  </head>
  <body>
    <h1>网页的主标题</h1>
    <p>网页的主要内容。</p>
  </body>
</html>

HTML5标签

HTML5中，有很多新的标签（例如：<canvas>、<video>、<audio> 等），同时还存在以往版本的标签（例如：<div>、<span>、<p> 等）用于容纳内容。以下是网页常用标签的一些例子：

<!doctype html>
<html>
  <head>
    <title>标题</title>
  </head>
  <body>
    <h1>最重要的一级标题</h1>
    <h2>稍微不重要一点的二级标题</h2>
    <p>这是示例内容。这是示例内容。这是示例内容。这是示例内容。这是示例内容。这是示例内容。</p>
    <ul>
      <li>列表项1</li>
      <li>列表项2</li>
      <li>列表项3</li>
    </ul>
    <table>
      <thead>
        <tr>
          <th>表头1</th>
          <th>表头2</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>行1列1</td>
          <td>行1列2</td>
        </tr>
        <tr>
          <td>行2列1</td>
          <td>行2列2</td>
        </tr>
      </tbody>
    </table>
    <form>
      <label>名称：</label> <input type="text" name="name"><br>
      <label>年龄：</label> <input type="text" name="age"><br>
      <input type="submit" value="提交">
    </form>
    <img src="image.jpg" alt="图片">
    <a href="http://www.example.com">链接文本</a>
  </body>
</html>

HTML5属性

HTML5中，元素的属性都是使用名字/值对来设置的。常见属性包括id、class和style等，但是在HTML5中还有许多新的属性（例如：data-*、contenteditable、autofocus等）来完成更多的操作。

HTML5属性的例子：

<p id="p1" class="class1 class2" style="color: red;">这是示例文本。</p>

<button onclick="alert('点击了按钮！')">点击喊话</button>

<img src="image.jpg" alt="图片备用文本" width="500" height="600">

HTML5集成

CSS

CSS是一种用来增强HTML网页的样式的标准。在HTML5中，CSS也被认为是重要的一部分。CSS可以通过内部或外部样式表来定义。下面是一个内部CSS样式的例子：

<!doctype html>
<html>
  <head>
    <title>样式示例</title>
    <style>
      body {
        background-color: #f2f2f2;
      }
      h1 {
        color: orange;
      }
      p {
        font-family: Arial;
        font-size: 18px;
        color: black;
      }
    </style>
  </head>
  <body>
    <h1>标题</h1>
    <p>这是一个示例文本。这是一个示例文本。这是一个示例文本。这是一个示例文本。这是一个示例文本。</p>
  </body>
</html>

JavaScript

JavaScript是一种用于构建交互式网站和应用的编程语言。在HTML5中，JavaScript可以与HTML5标记混合使用，以展示/修改网页的内容。下面是一个简单的JavaScript示例：

<!doctype html>
<html>
  <head>
    <title>JavaScript示例</title>
    <script>
      function changeText() {
        document.getElementById("demo").innerHTML = "这是新文本！";
      }
    </script>
  </head>
  <body>
    <h1>JavaScript示例</h1>
    <p id="demo">这是一个示例文本。</p>
    <button onclick="changeText()">点击修改文本</button>
  </body>
</html>

jQuery

jQuery是一个流行的JavaScript库，它可以通过简单的代码来实现很多操作（例如操作HTML文档、处理事件、创建动画、使用AJAX等）。为了使用jQuery，需要在HTML页面中引入jQuery库文件。下面是一个使用jQuery的示例：

<!doctype html>
<html>
  <head>
    <title>jQuery示例</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
       $(document).ready(function() {$ ("button").click(function() {
          $("p").toggle();
        });
      });
    </script>
  </head>
  <body>
    <h1>jQuery示例</h1>
    <button>点击切换</button>
    <p>这是一个示例文本。</p>
  </body>
</html>

HTML5高级功能

视频和音频

HTML5使得可以无需使用第三方插件，将视频和音频嵌入到网页中。HTML5中，可以使用<video> 和 <audio>标记来添加音频和视频。以下是一个简单的向网页中添加视频的示例：

<!doctype html>
<html>
  <head>
    <title>视频示例</title>
  </head>
  <body>
    <h1>视频示例</h1>
    <video width="320" height="240" controls>
      <source src="movie.mp4" type="video/mp4">
    </video>
  </body>
</html>

画布

HTML5中，可以使用<canvas>标签来绘制图形和动画。<canvas>标记向网页中添加一个绘画区域，JavaScript 代码可以使用画布对象来绘制图形和处理事件等。以下是一个简单的使用<canvas>标记绘制图片的示例：

<!doctype html>
<html>
  <head>
    <title>画布示例</title>
    <style>
      #myCanvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <h1>画布示例</h1>
    <canvas id="myCanvas" width="200" height="100"></canvas>
    <script>
      var c = document.getElementById("myCanvas");
      var ctx = c.getContext("2d");
      var img = new Image();
      img.src = "image.jpg";
      img.onload = function() {
        ctx.drawImage(img, 0, 0);
      };
    </script>
  </body>
</html>

Web存储

HTML5中，可以使用Web存储技术来在用户浏览器本地保存和读取数据。Web存储技术包括localStorage和sessionStorage。以下是一个简单的使用localStorage存储用户信息的示例：

<!doctype html>
<html>
  <head>
    <title>Web存储示例</title>
  </head>
  <body>
    <h1>Web存储示例</h1>
    <form>
      <label>名称：</label><input type="text" id="name"><br>
      <label>年龄：</label><input type="text" id="age"><br>
      <input type="button" value="保存" onclick="saveData()">
    </form>
    <script>
      function saveData() {
        var name = document.getElementById("name").value;
        var age = document.getElementById("age").value;
        localStorage.setItem("name", name);
        localStorage.setItem("age", age);
        alert("数据已保存！");
      }
      var name = localStorage.getItem("name");
      var age = localStorage.getItem("age");
      if (name && age) {
        document.write("已保存的用户信息：");
        document.write(name + "，" + age);
      }
    </script>
  </body>
</html>

地理定位

HTML5 支持用JavaScript获取和修改用户的地理位置信息，这对于很多的应用如手机应用或在线地图服务将非常有用。以下是一个简单的使用地理定位的示例：

<!doctype html>
<html>
  <head>
    <title>地理定位示例</title>
    <script>
      function getLocation() {
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(showPosition);
        } else {
          alert("此浏览器不支持定位！");
        }
      }
      function showPosition(position) {
        var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;
        alert("您的位置是：" + latitude + "，" + longitude);
      }
    </script>
  </head>
  <body>
    <h1>地理定位示例</h1>
    <button onclick="getLocation()">获取位置信息</button>
  </body>
</html>