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

html基本结构和常见元素

news 2025/11/9 7:26:49

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文档可分为文档头和文档体…...

编程日记 2025/2/6 21:16:20

JAVAweb学习日记（十） Mybatis入门操作

一、介绍 二、快速入门程序 三、入门-数据库连接池 四、入门-lombok工具包...

编程日记 2025/2/6 21:14:18

从Transformer到世界模型：AGI核心架构演进

文章目录 引言&#xff1a;架构革命推动AGI进化一、Transformer&#xff1a;重新定义序列建模1.1 注意力机制的革命性突破1.2 从NLP到跨模态演进1.3 规模扩展的黄金定律 二、通向世界模型的关键跃迁2.1 从语言模型到认知架构2.2 世界模型的核心特征2.3 混合架构的突破 三、构建…...

编程日记 2025/2/6 21:12:12

Rk3588芯片介绍（含数据手册）

芯片介绍&#xff1a;RK3588是一款低功耗&#xff0c;高性能的处理器&#xff0c;适用于基于arm的PC和边缘计算设备&#xff0c;个人移动互联网设备和其他数字多媒体应用&#xff0c;集成了四核Cortex-A76和四核Cortex-A55以及单独的NEON协处理器 视频处理方面&#xff1a;提供…...

编程日记 2025/2/6 21:07:08

java开发面试自我介绍模板_java面试自我介绍3篇

java 面试自我介绍 3 篇 java 面试自我介绍篇一&#xff1a; 我叫赵&#xff0c;我的同学更都喜欢称呼我的英文名字&#xff0c;叫&#xff0c;六月的 意思&#xff0c;是君的谐音。我来自安徽的市&#xff0c;在 21 年我以市全市第一名 的成绩考上了大学&#xff0c…...

编程日记 2025/2/6 21:06:07

w193基于Spring Boot的秒杀系统设计与实现

&#x1f64a;作者简介&#xff1a;多年一线开发工作经验&#xff0c;原创团队&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的网站项目。 代码可以查看文章末尾⬇️联系方式获取&#xff0c;记得注明来意哦~&#x1f339;赠送计算机毕业设计600个选题excel文…...

编程日记 2025/2/6 21:01:00

chrome浏览器chromedriver下载

chromedriver 下载地址 https://googlechromelabs.github.io/chrome-for-testing/ 上面的链接有和当前发布的chrome浏览器版本相近的chromedriver 实际使用感受 chrome浏览器会自动更新&#xff0c;可以去下载最新的chromedriver使用&#xff0c;自动化中使用新的chromedr…...

编程日记 2025/2/6 20:59:59

【HTML入门】Sublime Text 4与 Phpstorm

文章目录 前言一、环境基础1.Sublime Text 42.Phpstorm(1)安装(2)启动Phpstorm(3)“启动”码 二、HTML1.HTML简介(1)什么是HTML(2)HTML版本及历史(3)HTML基本结构 2.HTML简单语法(1)HTML标签语法(2)HTML常用标签(3)表格(4)特殊字符 总结 前言 在当今的软件开发领域&#xff0c…...

编程日记 2025/2/6 20:56:56

Python----Python高级（并发编程：进程Process，多进程，进程间通信，进程同步，进程池）

一、进程Process 拥有自己独立的堆和栈&#xff0c;既不共享堆&#xff0c;也不共享栈&#xff0c;进程由操作系统调度&#xff1b;进程切换需要的资源很最大&#xff0c;效率低。 对于操作系统来说&#xff0c;一个任务就是一个进程&#xff08;Process&#xff09;&#xff…...

编程日记 2025/2/6 20:54:51

汽车自动驾驶AI

汽车自动驾驶AI是当前汽车技术领域的前沿方向&#xff0c;以下是关于汽车自动驾驶AI的详细介绍&#xff1a; 技术原理 感知系统&#xff1a;自动驾驶汽车通过多种传感器&#xff08;如激光雷达、摄像头、雷达、超声波传感器等&#xff09;收集周围环境的信息。AI算法对这些传感…...

编程日记 2025/2/6 20:53:50

Linux之安装MySQL

1、查看系统当前版本是多少位的 getconf LONG_BIT2.去官网下载对应的MYSQL安装包 这里下载的是8版本的&#xff0c;位数对应之前的64位 官网地址&#xff1a;https://downloads.mysql.com/archives/community/ 3.上传压缩包 4.到对应目录下解压 tar -xvf mysql-8.0.26-lin…...

编程日记 2025/2/6 20:51:47

说说Redis的内存淘汰策略?

大家好&#xff0c;我是锋哥。今天分享关于【说说Redis的内存淘汰策略?】面试题。希望对大家有帮助&#xff1b; 说说Redis的内存淘汰策略? 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 Redis 提供了多种内存淘汰策略&#xff0c;用于在内存达到限制时决定如何…...

编程日记 2025/2/6 20:47:43

SQL范式与反范式_优化数据库性能

1. 引言 什么是SQL范式 SQL范式是指数据库设计中的一系列规则和标准，旨在减少数据冗余、提高数据完整性和一致性。常见的范式包括第一范式（1NF）、第二范式（2NF）、第三范式（3NF）和BCNF（Boyce-Codd范式）。 什么是SQL反范式 SQL反范式是指在满足范式要求的基础上，有…...

编程日记 2025/2/6 20:46:42

从BIO到NIO：Java IO的进化之路

引言 在 Java 编程的世界里&#xff0c;输入输出&#xff08;I/O&#xff09;操作是基石般的存在&#xff0c;从文件的读取写入&#xff0c;到网络通信的数据传输&#xff0c;I/O 操作贯穿于各种应用程序的核心。BIO&#xff08;Blocking I/O&#xff0c;阻塞式 I/O&#xff0…...

编程日记 2025/2/6 20:39:34

Mysql：数据库

Mysql 一、数据库概念&#xff1f;二、MySQL架构三、SQL语句分类四、数据库操作4.1 数据库创建4.2 数据库字符集和校验规则4.3 数据库修改4.4 数据库删除4.4 数据库备份和恢复其他 五、表操作5.1 创建表5.2 修改表5.3 删除表 六、表的增删改查6.1 Create(创建):数据新增1&#…...

编程日记 2025/2/6 20:37:32

深度学习系列--01.入门

一.深度学习概念 深度学习&#xff08;Deep Learning&#xff09;是机器学习的分支&#xff0c;是指使用多层的神经网络进行机器学习的一种手法抖音百科。它学习样本数据的内在规律和表示层次&#xff0c;最终目标是让机器能够像人一样具有分析学习能力&#xff0c;能够识别文字…...

编程日记 2025/2/6 20:35:25

【Elasticsearch】`auto_date_histogram`聚合功能详解

1.功能概述 auto_date_histogram是 Elasticsearch 提供的一种时间分桶聚合功能&#xff0c;它可以根据数据分布自动调整分桶的间隔&#xff0c;以生成指定数量的分桶。与传统的date_histogram不同&#xff0c;auto_date_histogram不需要用户手动指定时间间隔&#xff0c;而是根…...

编程日记 2025/2/6 20:32:20

php7.3安装php7.3-gmp扩展踩坑总结

环境&#xff1a; 容器里面为php7.3.3版本 服务器也为php7.3.3-14版本&#xff0c;但是因为业务量太大需要在服务器里面跑脚本 容器里面为 alpine 系统&#xff0c;安装各种扩展 服务器里面开发服为 ubuntu 16.04.7 LTS (Xenial Xerus) 系统 服务器线上为 ubuntu 20.04.6 LTS (…...

编程日记 2025/2/6 20:29:17

7. k8s二进制集群之Kube ApiServer部署

创建kube工作目录（仅在主节点上创建即可）同样在我们的部署主机上创建apiserver证书请求文件根据证书文件生成apiserver证书仅接着创建TLS所需要的TOKEN创建apiserver服务的配置文件（仅在主节点上创建即可）创建apiserver服务管理配置文件对所有master节点分发证书 & TOK…...

编程日记 2025/2/6 20:25:12

QT笔记——多语言翻译

文章目录 1、概要2、多语言切换2.1、结果展示2.2、创建项目2.2、绘制UI2.2、生成“.st”文件2.4、生成“.qm”文件2.5、工程demo 1、概要 借助QT自带的翻译功能&#xff0c;实现实际应用用进行 “多语言切换” 2、多语言切换 2.1、结果展示 多语言切换 2.2、创建项目 1、文件…...

编程日记 2025/2/6 20:22:09

接口测试中缓存处理策略

在接口测试中&#xff0c;缓存处理策略是一个关键环节&#xff0c;直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性&#xff0c;避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明&#xff1a; 一、缓存处理的核…...

编程新知 2025/11/7 16:59:31

云计算——弹性云计算器（ECS）

弹性云服务器&#xff1a;ECS 概述 云计算重构了ICT系统&#xff0c;云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台&#xff0c;包含如下主要概念。 ECS&#xff08;Elastic Cloud Server&#xff09;&#xff1a;即弹性云服务器&#xff0c;是云计算…...

编程新知 2025/8/16 21:50:27

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作&#xff0c;无需更改相机配置。但是&#xff0c;一…...

编程新知 2025/11/7 14:08:24

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎&#xff08;Physics Engine&#xff09; 物理引擎 是一种通过计算机模拟物理规律&#xff08;如力学、碰撞、重力、流体动力学等&#xff09;的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互&#xff0c;广泛应用于 游戏开发、动画制作、虚…...

编程新知 2025/11/7 19:49:42

反射获取方法和属性

Java反射获取方法 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许程序在运行时访问和操作类的内部属性和方法。通过反射&#xff0c;可以动态地创建对象、调用方法、改变属性值&#xff0c;这在很多Java框架中如Spring和Hiberna…...

编程新知 2025/11/9 2:57:17

c#开发AI模型对话

AI模型 前面已经介绍了一般AI模型本地部署&#xff0c;直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型&#xff0c;但是目前国内可能使用不多&#xff0c;至少实践例子很少看见。开发训练模型就不介绍了&am…...

编程新知 2025/11/8 10:11:29

MySQL中【正则表达式】用法

MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现&#xff08;两者等价&#xff09;&#xff0c;用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例&#xff1a; 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...

编程新知 2025/10/27 12:32:57

什么？连接服务器也能可视化显示界面？：基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录 什么是X11？环境准备实战步骤1️⃣ 服务器端配置（CentOS）2️⃣ 客户端配置（MobaXterm）3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

编程新知 2025/10/2 17:12:14

是否存在路径（FIFOBB算法）

题目描述 一个具有 n 个顶点e条边的无向图&#xff0c;该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序&#xff0c;确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数&#xff0c;分别表示n 和 e 的值&#xff08;1…...

编程新知 2025/10/1 6:09:21

使用Spring AI和MCP协议构建图片搜索服务

目录 使用Spring AI和MCP协议构建图片搜索服务 引言 技术栈概览 项目架构设计 架构图 服务端开发 1. 创建Spring Boot项目 2. 实现图片搜索工具 3. 配置传输模式 Stdio模式&#xff08;本地调用&#xff09; SSE模式&#xff08;远程调用&#xff09; 4. 注册工具提…...

编程新知 2025/11/7 15:40:03