前很多行业都有自己的网站，但是很多人没有意识到网站建成后需要维护，后期维护也很重要，让我们了解要进行哪些维护吧。

一、硬件维护

网站建设成功后，定期维护服务器硬件，有针对性地设置服务器，优化数据库交互操作，根据企业业务现状和发展规划，推荐合理的服务器架构方案。

二、定期备份

不仅有内部因素对网站有安全隐患，还有外部攻击，因此，在紧急情况下，应该养成备份的习惯，现在空间中有一键备份功能。

三、软件维护

网站建设后，软件也要维护，包括系统可能存在的漏洞.网站访问log记录、系统进程、资源利用率、带宽利用率、系统关键部位、定期检查网站容量等环节，做好文档记录。

四、代码维护和SEO优化

代码维护主要包括一些bug修复和一些SEO优化标签，网站会因为Bug页面打不开或者版本不对，影响客户体验效果，所以SEO优化还涉及到产品关键词排名和公司品牌，良好的优化可以帮助我们获得更多的流量。

五、程序维护内容

后台源代码，用于网站设计，JS.静态图片、CSS维护非动态数据、升级备份，及时更新程序漏洞监控和第三方开发平台程序.升级是网站建设后期的程序维护内容。

六、检测网页链接

链接检测主要是为了良好的用户体验，一般来说，可以每周测试一次，看看网站链接访问是否正常，打开速度如何，如有问题，应及时检查解决。

七、数据库维护内容

后期数据库维护的内容主要包括数据库备份、数据库优化、数据库异常数据查询、数据库容量查询等。

SS是层叠样式表（ Cascading Style Sheets ）的缩写，是一种样式表语言，用于描述以 HTML 之类的标记语言编写的文档的布局。它是用于设计Web页面的三剑客之一，另外两位浩客是HTML和Javascript。

CSS 的设计目的是使样式和内容分离，包括布局、颜色和字体。这种分离可以提高内容的可访问性，在样式特征的规范中提供更多的灵活性和控制，通过在一个单独的. .css 文件中指定相关的 CSS，使多个 web 页面能够共享格式，并减少结构内容中的复杂性和重复。

它具有简单的语法，并使用大量的英文关键字来指定各种样式属性的名称。

既然我们已经讨论了CSS的基础知识，让我们来观察一下基于CSS的重要面试问题。

问题1：什么是 CSS？

CSS（层叠样式表）是一种样式语言，对于 HTML 元素来说足够简单。它在网页设计中非常流行，其应用在XHTML中也很常见。

问题2：为什么要开发CSS？

CSS是在1997年开发的，作为一种web开发人员设计他们正在创建的web页面布局的方法。它的目的是让开发者将网站代码的内容和结构从视觉设计中分离出来。

这种结构和设计的分离允许HTML执行比原来更多的功能。

问题3：CSS的主要版本有哪些？

CSS的不同版本：

1. CSS1
2. CSS2
3. CSS2.1
4. CSS3

问题4：CSS样式的组成部分是什么？

一个样式规则由三部分组成：

1. 选择器–选择器是 HTML 标记，用于选择要设置样式的内容。它根据其ID，类和名称选择 HTML元素。
2. 属性–属性是 HTML 标签的一种属性。简而言之，所有 HTML 属性都转换为 CSS 属性。
3. 值– CSS中的值定义CSS属性的一组有效值。

问题 5：有多少种方法可以将 CSS 集成为 web 页面

CSS 可以集成为三种方式

1. 内联：直接在HTML元素上使用

<p style=”colour:skyblue;”>hello world</p>

2. 外部:在工作空间中创建单独的CSS文件，然后在创建的每个web页面中链接它们

• 内部: web 页面的 head 元素在其中实现了内部 CSS。

问题 6：谁在维护 CSS 规范？

万维网协会维护 CSS规范。

问题 7：伪元素是什么意思？

伪元素是添加到选择器的关键字，它允许一种样式，即所选元素的特定部分。CSS用于在HTML标记中应用样式，它允许在不影响实际文档的情况下对文档进行额外标记。它可以用来：

1. 为第一个字母、行或元素设置样式。
2. 插入内容

语法：

Selector: :pseudo-element
{Property1 :value;
Property2 :value;}

问题 8：CSS有什么优势？

CSS的优点是:

1. 一致性 – CSS有助于构建一致的框架，设计人员可以使用该框架来构建其他站点。因此，网页设计师的效率也提高了。
2. 易于使用 – CSS 是非常容易学习和简化网站开发。所有代码都放在一个页面上，这意味着对代码行进行改进或编辑不需要重复修改多个页面.
3. *网站速度 *– 通常，一个网站使用的代码最多可以达到 2 页或更多。但是对于CSS，这不是问题。它只需要2-3行代码，因此，网站数据库保持整洁，消除任何网站加载问题。
4. 设备兼容性 – 由于人们使用不同类型的智能设备访问互联网，因此需要响应式web设计。CSS 在这里的作用是使 web 页面的响应性更好，这样它们就可以在所有设备中以相同的方式显示。
5. 多浏览器支持 – CSS享有多浏览器的支持，它与所有主要的互联网浏览器兼容。
6. 重新定位 – CSS允许您定义页面上 web 元素位置的变化。通过它的实现，开发人员可以将 HTML 元素放置在他们喜欢的位置，以便与页面的美学吸引力或其他考虑因素保持一致。

问题9：CSS 渐变是什么？

渐变是指我们在两幅图像之间创建中间帧，以获得第一幅图像的外观，然后发展成第二幅图像的过程，它主要用于创建动画。

问题10：什么是 CSS 特异性？

CSS 特定性是一个分数或等级，它决定了元素必须使用哪种样式声明。CSS 中有四类可以授权选择器的特异性级别：

1. 内联样式
2. ID
3. 类，属性和伪类
4. 元素和伪元素

问题12：CSS有什么缺点

CSS的缺点有:

1. 版本太多 – 与HTML或Javascript等其他参数相比，CSS有很多版本-CSS1，CSS2，CSS2.1，CSS3。因此，CSS变得非常混乱，尤其是对于初学者。
2. 缺乏安全性 - 由于CSS是基于开放文本的系统，因此它没有内置的安全系统来防止其被覆盖。通过对其读/写操作的访问，任何人都可以更改 CSS 文件并更改链接。
3. Fragmentation - 使用 CSS，可能无法在一个浏览器上使用另一浏览器。因此，在网站上线之前，Web 开发人员必须通过在多个浏览器上运行程序来测试兼容性。
4. 复杂性–使用 Microsoft FrontPage 等第三方软件会使CSS变得复杂。

问题13：什么是 RWD (Responsive Web Design)?

RWD（响应式Web设计）技术用于在每种屏幕尺寸以及移动，平板电脑，台式机和笔记本电脑等设备上完美显示设计页面，让我们无需为每个设备创建不同的页面。

问题14：CSS 精灵有什么好处?

CSS精灵的好处有：

1. 通过将各种小图像组合成一个图像，减少了web页面的加载时间。
2. 减少HTTP请求，从而减少加载时间。

问题 15：什么是 CSS 上下文选择器？

上下文选择器，严格来讲，叫后代组合式选择器，就是一组以空格分隔的标签名。用于选择作为指定祖先元素后代的标签。只要有标签在它的层次结构“上游”存在这么一个祖先，那么就会选中该标签。无论从该标签到作为祖先的上下文之间隔着多少层次都没有关系。

问题 16：什么是渐进增强和平稳退化?

渐进增强的概念是指从最基本的可用性出发，在保证站点页面在低级浏览器中 的可用性和可访问性的基础上，逐步增加功能及提高用户体验。本质上讲，我们日常的一些开发习惯，例如首先使用标记语言编写页面，然后通过样式表来控制页面 样式等，都属于渐进增强的概念；其他更为明显的行为包括使用HTML5、CSS3等新技术，针对高级浏览器为页面提高用户体验的丰富程度。

平稳退化的概念是指首先使用最新的技术面向高级浏览器构建最强的功能及用户体验，然后针对低级浏览器的限制，逐步衰减那些无法被支持的功能及体验；在我们日常的开 发中，一个典型的平稳退化的例子就是首先针对Chrome编写页面代码，然后修复IE中的异常或针对IE去除那些无法被实现的功能特色.

所以， 这两个概念方法其实早已并存在我们的日常开发工作中了，只是“渐进增强”与“平稳退化”这样的措辞是近些年才开始被普及。在我们眼下的HTML5与 CSS3实战用，这两个概念就尤其重要了，怎样保证使用不断变化的新技术来构建在主流浏览器下都具有基本可用性的站点，并针对高级浏览器进行体验提升，这 些是我们在开发过程中需要明确的思路。

问题 17：我们如何在网页上添加图标？

我们可以使用诸如font-awesome或者阿里的 iconfont 之类的图标库将图标添加到HTML网页。我们必须将给定图标类的名称添加到任何内联HTML元素中。（<i>或<span>）。图标库中的图标是可缩放的矢量，可以使用CSS进行自定义。

问题 18：哪个属性指定边框的宽度？

border-width指定边框的宽度。

问题 19：如何区分物理标签和逻辑标签?

物理标签被称为表示标记，而逻辑标签对于外观是无用的。物理标签是较新的版本，而逻辑标签是旧的并且专注于内容。

如题，我们的标签元素写上后，浏览器就会渲染出结果，但不仅仅是这么简单

//物理元素
<b>我想用b标签加粗</b>

//逻辑元素
<strong>我想用strong标签加粗</strong>

//两段文字都加粗了，而且视觉效果完全一样

确实，文字加粗了，两者都达到了我们想要的目的，但是我们忽略了一个问题，既然b标签可以加粗，那么strong这个标签同样是加粗，存在的 意义又是什么呢？既然W3C定义了两个，它们之间的不同点是什么呢？它们之间的相同点又是什么呢？

物理元素

物理元素，又叫实体标签，它所做的是一种物理行为，比如上面我把一段文字用b标签加粗了，它所传达的给浏览器，告诉浏览器 我要加粗这段文字，从单词Bold中也可以看出来，英文中仅仅是加粗的意思，并没有其他作用。总结来说就是一句话：物理元素就是告诉浏览器该怎么显示出来。

逻辑元素

逻辑元素，从英文字面上Strong就可以看出它是强调的意思，所以我们用这个逻辑元素(如上strong)来向浏览器传达 一个强调某段文字重要性的消息，说明此文字较为重要，也有利于搜索引擎收录。

Web标准主张XHTML不涉及具体的表现形式，“强调”可以用加粗来强调，也可以用别的方式强调，也可以通过css来改变strong的具体表现 ，还有就是并不是有了strong逻辑标签，就不用b标签来表示字体加粗了，b标签和strong标签默认情况下强调的效果一致，strong完全可以定义成别的样式，用来强调 效果，但是最好符合W3C标准，它更提倡内容与样式分离，所以单纯为了达到加粗而使用b标签不建议这样做， 从XHTML文档有意义性及用户体验角度来说，strong逻辑标签更加合适，而SEO方面，则针对优化情况而定。

问题 20：如何在CSS中定义一个伪类?它们是用来干什么的

CSS伪类是用来添加一些选择器的特殊效果。伪类的语法

selector:pseudo-class{property:value;}

问题 21：CSS和SCSS有什么区别？

CSS 和 SCSS 之间的区别如下：

1. CSS是一种用于设计web页面的样式语言，而SCSS用于为浏览器组合CSS样式表。
2. SCSS 提供了一些变量，可以使用这些变量来缩短代码，这是与 CSS 相比的一大优势。

问题 22：嵌入式样式表的优缺点是什么？

嵌入式样式表的优点:

1. 可以在一个文档中创建多种标签类型。
2. 在复杂情况下，可以使用选择器和分组方法来应用样式。
3. 无需额外下载。

嵌入式样式表的缺点：

无法控制多个文档。

问题 23：列出使用的各种媒体类型。

不同的介质不区分大小写，因此它们具有不同的属性。他们是：

1. aural - 用于语音和音频合成器
2. print - 用于打印机
3. projection - 用于方案展示，比如幻灯片
4. handheld - 用于小的手持的设备
5. screen - 用于电脑显示器

问题 24：font 的属性有哪些？

1. Font-style
2. Font-variant
3. Font-weight
4. Font-size/line-weight
5. Font-family

问题 25：“规则集”是什么意思？

该指令告诉浏览器如何在HTML页面上渲染特定元素。它由一个选择器和一个遵循规则集的声明块组成。选择器可以附加到其他选择器，以通过规则集进行标识。

问题 26：什么是 CSS 框架？

CSS 框架是一个库，它允许使用CSS语言进行更轻松，更符合标准的Web设计。这些框架中的大多数至少包含一个网格以及更多功能和其他基于Javascript的功能。一些著名的CSS框架有：ACSS，Bulma，YAML，Foundation等。

原文：https://codersera.com/blog/top-css-interview-questions-and-answers/

者 | Loraine Lawson

译者 | 张卫滨

策划 | Tina

本文最初发表于The New Stack网站，由 InfoQ 中文站翻译分享。

在 2024 年，前端领域会有怎样的发展呢？因为没有人能够预见未来，所以 The New Stack 与来自 Angular、Next.js、React 和 Solid 的创建者和维护者讨论了他们 2024 年的计划。以下是前端开发者对未来一年的展望。

Angular：可选的 Zone.js

来自谷歌的 Angular DevRel 技术主管和经理Minko Gechev说，在过去的一年里，Angular 的两大成就是引入了基于Signals的细粒度反应性和可延迟视图。他告诉 The NewStack，新的一年将会在此基础上进一步关注细粒度的反应性，并使 Zone.js 成为可选的。

在 Angular 中，Zone 是一个执行上下文，它能够跨异步任务持续存在。在这个GitHub仓库中详细介绍了Zone，它有五个职责，包括拦截异步任务调度和包装回调以便于进行错误处理，以及跨异步操作的 zone 跟踪。Zone.js 可以创建跨异步操作而持久化存在的上下文，也可以为异步操作提供生命周期钩子。

Gechev 说，“我们正在探索为现有的项目实现可选的 Zone.js，开发人员可以通过重构现有的应用程序来利用这一特性”。“借助可选的 Zone.js，我们期待加载时间能够得以改善，并实现更快的初始渲染。对细粒度反应式的处理将提升到一个新的层次，使我们能够仅探测组件模板的部分变更。”

他说，这些特性将会带来更快的运行时。

在关于性能的另一个方面，Angular 正在考虑是否默认启用混合渲染。他补充说，选择避免混合渲染是可能实现的，因为这会增加托管需求和成本。

Gechev 说，“我们看到了 SSG（静态站点生成，static site generation）和 SSR（服务器端渲染，server-side rendering）的很多价值，而且在 v17 中奠定了坚实的基础，我们正在进行最后的润色工作，以便从一开始就实现这种体验。”

他补充到，另一个优先事项是完成Signals请求的评论(Request for Comment)。

开发人员还可以看到 Angular 文档的改进。根据对开发人员的调查，他们希望能有一个升级的学习体验，其中包括让 Angular.dev 成为该框架新的托管地。他补充说，开发人员还优先考虑了初始加载时间（混合渲染、部分填充和可选的 Zone.js 应该可以部分解决该问题）和组件编写，Angular 计划会进一步简化组件的编写。

Gechev 说，“我们致力于迭代式地交付特性，并随着时间的推移逐步增强它们”。“开发人员将能够从 2024 年的所有改进中受益，并在接下来的几年里获得更好的开发体验和性能。”

Next.js：新的编译器

Next.js 在 2023 年引入了一个新的应用服务器，旨在支持 React 服务器组件（React Server Component，RSC）和Server Action。Vercel（该框架的监管者）的产品负责人 Lee Robinson 说，该框架会继续支持旧的服务器，并且其路由系统可以在两者实现互操作性。这种互操作性意味着可以继续花时间添加新的特性。

Robinson 说，“有些客户已经使用 Next.js 进行开发有五六年之久了，他们也会需要花费几年的时间来采用这些新特性。在这个过程中，我们希望他们的工作能够尽可能地顺畅。”

在新的一年中，Next.js 希望要解决很多问题，其中一个优先事项就是简化缓存。他说，从开发人员的体验来看，这可能会使其更加容易。

Robinson 说到，“通常情况下，生态系统中的许多开发人员必须引入一堆额外的包，或者学习如何使用其他的工具来进行数据抓取、缓存和重现校验”。“现在，Next.js 已经构建了很多这样的特性，而且非常强大，但是这也意味着需要学习更多的东西，我们得到的初步反馈是，‘这非常棒，也很强大，但是我们希望它能更简单一些’”。

Next.js 团队还将继续关注性能的改进，他将其称之为“我们的持续投资”。

他补充到，在新的一年里，这很可能会以新编译器的形式出现，它将加快在开发人员的机器上启动 Next.js 的速度。该编译器相关的工作已经进行了大约一年的时间，Vercel 一直在其内部产品和应用中使用它。他说，这个使用 Rust 编写的编译器即便在没有使用的缓存的情况下也比之前启用缓存的编译器更快。

Robinson 说，“距离推出这个功能已经近在咫尺了，甚至到了每个人都可以默认启用它的程度，而且它比现有基于 Webpack 的编译方案更快”。“开发人员总是希望他们的工具能够更快。他们对工具运行速度的追求永无止境。因此，很有意思的一件事是，工具的制造商，而不是工具的使用者在开始转向像 Rust 这样的底层工具，从而帮他们实现性能方面的最终胜利。”

他们的第三个目标是为未来十年的 Next.js 奠定基础。

他说，“我们对这个新的路由系统感到非常兴奋。我们相信这是未来的基础。但是，这也需要时间。人们会尝试使用，从而有特性方面的需求，并且希望能够看到实际的改变。我们将其视为未来五年至十年的长期投资。”

他补充说，一个“某天”可能会实现的目标是在 Next.js 中找到更好方式来处理内容，不过这应该不会新的一年中实现。

他补充说，“现在，它依然能够正常运行，你依然可以连接到任何你想要的内容源，但是会有一些潜在的方式能够简化开发人员的体验”。“这更像是一件锦上添花的事情，而不是必须要做的事情，这就是为什么我认为在 2024 年我们不会实现它，但我希望未来会为其做一些相关的工作。”

React：2024 预览

Meta 的 React 工程主管 Eli White 说，React 团队希望在新的一年里会有更多的框架采用 React 服务器组件（RSC，React Server Component）。

White 说，“对大多数人来讲，他们认为 RSC 是 React 领域的重要变化，从一个单纯的 UI 层，变成对如何架构应用程序的方式都能产生更大的影响，以获得最佳的用户和开发人员体验，特别是对于单页应用程序（SPA，single page application）方式表现不够好的应用程序。”

虽然他没有明确说明 2024 年的新动向，但是 White 表示他们将发布和分享 2023 年相关事项的更多进展。比如，在 React Advanced 会议上，团队向与会者展示了 React Forget，这是 React 的自动记忆编译器。White 说，有了React Forget之后，将意味着开发者不再需要使用useMemo和useCallback。

White 补充说，“在 React Native EU 会议上，我们分享了从 0.73 版本开始将 web 开发人员熟悉的 Chrome 开发工具引入 React Native。我们还初步展示了对 Static Hermes 的研究成果，这是针对 JavaScript 的原生编译器，它不仅有可能加快 React Native 应用程序的速度，而且会从根本上改变 JavaScript 的用途。”

Solid：专注于基本元素（Primitive）

Solid 创始人 Ryan Carniato 表示，在 2024 年，Solid 开发人员可以期待即将推出的SolidStart 1.0和 Solid.js 2.0。SolidStart 是一个元框架，这意味着它建立在框架 Solid.js 之上。他说，这类似于Svelte的SvelteKit。

SolidStart的文档是这样描述的：

“Web 应用程序通常包含很多组件，比如数据库、服务器、前端、打包器、数据抓取/变更、缓存和基础设施。编排这些组件很具挑战性，并且通常需要跨应用程序技术栈共享大量的状态和冗余逻辑。这就是 SolidStart 的用武之地，它是一个元框架，提供了一个将所有这些组件组合在一起的平台。”

由于 SolidStart 仍处于 beta 阶段，Carniato 有机会利用生态系统中已有的东西将其变得更好。

Carniato 说，“其中很重要的一点是，我们现在不再需要编写自己的部署适配器，而是可以使用 Nitro，它也支撑了 Nuxt 框架，这使得我们可以将其部署到所有的不同平台上。”

另外一个样例是任何 Solid 路由器都能在 SolidStart 中运行。

他说，“这意味着对路由器的底层部分进行了大量更新，这样它们才能一起运行，但最终结果令我非常高兴，因为我们小团队的志愿者需要维护的代码量要少得多，这给了开发人员很大的灵活性。”“他们不必被迫采用单一的解决方案，这对我来说非常重要，因为每个人都有自己的需求。正如我所言，如果你构建了正确的组件并且能够弄清楚构建基块（building block），那么人们可以做更多的事情。”

他说，最终的结果是由“可互换”的组件所组成的元框架，而不是具有很强的倾向性。Solid 团队一直在思考，在由越来越多的元框架决定开发人员能够使用什么的世界中，正确的基本元素所带来的影响。

他说，“对我来讲，最重要的一直是基本元素形成的构建基块，这是一个非常工程化的关注点，我认为这也是它与众不同的原因之一。”“我一直喜欢给别人选择的权力，并且我认为如果有正确的基本元素，正确的构建基块，就可以构建出正确的解决方案。”

他表示，Solid 2.0 应该会在 2024 年中后期发布。现在，他们正在实现如何处理异步系统的原型。

Carniato 说，“Solid 2.0 也将是一个非常重要的版本，因为我们正在重新审视反应式系统，并思考如何解决异步信号或异步系统的问题。”

他补充说，Solid 试图在控制和性能之间取得平衡。

他说，“在我们的社区里，有很多非常热情的人，非常有技术头脑的人，他们关注性能，关心控制。”“我们确实吸引了很多人，他们真的想控制自己建造的每一个组成部分。”

原文链接：https://www.infoq.cn/article/7ciYZE56w7KENEGOjfQY