HTML知识点（二）

HTML知识点（二）

1、img的srcset属性作用？

srcset：提供实际可用的图片资源。

  • 按图像宽度描述

    1
    2
    3
    <img src="small.jpg" 
         srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" 
         alt="...">

  • 按图像分辨率描述

    1
    2
    3
    <img src="default.jpg"
         srcset="small.jpg 1x, medium.jpg 2x, large.jpg 3x"
         alt="...">

sizes：告诉浏览器图片的显示大小。通常，srcset 属性会与 sizes 属性一起使用，后者用来指定在不同视口宽度下图像的显示大小（即图像在页面上实际占据的空间），帮助浏览器更准确地选择最佳图像资源。

1
2
3
4
<img src="default.jpg"
     srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
     sizes="(max-width: 600px) 480px, (max-width: 1200px) 800px, 1200px"
     alt="响应式图片示例">

核心目标：减少不必要的带宽浪费，保证图片在不同设备下清晰度适配。

  • sizes 计算显示宽度：
    根据当前视口宽度和 sizes 规则，计算出图片的显示宽度（CSS 像素）。
  • 计算需要的图片实际宽度：
    需要的图片实际宽度 = 显示宽度 × 设备像素比。
  • 从 srcset 中选择图片：
    选择一张实际宽度 ≥ 计算值且最接近的图片。

2、行内元素和块级元素

  • 行内元素

    多个行内元素可以排在一行上，宽度高度内边距外边距通常只对水平方向有效。

    1、文字样式：b、strong、i、em、u、mark、small、sub、sup、span

    2、链接交互：a、button

    3、媒体相关：img、video、audio、svg

    4、表单相关：input、label、select、textarea、option

  • 块级元素

    每个块级元素独占一行，宽度默认是父容器的100%，可以设置宽度高度。

    1、布局容器：div、section、article、aside、nav、header、footer、main

    2、文字相关：p、h1-h6、hr

    3、表格相关：tabel、thead、tbody、tfoot、tr、th、td

    4、列表相关：ul、ol、li、dl、dt、dd

    5、媒体相关：figure、figcaption

  • 空元素

    没有子元素，通常是自闭合标签。

    1、文档结构：br、hr

    2、媒体相关：img、track

    3、表单相关：input、textarea

    4、其他：meta、link、base

3、title与h1的区别、b与strong的区别、i与em的区别

1、title定义网页的标题，h1定义网页内容的主标题。h1-h6更具有层次感。

2、b表示文本加粗，而strong有语义强调加粗，对seo有影响。

3、i表示文本斜体，em有语义强调斜体，对seo有影响。

4、iframe 的优点和缺点？

iframe是HTML 中用于嵌入其他 HTML 文档的标签，允许将一个独立的网页嵌入到当前页面中。

  • 优点

    页面嵌套：可以将其他网页嵌入当前页面，例如外部资源、广告、第三方工具等。实现独立的内容区块，不影响主页面的结构和样式。

    独立性：嵌入的内容是一个独立的文档，有自己的 DOM 和 CSS 范围。主页面与嵌入的文档相互独立，互不干扰。

    安全性：主页面与 iframe 中的内容隔离，某些安全风险（如 XSS 攻击）会被限制。通过 sandbox 属性，可以限制 <iframe> 的行为。

    跨域通信：通过 postMessage API，可以实现 iframe 与父页面之间的跨域通信。

    懒加载：通过 loading=”lazy” 属性实现 iframe 的懒加载，优化页面性能。

  • 缺点

    性能问题：额外的资源请求，如果嵌入的文档加载慢，会拖慢整体页面性能。每个 iframe>都会创建一个独立的文档上下文，增加内存和 CPU 开销。

    用户体验：iframe大小要手动设置，内容溢出可能出现双滚动条。

    seo优化：可能无法正确索引iframe中的内容。

    跨域限制：虽然可以嵌入跨域内容，但与主页面的通信受到浏览器同源策略的限制（即不能直接访问 iframe 中的 DOM）。

    嵌套复杂性：如果 iframe 中再嵌套 iframe，会导致维护难度增加，同时引发额外的性能问题。

？什么是懒加载

主要思想是：仅在需要时才加载内容。在用户滚动到相应位置或满足特定条件时才加载相应的资源。

实现方式：

1、使用HTML属性，loading=”lazy”；

2、使用JS中的IntersectionObserver。

？什么是沙盒属性

sandbox 属性通常用于 <iframe> 标签上，用于对嵌入的内容启用一系列安全限制。简单来说，它为嵌入的文档创建了一个沙盒环境，限制其能执行的操作，以增强安全性。

1
<iframe src="https://example.com" sandbox></iframe>

限制脚本执行、限制表单提交、阻止插件和导航、隔离同源策略。也可以配置allow等。

1
<iframe src="https://example.com" sandbox="allow-scripts allow-forms"></iframe>

5、HTML5 drag API

  • dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发。
  • darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。
  • dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。
  • dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。
  • dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。
  • drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。
  • dragend：事件主体是被拖放元素，在整个拖放操作结束时触发。