当前位置： 首页 > article >正文

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

article 2026/4/11 18:05:44

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

一、HTML5 元素概述

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

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

二、HTML5 元素分类

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

  1. 根元素:

    • <html>: 定义 HTML 文档的根元素。

  2. 文档元数据:

    • <head>: 定义文档的头部信息，例如标题、样式表、脚本等。
    • <title>: 定义文档的标题。
    • <meta>: 定义文档的元数据，例如字符编码、作者、描述等。
    • <link>: 定义文档与外部资源的关系，例如样式表、图标等。
    • <style>: 定义文档的内部样式表。
    • <script>: 定义文档的脚本代码。

  3. 内容分区:

    • <body>: 定义文档的主体内容。
    • <header>: 定义文档或节的页眉。
    • <nav>: 定义导航链接。
    • <main>: 定义文档的主要内容。
    • <section>: 定义文档中的节。
    • <article>: 定义独立的文章内容。
    • <aside>: 定义页面内容之外的内容（如侧边栏）。
    • <footer>: 定义文档或节的页脚。

  4. 文本内容:

    • <h1> - <h6>: 定义标题。
    • <p>: 定义段落。
    • <br>: 定义换行。
    • <hr>: 定义水平线。
    • <pre>: 定义预格式化文本。
    • <blockquote>: 定义块引用。
    • <ol>: 定义有序列表。
    • <ul>: 定义无序列表。
    • <li>: 定义列表项。
    • <dl>: 定义定义列表。
    • <dt>: 定义定义术语。
    • <dd>: 定义定义描述。

  5. 内联语义:

    • <a>: 定义超链接。
    • <strong>: 定义强调文本。
    • <em>: 定义强调文本。
    • <mark>: 定义标记文本。
    • <small>: 定义小号文本。
    • <sub>: 定义下标文本。
    • <sup>: 定义上标文本。
    • <code>: 定义代码片段。
    • <time>: 定义日期/时间。

  6. 图像和多媒体:

    • <img>: 定义图像。
    • <audio>: 定义音频内容。
    • <video>: 定义视频内容。
    • <source>: 定义多媒体资源的来源。
    • <track>: 定义多媒体资源的字幕。

  7. 表格:

    • <table>: 定义表格。
    • <caption>: 定义表格标题。
    • <thead>: 定义表格头部。
    • <tbody>: 定义表格主体。
    • <tfoot>: 定义表格尾部。
    • <tr>: 定义表格行。
    • <th>: 定义表格头单元格。
    • <td>: 定义表格数据单元格。

  8. 表单:

    • <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;}</style><script>function sayHello() {alert("Hello, World!");}</script></head><body><header><h1>HTML5 元素案例</h1><nav><ul><li><a href="#">首页</a></li><li><a href="#">关于</a></li><li><a href="#">联系</a></li></ul></nav></header><main><section><h2>文本内容</h2><p>这是一个段落。</p><p>这是另一个段落。</p><blockquote><p>这是一个块引用。</p></blockquote></section><section><h2>图像和多媒体</h2><img src="image.jpg" alt="图片"><audio controls><source src="audio.mp3" type="audio/mpeg">您的浏览器不支持 audio 标签。</audio><video width="320" height="240" controls><source src="video.mp4" type="video/mp4">您的浏览器不支持 video 标签。</video></section><section><h2>表格</h2><table><caption>表格标题</caption><thead><tr><th>姓名</th><th>年龄</th></tr></thead><tbody><tr><td>张三</td><td>20</td></tr><tr><td>李四</td><td>25</td></tr></tbody></table></section><section><h2>表单</h2><form action="/submit" method="post"><label for="name">姓名：</label><input type="text" id="name" name="name" required><label for="email">邮箱：</label><input type="email" id="email" name="email" required><label for="age">年龄：</label><input type="number" id="age" name="age" min="1" max="120"><label for="birthday">生日：</label><input type="date" id="birthday" name="birthday"><label for="color">喜欢的颜色：</label><input type="color" id="color" name="color"><input type="submit" value="提交"></form></section></main><footer><p>版权所有 &copy; 2023</p></footer><button onclick="sayHello()">点击我</button></body>
</html>

四、代码解析

  1. 文档结构:

    • <!DOCTYPE html> 声明文档类型为 HTML5。
    • <html> 元素是文档的根元素。
    • <head> 元素包含文档的元数据，例如标题、样式表、脚本等。
    • <body> 元素包含文档的主体内容。

  2. 文档元数据:

    • <title> 元素定义文档的标题。
    • <meta> 元素定义文档的字符编码和描述。
    • <link> 元素链接外部样式表。
    • <style> 元素定义内部样式表。
    • <script> 元素定义脚本代码。

  3. 内容分区:

    • <header> 元素定义文档的页眉。
    • <nav> 元素定义导航链接。
    • <main> 元素定义文档的主要内容。
    • <section> 元素定义文档中的节。
    • <footer> 元素定义文档的页脚。

  4. 文本内容:

    • <h1> - <h6> 元素定义标题。
    • <p> 元素定义段落。
    • <blockquote> 元素定义块引用。

  5. 图像和多媒体:

    • <img> 元素定义图像。
    • <audio> 元素定义音频内容。
    • <video> 元素定义视频内容。

  6. 表格:

    • <table> 元素定义表格。
    • <caption> 元素定义表格标题。
    • <thead> 元素定义表格头部。
    • <tbody> 元素定义表格主体。
    • <tr> 元素定义表格行。
    • <th> 元素定义表格头单元格。
    • <td> 元素定义表格数据单元格。

  7. 表单:

    • <form> 元素定义表单。
    • <input> 元素定义输入控件。
    • <label> 元素定义输入控件的标签。
    • <button> 元素定义按钮。

  8. 脚本:

    • <script> 元素定义脚本代码。
    • onclick 事件属性定义按钮点击事件。

五、总结

HTML5 元素是构成网页的基本单位，每个元素都有特定的语义和功能。通过学习 HTML5 元素的语法和用法，你可以创建结构清晰、语义明确的网页。

相关文章：

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

HTML5 元素语法知识点及案例代码 一、HTML5 元素概述 HTML5 元素是构成网页的基本单位&#xff0c;每个元素都有特定的语义和功能。HTML5 元素由开始标签、内容和结束标签组成&#xff0c;例如&#xff1a; <p>这是一个段落。</p><p> 是开始标签这是一个段…...

编程日记 2025/6/22 10:03:52

【python】协程（coroutine）

协程&#xff08;coroutine&#xff09;可以理解为一个可以中途暂停保存当前执行状态信息并可以从此处恢复执行的函数&#xff0c;多个协程共用一个线程执行&#xff0c;适合执行需要“等待”的任务。 所以严格意义上&#xff0c;多个协程同一时刻也只有一个在真正的执行&#…...

编程日记 2026/4/6 7:21:37

【编译器】-LLVMIR

概述 LLVM 是一种基于静态单赋值 (SSA) 的表示形式&#xff0c;提供类型安全、低级操作、灵活性以及干净地表示“所有”高级语言的能力。 LLVM IR 是一门低级语言&#xff0c;语法类似于汇编任何高级编程语言&#xff08;如C&#xff09;都可以用LLVM IR表示基于LLVM IR可以很…...

编程日记 2026/4/5 20:26:09

java面试场景问题

还在补充&#xff0c;这几天工作忙&#xff0c;闲了会把答案附上去&#xff0c;也欢迎各位大佬评论区讨论 1.不用分布式锁如何防重复提交 方法 1&#xff1a;基于唯一请求 ID&#xff08;幂等 Token&#xff09; 思路&#xff1a;前端生成 一个唯一的 requestId&#xff08;…...

编程日记 2026/4/6 15:12:43

算法菜鸡备战3月2日传智杯省赛----0221

2209. 用地毯覆盖后的最少白色砖块 - 力扣&#xff08;LeetCode&#xff09; 力扣每日一题 class Solution { public:// 白色最少 黑色最多int minimumWhiteTiles(string floor, int numCarpets, int carpetLen) {int n floor.size();// 记忆化搜索vector memo(n 1, vector&…...

编程日记 2026/2/15 15:11:12

python pandas下载

pandas pandas:就是一个可以处理数据的 python 库 核心功能&#xff1a; 数据的清洗&#xff1a;处理丢失值&#xff0c;重复值数据分析&#xff1a;计算和统计信息&#xff0c;或分组汇总数据可视化&#xff1a;结合 图标库&#xff08;Matplotlib&#xff09;完成数据可视化…...

编程日记 2026/4/6 23:49:04

高斯牛顿法(GN)与列文伯格-马夸尔特方法在ORB-SLAM3中的应用

问题背景 高斯牛顿法&#xff08;Gauss-Newton, GN&#xff09;和列文伯格-马夸尔特方法&#xff08;Levenburg-Marquadt, LM&#xff09;是两种最常用的非线性优化方法&#xff0c;这两种方法在ORB-SLAM3系统中均有使用。 在ORB-SLAM3前端跟踪线程(Tracking)中&#xff0c;局…...

编程日记 2026/2/24 3:23:24

Python+Selenium+Pytest+POM自动化测试框架封装

&#x1f345; 点击文末小卡片 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 1、测试框架简介 1&#xff09;测试框架的优点 代码复用率高&#xff0c;如果不使用框架的话&#xff0c;代码会显得很冗余。可以组装日志、报告、邮件等一些高…...

编程日记 2026/4/10 22:30:53

猿大师中间件：网页直接内嵌本机EXE、OCX控件、ActiveX控件或桌面应用程序神器

猿大师中间件自从2019年发布以来&#xff0c;迄今为止不断迭代升级&#xff0c;给第三方提供了将自己的桌面程序和OCX控件支持直接内嵌到浏览器网页运行的赋能SDK开发包。 目前针对不同需求发布了三个成熟且商用的产品&#xff1a; 猿大师播放器&#xff1a;浏览器中直接原生…...

编程日记 2026/4/6 9:14:29

【Python】03-Python语法入门

文章目录 1、基本概念1.1、表达式1.2、语句1.3、程序&#xff08;program&#xff09;1.4、函数&#xff08;function&#xff09; 2、基本语法3、字面量与变量4、变量与标识符 1、基本概念 1.1、表达式 表达式就是一个类似于数学公式的东西&#xff0c;表达式一般仅用来计算一…...

编程日记 2025/9/2 18:45:46

C++，设计模式，【工厂方法模式】

文章目录 如何用汽车生产线理解工厂方法模式？一、传统生产方式的困境二、工厂方法模式解决方案三、模式应用场景四、模式优势分析五、现实应用启示✅C++，设计模式，【目录篇】 如何用汽车生产线理解工厂方法模式？ 某个早晨，某车企CEO看着会议室里堆积如面的新车订单皱起眉…...

编程日记 2026/4/5 16:44:00

跟着 Lua 5.1 官方参考文档学习 Lua (5)

文章目录 2.10 – Garbage Collection2.10.1 – Garbage-Collection Metamethods2.10.2 – Weak Tables 2.10 – Garbage Collection Lua performs automatic memory management. This means that you have to worry neither about allocating memory for new objects nor abo…...

编程日记 2026/4/4 13:37:43

9.PG数据库层权限管理（pg系列课程）第2遍

一、PostgreSQL数据库属主 Postgres中的数据库属主属于创建者&#xff0c;只要有createdb的权限就可以创建数据库&#xff0c;数据库属主不一定拥有存放在该数据库中其它用户创建的对象的访问权限。数据库在创建后&#xff0c;允许public角色连接&#xff0c;即允许任何人连接…...

编程日记 2025/11/10 1:30:06

鸿蒙-canvas-画时钟

文章目录 前言准备分析组成部分数值计算过程 开始第一步 画圆环第二步 画格子第三步 画数字第四、五步 画指针&定时更新最后一步 前言 你在 Android 上能画出来的东西&#xff0c;在鸿蒙上画不出来&#xff1f; 画个时钟嘛&#xff0c;有啥难的&#xff1f; 你行你上&…...

编程日记 2026/4/2 1:18:22

【AI实践】阿里百炼文本对话Agent安卓版搭建

环境&#xff1a;安卓手机运行环境&#xff1b;WinsurfAI编程工具&#xff1b;阿里百炼提前创建Agent应用&#xff1b; 耗时&#xff1a;2小时&#xff1b; 1&#xff0c;新建安卓项目 完成文本输入&#xff0c;并将输入的文字显示出来。 2&#xff0c;安装SDK 参考文档 安…...

编程日记 2026/4/6 18:36:40

算法很美笔记（Java）——动态规划

解重叠子问题&#xff08;当前解用到了以前求过的解&#xff09; 形式&#xff1a;记忆型递归或递推&#xff08;dp&#xff09; 动态规划本质是递推&#xff0c;核心是找到状态转移的方式&#xff0c;也就是填excel表时的逻辑&#xff08;填的方式&#xff09;&#xff0c;而…...

编程日记 2026/4/6 7:41:18

Jest单元测试

由于格式和图片解析问题&#xff0c;可前往 阅读原文 前端自动化测试在提高代码质量、减少错误、提高团队协作和加速交付流程方面发挥着重要作用。它是现代软件开发中不可或缺的一部分&#xff0c;可以帮助开发团队构建可靠、高质量的应用程序 单元测试&#xff08;Unit Testi…...

编程日记 2026/4/6 21:25:19

《Stable Diffusion绘画完全指南：从入门到精通的Prompt设计艺术》-配套代码示例

第一章&#xff1a;模型加载与基础生成 1.1 基础模型加载 from diffusers import StableDiffusionPipeline import torch# 加载SD 1.5基础模型&#xff08;FP32精度&#xff09; pipe StableDiffusionPipeline.from_pretrained("runwayml/stable-diffusion-v1-5",…...

编程日记 2025/6/22 16:54:30

OnlyOffice：前端编辑器与后端API实现高效办公

OnlyOffice&#xff1a;前端编辑器与后端API实现高效办公 一、OnlyOffice概述二、前端编辑器&#xff1a;高效、灵活且易用1. 完善的编辑功能2. 实时协作支持3. 自动保存与版本管理4. 高度自定义的界面 三、后端API&#xff1a;管理文档、用户与权限1. 轻松集成与定制2. 实时协…...

编程日记 2026/4/6 14:39:48

springboot多实例部署时，@Scheduled注释的方法重复执行

问题&#xff1a;springboot多实例部署时&#xff0c;Scheduled注释的方法重复执行 在 Spring Boot 中要实现 Redis 的SET NX EX命令&#xff0c;可以借助 Spring Data Redis 来完成。SET NX EX命令用于在键不存在时设置键值对&#xff0c;并同时设置过期时间。 <dependen…...

编程日记 2026/3/1 2:46:40

coco格式

COCO&#xff08;Common Objects in Context&#xff09;格式是一种广泛用于图像识别和分割任务的数据格式&#xff0c;尤其是在目标检测、语义分割等任务中。COCO格式的核心包括以下几个部分&#xff1a; images: 包含图像的基本信息&#xff08;如文件名、大小、ID等&#x…...

编程日记 2025/10/19 7:34:42

骶骨神经

骶骨肿瘤手术后遗症是什么_39健康网_癌症 [健康之路]匠心仁术&#xff08;七&#xff09; 勇闯禁区 骶骨肿瘤切除术...

编程日记 2026/4/9 21:27:08

Nacos学习(二)——继承Feign与Config中心

目录 一、集成Feign (一)基础用法 1.添加openfeign依赖 2. 开启openFeign注解扫描 3.创建ProviderService接口 4.修改ConsumerController (二)OpenFeign日志配置 (三)参数传递 1.参数传递的问题 2.参数传递的方式 2.1URL路径传参 2.2URL上拼接参数 2.3body传参 …...

编程日记 2026/4/1 1:45:38

计算机网络安全之一:网络安全概述

1.1 网络安全的内涵 随着计算机和网络技术的迅猛发展和广泛普及&#xff0c;越来越多的企业将经营的各种业务建立在Internet/Intranet环境中。于是&#xff0c;支持E-mail、文件共享、即时消息传送的消息和协作服务器成为当今商业社会中的极重要的IT基础设施。然而&#xff0…...

编程日记 2026/4/4 13:33:20

未来SLAM的研究方向和热点

SLAM&#xff08;Simultaneous Localization and Mapping&#xff09;是同时定位与地图构建的缩写&#xff0c;指的是机器人或设备在一个未知环境中一边进行自我定位&#xff0c;一边构建出环境的地图。SLAM广泛应用于机器人、自动驾驶、无人机等领域&#xff0c;涉及多个研究方…...

编程日记 2025/6/23 9:59:48

DuodooBMS源码解读之 purchase_change 模块

采购变更模块用户使用手册 一、模块概述 本扩展模块主要用于处理采购变更相关业务&#xff0c;包括采购变更单的创建、展示以及将采购变更信息导出为 Excel 文件等功能。以下将详细介绍该模块的具体使用方法。 二、模块功能及使用方法 &#xff08;一&#xff09;采购变更单…...

编程日记 2025/7/9 22:37:15

uniapp中引入Vant Weapp的保姆级教学（包含错误处理）

废话不多说&#xff0c;直接上方法&#xff0c;网上的教学好多都是错误的 1.安装vant weapp 在Hbuilder的终端&#xff0c;输入以下代码 npm install vant/weapp -S --production 2.新建wxcomponents文件夹 在项目的跟目录新建一个“wxcomponents’文件夹&#xff0c;与app.…...

编程日记 2026/4/3 2:16:50

Effective C++ 读书笔记（十二）

条款三十四&#xff1a;区分接口继承和实现继承 public继承由两部分组成&#xff1a;函数接口继承和函数实现继承。这两者的差异很像函数声明和函数定义之间的差异。 作为类的设计者&#xff0c;我们有时希望派生类只继承成员函数的接口&#xff08;也就是函数声明&#xff0…...

编程日记 2025/11/29 18:53:02

【卡梅德生物】构建噬菌体文库与噬菌体展示文库构建服务新探索

在生命科学与生物技术快速发展的当下&#xff0c;抗体文库构建、构建噬菌体文库以及噬菌体展示文库构建服务在生物医药研发领域中占据着举足轻重的地位。它们不仅是基础研究的重要工具&#xff0c;更是推动抗体药物开发、疾病诊断技术进步的关键力量。 构建噬菌体文库是整个技…...

编程日记 2025/6/24 0:59:19

【JavaScript】《JavaScript高级程序设计 (第4版) 》笔记-Chapter19-表单脚本

十九、表单脚本 表单脚本 JavaScript 较早的一个用途是承担一部分服务器端表单处理的责任。虽然 Web 和 JavaScript 都已经发展了很多年&#xff0c;但 Web 表单的变化不是很大。由于不能直接使用表单解决问题&#xff0c;因此开发者不得不使用JavaScript 既做表单验证&#xf…...

编程日记 2025/8/15 8:50:18