前端开发学习笔记(三) : HTML5的一些[新]标准

语义化标签

HTML5 引入了一些新的语义化标签，这些标签有助于更清晰地描述页面结构和内容。它们提供了更具有可读性和可维护性的 HTML 代码，同时也使搜索引擎和辅助技术更好地理解网页。

• <header>：表示页面或节的顶部，通常包含网站的标题、导航栏或其他引导性内容。
• <nav>：表示导航区域，通常包含网站的主要导航链接。
• <section>：表示文档中的一个独立节或主题，通常包含一组相关的内容。
• <article>：表示独立的、完整的、可以独立分配或重用的内容，如博客文章、新闻报道等。
• <footer>：表示页面或节的底部，通常包含版权信息、联系方式或其他辅助性内容。

<header>
  <h1>My Website</h1>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </nav>
</header>

<section>
  <h2>About Us</h2>
  <p>Welcome to our website! We are a team of passionate individuals...</p>
</section>

<article>
  <h3>10 Tips for a Healthy Lifestyle</h3>
  <p>Here are some valuable tips to maintain a healthy lifestyle...</p>
</article>

<footer>
  <p>&copy; 2022 My Website. All rights reserved.</p>
</footer>

语义化标签的选择器

语义化标签可以使用 JavaScript 和 CSS 来选择和操作，就像其他 HTML 元素一样。可以使用各种选择器和操作方法来选择和修改语义化标签。

在 JavaScript 中，可以使用querySelector和querySelectorAll方法来选择语义化标签。这些方法通过传递选择器作为参数，返回匹配的元素。

// 选择单个语义化标签
const header = document.querySelector("header");

// 选择多个语义化标签
const sections = document.querySelectorAll("section");

// 对选择的语义化标签进行操作
header.classList.add("highlight");
sections.forEach((section) => {
  section.style.backgroundColor = "lightgray";
});

在 CSS 中，可以使用选择器来选择和样式化语义化标签。可以使用标签选择器、类选择器、ID 选择器等来选择语义化标签，并应用所需的样式。

/* 选择特定的语义化标签 */
header {
  background-color: blue;
}

section {
  padding: 10px;
}

/* 选择具有特定类名的语义化标签 */
section.highlight {
  background-color: yellow;
}

/* 选择具有特定ID的语义化标签 */
#footer {
  color: red;
}

Web 存储

HTML5 引入了 Web 存储 API，包括本地存储（localStorage）和会话存储（sessionStorage）。这些 API 允许在客户端存储数据，以便离线使用或持久保存用户的数据。

// 存储数据到本地存储
localStorage.setItem("username", "John");
localStorage.setItem("age", "25");

// 获取本地存储中的数据
const username = localStorage.getItem("username");
const age = localStorage.getItem("age");

console.log(username); // 输出 "John"
console.log(age); // 输出 "25"

// 删除本地存储中的数据
localStorage.removeItem("age");

// 清空本地存储
localStorage.clear();

// 存储数据到会话存储
sessionStorage.setItem("theme", "dark");
sessionStorage.setItem("language", "en");

// 获取会话存储中的数据
const theme = sessionStorage.getItem("theme");
const language = sessionStorage.getItem("language");

console.log(theme); // 输出 "dark"
console.log(language); // 输出 "en"

// 删除会话存储中的数据
sessionStorage.removeItem("language");

// 清空会话存储
sessionStorage.clear();

Web 存储和身份验证

基于 JWT（JSON Web Token）的登录认证是一种常见的身份验证机制。JWT 是一种开放标准（RFC 7519），用于在网络应用间安全传递声明。它由三部分组成：头部（header）、载荷（payload）和签名（signature）。

// 存储JWT到本地存储
function saveJWT(jwt) {
  localStorage.setItem("jwt", jwt);
}

// 验证JWT
function verifyJWT() {
  const jwt = localStorage.getItem("jwt");
  if (jwt) {
    // 执行JWT验证的操作
    return true;
  } else {
    return false;
  }
}

// 登录操作
function login() {
  const username = document.getElementById("username").value;
  const password = document.getElementById("password").value;

  // 发送用户名和密码到服务器进行验证
  // 如果验证成功，则获取并保存JWT到本地存储
  const jwt = "example_jwt";
  saveJWT(jwt);
  alert("登录成功！");
  // 执行登录成功后的操作
}

// 注销操作
function logout() {
  localStorage.removeItem("jwt");
  alert("已注销！");
}

在上述代码中，saveJWT() 函数用于将 JWT 保存到本地存储中，verifyJWT() 函数用于验证 JWT 的有效性。

在实际应用中，服务器端通常会生成 JWT 并将其返回给客户端，在每次请求中，客户端将 JWT 作为头部或请求参数发送给服务器进行验证。服务器会解码 JWT 并验证其有效性，从而授权或拒绝请求。这种基于 JWT 的登录认证机制具有简单、可扩展和无状态的特点，可以在分布式系统中广泛使用。

多媒体支持

HTML5 提供了内置的多媒体支持，其中包括<audio>和<video>标签，使得在网页中嵌入音频和视频变得更加简单。这些标签提供了丰富的属性和方法，以控制和定制嵌入的音频和视频。

<audio src="music.mp3" controls>
  Your browser does not support the audio element.
</audio>

<video src="video.mp4" controls>
  Your browser does not support the video element.
</video>

在上述示例中，<audio>和<video>标签用于嵌入音频和视频文件。通过src属性指定媒体文件的路径，controls属性添加了默认的播放控制器。如果浏览器不支持这些标签或指定的媒体格式，则显示后备内容。

表单增强

HTML5 引入了一些表单增强功能，使得表单的开发和验证更加方便和灵活。下面是一些 HTML5 表单增强的功能和示例：

• 新的输入类型：HTML5 引入了许多新的输入类型，用于指定不同类型的用户输入。例如，<input type="email">用于接收电子邮件地址，<input type="date">用于选择日期，<input type="range">用于选择范围等。

<label for="email">Email:</label>
<input type="email" id="email" name="email" />

<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob" />

<label for="age">Age:</label>
<input type="number" id="age" name="age" min="18" max="99" />

<label for="rating">Rating:</label>
<input type="range" id="rating" name="rating" min="1" max="5" />

• 表单验证：HTML5 提供了内置的表单验证功能，可以通过使用新的属性和属性值来验证用户输入的数据。例如，required属性可以用于确保输入字段不为空，pattern属性可以用于指定输入字段的正则表达式模式。

<label for="username">Username:</label>
<input type="text" id="username" name="username" required />

<label for="password">Password:</label>
<input type="password" id="password" name="password" minlength="8" required />

<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{10}" required />

Canvas

HTML5 的<canvas>元素允许使用 JavaScript 绘制图形、动画和游戏。通过 Canvas API，开发人员可以在网页上创建交互式的绘图效果。

<canvas id="myCanvas"></canvas>

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);

地理位置 API

HTML5 提供了地理位置 API，使得网页可以获取用户的地理位置信息。通过 Geolocation API，开发人员可以根据用户的位置提供个性化的服务或功能。

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(
    (position) => {
      const latitude = position.coords.latitude;
      const longitude = position.coords.longitude;
      console.log(`Latitude: ${latitude}, Longitude: ${longitude}`);
    },
    (error) => {
      console.error(error.message);
    }
  );
}

WebSockets

HTML5 引入了 WebSockets，提供了一种在客户端和服务器之间进行实时双向通信的方式。通过 WebSocket API，开发人员可以创建持久的连接，并实时传输数据。

const socket = new WebSocket("wss://example.com/socket");

socket.onopen = () => {
  console.log("WebSocket connection established.");
};

socket.onmessage = (event) => {
  console.log("Received message:", event.data);
};

socket.onclose = (event) => {
  console.log("WebSocket connection closed:", event.code);
};

socket.send;