前端初学3|hr标签的扩展及部分特殊符号的表示-创新互联
- hr标签的扩展及部分特殊符号的表示
- hr标签的扩展
- 一、hr的颜色变化
- 二、hr的宽度变化
- 三、hr的位置
- 特殊符号
- 一、标签显示
- 二、首行缩进
- 三、其他特殊符号
- 总结
hr标签的扩展
hr标签属于一种单标记，具体的形式为<标记 />或<标记 属性 = “属性值” />。因此，我们可以对空标签添加属性，修改属性值，使我们的页面更加美观，具体操作如下。
一、hr的颜色变化首先我们打开vscode，并通过“ ! ”+回车，快速创建模板。
我们在< body >标签内，输入以下代码，并在浏览器中观察他们的显示结果
我们可以发现，在网页中，出现了原版、红色、绿色和蓝色，四条分割线。
因此我们可以通过增加hr标签中的属性“ color ”来改变分割线的颜色。
我们在使用分割线时，也需要调整分割线的宽度，使其达到我们的需求。我们只需在hr标签后，加上width属性即可。代码示例如下：
我们运行后可以发现：
产生了三条长短不一的分割线，其中代码中的数字代表的是像素点，代表 “ 300像素 ” 等等。通过修改数值，可以得到不同长度的线段。
在我们的hr标签中，加入“ align ”属性，便可以将分割线进行简单的位移操作。
代码如下：
于是我们得到：
我们不难发现，分割线发生了简单偏移。
特殊符号 一、标签显示
在我们编程HTML的过程中，我们经常会遇到，需要我们输出标签本身的情况，而我们的浏览器会对我们引用的标签进行读取，并不会直接输出，因此我们需要对标签进行直接输出。
示例代码如下：
Document 我们需要打印
> 我们输出结果，可以看到：
我们可以通过 “< ” 替换为 “ < ; ”， “ >”替换为 “ > ; ”来达到我们的目的。
我们可以先用“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?