整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML基础教程:类了解一下

HTML基础教程:类了解一下

TML 类

对 HTML 进行分类(设置类),使我们能够为元素的类定义 CSS 样式。

为相同的类设置相同的样式,或者为不同的类设置不同的样式。

下面是一个例子

<html>
<head>
<style>
.a {
 background-color:black;
 color:white;
 margin:20px;
 padding:20px;
}	
</style>
</head>
<body>
<div class="a">
<h2>标题</h2>
<p>内容第一段,天华信息教育,欢迎关注我,我会和大家分享你想知道的.</p>
<p>内容第二段,天华信息教育,欢迎关注我,我会和大家分享你想知道的.</p>
</div> 
</body>
</html>

HTML基础教程: 类了解一下

图是一至六级标题.HTML代码是怎么样的?(自学示例1)

一级标题至六级标题

标题标签表示一段文字的标题或主题,并支持多层的内容结构。例如一级标题采用<h1>,二级标题采用<h2>,其他级别标题以此类推。HTML共提供了六级标题 <h1>~<h6>.并赋予了标题一定的外观,所有标题字体加粗,<h1>最大<h6>最小。

通过使用WebStorm工具,代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>不同等级的标题标签对比</title>
</head>
<body>
<h1>头条号</h1>
<h2>头条号</h2>
<h3>头条号</h3>
<h4>头条号</h4>
<h5>头条号</h5>
<h6>头条号</h6>
</body>
</html>

是不是很简单,自己操作试一下吧。

这里的<html lang="en">可以理解为我编辑的这个页面是英文的。Chrome之类的浏览器会提示是否需要翻译。

阶高级前端系列——JavaScript的"类"和继承

近期似乎总是能在各种场合听到"程序员中年危机"这种言论,说是程序员到了35岁就会很难跳槽,很容易被优化等等。其实在今年疫情影响下各行各业经济都不景气,公司手里没钱肯定要节省成本,35岁的人一般对工资的要求比较高,所以对这种比较高级的程序员需求就会降低。当然除此之外肯定也有其他大家都在说的原因,例如精力不如毕业生,没有年轻人能加班能干活,不能走入管理岗的中年人就会被淘汰等等。

其实个人感觉,虽然国内环境比较浮躁,但是渴望高级技术人才的公司还是大有人在,打开招聘软件还是能找到不少高级前端的招聘信息。到了中年靠的应该是自己的经验和技术,去做一些更加高级的事情。既然做了开发这一行,我想大家大部分都是想专心做一些技术工作,少一些应酬和虚与委蛇,但是不可否认的是,随着vue、react等等这种非常强大的框架普及,大部分程序员做的都是一些"最没技术含量的技术",简单地复制粘贴,查找官方文档照着写,很少再去关心技术细节,时间久了自然会被淘汰。

啰嗦了这么多,其实也是说给自己听的,要做高级的事情就要离开自己的舒适区,去钻研一些高级的事情。

今天就一起讨论一下JavaScript的"类"和继承。

如果你想用JavaScript做一些高级的事情,例如打造组件库,封装插件,一定离不开"类"和继承,这是"封装"里无法绕过的一环。

为什么要给"类"加上引号呢?

因为JavaScript的世界里根本没有类,所有你见到的类,包括ES6里的新语法class,都不是真正的类,JavaScript是彻头彻尾的,纯粹到极致的面向对象语言,一切皆对象。

我劝你最好暂时忘了之前接触过的所有面向对象语言。因为他们可能早已深深地误导了你。

JavaScript的"类"和继承实际上是利用原型链来实现的。例如下面的代码:



这是js一个最常用的利用构造函数声明类的形式,里面有我们熟悉的new关键词,表面上看确实是先有了Foo类然后用new实例化了一个对象。

但实际上Foo只是一个函数,它和其它函数没有什么不同,函数也是对象,直接像普通函数一样直接调用Foo也不会出错,加上new之后只是多了几个操作:

  1. 创建一个新对象;
  2. 执行Foo函数,并将Foo的this绑定到新对象;
  3. 把新对象的_proto_指向Foo的prototype;
  4. 如果Foo方法没有返回其它内容的话,返回这个新对象;

这里我们看到a1并没有say()方法,但是a1.say()却正常运行了,这是原型链的作用,a1没有say属性,就去原型上查找,最终在Foo.prototype里找到。

关于什么是原型链这里就不细说了,这属于js基础,不在高级讨论范围内。

上面代码本质上我们是利用一个函数对象(Foo)又创建了另一个对象(a1),根本没有传统意义上的类!

嗯?等一下!利用对象生成对象?这不应该是Object.create()该干的事儿吗?没错,上面的代码完全可以利用Object.create()重构!

这种写法更符合JavaScript一切皆对象的说法!而且更加清楚易懂,原型链从上到下清晰可见。

JavaScript的new真是个千古大忽悠!还有更忽悠的,ES6里的class,让js的本质更加扑朔迷离:



多么美丽的代码,多么让人沉浸无法自拔,当当当!给我清醒点!千万别让它美丽的外表迷惑!照妖镜拿来!给我看清楚了,它的本质跟第一段代码完全一样!语法糖而已,实际上这里并没有真正的类,class 仍然是通过 [[Prototype]]机制实现的。

我们再来看看继承。

因为JavaScript没有真正的类,所以所谓的继承也都是一些掩人耳目的做法,通过各种恶心的手段达到复用和重写的目的,来看看有多恶心:



代码里SubFoo继承了Foo,并且SubFoo重写了Foo的say方法,里面充满了大量的xxx.prototype,为了让SubFoo和Foo扯上关系,必须让它们的原型链接起来:SubFoo.prototype=Object.create(Foo.prototype)。还有许多难以理解的借调(xxx.call()),特别是为了达到继承Foo的say方法而写的这一句:Foo.prototype.say.call(this),多么的丑陋。对于当初涉世未深的你能理解这几句代码里面的含义吗?为了理解这些你花了多久?

为了我脑袋上所剩无几的头发,呸!

当然有了ES6后情况有所好转:

还是那句话,语法糖而已,本质上还是要让Foo和SubFoo两个小东西互相扯来扯去,如果再深入一点——加上二级、三级继承——情况会无法想象地复杂。

说到底这些其实都是强行使用类的思想来理解JavaScript的一切皆对象而出现的"变态"代码。如果你放下屠刀,换一个思路,使用JavaScript语言最初的设计思路就会发现,一切其实非常简单,我们用一切皆对象的思路再来实现一遍上面的逻辑:


怎么样?没有了乱七八糟的prototype和构造函数,不用担心原型链的走向,一切清新自然,而且最重要的,一切都是对象。

这种实现方式的官方叫法(非人话叫法)就是"行为委托"。在行为委托模式中,Foo和 SubFoo只是对象,它们之间是兄弟关系,并不是父类和子类的关系。代码中 Foo委托了 SubFoo,反向委托也完全没问题,我们也不需要实例化类,因为它们根本就不是类,它们只是对象。此外,我们摆脱了一大堆的prototype和借调,我们使用了一种极其简单的方式完成了封装。

当然往深处里讲,上述几种方式每个方式都有自己的优缺点。不能很武断地说这个好那个不好,在不同场景里选择最合适的实现方式是作为一名高级技术人员时刻该考虑的事情。