HTML问题整理

前端小白板砖中
26 阅读4分钟

DOCTYPE有什么作用？

DOCTYPE是文档类型定义，指示浏览器已何种解析规则解析文档的声明。在HTML中通常放在文档的开头，作为文档类型的标识和声明，是HTML文档的必须部分。以确保浏览器正确地解析文档，并按照相应的标准来显示内容。

img中的title和alt有啥区别？

alt属性用于为图像提供替代文本，即使图片无法加载时，可以显示alt属性的内容，提高网页的可访问性和可用性，title属性则提供有关于图像的额外信息。当鼠标移上时，可以显示title属性的内容。

简述一下src和href的区别

  • 在HTML中，src属性是用来引用外部资源的URL，如图像、脚本或者嵌入对象的位置，例如img中src属性指定图像的URL
  • href属性则是用来指定超文本链接的目标资源位置，如超链接或者link标记中的外部样式表，例如a标签中的href属性置顶了链接目标的URL。

iframe有哪些优缺点？

iframe（内联框架）是一种HTML元素，它允许在当前文档嵌入一个独立的HTML文档。

  • iframe的优点
    • 内容隔离：iframe可以将不同来源的内容隔离开，使得他们在不同的上下文中运行，这有助于保护当前文档免受潜在的安全风险，并确保不同来源的内容不会相互干扰。
    • 异步加载：iframe中的内容可以异步加载，这意味着页面主体内容可以在iframe加载完成之前呈现，这有助于页面加载速度。
    • 独立滚动：iframe内的内容可以独立滚动，而不会影响主页面的滚动，这有助于在需要展示大量内容的情况下，提高用户体验。
    • 跨域资源访问：在一定程度上，iframe可以用于访问跨域资源，例如嵌入来自其他域的网页或应用。
  • iframe的缺点
    • 性能影响：iframe的使用可能会导致性能下降，因为他需要浏览器加载额外的文档资源，每个嵌入的iframe都需要额外的HTTP请求，这可能会延长页面加载时间
    • 复杂性增加： iframe的使用可能会使页面结构更加复杂，导致维护困难，而且在iframe和主页面之间进行通信可能会涉及到跨域问题，这会增加开发难度。
    • SEO不友好:搜索引擎可能无法完全索引iframe中的内容，这会影响到页面的搜索引擎优化（SEO）
    • 可访问性问题：iframe在某些情况下可能会导致可访问性问题，例如屏幕阅读器可能无法正确解析iframe中的内容，导致部分用户无法访问这些内容。
  • 综上所诉，iframe有一些优点，如内容隔离，异步加载，独立滚动等，然而他也有一些缺点，如性能影响，复杂性增加，SEO不友好、可访问性问题等，在使用iframe时，需要权衡这些优缺点。

常用的meta标签有哪些？

meta标签提供了有关HTML文档的元数据，如描述、关键词、作者等,以下是一些常用的meta标签

  1. 字符集声明：声明HTML文档使用的字符编码，通常为UTF-8

    <mata chartset ='UTF-8' />

  2. 视口设置：控制页面在移动设备上的显示方式，如缩放级别和页面宽度

    <meta name='viewport' content='width=device-width,initail-scale=1.0' />

  3. 页面描述：提供页面的简短描述，有助于搜索引擎了解页面内容

    HTML <meta name='description' content='A brief description of the page' />

  4. 关键词：设置页面关键词，有助于优化搜索引擎（SEO）。但请注意，大多数的搜索引擎不在使用此标签

    <meta name="keywords" content="keyword1, keyword2, keyword3" />

  5. 作者：指定页面作者

   <meta name='author' content='Author Name' />
  1. 禁止缓存：告诉浏览器不要缓存页面
<meta http-equiv='Cache-Contrl' content='no-cache,no-store,must-revalidate />
  1. 自动刷新:设置页面在特定的时间间隔后自动刷新
<meta http-equiv='refresh' content='5' />
  1. 跳转其他页面：在指定的时间后，自动将用户重定向到其他页面
<meta http-equiv='refresh' content='5;URL=https://example.com/new-page.html' />
  1. 兼容模式：指定浏览器（如Internet Explorer)使用特定的渲染模式
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
  1. 搜索引擎搜索控制
<meta name="robots" content="index,follow" />
avatar
文章
阅读
粉丝