HTML 块标签的学习（样式/节）

样式/节

样式/节 ?
style 定义文档的样式信息。
div 定义文档中的节。
span 定义文档中的节。
header 定义一个文档头部部分
footer 定义一个文档底部
section 定义了文档的某个区域
article 定义一个文章内容
aside 定义其所处内容之外的内容。
details 定义了用户可见的或者隐藏的需求的补充细节。
dialog 定义一个对话框或者窗口
summary 定义一个可见的标题。 当用户点击标题时会显示出详细信息。

span 标签

<span> 用于对文档中的行内元素进行组合。

<span> 标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对 <span> 应用样式，那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。

<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。

举例：

复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>块标签：spen</title>
</head>
<body>
 
<p>
    我是一个 <span style="color:blue">小</span> 菜鸟.
</p>
 
</body>
</html>

Google浏览器打开：

img

div 标签

<div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。

<div>标签常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。

<div> 元素经常与 CSS 一起使用，用来布局网页。

默认情况下，浏览器通常会在 <div> 元素前后放置一个换行符。然而，您可以通过使用 CSS 改变这种情况。

举例：

复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>块标签：div</title>
</head>
<body>
 
<div style="color:#0000FF">
    <h3><center>《锦瑟》</center></h3>
    <p><center>锦瑟无端五十弦，一弦一柱思华年。</center></p>
    <p><center>庄生晓梦迷蝴蝶，望帝春心托杜鹃。</center></p>
    <p><center>沧海月明珠有泪，蓝田日暖玉生烟。</center></p>
    <p><center>此情可待成追忆，只是当时已惘然。</center></p>
</div>
 
</body>
</html>

Google浏览器打开：

img

posted @   LeeHua  阅读(381)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· winform 绘制太阳，地球，月球 运作规律
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 上周热点回顾（3.3-3.9）
点击右上角即可分享
微信分享提示
AI IDE Trae

目录导航