一、 HTML5介绍
- HTML5是什么？
HTML5是超文本标记语言（HTML）的第五个主要版本，用于描述网页结构和呈现内容。它是到目前为止最新且最强大的HTML版本。
- HTML5语法约定
1.标签是HTML语法中的基本单位，由尖括号 <> 包围，每个标签通常有一个起始标签（opening tag）和一个结束标签（closing tag），二者以斜杠 / 分隔。
2.HTML文档必须以 声明开始，这指明文档类型为HTML5。
3.布局和结构应使用适当的标签，如 标签用于定义HTML文档的根元素，标签用于包含网页头部信息，而 标签则用于包含页面主体内容。
4.除特殊情况外，标签通常以嵌套的方式使用，以说明标签之间的层次结构。
- HTML5基础结构
<!DOCTYPE html>文档类型（Document Type Declaration，简称DTD）： DTD是位于HTML文档顶部的声明，用于指定HTML的版本和DTD规范。它向浏览器和验证工具表明文档所使用的标记语言，并帮助浏览器正确解析和渲染网页。
<html>标签：<html>标签是HTML文档的根元素，它将整个文档内容包含在内。它是所有其他HTML元素的父元素。通常情况下，一个HTML文档应该以<html>标签开始并以</html>标签结束。
<head>标签：<head>标签是HTML文档的头部部分，用于包含一些元数据和其他重要配置信息，不会在页面中直接显示给用户。一些常见的<head>标签内容包括：
<meta charset="UTF-8">：设置字符编码为UTF-8，确保页面正常显示汉字和特殊字符。<title>：定义网页的标题，显示在浏览器的标题栏或标签页上。- 链接外部CSS和JavaScript文件：可以使用
<link>标签来引入外部样式表（CSS文件），以及使用<script>标签引入外部的JavaScript文件。- 其他元信息，如
<meta name="description" content="网页描述">和<meta name="keywords" content="关键词1, 关键词2">等用于搜索引擎优化（SEO）的信息。
<body>标签：<body>标签是HTML文档的主体内容区域，它包含了实际显示给用户的所有内容，如文本、图片、链接、音频、视频等。在<body>标签内编写网页的可见内容，这些内容将会在浏览器中呈现给用户。
注释：使用<!-- -->可以添加注释，注释不会显示在页面上，而是用于描述HTML代码。
- HTML5基础标签
<h1>到<h6>：用于创建标题，h1是最高级标题，依次类推。
<p>：用于创建段落。
<a>：创建链接，可以使用href属性指定链接的URL地址。
<img>：用于插入图像，在src属性中指定图像的URL地址。
<ul>和<li>：分别用于定义无序列表和列表项。
<ol>和<li>：分别用于定义有序列表和列表项。
<div>：用于创建块级容器，用于组织和样式化页面结构。
<span>：用于创建行内容器，用于设置样式和包装文本片段。
<form>：用于创建表单，收集用户输入的数据。
<input>：用于在表单中创建输入字段，可以包括文本输入框、单选按钮、复选框等。
<button>：创建按钮，用于触发特定的操作。
<table>、<tr>、<td>：分别用于定义表格、表格行和表格单元格。
<video>：用于在页面上播放视频，通过src属性指定视频的URL。
<audio>：用于在页面上播放音频，通过src属性指定音频的URL。
二、 列表标签
<ul>,<ol>, 和<dl>是HTML中用于创建列表的三种不同类型的标签。它们在不同的场合下使用：
<ul>(unordered list - 无序列表)：- 使用无特定顺序的项目列表时，像一组相关的项目、选项或简单的列表等。
- 常见的应用场景包括导航菜单、任务列表和项目清单。
示例：
<ul>
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ul>
<ol>(ordered list - 有序列表)：- 使用有特定顺序的项目列表、需要按顺序编号/计数的元素或顺序排列的信息等。
- 常见的应用场景包括步骤指南、教程说明、排行榜等。
示例：
<ol>
<li>步骤1</li>
<li>步骤2</li>
<li>步骤3</li>
</ol>
<dl>(description list - 描述列表)：- 使用于一组描述术语和其对应的定义/描述之间的关系，表示术语及其解释或说明等。
- 常见的应用场景包括词汇表、定义术语的页面、技术文档中的参数描述等。
示例：
<dl>
<dt>术语1：</dt>
<dd>描述1</dd>
<dt>术语2：</dt>
<dd>描述2</dd>
</dl>
<ul>和<li>标签嵌套使用的规则：
<li>只能作为<ul>或<ol>标签的直接子元素：<li>标签只能作为无序列表(<ul>)或有序列表(<ol>)的直接子元素出现。不能将<li>标签放在其他元素（如段落<p>）内部作为子元素。
示例：
<ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>
<ol>
<li>列表项1</li>
<li>列表项2</li>
</ol>
- 可嵌套列表项：
<li>标签允许嵌套另一个列表结构，无论是有序列表(<ol>)还是无序列表(<ul>)，即在<li>内部再次使用<ul>或<ol>。
示例：
<ul>
<li>列表项1</li>
<li>
列表项2
<ul>
<li>嵌套列表项1</li>
<li>嵌套列表项2</li>
</ul>
</li>
</ul>
- ul和ol的常见属性有：
type：指定有序列表(<ol>)的计数器样式，在无序列表(<ul>)上没有用。常用的值有："1"：阿拉伯数字（默认值）。"a"：小写英文字母。"A"：大写英文字母。"i"：小写罗马数字。"I"：大写罗马数字。
示例：
<ol type="A">
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ol>
start：指定有序列表(<ol>)起始项的值，可设置一个开始的整数值。默认情况下，从"1"开始。适用于重新开始编号的列表情况。
示例：
<ol start="3">
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ol>
reversed：为有序列表(<ol>)启用反向计数，即列表按降序进行计数。默认情况下，值为"false"。
示例：
<ol reversed>
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ol>
三、 多媒体标签
- 如何正确地在网页中插入图片，它有哪些常见属性？
要在网页中插入图片，使用<img>标签。
<img src="imageURL" alt="description">
-
src属性：用于指定图片的URL地址。它可以引用外部图片资源（绝对或相对URL）或者内嵌的Base64编码数据。 -
alt属性（可选）：用于提供图片的替代文本。当图片无法加载时，或为了让屏幕阅读器用户了解图像的内容时，替代文本会显示出来。
示例：
<img src="https://example.com/image.jpg" alt="Beautiful scenery">
与图像相关的属性：
width和height属性：用于指定图像的显示宽度和高度。可以使用固定的像素值，也可以使用百分比等单位。
title属性：提供一个鼠标悬停在图像上时显示的标题文本。当鼠标悬停在图片上时，浏览器通常会显示一个工具提示框来展示该标题信息。
loading属性：指定图像载入的行为。有值"lazy"时，图像将以延迟加载的方式载入，可以提高页面加载性能。有值"eager"时，图像会立即开始载入。
decoding属性：指定浏览器解码图像的行为。有值"async"时，图像将以异步方式解码，可以加快页面加载速度。
sizes属性：用于指定图像在不同屏幕尺寸和布局上显示时该采用的大小。它通常与断点容器（<picture>）一起使用。
- 如何在网页上插入音频和视频？
在网页上插入音频和视频，使用<audio>和<video>标签
- 插入音频：
<audio src="audio.mp3" controls></audio>
src属性指定音频文件的URL地址，它可以是一个相对或绝对的URL。
controls属性用于显示音频控制器，这样用户就可以播放、暂停、调整音量等。
- 插入视频：
<video src="video.mp4" controls width="640" height="480"></video>
src属性指定视频文件的URL地址，可以使用相对或绝对的URL。
controls属性用于显示视频控制器。
width和height属性可设置视频的显示宽度和高度（以像素为单位）。
如果想要支持不同浏览器之间的多种媒体格式，可以使用<source>标签在<audio>或<video>元素内指定多种媒体源示例：
<video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<!-- 可以添加更多媒体源 -->
</video>
- 相对路径和绝对路径是什么意思？
在Web开发中，相对路径和绝对路径是用来引用文件或资源的两种不同方式。
相对路径：相对路径是一个相对于当前文档所在位置的路径。它描述了目标资源到当前文档的相对位置关系。相对路径可以使用以下方式来表示：
../：父级目录。./或省略：当前目录。- 文件名：目标文件所在的相对路径。
示例：
<img src="../images/example.jpg">：引用当前文档上一级目录下的images文件夹中的example.jpg图像。<link href="./styles.css" rel="stylesheet">：引用与当前文档相同目录下的styles.css样式表文件。
- 绝对路径：绝对路径是指完整的文件或资源引用路径，从根目录（通常是网站主目录）开始的定位方式。没有相对路径的变动，始终从相同的起点出发。
绝对路径一般包含完整的URL，如
https://example.com/images/example.jpg或服务器本地的物理路径（如/var/www/html/images/example.jpg）等。选择相对路径还是绝对路径取决于具体情况和需求：
相对路径适合用于文件内部资源引用，尤其是在访问使用相对路径的网站时，无论是调试、开发还是迁移部署，都能保持正确的引用关系。
绝对路径通常用于引用其他域名或不同服务器上的资源，但在迁移部署时可能需要更新路径。
四、语义化标签
HTML5引入了一些语义化标签，用于更清晰地描述网页的结构和内容的含义，提高页面的可读性、可访问性以及搜索引擎优化。
<header>：定义文档或节的页眉。常用于放置标题、导航栏和引导元素。
<nav>：定义页面的导航部分，通常包含链接、菜单或导航功能。
<main>：定义文档或节的主要内容，一个页面只能拥有一个<main>标签。它用于标识网页的首要内容区域。
<article>：定义独立的、完整的文章或单独的内容块。常用于博客帖子、新闻文章和独立内容的组织。
<section>：定义文档的独立部分或特定的内容区块。它可以是一组相关的内容的容器。
<aside>：定义页面的附属内容区域，通常放置在主要内容之旁边，用作补充说明或其他次要信息。
<footer>：定义文档或节的页脚。通常用于存放版权信息、联系方式或相关链接等。
<figure>：定义自包含的独立媒体元素，通常用于包装图片、插图、图表或类似对象。
<figcaption>：定义与<figure>元素相关联的标题或说明。
<time>：定义日期或时间。常用于表示发布日期、事件时间等具有时间语义的内容。
五、 表单标签
HTML5引入了一些新的表单标签，以及增强了现有标签的功能。以下是HTML5中常见的表单标签：
<input>：用于创建多种输入字段。
type属性的新值：
date：指定输入为日期。url：指定输入为URL地址。tel：指定输入为电话号码。number：指定输入为数值。search：指定输入为搜索。color：指定输入为颜色选择器。range：指定输入为范围选择器。file：用于上传文件等。
<textarea>：用于创建多行文本输入字段，允许用户输入多行文本。
<select>：创建下拉选择列表。
<option>：在<select>标签内使用，定义下拉选择列表的选项。
<datalist>：定义预定义选项列表，与输入字段联动。
<option>：在<datalist>标签内使用，定义预定义选项。
<output>：用于显示计算或脚本输出的结果。
for属性：关联到与之相关的表单字段。
<progress>：表示任务的完成进度。
value属性：表示已完成的进度值。max属性：表示总进度的最大值。
<meter>：表示某种标准度量的值。
value属性：表示度量值。min属性：表示最小值。max属性：表示最大值。还有一些新增的表单属性用于增强和完善表单的功能，例如：
required：表单字段为必填字段。placeholder：作为输入字段的提示文本。autocomplete：启用或禁用表单字段的自动填充功能。
六、表格标签
HTML5提供了一些新的表格标签，以增强和语义化网页中表格的结构。以下是HTML5中常见的表格标签：
<table>：用于创建表格。
- 可以包含多个
<tr>元素来表示行。- 可以在行内包含
<th>(表头单元格)或<td>(数据单元格) 元素。
<thead>：用于定义表格的标头部分。
- 包含一个或多个
<tr>元素。
<tbody>：用于定义表格的主体部分。
- 包含一个或多个
<tr>元素。
<tfoot>：用于定义表格的页脚部分。
- 包含一个或多个
<tr>元素。
<th>：用于定义表格的表头单元格。
- 通常出现在
<thead>或<tfoot>区域中。- 用于标识一个列或多列的标题。
<td>：用于定义表格的数据单元格。
- 出现在
<tr>中。- 包含实际数据或其他内容。
示例代码如下所示：
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>职业</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
<td>工程师</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>设计师</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">总人数：2</td>
</tr>
</tfoot>
</table>
上述示例展示了一个简单的表格结构，其中包含了表头、数据行以及页脚。注意<colspan> 属性 ，这个属性用于定义单元格横跨的列数。
