跳到主要内容

html

DOCTYPE的作用​

  • doctype在html中的作用是触发浏览器的标准模式
  • 如果html中省略了doctype，浏览器会进入到Quirks模式的怪异模式

标准模式与怪异模式的区别​

浏览器解析的两种模式：标准模式(strict mode)和怪异模式(quirks mode)。

  • 标准模式页面按照HTML,CSS的定义渲染
  • 怪异模式就是浏览器为了兼容很早之前针对旧版本浏览器设计

标准模式：浏览器按W3C标准解析执行代码；

怪异模式：使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以称之为怪异模式。

说一下文档流​

  • 所谓的文档流，就好比如一块块的正方形组成的一个整体，而这些正方形就代表着每个div。当某个div脱离了这个整体，如绝对定位，也就代表他脱离了文档流

行内元素、块级元素、行内块级元素、空元素​

不同设备加载不同尺寸的图片​

桌面端显示的是大尺寸的图像，文件体积较大。手机的屏幕较小，只需要小尺寸的图像，可以节省带宽，加速网页渲染

img标签方案​

  • <img>标签提供了srcset 和 sizes
    • srcset
      • 定义可供选择的图片资源和它们的像素密度或宽度描述。
      • w单位表示图片的宽度
    • sizes
      • 指定在不同屏幕宽度下图片的显示尺寸。浏览器根据设备宽度和分辨率自动选择最合适的图片
html
<img 
     src="default.jpg" 
     srcset="small.jpg 480w, medium.jpg 1024w, large.jpg 1920w" 
     sizes="(max-width: 600px) 480px, (max-width: 1200px) 1024px, 1920px" 
     alt="Example Image">

picture标签​

对于更复杂的场景，比如按图片格式选择（JPEG/WebP），可使用 <picture> 标签

js
<picture>
  <source srcset="image-small.webp" type="image/webp" media="(max-width: 600px)">
  <source srcset="image-medium.webp" type="image/webp" media="(max-width: 1200px)">
  <source srcset="image-large.webp" type="image/webp" media="(min-width: 1201px)">
  <img src="default.jpg" alt="Example Image">
</picture>

说明：

  • <source> 标签指定不同设备条件下加载的图片资源。
  • type="image/webp" 优先加载 WebP 格式图片（若支持）。
  • 浏览器会根据 media 和支持的格式，选择合适的图片。
  • <img> 提供后备图像，用于不支持 <picture> 的浏览器。

js方案​

更复杂的逻辑或更好的控制，可以通过 JavaScript 动态加载合适的图片。

  • 动态替换src
js
const img = document.querySelector('#responsive-img');
const screenWidth = window.innerWidth;

if (screenWidth <= 600) {
  img.src = 'small.jpg';
} else if (screenWidth <= 1200) {
  img.src = 'medium.jpg';
} else {
  img.src = 'large.jpg';
}

a标签理解​

默认情况下，使用 <a> 标签时按住 Ctrl 键（Windows/Linux） 或 Command 键（MacOS），点击链接，会触发浏览器的行为——在新标签页中打开链接

a标签具体行为​

以下a标签的行为都是浏览器的默认行为特性

  1. 普通点击：
    • 直接在当前页面跳转到链接地址。
  2. 按住 Ctrl（Windows/Linux） 或 Command（Mac）：
    • 在新的浏览器标签页中打开链接。
  3. 按住 Shift：
    • 在新的浏览器窗口中打开链接。
  4. 鼠标中键点击（滚轮点击）：
    • 默认行为是在新标签页中打开链接（效果与按住 Ctrl/Command 类似）

如何定制a标签行为​

如果希望通过 JavaScript 定制链接的打开方式，可以绑定事件处理逻辑

  • 拦截 Ctrl 点击并弹出提示
  • 对于mac系统，metaKey对应的Command
js
<a href="https://example.com" id="myLink">点击我</a>

<script>
  document.getElementById('myLink').addEventListener('click', function (e) {
    if (e.ctrlKey || e.metaKey) {
      e.preventDefault();
      alert('你按下了 Ctrl 或 Command 键！');
    }
  });
</script>