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.mzph.cn/news/884476.shtml

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

相关文章

中国计算机学会推荐国际学术会议和期刊目录- 2022

官网只给了PDF文件&#xff0c;我转换成了excel文件&#xff0c;便于筛选和查找。 excel文件&#xff1a;GitHub

【算法赌场】区间合并

区间问题 区间问题的引入 数学上&#xff0c;用两个数字可以确定数轴上的一个区间&#xff0c;较小的数字叫做区间的左端点&#xff0c;也叫区间起点&#xff0c;较大的数字叫做区间的右端点&#xff0c;也叫区间终点。 在算法竞赛中&#xff0c;很多题目是以区间为单位去进行…

给定开始日期时间结束日期时间、间隔得到符合条件的序列pandas.timedelta_range()

【小白从小学Python、C、Java】 【考研初试复试毕业设计】 【Python基础AI数据分析】 给定开始日期时间 结束日期时间、间隔 得到符合条件的序列 pandas.timedelta_range() [太阳]选择题 以下代码执行后&#xff0c;delta中包含的时间差序列的个数是多少&#xff1f; import pa…

【AI工作流】FastGPT - 深入解析FastGPT工作流编排:从基础到高级应用的全面指南

文章目录 一、工作流编排概述二、FastGPT的节点类型1. 基础功能插件(1) 文本输出(2) 功能调用(3) 工具(4) 外部调用(5) 其他 2. 系统插件3. 团队插件 三、工作流中的流向结语 在当今快速发展的人工智能领域&#xff0c;工作流编排的能力已成为提升用户体验和应用效率的关键因素…

qt QAction详解

1、概述 QAction是Qt框架中的一个抽象类&#xff0c;用于表示用户界面中的一个动作&#xff08;action&#xff09;。这些动作可以绑定到菜单项、工具栏按钮或快捷键上&#xff0c;提供了一种灵活的方式来处理用户交互。QAction不仅包含了动作的名称、图标、提示信息等属性&am…

MRCTF2020:你传你ma呢

文件上传题先判断黑白名单过滤&#xff0c;先传个最简单的木马 这里上传不了php文件&#xff0c;猜测可能是对php文件进行了过滤&#xff0c;将文件改为任意后缀这里改为.abc 还是上传不成功&#xff0c;猜测可能对MIME也做了过滤&#xff0c;将Content-Type更改为image/jpeg再…

CSS中的优先级和优先权

层叠的规则:后出现的样式会覆盖前面设置的样式 p {color: red; } ​ p {color: blue; } 比如这段代码生效是颜色是blue. 若是不同选择器之间发生了样式冲突,则描述更为具体的那个选择器具有更高的优先级,比如id选择器 > 类选择器 > 标签选择器这低优先级是无法覆盖高优…

LeetCode (206单链表反转)

目录 题目描述: 代码: 第一种: 第二种: 第三种: 第四种: 第五种: 主函数: ListNode类: 题目描述: 给你单链表的头节点 head &#xff0c;请你反转链表&#xff0c;并返回反转后的链表。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5] 输出&#xff1a;[5,4,3…

【WPF】MatrixTransform类

【WPF】MatrixTransform类 主要特性使用场景示例 在WPF&#xff08;Windows Presentation Foundation&#xff09;中&#xff0c;MatrixTransform 类是用于表示一个仿射变换的类&#xff0c;它允许开发者通过一个矩阵来定义一个二维空间中的线性变换。这种变换可以包括平移&…

C# Modbus RTU通讯回顾

涉及技术&#xff1a; 1.使用NMdbus4 库 2.ushort[]转int 记得之前刚学习的时候&#xff0c;是ushort[] → Hex字符串→byte[] → 翻转byte[] →BitConverter.ToInt32()&#xff0c;饶了一大圈&#xff1b;实际上可以直接转&#xff1b;这里也有小细节&#xff1a;使用BitCo…

vue2中的v-bind相当于原生js的什么

在 Vue 2 中&#xff0c;v-bind 是一个指令&#xff0c;用于动态地将一个或多个属性绑定到 DOM 元素上。它相当于在原生 JavaScript 中直接操作 DOM 元素属性的方法。 v-bind 的基本用法 在 Vue 中&#xff0c;v-bind 可以这样使用&#xff1a; <!-- 绑定一个属性 -->…

RHCE6

一、DNS域名解析服务器 DNS &#xff08; Domain Name System &#xff09;是互联网上的一项服务&#xff0c;它作为将域名和 IP 地址相互映射的一个分布式数据库&#xff0c;能够使人更方便的访问互联网。DNS 系统使用的是网络的查询&#xff0c;那么自然需要有监听的 port 。…

python 读取文件的内容

在Python中&#xff0c;读取文件内容是一个基础且常见的操作。以下是一些常用的方法来读取文件内容&#xff1a; 使用内建的open()函数和read()方法 # 打开文件 with open(example.txt, r) as file:# 读取文件内容content file.read() # 打印文件内容 print(content)这里使用…

uni-app 下拉刷新、 上拉触底(列表信息)、 上滑加载(短视频) 一键搞定

一、下拉刷新 1. 首先找到pages.json中 给需要进行下拉刷新的页面设置可以下拉刷新 2. 然后在需要实现下拉刷新的script标签内添加 导入onPullDownRefresh import {onPullDownRefresh} from dcloudio/uni-app 下拉刷新触发的事件 onPullDownRefresh(()> {console.log(正…

Java 中 HashMap集合使用

目录 一. HashMap概述 二. HashMap特点 三. HashMap构造方法 四. HashMap的常用方法 五. 使用注意事项 六. 代码示例 一. HashMap概述 HashMap 是 Java 中的一个非常重要的类&#xff0c;它实现了 Map 接口&#xff0c;用于存储键值对&#xff08;key-value pairs&#…

【架构艺术】服务架构稳定性的基础保障

一个产品随着不断研发&#xff0c;其服务架构的复杂度会越来越高。随着产品的用户体量变大&#xff0c;为了保证产品能够长线运营&#xff0c;就需要保证整个服务架构的稳定性。因此&#xff0c;今天这篇文章&#xff0c;就从实操的角度&#xff0c;粗浅讨论一下&#xff0c;服…

QML旋转选择器组件Tumbler

1. 介绍 Tumbler是一个用于创建旋转选择器的组件。它提供了一种直观的方式来让用户从一组选项中进行选择&#xff0c;类似于转盘式数字密码锁。网上找的类似网图如下&#xff1a; 在QML里&#xff0c;这种组件一共有两个版本&#xff0c;分别在QtQuick.Extras 1.4(旧)和QtQuic…

【Python】-蚂蚁森林问答题-查看当天的答案

http://www.xuexili.com/mayizhuangyuan/jinridaan.htmlimport requests from lxml import etree import time import re url ‘https://www.app178.com/dujia/248082.html’ resp requests.get(url) resp.encoding ‘utf-8’ html etree.HTML(resp.text.encode(‘gbk’).…

20.网工入门篇--------介绍下IPV6基础知识

地址表示形式&#xff1a; 完整格式&#xff1a;IPv6 地址总长度为 128 位&#xff0c;通常分为 8 组&#xff0c;每组为 4 个十六进制数的形式&#xff0c;每组十六进制数间用冒号分隔。例如&#xff1a;2001:0db8:85a3:0000:0000:8a2e:0370:7334。压缩格式&#xff1a;为了书…

车载无人机用来做什么?车载无人机技术详解

车载无人机是将车和无人机组合到一起的产品&#xff0c;它有效地结合了无人机的灵活性和指挥车的远距离移动性&#xff0c;大大扩展了无人机的使用范围。以下是对车载无人机技术的详细解析&#xff1a; 一、车载无人机的应用 1. 应急现场指挥&#xff1a; 车载无人机可迅速抵…