首页IT科技前端logo图片(【前端修炼场】 — 这些标签你学会了么?快速拿下 “hr”)

前端logo图片(【前端修炼场】 — 这些标签你学会了么?快速拿下 “hr”)

时间2025-07-09 17:12:43分类IT科技浏览4743
导读:此文为【前端修炼场】第四篇,上一篇文章链接:上一篇 前言...

此文为【前端修炼场】第四篇,上一篇文章链接:上一篇

前言

在此之前,诸位道友已经接触不少的标识符了,并且对于VSCode肯定也有诸多的不满!你是否也疑惑,为什么在VSCode里面换行或者空格都不会体现在网页上,这也太不方便了,其实还有更不方便的,我们许多特殊符号也无法正常显示!接下来我将为诸位逐一介绍。

在这里我们先回顾一些我们之前所讲的标签的类型:

标记类型 格式 常规标记 / 双标记 <标记 属性=“属性值“ 属性=“属性值“></标记> 空标记 / 单标记 <标记 属性=“属性值“ />

上述即为两种分类及其用法,这篇文章主要为了讲解一些特殊标签以及我们前面用到的水平线<hr>的相关属性值!话不多说,走起!

一、 常用标识符

在我们使用html时有许多的标识符,那么一些常用的标识符诸位道友掌握了么?接下来由我来为大家梳理一番!

1.1 特殊标识符

首先我将以表格的形式列举出来,然后进行逐一讲解

特殊符号 实现代码 “<” 和">" &lt; 和 &gt; 空格 &emsp; 商标 &trade; 版权 &copy;

1.1.1 “<” 和 “>”(&lt;)

注:接下来所有的特殊符号都会进行展示,代码段中仅仅是我们body里面的部分,框架就不放在里面了。

我们我们利用 &lt;来表示 <,用&gt;来表示 >

代码实现:

这篇文章我们讲解 &lt; 特殊符号 &gt;的建立

效果展示:

&gt 末尾一定要注意不要忘了加上" ;"

1.1.2 空格(&emsp;)

我们的空格是利用&emsp;实现,为了形成对比,我创建两段代码做对比

代码实现:

这篇文章我们讲解 &lt; 特殊符号 &gt;的建立 <br> &emsp;&emsp;这篇文章我们讲解 &lt; 特殊符号 &gt;的建立

效果展示:

我们可以很明显看到,第二段比第一段空出两个字的间距,所以一个&emsp;表示空一个字的间距

1.1.3 商标(™/ ®)

下图摘自百度百科,如有侵权,告知必删

那么我们如何实现这两个符号在网页上?

1. 商标标识我们利用 &trade;实现

2. 注册商标标识利用&reg;实现

代码展示:

&trade; <br> &reg;

网页展示:

1.1.4 版权(©)

不知道大家在平时网上冲浪的时候有没有注意过网页的最底部,都有很多神秘代码,如下图

大家注意看最后一行有个小图标©,那个就是商标的图形,那么我们如何在网页中显示这个呢?我们利用的是&copy;

代码展示:

一碗黄豆酱&copy;

网页展示:

1.1.5 彩蛋(&#128512)

我们如何在网页中添加可爱小表情呢?就像是😘😝🥺这种!请输入如下代码

代码展示:

&#128512

网页展示:

诸位道友可以尝试&#128513等等,自己进行摸索,会有惊喜奥!

1.2 无意义标签

很多道友看见我这个标题就觉得很迷惑,为什么这个标签是无意义的,我们还去学他干什么?因为虽然这个标签本身没有什么具体含义,但是他们由独特的作用,接下来听我细细说来!

1.2.1 div标签

div标签没有具体含义,但是它可以用来划分页面的区域。比如下图我们将网页划分成这三个区域,每个区域进行页面实现,这样比较整洁,一块一块实现比较方便我们后期维护。相信诸位道友肯定很迷惑,没关系我们后续会继续深入了解!

接下来我们就进行示例讲解。同上,我们只进行body内容的展示

代码展示:

<div>1111</div> <div>2222</div> <div>3333</div>

网页展示:

我相信大家注意到了,这个页面也看不出来div起到什么作用了,那么div到底干了些什么?

三段div的内容各独立占有一行(在没有约束的条件下) 独立划分三块区域

此时诸位一定是疑惑多多,无法理解我所说的到底是什么意思,没关系,我们后面慢慢接触就懂了

1.2.2 span标签

span没有实际意义,主要用于对于文本独立修饰的时候,其宽度根据内容宽度占用,简单理解就是我们不改变文本大小,可以对于文本独立的进行修饰,比如颜色等等

接下来我们就进行示例讲解

代码展示:

<h3>一碗黄豆酱 <span style="color: red;">真帅</span></h3>

网页展示:

我们发现真帅二字变成红色的,是不是感觉很熟悉?我们前面的hr标签也进行了颜色更改的实验!我们这个也是利用修改span标签的属性style中的color进行颜色的控制!

二、hr 属性值讲解

下面的内容我会带大家熟悉 “hr” 的各种属性值,拿下 hr,筑基成功不是梦!

2.1 创建hr

接下来就是阿酱的实操教学,诸位道友拿上咱们的武器 — VSCode,跟我一起修炼吧!

打开VSCode,然后初始化后,创建水平线

网页展示:

2.2 更改hr颜色

我们的线条颜色更改是基于属性color进行控制

代码展示:

<hr color=”red“>

效果展示:

我们可以很明显看到我们的水平线的颜色已经更改为红色,剩下的颜色,诸位可以余下时间自行练习!

2.3 更改hr宽度

我们的线条宽度调整是基于属性 width 进行控制

代码展示:

<hr color="red"> <hr color="red" width="300">

效果展示:

为了效果明显,我建立两条水平线,大家可以看到上面没有设置宽度的水平线是占满我们的屏幕,而下面的则是一小段,这个数量300的单位是像素,我们后期会将。注意我们默认居中!

2.4 更改hr位置

我们的线条 靠左/靠右是基于属性 align 进行控制

代码展示:

<!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> <hr color="red"> <hr color="red" width="300"> <hr color="green" width="300" align="left"> <hr color="yellow" width="300" align="right"> </body> </html>

效果展示:

上述为了方便对照,我设置了四条曲线,其中属性值 left 表示靠左,right 表示靠右

2.5 消除hr阴影

我们可以先将浏览器放大,然后观察初始没有属性的水平线,如下:

可以很明显的看出来,在水平线的下方有阴影,那么我们如果想要去掉的话,该如何做?

消除水平线阴影的属性为 noshade

代码展示:

<!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> <hr noshade="noshade"> </body> </html>

效果展示:

可以很明显的发现阴影消失了

总结

从本次学习中,我相信大家对于基础标识符和hr的属性定有所掌握,我们如果想要对标签进行进一步的修饰,那么属性就起到非常重要的作用!

希望诸位下去自行练习掌握!

原创不易,还希望各位大佬支持一下

\textcolor{blue}{原创不易,还希望各位大佬支持一下}

原创不易,还希望各位大佬支持一下

👍

点赞,你的认可是我创作的动力!

\textcolor{green}{点赞,你的认可是我创作的动力!}

点赞,你的认可是我创作的动力!

⭐️

收藏,你的青睐是我努力的方向!

\textcolor{green}{收藏,你的青睐是我努力的方向!}

收藏,你的青睐是我努力的方向!

✏️

评论,你的意见是我进步的财富!

\textcolor{green}{评论,你的意见是我进步的财富!}

评论,你的意见是我进步的财富!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!

展开全文READ MORE
抓取网页内容的快捷键(从网址上实时获取数据-怎么从网页抓取实时数据)