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

文章目录

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

hr标签的扩展

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

一、hr的颜色变化

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

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

<body><hr/><hr color="red"><hr color="green"><hr color="blue">
</body>

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

二、hr的宽度变化

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

    <hr color="red" width="300"><hr color="green" width="200"><hr color="blue" width="100">

我们运行后可以发现：

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

三、hr的位置

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

    <hr/><hr color="red" width="300" align="left"><hr color="green" width="200" align="right"><hr color="blue" width="100">

于是我们得到：

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

特殊符号

一、标签显示

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><p><center>我们需要打印 &lt;hr/&gt;</p>
</body>
</html>

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

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

二、首行缩进

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

生成结果为：

</head>
<body><p>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?</p>
</body>
</html>

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

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

我们将其加入代码中：

<body><p>&nbsp;Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis non vel soluta laudantium tempore ad aperiam eos </p><p>&emsp;veritatis fugiat expedita in unde impedit, odit labore. Id repudiandae dolorem at sunt?</p>
</body>

运行，查看结果：

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

三、其他特殊符号

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

<body><p>&copy;<br/>&trade;<br/>&reg;</p>
</body>

运行结果为：

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

总结

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

前端初学3| hr标签的扩展及部分特殊符号的表示相关推荐

前端初学，记下标签以后参考
<hx></hx>标题标签,x为数字1-6,x越小,标题越重要,也越大 <body><h1>第一级标题</h1><h2>第二级标 ...
HTML5前端开发入门之H系列标签，P标签和Hr标签
##H系列标签(Header1~Header2) -作用:用于给文本添加标题语义 -格式: -<h1>xxxxxx</h2> -注意点: -H标签是用来给文本添加标题语义的,而 ...
前端之HTML常用标签
## 本资源由 itjc8.com 收集 --- typora-copy-images-to: media --- > 第01阶段.前端基础.HTML常用标签 ## 学习目标 - 理解: - ...
从零开始学前端：HTML的一些文本格式化标签、快捷键、和特殊符号 --- 今天你学习了吗？（CSS：Day02）
从零开始学前端:程序猿小白也可以完全掌握!- 今天你学习了吗?(CSS) 复习:从零开始学前端: HTML框架和VS Code安装 - 今天你学习了吗?(CSS:Day01) 文章目录从零开始学前端 ...
从零开始学前端 - 3. HTML 常用标签_2
作者: 她不美却常驻我心博客地址: https://blog.csdn.net/qq_39506551 微信公众号:老王的前端分享每篇文章纯属个人经验观点,如有错误疏漏欢迎指正.转载请附带作者信息 ...
从零开始学前端 - 2. HTML常用标签_1
作者: 她不美却常驻我心博客地址: https://blog.csdn.net/qq_39506551 微信公众号:老王的前端分享每篇文章纯属个人经验观点,如有错误疏漏欢迎指正.转载请附带作者信息 ...
css中如何设置hr的样式？css hr标签多种样式（图文）
在对html网页进行美化的时候,肯定少不了要用的hr标签进行修饰页面,但默认的hr标签样式对页面的修饰起不到什么好的作用,有经验的前端工作者就会通过使用css样式来对hr标签进行一些美化的操作.那么如 ...
网页设计师要懂的前端知识之HTML标签及规范
1. HTML介绍超文本标记语言(英文:HyperText Markup Language,HTML)是为"网页创建和其它可在网页浏览器中看到的信息"设计的一种标记语言. 1.1 ...
前端开发推荐的火狐插件扩展
前端开发推荐的火狐插件扩展火狐好用的插件有很多,主要看你是做什么工作了,比如我是做网站前端的,有一些调试页面的插件就不可缺少了,如firebug.web developer等. 秀一下我收藏的火狐插 ...

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