Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537
互聯網時代的今天,各種各樣的網頁充斥著我們的生活。只要使用瀏覽器,打開的每一個頁面都可以稱之為網頁。即使使用頭條這樣的APP,其內容布局、展示的方法也脫胎于網頁頁面設計的方法與原則。可以說頁面的概念已經遍布我們的信息化世界。
作為蕓蕓眾生中的一員,學習網頁制作對我們的事業、生活有怎樣的幫助呢?
第一,學習網頁制作有助于理解網絡信息的傳播運行機制,即使通過本課程不能全面了解這些核心機制,也能為大家鋪墊下繼續深入學習的知識基礎。即使自己不必親自制作網頁,在使用第三方工具時,比如微信公眾號、微信小程序或者其他自動網頁或網站生成工具時也會比沒有基礎的人更快的掌握這些工具。
第二,學好網頁制作是制作網站的基礎,如果您因為事業需要或者個人愛好打算制作自己的網站或博客,無論是打算使用php還是Java還是Python去構建您的網站,精通網頁制作技術是您的第一塊技術基石。
第三,如果您打算學習網絡爬蟲來分析一些網絡數據,了解網頁頁面構成也是必要基礎,至少您要知道一個網頁頁面中每個標簽中對應的是哪些信息,才能有的放矢拿到自己想要的信息。
第四,如果您想學習編程,但是缺少相應的基礎知識,看不懂復雜的C語言教學,那么從網頁制作入手嘗試理解編程的語法也是一個很不錯的選擇。
除此之外,瀏覽器可以做的事情越來越多,比如webgl的出現,可以讓我們通過瀏覽器構建3d世界,無論是虛擬現實(VR)還是增強現實(AR)都有很多開源免費的解決方案。TensorFlow的JavaScript版本的出現,讓我們可以通過結合瀏覽器學習使用人工智能技術,且非常容易實現。
所以,新的一年里,我打算做網頁制作的學習教程,讓更多沒有基礎卻對網絡技術感興趣的小伙伴能加入進來。
簡單來說學習網頁制作需要掌握三門技術。
第一,也是最基礎最核心的內容是HTML超文本標記語言。大家不必糾結HTML到底是什么,但是一定要記住它能干什么。HTML通俗來說可以比喻成容器。大家試想,網頁里都有哪些內容呢?
一般網頁中都會有文字、圖片、聲音、視頻、表格等內容,這些內容就是靠HTML中的標簽添加進頁面的。
所以說HTML這個工具就是個容器,我們使用HTML標簽語言為網頁添加所有需要的信息內容。
第二,CSS層疊樣式表,這是一個用來裝飾頁面的工具。如果說HTML是個信息容器,那么如何讓這些信息條理清晰的顯示出來呢?那就需要CSS來幫忙了。如下圖所示,這是一個最簡單的頁面,只用到了HTML,里面裝了一個標題和一個只有六個字的段落。
為了讓這個頁面看起來美觀些,我們為其添加css樣式表。添加后如圖所示:
我們可以看出來,CSS讓標題文字換了顏色,也居中顯示了,背景也變成了藍色。
第三,JavaScript,這個工具相比HTML和CSS來講是最難學習的,學習JavaScript就是在學習編程了。它雖然只是個腳本語言,但是用到的知識和其他編程語言相差不大。
那JavaScript能干什么呢?
首先,它能為頁面中添加很多交互效果。舉個例子,我們常見的圖片翻頁、輪播很多就是基于JavaScript腳本實現的。
其次,JavaScript可以為傳統頁面擴展出很多新功能,例如結合three.js我們可以很容易的在頁面中構建三維空間,或者實現一些3d游戲或其他三維動態演示效果。舉個例子(https://renaultespace.littleworkshop.fr/),打開可能略慢。3d展示的汽車廣告是不是很酷!
再次,JavaScript可以以網頁為基礎,實現各種各樣的在線小游戲,例如Phaser.js就是目前非常火的一個開源免費網頁游戲制作庫。phaser官網:http://phaser.io/
JavaScript為網頁的功能拓展提供了很多可能性,無論是3d顯示還是游戲制作還是未來的人工智能工具,都是由JavaScript都為大家提供了將功能引入到頁面的接口,這也是學習難度比較大的原因。不過只要堅持下去一定能學通的!
網頁是指我們看到的單個頁面。這些頁面分為靜態頁面和動態頁面兩種。靜態頁面指的是不能與服務器進行數據交互的頁面,顧名思義動態頁面指的是可以與服務器進行數據交互的頁面,這一點大家不必糾結。
簡單來說,靜態頁面寫好后什么樣就是什么樣,誰打開都是事先編輯好的內容,而動態頁面寫好后會隨著不同的訪問變換不同數據,動態頁面更像是一個頁面模板,隨時套用不同信息。
大部分網站中的頁面都是動態頁面。
如果使用靜態頁面做網站會出現什么問題呢?如果您有300篇博客文章,那您就要做300個靜態頁面來顯示,大型資訊網站信息量更加龐大,如果都用靜態頁面來做,占用的服務器空間也是龐大到不可想象。
網站中的動態頁面就解決了這個問題,例如一個簡單的網站我們只需一個主頁、文章頁、搜索頁基本上就可以了,這些頁面中沒有具體內容,我們稱之為模板。當您打開后,顯示的內容都是在數據庫中調出的。這樣,一個數據庫用來存儲壓縮過的精簡信息,這些信息通過不同頁面模板顯示在用戶面前就成為網站的基本運行模式。
例如在靜態頁面中顯示文字字數的代碼是這樣
<p>300字</p>
如果使用以php編寫的WordPress網站框架來動態顯示文章字數就是這樣
<p><?php echo zm_count_words($text); ?></p>
<?php echo zm_count_words($text); ?>這條語句可以調取數據庫中文章字數的記錄并顯示出來。這也我們通過這一條語句就可以顯示不同文章的字數了。
無論是靜態頁面還是動態頁面,他們的核心內容都是一樣的,HTML,CSS,JavaScript都是必修知識。只是靜態頁面在HTML中插入信息,而動態頁面插入的是調取數據庫信息的語句。
因此,我們這個教程看起來是在做靜態頁面,但是我們學習的也是制作網站的基礎知識。
第一,可以寫出靜態頁面。
第二,有能力讀懂他人寫好的頁面代碼。
第三,為繼續深入學習網站制作或更為炫酷的頁面制作打下基礎。
第四,掌握編程基礎,至少是基于JavaScript的。
我是大魚,致力于數字藝術技術分享!歡迎大家關注!祝愿大家2020年學有所成!
HTML是什么?——零基礎自學網頁制作
第一個HTML頁面如何寫?——零基礎自學網頁制作
HTML頁面中head標簽有啥用?——零基礎自學網頁制作
初識meta標簽與SEO——零基礎自學網頁制作
HTML中的元素使用方法1——零基礎自學網頁制作
HTML中的元素使用方法2——零基礎自學網頁制作
HTML元素中的屬性1——零基礎自學網頁制作
HTML元素中的屬性2(路徑詳解)——零基礎自學網頁制作
使用HTML添加表格1(基本元素)——零基礎自學網頁制作
使用HTML添加表格2(表格頭部與腳部)——零基礎自學網頁制作
使用HTML添加表格3(間距與顏色)——零基礎自學網頁制作
使用HTML添加表格4(行顏色與表格嵌套)——零基礎自學網頁制作
16進制顏色表示與RGB色彩模型——零基礎自學網頁制作
HTML中的塊級元素與內聯元素——零基礎自學網頁制作
初識HTML中的<div>塊元素——零基礎自學網頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作
封閉在家學網頁制作!為頁面嵌入PDF文件——零基礎自學網頁制作
HTML表單元素初識1——零基礎自學網頁制作
HTML表單元素初識2——零基礎自學網頁制作
HTML表單3(下拉列表、多行文字輸入)——零基礎自學網頁制作
HTML表單4(form的action、method屬性)——零基礎自學網頁制作
HTML列表制作講解——零基礎自學網頁制作
為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作
HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作
<html><head/><body><p style=\"height:16px;line-height:24px;color:#787878\"> helloWorld</p></body></html>
eb 服務存在兩種 HTML 渲染方法。
最早的HTML(web 1.0時代),都是服務器端渲染的,瀏覽器發送請求,服務器端將整個html作為一個完整文檔發送給瀏覽器。最早響應瀏覽器請求的被稱為CGI .
CGI
Java語言進入web 開發領域后,首先出現的技術是 servlet,這個技術模仿的是CGI.也是在服務器端渲染好整個HTML文檔,然后反饋給瀏覽器。
Servlet能夠很好地組織業務邏輯代碼,但是在Java源文件中通過字符串拼接的方式生成動態HTML內容會導致代碼維護困難、可讀性差。于是產生了JSP技術,JSP在靜態HTML內容中嵌入Java代碼,Java代碼被動態執行后生成HTML內容,類似的還有ASP,PHP等技術,這些技術本質上都是服務端渲染好整個HTML文檔,都屬于服務器端渲染。
web2.0時代 最大的思想革命本質不是前后端分離,而是把網頁當作獨立的應用程序(app)。前后端分離只是實現這一新架構的必然結果。web 2.0 時代最重要的就是ajax技術。
使用ajax技術后,HTTP GET拿到的不是渲染后的網頁,而是一個由html和Javascript組成的應用, 這個應用以瀏覽器為虛擬機。裝載和顯示數據是app啟動之后的運行邏輯。傳統上應用叫什么?叫Client,也就是前端。于是前后端就這么分離了,瀏覽器變成了應用的運行環境,后端蛻化成了單純的業務邏輯和數據接口。最典型的ajax 應用就是gmail,gmail實質上就是把過去桌面端的email 應用搬到了瀏覽器中。ajax這種技術也就是客戶端渲染。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。