前端初学3|hr标签的扩展及部分特殊符号的表示-创新互联

hr标签的扩展及部分特殊符号的表示

---

创新互联建站是一家专业提供密山企业网站建设,专注与网站设计制作、成都做网站、成都h5网站建设、小程序制作等业务。10年已为密山众多企业、政府机构等服务。创新互联专业网站建设公司优惠进行中。文章目录

• hr标签的扩展及部分特殊符号的表示
• hr标签的扩展
• • 一、hr的颜色变化
  • 二、hr的宽度变化
  • 三、hr的位置
• 特殊符号
• • 一、标签显示
  • 二、首行缩进
  • 三、其他特殊符号
• 总结

---

hr标签的扩展

hr标签属于一种单标记，具体的形式为<标记 />或<标记 属性 = “属性值” />。因此，我们可以对空标签添加属性，修改属性值，使我们的页面更加美观，具体操作如下。

一、hr的颜色变化

首先我们打开vscode，并通过“ ! ”+回车，快速创建模板。

我们在< body >标签内，输入以下代码，并在浏览器中观察他们的显示结果

我们可以发现，在网页中，出现了原版、红色、绿色和蓝色，四条分割线。
因此我们可以通过增加hr标签中的属性“ color ”来改变分割线的颜色。

二、hr的宽度变化

我们在使用分割线时，也需要调整分割线的宽度，使其达到我们的需求。我们只需在hr标签后，加上width属性即可。代码示例如下：

我们运行后可以发现：

产生了三条长短不一的分割线，其中代码中的数字代表的是像素点，代表 “ 300像素 ” 等等。通过修改数值，可以得到不同长度的线段。

三、hr的位置

在我们的hr标签中，加入“ align ”属性，便可以将分割线进行简单的位移操作。
代码如下：

于是我们得到：

我们不难发现，分割线发生了简单偏移。

---

特殊符号 一、标签显示

在我们编程HTML的过程中，我们经常会遇到，需要我们输出标签本身的情况，而我们的浏览器会对我们引用的标签进行读取，并不会直接输出，因此我们需要对标签进行直接输出。
示例代码如下：

我们需要打印 
>

我们输出结果，可以看到：

我们可以通过 “< ” 替换为 “ < ; ”， “ >”替换为 “ > ; ”来达到我们的目的。

二、首行缩进

我们可以先用“lorm”指令，随机生成一段长字符串。

生成结果为：

Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Quis non vel soluta laudantium tempore ad aperiam eos 
        veritatis fugiat expedita in unde impedit, odit labore. 
        Id repudiandae dolorem at sunt?

我们直接运行该段，可以看到网页中生成了我们的字符串。而根据我们的习惯，我们会在开头加入两个字的空格，因此我们用 “  ；或 &emsp；” 来进行空格操作。

 ：该空格占据宽度受字体影响明显。
&emsp：占据宽度正好是1个中文长度，且基本不受字体影响。

我们将其加入代码中：

 Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Quis non vel soluta laudantium tempore ad aperiam eos
 veritatis fugiat expedita in unde impedit, odit labore. 
        Id repudiandae dolorem at sunt?

运行，查看结果：

我们可以看到，文本前面产生了空格，且两种方法产生的空格种类不同。

三、其他特殊符号

这一部分就不进行简单说明，作为一个扩展知识。
代码部分如下：

©
™
®

运行结果为：

此特殊符号多用于版权，商标等，仅供扩展知识。

总结

本文主要对hr标签进行部分展开讲解，以及一些特殊符号的使用，希望对你有所帮助。

你是否还在寻找稳定的海外服务器提供商？创新互联www.cdcxhl.cn海外机房具备T级流量清洗系统配攻击溯源，准确流量调度确保服务器高可用性，企业级服务器适合批量采购，新人活动首月15元起，快前往官网查看详情吧

网站题目：前端初学3|hr标签的扩展及部分特殊符号的表示-创新互联
链接分享：http://dzwzjz.com/article/dogche.html