HTML面试题

简述 HTML 渲染过程？

1.解析HTML生成DOM树

2.解析CSS生成CSSOM规则树

3.将DOM树和CSSOM规则树合并在一起生成渲染树

4.遍历渲染树开始布局，计算每个节点的位置大小信息

5.将渲染树的每个节点绘制到屏幕

常见的浏览器引擎有哪些？

Blink：Blink 是由 Google 开发的开源浏览器引擎，它是基于 WebKit 引擎的一个分支。目前，许多主流浏览器都采用了 Blink 引擎，包括 Google Chrome、Microsoft Edge、Opera 等。

WebKit：WebKit 是苹果公司开发的开源浏览器引擎，它最初是为 Safari 浏览器开发的。除了 Safari，一些其他浏览器如老版本的 Google Chrome、Opera 等也使用了 WebKit 引擎。

Gecko：Gecko 是 Mozilla 基金会开发的开源浏览器引擎，它用于 Mozilla Firefox 浏览器。Gecko 引擎注重可扩展性和遵循 Web 标准。

Trident：Trident 是由 Microsoft 开发的浏览器引擎，主要用于 Internet Explorer 浏览器。然而，自 Microsoft Edge 浏览器采用 Chromium 引擎后，Trident 引擎已经逐渐退出使用。

简答：

Blink（Google）、WebKit（苹果）、Gecko（Mozilla 基金会）、Trident（Microsoft）

什么是HTML语义化？

HTML语义化是指在编写HTML代码时，使用适当语义的标签来描述页面结构和内容，以更好地表达文档的含义和结构，提高可读性、可维护性、可访问性和搜索引擎优化，并常用的语义化标签包括<h1>-<h6>、<p>、<nav>、<article>、<section>、<header>、<footer>和<aside>等。

什么是HTML5，HTML5有哪些新特性？

HTML5是HTML的第五个主要版本，引入了许多新特性和功能，包括语义化标签、多媒体支持、Canvas绘图、表单增强、本地存储、Web Workers、地理定位和WebSocket等，提供了更强大、更丰富的Web开发体验。

什么是ARIA？

ARIA（Accessible Rich Internet Applications）是一组用于增强 Web 应用程序可访问性的技术规范。ARIA 提供了一套标准的属性和角色，用于描述和标识 Web 内容中的交互元素、状态和行为，以便辅助技术（如屏幕阅读器）能够更好地理解和解释这些元素，从而提供更好的用户体验给有视觉或其他障碍的用户。

ARIA 的主要目标是弥补原生 HTML 元素在语义和交互方面的不足，使得开发者能够更准确地定义和传达 Web 应用的交互行为。通过在 HTML 元素上添加 ARIA 属性和角色，开发者可以提供关于元素的更多信息，如元素的角色（role）、状态（state）和属性（property），从而增强辅助技术对这些元素的解释和交互支持。

ARIA 的一些常用属性和角色包括：

• role：定义元素的角色，如按钮、菜单、对话框等。
• aria-label：为元素提供一个可读的文本标签，用于描述元素的用途或内容。
• aria-labelledby：通过引用其他元素的 ID，为元素提供一个可读的文本标签。
• aria-describedby：通过引用其他元素的 ID，为元素提供描述性文本，用于解释元素的用途或功能。
• aria-hidden：指示元素是否对辅助技术隐藏。
• aria-disabled：指示元素是否禁用或不可交互。

通过正确使用 ARIA 属性和角色，开发者可以改善 Web 应用的可访问性，使得有障碍的用户能够更好地理解和使用应用的交互元素，提供更无障碍的用户体验。

简答：

ARIA是一组用于增强Web应用程序可访问性的技术规范，通过提供标准的属性和角色描述和标识Web内容中的交互元素、状态和行为，以提供更好的用户体验给有视觉或其他障碍的用户。

哪些标签会阻塞浏览器渲染？

以下是一些常见的 HTML 标签，它们可能会阻塞浏览器的渲染：

1. <script>：当浏览器遇到<script>标签时，会停止渲染，直到脚本加载和执行完成。如果脚本位于页面的头部，并且脚本文件较大或加载时间较长，那么页面的渲染会被延迟。
2. <style>：如果<style>标签位于页面的头部，其中包含大量的 CSS 代码，浏览器会等待 CSS 文件加载和解析完成后才能继续渲染页面。
3. <link>：当浏览器遇到外部 CSS 文件的<link>标签时，会发起 CSS 文件的下载请求，并等待文件下载和解析完成后才能继续渲染页面。如果 CSS 文件较大或加载时间较长，页面的渲染会被延迟。
4. <img>：当浏览器遇到<img>标签时，会发起图片的下载请求，并等待图片下载完成后才能继续渲染页面。如果图片较大或加载时间较长，页面的渲染会被延迟。
5. <iframe>：当浏览器遇到<iframe>标签时，会停止渲染，并发起嵌入页面的请求。直到嵌入页面加载完成后，浏览器才能继续渲染主页面。

需要注意的是，浏览器的行为可能会因具体的实现和配置而有所不同。另外，现代浏览器通常会采用异步加载和并行下载的方式来尽量减少阻塞渲染的影响，但仍然需要注意标签的位置和加载时间，以避免不必要的渲染延迟。

简答：

<script>、<style>、<link>、<img>、<iframe>。

如何设置手机浏览器采用真实可视窗口宽度来加载网页？

要设置手机浏览器采用真实可视窗口宽度来加载网页，可以使用以下方法：

1.设置视口（Viewport）元标签：在 HTML 文档的头部添加以下代码，可以指定视口的宽度与设备的可视窗口宽度一致。

<meta name="viewport" content="width=device-width, initial-scale=1">

这将告诉浏览器将视口宽度设置为设备的可视窗口宽度，并且初始缩放级别为1。这样，网页将根据设备的屏幕宽度进行适应和布局。

2.使用 CSS 媒体查询：通过使用 CSS 媒体查询，可以根据不同的设备宽度应用不同的样式和布局，以实现响应式设计。例如，可以使用以下代码来设置在特定屏幕宽度下的样式：

@media (max-width: 600px) {
  /* 在宽度小于等于 600px 的设备上应用以下样式 *//* 添加你的样式代码 */
}

这样，当设备的宽度小于等于 600px 时，将应用媒体查询中定义的样式。

通过以上方法，可以确保网页在手机浏览器中根据设备的可视窗口宽度进行适应和布局，提供更好的移动端用户体验。

为什么要设置 alt 属性？

设置 alt 属性是为了提供替代文本（alternative text），它是在图片无法显示或无法加载时展示给用户的文本描述。以下是设置 alt 属性的几个重要原因：

1. 辅助可访问性（Accessibility）：对于使用屏幕阅读器等辅助技术的用户来说，无法看到图片内容。通过设置 alt 属性，这些用户可以通过阅读替代文本来了解图像的内容和意义，从而更好地理解页面的上下文。
2. 图像无法加载：在某些情况下，由于网络连接问题或资源丢失，图像可能无法加载。此时，设置 alt 属性可以提供一段文字描述，让用户知道图像的内容，以及图像未能显示的原因。
3. 搜索引擎优化（SEO）：搜索引擎无法直接理解和分析图像内容，但它们可以读取和索引 alt 属性。通过为图像设置相关和描述性的 alt 文本，可以增加图像在搜索引擎结果中的曝光度，并为相关的关键词提供更多的上下文和关联性。
4. 用户体验：对于那些选择禁用图像加载的用户（如节省流量或隐私原因），设置 alt 属性可以提供有关图像内容的信息，使得页面在没有图像的情况下依然具有意义和可读性。

在设置 alt 属性时，应尽量准确和简洁地描述图像的内容，避免过长或过于复杂的描述。最好的做法是根据图像的实际含义和目的，提供一个准确而有意义的替代文本。

简答：

设置 alt 属性是为了提供替代文本，以便在图片无法显示或加载时向用户展示。它的重要原因包括辅助可访问性、处理图像无法加载的情况、搜索引擎优化和提升用户体验。在设置 alt 属性时，应尽量准确、简洁地描述图像内容，并根据图像的实际含义和目的提供有意义的替代文本。

alt 属性应该填写什么内容？

alt 属性用于提供图像的替代文本，当图像无法显示或无法加载时，该文本将展示给用户。在填写alt属性时，应考虑以下几点：

• 描述图像内容：提供简洁、准确的描述，包括图像中的主要元素、主题或关键信息。
• 提供关键细节：如果图像包含重要的细节或文本信息，确保在alt属性中包含这些信息，以便用户理解图像的含义。
• 避免冗长描述：保持alt属性简洁，避免过长或复杂的描述。
• 考虑上下文：根据图像在页面上的作用和上下文，提供与图像相关的描述。
• 空值alt属性：对于装饰性图像或纯粹为了样式而存在的图像，可以将alt属性设置为空值（alt=""）。

总之，alt 属性的目标是以简明扼要的方式描述图像内容，以便于辅助技术和用户在无法看到图像时理解图像的含义和作用。

如何设置图片的说明文字？

要设置图片的说明文字，你可以使用alt属性来提供图像的替代文本。alt属性是<img>标签的一个属性，用于描述图像内容。在alt属性中，你可以提供简洁、准确和有意义的描述，以便用户在无法看到图像时理解图像的内容和意义。

以下是设置图片说明文字的示例代码：

<img src="image.jpg" alt="这是一张描述图像的文字">

在示例中，alt属性的值是一个描述图像的文本。你可以根据图像的内容和上下文，提供相关和描述性的文字来准确地描述图像。这样，当图像无法显示或加载时，浏览器会显示alt属性中的文字，使用户能够理解图像的内容。

html 图像 和 CSS 图像有什么区别？

HTML图像 和 CSS图像 是两种不同的概念。

HTML图像指的是在HTML文档中使用<img>标签来插入的图像。<img>标签用于在网页中嵌入图像文件，通过指定src属性来引用图像文件的路径。HTML图像通常是外部文件，可以是常见的图片格式（如JPEG、PNG、GIF等），并在网页中以图像的形式呈现。

例如，下面是使用HTML插入图像的示例代码：

<img src="image.jpg" alt="这是一张图像">

CSS图像是指在CSS样式表中使用的图像。CSS可以通过多种方式使用图像，例如作为背景图像、列表样式、边框样式、形状剪裁等。CSS图像可以是外部文件，也可以是以数据URI形式内嵌在CSS样式表中。

例如，下面是使用CSS设置背景图像的示例代码：

div {
  background-image: url('image.jpg');
}

总结来说，HTML图像是通过<img>标签在HTML文档中插入的外部图像文件，而CSS图像是在CSS样式表中使用的图像，可以用于各种样式效果的实现。

什么是 SVG？

SVG是可缩放矢量图形（Scalable Vector Graphics）的缩写，是一种基于XML语法的图像格式。与位图不同，SVG使用数学公式和几何属性来描述图形的形状、颜色和样式。它具有以下特点：

• 可缩放性：SVG图像可以无损地缩放和放大，适应各种显示设备，从小型图标到大型印刷品。
• 文本可编辑性：由于使用XML语法，SVG图像中的文本内容可以直接编辑和修改，适用于需要动态生成和修改文本的应用场景。
• 小文件大小：相比位图，SVG图像文件通常较小，因为只需存储描述图形的几何信息和样式属性，而不是像素信息。
• 可编辑性：SVG图像可以使用文本编辑器进行编辑和修改，开发人员和设计师可以直接通过修改SVG代码来调整图像的形状、颜色和样式。

由于这些特性，SVG在Web开发、数据可视化、图标设计等领域得到广泛应用，成为一种常用的图像格式

如何创建响应式图片？

要创建响应式图片，可以使用CSS和HTML的一些技术和技巧。下面是一种常用的方法：

1.使用CSS的max-width属性：在CSS中为图像添加一个样式规则，并将max-width属性设置为100%。这将使图像在其容器内自动调整大小，并在容器宽度变化时进行响应。

img {
  max-width: 100%;
  height: auto;
}

2.使用srcset属性和多个图像源：srcset属性允许您为不同的屏幕尺寸提供不同的图像源。您可以提供多个图像源，并使用不同的分辨率或像素密度来适应不同的屏幕。浏览器将根据设备的特性选择合适的图像源进行加载。

<img src="small.jpg" srcset="medium.jpg 800w, large.jpg 1200w" alt="响应式图像">

在上面的示例中，srcset属性包含了三个不同的图像源。浏览器将根据屏幕宽度和设备像素密度选择合适的图像进行加载。

3.使用picture元素和source元素：picture元素和source元素的组合可以为不同的屏幕和条件提供不同的图像源。您可以根据需要为各种屏幕尺寸、像素密度、媒体查询等提供不同的图像。

<picture><source srcset="small.jpg" media="(max-width: 600px)"><source srcset="medium.jpg" media="(max-width: 1200px)"><img src="large.jpg" alt="响应式图像">
</picture>

在上面的示例中，根据屏幕宽度，picture元素将选择合适的source元素并加载相应的图像。

这些是创建响应式图片的一些常见方法。您可以根据具体需求选择适合您项目的方法，并根据不同的屏幕尺寸和条件提供不同的图像源。

为什么不能用 js 来实现响应式图片？

实际上，JavaScript也可以用于实现响应式图片，但是它通常不是最佳的选择。使用JavaScript来实现响应式图片可能会带来一些问题和挑战，相比使用CSS和HTML提供的原生响应式图像技术，它可能更复杂、更耗费资源，并且可能存在性能方面的问题。

以下是一些原因：

1. 额外的复杂性：使用JavaScript来实现响应式图片需要编写更多的代码来处理图像的适应性和加载。这增加了开发和维护的复杂性。
2. 性能问题：使用JavaScript来处理响应式图片可能会导致性能问题。JavaScript需要在页面加载后执行，而在执行之前，图像可能已经开始加载。这可能导致图像加载延迟和闪烁。
3. 兼容性问题：使用JavaScript来实现响应式图片可能会遇到兼容性问题。不同浏览器和设备对JavaScript的支持和执行速度不同，可能导致不一致的体验。
4. 依赖于JavaScript：使用JavaScript来处理响应式图片意味着页面必须依赖于JavaScript的支持。如果用户禁用了JavaScript或浏览器不支持JavaScript，图像的适应性可能无法正常工作。

相比之下，使用CSS和HTML提供的原生响应式图像技术可以更好地解决这些问题，并提供更简单、更可靠的解决方案。这些原生技术已经广泛支持，并且在性能和兼容性方面经过了优化。因此，通常建议使用CSS和HTML来实现响应式图片。

有哪些标签可以嵌入外部内容？

<img>：用于嵌入图像文件。

<audio>：用于嵌入音频文件。

<video>：用于嵌入视频文件。

<iframe>：用于嵌入其他网页或文档。

<embed>：用于嵌入外部插件或媒体，如Flash。

<object>：用于嵌入外部插件或多媒体资源。

常用的表格标签有什么？

在HTML中，有几个常用的标签用于创建和组织表格数据。以下是一些常见的表格标签：

1. <table>：定义一个表格。它是所有表格标签的容器。
2. <thead>：定义表格的表头部分。通常包含表格的标题行。
3. <tbody>：定义表格的主体部分。通常包含表格的数据行。
4. <tfoot>：定义表格的表尾部分。通常包含表格的汇总行或其他附加信息。
5. <tr>：定义表格的行。它是表格中的水平行元素。
6. <th>：定义表格的表头单元格。通常用于标题行。
7. <td>：定义表格的数据单元格。通常用于数据行。

这些标签可以结合使用，以创建具有标题、数据和其他样式的表格。例如，下面是一个简单的表格结构的示例：

<table><thead><tr><th>姓名</th><th>年龄</th></tr></thead><tbody><tr><td>张三</td><td>25</td></tr><tr><td>李四</td><td>30</td></tr></tbody>
</table>

上述示例中，<table>是整个表格的容器，<thead>定义了表格的表头部分，<tbody>定义了表格的主体部分。在<thead>和<tbody>中，使用<tr>定义表格的行，使用<th>定义表格的表头单元格，使用<td>定义表格的数据单元格。

如何让表格实现跨行或者跨列显示？

使用 rowspan 属性实现跨行，使用 colspan 属性实现跨列。

什么是渐进增强，什么是优雅降级？

渐进增强 和 优雅降级 是两种Web开发中常用的策略，用于处理不同浏览器和设备的兼容性问题。

渐进增强是一种设计和开发的方法，它从基本的、核心的功能和内容开始构建网站或应用程序，然后逐步添加更高级的功能和增强效果。这种方法的目标是确保基本功能在所有浏览器和设备上都能正常运行，而高级功能则根据浏览器的能力和支持程度进行逐步增强。渐进增强强调的是以可访问性和可用性为核心，确保网站或应用程序在各种环境和设备上都能提供基本的功能和体验。

优雅降级是一种相反的方法，它首先构建具有所有功能和增强效果的完整版本，然后通过检测浏览器和设备的能力来逐渐降级，以适应不支持某些功能的环境。这种方法的目标是确保在旧版本的浏览器或设备上仍然能够提供基本的功能和可用性，即使某些高级功能无法正常工作。优雅降级强调的是向后兼容性和容错性，确保网站或应用程序在不同浏览器和设备上都能提供一致的核心功能。

总的来说，渐进增强注重从基础功能开始逐步增强，而优雅降级注重从高级功能开始逐步降级，以适应各种环境和设备的兼容性要求。

页面导入样式时，使用 link 和 @import 的区别？

在页面导入样式时，常见的方法有两种：使用link标签和使用@import规则。它们之间的区别如下：

• 加载时机：link标签在页面加载时同时加载样式表，而@import规则是在页面加载完毕后再加载样式表。因此，使用link标签可以更快地加载和渲染页面，而@import规则可能会导致页面显示延迟。
• 兼容性：link标签是HTML标准的一部分，几乎所有浏览器都支持。而@import规则是CSS2.1引入的一种方式，较旧的浏览器可能不支持或支持有限。因此，为了兼容性，通常建议使用link标签。
• 加载顺序：link标签可以通过rel属性的值来指定样式表的加载顺序，而@import规则会按照它们在样式表中的出现顺序进行加载。使用link标签可以更精确地控制样式表的加载顺序。
• 媒体类型：link标签可以使用media属性来指定样式表适用的媒体类型，而@import规则不支持媒体类型，只能应用于所有媒体类型。

综上所述，使用 link 标签比 @import 规则更常见和推荐，因为它具有更好的兼容性、加载性能和灵活性。只有在特定情况下，如需要动态加载样式表或在嵌套样式表中使用时，才会考虑使用@import规则。

DOCTYPE 标签有什么用？

DOCTYPE标签用于指定HTML文档的版本和文档类型。它的作用包括：

• 告知浏览器文档类型：DOCTYPE标签告知浏览器处理HTML文档时要使用的规范和解析方式，以确保兼容性和一致性。
• 验证文档的正确性：DOCTYPE标签可用于验证HTML文档的正确性，浏览器会根据指定的DOCTYPE进行验证。
• 触发标准模式：DOCTYPE标签可以触发浏览器的标准模式，以提供一致和可靠的页面渲染效果。

行内元素有哪些？块级元素有哪些？空元素有哪些？

行内元素是指在文档流中水平排列的元素，不会独占一行。常见的行内元素包括

<span>、<a>、<strong>、<em>、<img>、<input>、<button>、<label>等。

块级元素是指每个元素独占一行，会在文档流中自上而下垂直排列。常见的块级元素包括

<div>、<p>、<h1>-<h6>、<ul>、<ol>、<li>、<table>等。

空元素是指没有内容的元素，在HTML中没有闭合标签。常见的空元素包括

<br>、<hr>、<img>、<input>、<meta>、<link>等。

需要注意的是，HTML5中的空元素可以省略结束标签，例如<br>可以写成<br/>或<br>。

常见 meta 元素有哪些？

常见的 <meta> 元素用于在 HTML 文档中提供元数据（metadata），它们可以用于指定文档的字符编码、视口设置、关键词、描述等信息。以下是一些常见的 <meta> 元素：

1. 字符编码（Character Encoding）：

<meta charset="UTF-8">

该元素指定了文档中使用的字符编码，通常使用 UTF-8。

1. 视口设置（Viewport）：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

该元素用于在移动设备上设置网页的视口，确保页面在不同设备上显示正常。

1. 关键词（Keywords）：

<meta name="keywords" content="关键词1, 关键词2, 关键词3">

该元素用于指定页面的关键词，有助于搜索引擎了解页面的主题。

1. 描述（Description）：

<meta name="description" content="页面的描述">

该元素用于提供页面的简短描述，通常在搜索结果中显示。

1. 作者（Author）：

<meta name="author" content="作者名">

该元素用于指定页面的作者。

1. 重定向（Redirect）：

<meta http-equiv="refresh" content="5;url=https://example.com">

该元素用于设置页面的自动重定向，将用户重定向到指定的 URL。

这只是一些常见的 <meta> 元素示例，实际上还有其他可以用于指定文档元数据的 <meta> 元素。每个元素都有不同的属性和用途，可以根据需要选择使用。

HTML 中 src 和 href 有什么不同？

src 用于指定嵌入的外部资源（如图像、脚本、音频等）的路径，主要用于元素如<img>、<script>、<audio>等。示例：<img src="image.jpg">

<img src="image.jpg">
<script src="script.js"></script>
<audio src="audio.mp3"></audio>

href 用于指定超链接的目标资源的路径，主要用于链接元素如<a>、<link>等。示例：<a href="https://example.com">Visit Example</a>

<a href="https://example.com">Visit Example</a>
<link rel="stylesheet" href="styles.css">

label 标签的作用？

<label>标签用于定义HTML表单中的标签，通常与表单控件相关联。它的作用包括：

• 表单标签关联：通过与表单控件相关联，提供更好的用户体验和可访问性。通过将<label>标签的for属性与关联表单控件的id属性匹配，用户可以通过点击标签来触发关联控件的操作。
• 可点击区域扩展：将文本和表单控件包裹在<label>标签内，增加用户点击的可用区域。这对于小型控件或手持设备上的触摸操作尤其有用。
• 辅助技术支持：与屏幕阅读器等辅助技术一起使用时，提供更好的可访问性。屏幕阅读器可以读取与<label>关联的表单控件的标签，帮助用户理解表单的用途和功能。

示例：

<label for="username">Username:</label>
<input type="text" id="username" name="username">

总之，<label>标签用于与表单控件关联，提供了更好的用户体验、可点击区域的扩展和辅助技术支持。使用<label>标签可以改善表单的可访问性和易用性。

meta 标签中 viewport 有什么用？

<meta>标签中的 viewport 属性对于移动设备上的网页设计和适配非常重要。它的作用包括：

• 控制可视区域的大小：通过设置宽度和高度，确保网页在不同设备上以正确的比例显示，避免水平滚动条或缩放问题。
• 响应式布局：结合CSS媒体查询，根据设备屏幕大小自动调整网页布局，适应不同的屏幕尺寸。
• 缩放控制：控制用户是否可以缩放网页，防止过度缩放，保持页面布局和可读性。

示例：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

总之，viewport属性允许开发者控制移动设备上网页的视口大小、响应式布局和缩放行为，提供更好的用户体验和适应不同设备的显示效果。

HTML、XML、XHTML 的区别？

HTML、XML和XHTML是三种不同的标记语言，它们有以下特点：

HTML（Hypertext Markup Language）：

• 用于创建网页的标记语言。
• 使用预定义的标签和属性来定义网页的结构和内容。
• 语法相对宽松，允许一些不严格的写法。
• 通常用于创建静态网页，不支持自定义标签和属性。

XML（eXtensible Markup Language）：

• 通用的标记语言，用于表示和存储数据。
• 语法更为严格，要求每个标签都必须闭合，并且属性值必须使用引号括起来。
• 允许用户自定义标签和属性，适合定义特定应用程序的标记结构。
• 主要用于数据存储、传输和交换，常用于配置文件、数据交换和Web服务等领域。

XHTML（Extensible Hypertext Markup Language）：

• 基于XML的HTML版本，结合了HTML和XML的特点。
• 语法更为严格，要求标签闭合、属性用引号括起来，并且要求标签和属性名称使用小写字母。
• 强调文档结构的严格性和可扩展性，更适合用于网页开发。

浏览器乱码的原因是什么？如何解决？

浏览器乱码通常有以下原因：

• 字符编码不匹配：浏览器使用的字符编码与网页声明的字符编码不一致。
• 缺少字符编码声明：网页缺少字符编码声明，导致浏览器无法正确解析编码信息。
• 特殊字符编码错误：网页中的特殊字符编码方式错误或不一致。

解决方法：

• 确认正确的字符编码：确保网页声明的字符编码与浏览器使用的一致。
• 检查网页文件本身：使用正确的编码格式保存网页文件。
• 设置浏览器字符编码：在浏览器设置中选择正确的字符编码。
• 转换特殊字符编码：确保特殊字符的编码方式正确。
• 使用专业文本编辑工具：保证正确的字符编码和保存方式。