HTML网页规划与入门实践教程-CSDN博客

本文链接：https://blog.csdn.net/weixin_29859471/article/details/147643700

简介：标题“ev-planeacion-entrada”涉及HTML页面规划和入门知识，项目压缩包“ev-planeacion-entrada-main”可能包含了构建网页的基础HTML文件、CSS样式表和JavaScript脚本。HTML是网页设计的核心，涉及到元素标签、属性、文本格式化、链接、图像、表格、列表、段落、换行和头部元素等基本概念，同时HTML5引入了离线存储、音视频、canvas、地理定位和web storage等新特性。通过本教程，学习者可以掌握网页设计的基础知识和实践技巧。 ev-planeacion

1. HTML基础结构和语法

网页的骨架由HTML构建，它通过标签和属性定义了网页内容的结构。一个基本的HTML文档包含 <!DOCTYPE html> 声明， <html> 元素，以及 <head> 和 <body> 两个主要部分。 <head> 元素包含了文档的元数据，如 <title> 定义的页面标题，而 <body> 部分则包含了页面的可见内容。

<!DOCTYPE html>
<html>
<head>
    <title>我的网页</title>
</head>
<body>

    <h1>欢迎来到我的网页</h1>
    <p>这是一个基本的HTML示例。</p>

</body>
</html>

在编写HTML代码时，良好的格式化和注释习惯是不可或缺的。它们提高了代码的可读性和维护性。需要注意的是，HTML不区分大小写，但建议使用小写字母，以保持一致性。掌握这些基础知识，是成为Web开发者的必经之路。

2. HTML标签的使用

2.1 标签的分类和作用

2.1.1 基本HTML标签的介绍

在HTML的世界里，每一个页面的诞生都离不开基本标签的运用。最基本且不可或缺的标签包括 <!DOCTYPE html> , <html> , <head> , 和 <body> 。

<!DOCTYPE html> ：这是一个文档类型声明，告诉浏览器这个页面是HTML5文档。虽然它不是一个标签，但却是构建任何HTML文档的基础。
<html> ：此标签代表整个HTML文档的根元素，页面的其它所有元素都将包含在这个标签之内。
<head> ：包含了文档的元数据，如文档的标题（ <title> ）、字符集声明（ <meta charset="UTF-8"> ）、链接到CSS文件（ <link> ）、脚本（ <script> ）以及其他在 <body> 标签中不显示的信息。
<body> ：包含了可见的页面内容，包括文本、图片、视频、链接等。

这些标签一起工作，形成了一个网页的基础框架。例如，一个最基本的HTML页面看起来是这样的：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Basic HTML Page</title>
</head>
<body>
    <h1>Welcome to My Web Page</h1>
    <p>This is a paragraph.</p>
</body>
</html>

通过上述代码，我们可以看到每个标签都有其特定的作用和位置。 <h1> 和 <p> 分别代表一个标题和一个段落，它们在 <body> 内定义页面的可见内容。

2.1.2 标题、段落和换行标签的使用

标题、段落和换行是网页上构建内容架构的基础。它们在组织文本信息方面扮演着至关重要的角色。

标题标签： <h1> 到 <h6> ，用于定义不同级别的标题。 <h1> 通常是最高级别的标题，而 <h6> 则是最低级别的。为了保持页面的结构化和可读性，应当合理使用这些标题。
段落标签： <p> 是定义段落的常用标签。它自动在前后添加适当的空白，使得文本阅读更加舒适。
换行标签： <br> 用于插入一个换行符。它没有闭合标签，并且可以被用在任何需要换行的地方，如地址、诗歌或其他需要断行的文本。

这些标签的正确使用是保持内容清晰和组织有序的关键。例如：

<h1>Main Title</h1>
<h2>Sub Title</h2>
<p>This is the first paragraph. <br> Here is a new line within the same paragraph.</p>
<p>Another paragraph.</p>

在这个例子中， <h1> 定义了一个主标题， <h2> 定义了一个子标题。两个段落由 <p> 标签分割，第一个段落中使用 <br> 来强制换行，这在显示地址或诗句时非常有用。

2.2 表单标签的深入应用

2.2.1 输入类型和表单控件

在HTML中，表单是一个能够收集用户输入信息的交互组件。它通过各种输入控件（如文本框、复选框和单选按钮）来实现。

<form> 标签：它是表单的基本容器，所有的表单元素（如输入字段、按钮等）都放在这个标签内部。
<input> 标签：这是最常用的表单控件。 <input> 标签的 type 属性定义了控件的类型，如 text （文本框）、 password （密码框）、 checkbox （复选框）、 radio （单选按钮）、 submit （提交按钮）等。
<label> 标签：提供标签文本以帮助用户理解需要输入什么信息，还可以将 for 属性与 <input> 标签的 id 属性相关联，使得当用户点击标签时，相应的输入字段可以获得焦点。

例如：

<form action="/submit-form" method="post">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required><br><br>
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" required><br><br>
    <input type="checkbox" id="remember_me" name="remember_me">
    <label for="remember_me">Remember me</label><br><br>
    <input type="submit" value="Submit">
</form>

在这个表单中，我们有两个文本输入字段，一个密码输入字段，一个复选框以及一个提交按钮。通过 <label> 标签关联，用户可以点击“Username:”和“Password:”旁边的文本直接进入输入状态。

2.2.2 表单的验证和数据提交

表单数据的有效性验证是确保用户输入正确信息的重要步骤。在客户端和服务器端都应进行数据验证，但客户端验证可以提升用户体验，因为它能够在数据提交给服务器之前即时反馈给用户。

HTML5表单验证：HTML5引入了客户端表单验证，通过 required 、 pattern 、 min 、 max 等属性，可以在无需额外JavaScript的情况下验证输入内容。

例如：

<form action="/submit-form" method="post">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required><br><br>
    <input type="submit" value="Submit">
</form>

在这个例子中， type="email" 属性会强制浏览器检查输入字段是否包含有效的电子邮件地址格式。

数据提交是表单的最终目标。提交表单时， <form> 标签的 action 属性指定了提交表单后数据的处理URL， method 属性则指定了提交数据的HTTP方法（通常是 get 或 post ）。

例如：

<form action="https://example.com/submit" method="post">
    <!-- Form content here -->
</form>

在这个简单的表单中，所有的表单数据将会以 post 方法发送到 https://example.com/submit 。

2.3 高级标签的应用技巧

2.3.1 锚点和引用标签的运用

锚点和引用标签是HTML文档中实现链接和引用的关键。

锚点（ <a> 标签）：用于创建一个链接，无论是跳转到另一个页面（通过 href 属性），还是页面内的书签（通过 href="#id_name" ）。
引用标签：包括 <blockquote> 用于长引用， <q> 用于短引用，并通过 cite 属性指向引用来源。

例如：

<a href="https://example.com/page">Visit Example.com</a><br><br>
<a href="#section2">Jump to Section 2</a>
<h2 id="section2">Section 2</h2>
<p>Some text here...</p>

在这个例子中，第一个链接会将用户导向外部网站，而第二个链接则允许用户点击后跳转到同一页面上的特定部分。

2.3.2 元数据标签和脚本标签的作用

元数据标签和脚本标签在页面的SEO优化和功能实现方面扮演着关键角色。

元数据标签：如 <meta> ，它用来描述HTML文档的元数据，如页面描述（ name="description" ）、作者（ name="author" ）以及字符集声明（ charset="UTF-8" ）。
脚本标签： <script> 用于加载JavaScript代码，可以嵌入在HTML中或通过 src 属性链接外部文件。JavaScript是实现网页交互性的核心技术。

例如：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="description" content="This is a simple web page">
    <title>Web Page Title</title>
    <script>
        // JavaScript code goes here
        alert('Hello, World!');
    </script>
</head>
<body>
    <h1>Welcome to My Web Page</h1>
</body>
</html>

在这个示例中，页面描述和字符集在 <head> 中定义，并包含一个简单的JavaScript脚本，在页面加载时弹出一个对话框。

3. 文本格式化和链接创建

在Web开发中，文本格式化是构建清晰、可读网页内容的基础。良好的格式化可以提升用户体验，使内容更加吸引人且易于理解。创建链接则是实现网页间导航和信息分享的关键技术。本章节我们将探讨HTML文本格式化的各种技巧和创建链接的不同方法。

3.1 文本排版和格式化技术

3.1.1 字体样式和文本装饰

HTML中的 <span> 和 <div> 标签可用于应用内联和块级样式。内联元素适合微调小段文本，而块级元素适合更大的结构性内容。

为了改善文本外观，我们可以使用 style 属性直接在元素上定义CSS样式。例如：

<p style="color: blue; font-size: 18px;">这是一段蓝色且字号为18px的文本。</p>

上例中 color 属性用于改变文本颜色， font-size 用于定义文本大小。尽管直接在HTML中使用样式很方便，但最佳实践是将CSS样式放在单独的文件中。

3.1.2 段落格式和列表样式

HTML段落通常通过 <p> 标签创建。 <p> 标签定义了段落的开始和结束，浏览器会自动在段落之间添加额外的空间。对于列表，HTML提供了两种基本类型：有序列表 <ol> 和无序列表 <ul> 。

有序列表按数字或字母顺序排列，每个列表项使用 <li> 标签。无序列表则使用项目符号或圆点显示，同样使用 <li> 标签定义列表项。例如：

<ol>
  <li>第一条</li>
  <li>第二条</li>
</ol>
<ul>
  <li>项目一</li>
  <li>项目二</li>
</ul>

在创建列表时，我们还可以嵌套列表，以创建更复杂的结构：

<ul>
  <li>列表项1
    <ol>
      <li>子项1</li>
      <li>子项2</li>
    </ol>
  </li>
  <li>列表项2</li>
</ul>

嵌套列表允许我们在有序列表中插入无序列表，或反之。这对制作复杂的结构化内容如目录非常有用。

3.2 创建和管理超链接

3.2.1 超链接的基本语法和属性

HTML的 <a> 标签用于创建超链接，允许用户点击后跳转到指定URL。基本语法如下：

<a href="https://www.example.com">访问示例网站</a>

在这里， href 属性定义了链接的目标地址，链接文本是用户看到并可以点击的部分。

链接还可以指向页面的某个特定部分，这就是书签链接。首先在目标位置定义一个ID：

<h2 id="section1">3.2.1 节标题</h2>

然后创建一个链接指向这个ID：

<a href="#section1">跳转到3.2.1节</a>

电子邮件链接使用 mailto: 协议，允许用户直接发送电子邮件：

<a href="mailto:someone@example.com">发送邮件</a>

3.2.2 创建书签和电子邮件链接

如前所述，书签链接允许用户直接跳转到网页上的特定部分。它们特别适用于长页面，如法律声明、FAQ或指南，使用户可以快速导航到感兴趣的部分。创建书签链接的语法如下：

<a href="#目标元素的ID">链接文本</a>

电子邮件链接则允许用户发送邮件到指定地址。这些链接对于提供反馈、报告问题或请求信息特别有用。例如：

<a href="mailto:support@example.com">技术支持</a>

该链接将启动用户的邮件客户端，并将收件人地址设置为support@example.com。

综上所述，文本格式化和链接创建是网页开发中的基本且重要的任务。通过使用HTML标签及其属性，开发者可以有效地组织和呈现网页内容，同时确保用户能够通过链接轻松地在网站内和网站间导航。这些技术的应用增强了网页的可用性和用户体验。

4. 图像和表格的布局

4.1 图像的添加和优化

4.1.1 图像标签及其属性

在Web页面上添加图像，可以使内容更加生动和直观。HTML提供了 <img> 标签用于嵌入图像，其最常用的属性包括 src 、 alt 、 width 和 height 。

src 属性用于指定图像文件的路径，可以是本地路径或者URL。
alt 属性提供图像内容的文字描述，这对于搜索引擎优化（SEO）和为视觉障碍用户提供信息至关重要。
width 和 height 属性用于控制图像的显示尺寸，单位是像素。

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

在代码中， <img> 标签的 src 属性指向一个名为 image.jpg 的图像文件，该图像在页面上的显示尺寸被设置为200x200像素。而 alt 属性提供的描述信息将帮助用户理解图像内容，同时在图像无法加载时显示文字替代。

4.1.2 图片映射和响应式图片技术

图片映射允许在同一个图像上定义多个链接区域，这对于创建交互式图像如地图导航非常有用。HTML使用 <map> 和 <area> 标签来实现该功能。

<img src="map.png" alt="地图" usemap="#map">
<map name="map">
    <area shape="rect" coords="34,44,270,350" href="link1.html" alt="区域1">
    <area shape="circle" coords="129,161,60" href="link2.html" alt="区域2">
</map>

在上述代码中， <map> 标签定义了一个图片映射，而 <area> 标签创建了两个链接区域。 shape 属性定义了区域的形状， coords 属性定义了坐标。通过鼠标点击对应的区域，将会链接到 href 属性指定的URL。

响应式图片技术指的是根据不同的显示设备调整图片的尺寸和分辨率。HTML5通过 <picture> 元素和 srcset 属性提供了一种响应式图片的实现方式：

<picture>
  <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="描述文字">
</picture>

上述代码中 <picture> 元素包含多个 <source> 子元素，它们定义了不同屏幕宽度下的图片源， <img> 标签则用于提供一个备用的图片。当屏幕宽度超过650px时，浏览器会选择 img_pink_flowers.jpg ；宽度介于465px至650px之间时，会使用 img_white_flower.jpg ；否则，使用 img_orange_flowers.jpg 作为默认图片。

图片映射和响应式图片技术的结合使用，使得在网页设计中能够更好地控制图像的交互性和适应性。

4.2 表格的构建和样式设置

4.2.1 表格的基本结构和单元格合并

表格是网页中展示数据的重要方式之一。HTML通过 <table> 、 <tr> 、 <td> 和 <th> 标签来构建表格的基本结构。

<table> 标签用于创建表格。
<tr> 标签定义表格中的行。
<td> 标签定义行中的单元格，用于展示数据。
<th> 标签用于定义表头单元格，通常是加粗居中显示的。

单元格合并可以通过 rowspan 和 colspan 属性实现，分别用于跨行和跨列合并单元格。

<table>
  <tr>
    <th>列标题1</th>
    <th>列标题2</th>
  </tr>
  <tr>
    <td>数据1</td>
    <td>数据2</td>
  </tr>
  <tr>
    <td rowspan="2">跨两行的数据3</td>
    <td>数据4</td>
  </tr>
  <tr>
    <td>数据5</td>
  </tr>
</table>

在这个例子中，第一行包含两个表头单元格，随后两行包含四列数据。第一行的第二个单元格跨两列显示，第二行的第三个单元格跨两行显示。

4.2.2 表格样式和交互式表格技巧

表格的样式设计包括边框、背景、文本对齐等，通过使用CSS（Cascading Style Sheets）可以对表格进行详细样式设置。使用 <style> 标签或外部样式表来定义样式，然后通过类（class）或ID将样式应用到表格上。

<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: left;
  }
</style>

这段CSS代码将表格边框合并，宽度设置为100%，并且为表头和单元格添加了边框和内边距。文本默认靠左对齐。

交互式表格可以增强用户体验，例如通过添加排序功能或过滤器。这通常需要JavaScript或jQuery等脚本语言实现。表格也可以通过CSS实现更复杂的交云样式，比如悬停效果。

<script>
  $(document).ready(function() {
    $('#myTable').DataTable();
  });
</script>

此代码使用了jQuery插件Datatables，它可以增强表格的交互性，如排序、搜索、分页等。

表格是展示复杂数据集的有力工具，通过HTML和CSS可以创建基本的表格布局，再结合JavaScript来增强表格的交互性和功能性，使得Web页面上的表格不仅具有信息展示功能，还能提供用户友好的交互体验。

以上内容深入探讨了图像和表格的布局，涵盖了从基础知识到高级应用技巧的全面介绍。通过实例和代码的展示，希望能够帮助读者在实际工作中更好地应用和优化图像与表格在网页设计中的展示效果。

5. 列表和段落的排版

列表和段落是网页内容组织的基础元素，它们不仅让页面内容结构更加清晰，而且是用户界面友好性的关键。本章将深入探讨HTML中列表和段落排版的各种技巧和应用。

5.1 列表的种类和应用场景

列表是用于组织一系列独立项目或相关内容的结构化元素。HTML提供了无序列表、有序列表和定义列表三种主要的列表类型，每种列表都有其特定的使用场景。

5.1.1 无序列表、有序列表和定义列表

无序列表通常用于项目之间没有特定顺序的场景，如购物清单、菜单选项等。在HTML中，无序列表通过 <ul> 标签定义，并包含一系列 <li> 标签作为列表项。

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

有序列表则用于项目具有顺序关系或优先级的场景，例如步骤说明、排名等。有序列表使用 <ol> 标签，列表项同样是 <li> 标签。

<ol>
  <li>打开文档</li>
  <li>编辑文档</li>
  <li>保存文档</li>
</ol>

定义列表由 <dl> 标签定义，通常用于术语和定义的组合。它包含两部分，每个定义项由 <dt> 标签表示，其解释或定义则由 <dd> 标签表示。

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language，超文本标记语言</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets，层叠样式表</dd>
</dl>

5.1.2 列表的嵌套和样式定制

列表可以嵌套使用，以构建更加复杂和有层次的内容结构。每个 <li> 元素可以包含另一个列表，允许创建多级列表结构。

<ul>
  <li>项目一
    <ol>
      <li>子项目一</li>
      <li>子项目二</li>
    </ol>
  </li>
  <li>项目二</li>
</ul>

为了改善用户体验，列表元素也可以通过CSS进行样式定制。可以通过改变列表项的标记、调整列表的布局，甚至添加背景图像等。

ul {
  list-style-type: square; /* 改变标记为方形 */
}

ul li {
  background: url('marker.png') no-repeat; /* 使用图像作为标记 */
  padding-left: 20px; /* 添加左边距 */
}

5.2 段落的排版和视觉效果提升

段落是网页内容的基本单位，有效的段落排版不仅有助于提高内容的可读性，还能够提升视觉吸引力。

5.2.1 段落标签及其属性

HTML中的段落使用 <p> 标签进行定义。段落标签通常包含文本内容，浏览器会自动在段落之间添加一定的间隔。

<p>这是一个段落。</p>
<p>这是另一个段落。</p>

<p> 标签还有一些有用的属性，例如 align 属性，它可以用来控制段落的对齐方式。不过，在现代HTML5中，推荐使用CSS来实现对齐。

<p align="center">居中对齐的段落。</p>

5.2.2 对齐、缩进和文本间隔的调整

使用CSS可以对段落进行更细致的排版控制。例如，可以设置文本的对齐方式、首行缩进、行间距和字间距等。

p {
  text-align: justify; /* 两端对齐文本 */
  text-indent: 2em; /* 首行缩进两个字符 */
  line-height: 1.6; /* 设置行高 */
  letter-spacing: 1px; /* 字间距 */
}

通过上述CSS属性的使用，可以极大增强段落的视觉效果和可读性，使网页内容更加美观和专业。

接下来，在第六章中，我们将探索响应式网页设计的基础，讲解如何利用媒体查询、视口设置以及布局容器和浮动技术来构建适应不同屏幕尺寸的网页。

6. 响应式网页设计基础

6.1 媒体查询和视口设置

响应式网页设计（Responsive Web Design, RWD）是创建能够自动适应多种屏幕尺寸的网页布局的技术。响应式设计的重要性在于它能够确保网站在各种设备上提供一致的用户体验，从智能手机到平板电脑，再到桌面显示器。

6.1.1 响应式设计的重要性

随着移动设备用户数量的剧增，用户体验（UX）的优化成为网站成功的关键因素之一。网站需要在不同的设备和屏幕尺寸上展示良好，并且能够快速响应用户的交互。一个不支持响应式设计的网站可能会失去大量访问量，因为用户访问时可能会遇到导航困难、内容布局错乱、加载速度慢等问题。

6.1.2 媒体查询的使用方法

媒体查询是CSS3中的一个功能，它允许为不同的屏幕尺寸和方向定义特定的样式规则。通过使用 @media 规则，我们可以指定一套样式仅当浏览器满足特定的条件时才会应用。

/* 为屏幕宽度小于或等于768px的设备定义样式 */
@media screen and (max-width: 768px) {
    body {
        font-size: 16px;
    }
    header, footer, aside, nav, section {
        float: none;
        width: 100%;
    }
}

在上面的例子中，当屏幕宽度小于或等于768px时，页面的字体大小被调整为16px，并且几个布局相关的容器标签的宽度被设置为100%。

6.2 布局容器和浮动技术

响应式网页设计的布局容器通常基于弹性盒模型（flexbox）或栅格系统来实现不同屏幕尺寸的适应性。

6.2.1 容器类标签和栅格系统

栅格系统将页面分割为一系列等宽的列，然后根据需要将这些列堆叠或者并排显示。Bootstrap框架是目前最流行的前端框架之一，它提供的栅格系统就是基于12列布局。

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-md-6">Column</div>
    <div class="col-xs-12 col-md-6">Column</div>
  </div>
</div>

上面的代码展示了如何使用Bootstrap框架的栅格系统创建两列布局。在小屏幕设备上（ xs ），这两列将堆叠显示，而在中等屏幕设备（ md ）及以上，两列将并排显示。

6.2.2 浮动和清除浮动的原理与实践

浮动是一种CSS布局方式，用于创建包含块，让块级元素并排显示。然而，浮动也引入了一些问题，比如浮动元素后的行内元素无法包围它。为了解决这个问题，可以使用清除浮动技术。

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

在这个例子中， .clearfix 类用于清除浮动。 ::after 伪元素用于在浮动元素之后创建一个空的块级元素，并应用 clear: both; 属性来清除浮动。

为了进一步提高网页的响应性，可以结合媒体查询使用上述技术，确保网站在不同设备上都能提供良好的用户体验。开发者可以针对不同的屏幕尺寸定义不同的样式规则，从而实现一个高度灵活和可适应的布局。

7. HTML5新特性应用

7.1 HTML5语义化标签的应用

随着HTML5的推出，网页的设计和开发得到了极大的改进。其中，语义化标签的应用是HTML5带来的一个重大变革，它让网页的结构更加清晰，提高了代码的可读性和可维护性。

7.1.1 新增语义标签概述

HTML5引入了许多新的语义标签，如 <header> , <footer> , <nav> , <section> , <article> 等。这些标签不仅有助于构建结构化的文档，还能通过明确地传达内容的含义，改善SEO效果。

<header>
  <h1>网站标题</h1>
</header>
<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">联系方式</a></li>
  </ul>
</nav>
<section>
  <h2>新闻标题</h2>
  <article>
    <h3>文章标题</h3>
    <p>这里是文章内容...</p>
  </article>
</section>
<footer>
  <p>版权所有 &copy; 2023</p>
</footer>

7.1.2 语义标签在页面结构中的运用

语义化标签能够帮助开发者构建更加有逻辑和有结构的网页内容。例如，使用 <article> 标签来封装独立的、可重用的内容块，而 <section> 标签则用于分隔文档的各个部分。

<section aria-labelledby="section-header">
  <h2 id="section-header">产品介绍</h2>
  <article>
    <h3>产品特性</h3>
    <p>这里描述产品的特性...</p>
  </article>
  <article>
    <h3>产品优势</h3>
    <p>这里描述产品的优势...</p>
  </article>
</section>

7.2 HTML5多媒体和输入元素

7.2.1 音频、视频和画布元素

HTML5新增的 <audio> 和 <video> 标签使得在网页中嵌入音频和视频内容变得非常简单，无需依赖插件。 <canvas> 标签则为网页图形提供了动态的脚本接口。

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  您的浏览器不支持 audio 元素。
</audio>

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

<canvas id="myCanvas" width="200" height="100"></canvas>

7.2.2 新型表单输入元素及其验证

HTML5还引入了许多新的表单输入类型，如 <input type="email"> , <input type="date"> , <input type="search"> 等，它们不仅提供了更好的用户体验，还内置了客户端数据验证，提高了表单的安全性和可用性。

<form action="/submit" method="post">
  <input type="email" id="email" name="email" placeholder="输入邮箱" required>
  <input type="date" id="date" name="date" required>
  <input type="search" id="search" name="search" placeholder="搜索内容">
  <button type="submit">提交</button>
</form>