HTML 基础标签——结构化标签<html>、<head>、<body>

文章目录

      • 1. `<html>` 标签
      • 2. `<head>` 标签
      • 3. `<body>` 标签
      • 4. `<div>` 标签
      • 5. `<span>` 标签
      • 小结

image.png

在 HTML 文档中,使用特定的结构标签可以有效地组织和管理网页内容。这些标签不仅有助于浏览器正确解析和渲染页面,还能提高网页的可访问性和搜索引擎优化(SEO)。以下是几个重要的 HTML 文档结构标签的详细介绍,包括它们的作用、常见用法和最佳实践。

在之前的文章中,我们有提到过 <html> 标签 以及<head> 标签、<body> 标签,他们是 HTML 的基本结构元素,同时也属于文档结构标签。在本文中除了这几个标签之外,还主要讲了两个重要的标签: <div><span> ,这些标签共同构成了一个完整的 HTML 文档的框架,确保网页的正确渲染和结构化。

1. <html> 标签

<html> 标签是整个 HTML 文档的根元素。它标识着文档的开始和结束,所有其他 HTML 标签都放置在 <html> 标签内。此标签通常包含 lang 属性,用于指明文档的主要语言,这对搜索引擎和辅助技术(如屏幕阅读器)非常重要。

<!DOCTYPE html>
<html lang="zh">

在这个示例中,lang="zh" 指定文档的语言为中文,帮助搜索引擎和用户理解页面内容的语言环境。<!DOCTYPE html> 声明在 <html> 标签之前,用于告知浏览器使用 HTML5 规范。

2. <head> 标签

<head> 标签用于包含文档的元数据,这些信息不会直接显示在浏览器页面中。元数据包括网页的标题、字符集、样式表链接、脚本以及其他与页面相关的配置信息。

  • 字符集声明:确保浏览器正确解析文档中的字符。

    <meta charset="UTF-8">
    
  • 标题:定义网页的标题,浏览器标签栏会显示该标题。

    <title>我的网页</title>
    
  • 样式链接:将外部 CSS 文件链接到文档中,以控制网页的样式。

    <link rel="stylesheet" href="styles.css">
    
  • 脚本:可以在头部引入 JavaScript 文件,尽管通常推荐将脚本放在 <body> 标签的底部以提高页面加载速度。

    <script src="script.js" defer></script>
    

3. <body> 标签

<body> 标签包含页面的可视内容,即用户在浏览器中可以看到的部分。所有的文本、图像、链接、表格等元素都应放在 <body> 标签内。

<body><h1>欢迎来到我的网页</h1><p>这是一个段落,包含一些示例文本。</p><img src="example.jpg" alt="示例图像">
</body>

在这个示例中,网页的主标题和段落文本都被包含在 <body> 标签内,浏览器会根据 <body> 中的内容进行渲染。

4. <div> 标签

<div> 标签是一个用于分块内容的容器元素,通常用于布局和分隔页面的不同部分。它属于块级元素,可以包含其他 HTML 元素。

  • 布局<div> 标签可以将页面分为不同的部分,以便于内容的组织和管理。它可以帮助开发者将相关内容分组,从而提高网页的结构清晰度。

  • 容器<div> 可以作为其他元素的容器,方便对一组元素进行整体管理。它通常用于定义网页的主要内容区域、侧边栏和页脚等。

<div><h2>部分标题</h2><p>这里是部分内容。</p>
</div>

在这个示例中,<div> 标签作为一个内容容器,用于包裹一个标题和段落,便于后续操作和管理。

5. <span> 标签

<span> 标签用于包裹小范围的内容或文本,是行内元素,常用于样式或脚本的应用。与 <div> 标签不同,<span> 不会创建新的块,而是将样式应用于文本的特定部分。

  • 文本分隔<span> 标签允许开发者在文本中进行局部操作,而不影响其他文本内容。它常用于需要单独处理的文本段落或单词。

  • 动态内容<span> 标签也可以用于在 JavaScript 中方便地访问和操作文本内容。

<p>这是一个 <span>高亮</span> 的文本。</p>

在这个示例中,<span> 标签用于将“高亮”文本包裹起来。这使得在将来需要处理这个特定文本时,可以方便地选择和操作。

小结

<div><span> 标签在 HTML 文档中扮演着重要角色。<div> 用于分隔和组织块级内容,适合将相关内容分组,而 <span> 则用于包裹小范围的文本,方便局部处理。理解和灵活使用这些标签,可以有效提高网页的结构化程度,为后续的前端开发打下良好的基础。

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

新华三H3CNE网络工程师认证—VLAN的配置

VLAN&#xff08;虚拟局域网&#xff09;是一种在逻辑上划分网络的技术&#xff0c;它可以将一个物理网络分割成多个虚拟网络&#xff0c;从而实现不同组的设备之间的隔离。在配置VLAN时&#xff0c;通常涉及到三种端口类型&#xff1a;Access、Trunk和Hybrid。Access端口用于连…

R语言*号标识显著性差异判断组间差异是否具有统计意义

前言 该R代码用于对Iris数据集进行多组比较分析&#xff0c;探讨不同鸢尾花品种在不同测量变量&#xff08;花萼和花瓣长度与宽度&#xff09;上的显著性差异。通过将数据转换为长格式&#xff0c;并利用ANOVA和Tukey检验&#xff0c;代码生成了不同品种间的显著性标记&#x…

手边酒店多商户版V2源码独立部署_博纳软云

新版采用laraveluniapp开发&#xff0c;为更多平台小程序开发提供坚实可靠的底层架构基础。后台UI全部重写&#xff0c;兼容手机端管理。 全新架构、会员卡、钟点房、商城、点餐、商户独立管理

Multi Agents协作机制设计及实践

01 多智能体协作机制的背景概述 在前述博客中&#xff0c;我们利用LangChain、AutoGen等开发框架构建了一个数据多智能体的平台&#xff0c;并使用了LangChain的Multi-Agents框架。然而&#xff0c;在实施过程中&#xff0c;我们发现现有的框架存在一些局限性&#xff0c;这些…

ReactPress—基于React的免费开源博客CMS内容管理系统

ReactPress Github项目地址&#xff1a;https://github.com/fecommunity/reactpress 欢迎提出宝贵的建议&#xff0c;感谢Star。 ![ReactPress](https://i-blog.csdnimg.cn/direct/0720f155edaa4eadba796f4d96d394d7.png#pic_center ReactPress 是使用React开发的开源发布平台&…

如何在一个 Docker 容器中运行多个进程 ?

在容器化的世界里&#xff0c;Docker 彻底改变了开发人员构建、发布和运行应用程序的方式。Docker 容器封装了运行应用程序所需的所有依赖项&#xff0c;使其易于跨不同环境一致地部署。然而&#xff0c;在单个 Docker 容器中管理多个进程可能具有挑战性&#xff0c;这就是 Sup…

【JavaEE初阶 — 多线程】线程安全问题 & synchronized

目录 1. 什么是线程安全问题 (1) 观察线程不安全 (2) 线程安全的概念 2. 造成线程安全的原因 (1)线程调度的随机性 问题描述 解决方案 (2)修改共享数据&#xff06;原子性问题 问题描述 解决方案 3.synchronized 关键字 1. synchronized 的特性 (1) …

产品经理的重要性

一直觉得产品经理很重要&#xff0c;这几年写了好几篇和产品经理相关的思考。2020年写过对产品经理的一些思考的文章&#xff0c;2021年&#xff0c;写了一篇对如何分析项目的思考&#xff0c;2024年写了如何与PM探讨项目。 今天还想再写一篇&#xff0c;主要是最近很有感慨。…

Hunyuan-Large:推动AI技术进步的下一代语言模型

腾讯近期推出了基于Transformer架构的混合专家&#xff08;MoE&#xff09;模型——Hunyuan-Large&#xff08;Hunyuan-MoE-A52B&#xff09;。该模型目前是业界开源的最大MoE模型之一&#xff0c;拥有3890亿总参数和520亿激活参数&#xff0c;展示了极强的计算能力和资源优化优…

【Linux系列】利用 CURL 发送 POST 请求

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

通义灵码实操—飞机大战游戏

通义灵码实操—飞机大战游戏 有没有想象过自己独立编写一个有趣的小游戏。在本实践课程中&#xff0c;你不仅可以实现这个想法&#xff0c;而且还将得到通义灵码智能编程助手的支持与指导。我们将携手步入编程的神奇世界&#xff0c;以一种简洁、高效且具有创造性的方式&#…

lora训练模型 打造个人IP

准备工作 下载秋叶炼丹器整理自己的照片下载底膜 https://rentry.org/lycoris-experiments 实操步骤 解压整合包 lora-scripts,先点击“更新” 训练图片收集 比如要训练一个自己头像的模型&#xff0c;就可以拍一些自己的照片&#xff08;20-50张&#xff0c;最少15张&…

Caffeine 手动策略缓存 put() 方法源码解析

BoundedLocalManualCache put() 方法源码解析 先看一下BoundedLocalManualCache的类图 com.github.benmanes.caffeine.cache.BoundedLocalCache中定义的BoundedLocalManualCache静态内部类。 static class BoundedLocalManualCache<K, V> implements LocalManualCache&…

Spring Boot框架下的教育导师匹配系统

第一章 绪论 1.1 选题背景 如今的信息时代&#xff0c;对信息的共享性&#xff0c;信息的流通性有着较高要求&#xff0c;尽管身边每时每刻都在产生大量信息&#xff0c;这些信息也都会在短时间内得到处理&#xff0c;并迅速传播。因为很多时候&#xff0c;管理层决策需要大量信…

Unity SRP学习笔记(二)

Unity SRP学习笔记&#xff08;二&#xff09; 主要参考&#xff1a; https://catlikecoding.com/unity/tutorials/custom-srp/ https://docs.unity.cn/cn/2022.3/ScriptReference/index.html 中文教程部分参考&#xff08;可选&#xff09;&#xff1a; https://tuncle.blog/c…

2024年10款超好用的企业防泄密软件|企业文件加密防泄密必备!

随着信息技术的迅速发展&#xff0c;企业面临的数据泄露风险越来越高。为了保护企业的敏感信息&#xff0c;防止数据泄露&#xff0c;企业防泄密软件应运而生。以下是2024年值得关注的10款企业防泄密软件&#xff0c;帮助企业有效保障数据安全。 1.安秉网盾 安秉网盾防泄密是一…

K8S flannel网络模式对比

K8S flannel网络模式对比 VXLAN 模式Host-GW 模式如何查看 Flannel 的网络模式?如何修改 Flannel 的网络模式?如何修改flannel vxlan端口?Flannel 是一个 Kubernetes 中常用的网络插件,用于在集群中的节点之间提供网络连接。Flannel 提供了多种后端实现方式,vxlan 和 host…

计算机网络:网络层 —— 移动 IP 技术

文章目录 IPv6IPv6 的诞生背景主要优势IPv6引进的主要变化 IPv6数据报的基本首部IPv6数据报首部与IPv4数据报首部的对比 IPv6数据报的拓展首部IPv6地址IPv6地址空间大小IPv6地址的表示方法 IPv6地址的分类从IPv4向IPv6过渡使用双协议栈使用隧道技术 网际控制报文协议 ICMPv6ICM…

大客户营销数字销售实战讲师培训讲师唐兴通专家人工智能大模型销售客户开发AI大数据挑战式销售顾问式销售专业销售向高层销售业绩增长创新

唐兴通 销售增长策略专家、数字销售实战导师 专注帮助企业构建面向AI数字时代新销售体系&#xff0c;擅长运用数字化工具重塑销售流程&#xff0c;提升销售业绩。作为《挑战式销售》译者&#xff0c;将全球顶尖销售理论大师马修狄克逊等理论导入中国销售业界。 核心专长&…

【dvwa靶场:XSS系列】XSS (Stored)低-中-高级别,通关啦

更改name的文本数量限制大小&#xff0c; 其他我们只在name中进行操作 【除了低级可以在message中进行操作】 一、低级low <script>alert("假客套")</script> 二、中级middle 过滤了小写&#xff0c;咱们可以大写 <Script>alert("假客套…