HTML标签：排版标签
排版标签用于对网页内容进行布局和样式的调整。下面是对常见排版标签的详细介绍：
<h1>: 定义一级标题，通常用于标题栏或页面主要内容的标题。 <p>: 定义段落，用于将文字分段展示，段落之间会有空行。 <hr />: 创建水平线，通常用于分隔不同部分的内容。 <br />: 插入换行符，用于在文本中创建换行效果。 <div>: 定义文档中的一个区域，可用于分组相关元素，或用于控制元素的样式。 <span>: 定义文本的一小部分，常用于指定特定的样式，如颜色、字体等。 <center>: 对其所包含的内容进行居中对齐，适用于块级元素。 <pre>: 保留文本中的空白字符（包括空格和换行符），保持原始格式，适用于展示代码或预格式文本。 这些排版标签可以通过HTML语言嵌入到网页中，配合CSS样式表进行进一步的样式调整，实现网页的美化和布局。
标题使用至标签进行定义。定义最大的标题，定义最小的标题。具有align属性，属性值可以是：left、center、right。
<h1><h6><h1><h6>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>H1：千古壹号，永不止步</h1> <h2>H3：千古壹号，永不止步</h2> <h3>H3：千古壹号，永不止步</h3> <h4>H4：千古壹号，永不止步</h4> <h5>H5：千古壹号，永不止步</h5> <h6>H6：千古壹号，永不止步</h6> </body> </html>
将给定的HTML代码转换为Markdown格式的标题标签如下所示：
# H1：千古壹号，永不止步 ## H3：千古壹号，永不止步 ### H3：千古壹号，永不止步 #### H4：千古壹号，永不止步 ##### H5：千古壹号，永不止步 ###### H6：千古壹号，永不止步
效果演示：
H1：千古壹号，永不止步
H3：千古壹号，永不止步
H3：千古壹号，永不止步
H4：千古壹号，永不止步
H5：千古壹号，永不止步
H6：千古壹号，永不止步
HTML 注释
<!-- 我是 html 注释 -->
在HTML中，可以使用注释来向代码添加说明或注解。HTML注释不会在网页上显示，只是对代码进行注释和说明，方便开发人员理解和维护代码。
HTML注释以<!--开始，以-->结束。在注释内可以写入任何内容，包括文本、标签等。注释可以跨越多行，但不能嵌套注释。
以下是HTML注释的示例：
<!-- 这是一个HTML注释 --> <!-- 注释可以用于添加说明或注解 --> <!-- 注释可以跨越多行 --> <!-- 这是一个多行注释的示例， 可以在这里添加更多的注释内容。 -->
请注意，HTML注释仅对代码本身起作用，不会影响网页的显示效果。
段落标签< p>
在HTML（超文本标记语言）中，<p> 标签是一个段落标签。这个标签常常用来表示文档中的一个段落。一个段落是由一个或多个连续的文本行组成，而且通常会有一个空行（空白或者其它的元素）来隔离它与其它的段落。
例如：
<p>这是一个段落。</p> <p>这是另一个段落。</p>
上面的HTML代码会生成两个段落。
<p> 标签是一个非常基础的HTML标签，它在网页设计中经常被使用。这个标签通常与其它的HTML标签（如标题标签 <h1> 到 <h6>，链接标签 <a>，列表标签 <ul>, <ol>, <li> 等）一起使用来构建一个结构化、有意义的网页内容。
除了基本的段落表示，<p> 标签还可以配合一些全局属性（global attributes）来改变段落的外观或行为。这些全局属性包括但不限于：
class：为元素指定一个或多个类名，以便通过CSS来样式化。id：为元素指定唯一的标识符，可以通过JavaScript或者CSS来选择和操作这个元素。style：直接在元素上应用CSS样式。title：为元素提供一个描述性信息，通常作为鼠标悬停时的提示文本。
例如：
<p class="intro" style="color:blue;">这是一个蓝色的段落。</p>
上面的HTML代码创建了一个带有蓝色文本的段落，并且给它赋予了一个类名 “intro”。
此外，<p> 标签不能包含块级元素，如 <div>, <header>, <footer>, <p>, <section> 等。如果需要在一个段落中嵌入块级元素，可以考虑使用 <div> 标签代替。
HTML标签是分等级的，HTML将所有的标签分为两种：
文本级标签:p、span、a、b、i、u、em。文本级标签里只能放文字、图片、表单元素。（a标签里不能放a和input）
容器级标签:d iv、h系列、li、dt、dd。容器级标签里可以放置任何东西。
从学习p的第一天开始，就要牢牢记住：p标签是一个文本级标签，p里面只能放文字、图片、表单元素。其他的一律不能放。
错误写法：（尝试把 h 放到 p 里）
<p> 我是一个小段落 <h1>我是一级标题</h1> </p>
上图显示，浏览器不允许你这么做，我们使用Chrome的F12审查元素发现，浏览器自己把p封闭掉了，不让你去包裹h1。
PS：Chrome浏览器是HTML5支持度最好的浏览器。提供了非常好的开发工具，非常适合我们开发人员使用。审查元素功能的快捷键是F12。
水平线标签< hr />
水平线标签 <hr /> 是在HTML中用于插入水平分隔线的标签。它是一个自闭合标签，不需要闭合标签。
使用 <hr /> 标签可以在文档中创建水平线，用于视觉上将内容分隔开来或表示不同部分之间的分隔。水平线通常在段落、标题或其他内容之间使用，以增加页面的可读性和组织性。
以下是一个使用 <hr /> 标签创建水平线的示例：
<p>这是第一个段落。</p> <hr /> <p>这是第二个段落。</p>
在浏览器中显示的效果将是这样的：
这是第一个段落。 ------------------------------------------- 这是第二个段落。
你还可以使用CSS样式来自定义水平线的外观，例如指定颜色、宽度、样式等。
<hr /> 标签用于在HTML中插入水平分隔线，用于在内容之间进行分隔和组织。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <p>自古情深留不住</p> <hr /> <p>总是套路得人心</p> </body> </html>
属性介绍：
align=“属性值”：设定线条置放位置。属性值可选择：left right center。
size=“2”：设定线条粗细。以像素为单位，内定为2。
width=“500"或：设定线条长度。可以是绝对值（单位是像素）或相对值。如果设置为相对值的话，内定为100%。width=“70%”
color=”#0000FF"：设置线条颜色。
noshade：不要阴影，即设定线条为平面显示。若没有这个属性则表明线条具阴影或立体。
当使用 <hr /> 标签插入水平线时，你可以通过CSS样式来自定义水平线的外观。下面是一些常用的CSS属性和值，用于自定义水平线：
color: 指定水平线的颜色。可以使用预定义的颜色名称或十六进制颜色值。例如：color: red;或color: #000000;width: 指定水平线的宽度。可以使用像素值（如px）或百分比（如%）。例如：width: 2px;或width: 50%;height: 指定水平线的高度。可以使用像素值或百分比。默认情况下，水平线的高度是由浏览器决定的。border-style: 指定水平线的边框样式。常用的值包括solid（实线）、dashed（虚线）、dotted（点线）等。例如：border-style: dashed;margin: 指定水平线的外边距。可以使用像素值或百分比。默认情况下，水平线的外边距是由浏览器决定的。padding: 指定水平线的内边距。可以使用像素值或百分比。默认情况下，水平线没有内边距。
示例：
<hr style="color: blue; width: 50%; border-style: dashed; margin-top: 20px; margin-bottom: 20px;">
在上面的示例中，水平线的颜色被设置为蓝色，宽度为50%，边框样式为虚线，上下外边距为20像素。
需要注意的是，使用CSS样式来自定义水平线时，最好将样式定义在外部的CSS文件或内部样式表中，以提高代码的可维护性和可重用性。
总结来说，通过使用 <hr /> 标签以及CSS样式，你可以轻松地自定义水平线的外观，使其与页面的设计风格相匹配。
换行标签< br />
换行标签 <br /> 是在HTML中用于插入换行的标签。它是一个自闭合标签，不需要闭合标签。
使用 <br /> 标签可以在文本中创建强制换行的效果。当浏览器解析到 <br /> 标签时，会在此处插入一个换行符，使文本从下一行开始。
以下是一些使用 <br /> 标签创建换行的示例：
<p>这是第一行。<br />这是第二行。</p> <p>这是单独一行。<br /><br />这是另外一行。</p>
在浏览器中显示的效果将是这样的：
这是第一行。 这是第二行。 这是单独一行。 这是另外一行。
需要注意的是， <br /> 标签只能在文本中使用，不能用于插入空行或分隔其他HTML元素。
总结来说，通过使用 <br /> 标签，你可以在HTML文本中插入换行，以改变文本的布局和格式。
HTML 字符实体是一种特殊的编码序列，用来在 HTML 中表示一些特殊字符或符号。这些特殊字符可能会与 HTML 的基本语法产生冲突，因此需要使用字符实体来进行转义。
常用的字符实体包括：
<：小于号<>：大于号>&：& 符号"：双引号"'：单引号'
例如，如果你想在 HTML 中显示一个标题，但标题中包含了小于号和大于号，那么你就需要对这些字符进行转义：
<h1>5 < 10 > 2</h1>
在浏览器中显示的效果将是：
5 < 10 > 2
需要注意的是，在 HTML 中还有一些其他的字符实体，你可以使用它们来表示一些特殊字符或符号。如果你不确定某个字符是否需要进行转义，可以查看相关文档或使用搜索引擎进行查询。
总结来说，使用 HTML 字符实体可以在 HTML 中安全地表示一些特殊字符或符号，避免与 HTML 的基本语法产生冲突，从而确保 HTML 文档的正确解析和显示。
< div>和标签< span>
<div> 和 <span> 都是 HTML 页面中常用的容器标签，它们主要的作用是对页面的布局和样式进行处理。
<div> 标签通常用于表示文档中的一个区域或一个块级元素。你可以在 <div> 中嵌套其他的 HTML 元素，例如文本、图片、链接等。通过添加 class 或 id 属性来为 <div> 元素应用样式，从而控制其外观和位置。
下面是一个使用 <div> 标签创建区块的示例：
<div class="container"> <h1>这是一个标题</h1> <p>这是一个段落。</p> <img src="example.jpg" alt="示例图片"> </div>
在上面的示例中，我们使用了 <div> 标签来创建一个容器区块，并在其中嵌套了一个标题、一个段落和一张图片。通过添加 class="container" 属性，我们可以为这个 <div> 元素定义一个样式类，例如：.container { border: 1px solid black; }，使得这个容器区块具有边框样式。
相比之下，<span> 标签是一个内联元素，它通常用于包裹一小段文本或一组行内元素。你可以通过为 <span> 元素添加 class 或 id 属性，来为文本内容应用样式，例如：.highlight { color: red; }。
![[HTML、CSS]细节与使用经验](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635950/20241110/4a6bb78b9c294263bd2e005a5c2642e0.gif?x-oss-process=image/resize,h_160,m_lfit)
