乐趣区

关于html:不割韭菜纯分享剖析HTML中的类运维开发必备前端技能我们一起坚持

写在开篇

开篇之前,先提个问题,什么是类?分类吗?能够这么说吧!咱们能够给物体分类,也能够给人分类。正所谓,物以类聚,人以群分。难道咱们这里是给元素分类?用分类来了解是不精确的啦!从某些角度,也能够了解成分类,说白了也就是个标识而已。废话不说,咱们正式步入今晚的主题!

HTML 类

html 中的类是什么鬼?先上个例子,而后再分析它:

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title> 陪你温习坚固,攻破前端技能 </title>
        <style>
            .c1 {
              background-color: tomato;
              color: white;
              border: 2px solid black;
              margin: 20px;
              padding: 20px;
            }
        </style>
    </head>
    <body>
        <div class="c1">
            <h2> 彩虹运维技术栈社区,公众号 ID:TtrOpsStack</h2>
        </div>

        <div class="c1">
            <p> 笔者亲自设计的,一个入侵性极低的 Oracle 监控计划 </p>
            <a href="https://mp.weixin.qq.com/s/PDm2bK7IMFOwjNHFOblgXg" target="_blank">oracledb_exporter 监控 Oracle,一个入侵性极低的监控计划。</a>
        </div>

        <div class="c1">
            <p> 意犹未尽的第 2 篇再次推出,一个入侵性极低的 Oracle 监控计划 </p>
            <a href="https://mp.weixin.qq.com/s/gFeWlZRGkIMAOCNFpKm8-Q" target="_blank"> 意犹未尽的第 2 篇再次推出,持续解说 oracledb_exporter 监控 Oracle,一个入侵性极低的监控计划。</a>
        <div>
    </body>
</html>

成果如下图:

好了,咱们正式开始对它进行分析,搞清楚到底啥是类,下面的小栗子中,定义了 3 个 div 元素,它们的 class 属性值均为 “c1″。而后留神到没有?在 head 中的 style 标签里,通过”.c1“的形式同时对 3 个 div 进行了 css 款式的设置。所以也由此引出了它的一个特点,那就是多个 HTML 元素能够共享同一个类,上述的例子中 3 个 div(元素)的类(class)名都定义了为“c1”,且同时对 3 个 div 进行了 css 款式的设置,这就是它的共享性。不晓得笔者说明确了没有,好难堪。

那接下来,咱们再来个小栗子:

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title> 陪你温习坚固,攻破前端技能 </title>
        <style>
            .c2 {
                font-size: 120%;
                color: crimson;
            }
        </style>
    </head>
    <body>
        <h1> 彩虹 <span class="c2"> 运维 </span> 技术栈社区 </h1>
        <p> 咱们会 <span class="c2"> 继续分享 </span> 运维和运维开发畛域相干的技术文章 </p>
    </body>
</html>

成果如下图:

下面的例子中,“运维”和“继续分享”这两个字都在 span 标签里,且这两个 span 标签都定义了 class 属性,class=“c2”,同时通过“.c2”的形式设置了 CSS 属性。下面的例子中,就是通过这样的方法实现了对某局部的文字进行款式的设置。

截止目前,咱们通过两个小栗子,间接解剖了什么是类,那么咱们再做个小总结:

  • class 属性能够用于任何 HTML 元素
  • 类名辨别大小写

CLASS 的语法

其实在后面的小栗子中,曾经解说过 class 的语法了,不晓得宽广盆友们留神到了没有。如果没有留神到,咱们再这个章节从新温习一下。

看上面代码:

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title> 陪你温习坚固,攻破前端技能 </title>
        <style>
            .cc3 {
              background-color: blue;
              color: white;
              padding: 8px;
            }
        </style>
    </head>
    <body>
        <h2 class="cc3"> 彩虹运维技术栈社区,公众号 ID:TtrOpsStack</h2>
        <p class="cc3"> 咱们会继续分享运维和运维开发畛域相干的技术文章 </p>
    </body>
</html>

成果如下图:

下面的例子中,是如何援用到文本内容并设置 CSS 属性的呢?答案就是通过.css3 这样的语法,咱们设置的类名是 css3。而后在 style 中,设置 css 属性,在 {} 大括号里的内容就是 CSS 的属性,对于 CSS,笔者后续会专门逐个解说哈。

一个元素能够属于多个类

什么?一个元素能够属于多个类?到底怎么玩,废话不说,咱们上个例子就晓得了。上面的例子,是在上一个例子的根底上进行了小革新,看上面代码:

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title> 陪你温习坚固,攻破前端技能 </title>
        <style>
            .cc3 {
              background-color: blue;
              color: white;
              padding: 8px;
            }
            .css4 {text-align: center;}
        </style>
    </head>
    <body>
        <h2 class="cc3 css4"> 彩虹运维技术栈社区,公众号 ID:TtrOpsStack</h2>
        <p class="cc3"> 咱们会继续分享运维和运维开发畛域相干的技术文章 </p>
    </body>
</html>

成果如下图:

留神到这个语法了吗?class=”cc3 css4″,没错了!在下面的 style 中,别离对同一个 h2 元素进行设置了不同的 CSS 属性。也就是说,对同一个元素须要定义多个类,用空格分隔类名就能够实现啦!是不是太简略了啦?

类的复用

什么?类的复用怎么了解?也就是说不同的元素能够共享同一个类。其实这个概念,在之前的例子中都有用到啦!只不过还没有抛出这个概念而已,上面咱们来个小栗子,坚固一下。

这个例子是在上一个例子的根底上做了小革新,看上面代码:

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title> 陪你温习坚固,攻破前端技能 </title>
        <style>
            .share_class {
                background-color: blue;
                color: white;
                padding: 8px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <h2 class="share_class"> 彩虹运维技术栈社区,公众号 ID:TtrOpsStack</h2>
        <p class="share_class"> 咱们会继续分享运维和运维开发畛域相干的技术文章 </p>
    </body>
</html>

成果如下图:

留神到了吗?两个元素:h2 和 p 元素,都应用了雷同的类,类名叫 share_class,这就达到了复用的成果呀!

JavaScript 应用 class

截止目前,还没解说到 js,那么先讲个小知识点,js 如何应用 class 的。当然,外围的用法也是应用类名为指定的元素实现一些性能,在 JavaScript 里是通过 getElementsByClassName()办法来拜访元素中的类名,反言之,也能够说是通过 getElementsByClassName()办法来拜访带有指定类名的元素。对于 js 的常识,后续笔者会一一解说每个知识点,不急,咱们慢慢来。

上面,先来个小栗子,这例子很简略,通过 js 实现点击后暗藏 h2 和 p 元素的内容,上面看代码:

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title> 陪你温习坚固,攻破前端技能 </title>
    </head>
    <body>
        <button onclick="my_fun()"> 点击能够暗藏元素哦 </button>
        <h2 class="c1"> 彩虹运维技术栈社区,公众号 ID:TtrOpsStack</h2>
        <p class="c1"> 咱们会继续分享运维和运维开发畛域相干的技术文章 </p>

    <script>
        function my_fun() {var x = document.getElementsByClassName("c1");
          for (var i = 0; i < x.length; i++) {x[i].style.display = "none";
          }
        }
    </script>
    
    </body>
</html>

成果如下图:

  • 暗藏前
  • 暗藏后

看到成果了吗?暗藏的性能就是通过 js 实现的,js 很弱小,前面咱们一起专门分享 js 的知识点。

写在最初

好了,今晚的知识点分享到此为止啦!诚邀宽广盆友的关注,望多多点赞、转发、珍藏。

本篇转载于:https://mp.weixin.qq.com/s/c9…

退出移动版