hr标签的扩展及部分特殊符号的表示
文章目录
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?