Html5学习教程，从入门到精通，HTML5 元素语法知识点及案例代码（2）

知识分享小能手

于 2025-02-21 20:39:38 发布

阅读量1.1k

点赞数 40

CC 4.0 BY-SA版权

分类专栏：前端开发网页开发编程语言如门文章标签： html5 学习前端开发语言 html java Java开发

本文链接：https://blog.youkuaiyun.com/qq_45746668/article/details/145785331

HTML5 元素语法知识点及案例代码

一、HTML5 元素概述

HTML5 元素是构成网页的基本单位，每个元素都有特定的语义和功能。HTML5 元素由开始标签、内容和结束标签组成，例如：

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

<p> 是开始标签
这是一个段落。 是内容
</p> 是结束标签

二、HTML5 元素分类

HTML5 元素可以根据其功能和语义进行分类，主要分为以下几类：

根元素:
- <html>: 定义 HTML 文档的根元素。
文档元数据:
- <head>: 定义文档的头部信息，例如标题、样式表、脚本等。
- <title>: 定义文档的标题。
- <meta>: 定义文档的元数据，例如字符编码、作者、描述等。
- <link>: 定义文档与外部资源的关系，例如样式表、图标等。
- <style>: 定义文档的内部样式表。
- <script>: 定义文档的脚本代码。
内容分区:
- <body>: 定义文档的主体内容。
- <header>: 定义文档或节的页眉。
- <nav>: 定义导航链接。
- <main>: 定义文档的主要内容。
- <section>: 定义文档中的节。
- <article>: 定义独立的文章内容。
- <aside>: 定义页面内容之外的内容（如侧边栏）。
- <footer>: 定义文档或节的页脚。
文本内容:
- <h1> - <h6>: 定义标题。
- <p>: 定义段落。
- <br>: 定义换行。
- <hr>: 定义水平线。
- <pre>: 定义预格式化文本。
- <blockquote>: 定义块引用。
- <ol>: 定义有序列表。
- <ul>: 定义无序列表。
- <li>: 定义列表项。
- <dl>: 定义定义列表。
- <dt>: 定义定义术语。
- <dd>: 定义定义描述。
内联语义:
- <a>: 定义超链接。
- <strong>: 定义强调文本。
- <em>: 定义强调文本。
- <mark>: 定义标记文本。
- <small>: 定义小号文本。
- <sub>: 定义下标文本。
- <sup>: 定义上标文本。
- <code>: 定义代码片段。
- <time>: 定义日期/时间。
图像和多媒体:
- <img>: 定义图像。
- <audio>: 定义音频内容。
- <video>: 定义视频内容。
- <source>: 定义多媒体资源的来源。
- <track>: 定义多媒体资源的字幕。
表格:
- <table>: 定义表格。
- <caption>: 定义表格标题。
- <thead>: 定义表格头部。
- <tbody>: 定义表格主体。
- <tfoot>: 定义表格尾部。
- <tr>: 定义表格行。
- <th>: 定义表格头单元格。
- <td>: 定义表格数据单元格。
表单:
- <form>: 定义表单。
- <input>: 定义输入控件。
- <label>: 定义输入控件的标签。
- <button>: 定义按钮。
- <select>: 定义下拉列表。
- <option>: 定义下拉列表选项。
- <textarea>: 定义多行文本输入框。

三、HTML5 元素案例代码

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 元素案例</title>
    <meta charset="UTF-8">
    <meta name="description" content="HTML5 元素案例代码">
    <link rel="stylesheet" href="style.css">
    <style>
      body {
     
     
        font-family: Arial, sans-serif;
      }
      h1 {
     
     
        color: red;