html基本结构和常见元素

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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Markdown转换器中间件

Markdown转换器中间件

目录 需求 文本编码检测 Markdown→HTML 注意 实现 需求 Markdown是一种文本格式&#xff1b;不被浏览器支持&#xff1b;编写一个在服务器端把Markdown转换为HTML的中间件。我们开发的中间件是构建在ASP.NET Core内置的StaticFiles中间件之上&#xff0c;并且在它之前运…
阅读更多...
数据降维技术研究：Karhunen-Loève展开与快速傅里叶变换的理论基础及应用

数据降维技术研究：Karhunen-Loève展开与快速傅里叶变换的理论基础及应用

在现代科学计算和数据分析领域&#xff0c;数据降维与压缩技术对于处理高维数据具有重要意义。本文主要探讨两种基础而重要的数学工具&#xff1a;Karhunen-Love展开&#xff08;KLE&#xff09;和快速傅里叶变换&#xff08;FFT&#xff09;。通过分析这两种方法的理论基础和应…
阅读更多...
使用LightGlue进行图像配准并提取图像重叠区域

使用LightGlue进行图像配准并提取图像重叠区域

发表日期&#xff1a;2023年6月23日 项目地址&#xff1a;https://github.com/cvg/LightGlue https://github.com/cvg/glue-factory/ LightGlue是一个在精度上媲美Superglue&#xff0c;但在速度上比Superglue快一倍的模型。通过博主实测&#xff0c;LightGlue的配准效果比Su…
阅读更多...
小书包：让阅读更美的二次开发之作

小书包：让阅读更美的二次开发之作

小书包是在一款知名阅读软件的基础上进行二次开发的产品。在保留原有软件的基本功能和用户体验的同时&#xff0c;对其界面和视觉效果进行了精心美化&#xff0c;让阅读体验更加舒适和愉悦。 内置了171条书源&#xff0c;虽然数量不算多&#xff0c;但都是作者精挑细选出来的&a…
阅读更多...
期末数据库课程设计基于Java+MySQL+JDBC+JavaSwing实现的图书进销管理系统源代码+数据库

期末数据库课程设计基于Java+MySQL+JDBC+JavaSwing实现的图书进销管理系统源代码+数据库

期末数据库课程设计&#xff0c; 图书进销信息管理系统 直接将数据库文件导入就可以快速建表 效果图 系统登录弹窗 书库管理页 信息查询页 图书销售页 系统设置页 编码&#xff1a; GBK 开发环境 jdk12MySQL8.0 推荐用IDEA运行项目 补充 UI美化&#xff08;引用当前系统…
阅读更多...
DeepSeek最新图像模型Janus-Pro论文阅读

DeepSeek最新图像模型Janus-Pro论文阅读

目录 论文总结 摘要 1. 引言 2. 方法 2.1 架构 2.2 优化的训练策略 2.4 模型扩展 3. 实验 3.1 实施细节 3.2 评估设置 3.3 与最新技术的比较 3.4 定性结果 4. 结论 论文总结 Janus-Pro是DeepSeek最新开源的图像理解生成模型&#xff0c;Janus-Pro在多模态理解和文…
阅读更多...
深入解析“legit”的地道用法——从俚语到正式表达：Sam Altman用来形容DeepSeek: legit invigorating（真的令人振奋）

深入解析“legit”的地道用法——从俚语到正式表达：Sam Altman用来形容DeepSeek: legit invigorating（真的令人振奋）

深入解析“legit”的地道用法——从俚语到正式表达 一、引言 在社交媒体、科技圈甚至日常对话中&#xff0c;我们经常会看到或听到“legit”这个词。比如最近 Sam Altman 在 X&#xff08;原 Twitter&#xff09;上发的一条帖子中写道&#xff1a; we will obviously deliver …
阅读更多...
物联网领域的MQTT协议，优势和应用场景

物联网领域的MQTT协议，优势和应用场景

MQTT&#xff08;Message Queuing Telemetry Transport&#xff09;作为轻量级发布/订阅协议&#xff0c;凭借其低带宽消耗、低功耗与高扩展性&#xff0c;已成为物联网通信的事实标准。其核心优势包括&#xff1a;基于TCP/IP的异步通信机制、支持QoS&#xff08;服务质量&…
阅读更多...
【Hadoop】Hadoop的HDFS

【Hadoop】Hadoop的HDFS

这里写目录标题 HDFS概述HDFS产出背景及定义HDFS产生背景HDFS定义 HDFS优缺点HDFS优点HDFS缺点 HDFS组成架构HDFS文件块大小 HDFS的Shell操作常用命令实操准备工作上传下载HDFS直接操作 HDFS的API操作客户端环境准备HDFS的API案例实操HDFS文件上传HDFS文件下载HDFS文件更名和移…
阅读更多...
二、面向对象

二、面向对象

一、结构体类型 结构体类型是一种自定义类型&#xff0c;用于创建我们游戏或者实际业务中的自定义类型. 代码中变量有通用的&#xff0c;可以使用结构体&#xff0c;包裹起来。 1、成员变量 /// <summary> /// 英雄结构体 /// </summary> struct Hero {//成员p…
阅读更多...
基于机器学习的布伦特原油价格的分析与研究

基于机器学习的布伦特原油价格的分析与研究

项目&#xff1a;基于机器学习的布伦特原油价格的分析与研究 摘 要 布伦特原油期货及现货市场所构成的布伦特原油定价体系&#xff0c;最多时竟涵盖了世界原油交易量的80%&#xff0c;即使在纽约原油价格日益重要的今天&#xff0c;全球仍有约65%的原油交易量&#xff0c;是以…
阅读更多...
excel实用问题：提取文字当中的数字进行运算

excel实用问题：提取文字当中的数字进行运算

0、前言&#xff1a; 这里汇总在使用excel工作过程中遇到的问题&#xff0c;excel使用wps版本&#xff0c;小规模数据我们自己提取数据可行&#xff0c;大规模数据就有些难受了&#xff0c;因此就产生了如下处理办法。 需求&#xff1a;需要把所有文字当中的数字提取出来&…
阅读更多...
贝叶斯-概率

贝叶斯-概率

起点&#xff1a;玩猜硬币游戏中发现贝叶斯定理貌似有很强的预测功能&#xff0c;细看还真有那么回事&#xff0c;因此研究研究。当然&#xff0c;看起来学精后不止可用来猜硬币&#xff0c;也可猜其它玩艺。 贝叶斯统计的基础是贝叶斯定理&#xff0c;贝叶斯定理的基础是条件…
阅读更多...
信息安全专业2025最新毕业设计选题汇总：课题精选

信息安全专业2025最新毕业设计选题汇总：课题精选

目录 前言 毕设选题 开题指导建议 更多精选选题 选题帮助 最后 前言 大家好,这里是海浪学长毕设专题! 大四是整个大学期间最忙碌的时光&#xff0c;一边要忙着准备考研、考公、考教资或者实习为毕业后面临的升学就业做准备,一边要为毕业设计耗费大量精力。学长给大家整理…
阅读更多...
[LeetCode]day13 19.删除链表的倒数第n个结点

[LeetCode]day13 19.删除链表的倒数第n个结点

19. 删除链表的倒数第 N 个结点 - 力扣&#xff08;LeetCode&#xff09; 题目描述 给你一个链表&#xff0c;删除链表的倒数第 n 个结点&#xff0c;并且返回链表的头结点。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5], n 2 输出&#xff1a;[1,2,3,5]示例 2&a…
阅读更多...
2024年终总结来了

2024年终总结来了

忘记发CSDN的年度总结了&#xff0c;今天补上吧 说实话&#xff0c;今年过得不是特别好&#xff0c;感觉遇到了瓶颈&#xff0c;人生变得迷茫起来。不知道大家有没有同样的感受 刚毕业的时候人生充满了憧憬&#xff0c;慢慢的随着年龄变大后&#xff0c;就会觉得一事无成&…
阅读更多...
Haproxy+keepalived高可用集群，haproxy宕机的解决方案

Haproxy+keepalived高可用集群，haproxy宕机的解决方案

Haproxykeepalived高可用集群&#xff0c;允许keepalived宕机&#xff0c;允许后端真实服务器宕机&#xff0c;但是不允许haproxy宕机&#xff0c; 所以下面就是解决方案 keepalived配置高可用检测脚本 &#xff0c;master和backup都要添加 配置脚本 # vim /etc/keepalived…
阅读更多...
树莓派pico入坑笔记，故障解决：请求 USB 设备描述符失败，故障码（43）

树莓派pico入坑笔记，故障解决：请求 USB 设备描述符失败，故障码（43）

今天心血来潮&#xff0c;拿出吃灰的pico把玩一下&#xff0c;打开thonny&#xff0c;上电&#xff0c;然后...... 上电识别不到端口&#xff0c;windows报错&#xff0c;请求 USB 设备描述符失败&#xff0c;故障码&#xff08;43&#xff09; 一开始以为是坏了&#xff08;磕…
阅读更多...
从Transformer到世界模型：AGI核心架构演进

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

文章目录 引言：架构革命推动AGI进化一、Transformer：重新定义序列建模1.1 注意力机制的革命性突破1.2 从NLP到跨模态演进1.3 规模扩展的黄金定律二、通向世界模型的关键跃迁2.1 从语言模型到认知架构2.2 世界模型的核心特征2.3 混合架构的突破三、构建世界模型的技术路径3.1 …
阅读更多...
2025年01月25日Github流行趋势

2025年01月25日Github流行趋势

项目名称&#xff1a;it-tools 项目地址url&#xff1a;https://github.com/CorentinTh/it-tools项目语言&#xff1a;Vue历史star数&#xff1a;25298今日star数&#xff1a;212项目维护者&#xff1a;CorentinTh, apps/renovate, cgoIT, sharevb, marvin-j97项目简介&#xf…
阅读更多...
最新文章

Copyright @ 2022~2023