此文为【前端修炼场】第四篇，上一篇文章链接：上一篇
文章目录
在此之前，诸位道友已经接触不少的标识符了，并且对于VSCode肯定也有诸多的不满！你是否也疑惑，为什么在VSCode里面换行或者空格都不会体现在网页上，这也太不方便了，其实还有更不方便的，我们许多特殊符号也无法正常显示！接下来我将为诸位逐一介绍。
在这里我们先回顾一些我们之前所讲的标签的类型：
| 标记类型 | 格式 |
|---|---|
| 常规标记 / 双标记 | <标记 属性=“属性值“ 属性=“属性值“></标记> |
| 空标记 / 单标记 | <标记 属性=“属性值“ /> |
上述即为两种分类及其用法，这篇文章主要为了讲解一些特殊标签以及我们前面用到的水平线<hr>的相关属性值！话不多说，走起！
在我们使用html时有许多的标识符，那么一些常用的标识符诸位道友掌握了么？接下来由我来为大家梳理一番！
首先我将以表格的形式列举出来，然后进行逐一讲解
| 特殊符号 | 实现代码 |
|---|---|
| “<” 和">" | <； 和 >； |
| 空格 | &emsp； |
| 商标 | &trade； |
| 版权 | ©； |
注：接下来所有的特殊符号都会进行展示，代码段中仅仅是我们body里面的部分，框架就不放在里面了。
我们我们利用 <；来表示 <，用>；来表示 >
代码实现：
这篇文章我们讲解 < 特殊符号 >的建立
效果展示：
> 末尾一定要注意不要忘了加上" ；"
我们的空格是利用&emsp；实现，为了形成对比，我创建两段代码做对比
代码实现：
这篇文章我们讲解 < 特殊符号 >的建立 <br>
  这篇文章我们讲解 < 特殊符号 >的建立
效果展示：
我们可以很明显看到，第二段比第一段空出两个字的间距，所以一个&emsp；表示空一个字的间距
下图摘自百度百科，如有侵权，告知必删
那么我们如何实现这两个符号在网页上？
1. 商标标识我们利用 &trade；实现
2. 注册商标标识利用®；实现
代码展示：
™ <br>
®
网页展示：
不知道大家在平时网上冲浪的时候有没有注意过网页的最底部，都有很多神秘代码，如下图
大家注意看最后一行有个小图标©，那个就是商标的图形，那么我们如何在网页中显示这个呢？我们利用的是©；
代码展示：
一碗黄豆酱©
网页展示：
我们如何在网页中添加可爱小表情呢？就像是😘😝🥺这种！请输入如下代码
代码展示：
😀
网页展示：
诸位道友可以尝试😁等等，自己进行摸索，会有惊喜奥！
很多道友看见我这个标题就觉得很迷惑，为什么这个标签是无意义的，我们还去学他干什么？因为虽然这个标签本身没有什么具体含义，但是他们由独特的作用，接下来听我细细说来！
div标签没有具体含义，但是它可以用来划分页面的区域。比如下图我们将网页划分成这三个区域，每个区域进行页面实现，这样比较整洁，一块一块实现比较方便我们后期维护。相信诸位道友肯定很迷惑，没关系我们后续会继续深入了解！
接下来我们就进行示例讲解。同上，我们只进行body内容的展示
代码展示：
<div>1111</div>
<div>2222</div>
<div>3333</div>
网页展示：
我相信大家注意到了,这个页面也看不出来div起到什么作用了,那么div到底干了些什么?
此时诸位一定是疑惑多多,无法理解我所说的到底是什么意思,没关系,我们后面慢慢接触就懂了
span没有实际意义,主要用于对于文本独立修饰的时候,其宽度根据内容宽度占用,简单理解就是我们不改变文本大小,可以对于文本独立的进行修饰,比如颜色等等
接下来我们就进行示例讲解
代码展示:
<h3>一碗黄豆酱 <span style="color: red;">真帅</span></h3>
网页展示:
我们发现真帅二字变成红色的,是不是感觉很熟悉?我们前面的hr标签也进行了颜色更改的实验!我们这个也是利用修改span标签的属性style中的color进行颜色的控制!
下面的内容我会带大家熟悉 “hr” 的各种属性值，拿下 hr，筑基成功不是梦！
接下来就是阿酱的实操教学，诸位道友拿上咱们的武器 — VSCode，跟我一起修炼吧！
打开VSCode，然后初始化后，创建水平线
网页展示：
我们的线条颜色更改是基于属性color进行控制
代码展示：
<hr color=”red“>
效果展示：
我们可以很明显看到我们的水平线的颜色已经更改为红色，剩下的颜色，诸位可以余下时间自行练习！
我们的线条宽度调整是基于属性 width 进行控制
代码展示：
<hr color="red">
<hr color="red" width="300">
效果展示：
为了效果明显，我建立两条水平线，大家可以看到上面没有设置宽度的水平线是占满我们的屏幕，而下面的则是一小段，这个数量300的单位是像素，我们后期会将。注意我们默认居中！
我们的线条 靠左/靠右是基于属性 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 表示靠右
我们可以先将浏览器放大，然后观察初始没有属性的水平线，如下：
可以很明显的看出来，在水平线的下方有阴影，那么我们如果想要去掉的话，该如何做？
消除水平线阴影的属性为 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}{评论，你的意见是我进步的财富！} 评论，你的意见是我进步的财富！
我试图使用yard记录一些Ruby代码，尽管我所做的正是所描述的here或here#@param[Integer]thenumberoftrials(>=0)#@param[Float]successprobabilityineachtrialdefinitialize(n,p)#initialize...end虽然我仍然得到这个奇怪的错误@paramtaghasunknownparametername:the@paramtaghasunknownparametername:success然后生成的html看起来很奇怪。我称yard为:$yarddoc-mmarkdown我做错了什么？
我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。 最佳答案 试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes
有没有办法快速将表格格式的ruby哈希打印到文件中？如:keyAkeyBkeyC...1232343451253474456...其中散列的值是不同大小的数组。还是使用双循环是唯一的方法？谢谢 最佳答案 试试我写的这个gem(在表中打印散列、ruby对象、ActiveRecord对象):http://github.com/arches/table_print 关于ruby-如何以表格格式快速打印Ruby哈希值？，我们在StackOverflow上找到一个类似的问题：
我有这样的HTML代码:Label1Value1Label2Value2...我的代码不起作用。doc.css("first").eachdo|item|label=item.css("dt")value=item.css("dd")end显示所有首先标记，然后标记标签，我需要“标签:值” 最佳答案 首先，您的HTML应该有和中的元素:Label1Value1Label2Value2...但这不会改变您解析它的方式。你想找到s并遍历它们，然后在每个你可以使用next_element得到;像这样:doc=Nokogiri::HTML(
我有以下不起作用的代码:=form_for(resource,:as=>resource_name,:url=>session_path(resource_name),:html=>{:class=>"well"})do|f|=f.label:email=f.email_field:email=f.label:password=f.password_field:password-ifdevise_mapping.rememberable?%p=f.label:remember_me,:class=>"checkbox"=f.check_box:remember_me,:class=>"
我正在遍历数组中的一组标签名称，我想使用构建器打印每个标签名称，而不是求助于“我认为:builder=Nokogiri::XML::Builder.newdo|xml|fortagintagsxml.tag!tag,somevalendend会这样做，但它只是创建名称为“tag”的标签，并将标签变量作为元素的文本值。有人可以帮忙吗？这个看起来应该比较简单，我刚刚在搜索引擎上找不到答案。我可能没有以正确的方式提问。 最佳答案 尝试以下操作。如果我没记错的话，我添加了一个根节点，因为Nokogiri需要一个。builder=Nokogi
这个问题在这里已经有了答案:WhydoRubysettersneed"self."qualificationwithintheclass?(3个答案)关闭29天前。给定这段代码:classSomethingattr_accessor:my_variabledefinitialize@my_variable=0enddeffoomy_variable=my_variable+3endends=Something.news.foo我收到这个错误:test.rb:9:in`foo':undefinedmethod`+'fornil:NilClass(NoMethodError)fromtes
电脑启动出现显示器黑屏是一个相当常见的问题。如果您遇到了这个问题，不要惊慌，因为它有很多可能的原因，可以采取一些简单的措施来解决它。在本文中，小编将介绍下面4种常见的电脑启动后显示器黑屏的原因，排查这些原因，快速解决！ 演示机型：联想Ideapad700-15ISK-ISE系统版本：Windows10一、显示器问题如果出现电脑启动后显示器黑屏的情况。那么首先您需要检查一下显示器是否正常工作。您可以通过更换另一个显示器或将当前显示器连接到另一台计算机来检查显示器是否存在问题。如果问题仍然存在，那么您可以排除显示器故障的可能性。 二、显卡问题如果您的电脑配备了独立显卡，那么显卡故障也可能是导致电脑
我有一个偏爱:如何将像o.office这样的值插入到属性中？value="#{o.office}"无效。 最佳答案 'type='text'/>或者你可以使用表单助手 关于ruby-on-rails-如何将变量值插入ERB模板中的HTML标签？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/6172174/
是否可以从Ruby中的HTMLblock中提取IMG标签(或只是IMG标签的src属性)？例如，如果我有一个HTMLblock，例如:Loremipsumdolorsitamet,laboreetdoloremagnaaliqua.Duisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariatur.我可以通过正则表达式或其他方法只提取IMG标签或该IMG标签的src吗？提前感谢您的任何建议! 最佳答案 使用Nokogiri:re
