跳到主要内容

题目 1-题目 5

T1.浏览器是怎么解析 HTMl 文档​

  • 接收 HTML 文件。
  • 构建 DOM 树：解析 HTML 生成 DOM 结构。
  • 解析 CSS：解析样式规则并生成 CSSOM 树。
  • 生成渲染树：将 DOM 和 CSSOM 结合，得到渲染树。
  • 布局：计算每个元素的位置和大小。
  • 绘制：将元素渲染到屏幕上。
  • 合成层：将多个图层合成显示。
  • 执行 JavaScript：执行页面上的脚本，可能改变 DOM 和样式。
  • 事件监听与交互：处理用户输入并与页面交互

2.怎么让页面上的某块区域全屏展示？​

可以通过 HTML5 提供的 全屏 API，将该区域元素通过 requestFullscreen() 方法切换到全屏模式

  • 选择你希望全屏的某块区域（如一个 div）。
  • 在事件中调用 element.requestFullscreen() 方法进入全屏。
  • 可以监听全屏状态的变化（如退出全屏时的处理）
测试代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>特定区域全屏展示</title>
    <style>
      #fullscreenDiv {
        width: 300px;
        height: 200px;
        background-color: lightcoral;
        text-align: center;
        line-height: 200px;
        margin: 50px auto;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div id="fullscreenDiv">点击全屏</div>

    <script>
      const fullscreenDiv = document.getElementById('fullscreenDiv')

      // 点击该区域进入全屏
      fullscreenDiv.addEventListener('click', function () {
        if (fullscreenDiv.requestFullscreen) {
          fullscreenDiv.requestFullscreen()
        } else if (fullscreenDiv.mozRequestFullScreen) {
          // Firefox
          fullscreenDiv.mozRequestFullScreen()
        } else if (fullscreenDiv.webkitRequestFullscreen) {
          // Chrome, Safari and Opera
          fullscreenDiv.webkitRequestFullscreen()
        } else if (fullscreenDiv.msRequestFullscreen) {
          // IE/Edge
          fullscreenDiv.msRequestFullscreen()
        }
      })

      // 监听全屏状态变化
      document.addEventListener('fullscreenchange', () => {
        if (!document.fullscreenElement) {
          console.log('退出全屏')
        } else {
          console.log('进入全屏')
        }
      })
    </script>
  </body>
</html>

3.怎么在页面上获取用户的定位信息​

  • 检查浏览器是否支持 Geolocation API 使用 navigator.geolocation 对象来检测是否支持该功能。

  • 请求获取用户的当前位置 调用 getCurrentPosition() 方法来获取当前位置，该方法需要用户允许网页访问其位置信息。

  • 处理成功和错误情况 提供回调函数来处理成功获取位置信息和错误的情况。

测试代码
if (navigator.geolocation) {
  // 获取当前位置信息
  navigator.geolocation.getCurrentPosition(
    // 成功获取位置时的回调
    function (position) {
      const latitude = position.coords.latitude // 纬度
      const longitude = position.coords.longitude // 经度
      console.log(`Latitude: ${latitude}, Longitude: ${longitude}`)

      // 在页面上展示位置信息
      document.getElementById('location').innerText = `您的位置：纬度 ${latitude}, 经度 ${longitude}`
    },
    // 获取位置失败时的回调
    function (error) {
      console.error(`Error Code = ${error.code}: ${error.message}`)
      alert('无法获取您的位置信息，请确保已授权！')
    },
    // 可选参数配置
    {
      enableHighAccuracy: true, // 提高精度（消耗更多资源）
      timeout: 5000, // 超时时间（毫秒）
      maximumAge: 0 // 不使用缓存
    }
  )
} else {
  alert('您的浏览器不支持 Geolocation API')
}

4.html 文档中常见的 是什么？有什么作用？​

  是 HTML 中的不间断空格实体字符，英文全称是 "Non-Breaking Space"。它的主要作用是插入一个空格，并且该空格不会因为文本的换行或其他布局规则而被浏览器自动折行或移除。

  • 防止自动换行：普通空格在 HTML 中，如果文本内容过长，浏览器会自动进行换行。使用   可以防止换行，确保文本保持在同一行显示。适用于某些场合下希望一组词语或字符不被拆开的情况。
  • 保留连续空格：在 HTML 中，多个连续的普通空格会被浏览器压缩为一个空格显示。而使用   可以确保多个连续空格得以保留。
  • 排版和对齐：在某些排版需求中，  常用于插入多个不可见的空白字符，来控制文字或元素的间距和布局，比如手动调整表格内容的对齐、排版等。
  • 占位符：在表格或布局中，  可以作为占位符，用于在没有内容的情况下保持某些元素的空间，避免因为内容为空而导致的布局塌陷。

使用场景：

  • 需要保持单词或短语不被拆开时（如人名、数字单位等）。
  • 用于精确控制空格数量。
  • 实现特定的排版或对齐需求。

5.如何使用 JS 控制<audio>和 <video>标签播放音频和视频​

  1. 获取元素
测试代码
const audioElement = document.getElementById('myAudio')
const videoElement = document.getElementById('myVideo')
  1. 播放和暂停
测试代码
// 播放
audioElement.play()
videoElement.play()

// 暂停
audioElement.pause()
videoElement.pause()
  1. 设置音量
测试代码
// 播放
audioElement.play()
videoElement.play()

// 暂停
audioElement.pause()
videoElement.pause()
  1. 控制播放进度
测试代码
// 跳转到 30 秒
audioElement.currentTime = 30
videoElement.currentTime = 30

// 获取当前时间
const currentAudioTime = audioElement.currentTime
const currentVideoTime = videoElement.currentTime
  1. 监听事件
测试代码
audioElement.addEventListener('ended', () => {
  console.log('Audio ended')
})

videoElement.addEventListener('play', () => {
  console.log('Video is playing')
})
  1. 显示和隐藏控件
测试代码
audioElement.controls = true // 显示控件
videoElement.controls = false // 隐藏控件
  1. 完整实例
测试代码
<audio id="myAudio" src="audio.mp3"></audio>
<video id="myVideo" src="video.mp4" width="640" height="360"></video>
<button id="playButton">Play</button>
<button id="pauseButton">Pause</button>

<script>
 const audioElement = document.getElementById('myAudio');
 const videoElement = document.getElementById('myVideo');
 const playButton = document.getElementById('playButton');
 const pauseButton = document.getElementById('pauseButton');

 playButton.addEventListener('click', () => {
   audioElement.play();
   videoElement.play();
 });

 pauseButton.addEventListener('click', () => {
   audioElement.pause();
   videoElement.pause();
 });
</script>
Loading Comments...