HTML常用技巧

html 实现分割线效果

在 HTML 中，分割线可以通过以下方式实现：

1. 使用 `<hr>` 标签

<hr> 是 HTML 提供的默认分割线标签。

示例

1
2
3

<p>这是第一段文字。</p>
<hr>
<p>这是第二段文字。</p>

效果

默认生成一条水平分割线，占据页面的宽度。

2. 自定义分割线样式

可以通过 CSS 自定义 <hr> 的样式，例如颜色、宽度、边框样式等。

示例

1	<hr style="border: none; border-top: 2px solid #0078d7; width: 50%; margin: 20px auto;">

属性说明

border: none; 去除默认边框。
border-top: 2px solid #0078d7; 自定义分割线样式（颜色和粗细）。
width: 50%; 设置分割线宽度。
margin: 20px auto; 设置上下间距并居中。

3. 使用 CSS `:before` 或 `:after` 创建分割线

通过伪元素，分割线可以作为装饰效果使用。

示例

<div style="text-align: center; position: relative; margin: 20px 0;">
    <span style="background: white; padding: 0 10px; position: relative; z-index: 1;">中间带文字的分割线</span>
    <hr style="border: none; border-top: 1px solid #ccc; position: absolute; top: 50%; left: 0; width: 100%; z-index: 0;">
</div>

效果

在分割线中间插入文字。
利用伪元素或额外的 HTML 元素实现装饰效果。

4. 带图标或装饰的分割线

可以将图片或图标结合分割线，增加美观效果。

示例

<div style="text-align: center; margin: 20px 0;">
    <hr style="border: none; border-top: 1px solid #ccc; width: 40%; display: inline-block;">
    <span style="font-size: 24px; margin: 0 10px;">⭐</span>
    <hr style="border: none; border-top: 1px solid #ccc; width: 40%; display: inline-block;">
</div>

效果

分割线两端显示图标或文字。

5. 渐变色分割线

通过 CSS 渐变实现更现代的分割线效果。

示例

1	<hr style="border: none; height: 2px; background: linear-gradient(to right, #ff7e5f, #feb47b);">

效果

分割线有渐变色效果。
height: 2px; 设置分割线的高度。

6. 波浪形分割线

通过 SVG 或图片制作波浪形分割线。

示例

<div style="width: 100%; overflow: hidden;">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
        <path fill="#0099ff" fill-opacity="1" d="M0,128L40,122.7C80,117,160,107,240,112C320,117,400,139,480,160C560,181,640,203,720,213.3C800,224,880,224,960,218.7C1040,213,1120,203,1200,192C1280,181,1360,171,1400,165.3L1440,160L1440,320L1400,320C1360,320,1280,320,1200,320C1120,320,1040,320,960,320C880,320,800,320,720,320C640,320,560,320,480,320C400,320,320,320,240,320C160,320,80,320,40,320L0,320Z"></path>
    </svg>
</div>

效果

波浪形动态分割线。
使用 <svg> 绘制分割线形状，可自定义填充颜色和路径。

总结

简单需求可以直接使用 <hr>。
自定义样式时可以结合 CSS 修改颜色、宽度或添加装饰。
高级需求（如波浪或渐变）可以使用 CSS 或 SVG 实现。

html 加粗字体

在 HTML 中，可以使用以下方法来加粗字体：

1. 使用 `<b>` 标签

<b> 标签用于加粗文本，但不会传递语义信息，仅是视觉效果。

示例

1	<p>这是一段普通文本，<b>这是加粗的文本</b>。</p>

2. 使用 `<strong>` 标签

<strong> 标签不仅加粗文本，还会传递语义信息，表示该内容是重要的。

示例

1	<p>请注意：<strong>此操作不可撤销</strong>。</p>

3. 使用内联样式

通过 CSS 的 font-weight 属性实现加粗效果。

示例

1	<p>这是普通文本，<span style="font-weight: bold;">这是加粗的文本</span>。</p>

4. 定义全局样式

在样式表中定义 font-weight 属性，灵活控制加粗效果。

示例

<style>
    .bold-text {
        font-weight: bold;
    }
</style>

<p>普通文本，<span class="bold-text">加粗文本</span>。</p>

5. 调整字体粗细

通过 font-weight 属性，你可以指定不同程度的字体粗细，例如 100（细）到 900（粗）。

示例

<p>字体粗细示例：</p>
<p style="font-weight: 400;">普通字体（400）。</p>
<p style="font-weight: 700;">加粗字体（700）。</p>
<p style="font-weight: 900;">超粗字体（900）。</p>

6. 结合其他标签

可以将加粗效果与其他标签一起使用，如标题标签。

示例

1 2	<h1>这是一级标题（加粗）。</h1> <h2><strong>这是二级标题，使用<strong></strong>标签加粗。</strong></h2>

总结

方法	用途	推荐场景
`<b>`	仅加粗文本，无语义	仅需要视觉加粗的场景
`<strong>`	加粗文本，表示重要性	需要强调内容的场景
`font-weight`	CSS 样式，灵活控制粗细	自定义粗细的场景
样式类（class）	全局样式复用	需要一致样式的场景

根据需求选择适合的加粗方式！