Hobbies 興趣

網頁開發 HTML CSS JavaScript Web Development HTML CSS JavaScript

HTML CSS JavaScript 的基礎介紹以及建立最基本的網頁。

MS

MS

— 8 min read
網頁開發 HTML CSS JavaScript Web Development HTML CSS JavaScript
Web Development HTML CSS JavaScript Cover

這是我的第一堂課，我學到光是有理論，沒有行動就不能說你學會了，對我來説真的很有用。因爲紙上得來終覺淺

如果不分享的話，我會忘光光，現在先來寫看我對於網絡開發的見解，網絡開發分爲前端以及後端，前端大致上是由 HTML CSS JavaScript 組成的，基本上各自代表著：結構，裝潢，應用。

HTML

有時候我會不小心説成 HDMI 這是完全不同的東西，最簡單解釋的 HTML 就是在一個網站的基礎架構，我們可以比喻為一間房子的地基，墻壁，橫梁等的一切基礎建設。

CSS

CSS 算是用來設置排版，圖片大小，字體等，用來美化網站。如果用房子來比喻就是裝潢，就像墻壁粉刷，風格。

JavaScript

JavaScript 在網站的作用就是功能相關的，讓網站具備一些功能性，如果有留意一些網站可能有暗色背景開關，大部分都是用JavaScript實現網站的功能。還是用意見屋子來比喻：JavaScript 就是房子的電源開關，自動門，門鈴之類的功能性應用。

其實 HTML 和 CSS 其實是算是備注，設定文檔，JavaScript 才是真正的程式語言，但是大多網頁開發都的同時具備這三樣的知識，才能稱得上前端開發者。如果連後端也會的話那就是全棧開發 Full-stack Development。

如何開始？

⌨️
推薦 VS Code (Visual Studio Code) 作爲主要編輯器。

從0到1的過程其實是最不容易的，像我如果沒有課程，也許我到今天也不知道如何創建一個網站。最爲簡單的創作就是用對工具，在我推薦中理所當然的是推薦我最爲熟悉的VSCode作爲我的代碼編輯器code editor ，當然這是個人習慣，你也可以用NotePad創建也是沒問題的。

⌨️
這教程就是在 Windows 上使用 VS Code 創建HTML 文件的過程。並不涉及任何的終端指令。

下載以及安裝 VS Code ，又或是在 Microsoft Store 搜索 Visual Studio Code 安裝即可。

到 File > New Text File > Select a Language > HTML

接著在空白的文件中輸入 HTML 在選擇其中的HTML：5就會自動完成創建空白的HTML 文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

基本的HTML barebone

最簡單的HTML文件就生成了，因爲全是預設值的關係，所以會是沒有内容的，<html lang ="en">的en是英文的意思，現階段不需要做任何修改，因爲網站并沒有發佈到網絡上，因爲Google的搜索引擎會根據這個標簽判斷這是什麽語言的内容，Title 標簽中的Document是可以修改的（就是 <HTML></HTML>）。

HTML <title> 元素 定义文档的标题，显示在浏览器的标题栏或标签页上。它只应该包含文本，若是包含有标签，则它包含的任何标签都将被忽略。來源

儲存后，我們拷貝路徑，粘貼到 Browser 的URL bar 你就會看到空白的本地網頁，之所以是空白因爲在<body></body>標簽中并沒有内容。

CSS

CSS 全名為 Cascading Style Sheets。又称串樣式列表、级联样式表、串接样式表、阶层式样式表、階層式樣式表），用容易理解的話來説就是一個能為HTML增添樣式，例如：改變字體的顔色，大小以及粗細。

⌨️
每行CSS設定都需要在最後放 ; 表示輸入完成，否則電腦無法判斷這CSS為有效的。

插入 CSS 的方法大致上分爲 3個：External CSS， Internal CSS，Inline CSS，瀏覽器的優先級別分別是 Inline > Internal & External。

如果同時 Internal CSS 與 External CSS 都對同一個標簽做出不同的樣式的話，瀏覽器會同時渲染 Internal 以及 External，但我們所看到的將會是較後面的。

⌨️
參考：https://www.w3schools.com/css/css_howto.asp

External CSS

連接CSS 有幾個方法，在大型project比較爲了比較容易管理CSS，有些就在HTML文檔建立另一份 styles.css link（可以是任何名稱），也就是 External CSS。

<link rel="stylesheet" href="mystyle.css">

Internal CSS

在HTML的 <head></head> 標簽中加入 <style></style> 標簽為標簽做出修飾。像下圖的例子：在 <head></head> 新增 <style></style> 的中加入 定義CSS， 例如定義 H1 標簽中的文字顔色，以及邊緣大小。

 <!DOCTYPE html>
<html>
<head>
<style>

h1 {
  color: maroon;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Inline CSS

這一般情況是針對特定標簽才使用的，打個比方，我這篇文章有多個 H2 標簽但我只要這個H2標題改成特定字形或是顔色，這時我們只需要在這個H2標簽裏輸入 style="color:blue;" 。

⌨️
要記得以 " 作爲開始以及結束，以及每個style都要以; 作爲結束。
 <!DOCTYPE html>
<html>
<body>

<h2 style="color:blue;text-align:center;">This is a heading</h2>

</body>
</html>

Inline CSS 範本

This is a heading

爲了讓建立網站更加的快速，不少人使用 tailwind 以及 bootstrap 等套件做開發。另外想 Hyper UL 則是使用 tailwind 做出的標準化UI，快速的開發，穩定且美觀的網站。除了美觀外，還有JavaScript 可以套用，不需要一步一步地開發。

JavaScript

JavaScript 精通的話能同時活躍與前端以及後端，就像我用的部落格平臺就是用 JavaScript開發的（Node.js)，事實上我們瀏覽的網站大部分都有JavaScript來實現一些互動功能。

⌨️
後端都是主機端（Server）
⌨️
因爲篇幅有限，我只會寫關於前端的應用

同樣的JavaScript開發，也是有兩個方法，其中之一，就是連接另一張Javascript文件，又或如MDN的範本中，在HTML文件直接加入JavaScript代碼，當然大型專案，還是建議用另建立一份JavaScript文件，因爲維護起來會比較容易。

Camel Casing

用JavaScript命名也很重要，第一個字不能使用數字，以及不能大寫，因爲JavaScript可能會以爲我們在呼叫JavaScript已有程序庫裏的程序名稱，所以建議使用 Camel Casing，就是✅ niHaoMa 而非 ❌NiHaoMa 又或是 ❌nihaoma。因爲如果我們宣告一個變量 var 中間加入空格的話，電腦程序會將之是爲兩個不同的名稱，

⌨️
Camel Casing 也是爲了讓閲讀起來容易。

雖然并非强迫，但不少開發者還是認爲有不少開發原則還是建議遵守，這樣將來不論是任何人接受也比較容易看懂代碼的意義： Idiomatic.js 。

撰寫一致風格且通順易懂的 JavaScript 之原則
var greetingHello = console.log("Hello!");

保持文件大小很重要，我們這座網站最重要的就是學會取捨，因爲這樣只會讓網站肥大，加載變慢。

這是 JavaScript 的例子

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      .demoTest {
        padding: 25px;
        background-color: white;
        color: black;
        font-size: 25px;
      }

      .dark-mode {
        background-color: black;
        color: white;
      }
    </style>
  </head>
  <body>
    <div class="demoTest">
      <p>黑白切換</p>
      <p>讓背景來回切換。</p>

      <button onclick="myFunction()">Toggle dark mode</button>

      <script>
        function myFunction() {
          var element = document.querySelector(".demoTest");
          element.classList.toggle("dark-mode");
        }
      </script>
    </div>
  </body>
</html>

黑白切換

讓背景來回切換。

最後

好了，我看基本的介紹就到這裏，我相信讀完后應該或多或少瞭解前端網頁開發的知識，雖然我是略懂一二，但是在寫的過程中我還是學到不少新知識。

接下來我相信會介紹如何以及在哪裏以及什麽設備編寫開發。

演員阿部寬的個人網站就是只用純HTML製作起來的，所以網站的大小其實很小，日本網民調侃的說：想測試網絡就到演員阿部寬的網站。

參考：W3Schools Google HTML/CSS Style Guide

Read more