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

样式/节

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

spen标签

<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浏览器中打开：

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浏览器打开：