HTML5基础语法与标签

一、 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>：分别用于定义有序列表和列表项。

扫描二维码关注公众号，回复： 16178712 查看本文章

<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属性的新值：

email：指定输入为电子邮件地址。

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> 属性，这个属性用于定义单元格横跨的列数。