html基本结构和常见元素

news2025/2/7 2:48:24

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）以及代码的可读性和可维护性上有本质的区别。语义元素通过明确的语义含义，帮助开发者、辅助工具和搜索引擎更好地理解页面结构和内容，从而实现更高效、更友好的用户体验。因此，建议在开发中优先使用语义元素，以提升网页的整体质量和用户体验。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2294059.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

upload labs靶场

upload labs靶场

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

手写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…
阅读更多...
论文阅读：Realistic Noise Synthesis with Diffusion Models

论文阅读：Realistic Noise Synthesis with Diffusion Models

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

JVM监控和管理工具

基础故障处理工具 jps jps(JVM Process Status Tool)&#xff1a;Java虚拟机进程状态工具 功能 1&#xff1a;列出正在运行的虚拟机进程 2&#xff1a;显示虚拟机执行主类(main()方法所在的类) 3&#xff1a;显示进程ID(PID&#xff0c;Process Identifier) 命令格式 jps […
阅读更多...
【TensorFlow】T1：实现mnist手写数字识别

【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…
阅读更多...
【ArcGIS_Python】使用arcpy脚本将shape数据转换为三维白膜数据

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

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

动静态库的学习

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

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

简介 Janus-Pro 是由 DeepSeek 开发的一款多模态理解与生成模型&#xff0c;是 Janus 模型的升级版。它能够同时处理文本和图像&#xff0c;既能理解图像内容&#xff0c;又能根据文本描述生成高质量图像。Janus-Pro 的核心目标是通过解耦视觉编码路径&#xff0c;解决多模态理…
阅读更多...
Python爬虫实战：一键采集电商数据，掌握市场动态！

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

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

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

Unity Unity 首次发布于 2005 年&#xff0c;属于 Unity Technologies Unity 使用的开发技术有&#xff1a;C# Unity 的适用平台&#xff1a;PC、主机、移动设备、VR / AR、Web 等 Unity 的适用领域&#xff1a;开发中等画质中小型项目 Unity 适合初学者或需要快速上手的开…
阅读更多...
理解 C 与 C++ 中的 const 常量与数组大小的关系

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

博客主页&#xff1a; [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: C语言 文章目录 &#x1f4af;前言&#x1f4af;数组大小的常量要求&#x1f4af;C 语言中的数组大小要求&#x1f4af;C 中的数组大小要求&#x1f4af;为什么 C 中 const 变量可以作为数组大小&#x1f4af;进一步的…
阅读更多...
孟加拉国_行政边界省市边界arcgis数据shp格式wgs84坐标

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

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

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

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

快速幂，错位排序笔记

​ 记一下刚学明白的快速幂和错位排序的原理和代码 快速幂 原理&#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; 指数为偶数时…
阅读更多...
机器人基础深度学习基础

机器人基础深度学习基础

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

Java语法进阶

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

《chatwise：DeepSeek的界面部署》

ChatWise&#xff1a;DeepSeek的界面部署 摘要 本文详细描述了DeepSeek公司针对其核心业务系统进行的界面部署工作。从需求分析到技术实现&#xff0c;再到测试与优化&#xff0c;全面阐述了整个部署过程中的关键步骤和解决方案。通过本文&#xff0c;读者可以深入了解DeepSee…
阅读更多...
单节锂电池外部供电自动切换的电路学习

单节锂电池外部供电自动切换的电路学习

文章目录 前言一、原理分析&#xff1a;①当VBUS处有外部电源输入时②当VBUS处无外部电源输入时 二、器件选择1、二极管2、MOS管3、其他 总结 前言 学习一种广泛应用的锂电池供电自动切换电路 电路存在外部电源时&#xff0c;优先使用外部电源供电&#xff0c;并为电池供电&…
阅读更多...
数据结构-堆和PriorityQueue

数据结构-堆和PriorityQueue

1.堆&#xff08;Heap&#xff09; 1.1堆的概念 堆是一种非常重要的数据结构&#xff0c;通常被实现为一种特殊的完全二叉树 如果有一个关键码的集合K{k0,k1,k2,...,kn-1}&#xff0c;把它所有的元素按照完全二叉树的顺序存储在一个一维数组中&#xff0c;如果满足ki<k2i…
阅读更多...
如何打造一个更友好的网站结构？

如何打造一个更友好的网站结构？

在SEO优化中&#xff0c;网站的结构往往被忽略&#xff0c;但它其实是决定谷歌爬虫抓取效率的关键因素之一。一个清晰、逻辑合理的网站结构&#xff0c;不仅能让用户更方便地找到他们需要的信息&#xff0c;还能提升搜索引擎的抓取效率 理想的网站结构应该像一棵树&#xff0c;…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023