該篇適用于從零基礎學習前端的小白
初學者不懂代碼得含義也要堅持模仿逐行敲代碼，以身體感悟帶動頭腦去理解新知識
一、導言
HTML，CSS，JavaScript 都是單獨的語言；他們構(gòu)成前端技術(shù)基礎；
（1）HTML：負責網(wǎng)頁的架構(gòu)；
（2）CSS：負責網(wǎng)頁的樣式，美化；
（3）JavaScript（JS）：負責網(wǎng)頁的行為；
我們將上述概念，拿出來，作為初學者可能還是不理解，還是一頭霧水，很正常，那我們就以實踐來幫助自己理解。接下來我們一起寫一個簡單的案例。
二、用小案例幫我們理解 HTML CSS JavaScript 各自的概念
注意: 初學者不懂代碼得含義也要堅持模仿逐行敲代碼，以身體感悟帶動頭腦去理解新知識。
我們的目標：模仿百度得輸入框 和 按鈕(百度一下)
1.?HTML：負責網(wǎng)頁的架構(gòu)（結(jié)構(gòu)）
我寫了 input(文本框)標簽 和 button(按鈕)標簽 ，在瀏覽器運行樣式如下
<!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>
<input />
<button>百度一下</button>
</body>
</html>在chrome瀏覽器運行顯示效果：我們可以看出目前跟百度首頁搜索行結(jié)構(gòu)是一樣的
2. ?CSS：負責網(wǎng)頁的樣式，美化
我們觀察自己編寫的效果存在的問題：
第一，文本框?qū)挾?和 高度，需要修改
第二，百度一下這個按鈕，背景顏色 和 文字顏色，需要修改
<!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>
<style>
/*將全部標簽，自帶的內(nèi)外邊距都設置為0，統(tǒng)一由自己單獨去寫*/
*{
padding: 0;
margin: 0;
}
.inputName{
width: 300px; /* 設置寬度為300px */
height: 30px; /* 設置高度為30px */
}
.buttonName{
background-color: #4E6EF2; /* 設置背景顏色 */
color: #fff; /* 設置文字顏色 */
height: 34px; /*為什么這里是34 而不是30*/
border: none; /* 設置按鈕的邊框不顯示 */
padding-left: 5px; /* 設置按鈕左邊內(nèi)邊距為 5px */
padding-right: 5px; /* 設置按鈕右邊內(nèi)邊距為 5px */
}
</style>
</head>
<body>
<input class="inputName" />
<button class="buttonName">百度一下</button>
</body>
</html>運行的效果圖：我沒有寫過多的樣式，主要寫了基本的（擔心初學者一下接受不完）
3.??JavaScript（JS）：負責網(wǎng)頁的行為
網(wǎng)頁的行為：主要就是指用戶點擊 ”百度一下“那個按鈕，百度網(wǎng)站是發(fā)起一個搜索功能，
這里我模仿點擊百度一下按鈕，彈出一個警告框，之后跳轉(zhuǎn)到百度官網(wǎng)
<!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>
<style>
*{
padding: 0;
margin: 0;
}
.inputName{
width: 300px; /* 設置寬度為300px */
height: 30px; /* 設置高度為30px */
}
.buttonName{
background-color: #4E6EF2; /* 設置背景顏色 */
color: #fff; /* 設置文字顏色 */
height: 34px; /*為什么這里是34 而不是30*/
border: none; /* 設置按鈕的邊框不顯示 */
padding-left: 5px; /* 設置按鈕左邊內(nèi)邊距為 5px */
padding-right: 5px; /* 設置按鈕右邊內(nèi)邊距為 5px */
}
</style>
</head>
<body>
<input class="inputName" />
<button class="buttonName">百度一下</button>
</body>
<script>
//1. 獲取“百度一下”按鈕的DOM節(jié)點
let buttonDOM = document.getElementsByClassName("buttonName");
//2. 給該按鈕，添加一個點擊事件的監(jiān)聽，當用戶發(fā)起點擊，就會進入function函數(shù)內(nèi)部，執(zhí)行下面語句
buttonDOM[0].addEventListener('click',function(){
alert("你點擊按鈕，馬上跳轉(zhuǎn)到百度頁面");
window.open("https://www.baidu.com/");
});
</script>
</html>目前JavaScript 的代碼寫在了<script>標簽內(nèi)，涉及的知識點DOM 和 BOM。
三、結(jié)束語
經(jīng)過這樣，我們大概理解了結(jié)構(gòu)(HTML)、樣式(CSS)、行為(JavaScript)，都寫在哪里，具體是什么樣子。不過你也會發(fā)現(xiàn)，他們的知識還是很多。
比如：CSS 寫樣式，class是什么
比如：JavaScript代碼里，document、window是什么?
編程是一個很長的過程，不積跬步無以至千里，學習不能太著急。
接下來，我們就詳細的學習HTML的知識
零基礎學前端（三）重點講解 HTML-CSDN博客
四、題外話：網(wǎng)頁三劍客
網(wǎng)頁三劍客，編程老人都曉得，
Dreamweaver（開發(fā)工具，作用和VsCode差不多，但功能相當老化，不是真正編程人該使用的）
Flash （由于安全問題，已經(jīng)被chrome給封殺了）
Fireworks文章來源：http://www.zghlxwxcb.cn/news/detail-709715.html
=》這些技術(shù)都已經(jīng)被淘汰，初學者不要糾結(jié)，當他們不存在就可以了。文章來源地址http://www.zghlxwxcb.cn/news/detail-709715.html
到了這里，關(guān)于零基礎學前端（二）用簡單案例去理解 HTML 、CSS 、JavaScript 概念的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![[HTML]Web前端開發(fā)技術(shù)25（HTML5、CSS3、JavaScript ）JavaScript基礎消息對話框告警框確認框提示框命名規(guī)范1標識符2關(guān)鍵字3保留字注釋標識符和變量——喵喵畫網(wǎng)頁](https://imgs.yssmx.com/Uploads/2024/02/830038-1.png)
