網頁開發 HTML CSS JavaScript Web Development HTML CSS JavaScript
HTML CSS JavaScript 的基礎介紹以及建立最基本的網頁。
這是我的第一堂課，我學到光是有理論，沒有行動就不能說你學會了，對我來説真的很有用。因爲紙上得來終覺淺
如果不分享的話，我會忘光光，現在先來寫看我對於網絡開發的見解，網絡開發分爲前端以及後端，前端大致上是由 HTML CSS JavaScript 組成的，基本上各自代表著：結構，裝潢，應用。
HTML
有時候我會不小心説成 HDMI 這是完全不同的東西，最簡單解釋的 HTML 就是在一個網站的基礎架構，我們可以比喻為一間房子的地基，墻壁，橫梁等的一切基礎建設。
CSS
CSS 算是用來設置排版，圖片大小，字體等，用來美化網站。如果用房子來比喻就是裝潢，就像墻壁粉刷，風格。
JavaScript
JavaScript 在網站的作用就是功能相關的，讓網站具備一些功能性，如果有留意一些網站可能有暗色背景開關，大部分都是用JavaScript實現網站的功能。還是用意見屋子來比喻：JavaScript 就是房子的電源開關，自動門，門鈴之類的功能性應用。
其實 HTML 和 CSS 其實是算是備注，設定文檔，JavaScript 才是真正的程式語言，但是大多網頁開發都的同時具備這三樣的知識，才能稱得上前端開發者。如果連後端也會的話那就是全棧開發 Full-stack Development。
如何開始？
從0到1的過程其實是最不容易的，像我如果沒有課程，也許我到今天也不知道如何創建一個網站。最爲簡單的創作就是用對工具，在我推薦中理所當然的是推薦我最爲熟悉的VSCode作爲我的代碼編輯器code editor ，當然這是個人習慣，你也可以用NotePad創建也是沒問題的。
下載以及安裝 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 的方法大致上分爲 3個：External CSS， Internal CSS，Inline CSS，瀏覽器的優先級別分別是 Inline > Internal & External。
如果同時 Internal CSS 與 External CSS 都對同一個標簽做出不同的樣式的話，瀏覽器會同時渲染 Internal 以及 External，但我們所看到的將會是較後面的。
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;" 。
<!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來實現一些互動功能。
同樣的JavaScript開發，也是有兩個方法，其中之一，就是連接另一張Javascript文件，又或如MDN的範本中，在HTML文件直接加入JavaScript代碼，當然大型專案，還是建議用另建立一份JavaScript文件，因爲維護起來會比較容易。
Camel Casing
用JavaScript命名也很重要，第一個字不能使用數字，以及不能大寫，因爲JavaScript可能會以爲我們在呼叫JavaScript已有程序庫裏的程序名稱，所以建議使用 Camel Casing，就是✅ niHaoMa 而非 ❌NiHaoMa 又或是 ❌nihaoma。因爲如果我們宣告一個變量 var 中間加入空格的話，電腦程序會將之是爲兩個不同的名稱，
雖然并非强迫，但不少開發者還是認爲有不少開發原則還是建議遵守，這樣將來不論是任何人接受也比較容易看懂代碼的意義： 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製作起來的，所以網站的大小其實很小，日本網民調侃的說：想測試網絡就到演員阿部寬的網站。
