整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
今天，前端工程師已經成為研發體系中的重要崗位之一。
可是與此相對的是，極少大學的計算機專業愿意開設前端課程，大部分前端工程師的知識，也都是在實踐和工作中不斷學習的。
最近收到很多同學的后臺留言，說希望多推出一些前端方向的教程。
今天我們就帶來一門適合前端初學者的課程，可以帶你從零入門 HTML、CSS、JS、React 等前端核心技能，并創建一個待辦事項的管理應用～
項目效果：
課程從最基礎的 HTML/ CSS/JS 講起，還包含了 TypeScript/React/Fabric 等常用技能的講解。由淺入深，層層遞進，如果你想快速上手 React 框架，這門課會是你非常好的選擇。
訪問“實驗樓”官網，搜索“從 0 到 1 構建待辦事項應用”就能學習全部課程內容。
以下是課程第一節的內容 —— 「HTML 簡介」，帶你快速入門HTML，讓我們一起進入前端的大門看看吧：
「HTML 簡介」
本實驗是對 HTML 進行學習，并且較詳細的說明了 Web 是如何工作的。主要內容有：HTML 常見標簽、HTML 文檔結構、HTML 表格和表單、HTML 有序列表和無序列表。通過本節學習，可以構建簡單的 HTML 網頁。
HTML（超文本標記語言）是一種用于創建網頁的標準標記語言。HTML 不需要編譯，可以直接由瀏覽器執行，它的解析依賴于瀏覽器的內核。它不是一種編程語言，而是一種標記語言。
下面我們來演示用戶是如何看到一個網頁顯示的。
具體來講：
首先我們來看一個例子：
<!DOCTYPE html>
<html>
<head>
<title>HTML 簡介</title>
<meta charset="utf-8" />
</head>
<body></body>
</html>這是一個 HTML 的基本骨架，我們將逐步介紹這些是什么意思。
文檔類型聲明
<!DOCTYPE html> 是我們的文檔聲明頭。他告訴了瀏覽器，本文檔處理的是 HTML 文檔。
html 標簽
html 標簽即根元素，此處表示文檔的開始，該標簽包含兩個子標簽：head 和 body。
head 元素
head 標簽下面所包含的標簽由 title、meta、link、style、script 等（后面會講到）。
title 標簽
作用：設置文檔的標題或者名稱。瀏覽器通常將該標簽的內容顯示在窗口頂部或者標簽頁上。每個 HTML 文檔只能有一個，必須有一個 title 標簽。
meta 標簽
<metacharset="UTF-8"> 聲明字符的編碼格式為 utf-8。
body 標簽
body 標簽定義文檔的主體，也就是我們的主要內容（比如文本、超鏈接、圖像、表格和列表等）。
1.h 系類標簽
h 標簽有六種 h1，h2，h3，h4，h5，h6，它代表著我們的標題。
<!DOCTYPE html>
<html>
<head>
<title>HTML 簡介</title>
<meta charset="utf-8" />
</head>
<body>
<h1>我是一級標題</h1>
<h2>我是二級標題</h2>
<h3>我是三級標題</h3>
<h4>我是四級標題</h4>
<h5>我是五級標題</h5>
<h6>我是六級標題</h6>
</body>
</html>為了大家能更有效的學習，請使用實驗樓的環境。首先我們新建一個文件，點擊 File，然后 New File，命名為 index.html。
然后輸入上面的代碼。
讓我們來看一下運行效果吧。鼠標右鍵 index.html 文件，點擊 Open With，然后點擊 Preview。
最終效果為：
2.p 標簽
p 標簽是我們的文本標簽，p 標簽會自動在其兩個標簽之間創建一些空白。刪掉上段代碼 <body> 標簽里的內容，把下面的內容放到 <body> 標簽里面去。
<p>我是第一段文字，實驗樓，做實驗，學編程</p>
<p>我是第二段文字，實驗樓，做實驗，學編程</p>3. 圖片標簽
HTML 的圖像是通過標簽 <img> 來定義的。語法: <imgsrc="圖片地址"/> 刪掉上段代碼 <body> 標簽里的內容，把下面的內容放到 <body> 標簽里面去。
<p>實驗樓圖片：</p>
<img src="https://static.shiyanlou.com/frontend/dist/img/9f43b00.svg" />4.a 標簽
<a> 標簽是超鏈接標簽，意思就是我們點擊它可以跳轉到一個網頁。刪掉上段代碼 <body> 標簽里的內容，把下面的內容放到 <body> 標簽里面去。
<a href="https://www.shiyanlou.com/">實驗樓</a>點擊文字：
跳轉到指定網頁：
篇幅有限，后續的課程內容，請在“實驗樓”邊敲代碼邊學習～
訪問“實驗樓”官網，搜索“從 0 到 1 構建待辦事項應用”，就能找到課程，繼續學習啦！
通過我們推薦的書籍學習前端與后端知識，成為網頁全端工程師。 內容包含HTML， CSS， JavaScript， React， Node.js， MongoDB， AND MORE！
通過這些書籍你將會學到的網頁開發知識包括：
這些將一步一步帶者你走，讓你能夠從頭開始架設屬于你自己的網頁！ 你不需要有任何的編程經驗，也不需要有相關的背景知識。這些書籍包含網頁前端與后端所需內容，帶你成為網頁全端工程師。 手把手教學的課程，讓你從網頁前端學到網頁后端，建立用戶界面到鏈接數據庫，建立任何你想要的美觀網站！
在學習這些書籍之后，你將能夠使用：
以下人士可以學習這些書籍：
網頁開發全攻略（HTML， CSS， JavaScript等）的參考學習書籍推薦：
《客戶體驗分析：客戶可以如何更好地指導您的Web和APP設計決策》
本書是一本前所未有的用戶體驗（UX）分析指南，它縮小了關鍵任務技能差距，使數字優先世界中的業務專業人員能夠根據客戶體驗分析做出明智、有效和快速的決策。
盡管有二十年的網絡指標，但客戶體驗在很大程度上仍然是一個黑匣子。UX分析工具幫助企業以新的視角看待自己和客戶，但決策者不得不依靠熟練的分析師來解釋來自這些工具的數據，從而導致延遲和混亂。本書向廣泛的專業人士展示了如何使用用戶體驗分析來改善客戶體驗和增加收入，并教授了將UX分析應用于任何數字優化挑戰的C-SUITE方法。它提供了 50 個案例研究和 30 個備忘單，使其成為日常參考，并包括十個思維導圖，每個參與其中的角色討論，從高級領導者到產品經理再到電子商務專家。
各行各業的經理可以定期查閱本書，以幫助他們指導團隊，營銷、電子商務、銷售、產品管理等領域的入門級到中級專業人士將轉向這些頁面來改進他們的網站和APP設計。
《Web 開發和設計基礎與HTML5，第 10 版》
《HTML5的Web開發和設計基礎》提供了對Web開發和設計的全面介紹，強調動手實踐。作者 Terry Felke-Morris 介紹了文本配置、顏色配置和頁面布局等主題，并進一步關注設計、可訪問性和 Web 標準。這本書涵蓋了必要的硬技能（如HTML5，CSS和JavaScript）和軟技能（設計，電子商務和促銷策略），這些技能被認為是當代Web開發的基礎。
本書第 10 版提供了 HTML5 的最新知識、移動設備設計等。更新的代碼示例、案例研究和 Web 資源鼓勵讀者進一步動手研究。
《HTML和CSS揭秘：完整簡潔的網頁設計與開發編碼速成課程》
標記語言不同于編程語言。雖然編程語言幫助我們修改數據，但我們使用標記語言來確定元素在網頁上的顯示方式，我們使用CSS來裝飾HTML結構的外觀。
HTML具有簡單的，基于文本的結構，易于初學者學習和理解。HTML用于構建網站的前端，CSS是美化網頁的觸摸。它們都被稱為網絡的基礎語言和構成所有現代網站基本結構的關鍵語言。
本指南是為初學者和高級用戶開發的，可以輕松學習編碼。本指南將以簡化的形式教您網頁設計和開發的基礎知識。
在本指南中，您將學習到以下知識：
不僅如此，您還將嘗試作業來測試您的知識。您還可以訪問所有資源，例如附加到指南的不同鏈接、圖像和編碼文件，如本指南中使用的.html和.css。仔細閱讀并按照說明一步一步地操作，很快，您將掌握HTML和CSS的使用。
《PHP 8 解決方案：動態網頁設計和開發變得簡單》
通過添加反饋表單、創建成員可以上傳自動調整大小的圖像的私人區域或將所有內容存儲在數據庫中，使您的網站更具活力。 David Powers更新了他的權威書籍，隨著PHP 8的到來，將最新的技術和對PHP的更改納入其中。新功能包括命名屬性、構造函數屬性升級、更嚴格、更簡潔的匹配表達式、聯合類型等。
問題是，你不是程序員，一想到編寫代碼就會讓你脊背發涼?；蛘撸苍S你已經涉足了PHP和MySQL，但你無法超越嬰兒步驟。如果這描述了你，那么你剛剛找到了正確的書。PHP 為使用服務器端語言的每五個網站中的四個提供支持。結合MySQL數據庫，它是創建動態網站的理想選擇。PHP和MySQL是免費的，易于使用的，并且由許多網絡托管公司在其標準軟件包中提供。本書還介紹了MariaDB，它是MySQL的無縫替代品，已被許多Web服務器采用。
不幸的是，大多數PHP書籍要么期望你已經是專家，要么強迫你進行無休止的練習，幾乎沒有實際價值。相比之下，本書通過一系列實際示例立即為您提供真正的價值，您可以將這些示例直接合并到您的網站中，優化性能并添加文件上傳、電子郵件反饋表單、圖片庫、內容管理系統等功能。每個解決方案的創建不僅考慮了功能，還考慮了視覺設計。
但本書不僅僅提供了現成腳本的集合：每個PHP解決方案都建立在以前的基礎上，快速輕松地教你PHP和數據庫設計的基礎知識。您將學習如何使用面向對象編程 （OOP） 技術優化代碼。在本書結束時，您將有信心開始編寫自己的腳本，或者 - 如果你更喜歡將任務留給其他人 - 根據自己的要求調整現有腳本。從一開始，您就會看到通過采用安全編碼實踐來保護您的網站是多么容易。
通過本書您將學到什么
這本書是為誰寫的
理想情況下，讀者應該事先接觸過使用PHP的Web開發。
《React 17 設計模式和最佳實踐：使用行業標準實踐設計、構建和部署生產就緒的 Web 應用程序，第3版》
使用設計模式和富有洞察力的最佳實踐構建可擴展、可維護且功能強大的 React Web 應用程序
本書充滿了有用的 React 模式，您可以立即在項目中使用，它將幫助您節省時間并輕松構建更好的 Web 應用程序。
React 17 設計模式和最佳實踐是那些希望將編碼技能提升到新水平的人的實踐指南。您將花費大部分時間學習編寫可維護且干凈的代碼的原則，但您還將更深入地了解 React 的內部工作原理。
隨著各章的學習，您將學習如何構建可跨應用程序重用的組件、如何構建應用程序以及創建實際有效的窗體。然后，您將通過探索如何設置 React 組件的樣式并對其進行優化以使應用程序更快、響應更快來構建您的知識。
一旦你掌握了其余部分，你將學習如何有效地編寫測試，以及如何為 React 及其生態系統做出貢獻。
在本書結束時，您將能夠避免反復試驗和發育頭痛的過程。相反，您將能夠使用您的新技能來有效地構建和部署您可以引以為豪的真實 React Web 應用程序。
本書適用于希望更好地了解 React 并將其應用于現實生活中的應用程序開發的 Web 開發人員。在開始之前，您需要對 React 和 JavaScript 有中級經驗。
《全棧 WEB 開發：使用現代 Web 開發工具進行現代全棧 Web 開發的所有初學者到專家指南》
近年來，Web開發越來越受歡迎。組織已經意識到，隨著網站越來越受歡迎，擁有強大的在線形象對于吸引更多潛在客戶是必要的。因此，他們尋找能夠使用最新技術為他們設計和開發最佳外觀和性能最佳的 Web 應用程序的杰出個人。
Web開發為在該領域熟練的個人提供了豐厚的資金。正因為如此，年輕一代被 Web 開發作為一份工作所吸引是有道理的。積極追求職業道路與單純的愿望大不相同。它需要計劃、過程、相關的培訓和實踐。但是每個開發人員都必須注意，Web 開發確實不僅僅是構建網站，而是構建應用程序、游戲、虛擬協助和其他在 Web 上運行的資源。我建議，在選擇您必須看到或閱讀的大量技術技能之一的職業時，Web開發是一個很好的開始。所有這些因素都催生了“全?！卑l展。
任何全棧開發人員都應該能夠在應用程序的每一層工作，并盡快交付成品。由于全棧Web開發人員參與開發生命周期的許多階段，因此需求量越來越大。如果你想成為一名全棧開發人員，你必須了解你需要的所有人才。
你可以使用這本書來發現你需要知道的東西，并理順你成為全棧Web開發人員的任何彎曲的道路。也就是說，了解您對這次職業旅行的要求，以使其愉快而簡單。
本書第版側重于后端技術以及數據庫技術工具、身份驗證和安全性，以及現代全棧開發工具中涉及的所有其他技術。
電子計算機、萬維網和互聯網的興起是這個時代或世紀的終極發明，我們很幸運能成為這些發明的見證者，在這些發明對人類影響的趨勢的頂峰工作，IT技能變得很重要。
近年來，Web開發的范圍僅限于創建網站。但是，Web 開發不僅包括創建網站;它還涉及創建在線應用程序、游戲、虛擬助手和其他服務。如果您想在您可能已經看到或讀到的眾多 IT 領域之一從事職業，Web 開發是一個很好的起點。所有這些因素都催生了“全棧”發展。
本書側重于現代前端技術工具，如HTML 5，CSS 3，Bootstrap 4，JavaScript，jQuery，GITHUB和現代Web開發的版本控制以及后端技術工具，如Node JS，Express，API，嵌入式JavaScript（EJS），React JS，數據庫基礎，SQL數據庫，NoSQL數據庫，MongoDB和Mongoose，現代全棧Web開發的部署+身份驗證和安全性。
時：100
學分：6
HTML+CSS是網頁構成的基本要素，“跨平臺開發”的概念也逐漸走進移動開發者的視野。目前國內外已經有很多基于HTML5的跨平臺開發工具，掌握HTML+CSS技術，運用工具中所提供的各種豐富的功能模塊，可在很短時間內完成App的開發而且讓你的App具備完美的原生體驗。
通過本課程的學習，使學生對網頁得組成有所了解，從最簡單的網頁開發基礎入手，通過本課程的學習與實踐，使學生掌握網頁得基本組成部分，掌握使用HTML完成網頁開發得步驟，并能結合CSS為網頁增添華麗的動畫與3D效果樣式，能夠編寫大型綜合性網頁。
教學章節 | 理論 | 實驗 |
第一章：HTML語言基礎 | 4 | 4 |
第二章：表格和表單 | 4 | 4 |
第三章：CSS樣式表基礎 | 4 | 4 |
第四章：CSS樣式表深入 | 4 | 4 |
第五章：塊狀元素和行內元素 | 4 | 4 |
第六章：盒子模型與盒子定位 | 8 | 8 |
第七章：菜單樣式設計 | 4 | 4 |
第八章：表格布局網頁制作 | 4 | 4 |
第九章：DIV頁面布局 | 4 | 4 |
第十章：靜態網站設計案例 | 10 | 10 |
合計 | 50 | 50 |
三、實踐教學的基本要求
1.課內實驗項目一覽表
序號 | 實驗項目 | 學時 | 必/選做 |
1 | HTML基本標簽 | 2 | 必做 |
2 | 網頁表單表格設計 | 2 | 必做 |
3 | 網頁基礎CSS樣式設計 | 2 | 必做 |
4 | 網頁CSS樣式設計 | 2 | 必做 |
5 | 網頁CSS樣式設計 | 2 | 必做 |
6 | 浮動廣告位設計案例 | 2 | 必做 |
7 | 導航欄菜單設計案例 | 2 | 必做 |
8 | 網頁布局設計 | 2 | 必做 |
9 | 新疆旅游網網頁設計案例 | 4 | 必做 |
10 | 百度貼吧網頁設計案例 | 4 | 必做 |
總計 | 24 | ||
2.實踐教學要求
（1）教學目的: 加強實踐環節，培養學生的動手能力。使學生通過實驗驗證課堂所學理論，加深理解并掌握網頁設計相關理論知識。
(2) 教學要求：了解要求學生掌握Hbulider軟件的操作過程，以及利用該軟件進行實際網頁設計開發的步驟。
(3) 教學形式：課堂教學和教學實驗相互結合，通過實驗內容鞏固所學知識。
四、課程的基本教學內容及要求
第一章 HTML語言基礎
1.教學內容
（1）B/S程序架構
（2）HTML語言
（3）HTML常用標簽
2.重點與難點
重點：HTML常用標簽分類，常用標簽使用。
難點：HTML常用標簽分類，常用標簽使用。
3.課程教學要求
本章采用多媒體講述的教學方法，要求學生了解HTML語言，掌握HTML常用標簽分類以及常用標簽使用，會使用Hblider完成簡單得頁面練習。
第二章 表格和表單
1.教學內容
（1）表格的基本結構，表格的基本語法
（2）表格的基本操作
（3）表單的使用
（4）表單基本元素
2.重點與難點
重點：表格/表單的基本結構，基本語法以及常用操作。
難點：表格/表單的基本結構，基本語法以及常用操作。
3.課程教學要求
本章采用多媒體講述的教學方法，要求掌握網頁中表格和表單的基本結構，基本語法以及常用操作，并可以完成簡單的表格表單頁面設計。
第三章 CSS樣式表基礎
1.教學內容
（1）CSS基本語法
（2）CSS基本用法
（3）CSS基礎選擇器
2.重點與難點
重點：CSS基本語法，CSS中選擇器的分類及各類選擇器的使用方法。
難點：CSS基本語法，CSS中選擇器的分類及各類選擇器的使用方法。
3.課程教學要求
本章采用多媒體講述的教學方法，要求學生了解什么是CSS，掌握CSS基本語法和基本使用方式，CSS中選擇器的分類及各類選擇器的使用方法，并能使用CSS為網頁添加簡單的樣式。
第四章 CSS樣式深入
1.教學內容
（1）CSS顏色屬性
（2）字體屬性
（3）CSS背景屬性
（4）CSS列表屬性
（5）CSS文本格式化
2.重點與難點
重點：CSS各類樣式的基本語法，屬性及使用。
難點：CSS各類樣式的基本語法，屬性及使用。
3.課程教學要求
本章采用多媒體講述的教學方法，要求學生深入了解掌握CSS顏色、字體、背景、列表等屬性基本語法和使用方式，并能使用CSS為網頁添加相應的樣式。
第五章 塊狀元素,行內元素
1.教學內容
（1）塊狀元素和行內元素
（2）元素之間相互轉換
2.重點與難點
重點：塊狀元素和行內元素區別和相互轉換。
難點：塊狀元素和行內元素區別和相互轉換。
3.課程教學要求
本章采用多媒體講述的教學方法，要求學生深入了解掌握CSS中元素的分類和相互轉換，并能使用CSS為網頁添加相應的樣式。
第六章 盒子模型
1.教學內容
（1）盒子模型
（2）盒子模型計算
（3）邊距設置
（4）盒子模型陰影
（5）盒子定位
2.重點與難點
重點：盒子模型大小計算方式，內外邊距設置使用，盒子定位方式和區別。
難點：盒子模型大小計算方式，內外邊距設置使用，盒子定位方式和區別。
3.課程教學要求
本章采用多媒體講述的教學方法，要求學生深入了解掌握CSS中盒子模型的分類，盒子大小的計算，以及盒子邊距的設計和計算，熟練定位盒子位置，并能使用CSS為網頁添加相應的樣式。
第七章 菜單樣式設計
1.教學內容
（1）水平導航菜單設計
（2）垂直導航菜單設計
（3）懸浮菜單設計
2.重點與難點
重點：水平/垂直/懸浮導航菜單設計。
難點：水平/垂直/懸浮導航菜單設計。
3.課程教學要求
本章采用多媒體講述的教學方法，要求學生熟練使用CSS樣式基礎完成不同類型的導航菜單設計。
第八章 表格布局網頁制作
1.教學內容
（1）網頁布局屬性
（2）使用表格完成完成網頁布局
2.重點與難點
重點：使用表格完成完成網頁布局。
難點：使用表格完成完成網頁布局。
3.課程教學要求
本章采用多媒體講述的教學方法，要求學生掌握網頁布局的用途，熟練使用CSS表格完成網頁布局。
第九章 DIV頁面布局
1.教學內容
（1）使用DIV完成完成網頁布局
（2）新疆旅游網網頁設計
2.重點與難點
重點：使用DIV完成完成網頁布局。
難點：使用DIV完成完成網頁布局。
3.課程教學要求
本章采用多媒體講述的教學方法，要求學生掌握網頁布局的用途，熟練使用DIV完成網頁布局，完成新疆旅游網網頁設計。
第十章 靜態網站設計案例
1.教學內容
（1）百度貼吧網頁設計
2.重點與難點
重點：百度貼吧網頁設計。
難點：百度貼吧網頁設計。
3.課程教學要求
本章采用多媒體講述的教學方法，要求學生熟練使用HTML+CSS完成百度貼吧網頁設計
五、課程考核
1.考核方式、記分制和考核時間
本課程采用理論閉卷考查+上機實踐兩種考核方式，成績采用百分制記分，理論考試時間為60分鐘，上機考試時間為120分鐘
2.考試成績構成
課程總成績=平時成績10%+實踐成績20%+期末考試成績70%。
3.考核題型及命題要求
理論考核題型為選擇題。
上機考試題型為網頁設計題。
命題依據教學大綱要求，命題在教學大綱規定的教學目的、教學要求、教學內容和教材范圍之內，按照重分析推理和理論聯系實際原則，既考查對基本知識的識記能力，又考查運用所學知識實際運用能力，考試命題的覆蓋面應盡可能廣一些，其中主要考查學生對HTML+CSS基礎的掌握程度和使用HTML+CSS完成網頁設計的熟練程度。
六、參考教材
[1] 明日科技.梅長林.零基礎學HTML5+CSS3.吉林大學出版社,2017
[2] Elisabeth Robson,Eric Freeman著,徐陽,丁小峰等譯.Head First HTML與CSS（第2版）.中國電力出版社.2013
七、大綱說明
本大綱根據計算機應用專業人才培養方案、培養規格和數據分析與處理性質，結合學?，F有條件制定本大綱，其內容根據課程內容、人才培養方案及科學性和合理性原則選編。對大綱中的重點應深入講解，對難點采用課堂講授與課下輔導為主，課堂講授中，教師反復強調工程性的指導思想，以及所講知識點在信息科學領域所處的位置和作用，以生動的實例引導學生，提高學生學習的積極性。
制定人： 審定人：
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
