什么學(xué)習(xí)網(wǎng)頁制作？

互聯(lián)網(wǎng)時代的今天，各種各樣的網(wǎng)頁充斥著我們的生活。只要使用瀏覽器，打開的每一個頁面都可以稱之為網(wǎng)頁。即使使用頭條這樣的APP，其內(nèi)容布局、展示的方法也脫胎于網(wǎng)頁頁面設(shè)計的方法與原則。可以說頁面的概念已經(jīng)遍布我們的信息化世界。

作為蕓蕓眾生中的一員，學(xué)習(xí)網(wǎng)頁制作對我們的事業(yè)、生活有怎樣的幫助呢？

第一，學(xué)習(xí)網(wǎng)頁制作有助于理解網(wǎng)絡(luò)信息的傳播運行機(jī)制，即使通過本課程不能全面了解這些核心機(jī)制，也能為大家鋪墊下繼續(xù)深入學(xué)習(xí)的知識基礎(chǔ)。即使自己不必親自制作網(wǎng)頁，在使用第三方工具時，比如微信公眾號、微信小程序或者其他自動網(wǎng)頁或網(wǎng)站生成工具時也會比沒有基礎(chǔ)的人更快的掌握這些工具。

第二，學(xué)好網(wǎng)頁制作是制作網(wǎng)站的基礎(chǔ)，如果您因為事業(yè)需要或者個人愛好打算制作自己的網(wǎng)站或博客，無論是打算使用php還是Java還是Python去構(gòu)建您的網(wǎng)站，精通網(wǎng)頁制作技術(shù)是您的第一塊技術(shù)基石。

第三，如果您打算學(xué)習(xí)網(wǎng)絡(luò)爬蟲來分析一些網(wǎng)絡(luò)數(shù)據(jù)，了解網(wǎng)頁頁面構(gòu)成也是必要基礎(chǔ)，至少您要知道一個網(wǎng)頁頁面中每個標(biāo)簽中對應(yīng)的是哪些信息，才能有的放矢拿到自己想要的信息。

第四，如果您想學(xué)習(xí)編程，但是缺少相應(yīng)的基礎(chǔ)知識，看不懂復(fù)雜的C語言教學(xué)，那么從網(wǎng)頁制作入手嘗試?yán)斫饩幊痰恼Z法也是一個很不錯的選擇。

除此之外，瀏覽器可以做的事情越來越多，比如webgl的出現(xiàn)，可以讓我們通過瀏覽器構(gòu)建3d世界，無論是虛擬現(xiàn)實（VR）還是增強現(xiàn)實（AR）都有很多開源免費的解決方案。TensorFlow的JavaScript版本的出現(xiàn)，讓我們可以通過結(jié)合瀏覽器學(xué)習(xí)使用人工智能技術(shù)，且非常容易實現(xiàn)。

所以，新的一年里，我打算做網(wǎng)頁制作的學(xué)習(xí)教程，讓更多沒有基礎(chǔ)卻對網(wǎng)絡(luò)技術(shù)感興趣的小伙伴能加入進(jìn)來。

制作網(wǎng)頁需要學(xué)習(xí)哪些技術(shù)？

簡單來說學(xué)習(xí)網(wǎng)頁制作需要掌握三門技術(shù)。

第一，也是最基礎(chǔ)最核心的內(nèi)容是HTML超文本標(biāo)記語言。大家不必糾結(jié)HTML到底是什么，但是一定要記住它能干什么。HTML通俗來說可以比喻成容器。大家試想，網(wǎng)頁里都有哪些內(nèi)容呢？

一般網(wǎng)頁中都會有文字、圖片、聲音、視頻、表格等內(nèi)容，這些內(nèi)容就是靠HTML中的標(biāo)簽添加進(jìn)頁面的。

所以說HTML這個工具就是個容器，我們使用HTML標(biāo)簽語言為網(wǎng)頁添加所有需要的信息內(nèi)容。

第二，CSS層疊樣式表，這是一個用來裝飾頁面的工具。如果說HTML是個信息容器，那么如何讓這些信息條理清晰的顯示出來呢？那就需要CSS來幫忙了。如下圖所示，這是一個最簡單的頁面，只用到了HTML，里面裝了一個標(biāo)題和一個只有六個字的段落。

為了讓這個頁面看起來美觀些，我們?yōu)槠涮砑觕ss樣式表。添加后如圖所示：

我們可以看出來，CSS讓標(biāo)題文字換了顏色，也居中顯示了，背景也變成了藍(lán)色。

第三，JavaScript，這個工具相比HTML和CSS來講是最難學(xué)習(xí)的，學(xué)習(xí)JavaScript就是在學(xué)習(xí)編程了。它雖然只是個腳本語言，但是用到的知識和其他編程語言相差不大。

那JavaScript能干什么呢？

首先，它能為頁面中添加很多交互效果。舉個例子，我們常見的圖片翻頁、輪播很多就是基于JavaScript腳本實現(xiàn)的。

其次，JavaScript可以為傳統(tǒng)頁面擴(kuò)展出很多新功能，例如結(jié)合three.js我們可以很容易的在頁面中構(gòu)建三維空間，或者實現(xiàn)一些3d游戲或其他三維動態(tài)演示效果。舉個例子（https://renaultespace.littleworkshop.fr/），打開可能略慢。3d展示的汽車廣告是不是很酷！

再次，JavaScript可以以網(wǎng)頁為基礎(chǔ)，實現(xiàn)各種各樣的在線小游戲，例如Phaser.js就是目前非常火的一個開源免費網(wǎng)頁游戲制作庫。phaser官網(wǎng)：http://phaser.io/

JavaScript為網(wǎng)頁的功能拓展提供了很多可能性，無論是3d顯示還是游戲制作還是未來的人工智能工具，都是由JavaScript都為大家提供了將功能引入到頁面的接口，這也是學(xué)習(xí)難度比較大的原因。不過只要堅持下去一定能學(xué)通的！

網(wǎng)站與網(wǎng)頁的區(qū)別？

網(wǎng)頁是指我們看到的單個頁面。這些頁面分為靜態(tài)頁面和動態(tài)頁面兩種。靜態(tài)頁面指的是不能與服務(wù)器進(jìn)行數(shù)據(jù)交互的頁面，顧名思義動態(tài)頁面指的是可以與服務(wù)器進(jìn)行數(shù)據(jù)交互的頁面，這一點大家不必糾結(jié)。

簡單來說，靜態(tài)頁面寫好后什么樣就是什么樣，誰打開都是事先編輯好的內(nèi)容，而動態(tài)頁面寫好后會隨著不同的訪問變換不同數(shù)據(jù)，動態(tài)頁面更像是一個頁面模板，隨時套用不同信息。

大部分網(wǎng)站中的頁面都是動態(tài)頁面。

如果使用靜態(tài)頁面做網(wǎng)站會出現(xiàn)什么問題呢？如果您有300篇博客文章，那您就要做300個靜態(tài)頁面來顯示，大型資訊網(wǎng)站信息量更加龐大，如果都用靜態(tài)頁面來做，占用的服務(wù)器空間也是龐大到不可想象。

網(wǎng)站中的動態(tài)頁面就解決了這個問題，例如一個簡單的網(wǎng)站我們只需一個主頁、文章頁、搜索頁基本上就可以了，這些頁面中沒有具體內(nèi)容，我們稱之為模板。當(dāng)您打開后，顯示的內(nèi)容都是在數(shù)據(jù)庫中調(diào)出的。這樣，一個數(shù)據(jù)庫用來存儲壓縮過的精簡信息，這些信息通過不同頁面模板顯示在用戶面前就成為網(wǎng)站的基本運行模式。

例如在靜態(tài)頁面中顯示文字字?jǐn)?shù)的代碼是這樣

<p>300字</p>

如果使用以php編寫的WordPress網(wǎng)站框架來動態(tài)顯示文章字?jǐn)?shù)就是這樣

<p><?php echo zm_count_words($text); ?></p>

<?php echo zm_count_words($text); ?>這條語句可以調(diào)取數(shù)據(jù)庫中文章字?jǐn)?shù)的記錄并顯示出來。這也我們通過這一條語句就可以顯示不同文章的字?jǐn)?shù)了。

無論是靜態(tài)頁面還是動態(tài)頁面，他們的核心內(nèi)容都是一樣的，HTML，CSS，JavaScript都是必修知識。只是靜態(tài)頁面在HTML中插入信息，而動態(tài)頁面插入的是調(diào)取數(shù)據(jù)庫信息的語句。

因此，我們這個教程看起來是在做靜態(tài)頁面，但是我們學(xué)習(xí)的也是制作網(wǎng)站的基礎(chǔ)知識。

本教學(xué)學(xué)完能干什么？

第一，可以寫出靜態(tài)頁面。

第二，有能力讀懂他人寫好的頁面代碼。

第三，為繼續(xù)深入學(xué)習(xí)網(wǎng)站制作或更為炫酷的頁面制作打下基礎(chǔ)。

第四，掌握編程基礎(chǔ)，至少是基于JavaScript的。

我是大魚，致力于數(shù)字藝術(shù)技術(shù)分享！歡迎大家關(guān)注！祝愿大家2020年學(xué)有所成！

HTML學(xué)習(xí)目錄

HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

第一個HTML頁面如何寫？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML頁面中head標(biāo)簽有啥用？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

初識meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格1（基本元素）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

16進(jìn)制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的塊級元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作

初識HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作

封閉在家學(xué)網(wǎng)頁制作！為頁面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單元素初識1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單元素初識2——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單4（form的action、method屬性）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁制作

為HTML頁面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作

音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中使用<a>標(biāo)簽實現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁制作

shenlan-ui (UI根目錄)
|--src (核心樣式代碼)
| |--shenlan-ui.css (UI的主樣式文件)
| |--common.css (公共樣式文件)
| |--reset.css (CSS-Reset文件)
| |--layout.css (組件文件：圖標(biāo)樣式)
| |--... (其他組件文件)
|
|--demo (演示文件目錄)
|--layout.html (布局樣式文件)
|--... (其他組件的樣式文件)

rc/reset.css

/*
* @Author: xutao
* @Date: 2019-04-12 10:06:29
* @Last Modified by: xutao
* @Last Modified time: 2019-04-29 16:37:40
*/
/* 去掉所有元素的內(nèi)外邊距 */
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, pre,
a, img, ul, li, form, label, input,
table, tbody, tfoot, thead, tr, th, td,
audio, video {
margin: 0;
padding: 0;
}
/* 統(tǒng)一全局字體 */
body {
font-family: -apple-system-font,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei",Arial,sans-serif
}
/* 列表元素去掉默認(rèn)的列表樣式 */
ol, ul {
list-style: none;
}
/* Table元素的邊框折疊 */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* 去掉默認(rèn)的下劃線 */
a{
text-decoration: none;
}
/* 去掉input自帶的邊緣效果和背景顏色 */
input{
outline: none;
background: none;
}

/src/common.css

1 區(qū)分屏幕寬度的方式

/* 屏幕寬度小于340px時的樣式 */
@media (max-width: 340px){ /* 樣式1 */ }
/* 屏幕寬度在340px至410px時的樣式 */
@media (min-width: 340px) and (max-width: 410px){ /* 樣式2 */ }
/* 屏幕寬度大于410px時的樣式 */
@media (min-width: 410px){ /* 樣式3 */ }

精簡樣式:

/* 屏幕寬度在340px至410px時的樣式 */
/* 樣式2 */
/* 屏幕寬度小于340px時的樣式 */
@media (max-width: 340px){ /* 樣式1 */ }
/* 屏幕寬度大于410px時的樣式 */
@media (min-width: 410px){ /* 樣式3 */ }

這樣屏幕適配的框架就完成了

2 元素尺寸的指定

/* 屏幕寬度在340px至410px時，基準(zhǔn)尺寸使用20px */
html{
font-size: 20px;
}
/* 屏幕寬度小于340px時，基準(zhǔn)尺寸使用18px */
@media (max-width: 340px){
html{
font-size: 18px;
}
}
/* 屏幕寬度大于410px時，基準(zhǔn)尺寸使用22px */
@media (min-width: 410px){
html{
font-size: 22px;
}
}

3 按比例劃分屏幕

最終common.css樣式

/*
* @Author: xutao
* @Date: 2019-06-20 22:16:01
* @Last Modified by: xutao
* @Last Modified time: 2019-06-20 23:03:17
*/

/* 屏幕寬度在340px至410px時，基準(zhǔn)尺寸使用20px */
html{
font-size: 20px;
}
/* 屏幕寬度小于340px時，基準(zhǔn)尺寸使用18px */
@media (max-width: 340px){
html{
font-size: 18px;
}
}
/* 屏幕寬度大于410px時，基準(zhǔn)尺寸使用22px */
@media (min-width: 410px){
html{
font-size: 22px;
}
}

src/shenlan-ui.css

目前, 我們只有/src/reset.css和/src/common.css這兩個文件, 所以集成的時候只需要把這兩個文件引入即可。