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

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

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

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

第二，學(xué)好網(wǎng)頁制作是制作網(wǎng)站的基礎(chǔ)，如果您因?yàn)槭聵I(yè)需要或者個(gè)人愛好打算制作自己的網(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ǔ)，至少您要知道一個(gè)網(wǎng)頁頁面中每個(gè)標(biāo)簽中對應(yīng)的是哪些信息，才能有的放矢拿到自己想要的信息。

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

除此之外，瀏覽器可以做的事情越來越多，比如webgl的出現(xiàn)，可以讓我們通過瀏覽器構(gòu)建3d世界，無論是虛擬現(xiàn)實(shí)（VR）還是增強(qiáng)現(xiàn)實(shí)（AR）都有很多開源免費(fèi)的解決方案。TensorFlow的JavaScript版本的出現(xiàn)，讓我們可以通過結(jié)合瀏覽器學(xué)習(xí)使用人工智能技術(shù)，且非常容易實(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)頁中都會(huì)有文字、圖片、聲音、視頻、表格等內(nèi)容，這些內(nèi)容就是靠HTML中的標(biāo)簽添加進(jìn)頁面的。

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

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

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

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

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

那JavaScript能干什么呢？

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

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

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

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

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

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

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

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

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

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

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

<p>300字</p>

如果使用以php編寫的WordPress網(wǎng)站框架來動(dò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)頁面還是動(dòng)態(tài)頁面，他們的核心內(nèi)容都是一樣的，HTML，CSS，JavaScript都是必修知識(shí)。只是靜態(tài)頁面在HTML中插入信息，而動(dòng)態(tài)頁面插入的是調(diào)取數(shù)據(jù)庫信息的語句。

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

本教學(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)頁制作

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

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

初識(shí)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)頁制作

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

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

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

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

HTML表單元素初識(shí)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)簽實(shí)現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁制作

t中引入html調(diào)節(jié)樣式

HTML

• 設(shè)置行間距字體高度和顏色

<html><head/><body><p style=\"height:16px;line-height:24px;color:#787878\"> helloWorld</p></body></html>

技巧

• 實(shí)現(xiàn)Html鏈接動(dòng)態(tài)下劃線
• 繼承QLabel并重寫進(jìn)入離開事件(對Html文字鏈接中text-decoration: none;屬性進(jìn)行控制). 即可實(shí)現(xiàn)鼠標(biāo)停留時(shí)顯示下劃線, 鼠標(biāo)離開時(shí)隱藏下劃線.