Html5学习教程，从入门到精通，HTML `＜div＞` 和 `＜span＞` 标签：语法知识点与案例代码（12）

HTML <div> 和 <span> 标签：语法知识点与案例代码

一、语法知识点

1. <div> 标签
  • 定义: <div> 是一个块级元素，用于将文档内容划分为独立的、可样式化的部分。它本身没有特定的语义，主要用于布局和分组。
  • 特点:
    • 块级元素，默认占据一整行。
    • 可以包含其他块级元素和行内元素。
    • 常用于创建页面的布局结构，例如头部、导航栏、内容区域、侧边栏、底部等。
  • 属性:
    • 通用属性: 例如 id, class, style, title 等。
    • 事件属性: 例如 onclick, onmouseover 等。
2. <span> 标签
  • 定义: <span> 是一个行内元素，用于对文档中的一部分文本进行分组和样式化。它本身没有特定的语义，主要用于对文本进行修饰。
  • 特点:
    • 行内元素，只占据内容所需的空间。
    • 只能包含其他行内元素。
    • 常用于对文本进行样式化，例如改变颜色、字体、背景等。
  • 属性:
    • 通用属性: 例如 id, class, style, title 等。
    • 事件属性: 例如 onclick, onmouseover 等。
3. <div> 和 <span> 的区别
特性<div><span>
元素类型块级元素行内元素
默认显示占据一整行只占据内容所需空间
包含内容可以包含其他块级元素和行内元素只能包含其他行内元素
主要用途布局和分组文本修饰

二、案例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>div 和 span 示例</title><style>/* 为 div 添加样式 */.container {width: 80%;margin: 0 auto;padding: 20px;border: 1px solid #ccc;}.header {background-color: #f0f0f0;padding: 10px;text-align: center;}.content {margin-top: 20px;}.footer {background-color: #f0f0f0;padding: 10px;text-align: center;margin-top: 20px;}/* 为 span 添加样式 */.highlight {color: red;font-weight: bold;}</style>
</head>
<body><!-- 使用 div 创建页面布局 --><div class="container"><div class="header"><h1>这是一个标题</h1></div><div class="content"><p>这是一个段落，其中包含一些 <span class="highlight">重要</span> 的文字。</p><p>这是另一个段落。</p></div><div class="footer"><p>版权所有 &copy; 2023</p></div></div></body>
</html>

三、代码解释

  1. <div class="container">: 创建一个容器，用于包裹整个页面内容，并设置宽度、边距、内边距和边框。
  2. <div class="header">: 创建页面的头部区域，设置背景颜色、内边距和文本居中。
  3. <div class="content">: 创建页面的内容区域，设置上边距。
  4. <div class="footer">: 创建页面的底部区域，设置背景颜色、内边距、文本居中以及上边距。
  5. <span class="highlight">: 对文本中的“重要”两个字进行样式化，设置红色和加粗效果。

四、总结

  • <div> 和 <span> 是 HTML 中常用的两个标签，用于对文档内容进行分组和样式化。
  • <div> 是块级元素，用于创建页面布局和分组。
  • <span> 是行内元素，用于对文本进行修饰。
  • 通过 CSS 可以进一步控制 <div> 和 <span> 的样式，实现更丰富的页面效果。

以下是几个实际开发中使用 <div> 和 <span> 的具体案例，涵盖了常见的应用场景。

案例 1：网页布局

场景描述：

在网页开发中，通常会将页面划分为多个区域，例如头部、导航栏、内容区域和底部。使用 <div> 可以轻松实现这种布局。

代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>网页布局示例</title><style>/* 全局样式 */body {font-family: Arial, sans-serif;margin: 0;padding: 0;}/* 头部样式 */.header {background-color: #4CAF50;color: white;padding: 15px;text-align: center;}/* 导航栏样式 */.navbar {background-color: #333;overflow: hidden;}.navbar a {float: left;display: block;color: white;text-align: center;padding: 14px 20px;text-decoration: none;}.navbar a:hover {background-color: #ddd;color: black;}/* 内容区域样式 */.content {padding: 20px;}/* 底部样式 */.footer {background-color: #333;color: white;text-align: center;padding: 10px;position: fixed;bottom: 0;width: 100%;}</style>
</head>
<body><!-- 头部 --><div class="header"><h1>我的网站</h1></div><!-- 导航栏 --><div class="navbar"><a href="#">首页</a><a href="#">关于我们</a><a href="#">服务</a><a href="#">联系我们</a></div><!-- 内容区域 --><div class="content"><h2>欢迎来到我的网站</h2><p>这是一个简单的网页布局示例。</p></div><!-- 底部 --><div class="footer"><p>版权所有 &copy; 2023 我的公司</p></div></body>
</html>

代码说明：

  • 使用 <div> 将页面划分为头部 (header)、导航栏 (navbar)、内容区域 (content) 和底部 (footer)。
  • 通过 CSS 设置每个区域的样式，例如背景颜色、内边距、文本对齐等。

案例 2：文本修饰

场景描述：

在网页中，有时需要对部分文本进行特殊样式化，例如高亮显示关键词或添加特殊效果。使用 <span> 可以轻松实现这种需求。

代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文本修饰示例</title><style>/* 高亮样式 */.highlight {background-color: yellow;font-weight: bold;}/* 特殊文本样式 */.special {color: red;text-decoration: underline;}</style>
</head>
<body><p>这是一个段落，其中包含一些 <span class="highlight">重要</span> 的文字。你可以使用 <span class="special">span</span> 标签对文本进行修饰。</p></body>
</html>

代码说明：

  • 使用 <span> 包裹需要修饰的文本，例如“重要”和“span”。
  • 通过 CSS 为 <span> 添加样式，例如背景颜色、字体加粗、颜色和下划线。

案例 3：按钮组

场景描述：

在网页中，通常会将多个按钮放在一起形成一个按钮组。使用 <div> 可以方便地对按钮进行分组和布局。

代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>按钮组示例</title><style>/* 按钮组样式 */.button-group {margin: 20px;}.button-group button {background-color: #4CAF50;color: white;padding: 10px 20px;border: none;cursor: pointer;margin-right: 10px;}.button-group button:hover {background-color: #45a049;}</style>
</head>
<body><!-- 按钮组 --><div class="button-group"><button>按钮 1</button><button>按钮 2</button><button>按钮 3</button></div></body>
</html>

代码说明：

  • 使用 <div> 包裹一组按钮，形成一个按钮组。
  • 通过 CSS 设置按钮的样式，例如背景颜色、内边距、鼠标悬停效果等。

案例 4：卡片布局

场景描述：

在网页中，卡片布局是一种常见的展示方式，通常用于展示产品、文章或用户信息。使用 <div> 可以轻松实现卡片布局。

代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>卡片布局示例</title><style>/* 卡片容器样式 */.card {width: 300px;border: 1px solid #ccc;border-radius: 10px;overflow: hidden;margin: 20px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);}/* 卡片图片样式 */.card img {width: 100%;height: auto;}/* 卡片内容样式 */.card-content {padding: 15px;}.card-content h3 {margin: 0 0 10px;}.card-content p {margin: 0;color: #555;}</style>
</head>
<body><!-- 卡片 1 --><div class="card"><img src="https://via.placeholder.com/300" alt="图片"><div class="card-content"><h3>卡片标题</h3><p>这是一个简单的卡片示例，用于展示内容。</p></div></div><!-- 卡片 2 --><div class="card"><img src="https://via.placeholder.com/300" alt="图片"><div class="card-content"><h3>另一个卡片</h3><p>这是另一个卡片的示例内容。</p></div></div></body>
</html>

代码说明：

  • 使用 <div> 创建卡片容器，并设置边框、圆角、阴影等样式。
  • 在卡片内部使用 <div> 划分图片区域和内容区域。
  • 通过 CSS 设置卡片的布局和样式。

案例 5：表单输入框组

场景描述：

在表单中，通常会将标签和输入框放在一起形成一个输入框组。使用 <div> 可以方便地对输入框进行分组和布局。

代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表单输入框组示例</title><style>/* 输入框组样式 */.input-group {margin-bottom: 15px;}.input-group label {display: block;margin-bottom: 5px;font-weight: bold;}.input-group input {width: 100%;padding: 8px;box-sizing: border-box;}</style>
</head>
<body><form><!-- 输入框组 1 --><div class="input-group"><label for="username">用户名：</label><input type="text" id="username" name="username"></div><!-- 输入框组 2 --><div class="input-group"><label for="password">密码：</label><input type="password" id="password" name="password"></div><button type="submit">提交</button></form></body>
</html>

代码说明：

  • 使用 <div> 包裹标签和输入框，形成一个输入框组。
  • 通过 CSS 设置标签和输入框的样式，例如宽度、内边距、字体加粗等。

总结

以上案例展示了 <div> 和 <span> 在实际开发中的常见应用场景：

  1. <div>：用于布局、分组和容器化，例如网页布局、卡片布局、按钮组、表单输入框组等。
  2. <span>：用于文本修饰，例如高亮显示、特殊样式等。

通过灵活使用 <div> 和 <span>，可以轻松实现各种网页布局和样式化需求。

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

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

相关文章

Hbase伪分布安装教程，详细版

Hbase伪分布安装教程，详细版

注意Hbase版本与Hadoop版本的兼容&#xff0c;还有与JDK版本的兼容 本次用到的Hbase为2.4.6版本&#xff0c;Hadoop为3.1.3版本&#xff0c;JDK为JDK8 打开下面的网址查看兼容问题 Apache HBase Reference Guidehttps://hbase.apache.org/book.html#configuration 点击基础先…
阅读更多...
Python项目】基于Python的图像去雾算法研究和系统实现

Python项目】基于Python的图像去雾算法研究和系统实现

Python项目】基于Python的图像去雾算法研究和系统实现 技术简介&#xff1a;采用Python技术、MYSQL数据库等实现。 系统简介&#xff1a;图像去雾系统主要是基于暗通道先验和逆深度估计技术的去雾算法&#xff0c;系统功能模块分为&#xff08;1&#xff09;图像上传模块&…
阅读更多...
Stable Diffusion Prompt编写规范详解

Stable Diffusion Prompt编写规范详解

Stable Diffusion Prompt编写规范详解 一、语法结构规范 &#xff08;一&#xff09;基础模板框架 [质量强化] [主体特征] [环境氛围] [风格控制] [镜头参数]质量强化&#xff1a;best quality, ultra detailed, 8k resolution‌主体特征&#xff1a;(1girl:1.3), long …
阅读更多...
勿以危小而为之勿以避率而不为

勿以危小而为之勿以避率而不为

《故事汇之&#xff1a;所见/所闻/所历/所想》&#xff1a;《公园散步与小雨遇记》&#xff08;二&#xff09; 就差一点到山顶了&#xff0c;路上碰到一阿姨&#xff0c;她说等会儿要下大雨了&#xff0c;让我不要往上走了&#xff0c;我犹豫了一会儿&#xff0c;还是听劝地返…
阅读更多...
wheel_legged_genesis 开源项目复现与问题记录

wheel_legged_genesis 开源项目复现与问题记录

Reinforcement learning of wheel-legged robots based on Genesis System Requirements Ubuntu 20.04/22.04/24.04 python > 3.10 开始配置环境&#xff01; 点击releases后进入&#xff0c;下载对应最新版本的代码&#xff1a; 将下载后的代码包解压到你的自定义路径下&…
阅读更多...
Gin框架从入门到实战：核心用法与最佳实践

Gin框架从入门到实战：核心用法与最佳实践

为什么选择Gin框架&#xff1f; Gin 是一个基于 Go 语言的高性能 Web 框架&#xff0c;具备以下优势&#xff1a; 轻量高效&#xff1a;底层依赖 net/http&#xff0c;性能接近原生。简洁优雅&#xff1a;API 设计友好&#xff0c;支持路由分组、中间件链、参数绑定等特性。生…
阅读更多...
Leetcode 3468. Find the Number of Copy Arrays

Leetcode 3468. Find the Number of Copy Arrays

Leetcode 3468. Find the Number of Copy Arrays 1. 解题思路2. 代码实现 题目链接&#xff1a;3468. Find the Number of Copy Arrays 1. 解题思路 这一题的话思路上就是一个范围考察&#xff0c;显然&#xff0c;对于指定的copy方式&#xff0c;只要我们确定了第一个元素&…
阅读更多...
VirtualBox虚拟机MacOS从Big Sur升级到Sequoia（失败）

VirtualBox虚拟机MacOS从Big Sur升级到Sequoia（失败）

VirtualBox虚拟机里安装好Big Sur版本&#xff0c;尝试升级到Sequoia&#xff0c;但是最终失败了。 软件升级 直接在系统偏好-软件更新里可以看到提示&#xff0c;提示可以升级到15版本Sequoia 点击同意&#xff0c;看能不能升级到Sequoia吧。升级前先用时光做了备份。 升级…
阅读更多...
[杂学笔记]HTTP1.0和HTTP1.1区别、socket系列接口与TCP协议、传输长数据的时候考虑网络问题、慢查询如何优化、C++的垃圾回收机制

[杂学笔记]HTTP1.0和HTTP1.1区别、socket系列接口与TCP协议、传输长数据的时候考虑网络问题、慢查询如何优化、C++的垃圾回收机制

目录 1.HTTP1.0和HTTP1.1区别 2.socket系列接口与TCP协议 3.传输长数据的时候考虑网络问题 4.慢查询如何优化 5.C的垃圾回收机制 1.HTTP1.0和HTTP1.1区别 在连接方式上&#xff0c;HTTP1.0默认采用的是短链接的方式&#xff0c;就建立一次通信&#xff0c;也就是说即使在…
阅读更多...
ANI AGI ASI的区别

ANI AGI ASI的区别

‌‌ANI、‌AGI、‌ASI的区别主要体现在定义、特点和应用场景上‌&#xff1a; 1. ANI&#xff08;狭义人工智能 Artificial narrow intelligence&#xff09;‌&#xff1a; ‌定义‌&#xff1a;ANI&#xff0c;也被称为弱人工智能&#xff0c;是指专门设计用于执行特定任务…
阅读更多...
用OpenCV写个视频播放器可还行？（Python版）

用OpenCV写个视频播放器可还行？（Python版）

引言 提到OpenCV&#xff0c;大家首先想到的可能是图像处理、目标检测&#xff0c;但你是否想过——用OpenCV实现一个带进度条、倍速播放、暂停功能的视频播放器&#xff1f;本文将通过一个实战项目&#xff0c;带你深入掌握OpenCV的视频处理能力&#xff0c;并解锁以下功能&a…
阅读更多...
leetcode日记（77）子集Ⅱ

leetcode日记（77）子集Ⅱ

不知道为什么看到这道题就很头痛…… 其实只要掌握nums不包含重复元素的情况下的代码就行了。 若nums不能包含重复元素&#xff0c;那么使用回溯很容易就能写出来&#xff1a; class Solution {void hs(vector<int> v,int x,vector<int> r,vector<vector<…
阅读更多...
通俗版解释：分布式和微服务就像开餐厅

通俗版解释：分布式和微服务就像开餐厅

一、分布式系统&#xff1a;把大厨房拆成多个小厨房 想象你开了一家超火爆的餐厅&#xff0c;但原来的厨房太小了&#xff1a; 问题&#xff1a;一个厨师要同时切菜、炒菜、烤面包&#xff0c;手忙脚乱还容易出错。 解决方案&#xff1a; 拆分成多个小厨房&#xff08;分布式…
阅读更多...
StarRocks-fe工程在Cursor中不能识别为Java项目

StarRocks-fe工程在Cursor中不能识别为Java项目

SR简介 StarRocks 是一款高性能分析型数据库&#xff0c;支持实时、多维度、高并发的数据分析。本指南旨在解决在使用 VSCode 或 Cursor 开发 StarRocks 后端项目时遇到的模块识别问题。 问题描述 使用 Cursor 或 VSCode 打开 StarRocks 的后端工程 fe 时&#xff0c;spark-…
阅读更多...
第五节：基于Winform框架的串口助手小项目---串口收发《C#编程》

第五节：基于Winform框架的串口助手小项目---串口收发《C#编程》

“路漫漫其修远兮&#xff0c;吾将上下而求索” &#xff0c; -----------------------WHAPPY 目标任务&#xff1a; 1 从本地设备列表获取串口。 RegistryKey keyCom Registry.LocalMachine.OpenSubKey("Hardware\DeviceMap\SerialComm"); RegistryKey 是.NET 框…
阅读更多...
专题二最大连续1的个数|||

专题二最大连续1的个数|||

1.题目 题目分析&#xff1a; 给一个数字k&#xff0c;可以把数组里的0改成1&#xff0c;但是只能改k次&#xff0c;然后该变得到的数组能找到最长的子串且都是1。 2.算法原理 这里不用真的把0变成1&#xff0c;因为改了比较麻烦&#xff0c;下次用就要改回成1&#xff0c;这…
阅读更多...
25年第四本【认知觉醒】

25年第四本【认知觉醒】

《认知觉醒》&#xff1a;一场与大脑的深度谈判 在信息爆炸的焦虑时代&#xff0c;我们像被抛入湍流的溺水者&#xff0c;拼命抓取各种自我提升的浮木&#xff0c;却在知识的漩涡中越陷越深。这不是一本简单的成功学指南&#xff0c;而是一场关于人类认知系统的深度对话&#…
阅读更多...
甘特图开发代码（测试版）

甘特图开发代码（测试版）

场景&#xff1a;要实现的功能就是单行数据能左右拖动。 流程五个&#xff1a;ABCDE。&#xff08;对应&#xff1a;Charter开发、概念和计划、初样开发、正样开发、验证&#xff09; 1、A有开始时间&#xff0c;结束时间。B的开始时间必须是A的结束时间&#xff08;相等或者…
阅读更多...
服务器配置-从0到分析4：ssh免密登入

服务器配置-从0到分析4：ssh免密登入

该部分涉及到公钥、私钥等部分knowledge&#xff0c;本人仅作尝试 若将本地机器 SSH Key 的公钥放到远程主机&#xff0c;就能无需密码直接远程登录远程主机 1&#xff0c;在客户端生成 ssh 公私钥&#xff1a; 也就是我们本地机器&#xff0c;windows电脑 一路回车即可&am…
阅读更多...
使用easyocr、PyPDF2对图像及PDF文档进行识别

使用easyocr、PyPDF2对图像及PDF文档进行识别

一、概述 本 Python 脚本的主要功能是对当前目录及其子目录下的图片和 PDF 文件进行光学字符识别&#xff08;OCR&#xff09;处理。它使用 easyocr 库处理图片中的文字&#xff0c;使用 PyPDF2 库提取 PDF 文件中的文本&#xff0c;并将处理结果保存为文本文件。同时&#xff…
阅读更多...
最新文章

Copyright @ 2022~2023