前端面试题-HTML篇

code_nutter
256 阅读14分钟

HTML篇

1.XML,HTML,XHTML 有什么关联及区别

XML、HTML和XHTML是三种不同的标记语言，它们在结构和用途上有所重叠，但也有各自独特的特点和用途。以下是它们之间的关系和区别：

关系：

  1. 继承与发展：

    • HTML是最早的标记语言，用于创建网页内容。
    • XML是HTML的一个扩展，它提供了一种更灵活的方式来定义自己的标记语言。
    • XHTML是HTML的一个改革版本，它基于XML的规则，使得HTML文档更加严格和规范。

  2. 共同点：

    • 它们都是用于描述数据的标记语言，使用标签来组织内容。
    • 它们都使用尖括号< >来包围标签。

区别：

  1. HTML（HyperText Markup Language） ：

    • 用途：HTML主要用于创建网页内容，定义网页的结构和内容。
    • 灵活性：HTML的语法相对宽松，标签可以不闭合，属性值可以不使用引号。
    • 表现与内容混合：HTML通常将内容和表现（样式）混合在一起。

  2. XML（eXtensible Markup Language） ：

    • 用途：XML用于存储和传输数据，它是一种元标记语言，可以定义其他标记语言。
    • 严格性：XML非常严格，所有标签必须正确闭合，属性值必须使用引号。
    • 扩展性：XML可以定义自己的标签和结构，非常灵活。

  3. XHTML（eXtensible HyperText Markup Language） ：

    • 用途：XHTML用于创建网页内容，它是HTML的一个基于XML的版本。
    • 严格性：XHTML遵循XML的严格规则，所有标签必须闭合，属性值必须使用引号。
    • 表现与内容分离：XHTML强调内容与表现的分离，通常与CSS一起使用来控制样式。

具体区别：

  • 标签闭合：

    • HTML：可以省略某些标签的闭合，如<br>和<img>。
    • XML/XHTML：所有标签必须正确闭合，即使是空元素，也需要使用<br />或<img src="image.jpg" alt="description" />这样的自闭合形式。

  • 大小写敏感性：

    • HTML：标签和属性名不区分大小写。
    • XML/XHTML：标签和属性名是大小写敏感的。

  • 属性值引号：

    • HTML：属性值可以不使用引号。
    • XML/XHTML：属性值必须使用引号，可以是单引号或双引号，但不能混用。

  • 文档类型定义（DTD） ：

    • HTML：使用HTML DTD。
    • XHTML：使用XML DTD。

  • 用途：

    • HTML：主要用于网页内容的展示。
    • XML：用于数据的存储和传输，可以定义新的标记语言。
    • XHTML：用于网页内容的展示，强调内容与表现的分离。

  • 浏览器兼容性：

    • HTML：几乎所有浏览器都支持HTML。
    • XHTML：大多数现代浏览器支持XHTML，但一些旧浏览器可能存在兼容性问题。
    • XML：通常不直接在浏览器中使用XML，而是通过XML解析器处理。

总的来说，HTML是用于网页内容的标记语言，XML是一种用于数据存储和传输的元标记语言，而XHTML是HTML的一个基于XML的严格版本，它结合了HTML的用途和XML的严格性。随着HTML5的出现，XHTML的使用逐渐减少，因为HTML5提供了更好的扩展性和浏览器兼容性。

2.简述一下你对HTML语义化的理解？

HTML语义化是指使用具有明确语义含义的HTML标签来组织和标记网页内容，使得网页的结构更加清晰、合理，并且能够被浏览器、搜索引擎以及其他用户代理（如屏幕阅读器）更好地理解和处理。以下是对HTML语义化的一些理解：

  1. 内容结构化：

    • 语义化标签提供了一种方式来表达内容的结构和层次，例如使用<header>、<footer>、<article>、<section>等标签来定义页面的不同部分。

  2. 提高可访问性：

    • 通过使用语义化的标签，辅助技术（如屏幕阅读器）可以更容易地解析网页内容，从而提高视障用户的网页访问体验。

  3. 搜索引擎优化（SEO） ：

    • 搜索引擎使用HTML标签来理解网页内容的结构和重要性，语义化有助于提高网页在搜索引擎中的排名。

  4. 代码维护和可读性：

    • 语义化的HTML代码更加易于理解和维护，因为它清晰地表达了内容的结构和意图。

  5. 文档大纲：

    • 语义化标签有助于创建一个文档的逻辑大纲，这对于理解页面布局和导航非常有帮助。

  6. 替代内容和上下文：

    • 某些语义化标签（如<figure>和<figcaption>）提供了一种方式来定义内容的上下文和关系，这对于理解图像、图表等非文本内容尤为重要。

  7. 样式和脚本的分离：

    • 语义化强调内容与表现的分离，样式和行为应该通过CSS和JavaScript来控制，而不是通过HTML标签的呈现属性。

  8. 跨浏览器一致性：

    • 使用语义化标签可以减少对特定浏览器的依赖，因为这些标签在不同的浏览器和用户代理中具有一致的语义。

  9. 未来兼容性：

    • 随着Web技术的发展，语义化标签有助于确保网页内容在未来的技术和设备上保持可访问性和可用性。

  10. 内容再利用：

    • 语义化的标签使得内容更容易被其他应用和工具再利用，例如在不同的设备或上下文中展示内容。

总的来说，HTML语义化是一种最佳实践，它通过使用具有明确含义的标签来提高网页内容的可读性、可访问性和搜索引擎优化，同时也使得网页代码更加清晰和易于维护。

3.行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？行内元素和块级元素有什么区别

在HTML中，元素根据其显示特性被分为行内元素、块级元素和空（void）元素。

行内元素（Inline Elements）：

行内元素在文档的流中不会产生换行，它们通常用于文本内容的格式化。以下是一些常见的行内元素：

  • <span>：用于对文本应用样式或脚本。
  • <a>：定义超链接。
  • <strong>：表示文本的重要性。
  • <em>：表示强调。
  • <b>：使文本加粗。
  • <i>：使文本斜体。
  • <sub>：下标文本。
  • <sup>：上标文本。
  • <img>：嵌入图像。
  • <input>：定义输入字段。
  • <label>：定义label元素，通常与<input>元素一起使用。
  • <br>：换行。
  • <hr>：水平分隔线，虽然它是行内元素，但通常表现为块级元素。
  • <meta>：提供关于HTML文档的元数据。
  • <del>：表示删除的文本。
  • <ins>：表示插入的文本。

块级元素（Block Elements）：

块级元素在文档流中会创建一个新的块或区域，通常会导致换行。以下是一些常见的块级元素：

  • <div>：块级容器，用于组织内容。
  • <header>：文档或部分内容的页眉。
  • <footer>：文档或部分内容的页脚。
  • <p>：段落。
  • <h1> 到 <h6>：标题元素。
  • <ul>：无序列表。
  • <ol>：有序列表。
  • <li>：列表项。
  • <table>：表格。
  • <td>：表格单元格。
  • <tr>：表格行。
  • <th>：表头单元格。
  • <section>：文档中的一个独立部分。
  • <article>：独立的内容区块。
  • <pre>：预格式化的文本。
  • <blockquote>：引用或引用的文本块。

空（Void）元素（Empty Elements）：

空元素没有内容，也不需要闭合标签。以下是一些常见的空元素：

  • <img>：嵌入图像。
  • <br>：换行。
  • <hr>：水平分隔线。
  • <input>：输入字段。
  • <link>：链接外部资源。
  • <meta>：提供关于HTML文档的元数据。
  • <area>：图像映射中的区域。
  • <base>：指定页面的基URL。
  • <col>：表格列属性。
  • <command>：定义命令按钮。
  • <embed>：嵌入外部应用。
  • <keygen>：密钥对生成器字段。
  • <param>：对象参数。
  • <source>：媒体资源。
  • <track>：字幕或其它类型的轨迹。
  • <wbr>：软换行。

行内元素和块级元素的区别：

  1. 布局影响：

    • 行内元素：不会导致元素前后换行，它们通常与其他行内元素一起排列在同一行。
    • 块级元素：通常会导致元素前后换行，占据父容器的完整宽度。

  2. 宽度和高度：

    • 行内元素：宽度和高度通常由内容决定，不能直接设置宽度和高度。
    • 块级元素：可以设置宽度和高度，它们默认会扩展以填充其父容器的宽度。

  3. 内外边距：

    • 行内元素：设置的内外边距只影响元素本身，不影响其他行内元素的布局。
    • 块级元素：设置的内外边距会影响元素周围的空间，包括与其他块级元素的间距。

  4. CSS布局：

    • 行内元素：通常用于文本和图像的简单布局。
    • 块级元素：用于创建更复杂的布局结构，如列和行。

4.标签上 title 与 alt 属性的区别是什么？

title和alt属性在HTML中都是用来提供额外信息的，但它们的用途和重要性有所不同：

title属性：

  • 用途：title属性提供了关于元素的额外信息，通常当用户将鼠标悬停在元素上时显示。它可以用来提供额外的描述、警告或提示。
  • 可访问性：title属性对于视觉用户来说是有帮助的，但它不提供足够的信息来替代内容本身，特别是在内容不可访问的情况下。
  • 搜索引擎优化：title属性中的文本可以被搜索引擎用来理解页面内容，有时会影响搜索结果的显示。
  • 应用范围：title可以用于大多数HTML元素，包括<img>、<a>、<input>等。

alt属性：

  • 用途：alt属性专门用于<img>标签，为图像提供替代文本。当图像无法显示时，alt属性的文本将显示在图像的位置。
  • 可访问性：alt属性对于视觉障碍用户非常重要，因为它提供了图像内容的描述，使得屏幕阅读器可以读取这些信息。良好的alt属性描述可以帮助所有用户理解图像的意图和内容。
  • 搜索引擎优化：alt属性中的文本也可以被搜索引擎用来理解图像内容，有助于提高页面的搜索引擎排名。
  • 应用范围：alt属性只能用于<img>标签。

区别总结：

  • 目的不同：title提供额外信息，而alt提供替代内容。
  • 显示时机：title通常在鼠标悬停时显示，而alt在图像无法显示时显示。
  • 重要性：对于视觉障碍用户来说，alt属性更为重要，因为它提供了图像内容的描述。
  • 搜索引擎优化：两者都有助于搜索引擎优化，但alt属性对于图像内容尤为重要。
  • 应用范围：title可以用于多种元素，而alt仅限于<img>标签。

5.iframe的优缺点？

iframe 是用于在当前页面中嵌入另一个HTML文档或外部资源

优点：

  1. 内容嵌入：iframe允许在一个网页中嵌入来自不同源或服务器的内容，如网页、视频、地图等，这有助于创建丰富多彩的页面。
  2. 独立性：内嵌的内容在iframe中运行，与主页面相互隔离，这意味着它不会受到主页面的影响，保持了独立性。
  3. 简便性：使用iframe非常简单，只需提供要嵌入的资源的URL或相对路径即可。
  4. 模块分离：如果有多个网页引用同一个iframe，只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。
  5. 代码重用：如果网页为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，增加代码的可重用。
  6. 解决加载缓慢问题：遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。
  7. 局部刷新：重载页面时不需要重载整个页面，只需要重载页面中的一个框架页。

缺点：

  1. 样式和脚本问题：调用外部页面需要额外调用CSS，增加页面额外的请求次数，增加服务器的HTTP请求。
  2. 搜索引擎优化（SEO）问题：iframe中的内容通常不容易被搜索引擎优化，因为搜索引擎可能无法正确地抓取和索引iframe内的内容。
  3. 代码复杂性：在网页中使用框架结构最大的弊病是搜索引擎的“蜘蛛”程序无法解读这种页面，会影响搜索引擎优化，不利于网站排名。
  4. 用户体验问题：iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差。
  5. 移动设备兼容性：很多的移动设备（如PDA、手机）无法完全显示框架，设备兼容性差。
  6. 服务器请求增加：iframe框架页面会增加服务器的HTTP请求，对于大型网站是不可取的。
  7. 阻塞页面加载：iframe加载完毕后才会触发window.onload事件，动态设置src可解决这个问题。
  8. 共享链接池问题：iframe与主页面是共享链接池的，若iframe加载时用光了链接池，则会造成主页面加载阻塞。

6.href 与 src？

href（Hypertext Reference）和src（Source）是HTML中用于指定资源位置的两个不同的属性，它们各自有不同的用途和作用：

href属性：

  • 用途：href属性用于指定超链接的目标URL，即链接指向的资源地址。它常用于<a>（锚点）标签，用于创建链接到另一个页面或页面内的某个部分。
  • 加载时机：当浏览器遇到带有href属性的元素时，它会在用户点击链接时才加载资源。
  • 应用标签：href属性主要用于<a>标签，但也可用于<link>（链接外部资源，如CSS文件）和base（指定基础URL）标签。
  • 影响：href属性不会影响当前文档的加载和渲染，它只是提供了一个到达另一个资源的路径。

src属性：

  • 用途：src属性用于指定嵌入当前文档的资源地址，如图像、脚本或iframe中的内容。它常用于<img>（图像）、<script>（脚本）和iframe（内联框架）标签。
  • 加载时机：当浏览器遇到带有src属性的元素时，它会在文档渲染之前加载并解析资源。
  • 应用标签：src属性主要用于<img>、<script>和iframe标签，以及<video>、<audio>、<embed>和<object>等媒体和插件标签。
  • 影响：src属性会影响当前文档的加载和渲染，因为浏览器需要加载并解析这些资源以正确显示页面内容。

区别：

  1. 资源加载时机：href属性通常在用户交互时加载资源，而src属性在当前文档加载时即开始加载资源。
  2. 资源类型：href通常用于链接到另一个文档或资源，而src用于嵌入或引用外部资源。
  3. 应用场景：href用于创建链接，允许用户导航到另一个页面或资源；src用于在当前页面中嵌入内容，如图像、脚本等。
  4. 影响页面渲染：src加载的资源可能会阻塞页面的渲染，特别是在加载大型脚本或媒体文件时；而href则不会影响页面渲染。
  5. 浏览器行为：对于href，浏览器会发起一个新的HTTP请求并导航到指定的URL；对于src，浏览器会发起一个HTTP请求来获取资源，并将其嵌入到当前文档中。

7.什么是 优雅降级、渐进增强？

优雅降级（Graceful Degradation）和渐进增强（Progressive Enhancement）是Web开发中用于提高网站或应用在不同环境和设备上的适应性的两种策略。

优雅降级是一种设计策略，它首先构建完整的功能和复杂的用户体验，然后针对那些不支持这些功能的浏览器或设备进行简化或降级处理，以确保基本的可用性。优雅降级的特点是从一个功能丰富的版本开始，并试图通过减少功能来适应不同的环境，关注的是保持核心功能的可用性，即使在低版本浏览器或设备上。

渐进增强则是从最基本的、可访问的版本开始构建网站或应用，然后逐渐添加更高级的功能和效果，以提供更好的用户体验。渐进增强的特点是从一个非常基础的、能够起作用的版本开始，并不断扩充，以适应未来环境的需要，关注的是为所有用户提供基本功能，并为高级用户提供额外体验。

avatar
文章
阅读
粉丝