整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
今天，前端工程师已经成为研发体系中的重要岗位之一。
可是与此相对的是，极少大学的计算机专业愿意开设前端课程，大部分前端工程师的知识，也都是在实践和工作中不断学习的。
最近收到很多同学的后台留言，说希望多推出一些前端方向的教程。
今天我们就带来一门适合前端初学者的课程，可以带你从零入门 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的更改纳入其中。新功能包括命名属性、构造函数属性升级、更严格、更简洁的匹配表达式、联合类型等。
问题是，你不是程序员，一想到编写代码就会让你脊背发凉。或者，也许你已经涉足了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开发是一个很好的开始。所有这些因素都催生了“全栈”发展。
任何全栈开发人员都应该能够在应用程序的每一层工作，并尽快交付成品。由于全栈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
七、大纲说明
本大纲根据计算机应用专业人才培养方案、培养规格和数据分析与处理性质，结合学校现有条件制定本大纲，其内容根据课程内容、人才培养方案及科学性和合理性原则选编。对大纲中的重点应深入讲解，对难点采用课堂讲授与课下辅导为主，课堂讲授中，教师反复强调工程性的指导思想，以及所讲知识点在信息科学领域所处的位置和作用，以生动的实例引导学生，提高学生学习的积极性。
制定人： 审定人：
*请认真填写需求信息，我们会在24小时内与您取得联系。
