API參考文檔

ndroid 中文版：http://www.apiref.com/android-zh/index.html

Bootstrap3 教程：http://www.apiref.com/bootstrap3-zh/index.html

Bootstrap4 教程：http://www.apiref.com/bootstrap4-zh/index.html

CSS 手冊：http://www.apiref.com/css-zh/index.htm

C語言：http://www.apiref.com/c-zh/index.html

Hibernate 5：http://www.apiref.com/hibernate5/overview-summary.html

Java 11 中文版：http://www.apiref.com/java11-zh/index.html

Java 13：http://www.apiref.com/java13/index.html

jQuery 手冊：http://www.apiref.com/jquery-zh/index.html

MyBatis：http://www.apiref.com/mybatis/index.html

PHP：http://www.apiref.com/php/index.html

PHP 中文版：http://www.apiref.com/php-zh/index.html

Python 中文版：http://www.apiref.com/python-zh/index.html

Spring 5：http://www.apiref.com/spring5/index.html

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

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

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

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

以下內容節(jié)選自實驗樓訓練營課程《Vue.js 和 Node.js 構建內容發(fā)布系統(tǒng)》。

實驗介紹

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

知識點

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

前端技術簡介

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

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

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

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

HTML

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

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

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

mkdir demo

然后命令行進入 demo 目錄：

cd ./demo

新建一個 hello.html 文件，可以在實驗環(huán)境左邊的瀏覽框內在 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>

保存之后切換到瀏覽標簽看一看，有沒有感覺被忽悠了？嵌套沒嵌套根本沒體現(xiàn)出來，就像 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 出現(xiàn)了標簽屬性，屬性為 attr="value" 格式，可以給標簽增加更豐富的信息。

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

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

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

CSS

CSS 全稱層疊樣式表，是專門用來修飾 HTML 樣式的一種語言。我們修改一下上節(jié)的 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>

這是再切換到預覽頁，發(fā)現(xiàn)沒那么平鋪直敘了。

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

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

讀代碼也就大概知道了，我們將 div 的邊框設置為 1 像素寬、固體（單線型）、藍色，填充（內邊距）2 像素，邊緣空白（外邊距）10 像素。現(xiàn)在可以練習調整一下各個數(shù)字，預覽看看發(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" />

預覽看看，文字顏色變?yōu)榫G色，邊框的樣式也被更新為 2 像素寬、點線型紅色。

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

行間樣式

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

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

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

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

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

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

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

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

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

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

JavaScript

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

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

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

在 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 代碼加載之后就會執(zhí)行，不存在編譯階段。行末的分號絕大多數(shù)時候可以省略。

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

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

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

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

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

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

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

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

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

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

以上內容節(jié)選自實驗樓訓練營課程《Vue.js 和 Node.js 構建內容發(fā)布系統(tǒng)》。

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

課程會提供完整的虛擬機環(huán)境，手把手教大家如何從頭構建實現(xiàn)一個前后端分離的內容發(fā)布系統(tǒng)，包括了前端頁面、后端服務、數(shù)據庫等。

avaScript 調試

在沒有調試器的情況下寫 JavaScript 是有難度的。

您的代碼中也許包含了語法錯誤，或者邏輯錯誤，這些都難以診斷。

通常，如果 JavaScript 代碼包含錯誤，也不會發(fā)生任何事情。不會有錯誤消息，并且不會有任何可供查找錯誤的指示信息。

通常，每當你嘗試編寫新的 JavaScript 代碼，就可能發(fā)生錯誤。

JavaScript 調試器

查找編程代碼中的錯誤被稱為代碼調試。

調試并不簡單。但幸運地是，所有現(xiàn)代瀏覽器都有內置的調試器。

內置的調試器可打開或關閉，強制將錯誤報告給用戶。

通過調試器，您也可以設置斷點（代碼執(zhí)行被中斷的位置），并在代碼執(zhí)行時檢查變量。

通常通過 F12 鍵啟動瀏覽器中的調試器，然后在調試器菜單中選擇“控制臺”。

console.log() 方法

如果您的瀏覽器支持調試，那么您可以使用 console.log() 在調試窗口中顯示 JavaScript 的值：

實例

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>

<script>
a=5;
b=6;
c=a + b;
console.log(c);
</script>

</body>
</html>

親自試一試

提示：請訪問我們的 JavaScript Console 參考手冊，獲取更多有關 console.log() 方法的信息。

設置斷點

在調試窗口中，您可在 JavaScript 代碼中設置斷點。

在每個斷點中，JavaScript 將停止執(zhí)行，以使您能夠檢查 JavaScript 的值。

在檢查值之后，您可以恢復代碼執(zhí)行。

debugger 關鍵詞

debugger 關鍵詞會停止 JavaScript 的執(zhí)行，并調用（如果有）調試函數(shù)。

這與在調試器中設置斷點的功能是一樣的。

如果調試器不可用，debugger 語句沒有效果。

如果調試器已打開，此代碼會在執(zhí)行第三行之前停止運行。

實例

var x=15 * 5;
debugger;
document.getElementbyId("demo").innerHTML=x;

親自試一試

主流瀏覽器的調試工具

通常，您在瀏覽器中通過 F12 鍵啟用調試，并在調試器菜單中選擇“控制臺”。

否則請按照以下步驟：

Chrome

打開瀏覽器
從菜單中選擇工具
從工具中選擇開發(fā)者工具
最后，選擇控制臺

Firefox Firebug

打開瀏覽器
前往網頁：http://www.getfirebug.com
根據如下指令：如何安裝 Firebug

Internet Explorer

打開瀏覽器
從菜單選擇工具
從工具選擇開發(fā)者工具
最后，選擇控制臺

Opera

打開瀏覽器
請前往網頁：http://dev.opera.com
根據如下指令：如何安裝 Firebug Lite

Safari Develop Menu

點擊 Safari 菜單，偏好設置，高級
選中“在菜單欄中啟用開發(fā)菜單”
當菜單中出現(xiàn)新選項“開發(fā)”時，選擇“顯示錯誤控制臺”

您知道嗎？

調試是測試、找到并減少計算機程序中 bug（錯誤）的過程。

歷史上首個已知的計算機 bug 是一只卡在電子器件中的真實的蟲子（一種昆蟲）。

在線咨詢

上一篇：WordPress編輯器支持Word圖片粘貼
下一篇：手機壞了不要怕教你簡單幾招自己修

您的項目需求

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

整合營銷服務商