產品經理的技術腦：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 基本標簽

標簽

標簽就是 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小時內與您取得聯系。

整合營銷服務商