WEB功能测试面经

一、XHTML和HTML的区别？

XHTML（Extensible HyperText Markup Language）和HTML（HyperText Markup Language）都是用于创建网页的标记语言，但它们有一些关键区别：

1. 语法要求：

   • XHTML：更加严格，需要符合XML的语法规则。例如，所有标签必须正确关闭，属性值必须用引号包围，标签必须小写。
   • HTML：语法较为宽松，不需要所有标签都关闭，属性值可以不使用引号，标签可以大小写混用。

2. 兼容性：

   • XHTML：设计为与XML兼容，可以更容易与其他基于XML的技术（如XSLT）集成。
   • HTML：不需要与XML兼容，更多地关注与浏览器的兼容性。

3. 错误处理：

   • XHTML：如果文档不符合语法规则，浏览器会停止渲染并显示错误。
   • HTML：浏览器通常会尝试纠正错误并继续渲染文档，即使文档不符合标准。

4. 内容模型：

   • XHTML：内容模型更为严格，必须按照规定的文档结构组织。
   • HTML：内容模型相对宽松，允许更多的灵活性。

总的来说，XHTML强调严格的语法和与XML的兼容性，而HTML更注重灵活性和宽松的错误处理。

二、写出至少五个HTML块元素标签？

HTML块元素标签是那些默认情况下占据其父容器的整个宽度，并在其前后形成换行的标签。以下是五个常见的HTML块元素标签：

1. <div>：常用于定义文档中的分区或部分，是最常用的容器元素。
2. <p>：定义段落。
3. <h1>到<h6>：定义标题，从最高级别的标题<h1>到最低级别的标题<h6>。
4. <ul>和<ol>：分别定义无序列表和有序列表。
5. <table>：定义表格。

这些块元素标签在页面布局和内容组织中非常重要。

三、写出至少五个HTML行内元素标签？

以下是五个常见的HTML行内元素标签：

1. <span>：用于定义文档中的行内部分，没有特定的语义，只是一个通用容器。
2. <a>：用于创建超链接。
3. <img>：用于嵌入图像。
4. <strong>：用于强调文本，通常会使文本加粗。
5. <em>：用于强调文本，通常会使文本斜体。

这些行内元素不会在其前后形成换行，只占据其内容所需的宽度。

四、写出table标签下会包含那些标签元素？

<table>标签用于创建表格，表格结构通常包含以下标签元素：

1. <tr>（表格行）：用于定义表格中的一行。它是<table>、<thead>、<tbody>和<tfoot>元素的直接子元素。
2. <td>（表格单元）：用于定义表格中的一个单元格。它是<tr>的直接子元素。
3. <th>（表头单元）：用于定义表格中的一个表头单元格，通常会使文本加粗且居中。它也是<tr>的直接子元素。

除此之外，表格还可以包含以下结构性元素：

4. <thead>（表格头部）：用于定义表格的头部，它包含一个或多个<tr>元素。
5. <tbody>（表格主体）：用于定义表格的主体部分，它包含一个或多个<tr>元素。
6. <tfoot>（表格底部）：用于定义表格的底部，它包含一个或多个<tr>元素。
7. <caption>（表格标题）：用于为表格添加标题，通常出现在<table>的第一个子元素位置。
8. <colgroup>（列组）：用于定义表格中一组列的属性。
9. <col>（列）：用于定义表格中单个列的属性，通常作为<colgroup>的子元素。

这个示例展示了表格的基本结构和各个标签的使用。

五、为啥很多网站不常使用table iframe这两个元素？

<table>和<iframe>这两个元素在现代网站开发中相对不常使用，主要有以下几个原因：

<table> 标签

1. 语义问题：
   <table> 标签最初是设计用于表示表格数据的，而不是用于布局页面。然而，早期的网页设计中，很多开发者滥用 <table> 标签进行布局，导致了语义和可访问性问题。现代网页设计提倡使用更加语义化的标签和 CSS 来进行布局。

2. 可维护性：
   使用 <table> 进行布局会使 HTML 代码变得冗长且复杂，维护起来非常困难。而使用 CSS 来进行布局不仅代码简洁，而且更易于维护和修改。

3. 响应式设计：
   响应式设计是现代网页设计的重要趋势，使用 CSS 可以更方便地实现响应式布局，而 <table> 标签在这方面非常受限。

4. 可访问性：
   对于屏幕阅读器和其他辅助技术来说，使用 <table> 进行布局会影响其对页面内容的理解，进而影响用户体验。语义化的 HTML 和 CSS 布局有助于提高网页的可访问性。

<iframe> 标签

1. 安全性：
   <iframe> 标签可以嵌入其他网页内容，但这也带来了潜在的安全风险。例如，跨站脚本（XSS）攻击和 Clickjacking（点击劫持）攻击。为了降低这些风险，许多网站避免使用 <iframe> 标签，或者在使用时采取严格的安全措施。

2. 性能问题：
   嵌入的 iframe 通常会增加页面的加载时间，因为它们需要单独的 HTTP 请求来加载外部内容。这会影响页面的整体性能和用户体验。

3. SEO 影响：
   搜索引擎爬虫在处理 iframe 内容时可能会遇到困难，导致嵌入的内容不被索引，从而影响网站的搜索引擎优化（SEO）效果。

4. 跨域问题：
   <iframe> 在嵌入跨域内容时会遇到一些限制，比如无法访问嵌入内容的 JavaScript 对象，导致功能受限。这些跨域限制使得 iframe 的使用场景变得更为复杂。

替代方案

• CSS Flexbox 和 Grid：现代布局通常使用 CSS 的 Flexbox 和 Grid 技术来实现复杂的页面布局，这些技术比 <table> 更加灵活和强大。
• Ajax 和 Fetch API：为了加载和显示外部内容，开发者通常使用 Ajax 或 Fetch API 来动态加载内容，而不是使用 <iframe>。

总结来说，虽然 <table> 和 <iframe> 在某些特定情况下依然有其用武之地，但现代网页设计更倾向于使用更加语义化和灵活的技术来实现同样的功能。

六、jpg和png格式的图片有什么区别？

JPG（或JPEG）和PNG是两种常见的图像文件格式，它们各自有不同的特点和适用场景：

JPG (JPEG)

1. 压缩方式：有损压缩，文件体积较小，但可能会有质量损失。
2. 适用场景：适用于照片和复杂的图像，特别是包含渐变色的图像。
3. 透明度：不支持透明背景。
4. 色彩范围：支持24位色彩（16,777,216种颜色）。

PNG

1. 压缩方式：无损压缩，文件体积较大，但不会有质量损失。
2. 适用场景：适用于需要高质量图像的场景，如图标、徽标和带透明背景的图像。
3. 透明度：支持透明背景（包括部分透明）。
4. 色彩范围：支持24位色彩和32位色彩（带透明通道）。

总结

• JPG：适用于照片和需要较小文件体积的场景。
• PNG：适用于需要透明背景和高质量图像的场景。

七、常用浏览器有哪些？内核都是什么？

常用浏览器及其内核如下：

常用浏览器

1. Google Chrome
   • 内核：Blink
2. Mozilla Firefox
   • 内核：Gecko
3. Microsoft Edge
   • 内核：Blink（自从基于Chromium后，早期版本使用EdgeHTML）
4. Apple Safari
   • 内核：WebKit
5. Opera
   • 内核：Blink（早期版本使用Presto）

详细说明

• Blink：由Google主导开发，最初从WebKit分叉出来，广泛用于基于Chromium的浏览器。
• Gecko：由Mozilla开发，用于Firefox浏览器，注重开放标准和跨平台支持。
• WebKit：最初由苹果开发，用于Safari浏览器，是Blink的前身。
• EdgeHTML：由Microsoft开发，用于早期版本的Microsoft Edge，后来被Blink取代。
• Presto：由Opera Software开发，早期版本的Opera浏览器使用，现已被Blink取代。

这些浏览器在各自的内核上发展和优化，以提供更好的性能、兼容性和用户体验。

八、至少写出5个H5的新标签？

HTML5 引入了一些新的标签，这些标签主要用于更好的语义化和结构化网页内容。以下是至少五个新的 HTML5 标签：

1. article

• 用于表示文档、页面、应用或网站中的独立内容块，例如博客文章、新闻文章等。

2. section

• 用于表示文档中的节（section），通常包含一个主题相关的内容。

3. header

• 用于表示文档、节或文章的头部内容，通常包含导航链接、标题等。

4. footer

• 用于表示文档、节或文章的尾部内容，通常包含版权信息、作者信息等。

5. nav

• 用于定义导航链接的部分，通常包含一组导航链接。

6. aside

• 用于表示与页面内容相关的辅助内容，例如侧边栏、广告等。

7. figure

• 用于表示独立的内容，通常包含图像、图表、代码示例等。

8. figcaption

• 用于为 figure标签中的内容添加标题或说明。

9. main

• 用于表示文档的主要内容区域，唯一且不嵌套于 article、aside、nav、section 内。

11. mark

• 用于标记高亮文本，表示与上下文相关的重要内容。

这些新标签帮助开发者更好地组织和描述网页内容，提高了网页的可读性和可维护性，同时也对搜索引擎优化（SEO）有帮助。

九、：before和：：before的区别？

:before 和 ::before 都是用于在 CSS 中插入内容的伪元素。

区别

1. 语法和规范：

   • :before：这是旧的语法，来自 CSS2 规范。
   • ::before：这是新的语法，来自 CSS3 规范，并且推荐使用。

2. 兼容性：

   • 现代浏览器都支持 ::before 语法，但为了兼容旧版浏览器，:before 语法也仍然有效。

应用

这两个伪元素用于在一个元素的内容之前插入额外的内容，如文字或符号。这在装饰和布局调整中非常有用。

例如，可以在段落的开头添加前缀文字，通过 :before 或 ::before 都可以实现这一效果。

十、form标签上定义请求类型的是哪些属性？

在 HTML 中，<form> 标签用于创建表单，并包含多个属性来定义表单的行为。其中两个最重要的属性用于定义请求类型：

1. action：

   • 定义：action 属性指定表单提交时的目标 URL，即服务器端处理程序的地址。
   • 示例：<form action="submit.php">

2. method：

   • 定义：method 属性指定表单数据提交到服务器的 HTTP 方法。主要有两种方法：
     • GET：通过 URL 参数提交数据，适合不敏感数据的提交。表单数据会附加在 URL 后面，长度有限。
     • POST：通过 HTTP 请求体提交数据，适合提交大量数据或敏感数据，如密码。数据不会显示在 URL 中，更安全。

示例

<form