Web时代变迁及html5与html4的区别

Web时代变迁及html5与html4的区别：

Web从诞生至今，经历了不少的变迁。目前我们广泛使用的Web大多数是基于HTML，而HTML也从刚开始的HTML4逐渐演变至HTML5。HTML5相较于HTML4，新增了一些特性和改进了一些性能，下面我们详细讲解HTML5与HTML4的区别。

一、HTML5与HTML4的语言类型

HTML5：<!DOCTYPE html>
HTML4：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

二、HTML5新增的标签

section 标签

HTML5中新增了section标签，使得页面结构更加清晰。section标签可以用于定义文档的章节或区域。

示例：

<!DOCTYPE html>
<html>
   <head>
      <title>section标签示例</title>
   </head>
   <body>
      <section>
         <h1>章节一</h1>
         <p>这是第一章节的内容。</p>
      </section>
      <section>
         <h1>章节二</h1>
         <p>这是第二章节的内容。</p>
      </section>
   </body>
</html>

header 和 footer 标签

HTML5中新增了header和footer标签，用于定义页面顶部和底部的内容区域。

示例：

<!DOCTYPE html>
<html>
   <head>
      <title>header和footer标签示例</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>
      <section>
         <h1>章节一</h1>
         <p>这是第一章节的内容。</p>
      </section>
      <section>
         <h1>章节二</h1>
         <p>这是第二章节的内容。</p>
      </section>
      <footer>
         版权所有 © 2022
      </footer>
   </body>
</html>

三、HTML5新增的特性

本地存储

HTML5新增了localStorage和sessionStorage两种本地存储方式。这两种方式能够在客户端本地存储数据，避免了每次向服务器请求数据的过程，从而提升了用户体验。

示例：

<!DOCTYPE html>
<html>
   <head>
      <script>
         function saveData() {
            var name = document.getElementById("name").value;
            localStorage.setItem("userName", name);
         }
         function getData() {
            var name = localStorage.getItem("userName");
            document.getElementById("result").innerHTML = name;
         }
      </script>
   </head>
   <body>
      <input type="text" id="name" placeholder="请输入姓名" />
      <button onclick="saveData()">保存</button>
      <br />
      <button onclick="getData()">取出</button>
      <br />
      <span id="result"></span>
   </body>
</html>

canvas

HTML5新增了canvas标签，可以通过JavaScript实现动态绘制图形。

示例：

<!DOCTYPE html>
<html>
   <head>
      <script>
         function draw() {
            var canvas = document.getElementById("myCanvas");
            var context = canvas.getContext("2d");
            context.fillStyle = "red";
            context.fillRect(20, 20, 100, 100);
            context.fillStyle = "blue";
            context.fillRect(150, 20, 100, 100);
         }
      </script>
   </head>
   <body>
      <canvas id="myCanvas" width="300" height="150"></canvas>
      <br />
      <button onclick="draw()">绘制矩形</button>
   </body>
</html>

通过以上示例，可以看出HTML5相较于HTML4，新增了许多标签和特性，能够更好的满足现在Web页面的需要，从而提升了用户体验。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Web时代变迁及html5与html4的区别 - Python技术站

Web时代变迁及html5与html4的区别

相关文章