細說HTML、CSS、JavaScript三者之間的

細說HTML、CSS、JavaScript三者之間的區別及學習建議！

HTML、CSS、JavaScript是前端學習非常重要的內容，作為前端工程師，建立網站，設計網頁需要有一定的審美能力，也需要一定的編程技術。總之，技術性越來越強。學習前端這三大塊內容，可以先從HTML入手，其次是CSS，在打好這兩部分的基礎上，進一步學習JavaScript。

WEB可以被看做是一個有生命的物體或人體，HTML可以視為骨骼和肌肉，CSS可以視為皮膚和毛發，而JavaScript可以視為受一定支配的行為。這樣比喻不一定完全恰當，但可以幫我們更好的理解這三者之間的關系。本文，千鋒武漢HTML5前端培訓小編就來詳細說說HTML、CSS、JavaScript三者之間的區別！

先從HTML說起：

作為網頁內容的載體，HTML包含了用戶需要瀏覽的內容，包括圖文、視頻，即構成網頁的基本元素。HTML是網頁的結構（Structure），需要有多種框架和布局，比如frameset框架集、iframe內聯框架、div+css布局、table布局等，同時支持表單提交（HTML Form），包括基礎表單、input輸入框、輸入框類型、文本域、列表、label等。當前，大家通用的是HTML5，其中還有一些新增元素，比如footer、header等，總之，HTML的功能越來越強大，作為初學者還是要把握主干，有重點地去學習。

其次是CSS：

CSS的作用是效果，或者說是表現（Presentation），比如網頁上的動態文字、文字的色彩、字體、動畫效果。正是因為CSS的存在使得HTML變得豐富多樣。學習CSS，可以從版本CSS3開始，要了解CSS3的動畫效果，如2D變換、過渡、特殊圖形的繪制，雪碧圖、滑動門等等都是常見的效果；除此之外，CSS3還有媒體查詢（Media Queries）、grid，以及多列布局、用戶界面等。CSS部分需要配合HTML，并結合實例來加以學習，這樣效果會跟好。

最后要說一說JavaScript：

如果說一個網頁只有“結構”和“表現”，而缺少了用戶與網頁的交互，即行為（Behavior），那么這樣的網頁就如一潭死水，無法形成良好的用戶體驗。好的用戶體驗不僅可以讓用戶鼠標放在哪里、哪里就會產生人性化的效果，而且可以增強用戶的可操作性，例如購物網站用戶的訂購，網頁會實時顯示用戶的購物動態。這樣一來，JavaScript就有了編程的意味。和其他編程語言一樣，JavaScript也有數據類型、條件語句、分支語句、字符串詳解、數組詳解、對象、函數、數值、Math函數、作用域。如果這一部分可以學會，便可以往更深的內容去發展。

如今，大前端的時代已經來臨，熟練使用HTML5、CSS3，對前端人員的制作要求越來越高，能否做出酷炫的效果成為衡量前端技術的一個標準。作為前端開發工程師，將PC、手機、iPad等多種設備全面掌握并能提供客戶需要的解決方案，精通響應式技術，是必備的能力。如今微信小游戲的開發也是前端開發的重點，值得初學者多多關注。

千鋒武漢HTML5前端培訓小編建議大家重視一下移動端的開發，畢竟移動端的用戶數量高于PC端，移動端更適合碎片化的消費人群，市場較為廣闊。在未來幾十年都將是主流HTML5崗位薪資高，人才缺口超過百萬，現在學習正是最佳時機。所以，你還在等什么？快來學HTML5吧！

到前端技術，不少朋友一定會感到有些陌生。但其實，前端，你每天都在接觸。

你正在使用的APP，你正在瀏覽的網頁，這些你能看到的界面，都屬于前端。

而前端最重要的三大技術，HTML，CSS，JavaScript，則是每一個前端開發者必須具備的技能。

掌握這些技能，你可以快速地做出一個酷炫的APP界面或者一個簡單大方的網站頁面。因此，就讓我們一起來快速學習一下這三門技術吧。

以下內容節選自實驗樓訓練營課程《Vue.js 和 Node.js 構建內容發布系統》。

實驗介紹

本實驗主要介紹一下前端的基礎知識，對比認識一下各個框架的代碼編寫方式，并介紹我們本次技術選型的主要思路。對于前端三大技術 HTML、CSS、JavaScript，簡單的介紹了基本情況和常用語法。中間介紹了現代框架的一些情況，并通過實際的案例，用代碼直觀的認識一下各種框架的實現方式。最后分析一下項目的技術選型。

知識點

HTML、CSS、JavaScript 快速概覽
前端框架概覽和選型
后端選型
數據庫選型
Web 服務器選型

前端技術簡介

本節我們簡單介紹一下前端最基礎 HTML, CSS, JavaScript 三駕馬車。雖然本課程預設的讀者為零基礎開發者，但是前端開發一定會這三種技術的運用有要求。建議抽空學習《 Web 前端工程師路徑》中的階段 1 甚至階段 2。這里僅做語法介紹和基本使用的概覽。

在此之前先認識一下實驗環境。實驗環境和 VS Code 使用體驗基本一致。你可以啟動一個終端，并在其中輸入 Linux 命令。

后面的命令無特殊說明的都是在此終端命令行中輸入。大多數命令可以多開終端窗口分別執行。

那么下面我們就快速的了解一下。

HTML

HTML 全稱超文本標記語言，幾乎是從萬維網和瀏覽器產生伊始就存在的。主要用于結構化信息來方便瀏覽器展示。

以標簽對作為主要特征，如<p>這是一個段落</p>。這些標簽會被瀏覽器解析成不同的模塊，比如 p 標簽就是一個段落，img 標簽就是一個圖片，a 標簽就是一個超鏈接，標簽名不區分大小寫。

立刻就來嘗試一下吧。首先通過命令行新建一個 demo 目錄：

mkdir demo

然后命令行進入 demo 目錄：

cd ./demo

新建一個 hello.html 文件，可以在實驗環境左邊的瀏覽框內在 demo 上右鍵選擇 New File 然后命名為 hello.html；或者也可在命令行終端輸入 touch hello.html，同樣是新建文件。

在其中輸入以下內容：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>標題</title>
  </head>
  <body>
    正文
  </body>
</html>

然后右擊文件選擇 Open With → Preview。

看到了嗎？其實我們就是新建了一個 .html 后綴的文本文件，然后瀏覽器就可以將其中的內容展示出來。你也可以在自己的桌面上新建一個，然后使用瀏覽器打開看看效果。

這里嵌套代碼的縮進格式是為了美觀和可讀性，并無嚴格要求。

head 標簽中是一些暫時無需用到的頭部信息，渲染的主體是 body 標簽。下面我們修改 body 標簽里面的內容，填入一些常用標簽來直觀感受一下。

<body>
  <h1>頁面標題</h1>
  <div>一個塊容器</div>
  <div>又一個塊容器</div>
  <p>這里是段落了，間距變大</p>
  <div>一個塊容器</div>
  <div>
    <div>
      多層嵌套：
      <div>內部第一個</div>
      <div>內部第二個</div>
    </div>
  </div>
</body>

保存之后切換到瀏覽標簽看一看，有沒有感覺被忽悠了？嵌套沒嵌套根本沒體現出來，就像 Word 里排了一下版，按了幾個回車。

因為我們沒有對顯示樣式進行修改，那是 CSS 的事。HTML 主要管內容的組織結構。

這里有一點針對學習的小建議，本課程中給到的全部代碼請手動輸入，忘記復制和粘貼快捷鍵。

而且最好不要機械的一個字符一個字符照著抄，盡量看過一行或一小段代碼之后，靠短暫的印象去輸出，別怕出錯，只有過腦子并輸出實踐，才是最快掌握一項技能的捷徑。

以上兩句話是本課程中最有價值內容之一。

下面我們接著修改剛才的代碼，再給 body 中添加幾個常用標簽。每次修改和保存之后記得到預覽頁看看樣式的變化。

<h4>4 級標題</h4>

<ul>
  <li>
    HTML
  </li>
  <li>
    CSS
  </li>
  <li>
    JavaScript
  </li>
</ul>

<div>
  <a href="https://www.shiyanlou.com" target="_blank"
    >點擊超鏈接跳轉至實驗樓首頁</a
  >
</div>

<div>
  <img
    src="https://static.shiyanlou.com/frontend/dist/img/9f43b00.svg"
    alt=""
    width="200"
  />
</div>

最后的鏈接標簽 a 和圖片標簽 img 出現了標簽屬性，屬性為 attr="value" 格式，可以給標簽增加更豐富的信息。

同時 img 標簽還是一個單標簽，不需要在后面添加 </img> 配合使用。

至此對 HTML 的簡要介紹告一段落。

互聯網上看到的各種五彩繽紛網頁都是由這些 HTML 組成的，但是為什么我們寫的這么難看？下一節我們就要學習一下如何用 CSS 美化頁面。

CSS

CSS 全稱層疊樣式表，是專門用來修飾 HTML 樣式的一種語言。我們修改一下上節的 hello.html 文件來直觀感受一下。

內部代碼塊引入

在 head 標簽內部增加以下 style 代碼塊：

<head>
  <meta charset="UTF-8" />
  <title>標題</title>
  <style type="text/css">
    div {
      border: 1px solid blue;
      padding: 2px;
      margin: 10px;
    }
  </style>
</head>

這是再切換到預覽頁，發現沒那么平鋪直敘了。

這就是 CSS 的第一種引入方式，HTML 內置代碼塊。

大括號外面的 div 是標簽選擇器，這里選中了本頁面中的所有 div 元素。大括號里面是屬性名與賦值，屬性名都是固定的關鍵字，并已規定好了值的類型和可選范圍。

讀代碼也就大概知道了，我們將 div 的邊框設置為 1 像素寬、固體（單線型）、藍色，填充（內邊距）2 像素，邊緣空白（外邊距）10 像素?，F在可以練習調整一下各個數字，預覽看看發生了什么？

再說點題外話，懂一些英文對程序員來說非常必要，除了可以憑感覺就讀懂沒學過的代碼，還可以在面向 Google 編程、面向 Stack Overflow 編程、面向 Github Issues 編程時游刃有余。

外部文件引入

然后我們再試一下外部文件引入，在 hello.html 的同級目錄新建 hello.css，輸入以下內容保存：

div {
  color: green;
  border: 2px dotted red;
}

然后修改 hello.html，在 style 標簽后面增加一行 link 標簽，添加引入類型和地址：

<style type="text/css">
  div {
    border: 1px solid blue;
    padding: 2px;
    margin: 10px;
  }
</style>
<link rel="stylesheet" href="hello.css" />

預覽看看，文字顏色變為綠色，邊框的樣式也被更新為 2 像素寬、點線型紅色。

同樣是 div 選擇器，為什么邊框的樣式被覆蓋了呢？注意 CSS 在同樣條件下會后面代碼覆蓋前面，可以嘗試交換 link 標簽和 style 標簽塊的順序看看。

行間樣式

最后一種叫行間樣式，這個結構更簡單。修改 hello.html 中的 <div>內部第一個</div> 為

<div style="margin: 60px 0 10px 30px ;color:purple;">內部第一個</div>

樣式覆蓋前兩種方式了，因為行間樣式的優先級較高。這里涉及到選擇器權重，先給一個簡單公式了解一下。

!important > 行間樣式 > ID > class | 偽類 | 屬性選擇 > 標簽 > 繼承 | 通配符。

多個選擇器作用時權重相加。這里算 CSS 里有點復雜的部分，暫時不展開。

這里還有個小知識點是內外邊距 margin 和 padding 接受的完整的值是四個，順序固定為“上右下左”。如果省略參數則從末尾計算對向合并。比如：

margin:40px 20px 50px; 三個參數時，左右同為 20px。

margin:40px 20px; 兩個參數時上下同為 40px, 左右同為 20px。

margin:40px; 一個參數時呢？請自行嘗試理解。

CSS 先講這么多，雖然沒有把我們的頁面變多好看，但最起碼知道努力的方向了。

JavaScript

制作 JavaScript 的快速入門簡直非常傷腦筋。比起前兩種技術 HTML 和 CSS，這是貨真價實的編程語言了。

也是我們后面要用到的 Vue.js 和 Node.js 中的根基，一下子又很難講很多，所以還是希望同學們能重視起來系統學習一下，最起碼讀到后面的代碼時不至于陷入“這是啥這又是啥”的窘境。

來段代碼直觀認知一下，還是先內部代碼塊引入。

在 hello.html 的 head 標簽內增加一個代碼塊：

    <link rel="stylesheet" href="./hello.css">
    <script>
      let message="字符串提示";
      function showMSG(msg) {
        alert(msg);
      }
    </script>

修改 hello.html 的 h1 標簽為：

<h1 onclick="showMSG(message)">頁面標題</h1>

保存預覽，點擊“頁面標題”，會彈出提示框。

JavaScript 代碼加載之后就會執行，不存在編譯階段。行末的分號絕大多數時候可以省略。

我們先定義了一個變量 message，并賦值為“字符串提示”。定義變量關鍵字原是 var，ES6 新增關鍵字 let 有更清晰的作用域，可替代使用。

學習 JavaScript 經常會碰到 ES6、ES7 之類的名詞，實際上是 ECMAScript 標準的版本號的意思。可以簡單理解為新版標準為 JavaScript 添加特定新特性。

然后我們定義了一個函數 showMSG，并添加一個形參 msg。在函數體內部調用瀏覽器彈框方法，顯示 msg 的值。function 是定義函數的關鍵字，暫時先把它當做一個功能封閉的盒子，當函數調用時，執行函數體內的代碼。

調用部分是先給 h1 標簽添加了 onclick 點擊事件，被點擊時觸發 showMSG(message)，也就是把 message 傳給了 msg。

之后再試一下調用外部 js 文件，新建 demo.js 文件，寫入下面內容并保存。

message="修改一下字符串";

然后修改 hello.html 文件，在 script 代碼塊后面增加一行：

<script src="./demo.js"></script>

這次保存預覽，點擊“頁面標題”，可以看到彈窗的文字變了。這個演示了 script 代碼塊在頁面可以同時存在多個，也是順序調用，而且互相之間可以直接訪問。文件命名也沒有要求，希望不會逼死強迫癥。

JavaScript 就是為什么網頁可以做那么多交互的源頭了。掌握起來任重道遠。

以上內容節選自實驗樓訓練營課程《Vue.js 和 Node.js 構建內容發布系統》。

這三門前端技術先了解到這里，想要更深入學習如何使用前端技術構建內容發布系統，比如做個高逼格的博客，搭建一個交流社區，或者為企業制作官網等，可以訪問實驗樓官網，搜索《Vue.js 和 Node.js 構建內容發布系統》這門課。

課程會提供完整的虛擬機環境，手把手教大家如何從頭構建實現一個前后端分離的內容發布系統，包括了前端頁面、后端服務、數據庫等。

紹

VvvebJs是一個開源的網頁拖拽自動生成的JavaScript庫，你可以以簡單拖拽的方式生成自己需要的網頁樣式，內置jquery和Bootstrap，你可以拖拽相關的組件進行網頁的構建，非常的方便，而且可以實時修改代碼，功能豐富，使用簡單，界面友好，特別適合一些專注于展示的網頁設計，需要的朋友不可錯過！

Github地址

https://github.com/givanz/VvvebJs

使用方式

如下代碼：

<!-- jquery-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.hotkeys.js"></script>
<!-- bootstrap-->
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- builder code-->
<script src="libs/builder/builder.js"></script>	
<!-- undo manager-->
<script src="libs/builder/undo.js"></script>	
<!-- inputs-->
<script src="libs/builder/inputs.js"></script>	
<!-- components-->
<script src="libs/builder/components-bootstrap4.js"></script>	
<script src="libs/builder/components-widgets.js"></script>	
<script>
$(document).ready(function() 
{
	Vvveb.Builder.init('demo/index.html', function() {
		//load code after page is loaded here
		Vvveb.Gui.init();
	});
});
</script>

要初始化編輯器，調用Vvveb.Builder.init。第一個參數是要加載以進行編輯的URL，它必須位于相同的子域中才能進行編輯。第二個參數是頁面加載完成時調用的函數，默認情況下調用編輯器Gui.init();

結構

Component Group是一個組件集合，例如Bootstrap 4組由Button和Grid等組件組成，該對象僅用于在編輯器左側面板中對組件進行分組。例如，Widgets組件組只有兩個組件視頻和地圖，并被定義為如下

Vvveb.ComponentsGroup['Widgets']=["widgets/googlemaps", "widgets/video"];

Component是一個對象，它提供可以在畫布上放置的html以及在選擇組件時可以編輯的屬性，例如Video Component，具有Url和Target屬性的html鏈接Component定義為：

Vvveb.Components.extend("_base", "html/link", {
 nodes: ["a"],
 name: "Link",
 properties: [{
 name: "Url",
 key: "href",
 htmlAttr: "href",
 inputtype: LinkInput
 }, {
 name: "Target",
 key: "target",
 htmlAttr: "target",
 inputtype: TextInput
 }]
});

在Component屬性集合中使用Input對象來編輯屬性，例如文本輸入，選擇，顏色，網格行等。例如，TextInput擴展Input對象并定義為：

var TextInput=$.extend({}, Input, {
 events: {
 "keyup": ['onChange', 'input'],
	 },
	setValue: function(value) {
		$('input', this.element).val(value);
	},
	
	init: function(data) {
		return this.render("textinput", data);
	},
 }
);

輸入還需要一個在編輯器html（在editor.html中）定義為<script>標簽的模板，其id為vvveb-input-inputname，例如對于文本輸入為vvveb-input-textinput，定義：

<script id="vvveb-input-textinput" type="text/html">
	
	<div>
		<input name="{%=key%}" type="text" class="form-control"/>
	</div>
	
</script>

以上是借助瀏覽器翻譯工具，對官網的文檔進行簡單的翻譯，可能會有些不夠準確的地方，感興趣的小伙伴可以直接查看相關文檔！

設計界面預覽

總結

VvvebJs是一個非常強大的網頁可視化生成構建工具，讓不懂網頁設計的小伙伴們也能夠通過拖拽來生成美觀大方的網頁出來，讓設計網頁就像設計圖片一樣，VvvebJs特別適合展示型網頁，甚至可以不需要代碼就能完成一項復雜的網頁設計，總體來說，VvvebJs是一個值得嘗試的工具！

在線咨詢

上一篇：HTML5(三)-Web 本地存儲
下一篇：如何在vs code中開發C# winform窗口應

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

細說HTML、CSS、JavaScript三者之間的

實驗介紹

知識點

前端技術簡介

HTML

CSS

JavaScript

紹

Github地址

相關特性

使用方式

設計界面預覽

總結

您的項目需求

整合營銷服務商

細說HTML、CSS、JavaScript三者之間的

實驗介紹

知識點

前端技術簡介

HTML

CSS

JavaScript

紹

Github地址

相關特性

使用方式

設計界面預覽

總結

您的項目需求

細說HTML、CSS、JavaScript三者之間的