种分割线Html代码

一、基本线条：

1、<HR>

2、align线条位置（可选left、right、center）；width线条长度；color颜色；size厚度

<HRalign=center width=300 color=#987cb9SIZE=1>

二、特效（效果并不是孤立的，可相互组合）

1、两头渐变透明：

<HR style="FILTER:alpha(opacity=100,finishopacity=0,style=2)" width="80%"color=#987cb9 SIZE=10>

2、纺锤形：

<HR style="FILTER:alpha(opacity=100,finishopacity=0,style=1)" width="80%"color=#987cb9 SIZE=3>

3、右边渐变透明：

<HR style="FILTER:alpha(opacity=0,finishopacity=100,style=1)" width="80%"color=#987cb9 SIZE=3>

4、左边渐变透明：

<HR style="border:1 dashed #987cb9" width="80%"color=#987cb9 SIZE=1>

5、虚线：

<HR style="border:3 double #987cb9" width="80%"color=#987cb9 SIZE=3>

6、双线：

<HR style="FILTER:progid:DXImageTransform.Microsoft.Shadow(color:#987cb9,direction:145,strength:15)"width="80%" color=#987cb9 SIZE=1>

7、立体效果：

<HR style="FILTER:progid:DXImageTransform.Microsoft.Glow(color=#987cb9,strength=10)"width="80%" color=#987cb9 SIZE=1>

8、钢针效果：

<table border="1px" cellpadding="0" cellspacing="0"style="height:265px;border-left-style:solid;border-bottom-style:none;border-right-style:none;border-top-style:none">

９．垂直分割线

<table border="1px" cellpadding="0" cellspacing="0"style="height:265px;border-left-style:solid;border-bottom-style:none;border-right-style:none;border-top-style:none">

虚线的Html代码

HTML代码：

<hr style="border: 1px dotted #FF0000; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px">

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

节、分区和分割线

这些标记用于将页面分成多个部分。熟练地掌握这些标记将意味着构建出具有良好的结构和布局的页面，使其更加友好和易于阅读。

分区 - <div> </div>

div标记定义了HTML文件中的一个部分或分区。它通常包含需要组合在一起的标题、段落、表格或其他元素。通过设置<div class="">与css一起使用来设置网页某个部分的显示。

段落 - <p> </p>

p标记用来定义文本的段落，就像你在书中看到的那样，一旦文本达到屏幕边缘就会自动折到下一行。当另一个<p>标记用于开始下一个段落时，浏览器将在段落之间添加一些空白。p标记具有以下属性：

• align="" - 段落中文本的对齐方式：left, center or right
• width="" - 段落将占据页面的固定宽度或百分比，默认为100%

内联 - <span> </span>

span标记用于将内联元素组合在一起，例如句子中的几个单词，以便仅对这些单词应用css样式。span标记可以在div和p标记中使用，因为它不会创建新的块。

换行 - <br>

br标记相当于一个回车符，用于在新行开始文本。一行中的多个<br>标记将在网页上创建一个很大的垂直空间。

水平分隔线 - <hr>

hr标记通常被称为HTML行分隔符标记，创建一条通常用于视觉上分隔页面的水平线。它具有以下属性：

• width="" - 线条将占用固定宽度，默认100%宽度
• color="" - 线条颜色
• noshade - 取消3D外观，创建一条平的实线分隔线

不换行 - <nobr> </nobr>

出于某种原因，你希望文本在一条直线上继续，而不是在屏幕的边缘换行，可以使用nobr。注意：这将迫使用户向右滚动以查看行的其余部分，这是一种糟糕的设计。

例子

下面是以上标记的示例：

浏览器显示内容如下所示：

网页设计中，标题、段落和文本格式是构成页面内容的基石。它们不仅有助于传达信息，还能通过组织和强调内容来提升用户体验。本文将详细介绍这些元素的使用方法，并提供实际例子。

标题（Headings）

标题是用来定义网页中不同部分的标题。在HTML中，标题标签从<h1>到<h6>，其中<h1>表示最高的层级，通常用于主标题，而<h6>表示最低的层级。为了保证良好的SEO实践和无障碍访问，应保证标题层级的逻辑顺序。

使用实例：

<h1>欢迎来到我的博客</h1>
<h2>最新文章</h2>
<h3>Web开发的未来趋势</h3>
<h4>前言</h4>
<h4>主要内容</h4>
<h4>结论</h4>
<h3>如何提高JavaScript技能</h3>

在这个例子中，<h1>用于最主要的标题，<h2>用于区分页面中的主要部分，<h3>用于文章标题，<h4>用于文章内部的小节。

段落（Paragraphs）

段落是文本的基本单元，用于组织和展示连续的文本内容。在HTML中，<p>标签用于定义段落。合理的段落分割有助于读者更好地理解和吸收信息。

使用实例：

<p>在今天的数字时代，网页开发已经成为了一个不断演变的领域。随着新技术的出现，开发者需要不断学习和适应。</p>

<p>JavaScript是构建现代网页不可或缺的一部分。为了成为一名更优秀的前端开发者，提高JavaScript技能是非常重要的。</p>

在这个例子中，两个<p>标签分别定义了两个独立的段落，每个段落都是一个完整的思想单元。

文本格式

文本格式用于强调或区分网页中的文本内容。HTML提供了多种标签来改变文本的样式和意义，包括但不限于加粗、斜体、下划线、上标和下标等。

加粗（Bold）

<strong>和<b>标签用于加粗文本，但<strong>通常表示重要性，而<b>仅用于视觉上的加粗。

使用实例：

<p>重要提示：<strong>请不要在任何情况下泄露您的密码。</strong></p>
<p>这是一个<b>加粗</b>的文本示例。</p>

斜体（Italic）

<em>和<i>标签用于斜体文本，<em>表示强调，而<i>仅用于斜体样式。

使用实例：

<p>当我们谈论<em>用户体验</em>时，我们指的是用户与产品交互的整体感受。</p>
<p>这是一个<i>斜体</i>的文本示例。</p>

下划线和删除线

``标签用于下划线文本，而<del>标签用于显示文本已被删除或更改。

使用实例：

<p>请阅读使用条款了解更多信息。</p>
<p>原价<del>99.99美元</del> 现价69.99美元。</p>

上标和下标

<sup>和<sub>标签用于创建上标和下标文本，常用于科学公式和脚注。

使用实例：

<p>水的化学式是H<sub>2</sub>O。</p>
<p>爱因斯坦的质能方程式E=mc<sup>2</sup>。</p>

结论

合理使用标题、段落和文本格式可以极大地提升网页内容的可读性和专业性。通过明确的层级结构和强调重要内容，你可以帮助用户快速找到他们需要的信息。记住正确使用这些基本元素，你的网页将更加吸引人且功能强大。