前端常见面试题汇总（html篇）

1、xhtml和html有什么区别？

  • 语法要求：

    • XHTML要求严格的XML语法，例如所有标签必须小写，所有标签必须关闭（即使是空元素也要使用闭合标签），所有属性必须使用引号。
    • HTML语法相对更宽松，不强制要求标签闭合，标签和属性的大小写不敏感。

  • 文件类型：

    • XHTML文档必须以.xml、.xhtml或者.xhtml为扩展名，并且需要声明XML声明。
    • HTML文档通常以.html或.htm为扩展名，不需要XML声明。

  • DOCTYPE声明：

    • XHTML文档需要使用严格的DOCTYPE声明，如：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">。
    • HTML文档的DOCTYPE声明相对更简单，一般是<!DOCTYPE html>。

  • 元素的使用：

    • 在XHTML中，元素和属性的使用更加严格，例如<img>标签必须有alt属性。
    • 在HTML中，一些元素和属性的使用相对更自由。

总的来说，XHTML更加严格和规范，更适合作为XML的一部分使用，而HTML更加宽松，更适合在传统的Web开发中使用。

2、行内元素有哪些？

  • 行内元素在HTML中用于包裹文本或其他行内内容，不会独占一行，而是根据内容的大小自动排列在同一行内。
  • 这些元素通常只占用它们所需要的宽度，并且其高度和宽度不能直接设置。常见的行内元素包括：
    • span：用于对文本或其他行内元素进行分组，或者为文本的一部分设置样式。
    • a：用于创建超链接，链接到其他网页或网站。
    • img：用于在网页中插入图像。
    • strong 和 em：分别用于强调文本，其中strong通常显示为加粗，而em则显示为斜体。
    • input 和 label：input用于创建表单输入字段，如文本框、单选框等；label则用于定义表单控件的标签。
    • button：用于创建点击按钮，常用于触发特定操作或提交表单。
    • code：用于表示计算机代码或其他计算机可读的文本，通常以等宽字体的形式显示。

3、标签上title与alt属性的区别是什么？

alt属性主要用于图像标签，提供图像无法显示时的替代文本；而title属性则可以为任何元素提供额外的提示信息，当鼠标悬停时显示。在使用这两个属性时，应根据具体的场景和需求来选择合适的属性，以确保网页的可访问性和用户体验。

4、iframe的优缺点是什么？

  • 优点：
    • 灵活性：iframe允许将不同的网页组合在一起，形成一个整体，使得开发人员能够更好地组织和管理网页内容，从而提高用户体验。
    • 代码复用：通过iframe，可以将一些常用的网页元素（如导航栏、页脚等）封装成一个独立的页面，然后在其他页面中引用。这可以减少代码的重复编写，提高开发效率。
    • 并行加载：当页面中包含多个iframe时，浏览器可以同时加载这些iframe中的内容，从而提高页面的加载速度。这对于包含大量媒体文件或复杂交互的网页尤为重要。
    • 独立性：iframe可以在页面上独立显示一个页面或者内容，不会与页面其他元素产生冲突。
  • 缺点：
    • 加载时间：每个iframe都需要加载自己的HTML、CSS和JavaScript文件，这会增加服务器请求的次数，从而延长网页的加载时间。当页面中存在多个iframe时，这个问题会更为严重。
    • SEO效果：搜索引擎爬虫无法读取iframe中的内容，因此iframe中的内容无法被搜索引擎纳入索引，从而影响网页的搜索排名。
    • 安全性问题：iframe可以嵌入来自其他网站的内容，这可能会引发一些安全问题，例如点击劫持等攻击。此外，由于跨域限制，如果嵌入的网页与父页面不属于同一个域名、协议或端口，iframe中的内容将无法被访问。
    • 样式和大小调整困难：iframe的大小和样式通常由嵌入的网页决定，这使得在父页面中调整iframe的大小和样式变得困难。

5、请描述DOCTYPE的作用。

  • 告诉浏览器使用哪种HTML或XHTML规范来解析页面：DOCTYPE声明位于HTML文档的最顶部，它告诉浏览器当前页面使用的是哪个HTML版本。这有助于浏览器正确解析和渲染页面内容。不同的HTML版本（如HTML4、HTML5或XHTML）可能包含不同的元素和属性，因此DOCTYPE的声明对于确保页面在不同浏览器中的一致性和兼容性至关重要。

  • 避免浏览器进入怪异模式：在过去，没有指定DOCTYPE或者指定不正确会导致浏览器以一种名为“怪异模式”（Quirks Mode）的方式渲染页面。在这种模式下，浏览器会使用一些非标准的、与特定浏览器相关的渲染方式，可能导致页面在不同浏览器之间显示不一致。通过正确设置DOCTYPE，可以确保浏览器进入标准模式（Standard Mode），从而按照HTML或XHTML规范进行渲染。

  • 提升页面的性能和可访问性：由于标准模式下的浏览器渲染页面更为规范，这有助于减少页面中的错误和不一致性，从而提升页面的性能和可访问性。此外，遵循HTML或XHTML规范也有助于搜索引擎更好地理解和索引页面内容，有助于提高网站在搜索引擎中的排名。

6、请描述HTML中块级元素和内联元素的区别。

块级元素（如<div>,<p>,<h1>等）通常会独占一行，其宽度默认为其父元素的宽度，高度由内容决定。而内联元素（如<span>,<a>,<img>等）不会独占一行，其宽度和高度由内容决定，且可以和其他元素并排显示。

7、HTML5中新增了哪些语义化标签。

HTML5新增了许多语义化标签，包括<header>,<footer>,<article>,<section>,<nav>,<aside>,<figure>,<figcaption>等。这些标签有助于提升页面的可访问性和SEO效果。

8、请描述HTML中的表单元素及其作用。

HTML中的表单元素包括<form>,<input>,<textarea>,<button>,<label>,<select>,<option>等。它们用于收集用户输入的数据，并将数据提交到服务器。例如，<input>元素可以创建不同类型的输入字段，如文本、密码、复选框、单选按钮等；<textarea>元素用于创建多行文本输入框；<button>元素用于创建点击按钮；<label>元素用于定义输入字段的描述；<select>和<option>元素用于创建下拉列表。

9、如何在HTML中链接到另一个页面。

在HTML中，可以使用<a>标签来创建链接到其他页面的超链接。例如：<a href="other_page.html">链接到另一个页面</a>

10、 请描述HTML中的DOCTYPE、head、body的作用。

  • DOCTYPE：声明文档类型和版本，告诉浏览器如何解析页面内容。
  • head：包含了文档的元数据，如文档的标题、字符集、样式表链接、脚本链接等。这些信息通常不会直接显示在网页上，但会影响网页的渲染和行为。
  • body：包含了网页的主体内容，如文本、图片、链接、列表、表格、表单等。这些元素会直接展示给用户。

 

posted @ 2024-04-19 14:49  技术开发-陈伟健  阅读(1)  评论(0)  编辑  收藏  举报