备战蓝桥杯 HTML 篇_html竞赛-优快云博客

本文链接：https://blog.youkuaiyun.com/2301_81330785/article/details/147073721

备战蓝桥杯 HTML 篇：从基础到实战，全面解析 HTML 核心技能

蓝桥杯作为全国性的编程竞赛，每年吸引着大量计算机专业的学生参与。HTML 作为前端开发的基础，是蓝桥杯 Web 组比赛的重要考点之一。本文将从基础到实战，全面解析 HTML 的核心技能，帮助参赛者在蓝桥杯中脱颖而出。

一、HTML 基础：掌握核心标签

1.1 基础标签

(1) 链接标签

<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">访问 Example</a>

href：链接地址。
target：定义链接的打开方式，如 _blank 表示在新窗口打开。
rel：定义链接与目标页面的关系，如 noopener noreferrer 用于防止安全问题。

(2) 图像标签

<img src="image.jpg" alt="描述文字" width="300" height="200">

src：图像的路径。
alt：图像的替代文本，用于图像无法加载时显示。

(3) 表格标签

<table border="1">
  <thead>
    <tr>
      <th>标题1</th>
      <th>标题2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>内容1</td>
      <td>内容2</td>
    </tr>
  </tbody>
</table>

border：表格边框属性，设置为 1 时显示边框。

(4) 列表标签

<ul>
  <li>项目1</li>
  <li>项目2</li>
</ul>

<ol>
  <li>项目1</li>
  <li>项目2</li>
</ol>

ul：无序列表。
ol：有序列表。

(5) 表单标签

<form action="/submit" method="post">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name">
  <br>
  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email">
  <br>
  <button type="submit">提交</button>
</form>

form：表单标签，action 属性定义提交目标，method 定义提交方法（如 post 或 get）。
input：输入域，类型包括 text、email、password 等。

二、HTML5 新特性：提升开发效率

2.1 新元素与语义化标签

HTML5 引入了许多语义化标签，如 <header>、<footer>、<nav>、<article> 等，使页面结构更加清晰。

2.2 多媒体支持

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  您的浏览器不支持视频标签。
</video>

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  您的浏览器不支持音频标签。
</audio>

video 和 audio 标签用于嵌入多媒体内容。

2.3 本地存储

// localStorage 示例
localStorage.setItem("name", "张三");
console.log(localStorage.getItem("name")); // 输出：张三
localStorage.removeItem("name"); // 删除指定键值对
localStorage.clear(); // 清空所有存储项

// sessionStorage 示例
sessionStorage.setItem("name", "李四");
console.log(sessionStorage.getItem("name")); // 输出：李四

localStorage：持久化存储，数据不会因关闭浏览器而丢失。
sessionStorage：临时存储，数据在关闭标签页或浏览器后删除。

三、实战训练：蓝桥杯 HTML 题型解析

3.1 响应式布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>响应式布局</title>
  <style>
    .container {
      display: flex;
      flex-wrap: wrap;
    }
    .item {
      flex: 1;
      min-width: 200px;
      padding: 20px;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">内容1</div>
    <div class="item">内容2</div>
    <div class="item">内容3</div>
  </div>
</body>
</html>

3.2 表单验证

<form id="myForm">
  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email" required>
  <br>
  <button type="submit">提交</button>
</form>

<script>
  document.getElementById("myForm").addEventListener("submit", function(event) {
    event.preventDefault();
    const email = document.getElementById("email").value;
    if (!email.includes("@")) {
      alert("请输入有效的邮箱地址");
    } else {
      alert("表单提交成功");
    }
  });
</script>

3.3 多媒体页面

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>多媒体页面</title>
</head>
<body>
  <h1>视频示例</h1>
  <video width="400" controls>
    <source src="demo.mp4" type="video/mp4">
    您的浏览器不支持视频标签。
  </video>

  <h1>音频示例</h1>
  <audio controls>
    <source src="demo.mp3" type="audio/mpeg">
    您的浏览器不支持音频标签。
  </audio>
</body>
</html>