整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
本章目标：
Cascading Style Sheet 级联样式表。 表现HTML或XHTML文件样式的计算机语言。 包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定
在这里插入图片描述
说明：
在这里插入图片描述
CSS1.0 读者可以从其他地方去使用自己喜欢的设计样式去继承性地使用样式；
CSS2.0 融入了DIV+CSS的概念，提出了HTML结构与CSS样式表的分离
CSS2.1 融入了更多高级的用法，如浮动，定位等。
CSS3.0 它包括了CSS2.1下的所有功能，是目前最新的版本，它向着模块化的趋势发展，又加了很多使用的新技术，如字体、多背景、圆角、阴影、动画等高级属性，但是它需要高级浏览器的支持。
由于现在IE 6、IE 7使用比例已经很少，对市场企业进行调研发现使用CSS3的频率大幅增加，学习CSS3已经成为一种趋势，因此本书会讲解最新的CSS3版本
本课程中主要讲解css2.1和css3
CSS的优势
在这里插入图片描述
Style标签
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
链接式与导入式的区别
CSS样式优先级
行内样式>内部样式表>外部样式表
就近原则：越接近标签的样式优先级越高
【学员练习】 使用标题标签和段落标签制作李白的诗《望庐山瀑布》，诗正文字体颜色为绿色，字体大小为14p
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
小结
基本选择器的优先级
ID选择器>类选择器>标签选择
标签选择器是否也遵循“就近原则”？ 不遵循，无论是哪种方式引入CSS样式，一般都遵循ID选择器 > class类选择器 > 标签选择器的优先级
在这里插入图片描述
在这里插入图片描述
后代选择器两个选择符之间必须要以空格隔开，中间不能有任何其他的符号插入
在这里插入图片描述
在这里插入图片描述
添加图片注释，不超过 140 字（可选）
者通过实践来阐述HTML 优先原则的主要目标是扩大能够从事 Web 软件编程工作的人员范围。
原文链接：https://html-first.com/
未经允许，禁止转载！
HTML优先是一组原则，旨在通过以下方式使构建 Web 软件更容易、更快、更具包容性且更易于维护：
利用现代网络浏览器的默认功能。
利用 HTML 属性语法的极致简单性。
利用 Web 的查看源代码功能。
HTML优先原则的主要目标是扩大能够从事 Web 软件编程工作的人员范围。从个人角度来看，这是件好事，因为这可以让更多的人成为Web 程序员，构建出色的 Web 软件，并提高他们的收入。从业务角度来看，这些原则也有好处，因为这可以降低构建软件的成本，并减少招聘所需的资源量（众所周知，这是一个资源密集型流程）。
HTML优先原则的第二大目标是让构建 Web 软件的工作变得更加愉快和无缝。对于大多数 Web 程序员来说，在快速构建产品期间能够流畅地在文本编辑器和浏览器之间来回切换，而不会遇到各种磕磕绊绊，也不需要切换上下文，他们会感到非常兴奋。但如今程序员需要几年的时间来掌握工具和框架才能达到这个阶段。HTML 优先原则能够让人们在学习编程的早期阶段体会这种感觉，并达到这种水平。
为了实现这些目标，首先必须承认 HTML 非常容易理解，因此我们将 HTML 作为产品的基石，不仅用 HTML 来定义内容和结构，还用它来设置样式和行为。
1. 推荐使用 HTML 原生的方法。
2. 使用 HTML 属性来设置样式和行为。
3. 使用利用了 HTML属性的库。
4. 避开构建过程。
5. 推荐使用“裸” HTML。
6. 保留查看源代码的功能。
浏览器支持的开箱即用的功能范围很广，而且数量还在不断增长。在将库或框架添加到代码库之前，请检查是否可以使用原汁原味的 html/css 来实现它。
鼓励的写法：
不鼓励的写法：
我们可以使用 Tailwind 或 Tachyons等 SPC 库来实现样式。同时使用 hyperscript、Alpine 或类似的库来实现行为。这意味着很多功能都需要使用 HTML 来实现。但这也意味着其他开发人员更容易找到和理解行为、浏览并修改它们。
鼓励的写法：
不鼓励的写法：
你可能会注意到，这种方法似乎违反了关注点分离——备受吹捧的软件设计原则之一。我们认为，非黑即白的关注点分离原则是有缺陷的，因此我们提倡采用一种考虑到行为局部性以及两者之间权衡的方法。
鼓励的写法：
不鼓励的写法：
需要将文件从一种格式转换为另一种格式的库会导致维护开销增加大量，严重影响查看源代码的功能或导致其无法使用，而且通常开发人员需要学习新工具才能使用它们。现代浏览器已不再有当初引入这些实践时的性能限制。如果我们使用 HTML 优先的库（例如 static tailwind 或 htmx），则额外所需的 CSS 和JS 量为最少。
鼓励的写法：
不鼓励的写法：
这条原则适用于后端实现。基本思想是可读性。熟悉 HTML 但不熟悉后端框架的开发人员查看视图文件，仍然应该能够理解 90% 以上的内容。如上所述，这意味着牺牲简洁性而换取易于理解性。
鼓励的写法：
不鼓励的写法：
早期网络的美妙之处在于，我们总能 "窥探 "到网页任何部分的代码。对于有抱负的开发人员来说，这是一项福利，因为这为我们在理论（阅读代码如何工作）和实践之间架起了一座桥梁，将代码和界面并排展示在我们眼前。对于许多网站来说，我们只需复制并粘贴 html 或 css，然后放到自己的网站上运行，就可以获得近乎相同的复制品。新旧代码的混合不仅是一种学习方式，而且往往也是我们创作新作品的基础。
后来，业界采用了一些 "改进 "方法，导致这种做法变得更为罕见。例如，如果我们使用流行的前端框架 React，就不能点击 "查看源代码"，复制代码并重新混合，因为首先 React 有构建过程，这意味着我们在开发人员工具中看到的代码与开发人员编写的代码不同；其次，React 代码片段必须封装在 react 应用程序中才能工作。
遵循 HTML 优先原则的网站能够重新获得查看源代码的功能。事实上，HTML 优先的网站往往更进一步。因为如果使用 HTML 属性定义用户界面交互，那么在复制粘贴到新的代码库时，也可以保留这些交互（前提是目标文件包含相同的 js 库）。我们打算将来将其扩展到 HTML 优先的代码片段库。
本文中描述的实践和原则在整个行业中仍然很小众，而且使用的社区也很少。我希望通过建设网站（https://html-first.com/）的方式来寻找同道合的人，共同探讨并完善这些想法。
至如今，TypeScript逐渐成为各个公司维护前端项目的方案之一，它的作用很直接——规范，提高代码质量，降低维护成本，延长项目的生命周期。
TypeScript 是由 Microsoft 开发的开源语言，它是 JavaScript 的一种超集。通俗来讲， TypeScript 包含了 JavaScript 的所有功能，并在此基础上添加了更多的特性。
随着TypeScript的普及，面试被提问到TypeScript的几率越来越大，最常见的问题就是介绍下TypeScript的特点，本篇文章将带大家了解TypeScript的使用，明白TypeScript和JavaScript的区别。
一、基本使用
1. 下载TypeScript
npm install typescript -g
2. 使用TypeScript
我们使用的是编译后的js文件，ts文件无法直接使用。
tsc index.ts // -> index.js
我们可以对比编译前后的文件内容:
需要借助ts-node这个包运行ts文件，否则无法识别运行。
npm install ts-node -g
看看coderunner的效果:
同学们可以通过第一种方式生成js文件，然后在html文件中引入，也可以通过第二种方式直接运行ts文件，查看运行结果。
注：对打包了解的同学，可以通过webpack/rollup等工具简易地搭建一个自动编译的项目，释放双手。
二、TypeScript的特性
1. 强类型语法
JavaScript属于弱类型语言，我们在进行变量操作的时候，可以进行任何类型的赋值。
var num = 1 // typeof num == 'number'
num = '1' // typeof num == 'string'
与JavaScript不同，TypeScript在对变量进行声明时必须声明变量的类型。
var num : number = 1
num为number类型的变量，那后续的操作中，则不能对num进行其他类型数据的赋值
num = '1' // 不能将类型“string”分配给类型“number”
强类型的意义：安全，严谨的代码编写
假如我创建了num变量是用于计数的number类型，那后续的操作中，num变量就不允许被更改为其他类型的数据，防止相关功能因为num变量不是一个数值导致出错的情况。
2.静态类型检查（编译时的错误提示）
TypeScript 提供了静态类型系统，可以在编译时发现类型错误，从而避免运行时的错误。
对熟用JavaScript的同学们来讲，这一点不难理解，JavaScript是一种解释型语言，我们只有在运行时才能发现代码是否有错误，例如：
var num = 1
num.toLowerCase()//a.tolowerCase is not num function
具体的报错，是代码在浏览器运行时才能看到:
有些同学下意识的反应就是：“谁看不出来这是一个数值，肯定没有字符串的方法，没人会写这种报错代码。”
这个想法没错，但是在工作中，也肯定没有人只会写这两行代码，一个变量的定义，从起初的几行代码，经过维护人员的变更，功能的扩展，会让这个变量功能性变得"不稳定“
结合强类型的特性，我们在书写代码时就能看到ts为我们带来的友好提示
var num : number = 1
num.toLowerCase()
//类型“number”上不存在属性“toLowerCase”。ts(2339)
看看实际的提示效果:D
是不是很棒，我们在书写代码的时候，就能避免许多意料之外的隐患，例如你的前任在某个偏僻的角落定义的同名变量（哀）。
3. 自动推导
TypeScript 具备类型的自动推导功能，我们在书写代码时如果没有对目标进行类型定义，则默认使用ts推导出的类型。
var num = 1 // => var num : number = 1
像这段代码，即使我们没有定义变量num的类型，TS也会将初始化赋值的数值类型(number)作为变量num的类型。
在后续对num变量的操作中，TS则将num变量作为一个number类型的数据进行检测。
Typescript根据上下文语境对目标进行自动推导的特性，大幅度地减轻了使用者的工作成本，官方不希望用户在大量且重复的类型定义上浪费时间，而是根据功能结构去进行类型设计。
但有一点需要注意，Typescript的自动推导并不参与用户的复杂逻辑检测，我们可以通过一个函数重载的案例进行简单区分（不清楚的同学可以在本系列文章中学到函数重载再回头复习）：
function fn(num : number ) : number
function fn(num : string ) : string
function fn(num : number | string) : string | number {
if(typeof num == 'string') return 1
return 1
}
const a = fn('1') // a的类型为string
在这个简单的案例上就有一系列重复出现的疑问：
同学："我这里返回值似乎是number类型，a变量的提示却是string？"
我："从代码逻辑上看，你设定了一个重载列表，当函数参数类型为string时，返回值就是string类型，没问题。但这个案例上的代码，a变量实际数据确实是number类型，错的没毛病"。
同学："错的没毛病？Typescript的检测出错了吗？还是我写错了？"
我："Typescript的自动推导并不参与用户的复杂逻辑检测，实际上确实是你逻辑有问题导致这种现象。"
这个问题，我拿去反问一些工作中常写Typescript的同学，也有不少有出现错愕的反应。
简单来说，面对函数重载，Typescript在检测时只会确定你的重载列表的设定，而不会去检查你在函数内部做了什么复杂的逻辑。
根据这三个特性的具体展现，我们可以对Typescript的优点进行总结及划分：
1. 类型安全：静态类型检查的特性让使用者在编写代码时就能检测到类型错误，不用在运行代码后才发现，提高代码的质量。
2. 工具支持：许多代码编辑器类似IDE、VScode、webStome等都支持Typescript，其中包括代码提示，自动补全，类型检查等，大幅度提高使用者的开发效率。
3. 可读性与可维护性：强类型语法的特点，以及我们在上文的静态类型检查中，能明确看到vscode在Typescript语法检查上的有效提示，根据类型的定义以及语法检查的提示，代码更容易阅读和理解，增加代码的可读性和可维护性。
4. 面向对象编程特性：Typescript支持类、接口、和抽象类等面向对象编程的特性，这些特性能让使用者更好地书写功能和管理代码（关于类的学习，同学们可以在本系列文章中继续深入）。
综合上述，我们在面试的过程中，可以先详细讲解Typescript的语言特点，静态检查，自动推导等特性细节，最后再总结它的优点。
总结
在文章中我们先了解TypeScript怎么使用，TypeScript需要通过编译器将ts文件编译成js文件，其中ts的相关语法都会被剔除，不影响js运行。
明白TypeScript和JavaScript的区别，知道TypeScript优势，比如强语言的安全性，书写检测的错误排查等，避免在面试中被问到两者区别又回答不出的尴尬情景。在后续文章中，我们再继续了解typescript的类型有哪些，泛型，接口等如何使用。
*请认真填写需求信息，我们会在24小时内与您取得联系。
