Web前端技术培训
前端培训计划
前端培训计划随着互联网的飞速发展，前端开发成为了越来越受欢迎的职业方向。
作为一个前端开发工程师，不仅需要具备扎实的技术功底，还需要不断学习和提升自己。
因此，我们制定了以下前端培训计划，希望能够帮助大家在前端领域取得更大的成就。
首先，我们将从HTML和CSS入手。
HTML是构建网页结构的基础，而CSS则是用来设置网页样式的语言。
学习HTML和CSS是前端开发的基础，因此我们将安排专门的课程来系统地学习这两门语言，包括其基本语法、常用标签和样式设置等内容。
接着，我们将深入学习JavaScript。
JavaScript是一门用来实现网页交互的脚本语言，它可以使网页具有更加丰富的功能和更好的用户体验。
在这个阶段，我们将学习JavaScript的基本语法、DOM操作、事件处理等知识，并通过实际案例来巩固所学内容。
在掌握了HTML、CSS和JavaScript的基础之后，我们将进一步学习前端框架和库，如jQuery、React、Vue等。
这些框架和库可以极大地提高我们的开发效率，同时也能够帮助我们构建更加复杂和强大的前端应用。
我们将学习它们的基本用法，并通过实际项目来加深理解。
除了技术知识的学习，我们也将注重实际项目的实践。
通过参与真实的项目，我们可以将所学知识应用到实际中，提高我们的解决问题能力和团队协作能力。
因此，我们将安排一定的项目实践时间，让大家有机会将所学知识付诸实践。
最后，我们将进行技术分享和交流。
在这个阶段，我们将邀请一些资深的前端工程师来分享他们的经验和技术，同时也鼓励大家分享自己的学习心得和成果。
通过技术分享和交流，我们可以拓宽自己的视野，学习到更多的知识和经验。
总的来说，我们的前端培训计划将涵盖从基础到进阶的内容，通过系统的学习和实践，帮助大家在前端领域取得更好的发展。
我们相信，只要你踏实学习，坚持不懈，一定能够成为一名优秀的前端开发工程师。
让我们一起努力，共同成长！。
web前端开发技术实训大纲
web前端开发技术实训大纲
Web前端开发技术实训大纲
一、实训目标
本实训的目标是培养学生掌握Web前端开发的核心技术，包括HTML、CSS、JavaScript等，并能够独立完成简单的Web页面设计和开发。
二、实训内容
1. HTML基础
HTML文档结构
常用标签及其属性
列表、表格、表单等常见元素的使用
2. CSS基础
CSS选择器
常用样式属性
盒模型、布局、浮动等概念
3. JavaScript基础
JavaScript语法规则
DOM操作、事件处理等概念
常见JavaScript效果实现，如轮播图、下拉菜单等
4. 前端框架与工具
Bootstrap等前端框架的使用
Git等版本控制工具的基本操作
5. Web性能优化与测试
页面加载速度优化方法
前端性能测试工具的使用，如Google PageSpeed Insights等6. 项目实战
完成一个简单的企业官网或个人博客的设计与开发
实战中注重代码规范、可维护性及用户体验等方面的实践经验积累三、实训安排
本实训共计8周，具体安排如下：
第1周：HTML基础（2天）
第2周：CSS基础（3天）
第3周：JavaScript基础（3天）
第4周：前端框架与工具（2天）
第5周：Web性能优化与测试（2天）
第6-7周：项目实战（5天）
第8周：项目答辩与总结（2天）
四、实训要求
1. 熟练掌握HTML、CSS、JavaScript的基本语法和常用技巧；
2. 熟练使用至少一种前端框架和工具；
3. 了解Web性能优化和测试的方法和工具；
4. 能够独立完成一个简单的Web项目；。
WEB前端开发培训课程体系
丰泽教育WEB前端开发培训课程体系1、Web PC端页面重构课程时长内容网页图像设计(PS)2周PS 操作、色彩基础与配色、蒙版、图像变换、修图技巧、钢笔与抠图、矢量图形绘制、文本设计、渐变与图层样式、网页修图、图表设计、导航设计、网页切图、图像优化、布局设计Web 界面设计与实现WEB 广告设计、专题页设计、图标设计、电商网站设计、企业门户网站设计、WEB 应用设计、WEB APP 设计；熟练掌握各种WEB 界面的设计，精通WEB UI 设计规范与布局实现，并完成界面的制作。
页面上线流程页面上线流程UI 交互设计互联网UI 交互效果分析（图片整合、滑动门及宽高自适应等高级应用技术；初步接触Javascript）页面重构阶段项目实战牛到里约，跑动中国专题页云购全球一元抢苹果web界面设计2、HTML5基础课程时长内容HTML5 基础+CSS3基础HTML 快速入门、文本、图像、链接、表格、列表、表单、框架；CSS 基础语法、各种选择器（通用选择器、元素选择器、id和class 选择器、后代选择器、伪类选择器等）、盒模型与背景、文本格式化、4周表格、显示与定位CSS3高级CSS 复杂选择器（兄弟选择器、属性选择器、伪类和伪元素选择器等）、动画、过渡、2D/3D 转换、弹性盒子、CSS Hack、CSS 优化、CSS规范阶段项目实战电商站：1 号店3、JavaScript开发课程时长内容JS入门热身元素获取、事件类型：鼠标、键盘、窗口、表单、自定义事件、初识函数、变量声明、变量赋值、变量命名规则、关键字、保留字、window、元素基本属性操作、.操作符和[]操作符、初识if for语句、this关键字、getElementsByClassName兼容性、querySelector、querySelectorAll、自定义属性之索引。
JS数据类型JS的6大数据类型、类型检测、数据类型转换：强制类型转换、隐式类型转换、运算符：算术运算符、赋值运算符、关系运算符、逻辑运算符、位运算符，运算符优先级、函数定义、函数表达式、形参、实参、不定参、类数组对象对象arguments、返回值、作用域、作用域链、流程控制：if、else、switch、case、for、while、break、continueJS中时间概念JS中的定时器、setInterval()与setTimeout()区别、取消定时器、定时器优化方法。
Web前端开发入门指南
Web前端开发入门指南随着互联网的普及，Web前端开发也变得越来越重要。
前端开发涉及的内容包括Web页面的设计、开发和维护等。
这是一个需要掌握技术和艺术的领域，因此需要学习和实践的时间和精力。
本文为Web前端开发新手提供一个入门指南，帮助新手了解Web前端的基础知识和技术要点，以及如何学习和实践。
第一部分：Web前端开发基础Web页面的开发需要掌握HTML、CSS和JavaScript等基础技术。
以下是这些技术的简介。
1. HTMLHTML是一种标准化的标记语言，用于创建和组织Web页面中显示的内容。
HTML中的标记（tag）可以描述文本、图片、链接等，使Web浏览器能够正确显示内容。
HTML5是最常用的版本，具有更多的标记和更强的语义化，使内容易于理解和格式化。
2. CSSCSS是一种样式表语言，用于设置Web页面的外观和样式。
可以通过CSS来设置文本、背景、边框、宽度、高度等的样式。
CSS3可以提供更多的样式功能，如动画、背景图像、渐变、阴影等。
3. JavaScriptJavaScript是一种脚本语言，用于处理Web页面的交互和动态效果。
可以通过JavaScript编写脚本语言来处理表单验证、页面交互、动态效果等。
JavaScript还可以与服务器交互，获取和更新数据等。
第二部分：Web前端应用开发除了掌握基本的HTML、CSS和JavaScript技术外，还需要了解Web前端意义下的应用开发，包括以下几个方面。
1. 响应式Web设计随着移动设备使用量的增加，越来越多的用户使用手机和平板电脑访问Web页面。
响应式Web设计可以自动适应不同的设备和屏幕大小，提供更好的用户体验。
2. Web框架Web框架可以帮助开发人员快速构建Web应用程序，并提供更好的可维护性和扩展性。
常见的Web框架包括AngularJS、React、Vue.js等。
3. Web访问性能优化Web访问性能优化是提高应用程序性能和用户体验的重要一环。
WEB前端开发技能培训试题以及答案
一、【单项选择题】：1.CSS是( B )的缩写。
A、Colorful Style SheetsB、Cascading Style SheetsC、Creative Style SheetsD、Computer Style Sheets2.下列( D )HTML属性可用来定义内联样式。
A、fontB、classC、stylesD、style3.要将某div设置为漂浮于页面之上，以下能做到得是( A )。
A、position：absolute；B、position：relativeC、position：fixedD、position：static4.下列( )标签表示页面的标题( C )。
A、headB、htmlC、titleD、body5.（D ）HTML标签定义内部的样式表。
A、<css>B、<cssStyle>C、<script>D、<style>6.下列（A ）工具可以方便地选择连续的、颜色相似的区域。
A、魔棒工具B、矩形选框工具C、椭圆选框工具D、磁性套索工具7.HTML文档中（A ）位置比较适合于引用外部样式表。
A、在<head>部分B、文档开始C、文档结尾D、在<body>中8.用下列的( A )快捷键可以新建文件。
A、Ctrl+NB、Ctrl+MC、Ctrl+PD、Ctrl+C9.为了标识一个HTML文件应该使用的HTML标记是( C )。
A、<p></p>B、<boby></body>C、<html></html>D、<table>(/table>10.在CSS中，关于BOX的margin属性的叙述正确的是（B ）。
A、边距margin只能取一个值B、margin属性的参数有margin-left、margin-right、margin-top、margin-bottomC、margin属性的值不可为autoD、margin属性的参数值不能全部设置成0px二、【判断题】：1.HTML文档结构由头部和主体构成（√）。
参加web前端开发培训时需要注意什么
参加web前端开发培训时需要注意什么?参加web前端开发培训时需要注意什么? 如今，网站用户体验变得比以往更重要，响应式网页设计(RwD)也成为了网站必备的特性。
这也加速web前端开发行业的快速发展，学习web前端的人员也是越来越多，学习web前端最快最高效的方法就是参加web前端培训了，在此为大家推荐翡翠教育web培训机构。
当然，参加web前端开发培训时需要注意什么?下面翡翠教育web培训小编为大家详细介绍：第一：基础的重要性无论做什么都一定要有扎实的基础，参加web前端开发培训也不例外，只有基础牢固，才能更深入的学习新技能。
作为一名初级的web前端工程师，你必须要具备最基础的技术要素：html，CSS和Java。
这是作为web前端工程师所必须要掌握的。
web前端的入门门槛其实很低的，与其他语言先慢后快的学习节奏相比，他是一个先快后慢的过程。
所以在前期的学习过程中，你会很容易的掌握其基础的技能。
而随着html5技术的广泛应用，web 前端的学习也会变得更加简单。
第二：细节的重要性有句俗语是这样说的：“细节决定成败”，很多web 前端开发者在工作过程中为了追求速度，而忽略了一些细节性的东西。
比如：给代码加备注，代码的命名规范，代码的简洁等。
所有的这些看似不重要，其实却严重影响了项目的进度以及自身能力的提升。
在开发过程中，适当的添加备注，能够加深对技术点的印象，也便于以后在修改的过程中迅速查找;规范的代码命名能够方便团队之间的沟通，提高工作效率;而简洁的代码能够直观的展现某一块代码的作用。
第三：网站布局的重要性做网站的最终目的除了向大众群体直观的展现公司的形象以外，更重要的还是便于SEO优化，为了提升网站在百度搜索引擎中的排名，以获取更多的浏览量。
因为网站没有排名，不能让更多的人了解到公司，盈利从何谈起呢?作为一名web前端培训者，想要进一步提升技能，就一定要研究网站的优化布局。
第四：学习的重要性优秀的web前端工程师之所以优秀，不是因为工作的年限有多久，而是具备快速学习的能力。
软件开发工程师前端与后端开发技术培训
探讨WebSocket在Web开发中的应用场景，如实时聊天、实时数据 更新等。
WebSocket安全性
了解WebSocket安全性问题，如加密传输、防止恶意连接等。
前后端数据验证与处理
数据验证重要性
理解数据验证在前后端交互中的重要性， 确保数据的准确性和安全性。
后端数据验证
03
前后端交互技术
Ajax与异步通信
Ajax基本概念
XMLHttpRequest对象
了解Ajax的定义、原理及优势，掌握基于 JavaScript的异步通信实现方式。
深入学习XMLHttpRequest对象的使用， 包括创建请求、设置请求头、发送请求及 处理响应等。
Ajax应用场景
跨域请求处理
探讨Ajax在Web开发中的应用场景，如实 时搜索、动态加载内容等。
中级后端工程师
熟悉后端框架和分布式系统原理，能够独立完成复杂的后端项目， 并具备一定的性能调优能力。
高级后端工程师
精通后端技术栈，对微服务、容器化、云计算等前沿技术有深入理解 ，能够带领团队进行大型分布式系统的设计和开发。
团队协作能力提升方法探讨
建立良好的沟通机制
定期举行团队会议，分享工作进展、 交流技术难题和解决方案，促进团队 成员之间的沟通和协作。
制定明确的开发流程
建立统一的开发流程规范，明确各个 阶段的任务和职责，减少不必要的沟 通和协调成本。
使用版本控制工具
采用Git等版本控制工具进行代码管 理，确保多人协作时的代码冲突问题 得到有效解决。
培养团队文化
鼓励团队成员之间互相学习、互相帮 助，营造积极向上的团队氛围，提高 团队的凝聚力和战斗力。
持续集成
web前端实训心得体会(精选5篇)
Web前端实训心得体会（精选5篇）文档一：前端实训的重要性在进行web前端实训的过程中，我深刻意识到了这个实训的重要性。
通过实际动手操作来学习前端技术，让我对所学的知识有了更深入的理解，并且能够将知识应用到实际项目中。
在实训中，我学习了HTML、CSS、JavaScript等前端技术，并且练习了这些技术的实际运用。
通过这个实训，我不仅加深了对前端技术的理解，还提高了解决问题的能力和团队协作意识。
文档二：学习前端技术的困惑与突破在开始进行前端实训之前，我对前端技术还不太熟悉，遇到了很多困惑。
比如，如何布局网页、如何应用样式、如何处理用户交互等等。
但是通过实训的过程，我渐渐突破了这些困惑。
通过解决实际问题、与同学们的讨论和交流，我逐渐掌握了前端技术的基本要点。
同时，我也发现了自己解决问题的能力在实训过程中得到了极大的提升。
文档三：团队协作的重要性在实训过程中，我有幸和队友们一起合作完成了一个项目。
通过这次团队协作，我深刻体会到了团队协作的重要性。
在团队中，每个人都有自己的特长和优势，通过合作，我们可以互相学习、互相补充，最终完成一个比个人努力更出色的作品。
而团队协作也培养了我的团队合作意识和沟通能力，这对我日后的工作发展将起到很大的帮助。
文档四：持续学习的重要性通过前端实训，我深刻认识到了前端技术的快速发展和变化。
新的技术和工具不断涌现，需要我们不断学习和更新自己的知识。
只有不断学习，才能保持自己的竞争力。
因此，我决心在今后的学习和工作中，始终保持学习的心态，不断提升自己的技术水平。
文档五：前端实训带来的收获通过前端实训，我不仅学到了技术，还学到了很多其他的东西。
首先，我学会了如何解决问题和面对挑战。
在实训过程中，我遇到了很多困难和难题，但是通过自己的努力和与他人的讨论，我成功地解决了这些问题。
其次，我学会了如何进行团队合作。
通过与队友的合作，我体验到了合作的乐趣，也学到了如何与他人相处和协作。
最重要的是，我对前端技术有了更深入的理解和应用能力，这将对我未来的发展有很大的帮助。
前端课程培训计划书
前端课程培训计划书一、培训内容1. HTML基础知识2. CSS基础知识3. JavaScript基础知识4. Web开发基础5. 响应式网页设计6. 前端框架及工具的使用以上内容将涵盖前端开发的基础知识和技能，帮助学员建立扎实的前端开发基础，掌握常见的技术和工具的使用方法。
二、培训对象本次培训面向有志于学习前端开发的初学者和相关从业人员，要求学员具备一定的计算机基础知识和基本的编程概念，对互联网和网页制作有一定的了解和兴趣。
三、培训目标1. 掌握HTML、CSS、JavaScript的基础知识和语法规则。
2. 能够独立开发简单的网页项目，并完成基本的样式设计和交互功能。
3. 理解并掌握前端开发的基本工作流程和开发工具的使用方法。
4. 对响应式网页设计有一定的了解和实践经验。
5. 熟练掌握常见的前端框架和工具，能够运用到实际项目中。
四、培训方式1. 线下培训2. 在线直播课程3. 课后实践指导4. 项目实战演练在线直播课程将以视频教学的方式进行，课后将有专门的老师进行实践指导和项目实战演练，确保学员能够将所学知识应用到实际项目中。
五、培训安排1. 第1-2周：HTML基础知识的学习和实践2. 第3-4周：CSS基础知识的学习和实践3. 第5-6周：JavaScript基础知识的学习和实践4. 第7-8周：Web开发基础的学习和实践5. 第9-10周：响应式网页设计的学习和实践6. 第11-12周：前端框架及工具的使用每周安排2次线下课程和2次在线直播课程，每次课程时长为2小时，以确保学员在短时间内能够掌握相应的知识和技能，并能够及时实践和巩固。
六、培训师资本次培训将邀请具有多年前端开发经验的专业人士担任授课老师，他们将分享他们的实战经验和技术心得，帮助学员更好地掌握前端开发的核心技能。
七、培训评估1. 课程作业2. 项目实战作业3. 最终考核以上三类评估方式将综合评定学员的学习成绩和能力表现，帮助学员及时发现自己的不足并加以改进，确保培训效果的最大化。
前端实习生培训计划
前端实习生培训计划一、培训目标本次前端实习生培训旨在帮助实习生掌握前端开发的基础知识和技能，提高其实际项目开发能力和解决问题的能力，为其未来的职业发展奠定坚实基础。
二、培训内容1. HTML/CSS基础知识HTML的基本结构、标签和属性CSS的基本语法、选择器、盒模型、布局方法等2. JavaScript基础知识数据类型、运算符、流程控制等DOM操作、事件处理、定时器、Ajax等面向对象编程、闭包、作用域等高级JavaScript知识3. 前端框架和工具的使用掌握至少一种前端框架，如React、Vue等熟练使用npm、webpack等前端工具4. 图形设计软件的基本应用学习使用Photoshop、Sketch等软件进行简单的UI设计和图像处理5. 前端工程化掌握版本管理工具Git的基本使用了解前端自动化构建、测试等工程化流程6. 实际项目开发能力提升通过完成实际项目练习，提高学员的实际开发能力和解决问题能力三、培训时间安排本次培训将持续8周，每周工作5天，每天8小时。
具体时间安排如下：周一至周五（8:30-12:00，13:00-17:30）四、培训流程安排第一周：HTML/CSS基础知识培训授课内容：HTML/CSS基础知识讲解及实际操作练习项目实践：完成一个简单的静态页面制作练习第二周：JavaScript基础知识培训授课内容：JavaScript基础知识讲解及实际操作练习项目实践：完成一个简单的JavaScript交互页面练习第三周：前端框架和工具的使用培训授课内容：掌握一种前端框架和npm、webpack等前端工具的基本使用项目实践：结合前端框架完成一个简单的项目练习第四周：图形设计软件的基本应用培训授课内容：学习使用Photoshop、Sketch等软件进行简单的UI设计和图像处理项目实践：完成一个简单的UI设计练习第五周：前端工程化培训授课内容：掌握Git的基本使用和了解前端自动化构建、测试等工程化流程项目实践：结合工程化流程完成一个简单的项目练习第六至第八周：实际项目开发能力提升授课内容：通过完成实际项目练习，提高学员的实际开发能力和解决问题能力项目实践：完成一个较为复杂的实际项目练习五、培训考核方式1. 每周末进行周总结，包括本周学习成果、收获及下周学习计划2. 每两周安排一次小测验，考核学员对所学知识的掌握情况3. 每月底进行一次项目实践考核，考核学员的实际项目开发能力六、师资力量我们将邀请资深前端工程师担任本次培训的讲师，他们具有丰富的前端开发经验和培训经验，能够为学员提供专业的指导和帮助。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
浏览器
新的页面地址
服务器
/news
响应 response
/resources
如何制作超链接
<a>标签：网页中可点击的超链接 href 属性：超链接指向的URL地址（hypertext reference） target 属性：当超链接被点击的时候，新页面打开的位置
_blank：在浏览器的新标签 或新窗口中打开页面
256ⅹ256ⅹ256 = 16777216
06 – 盒模式
盒
在body中的每个HTML标签实际上都被包围在一个看不见 的矩形中，这个矩形就叫做“盒”。
HTML
盒模式
1. 内容区域 – content area
内容区域中包含的是盒子中真正的内容（文本、图片等）
2. 补白 或内边距 – pa术领域最具权威和影响力 的国际中立性技术标准机构。
• W3C已发布了200多项影响深远的Web技术标准及 实施指南如HTML、CSS、WCAG等。
使用网页基本结构标签组织整个页面
把所有显示在网页中的内容放入body标签 网页中的不可见部分放入head标签中 将所有 HTML 代码放入 <html> 标签中 DOCTYPE：表示 HTML 的版本信息
高
padding
是
是
否
是
是
是
可设置 margin
是
左右 是
div布局入门
div
div
div
div
07 – 图片
三种网页图片
网页中出现的大部分图片都属于以下这三种类型
• 内容图片 • 布局图片 • 用户交互图片
创建内容图片
<img>标签
HTML
src 属性：图片的路径 alt 属性：图片的简单描述
• 可访问性：搜索引擎、屏幕阅读器
创建布局图片
使用CSS中的background属性
• background-color • background-image • background-repeat • background-position
padding包围在内容区域的边缘，上右下左 3. 边框 – border border包围在padding的边缘，上右下左
margin border padding
4. 边距 – margin
margin包围在border的上右下左四个边缘
盒模式相关属性
width：宽 height：高 border：边框 padding：内补白 margin：外边距 display：显示
_self：在当前窗口中打开页 面，替换原来的页面
如果不添加 target 属性，那么默认值是 _self
绝对路径、相对路径和根路径
绝对路径向一个特定的服务器上的文件发送请求
HTML
相对路径不指定服务器，参照发送请求页面的URL HTML
根路径前面总是包含 “/“，在绝对路径的基础上去掉协议和主机名
HTML 和 CSS 学习大纲
HTML 标签 开发工具 超链接 CSS 选择器 颜色 盒模式 图片
字体 表单 表格 浮动 定位 iframe 搜索引擎优化
HTML 和 CSS 学习大纲
01 - HTML 标签
使用 HTML 标签组织网页结构
标题标签 heading tag： <h1> – <h6> 段落标签 paragraph： <p> 无序列表 unordered list： <ul> 列表项 list item：<li> 有序列表 ordered list：<ol>
大家好
1
Web 前端技术培训
中国移动通信集团黑龙江有限公司2015.13
什么是 Web 前端
Web 系统
客户端 客户端
服务器
客户端 客户端
Web 前端三要素
HTML
CSS
JavaScript
课程大纲
HTML CSS JavaScript
第一部分 HTML 和 CSS
选择器：可以选择html标签 类型选择器：不带尖括号的标签名 派生选择器：作用在某些标签的子标签上
把样式表放在什么地方？
添加CSS样式的位置：在head标签中添加style子标签 使用<link>标签将CSS和所有的html文件关联在一起
参考手册
W3School
MDN
• 网络平台：HTML • 网络平台：CSS
计算盒子的尺寸 属性设置的更多形式
margin border padding
display属性
block、inline、inline-block、none
display
block
inline inlineblock
显示位 默认宽
置
高
换行
父元素 宽度
内容高 度
同行
内容宽 高
同行
内容宽 高
可设置宽 可设置
HTML 和 CSS 学习大纲
03 - 超链接
在浏览器中输入URL时发生了什么
服务器
/news
在浏览器中点击超链接时发生了什么
1 点击超链接，连接中有一个文件请求被发送给服务器
浏览器
服务器
/news
/resources
在浏览器中点击超链接时发生了什么
2 服务器把文件返回给浏览器，浏览器用新的文件替换旧的文件
HTML 和 CSS 学习大纲
02 - 开发工具
常用开发工具介绍
UltraEdit、EditPlus：代码颜色、多文件编辑
Dreamweaver、Sublime、WebStorm：神器
WebStorm 的安装、启动、配置和使用
官方下载地址： http:// 安装 启动 配置：字体大小和配色方案的设置 使用WebStorm编写HTML
HTML
04 – CSS选择器
将内容和样式分离
HTML考古：当Web开发还是一项新技术时，html的内 容和样式没有被分开
HTML
内容和样式分离：把表示样式的代码从html中分离出来， 并且创建一种规则来定义html标签要显示成什么样子
Cascading Style Sheets 层叠样式表
选择器
05 – 颜色
black #FF0000
CSS颜色
关键字颜色
红色
十六进制颜色
rgb颜色
黑色
黄色
十六进制色（Hexadecimal colors）
每个十六进制颜色由三部分组成
#FFFF00
红色的多少 绿色的多少 蓝色的数量
取值范围：16进制的00-FF，10进制的0-255
网页的颜色
使用十六进制数来设置颜色，三个部分，每个颜色有256 种可能的取值