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

news2024/11/26 16:56:27

文章目录

      • 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.coloradmin.cn/o/2232013.html

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

相关文章

跳表原理笔记

课程地址 跳表是一种基于随机化的有序数据结构&#xff0c;它提出是为了赋予有序单链表以 O(logn) 的快速查找和插入的能力 创建 首先在头部创建一个 sentinel 节点&#xff0c;然后在 L1 层采用“抛硬币”的方式来决定 L0 层的指针是否增长到 L1 层 例如上图中&#xff0c;L…

Vision - 开源视觉分割算法框架 Grounded SAM2 配置与推理 教程 (1)

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/143388189 免责声明&#xff1a;本文来源于个人知识与公开资料&#xff0c;仅用于学术交流&#xff0c;欢迎讨论&#xff0c;不支持转载。 Ground…

3674矢量网络分析仪-003噪声系数测量选件

3674X-003 噪声系数测量选件 3674系列矢量网络分析仪 综述 3674X-003噪声系数测量一次连接&#xff0c;可同时测试S参数、噪声系数、噪声参数、增益压缩和变频增益等多种参数。基于冷源噪声系数测试方法&#xff0c;可进行精确的噪声系数和噪声参数测试。 •特点 • 3674X…

DDRPHY数字IC后端设计实现系列专题之后端设计导入,IO Ring设计

本章详细分析和论述了 LPDDR3 物理层接口模块的布图和布局规划的设计和实 现过程&#xff0c;包括设计环境的建立&#xff0c;布图规划包括模块尺寸的确定&#xff0c;IO 单元、宏单元以及 特殊单元的摆放。由于布图规划中的电源规划环节较为重要&#xff0c; 影响芯片的布线资…

如何将MySQL彻底卸载干净

目录 背景&#xff1a; MySQL的卸载 步骤1&#xff1a;停止MySQL服务 步骤2&#xff1a;软件的卸载 步骤3&#xff1a;残余文件的清理 步骤4&#xff1a;清理注册表 步骤五:删除环境变量配置 总结&#xff1a; 背景&#xff1a; MySQL卸载不彻底往往会导致重新安装失败…

Vue生成名片二维码带logo并支持下载

一、需求 生成一张名片&#xff0c;名片上有用户信息以及二维码&#xff0c;名片支持下载功能&#xff08;背景样式可更换&#xff0c;忽略本文章样图样式&#xff09;。 二、参考文章 这不是我自己找官网自己摸索出来的&#xff0c;是借鉴各位前辈的&#xff0c;学以致用&am…

【AIGC】深入探索『后退一步』提示技巧:激发ChatGPT的智慧潜力

博客主页&#xff1a; [小ᶻZ࿆] 本文专栏: AIGC | ChatGPT 文章目录 &#x1f4af;前言&#x1f4af;“后退一步”技巧介绍技巧目的 &#x1f4af;“后退一步”原理“后退一步”提示技巧与COT和TOT的对比实验验证 &#x1f4af;如何应用“后退一步”策略强调抽象思考引导提…

Python | Leetcode Python题解之第520题检测大写字母

题目&#xff1a; 题解&#xff1a; class Solution:def detectCapitalUse(self, word: str) -> bool:# 若第 1 个字母为小写&#xff0c;则需额外判断第 2 个字母是否为小写if len(word) > 2 and word[0].islower() and word[1].isupper():return False# 无论第 1 个字…

【python ASR】win11-从0到1使用funasr实现本地离线音频转文本

文章目录 前言一、前提条件安装环境Python 安装安装依赖,使用工业预训练模型最后安装 - torch1. 安装前查看显卡支持的最高CUDA的版本&#xff0c;以便下载torch 对应的版本的安装包。torch 中的CUDA版本要低于显卡最高的CUDA版本。2. 前往网站下载[Pytorch](https://pytorch.o…

Java日志脱敏——基于logback MessageConverter实现

背景简介 日志脱敏 是常见的安全需求&#xff0c;最近公司也需要将这一块内容进行推进。看了一圈网上的案例&#xff0c;很少有既轻量又好用的轮子可以让我直接使用。我一直是反对过度设计的&#xff0c;而同样我认为轮子就应该是可以让人拿去直接用的。所以我准备分享两篇博客…

Java面试经典 150 题.P26. 删除有序数组中的重复项(003)

本题来自&#xff1a;力扣-面试经典 150 题 面试经典 150 题 - 学习计划 - 力扣&#xff08;LeetCode&#xff09;全球极客挚爱的技术成长平台https://leetcode.cn/studyplan/top-interview-150/ 题解&#xff1a; class Solution {public int removeDuplicates(int[] nums) …

Prometheus套装部署到K8S+Dashboard部署详解

1、添加helm源并更新 helm repo add prometheus-community https://prometheus-community.github.io/helm-charts helm repo update2、创建namespace kubectl create namespace monitoring 3、安装Prometheus监控套装 helm install prometheus prometheus-community/prome…

如何选择到印尼的海运代理

如何选择到印尼的海运代理 选择合适的海运代理的重要性 海运代理负责安排货物从发货地到目的地的整个运输过程&#xff0c;包括装运、清关、仓储等服务。一个可靠的海运代理能确保货物安全准时到达&#xff0c;并帮助企业节省时间和成本。 选择海运代理需考虑的主要因素 公司…

python常用的第三方库下载方法

方法一&#xff1a;打开pycharm-打开项目-点击左侧图标查看已下载的第三方库-没有下载搜索后点击install即可直接安装--安装成功后会显示在installed列表 方法二&#xff1a;打开dos窗口输入命令“pip install requests“后按回车键&#xff0c;看到successfully既安装成功&…

FFmpeg 4.3 音视频-多路H265监控录放C++开发八,使用SDLVSQT显示yuv文件 ,使用ffmpeg的AVFrame

一. AVFrame 核心回顾&#xff0c;uint8_t *data[AV_NUM_DATA_POINTERS] 和 int linesize[AV_NUM_DATA_POINTERS] AVFrame 存储的是解码后的数据&#xff0c;&#xff08;包括音频和视频&#xff09;例如&#xff1a;yuv数据&#xff0c;或者pcm数据&#xff0c;参考AVFrame结…

jenkins 构建报错 Cannot run program “sh”

原因 在 windows 操作系统 jenkins 自动化部署的时候, 由于自动化构建的命令是 shell 执行的,而默认windows 从 path 路径拿到的 shell 没有 sh.exe &#xff0c;因此报错。 解决方法 前提是已经安装过 git WINR 输入cmd 打开命令行, 然后输入where git 获取 git 的路径, …

基于Spring Boot的高校物品捐赠管理系统设计与实现,LW+源码+讲解

摘 要 传统办法管理信息首先需要花费的时间比较多&#xff0c;其次数据出错率比较高&#xff0c;而且对错误的数据进行更改也比较困难&#xff0c;最后&#xff0c;检索数据费事费力。因此&#xff0c;在计算机上安装高校物品捐赠管理系统软件来发挥其高效地信息处理的作用&a…

AndroidStudio通过Bundle进行数据传递

作者&#xff1a;CSDN-PleaSure乐事 欢迎大家阅读我的博客 希望大家喜欢 使用环境&#xff1a;AndroidStudio 目录 1.新建活动 2.修改页面布局 代码&#xff1a; 效果&#xff1a; 3.新建类ResultActivity并继承AppCompatActivity 4.新建布局文件activity_result.xml 代…

测试分层:减少对全链路回归依赖的探索!

引言&#xff1a;测试分层与全链路回归的挑战 在软件开发和测试过程中&#xff0c;全链路回归测试往往是一个复杂且耗费资源的环节&#xff0c;尤其在系统庞大且模块众多的场景下&#xff0c;全链路测试的集成难度显著提高。而“测试分层”作为一种结构化的测试方法&#xff0…

【python】OpenCV—findContours(4.5)

文章目录 1、功能描述2、原理分析3、代码实现4、效果展示5、完整代码6、参考 1、功能描述 输入图片&#xff0c;计算出图片中的目标到相机间的距离 2、原理分析 用最简单的三角形相似性 已知参数&#xff0c;物体的宽度 W W W&#xff0c;物体到相机的距离 D D D&#xff0…