本教程的所有知識(shí)點(diǎn)，均為核心，必須掌握！

看完本教程，你將學(xué)會(huì)：

理解HTML、CSS、JS各自的作用學(xué)習(xí)HTML、CSS、JS基本語(yǔ)法能寫(xiě)一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)為" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

所在位置： 首頁(yè) > 營(yíng)銷(xiāo)資訊 > 網(wǎng)站運(yùn)營(yíng) > 寫(xiě)給零基礎(chǔ)小白的網(wǎng)站開(kāi)發(fā)入門(mén)

寫(xiě)給零基礎(chǔ)小白的網(wǎng)站開(kāi)發(fā)入門(mén)

時(shí)間：2022-08-29 14:27:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2022-08-29 14:27:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

本教程針對(duì)零基礎(chǔ)同學(xué)，講解網(wǎng)站開(kāi)發(fā)三個(gè)基礎(chǔ)技術(shù)：HTML、CSS、JS，帶你快速入門(mén)！

本教程的所有知識(shí)點(diǎn)，均為核心，必須掌握！

看完本教程，你將學(xué)會(huì)：

  1. 理解HTML、CSS、JS各自的作用
  2. 學(xué)習(xí)HTML、CSS、JS基本語(yǔ)法
  3. 能寫(xiě)一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)
為快速上手練習(xí)，可以使用在線(xiàn)編輯器，學(xué)會(huì)基礎(chǔ)語(yǔ)法后，再下載專(zhuān)業(yè)的網(wǎng)站開(kāi)發(fā)編輯器/開(kāi)發(fā)環(huán)境（詳見(jiàn)本教程資源部分）。

1. HTML

HTML即超文本標(biāo)識(shí)語(yǔ)言，是網(wǎng)站開(kāi)發(fā)最基礎(chǔ)的語(yǔ)言，簡(jiǎn)單易懂。

HTML用于定義網(wǎng)站的結(jié)構(gòu)及內(nèi)容，文件名后綴為.html。

當(dāng)我們?cè)跒g覽器里查看網(wǎng)站源碼（ ctrl + u ）或按F12打開(kāi)開(kāi)發(fā)者工具，首先看見(jiàn)的是網(wǎng)站的HTML源代碼：

下面花 5 分鐘，學(xué)習(xí)下 HTML 語(yǔ)法。

1.1 標(biāo)簽

HTML使用標(biāo)簽語(yǔ)法定義網(wǎng)頁(yè)內(nèi)容和結(jié)構(gòu)，工整簡(jiǎn)單。標(biāo)簽又可叫做元素。

一個(gè)基本的HTML文件內(nèi)容如下：

<html> <head> </head> <body> </body></html>標(biāo)簽具有如下特點(diǎn)：

  1. 對(duì)稱(chēng)：每組標(biāo)簽有開(kāi)有閉，如 <html> 對(duì)應(yīng) </html> ，同組標(biāo)簽尖括號(hào)里單詞相同。
  2. 層級(jí)：標(biāo)簽可嵌套標(biāo)簽，體現(xiàn)了網(wǎng)站結(jié)構(gòu)層級(jí)關(guān)系，比如一個(gè)框里可以嵌套文字內(nèi)容。
  1. 簡(jiǎn)易：標(biāo)簽名為英文單詞或簡(jiǎn)寫(xiě)，方便聯(lián)想記憶。
下面介紹常用標(biāo)簽：

HTML中，使用<!-- 注釋內(nèi)容 -->表示注釋?zhuān)粫?huì)顯示在頁(yè)面中。
  1. 結(jié)構(gòu)標(biāo)簽，所有標(biāo)準(zhǔn)網(wǎng)頁(yè)都必須有且僅有一個(gè)：
    <html> <!-- html根標(biāo)簽，最外層 -->
    <head> <!-- 頭標(biāo)簽，包括網(wǎng)站基本信息、資源引用 -->
    ...
    </head>
    <body> <!-- 身體標(biāo)簽，網(wǎng)站內(nèi)容 -->
    ...
    </body>
    </html>

    很好記憶，把一個(gè)網(wǎng)頁(yè)比喻成一個(gè)人，head是我們的大腦，存儲(chǔ)重要的信息，body是我們的身體，用來(lái)表示內(nèi)容。head在body上。
  2. 元信息標(biāo)簽，用來(lái)定義網(wǎng)站的基本信息，放在head標(biāo)簽中：
    <head>
    <title>網(wǎng)頁(yè)標(biāo)題</title>
    <meta charset="utf-8"/> <!-- 元信息，定義字符集為utf-8（中文） -->
    </head>

    我們發(fā)現(xiàn) meta 標(biāo)簽內(nèi)部以 / 結(jié)尾，沒(méi)有和它對(duì)應(yīng)的標(biāo)簽，我們把這種標(biāo)簽叫做自閉標(biāo)簽。
  3. 內(nèi)容標(biāo)簽
    <html>
    <head>
    ...
    </head>
    <body>
    <h1>一級(jí)標(biāo)題</h1> <!-- heading的縮寫(xiě)，h1-h6對(duì)應(yīng)一至六級(jí)標(biāo)題，加粗顯示，字號(hào)依次縮小 -->
    <h2>二級(jí)標(biāo)題</h2>
    <h6>六級(jí)標(biāo)題</h6>
    <p>段落<br/>換行啦</p> <!-- paragraph的縮寫(xiě)，表示一段文章 --> <!-- 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的縮寫(xiě)，顯示圖像 -->
    <button>按鈕</button>
    </body>
    </html>

    其中，br、img 標(biāo)簽都是自閉標(biāo)簽。
    代碼運(yùn)行效果如下：
其他標(biāo)簽如table（表格）、ul（無(wú)序列表）、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è)屬性。語(yǔ)法為：

<標(biāo)簽名 屬性名1="屬性值1" 屬性名2="屬性值2"></標(biāo)簽名>由于很多屬性可用CSS或JS替代，此處了解常用屬性即可，不同標(biāo)簽具有的屬性也不同。

2. CSS

CSS即層疊樣式表，是美化網(wǎng)頁(yè)的語(yǔ)言，簡(jiǎn)單易懂。

CSS用于定義網(wǎng)站的樣式和動(dòng)畫(huà)，文件名后綴為.css。

2.1 引入

想要在html中應(yīng)用css樣式，需要先引入css，有三種方式：

  1. 文件引入
    通過(guò)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
  2. 內(nèi)置樣式
    在style標(biāo)簽中（head標(biāo)簽內(nèi)）書(shū)寫(xiě)css樣式代碼，僅對(duì)當(dāng)前頁(yè)面有效：
    <head>
    <style>
    div {
    color: red;
    }
    </style>
    </head>

  3. 內(nèi)聯(lián)樣式
    在要應(yīng)用樣式的標(biāo)簽中，添加style屬性，僅對(duì)當(dāng)前標(biāo)簽有效：
    <div style="color: red;">容器</div>

2.2 選擇器

網(wǎng)頁(yè)中有那么多的標(biāo)簽，如何給指定的標(biāo)簽應(yīng)用樣式呢？比如有兩個(gè)框，怎么讓它們一個(gè)白色一個(gè)紅色，或者都變成紅色呢？

選擇器是CSS核心概念，定義了一套選擇標(biāo)簽的語(yǔ)法，可以給指定的標(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)行效果如下：

  1. 通配選擇器
    選擇頁(yè)面的所有標(biāo)簽（元素），語(yǔ)法如下：
    * {
    ...
    }

    使用較少。通常用于初始化一個(gè)頁(yè)面，為所有元素清除瀏覽器自帶的默認(rèn)樣式。
  2. 標(biāo)簽選擇器
    選擇指定名稱(chēng)的所有標(biāo)簽，語(yǔ)法如下：
    標(biāo)簽名 {
    ...
    }

    可以將下面css代碼應(yīng)用到上述html內(nèi)容中，改變所有div標(biāo)簽的字體顏色：
    div {
    color: red;
    }

    運(yùn)行效果如下：
  1. id選擇器
    上面講到，同一個(gè)頁(yè)面中，id值必須唯一（像身份證），可以用id選擇器改變唯一元素的樣式。語(yǔ)法如下：
    #id值 {
    ...
    }

    可以將下面css代碼應(yīng)用到上述html內(nèi)容中，給兩個(gè)盒子不同的背景顏色：
    #box1 {
    background: red;
    }
    #box2 {
    background: yellow;
    }

    運(yùn)行效果如下：
  1. class選擇器
    當(dāng)我們要改變多個(gè)元素樣式時(shí)，可以給它們添加相同的class屬性，然后用class選擇器改變它們的樣式。語(yǔ)法如下：
    .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)畫(huà)效果。

下面介紹CSS常用的樣式：

CSS中，注釋用/* 注釋內(nèi)容 */表示。

2.3.1 布局

* { float: left; /* 元素浮動(dòng)：left 左浮動(dòng) | right 右浮動(dòng) */ position: unset; /* 定位方式：absolute 相對(duì)父元素定位 | fixed 相對(duì)頁(yè)面定位 | relative | sticky 彈性 | unset 不設(shè)置*/}運(yùn)行效果如下：

可以發(fā)現(xiàn)，本來(lái)每個(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 下劃線(xiàn) | line-through 刪除線(xiàn) */}運(yùn)行效果如下：

CSS中支持多種顏色表示方式（background、color等屬性）：

以上是CSS常用樣式，一定要自己多加練習(xí)，查看不同樣式帶來(lái)的網(wǎng)頁(yè)效果變化。

3. JS

JS全稱(chēng)JavaScript，是可以運(yùn)行在瀏覽器中的腳本語(yǔ)言，非常靈活強(qiáng)大。NodeJS出現(xiàn)后，為JavaScript帶來(lái)了更多的可能性，也可以作為后端開(kāi)發(fā)語(yǔ)言。

JS用于定義網(wǎng)站的交互行為，文件名后綴為.js。

交互行為有很多種，比如點(diǎn)擊按鈕彈窗、填寫(xiě)提交表單、動(dòng)態(tài)更新頁(yè)面內(nèi)容等。JS能極大地增強(qiáng)網(wǎng)站的功能和趣味性。

JS和CSS一樣，都需要被html文件或其他js引入才能使用。

3.1 引入

想要在html中應(yīng)用js腳本，需要先引入js，有兩種方式：

  1. 文件引入
    通過(guò)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ì)稱(chēng)標(biāo)簽。
  2. 內(nèi)置腳本
    直接在script標(biāo)簽中（通常在body標(biāo)簽最底部或head標(biāo)簽）寫(xiě)js腳本，僅對(duì)當(dāng)前頁(yè)面有效：
    <body>
    ...
    <script type="text/javascript">
    let a = 1;
    ...
    </script>
    </body>

3.2 基本語(yǔ)法

學(xué)習(xí)任何語(yǔ)言，都先從基本語(yǔ)法學(xué)起，JS也是一樣。如果之前學(xué)過(guò)其他編程語(yǔ)言，入門(mén)會(huì)更快。

下面介紹JS基本語(yǔ)法：

JS中，單行注釋用 // 注釋內(nèi)容 表示，多行注釋用 /* 注釋內(nèi)容 */ 表示

3.2.1 基本語(yǔ)法

JS是弱類(lèi)型語(yǔ)言，通過(guò)let關(guān)鍵字，能定義一個(gè)變量，支持傳入各種類(lèi)型（整數(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、3let e = {name: 'yupi', age: 10}; // 定義對(duì)象，包含兩個(gè)屬性name和ageconsole.log 是JS中最常用的函數(shù)，類(lèi)似于C語(yǔ)言的printf，可以輸出變量的值或信息，幫助我們調(diào)試。

3.2.2 定義函數(shù)

函數(shù)能夠完成一個(gè)功能。給定輸入?yún)?shù)，通過(guò)計(jì)算，得到輸出結(jié)果。

function doClick() { let a = '我好帥'; alert(a); // 輸出變量的值}現(xiàn)在頁(yè)面有一個(gè)按鈕，如何點(diǎn)擊按鈕后，觸發(fā)彈窗呢？

我們可以給按鈕綁定一個(gè)鼠標(biāo)點(diǎn)擊事件（添加屬性即可），當(dāng)用戶(hù)點(diǎn)擊按鈕時(shí)，觸發(fā)對(duì)應(yīng)的JS函數(shù)：

<button onclick="doClick()">按鈕</button>運(yùn)行效果如下：

除了通過(guò)給標(biāo)簽加屬性綁定事件，還可以通過(guò)JS綁定事件，后續(xù)教程會(huì)講到。

4. 總結(jié)

讓我們復(fù)習(xí)下網(wǎng)站開(kāi)發(fā)基本語(yǔ)言HTML、CSS、JS的各自作用。

開(kāi)發(fā)網(wǎng)站時(shí)，三層通常按照順序開(kāi)發(fā)，必須先有html，定義好網(wǎng)站的結(jié)構(gòu)和內(nèi)容，再用CSS美化網(wǎng)站，最后用JS給網(wǎng)站添加交互效果。

資源

主要是一些前端開(kāi)發(fā)編輯器 / 開(kāi)發(fā)環(huán)境。

  1. HTML/CSS/JS在線(xiàn)編輯器
  2. 輕量、快
  3. 略輕量、快
  4. 重量、適合開(kāi)發(fā)項(xiàng)目
  5. 略輕量、有時(shí)不穩(wěn)定
  6. HBuilder 略輕量、不夠安全
74
73
25
news

版權(quán)所有? 億企邦 1997-2022 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉