产品经理的技术脑：html是什么意思？

文本标记语言（HTML）是用于在 Internet 上显示 Web 页面的主要标记语言。换句话说，网页由 HTML 组成，用于通过 Web 浏览器显示文本，图像或其他资源。

使用标记来描述文档结构和表现形式并通过浏览器进行解析,然后把结果显示在网页上. 它是网页构成的基础,你见到的所有网页都离不开HTML,所以学习HTML是基础中的基础。

什么是HTML？

HTML是用来制作网页的标记语言

HTML是Hypertext MarkupLanguage的英文缩写, 即超文本标记语言

HTML语言是一种标记语言,不需要编译,直接由浏 HTML语言是一种标记语言,不需要编译,直接由浏览器执行

HTML文件是一个文本文件,包含了一些HTML元素, HTML文件是一个文本文件,包含了一些HTML元素,标签等.

HTML文件必须使用html或htm为文件名后缀

HTML是大小写不敏感的,HTML与html是一样的

Html和CSS的关系

学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的：

1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

2. CSS样式是表现(外观控制)。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

3. JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

HTML形象案例理解

为了简化对复杂Internet的理解，暂时把复杂的Internet抽象成：向女生宿舍发送信号。

为了能够在断网后继续联络女神，我们买来了电池和开关，然后拉了普通电线线到女神的寝室。女神把小灯泡接在了电线的两端。

这时只需要开闭开关，就可以控制女神屋里的灯泡了。

发送信号

关闭着小灯泡1秒钟，代表发送一个0。

打开了小灯泡1秒钟，代表发送一个1。

此时可以向女神发送任意二进制内容了。

发送文本

我们只希望发送一个“Good Night”。所以必须想办法对“Good Night”进行编码。

'G','o','o','d'的ASCII编码是：071，111，111，100，转换成二进制就是：0100 0001 0110 1111 0110 1111 0110 0100

使用发送二进制信号的方法发过去，女神需要自己解码来阅读出“Good”。

发送富文本

有一天，我们希望发送“I miss you”。

为了表达心意，你希望加粗“you”，并使用红色的字体发送“miss”，而这一根简陋的电线似乎很难理解“加粗”和“红色”

于是机智的我们发送了：I <red>miss</red> <b>you</b>

同样机智的女神理解了这件事情。

你发明了一种语言

我们很喜欢这种编码格式，这是一种标记语言，于是我们称其为：TGML （To Girl Markup Language）

平时你使用TGML来和你的女神通信，TGML可以非常好的解决富文本的传输问题。

表白

终于决定表白了，我们绘制了很美丽的心形图片，还有两个按钮：接受、拒绝。

两个按钮分别会链接到 "接受.tgml"和"拒绝.tgml"

为了描述图片，我们使用了<img src="pic">

为了描述按钮，我们使用了<a href="接受.tgml">

现在发送给女神的内容，已经不只是带格式的富文本，而是带链接的富文本。

于是在这个世界上，拥有了一种能够描述超文本的语言，叫做TGML

超文本

描述超文本的方式有很多，例如：HTML，TGML，还有markdown。HTML的诞生是为了描述超文本。

超文本的用途也很多，例如：描述一个网页，或者描述一个Word文档。HTML文件是超文本文件。但是超文本未必是HTML。

Microsoft Word

Microsoft Word是Office的一个组件。它同样代表一个超文本资源。

如果你解压一个docx文件并仔细翻一翻，你能找到你刚才写的作业，是以HTML方式记载着。

当然，描述超文本还有markdown。所以你可以使用一些工具，比如pandoc，把markdown转换成word。

故事的结局

女神的名字叫浏览器，我们的名字叫Web服务器，女神和我们中间的那根线叫HTTP。

言

什么是 V8？JavaScript运行的背后发生了什么？

如果你是一个 JS 开发者或者是正在学习这门语言的学生，很大概率上你会遇到双字母词”V8”。在这篇文章中，我将会为你简述不同的 JS 引擎并深入探究 V8 引擎的工作机制。文章的第二部分涵盖了内存管理的概念，不久后将发布。

这篇文章是由 Bit (GitHub) 带来的。作为一个共享组件的平台，Bit 帮助每个人构建模块化的 JavaScript 应用程序，在项目和团队之间轻松地共享组件，同时实现更好&更快的构建。试试看。

1.编程语言是如何工作的？

在开始讲解 JavaScript 之前，我们首先要理解任意一门编程语言的基本工作方式。电脑是由微处理器构成的，我们通过书写代码来命令这台小巧但功能强大的机器。但是微处理器能理解什么语言？它们无法理解 Java，Python 等语言，而只懂机器码。

用机器语言或汇编语言编写企业级代码是不可行的，因此我们需要像 Java，Python 这样配带一个解释器或者编译器用于将其转换为机器码的高级语言。

1.1编译器和解释器

编译器/解释器可以用它处理的语言或任何其他语言来编写。

解释器：一行一行地快速读取和翻译文件。这就是 JavaScript 最初的工作原理。

编译器：编译器提前运行并创建一个文件，其中包含了输入文件的机器码转换。

有两种途径可以将 JavaScript 代码转换为机器码。编译代码时，机器对代码开始运行前将要发生的事情有更好的理解，这将加快稍后的执行速度。不过，在这个过程之前需要花费时间。

另一方面，解释代码时，执行是立即的，因此要更快，但是缺乏优化导致它在大型应用程序下运行缓慢。

创建 ECMAScript 引擎的人很聪明，他们集二者之长开发了 JIT(Just-in-time) 编译器。JavaScript 同时被编译和解释，但实际实现和顺序取决于引擎。我们将会看到 V8 团队采用的是什么策略。

2.从 JavaScript 到机器码

就 JavaScript 而言，有一个引擎将其转换为机器码。和其他语言类似，引擎可以用任何语言来开发，因此这样的引擎不止一个。

V8 是谷歌针对 Chorme 浏览器的引擎实现。
SpiderMonkey 是第一个引擎，针对网景浏览器开发，现用于驱动 FireFox。
JavaScriptCore 是苹果针对 Safari 浏览器使用的引擎。

还有很多，如果你想知道 Internet Explorer 背后的引擎，查看这个维基百科页面.

2.1 ECMAScript

面对这么多的引擎，你可能会问：我可以开发自己的引擎吗？可以，只要遵循 ECMAScript 标准。

如果我们打算做一个翻译器，那么就必须知道这两门语言的有效字。我们已经知道机器语言中什么是有效的了，但是对于 JavaScript，这是需要进行标准化的。

JavaScript 的标准化工作是由 Ecma 国际组织负责的，相关规范被称为 ECMAScript 或者 ES。因此，当你看到一篇文章/视频提到“ES7 有什么新特性？”时，你就知道它代表的是 ECMAScript 标准中新增的 JS 特性。

3.V8 引擎

3.1 部分历史

谷歌针对浏览器开发了谷歌地图，而这对浏览器的处理能力提出了很高的要求。那时的 JavaScript 实现尚不足以快速地运行地图。谷歌想要吸引更多的用户使用这项服务，从而进行广告销售并牟利。基于这个原因，这项服务必须快速且稳定。因此谷歌自己用 C++ 开发了 V8 引擎并在 2008 年启用，它的速度很快，或者就像一些人说的，它的速度是最快的。

3.2 解析和构建树

JavaScript 文件进入引擎后，解析器进行词法解析，它将代码分解成 token 以确定它们的含义。这些 token 组成了AST(抽象语法树)。

编译器在语义分析中验证语言元素和关键词的正确用法，而 ASTs 在这个过程中扮演着重要的角色。之后，ASTs 被用于生成实际的字节码或者机器码。

3.3 引擎的核心

我们之前谈到，JavaScript 是由 Ignition 这个解释器解释的，同时由 TurboFan 这个 JIT 优化编译器进行编译。

首先，前面步骤生成的 ASTs 传递给解释器，该解释器迅速生成未经过优化的机器码，并且其执行是无延迟的。

Profiler 在代码运行时进行观察，找出可以进行优化的地方。例如，一个‘for’循环跑了 100 次，但是每次迭代产生的结果都是一样的。

使用这个分析器后，任何未优化的代码都将传递给编译器以进行优化，同时生成机器码，它最终会替换掉之前由解释器生成的未优化代码中的对应部分。

随着分析器和编译器不断地更改字节码，JavaScript 的执行性能逐渐提高。

3.4 更多历史

在V8 的 5.9 版本推出之前，它使用两个优化编译器和一个基线编译器。

基线编译器 full-codegen 迅速生成未优化的机器码。
两个优化编译器 Crankshaft 和 TurboFan 用于优化代码。

JavaScript 增加了新的特性后，架构的复杂度上升，维护相同的管道对 V8 团队来说变得更加困难了。如果你想阅读更多相关的旧方法以及转向新管道的原因，可以访问他们的网站。

3.5 放眼未来

随着更多进一步提升性能的研究的进行，V8 引擎的工作机制在未来还可能发生变化。此外，随着 Webassembly 逐渐成形，可能会向管道添加额外步骤。

4.结论

ECMAScript 引擎的实现有很多，其中以谷歌的 V8 最为出名。希望这篇文章的简述不仅可以帮助你理解 JavaScript 的工作原理，还能从大体上了解一门编程语言的工作原理。如果你想了解 V8 团队的未来计划或者引擎的细节，这里有一篇很不错的博客。

关于本文

译者：@Chorer

译文：https://chorer.github.io//2019/05/10/Trs-Javascript 究竟是如何工作的？（第一部分）/

作者：@Priyesh Patel

原文：https://blog.bitsrc.io/how-does-javascript-really-work-part-1-7681dd54a36d

文节选自霍格沃兹测试开发学社内部教材

WEB 就是 World Wide Web 的缩写，称之为全球广域网，俗称 WWW。对于用户来说其实就是由多个网页组合在一起而形成一种服务。

WEB 前端负责展示一个网站当中前台网页里的内容。而网页是由前端工程师使用 HTML 语言编写而成的一种文件，它里面会包含文字、图片、超链接、音频、视频等等这些内容。

HTML 超文本标记语言（Hyper Text Markup Language）就是用来描述网页的一种计算机语言。

HTML发展

在互联网最初的时候是没有 HTML 的，只能通过网络传输最简单的文字内容。随着用户的要求越来越多，同时也随着技术的不断发展，就出现了一种可以表达文字内容之外的语言 HTML1.0。后来又慢慢发展到了现在的 HTML5，也就是现在常说的 H5。

HTML查看工具

在测试过程中，有时候需要通过工具去查看对应的 HTML 代码。在这里可以用浏览器自带的开发者工具，打开这个工具的快捷键是 F12。

开发者工具是一个相当强大的工具。可以查看修改 HTML，还可以调试 JS，可以修改 CSS，还可以查看网络数据，并且还能进行性能测试，非常的全能。对于 WEB 测试来说，是一个必须要掌握的工具。

要查看 HTML 源码，只需要进入开发者工具的 Elements 界面。在这里可以对 WEB 页面上的元素进行定位，并且查看整个 WEB 页面的 HTML 源码。

HTML基本结构

基本结构

网页是通过 HTML 语言来书写。用 HTML 语言去书写网页有一些结构是默认必须存在的，这个结构就叫做网页（HTML）骨架。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

HTML 基本标签

常见标签

<!DOCTYPE html>：向浏览器声明当前的文档是 HTML 类型。
<html> 与 </html> 之间的文本描述网页，<html>是网页当中最大的一个标签，称之为根标签。
<head> 与 </head> 描述网页头部，里面的内容是写给浏览器看的。
<meta charset="UTF-8"> 表示在设置当前网页的显示编码。
<title> 与 </title> 之间文本为网页的标题，里面的内容会在浏览器的标签页上显示。
<body> 与 </body> 之间的文本是网页主体，里面的内容会显示在浏览器的空白区域内。
<div> 与 </div> 之间定义网页中的一个分隔区块或者一个区域部分。
<h1> 与 </h1> 之间的文本被显示为标题。
<p> 与 </p> 之间的文本被显示为段落。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
</head>
<body>
    <div>
        <h1>我的第一个网页</h1>
        <p>网页中的内容</p>
    </div>
</body>
</html>

标签的属性

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。属性总是以名称/值对的形式出现，比如：name="value"。

属性的基本格式为：<标签名属性1="属性值1" 属性2="属性值2">

每个标签都可以拥有多个属性。属性必须写在开始标签中，位于标签名的后面。属性之间不区分顺序。标签名与属性、属性与属性之间使用空格隔开。任何属性都有默认值，省略该属性表示使用默认值。

在 HTML 里，属性也有很多种，比如首先有全局属性，全局属性是所有的标签都可以使用的。然后还有事件属性，事件大家可以理解为不同的操作。在不同的操作中，也有特殊的属性可以定义。最后还有各个标签的一些独有的属性。

比如常见的全局属性有:

class：规定元素的类名
id：规定元素的唯一 id

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
</head>
<body>
    <div id="first" class="content">网页中的内容</div>
</body>
</html>

来霍格沃兹测试开发学社，学习更多软件测试与测试开发的进阶技术，知识点涵盖web自动化测试 app自动化测试、接口自动化测试、测试框架、性能测试、安全测试、持续集成/持续交付/DevOps，测试左移、测试右移、精准测试、测试平台开发、测试管理等内容，课程技术涵盖bash、pytest、junit、selenium、appium、postman、requests、httprunner、jmeter、jenkins、docker、k8s、elk、sonarqube、jacoco、jvm-sandbox等相关技术，全面提升测试开发工程师的技术实力。

获取更多内容：https://qrcode.testing-studio.com/f?from=toutiao&url=https://ceshiren.com/t/topic/16586

在线咨询

上一篇：HTML5入门
下一篇：html基础必备-分隔标记，前端小白一看就会

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商