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

html基本结构和常见元素

article 2026/5/4 3:53:07

html5文档基本结构

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>文档标题</title>
</head>
<body>文档正文部分
</body>
</html>

html文档可分为文档头和文档体两部分，文档头包括网页语言、关键字、字符集的定义等信息，文档体当中的内容就是页面里面要显示的信息

html文档的基本结构由三对标签负责，这三对标签分别是<html>,<head>,<body>

 title的内容会显示在导航栏里

标签分为单标签与多标签

元素可分为三类：元信息元素、语义元素和无语义元素——元信息元素用来描述文档自身信息，meta元素定义元信息，其常用属性如下：

  • charset：定义文档的字符编码，常用UTF-8
  • content：定义name和http-equiv相关的元信息
  • name：关联content的名称（常用的有keywords关键字、author作者名、description页面描述）

其中，name的参数格式：

例子：

 <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content="这是一个关于HTML和前端开发的教程页面。"><meta name="keywords" content="HTML, CSS, JavaScript, 前端开发"><meta name="author" content="Kimi"><meta name="robots" content="index, follow"><title>前端开发教程</title><link rel="stylesheet" href="styles.css">
</head>
<body><h1>欢迎来到前端开发教程</h1><p>这里将介绍HTML、CSS和JavaScript的基础知识。</p>
</body>
</html>

语义元素又可分为块级元素、行内（内联）元素、行内块元素等等..

块级元素指的是本身属性为display：block的元素。通常用于：大结构布局的搭建。
特点：
1.独占一行
2.可以直接控制相关元素
3.在不设置宽度的情况下，其宽度为其父级宽度
4.在不设置高度的情况下，其高度为其本身的内容高度

行内元素也称内联元素，是指本身属性为display：inline元素行内元素可以与相邻的行内元素在同一行，对宽、高属性不生效，通常使用块级元素来进行文字、小图标（小结构）的搭建。
1.与其他内联元素从左到右在同一行显示
2.无法控制竖直的margin和padding

 3.行内元素的行高，由本身内容（文字、图片）的大小决定
4.不能在行内嵌套块级元素

常见的css有：
display：block—块级元素
display：inline—内联元素
display：inline-block—内联块元素，表现为同行显示并且可以修改宽、高、内外边距等属性

行内块元素：（就是内联块元素）

HTML5新增结构语义元素

HTML5引入了许多新的语义结构元素，这些元素的主要作用是为网页的结构提供更清晰、更明确的语义化标记。语义化标记不仅有助于开发者更好地理解代码结构，还能提升网页的可访问性、搜索引擎优化（SEO）以及维护性。以下是HTML5新增的一些主要语义结构元素及其用途：
1. <header>
•  用途：表示页面或文章的头部区域，通常包含网站的标志、导航栏、标题等内容。
•  示例：

<header><h1>网站标题</h1><nav><ul><li><a href="#">首页</a></li><li><a href="#">关于我们</a></li><li><a href="#">服务</a></li><li><a href="#">联系我们</a></li></ul></nav>
</header>

•  优点：明确标识页面的头部区域，便于屏幕阅读器识别，提升可访问性。
2. <nav>
•  用途：表示页面的导航链接部分，通常用于网站的菜单栏或导航栏。
•  示例：

<nav><ul><li><a href="#">首页</a></li><li><a href="#">产品</a></li><li><a href="#">支持</a></li><li><a href="#">联系我们</a></li></ul>
</nav>

•  优点：明确标识导航区域，便于搜索引擎识别导航结构，提升SEO效果。
3. <main>
•  用途：表示页面的主要内容区域，一个页面中只能有一个<main>元素。
•  示例：

<main><article><h2>文章标题</h2><p>文章内容...</p></article><aside><h3>相关文章</h3><ul><li><a href="#">相关文章1</a></li><li><a href="#">相关文章2</a></li></ul></aside>
</main>

•  优点：明确标识页面的核心内容，便于屏幕阅读器和搜索引擎识别主要内容区域。
4. <article>
•  用途：表示一个独立的、可独立分发的内容单元，如博客文章、新闻报道、论坛帖子等。
•  示例：

<article><header><h2>文章标题</h2><p>作者：张三</p></header><section><h3>引言</h3><p>文章引言部分...</p></section><section><h3>正文</h3><p>文章正文内容...</p></section>
</article>

•  优点：明确标识独立的内容单元，便于内容的复用和分发。
5. <section>
•  用途：表示文档中的一个独立的章节或逻辑部分，通常包含标题。
•  示例：

<section><h2>章节标题</h2><p>章节内容...</p>
</section>

•  优点：将内容划分为逻辑部分，便于结构化阅读和搜索引擎索引。
6. <aside>
•  用途：表示与页面主要内容相关的辅助信息，如侧边栏、广告、相关链接等。
•  示例：

<aside><h3>广告</h3><p>广告内容...</p>
</aside>

•  优点：明确标识辅助信息，便于区分主要内容和辅助内容。
7. <footer>
•  用途：表示页面或文章的底部区域，通常包含版权信息、联系方式、网站地图等。
•  示例：

<footer><p>&copy; 2025 版权所有</p><address><a href="mailto:example@example.com">联系我们</a></address>
</footer>

•  优点：明确标识页面的底部区域，便于屏幕阅读器识别。
8. <figure> 和 <figcaption>
•  用途：<figure>用于包含图像、图表、代码片段等独立内容，<figcaption>用于为<figure>提供标题或说明。
•  示例：

<figure><img src="image.jpg" alt="图片描述"><figcaption>图片标题</figcaption>
</figure>

•  优点：明确标识图像和其他媒体内容及其说明，便于语义化标记。
9. <details> 和 <summary>
•  用途：<details>用于创建可折叠的内容区域，<summary>用于提供折叠区域的标题。
•  示例：

<details><summary>点击展开</summary><p>这里是隐藏的内容。</p>
</details>

•  优点：提供交互式内容区域，增强用户体验。
总结
HTML5新增的语义结构元素的主要作用是：
1.  提高可读性和可维护性：通过语义化的标记，代码结构更清晰，便于开发者阅读和维护。
2.  提升可访问性：屏幕阅读器可以更好地理解页面结构，帮助视障用户更好地访问网页内容。
3.  优化搜索引擎排名（SEO）：搜索引擎可以更准确地识别页面的主要内容和结构，从而提高网页的搜索排名。
4.  增强用户体验：通过语义化的标记，可以更好地利用CSS和JavaScript实现更丰富的交互效果。
总之，语义结构元素是HTML5的重要进步，它们不仅让代码更加规范，还为网页的可访问性和SEO带来了显著的提升。

无语义元素

确实，无语义元素（如<div>和<span>）和语义元素都可以用来包裹内容，从功能上来说，它们都可以实现布局和展示内容的目的。然而，它们之间存在本质的区别，主要体现在语义化和可访问性上，而不仅仅是功能实现。
1. 功能实现的相似性
从功能上来说，无语义元素和语义元素都可以用来包裹内容，并且可以通过CSS和JavaScript进行样式和行为的控制。例如：
使用<div>（无语义元素）

<div><h1>标题</h1><p>这是一个段落。</p>
</div>

使用<section>（语义元素）

<section><h1>标题</h1><p>这是一个段落。</p>
</section>

在上面的两个例子中，<div>和<section>都可以包裹内容，并且可以通过CSS进行样式控制。从功能上来说，它们确实可以实现相同的效果。
2. 语义化的重要性
尽管功能上相似，但语义元素和无语义元素在语义化和可访问性上有本质的区别。
（1）语义化
•  语义元素：语义元素（如<header>、<nav>、<main>、<section>等）自带语义含义，能够明确表达其内容的性质和用途。例如：
•  <header>表示页面的头部区域。
•  <nav>表示导航链接部分。
•  <main>表示页面的主要内容区域。
•  <section>表示文档中的一个独立章节。
•  <article>表示一个独立的内容单元，如博客文章。
•  <aside>表示与主要内容相关的辅助信息。
•  <footer>表示页面的底部区域。
•  无语义元素：无语义元素（如<div>和<span>）本身没有语义含义，它们只是通用的容器，用于布局和样式控制。例如：
•  <div>是一个块级容器，用于包裹内容。
•  <span>是一个行内容器，用于对文本进行样式控制。
（2）可访问性
•  语义元素：语义元素能够被屏幕阅读器等辅助工具更好地理解，从而为视障用户和其他有特殊需求的用户提供更友好的体验。例如，屏幕阅读器可以识别<header>、<nav>、<main>等元素，帮助用户快速导航到页面的不同部分。
•  无语义元素：无语义元素（如<div>和<span>）本身没有语义含义，屏幕阅读器无法理解其内容的结构和层次，只能逐个元素读取内容。这会导致视障用户难以理解页面的结构和内容。
3. 搜索引擎优化（SEO）
•  语义元素：搜索引擎（如Google、Bing等）能够更好地理解页面的结构和内容，从而提高页面的搜索排名。例如，搜索引擎可以识别<header>、<main>、<footer>等元素，从而更准确地提取页面的主要内容和结构。
•  无语义元素：搜索引擎无法准确理解页面的结构和内容，可能导致搜索排名下降。
4. 代码的可读性和可维护性
•  语义元素：使用语义元素的代码结构更清晰，易于理解。开发者可以快速定位和修改代码，提高开发效率。例如：

<header><h1>网站标题</h1><nav><ul><li><a href="#">首页</a></li><li><a href="#">关于我们</a></li><li><a href="#">服务</a></li><li><a href="#">联系我们</a></li></ul></nav>
</header>
<main><article><header><h2>文章标题</h2><p>作者：张三</p></header><section><h3>引言</h3><p>文章引言部分...</p></section><section><h3>正文</h3><p>文章正文内容...</p></section></article><aside><h3>相关文章</h3><ul><li><a href="#">相关文章1</a></li><li><a href="#">相关文章2</a></li></ul></aside>
</main>
<footer><p>&copy; 2025 版权所有</p><address><a href="mailto:example@example.com">联系我们</a></address>
</footer>

这种方式更直观，易于理解和维护。
•  无语义元素：使用无语义元素的代码结构较为模糊，需要通过类名或ID来理解代码的结构和用途。例如：

<div class="header"><h1>网站标题</h1><div class="nav"><ul><li><a href="#">首页</a></li><li><a href="#">关于我们</a></li><li><a href="#">服务</a></li><li><a href="#">联系我们</a></li></ul></div>
</div>
<div class="main"><div class="article"><div class="header"><h2>文章标题</h2><p>作者：张三</p></div><div class="section"><h3>引言</h3><p>文章引言部分...</p></div><div class="section"><h3>正文</h3><p>文章正文内容...</p></div></div><div class="aside"><h3>相关文章</h3><ul><li><a href="#">相关文章1</a></li><li><a href="#">相关文章2</a></li></ul></div>
</div>
<div class="footer"><p>&copy; 2025 版权所有</p><div class="address"><a href="mailto:example@example.com">联系我们</a></div>
</div>

这种方式需要开发者查看类名来理解代码的结构，增加了理解和维护的难度。
总结
虽然无语义元素和语义元素都可以用来包裹内容并实现布局，但它们在语义化、可访问性、搜索引擎优化（SEO）以及代码的可读性和可维护性上有本质的区别。语义元素通过明确的语义含义，帮助开发者、辅助工具和搜索引擎更好地理解页面结构和内容，从而实现更高效、更友好的用户体验。因此，建议在开发中优先使用语义元素，以提升网页的整体质量和用户体验。

相关文章：

html基本结构和常见元素

html5文档基本结构 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><title>文档标题</title> </head> <body>文档正文部分 </body> </html> html文档可分为文档头和文档体…...

编程日记 2026/4/26 11:58:58

upload labs靶场

upload labs靶场 注意:本人关卡后面似乎相比正常的关卡少了一关&#xff0c;所以每次关卡名字都是1才可以和正常关卡在同一关 一.个人信息 个人名称&#xff1a;张嘉玮 二.解题情况 三.解题过程 题目&#xff1a;up load labs靶场 pass 1前后端 思路及解题&#xff1a;…...

编程日记 2026/4/26 11:58:38

自定义多功能输入对话框：基于 Qt 打造灵活交互界面

一、引言 在使用 Qt 进行应用程序开发时&#xff0c;我们经常需要与用户进行交互&#xff0c;获取他们输入的各种信息。QInputDialog 是 Qt 提供的一个便捷工具&#xff0c;可用于简单的输入场景&#xff0c;但当需求变得复杂&#xff0c;需要支持更多类型的输入控件&#xff0…...

编程日记 2026/4/11 9:46:56

手写MVVM框架-环境搭建

项目使用 webpack 进行进行构建&#xff0c;初始化步骤如下: 1.创建npm项目执行npm init 一直下一步就行 2.安装webpack、webpack-cli、webpack-dev-server&#xff0c;html-webpack-plugin npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin 3.配置webpac…...

编程日记 2026/5/3 3:48:13

论文阅读：Realistic Noise Synthesis with Diffusion Models

这篇文章是 2025 AAAI 的一篇工作&#xff0c;主要介绍的是用扩散模型实现对真实噪声的仿真模拟 Abstract 深度去噪模型需要大量来自现实世界的训练数据&#xff0c;而获取这些数据颇具挑战性。当前的噪声合成技术难以准确模拟复杂的噪声分布。我们提出一种新颖的逼真噪声合成…...

编程日记 2026/5/3 1:34:52

JVM监控和管理工具

基础故障处理工具 jps jps(JVM Process Status Tool)&#xff1a;Java虚拟机进程状态工具 功能 1&#xff1a;列出正在运行的虚拟机进程 2&#xff1a;显示虚拟机执行主类(main()方法所在的类) 3&#xff1a;显示进程ID(PID&#xff0c;Process Identifier) 命令格式 jps […...

编程日记 2026/4/26 11:59:41

【TensorFlow】T1：实现mnist手写数字识别

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 1、设置GPU import tensorflow as tf gpus tf.config.list_physical_devices("GPU")if gpus:gpu0 gpus[0]tf.config.experimental.set_memory_g…...

编程日记 2026/5/1 23:18:40

【ArcGIS_Python】使用arcpy脚本将shape数据转换为三维白膜数据

说明&#xff1a; 该专栏之前的文章中python脚本使用的是ArcMap10.6自带的arcpy&#xff08;好几年前的文章&#xff09;&#xff0c;从本篇开始使用的是ArcGIS Pro 3.3.2版本自带的arcpy&#xff0c;需要注意不同版本对应的arcpy函数是存在差异的 数据准备&#xff1a;准备一…...

编程日记 2026/4/27 11:02:58

动静态库的学习

动静态库中&#xff0c;不需要包含main函数 文件分为内存级(被打开的)文件和磁盘级文件 库 每个程序都要依赖很多基础的底层库&#xff0c;本质上来说库是一种可执行代码的二进制形式&#xff0c;可以被载入内存执行 静态库 linux .a windows .lib 动态库 linux .…...

编程日记 2026/4/28 17:00:23

Rapidjson 实战

Rapidjson 是一款 C 的 json 库. 支持处理 json 格式的文档. 其设计风格是头文件库, 包含头文件即可使用, 小巧轻便并且性能强悍. 本文结合样例来介绍 Rapidjson 一些常见的用法. 环境要求 有如何的几种方法可以将 Rapidjson 集成到您的项目中. Vcpkg安装: 使用 vcpkg instal…...

编程日记 2026/4/28 10:14:52

DeepSeek的多模态AI模型-Janus-pro,可生图，可读图

简介 Janus-Pro 是由 DeepSeek 开发的一款多模态理解与生成模型&#xff0c;是 Janus 模型的升级版。它能够同时处理文本和图像&#xff0c;既能理解图像内容&#xff0c;又能根据文本描述生成高质量图像。Janus-Pro 的核心目标是通过解耦视觉编码路径&#xff0c;解决多模态理…...

编程日记 2026/5/3 10:48:43

Python爬虫实战：一键采集电商数据，掌握市场动态！

电商数据分析是个香饽饽&#xff0c;可市面上的数据采集工具要不贵得吓人&#xff0c;要不就是各种广告弹窗。干脆自己动手写个爬虫&#xff0c;想抓啥抓啥&#xff0c;还能学点技术。今天咱聊聊怎么用Python写个简单的电商数据爬虫。 打好基础&#xff1a;搞定请求头 别看爬虫…...

编程日记 2026/4/30 21:56:36

最短木板长度

最短木板长度 真题目录: 点击去查看 E 卷 100分题型 题目描述 小明有 n 块木板&#xff0c;第 i ( 1 ≤ i ≤ n ) 块木板长度为 ai。 小明买了一块长度为 m 的木料&#xff0c;这块木料可以切割成任意块&#xff0c;拼接到已有的木板上&#xff0c;用来加长木板。 小明想让最…...

编程日记 2026/2/25 12:00:39

【人工智能】掌握图像风格迁移：使用Python实现艺术风格的自动化迁移

《Python OpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门！ 解锁Python编程的无限可能：《奇妙的Python》带你漫游代码世界 图像风格迁移（Image Style Transfer）是一种基于深度学习的计算机视觉技术，通过将一张图像的内容与另一张图像的艺术风格结合，生成一幅具…...

编程日记 2026/2/24 8:27:51

git submodules

当代码仓库中包含 .gitmodules 文件时&#xff0c;这意味着该仓库使用了 Git 子模块&#xff08;Git Submodules&#xff09;。.gitmodules 文件记录了子模块的相关信息&#xff0c;如子模块的仓库地址、路径等。若要在下载代码时一并同步子模块&#xff0c;可以按照以下几种常…...

编程日记 2026/4/30 7:27:42

7 与mint库对象互转宏（macros.rs）

macros.rs代码定义了一个Rust宏mint_vec&#xff0c;它用于在启用mint特性时&#xff0c;为特定的向量类型实现与mint库中对应类型的相互转换。mint库是一个提供基本数学类型&#xff08;如点、向量、矩阵等&#xff09;的Rust库&#xff0c;旨在与多个图形和数学库兼容。这个宏…...

编程日记 2026/4/17 3:04:25

游戏引擎 Unity - Unity 下载与安装

Unity Unity 首次发布于 2005 年&#xff0c;属于 Unity Technologies Unity 使用的开发技术有&#xff1a;C# Unity 的适用平台&#xff1a;PC、主机、移动设备、VR / AR、Web 等 Unity 的适用领域&#xff1a;开发中等画质中小型项目 Unity 适合初学者或需要快速上手的开…...

编程日记 2026/4/28 21:55:33

[openwrt]openwrt slaac only模式下部分终端无法获取到IPv6 DNS

问题描述 OpenWrt 中，如果启用了 RA 单播（ra_unicast），但部分终端无法获取到 DNS 信息 问题分析 RA 单播的局限性 并非所有终端都完全支持通过单播接收 RA 消息。部分终端可能无法正确解析单播 RA 中的 RDNSS（Recursive DNS Server）选项，从而导致无法获取 DNS 信息。终…...

编程日记 2026/3/19 3:17:39

Java 面试真题

本题适合一到三年 Java 开发 &#xff0c;以下问题都是按照原面试官提问记录 文章目录 我要进大厂系列面试题二面 我要进大厂系列面试题 全部真题&#xff0c;欢迎投稿你的面试经验。 本篇涉及基础较多&#xff0c;但要耐性看完。 JVM内存模型垃圾回收器用的哪个gc各个算法…...

编程日记 2026/4/14 2:34:02

验证工具：GVIM和VIM

一、定义与关系 gVim&#xff1a;gVim是Vim的图形界面版本&#xff0c;提供了更多的图形化功能&#xff0c;如菜单栏、工具栏和鼠标支持。它使得Vim的使用更加直观和方便&#xff0c;尤其对于不习惯命令行界面的用户来说。Vim&#xff1a;Vim是一个在命令行界面下运行的文本编…...

编程日记 2026/4/26 13:10:29

理解 C 与 C++ 中的 const 常量与数组大小的关系

博客主页&#xff1a; [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: C语言 文章目录 &#x1f4af;前言&#x1f4af;数组大小的常量要求&#x1f4af;C 语言中的数组大小要求&#x1f4af;C 中的数组大小要求&#x1f4af;为什么 C 中 const 变量可以作为数组大小&#x1f4af;进一步的…...

编程日记 2026/4/26 11:58:42

孟加拉国_行政边界省市边界arcgis数据shp格式wgs84坐标

这篇内容将深入探讨孟加拉国的行政边界省市边界数据&#xff0c;该数据是以arcgis的shp格式提供的&#xff0c;并采用WGS84坐标系统。ArcGIS是一款广泛应用于地理信息系统&#xff08;GIS&#xff09;的专业软件&#xff0c;它允许用户处理、分析和展示地理空间数据。在GIS领域…...

编程日记 2026/4/26 11:58:42

安心即美的生活方式

如果你的心是安定的&#xff0c;那么&#xff0c;外界也就安静了。就像陶渊明说的&#xff1a;心远地自偏。不是走到偏远无人的边荒才能得到片刻清净&#xff0c;不需要使用洪荒之力去挣脱生活的枷锁&#xff0c;这是陶渊明式的中国知识分子的雅量。如果你自己是好的男人或女人…...

编程日记 2026/5/3 7:49:53

APT (Advanced Package Tool) 安装与使用-linux014

APT (Advanced Package Tool) APT (Advanced Package Tool) 是一个用于管理 Debian 和 Ubuntu 系列 Linux 发行版上的软件包的工具。它简化了软件的安装、升级、配置和删除过程。APT 为用户提供了一个统一的命令行接口&#xff0c;使得管理和安装软件变得更加简单。 APT 主要…...

编程日记 2026/4/30 4:59:02

深度学习篇---深度学习中的超参数张量转换模型训练

文章目录 前言第一部分&#xff1a;深度学习中的超参数1. 学习率&#xff08;Learning Rate&#xff09;定义重要性常见设置 2. 批处理大小&#xff08;Batch Size&#xff09;定义重要性常见设置 3. 迭代次数&#xff08;Number of Epochs&#xff09;定义重要性常见设置 4. 优…...

编程日记 2025/8/19 13:24:06

Java设计模式：行为型模式→状态模式

Java 状态模式详解 1. 定义 状态模式&#xff08;State Pattern&#xff09;是一种行为型设计模式&#xff0c;它允许对象在内部状态改变时改变其行为。状态模式通过将状态需要的行为封装在不同的状态类中&#xff0c;实现对象行为的动态改变。该模式的核心思想是分离不同状态…...

编程日记 2026/4/26 11:58:52

快速幂，错位排序笔记

​ 记一下刚学明白的快速幂和错位排序的原理和代码 快速幂 原理&#xff1a; a^b (a^&#xff08;b/2&#xff09;) ^ 2&#xff08;b为偶数&#xff09; a^b a*&#xff08;a^&#xff08; (b-1)/2&#xff09;&#xff09;^2&#xff08;b为奇数&#xff09; 指数为偶数时…...

编程日记 2026/4/26 11:58:43

机器人基础深度学习基础

参考&#xff1a; &#xff08;1&#xff09;【具身抓取课程-1】机器人基础 &#xff08;2&#xff09;【具身抓取课程-2】深度学习基础 1 机器人基础 从平面二连杆理解机器人学 正运动学&#xff1a;从关节角度到末端执行器位置的一个映射 逆运动学&#xff1a;已知末端位置…...

编程日记 2026/4/25 21:56:48

Java语法进阶

目录&#xff1a; Object类、常用APICollection、泛型List、Set、数据结构、CollectionsMap与斗地主案例异常、线程线程、同步等待与唤醒案例、线程池、Lambda表达式File类、递归字节流、字符流缓冲流、转换流、序列化流、Files网络编程 十二、函数式接口Stream流、方法引用 一…...

编程日记 2026/5/1 14:43:52

探索 paraphrase-MiniLM-L6-v2 模型在自然语言处理中的应用

在自然语言处理&#xff08;NLP&#xff09;领域&#xff0c;将文本数据转换为机器学习模型可以处理的格式是至关重要的。近年来&#xff0c;sentence-transformers 库因其在文本嵌入方面的卓越表现而受到广泛关注。本文将深入探讨 paraphrase-MiniLM-L6-v2 模型&#xff0c;这…...

编程日记 2026/5/3 16:16:32