寫給零基礎(chǔ)小白的網(wǎng)站開發(fā)入門
本教程針對(duì)零基礎(chǔ)同學(xué)，講解網(wǎng)站開發(fā)三個(gè)基礎(chǔ)技術(shù)：HTML、CSS、JS，帶你快速入門！
本教程的所有知識(shí)點(diǎn)，均為核心，必須掌握！
看完本教程，你將學(xué)會(huì)：
理解HTML、CSS、JS各自的作用
學(xué)習(xí)HTML、CSS、JS基本語法
能寫一個(gè)簡(jiǎn)單的網(wǎng)頁
為快速上手練習(xí)，可以使用在線編輯器，學(xué)會(huì)基礎(chǔ)語法后，再下載專業(yè)的網(wǎng)站開發(fā)編輯器/開發(fā)環(huán)境（詳見本教程資源部分）。
1. HTML
HTML即超文本標(biāo)識(shí)語言，是網(wǎng)站開發(fā)最基礎(chǔ)的語言，簡(jiǎn)單易懂。
HTML用于定義網(wǎng)站的結(jié)構(gòu)及內(nèi)容，文件名后綴為.html。
當(dāng)我們?cè)跒g覽器里查看網(wǎng)站源碼（ ctrl + u ）或按F12打開開發(fā)者工具，首先看見的是網(wǎng)站的HTML源代碼：
下面花 5 分鐘，學(xué)習(xí)下 HTML 語法。
1.1 標(biāo)簽
HTML使用標(biāo)簽語法定義網(wǎng)頁內(nèi)容和結(jié)構(gòu)，工整簡(jiǎn)單。標(biāo)簽又可叫做元素。
一個(gè)基本的HTML文件內(nèi)容如下：
<html>
??<head>
????
??</head>
??<body>
????
??</body>
</html>
標(biāo)簽具有如下特點(diǎn)：
對(duì)稱：每組標(biāo)簽有開有閉，如
<html>對(duì)應(yīng)</html>，同組標(biāo)簽尖括號(hào)里單詞相同。層級(jí)：標(biāo)簽可嵌套標(biāo)簽，體現(xiàn)了網(wǎng)站結(jié)構(gòu)層級(jí)關(guān)系，比如一個(gè)框里可以嵌套文字內(nèi)容。
簡(jiǎn)易：標(biāo)簽名為英文單詞或簡(jiǎn)寫，方便聯(lián)想記憶。
下面介紹常用標(biāo)簽：
HTML中，使用
<!-- 注釋內(nèi)容 -->表示注釋，不會(huì)顯示在頁面中。
結(jié)構(gòu)標(biāo)簽，所有標(biāo)準(zhǔn)網(wǎng)頁都必須有且僅有一個(gè)：
<html>?<!--?html根標(biāo)簽，最外層?-->
??<head>?<!--?頭標(biāo)簽，包括網(wǎng)站基本信息、資源引用?-->
????...
??</head>
??<body>?<!--?身體標(biāo)簽，網(wǎng)站內(nèi)容?-->
????...
??</body>
</html>很好記憶，把一個(gè)網(wǎng)頁比喻成一個(gè)人，head是我們的大腦，存儲(chǔ)重要的信息，body是我們的身體，用來表示內(nèi)容。head在body上。
元信息標(biāo)簽，用來定義網(wǎng)站的基本信息，放在head標(biāo)簽中：
<head>
??<title>網(wǎng)頁標(biāo)題</title>
??<meta?charset="utf-8"/>?<!--?元信息，定義字符集為utf-8（中文）?-->
</head>我們發(fā)現(xiàn)
meta標(biāo)簽內(nèi)部以/結(jié)尾，沒有和它對(duì)應(yīng)的標(biāo)簽，我們把這種標(biāo)簽叫做自閉標(biāo)簽。內(nèi)容標(biāo)簽
<html>
??<head>
??...
??</head>
??<body>
????<h1>一級(jí)標(biāo)題</h1>?<!--?heading的縮寫，h1-h6對(duì)應(yīng)一至六級(jí)標(biāo)題，加粗顯示，字號(hào)依次縮小?-->
????<h2>二級(jí)標(biāo)題</h2>
????<h6>六級(jí)標(biāo)題</h6>
????<p>段落<br/>換行啦</p>?<!--?paragraph的縮寫，表示一段文章?-->?<!--?br表示換行?-->
????<div>容器</div>?<!--?最重要的標(biāo)簽，幾乎可嵌套任何內(nèi)容，代替其他任何標(biāo)簽?-->
????<a?href="https://www.baidu.com">超鏈接</a>?<!--?超鏈接，點(diǎn)擊后跳轉(zhuǎn)?-->
????<img?src="https://t.cn/RCzsdCq"/>?<!--?image的縮寫，顯示圖像?-->
????<button>按鈕</button>
??</body>
</html>其中，
br、img標(biāo)簽都是自閉標(biāo)簽。代碼運(yùn)行效果如下：
其他標(biāo)簽如table（表格）、ul（無序列表）、ol（有序列表）等可先不了解，均可用div標(biāo)簽替代。
1.2 屬性
在上面的代碼中，你可能發(fā)現(xiàn)，有些標(biāo)簽中除了標(biāo)簽名，還有其他內(nèi)容，比如：
<img?src="https://t.cn/RCzsdCq"/>
圖像標(biāo)簽中的src是img標(biāo)簽的屬性。屬性用于改變標(biāo)簽的樣式或行為，一個(gè)標(biāo)簽可以設(shè)置多個(gè)屬性。語法為：
<標(biāo)簽名?屬性名1="屬性值1"?屬性名2="屬性值2"></標(biāo)簽名>
由于很多屬性可用CSS或JS替代，此處了解常用屬性即可，不同標(biāo)簽具有的屬性也不同。
2. CSS
CSS即層疊樣式表，是美化網(wǎng)頁的語言，簡(jiǎn)單易懂。
CSS用于定義網(wǎng)站的樣式和動(dòng)畫，文件名后綴為.css。
2.1 引入
想要在html中應(yīng)用css樣式，需要先引入css，有三種方式：
文件引入
通過link標(biāo)簽（head標(biāo)簽內(nèi)）引入css文件：
<head>
??<link?href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.0/animate.css"?rel="stylesheet">
</head>href：要引入的css文件地址（絕對(duì)路徑/相對(duì)路徑）
rel：對(duì)于css文件，固定為stylesheet
內(nèi)置樣式
在style標(biāo)簽中（head標(biāo)簽內(nèi)）書寫css樣式代碼，僅對(duì)當(dāng)前頁面有效：
<head>
??<style>
????div?{
??????color:?red;
????}
??</style>
</head>內(nèi)聯(lián)樣式
在要應(yīng)用樣式的標(biāo)簽中，添加style屬性，僅對(duì)當(dāng)前標(biāo)簽有效：
<div?style="color:?red;">容器</div>
2.2 選擇器
網(wǎng)頁中有那么多的標(biāo)簽，如何給指定的標(biāo)簽應(yīng)用樣式呢？比如有兩個(gè)框，怎么讓它們一個(gè)白色一個(gè)紅色，或者都變成紅色呢？
選擇器是CSS核心概念，定義了一套選擇標(biāo)簽的語法，可以給指定的標(biāo)簽應(yīng)用指定的樣式。
必須了解常用選擇器：
假設(shè)我們有如下html內(nèi)容：
<div?id="box1"?class="box">盒子1</div>
<div?id="box2"?class="box">盒子2</div>
<div>盒子3</div>
初始運(yùn)行效果如下：
通配選擇器
選擇頁面的所有標(biāo)簽（元素），語法如下：
*?{
??...
}使用較少。通常用于初始化一個(gè)頁面，為所有元素清除瀏覽器自帶的默認(rèn)樣式。
標(biāo)簽選擇器
選擇指定名稱的所有標(biāo)簽，語法如下：
標(biāo)簽名?{
??...
}可以將下面css代碼應(yīng)用到上述html內(nèi)容中，改變所有div標(biāo)簽的字體顏色：
div?{
??color:?red;
}運(yùn)行效果如下：
id選擇器
上面講到，同一個(gè)頁面中，id值必須唯一（像身份證），可以用id選擇器改變唯一元素的樣式。語法如下：
#id值?{
??...
}可以將下面css代碼應(yīng)用到上述html內(nèi)容中，給兩個(gè)盒子不同的背景顏色：
#box1?{
??background:?red;
}
#box2?{
??background:?yellow;
}運(yùn)行效果如下：
class選擇器
當(dāng)我們要改變多個(gè)元素樣式時(shí)，可以給它們添加相同的class屬性，然后用class選擇器改變它們的樣式。語法如下：
.class值?{
??...
}可以將下面css代碼應(yīng)用到上述html內(nèi)容中，給所有box盒子添加相同背景色：
.box?{
??background:?red;
}運(yùn)行效果如下：
其他選擇器如子父節(jié)點(diǎn)選擇器、兄弟節(jié)點(diǎn)選擇器、偽選擇器等可先不了解，使用較少，且均可用上述選擇器替代。
2.3 樣式
CSS可以控制布局、塊（元素）、內(nèi)容（塊內(nèi)的文字、圖片）等樣式，以及增加動(dòng)畫效果。
下面介紹CSS常用的樣式：
CSS中，注釋用/* 注釋內(nèi)容 */表示。
2.3.1 布局
*?{
?float:?left;?/*?元素浮動(dòng)：left?左浮動(dòng)?|?right?右浮動(dòng)?*/
??position:?unset;?/*?定位方式：absolute?相對(duì)父元素定位?|?fixed?相對(duì)頁面定位?|?relative?|?sticky?彈性?|?unset?不設(shè)置*/
}
運(yùn)行效果如下：
可以發(fā)現(xiàn)，本來每個(gè)盒子獨(dú)立占一行，用了float布局后，變?yōu)榱艘恍?，從左往右依次排列。這和塊級(jí)行級(jí)元素有關(guān)，后續(xù)教程會(huì)講到。
2.3.2 塊
div?{
??display:?block;?/*?元素展現(xiàn)形式：block?|?inline?|?inline-block?|?none?不展示，隱藏塊?*/
??background:?red;?/*?背景色?*/
??margin:?10px?15px?20px?5px;?/*?外間距（上右下左）px為像素值?*/
??padding:?10px?15px?20px?5px;?/*?內(nèi)邊距（上右下左）px為像素值?*/
??margin-top:?1px;?/*?上外間距?*/
??padding-bottom:?1px;?/*?下內(nèi)邊距?*/
??height:?25px;?/*?塊高度?*/
??width:?100px;?/*?塊寬度?*/
}
運(yùn)行效果如下：
2.3.3 內(nèi)容
div?{
??text-align:?center;?/*?文字對(duì)齊方式：center?居中?|?left?左對(duì)齊?|?right?右對(duì)齊?*/
??color:?red;?/*?文字顏色?*/
??font-size:?16px;?/*?文字大小?*/
??font-weight:?bold;?/*?文字加粗?*/
??font-style:?italic;?/*?文字傾斜?*/
??font-family:?SimHei;?/*?字體?*/
??text-decoration:?underline;?/*?文字裝飾：underline?下劃線?|?line-through?刪除線?*/
}
運(yùn)行效果如下：
CSS中支持多種顏色表示方式（background、color等屬性）：
常用顏色英文單詞：red\green\yellow 等
rgb值：如rgb(0, 0, 0)或rgba(0, 0, 0, 0.8)
16進(jìn)制顏色值：如#000000
以上是CSS常用樣式，一定要自己多加練習(xí)，查看不同樣式帶來的網(wǎng)頁效果變化。
3. JS
JS全稱JavaScript，是可以運(yùn)行在瀏覽器中的腳本語言，非常靈活強(qiáng)大。NodeJS出現(xiàn)后，為JavaScript帶來了更多的可能性，也可以作為后端開發(fā)語言。
JS用于定義網(wǎng)站的交互行為，文件名后綴為.js。
交互行為有很多種，比如點(diǎn)擊按鈕彈窗、填寫提交表單、動(dòng)態(tài)更新頁面內(nèi)容等。JS能極大地增強(qiáng)網(wǎng)站的功能和趣味性。
JS和CSS一樣，都需要被html文件或其他js引入才能使用。
3.1 引入
想要在html中應(yīng)用js腳本，需要先引入js，有兩種方式：
文件引入
通過script標(biāo)簽（通常在body標(biāo)簽最底部或head標(biāo)簽）引入js文件：
<body>
??...
??<script?type="text/javascript"?src="script.js"></script>
</body>src：要引入的js文件地址（絕對(duì)路徑/相對(duì)路徑）
type：對(duì)于js文件，固定為text/javascript
注意，script不同于引入css的link標(biāo)簽，script是對(duì)稱標(biāo)簽。
內(nèi)置腳本
直接在script標(biāo)簽中（通常在body標(biāo)簽最底部或head標(biāo)簽）寫js腳本，僅對(duì)當(dāng)前頁面有效：
<body>
??...
??<script?type="text/javascript">
???let?a?=?1;
????...
??</script>
</body>
3.2 基本語法
學(xué)習(xí)任何語言，都先從基本語法學(xué)起，JS也是一樣。如果之前學(xué)過其他編程語言，入門會(huì)更快。
下面介紹JS基本語法：
JS中，單行注釋用 // 注釋內(nèi)容 表示，多行注釋用 /* 注釋內(nèi)容 */ 表示
3.2.1 基本語法
JS是弱類型語言，通過let關(guān)鍵字，能定義一個(gè)變量，支持傳入各種類型（整數(shù)、小數(shù)、字符串、數(shù)組、對(duì)象等）：
let?a?=?1;?//?定義變量
const?b?=?2;?//?定義常量（一旦賦值，不能修改）
let?c?=?a?+?b;?//?求和賦值
console.log(c);?//?輸出
let?d?=?[1,?2,?3];?//?定義數(shù)組，數(shù)組包含三個(gè)元素1、2、3
let?e?=?{name:?'yupi',?age:?10};?//?定義對(duì)象，包含兩個(gè)屬性name和age
console.log 是JS中最常用的函數(shù)，類似于C語言的printf，可以輸出變量的值或信息，幫助我們調(diào)試。
3.2.2 定義函數(shù)
函數(shù)能夠完成一個(gè)功能。給定輸入?yún)?shù)，通過計(jì)算，得到輸出結(jié)果。
function?doClick()?{
??let?a?=?'我好帥';
??alert(a);?//?輸出變量的值
}
現(xiàn)在頁面有一個(gè)按鈕，如何點(diǎn)擊按鈕后，觸發(fā)彈窗呢？
我們可以給按鈕綁定一個(gè)鼠標(biāo)點(diǎn)擊事件（添加屬性即可），當(dāng)用戶點(diǎn)擊按鈕時(shí)，觸發(fā)對(duì)應(yīng)的JS函數(shù)：
<button?onclick="doClick()">按鈕</button>
運(yùn)行效果如下：
除了通過給標(biāo)簽加屬性綁定事件，還可以通過JS綁定事件，后續(xù)教程會(huì)講到。
4. 總結(jié)
讓我們復(fù)習(xí)下網(wǎng)站開發(fā)基本語言HTML、CSS、JS的各自作用。
HTML：結(jié)構(gòu)層， 定義網(wǎng)頁結(jié)構(gòu)和內(nèi)容
CSS：表現(xiàn)層，定義網(wǎng)站的樣式和動(dòng)畫
JS：行為層，定義網(wǎng)站的交互行為
開發(fā)網(wǎng)站時(shí)，三層通常按照順序開發(fā)，必須先有html，定義好網(wǎng)站的結(jié)構(gòu)和內(nèi)容，再用CSS美化網(wǎng)站，最后用JS給網(wǎng)站添加交互效果。
資源
主要是一些前端開發(fā)編輯器 / 開發(fā)環(huán)境。
HTML/CSS/JS在線編輯器
Sublime Text 輕量、快
VsCode 略輕量、快
WebStorm 重量、適合開發(fā)項(xiàng)目
Atom 略輕量、有時(shí)不穩(wěn)定
HBuilder 略輕量、不夠安全
