笔记大全

什么是html5技术

更新时间：2023-11-08

第一段：HTML5技术概述

HTML5是一种由W3C（万维网联盟）推出的新一代HTML标准。它在功能上相较于之前的版本更加强大、灵活和跨多设备兼容。HTML5支持语意化标签、多媒体元素、本地存储、WebGL、SVG等新功能和API。除此之外，HTML5还支持新的写法和属性等。由于HTML5技术的普遍使用，所有设备都可以访问完整的Web内容，而无需使用任何插件或其他扩展程序。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>HTML5文档</title>
  </head>
  <body>
    <p>这是一个使用HTML5标记的页面。</p>
  </body>
</html>

第二段：HTML5语义化标签

HTML5增加了一些语义化的标签，这些标签可以让开发者更加容易定义内容的结构。通过使用这些标签，开发者可以实现给HTML文档加上具体的含义和信息，提高网站页面的质量和可访问性。语义化的标签还可以帮助搜索引擎更好地理解页面的内容，并为其排名做出贡献。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>语义化标签示例</title>
  </head>
  <body>
    <header>
      <h1>页面标题</h1>
      <nav>
        <ul>
          <li><a href="#">首页</a></li>
          <li><a href="#">分类</a></li>
          <li><a href="#">关于我们</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <article>
        <h2>文章标题</h2>
        <p>这是一篇文章的正文。</p>
      </article>
      <aside>
        <h3>侧边栏</h3>
        <p>这是侧边栏的内容。</p>
      </aside>
    </main>
    <footer>
      <p>版权信息等内容。</p>
    </footer>
  </body>
</html>

第三段：HTML5多媒体元素

HTML5引入了许多新的多媒体元素，可以在网页上直接添加音频、视频和图像等。此外，HTML5还提供Canvas标签和WebGL技术，可以帮助开发者创造出交互性很强、更加丰富的网站和应用。这些新的元素和技术为开发者提供了很多创意和灵活性，帮助我们更好地展示不同方面的内容和信息。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>多媒体元素示例</title>
  </head>
  <body>
    <h1>影片播放示例</h1>
    <video src="example.mp4" controls></video>
    <h1>音频播放示例</h1>
    <audio src="example.mp3" controls></audio>
    <h1>Canvas绘图示例</h1>
    <canvas id="myCanvas" width="200" height="100"></canvas>
    <script>
      var c=document.getElementById("myCanvas");
      var ctx=c.getContext("2d");
      ctx.font="30px Arial";
      ctx.fillText("Hello World",10,50);
    </script>
  </body>
</html>

第四段：HTML5本地存储

HTML5还提供了一种本地存储技术，即Web Storage API。它可以用来存储网站的数据，让用户在不同浏览器、不同设备上依然可以访问到自己的数据。Web Storage提供了两种存储方式：localStorage和sessionStorage。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>本地存储示例</title>
  </head>
  <body>
    <h1>localStorage示例</h1>
    <p>请输入姓名：<input type="text" id="name"></p>
    <p><button onclick="saveName()">保存</button></p>
    <script>
      function saveName() {
        var name = document.getElementById("name").value;
        localStorage.setItem("name", name);
        alert("保存成功！");
      }
      var storedName = localStorage.getItem("name");
      if (storedName) {
        document.write("欢迎回来，" + storedName + "！");
      }
    </script>
  </body>
</html>

c语言编程笔录