当前位置： 首页 > news >正文

夯实前端基础之HTML篇

news 2025/11/10 13:51:13

知识点概览

在这里插入图片描述

HTML部分

1. DOM和BOM有什么区别？

  • DOM（Document Object Model）

当网页被加载时，浏览器会创建页面的对象文档模型，HTML DOM 模型被结构化为对象树

用途： 主要用于网页内容的动态修改和交互，比如网页的局部更新、表单验证、创建动态列表等场景。

在这里插入图片描述

  • 什么是Shadow DOM？和普通DOM树有什么区别？
    • web component做到真正的组件化
    • 原生规范，无需框架
    • 天然与用户隔离，真正意义上的CSS scope
    • 比如常用的video标签，我们通常只能在DOM结构中看到一个video标签，但在设置中选择显示Shadow DOM的时候，能看到它真正的结构

在这里插入图片描述

// 手动实现一个shadow DOM
<body><script>customElements.define("my-shadow-dom",class extends HTMLElement {connectedCallback() {const shadow = this.attachShadow({ mode: "open" });shadow.innerHTML = "this is my shadow DOM！";}});</script><my-shadow-dom></my-shadow-dom></body>

在这里插入图片描述

  • BOM（Browser Object Model）

浏览器对象模型，document也是浏览器的对象

用途： 主要用于用于控制浏览器的行为，如页面导航、获取浏览器信息、管理浏览器窗口大小和位置等操作。

2. HTML中meta有什么作用？

HTML 标签

作用：定义该html文档的元数据（字符集、页面描述、关键词、文档作者和视口设置等）

浏览器（如何显示内容或重新加载页面）、搜索引擎（关键词）和其他网络服务会用到元数据

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 它为浏览器提供了关于如何控制页面尺寸和缩放比例的指令。 --><meta name="keywords" content="css, JavaScript, CSS3"><meta name="author" content="guoshouying"><meta name="description" content="this is my site."><meta http-equiv="refresh" content="10"><!-- 每 10 秒刷新一次文档 -->
</head>

3. HTML5中语义化标签有哪些及特性

优点：1、利于搜索引擎优化SEO，2、方便开发和维护，3、无障碍访问(Accessibility)

在这里插入图片描述

4. 如何检查浏览器是否支持h5

  • 检测特定的html5标签或者API，如 canvas,video,audio等标签，看浏览器能否正确识别
var canvas = document.createElement('canvas'); 
if (canvas.getContext) { console.log("浏览器支持canvas"); 
} else { console.log("浏览器不支持canvas"); 
}

5. 哪些标签可以优化SEO？

  • 元标签（meta）
  • 语义化标签（header，section，article等）- 这些标签能够让搜索引擎更好地理解页面的结构和内容。
  • 链接标签（a）
  • 图像标签（img）- alt属性是搜索引擎理解图像内容与页面相关性的重要依据。

6. 对target='_blank’的理解？有什么安全性问题？如何防范？

作用：在新的窗口中打开链接指向的内容

  • 安全问题
    • 钓鱼攻击风险：打开新的窗口后，通过window.opener可以访问原始窗口对象，进而获取到一些隐私信息，如登录状态，账号信息等，从而进行钓鱼攻击。
    • 跨站脚本攻击（XSS）风险：如果新打开的页面包含恶意脚本，并且能够通过window.opener与原始页面进行交互，就有可能将恶意脚本注入到原始页面中，导致用户信息泄露或者其他安全问题
  • 防范措施
<a href="http://www.baidu.com" target="_blank" rel="norefferrer noopener">打开百度</a>

7. src和href的区别？

  • src（Souce）
    • 常用于img, script, iframe等标签，用于指定要加载到当前元素中的外部资源的位置。加载时，浏览器会停止对HTML文档的解析，直到获取并加载完指定的资源，然后再继续HTML解析。
  • href（hypertext reference）
    • 常用于a（超链接），link标签（链接样式表），用于指定目标资源的位置，这个资源和当前文档是引用关系，浏览器不会暂停HTML解析去执行它。a标签中只有点击的时候才执行加载该页面。对于<link rel="stylesheet" href="styles.css">，浏览器会在后台异步加载样式表，不会阻塞 HTML 文档的解析。
    • href=“javascript:void(0) " 和 href=”#" 有什么区别？
      • href="javascript:void(0) "：表示死链接,通常用于需要在点击链接时执行 JavaScript 代码，但不希望页面有任何跳转或刷新的情况：<a href="javascript:void(0)" onclick="doSomething()">点击我</a>，如果页面javascript被禁用，将不工作。
      • href="#"：锚点，默认是#top,页面会向上滚动，如果页面javascript被禁用，仍然工作。

8. script标签中的defer和async的区别？

  • 相同点
    • 都是实现脚本的异步加载，不会阻塞浏览器对HTML文档的解析，在后台下载脚本，提高网页性能及用户体验。
  • 不同点
    • defer：脚本加载完后不会立即执行，等HTML解析完按顺序执行脚本。适用于脚本间有依赖顺序，或者需要操作DOM的场景。
    • async：脚本加载完立即执行，且不按照顺序，哪个下载完的快先执行哪个。适用于不操作DOM的独立脚本，比如广告脚本，第三方统计脚本。

9. 什么是canvas & 什么时候用？

  • 概念
    • h5提供的标签，允许用JavaScript在画布上绘图（形状、线条、曲线、方框、文本和图像，以及颜色、旋转、透明度和其他像素操作）
    • canvas是基于像素的，有一个二维的网格系统，原点为（0，0）在左上角，x轴水平向右，y轴垂直向下。
    • 与SVG相比，SVG是可缩放矢量图形，使用XML来描述图形，可以方便的缩放，修改。canvas绘制的图形基于像素修改比较困难。
  • 使用场景
    • 游戏开发：简单的休闲游戏，如连连看，绘制图形。
    • 可视化开发：柱状图，折线图等各种图表。
    • 图像处理和特效：例如，实现图像的灰度化、模糊处理、旋转、缩放等效果。
    • 动画制作：加载动画，粒子动画（比如模拟雪花飘落、烟花绽放等效果）等。
  • 代码实现 Canvas API
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Canvss</title>
</head>
<body><!-- 创建canvas元素 --><canvas id="myCanvas" width="500" height="500"></canvas><script>const canvasElem = document.getElementById('myCanvas');// 创建绘图上下文context对象const ctx = canvasElem.getContext('2d');ctx.fillStyle = "#ff0000";   // 设置填充颜色ctx.fillRect(0, 0, 200, 100); // 绘制矩形，fillRect(x, y, width, height)ctx.clearRect(10, 10, 50, 50); // 清除矩形区域，clearRect(x, y, width, height)ctx.strokeStyle = "red";   // 设置边框颜色   ctx.strokeRect(0, 102, 100, 50); // 绘制矩形边框，strokeRect(x, y, width, height)ctx.beginPath(); // 开始绘制路径ctx.moveTo(0,220); // 将画笔移动到指定的坐标点，不进行绘制，主要用于确定线条的起始点ctx.lineTo(150, 220); // 画一条线段到指定位置ctx.stroke(); // 绘制线段// 绘制圆形// x和y是圆心的坐标，radius是半径，startAngle和endAngle是起始角度和结束角度（以弧度为单位），counterclockwise是一个布尔值，用于指定是否逆时针绘制。ctx.beginPath();ctx.arc(100, 300, 50, 0, Math.PI * 2, true); // arc(x, y, radius, startAngle, endAngle, counterclockwise)ctx.stroke();</script>
</body>
</html>

svg和canvas画出的圆形区别

在这里插入图片描述

10. 渐进增强和优雅降级之间的区别？

  • 渐进增强（Progressive Enhancement）
    • 一种网页设计和开发理念。它强调从最基本的、能在所有浏览器和设备上正常工作的核心内容和功能开始构建网页。然后，根据浏览器的能力和设备的特性，逐步添加更高级的样式、交互功能和性能优化。
    • 例如，先构建一个只包含纯文本内容和基本链接的网页，确保它在最古老的浏览器或功能受限的设备（如一些低性能的移动设备）上能够正常访问和理解。之后，再为支持 CSS3 和 JavaScript 的现代浏览器添加样式（如渐变背景、动画效果）和交互功能（如表单验证、下拉菜单的动态效果）。
    • 兼容性好，易于维护和扩展
  • 优雅降级（Graceful Degradation）
    • 优雅降级的理念与渐进增强相反。它是从一个功能齐全、具有高级特性（如复杂的 CSS 样式、大量的 JavaScript 交互）的网站开始构建，然后考虑当浏览器或设备不支持某些高级特性时，如何让网站 “优雅地” 降级，即仍然能够提供基本的、可接受的用户体验。
    • 用户体验优化在先，灵活性。

11. 什么是回流和重绘？

  • 回流（重排）Reflow
    • 浏览器重新计算页面中元素的几何属性（如位置，大小等）
      • 修改元素的尺寸、位置、边距、填充等属性.
      • 添加或删除可见的 DOM 元素.
      • 改变元素的字体大小.
      • 页面的尺寸变化（如窗口大小调整）.
      • 获取元素的几何属性（如 offsetWidth、offsetHeight 等）.
    • 比如排队前面的一个人走了，后面所有人都要向前走一步，或者有人插队，后面所有人都要向后退，这就是回流
  • 重绘 Repaint
    • 浏览器重新绘制元素的过程
      • image的宽高定了，只是换了src
      • 改变元素的颜色，边框等属性
      • 修改元素可见性（display:none改为block）
    • 比如排队有人替你占位置，你来了，替你的那个人走了，不影响到后面的人，这就是重绘
  • 优化策略
    • 使用虚拟DOM：现代化前端框架像 React、Vue.js 等都使用了虚拟 DOM 来优化 DOM 更新。当数据发生变化时，框架会先在虚拟 DOM 上进行操作，计算出新旧虚拟 DOM 的差异（这个过程称为 “diffing”），然后只将真正需要更新的部分应用到真实 DOM 上。这样可以避免不必要的 DOM 操作，从而减少回流和重绘。因为在虚拟 DOM 层面，可以高效地比较和计算出最小的更新范围，而不是像直接操作真实 DOM 那样，每次小的修改都可能引发大面积的布局重新计算和重绘。
    • 避免内联样式的频繁修改： 内联样式（通过style属性修改样式）会导致浏览器立即重新计算样式和布局。如果需要频繁地修改元素的样式，最好使用类名切换或者外部 CSS 样式表来控制样式变化。
    • 使用display:none代替visibility:hidden： 缺点：在合适的场景下才能用。
    • 脱离文档流（使用position:absolute或position:fixed）：需要谨慎使用，可能会带来布局上的复杂性。

12. iframe有哪些应用？如何处理iframe通信？

  • 应用
    • 最常见的一种微前端手段
    • 利用iframe开发低代码平台
    • 嵌入第三方内容（如广告，地图，AI助手等）
    • 跨域
  • 通信： window.postMessage方法

iframeA.html

<body>这是页面A<button onclick="onClick()">点击我</button><iframe id="iframe" src="./iframeB.html"></iframe><script>//向iframe发送消息const iframe = document.getElementById("iframe");function onClick() {iframe.contentWindow.postMessage("hello b页面", "*");}//监听iframe里的页面发出的消息window.addEventListener("message", (val) => {console.log("message", val);});</script></body>

iframeB.html

<body>这是页面B<button onclick="onClick()">点击我</button><script>//向父页面发送消息function onClick() {window.parent.postMessage("message", "*");}//接受父页面传来的消息window.addEventListener("message", (val) => {console.log("valll", val);});</script></body>

相关文章：

夯实前端基础之HTML篇

知识点概览 HTML部分 1. DOM和BOM有什么区别&#xff1f; DOM&#xff08;Document Object Model&#xff09; 当网页被加载时&#xff0c;浏览器会创建页面的对象文档模型&#xff0c;HTML DOM 模型被结构化为对象树 用途&#xff1a; 主要用于网页内容的动态修改和交互&…...

编程日记 2025/1/10 5:23:19

VVenC 编码器源码结构与接口函数介绍

VVenC VVenC&#xff08;Fraunhofer Versatile Video Encoder&#xff09;是由德国弗劳恩霍夫海因里希研究所&#xff08;Fraunhofer Heinrich Hertz Institute, HHI&#xff09;开发的一个开源的高效视频编码器。它实现了最新的视频编码标准——Versatile Video Coding (VVC)…...

编程日记 2025/1/10 5:17:13

【C++习题】20. 两个数组的交集

题目&#xff1a;349. 两个数组的交集 - 力扣&#xff08;LeetCode&#xff09; 链接&#x1f517;&#xff1a;349. 两个数组的交集 - 力扣&#xff08;LeetCode&#xff09; 题目&#xff1a; 代码&#xff1a; class Solution { public:// 函数功能&#xff1a;求两个数组…...

编程日记 2025/1/10 5:15:11

小R的蛋糕分享

小R的蛋糕分享 问题描述 小R手里有一个大小为 n 行 m 列的矩形蛋糕&#xff0c;每个小正方形区域都有一个代表美味度的整数。小R打算切割出一个正方形的小蛋糕给自己&#xff0c;而剩下的部分将给小S。她希望两人吃的部分的美味度之和尽量接近。 我们定义小R吃到的部分的美味度…...

编程日记 2025/1/10 5:09:06

基于Arduino的FPV头部追踪相机系统

构建FPV头部追踪相机&#xff1a;让你置身于遥控车辆之中&#xff01; 在遥控车辆和模型飞行器的世界中&#xff0c;第一人称视角&#xff08;FPV&#xff09;体验一直是爱好者们追求的目标。通过FPV头部追踪相机&#xff0c;你可以像坐在车辆或飞行器内部一样&#xff0c;自由…...

编程日记 2025/1/10 5:07:04

使用 PyTorch 自定义数据集并划分训练、验证与测试集

使用 PyTorch 自定义数据集并划分训练、验证与测试集 在图像分类等任务中&#xff0c;通常需要将原始训练数据进一步划分为训练集和验证集&#xff0c;以便在训练过程中评估模型的性能。下面将详细介绍如何组织数据与注释文件、如何分割训练集和验证集&#xff0c;以及如何基于…...

编程日记 2025/1/10 5:02:57

VSCode 插件

VSCode 插件 1. GitHub Copilot - AI 代码助手 功能&#xff1a;根据上下文提供实时代码补全&#xff0c;支持自然语言转代码&#xff0c;提供符合现代编程规范的建议。进阶技巧&#xff1a; 使用快捷键 Alt ] 切换多个建议。写注释时&#xff0c;描述业务逻辑而不是具体实现…...

编程日记 2025/1/10 4:58:52

Windows使用AutoHotKey解决鼠标键连击现象（解决鼠标连击、单击变双击的故障）

注&#xff1a;罗技鼠标&#xff0c;使用久了之后会出现连击现象&#xff0c;如果刚好过保了&#xff0c;可以考虑使用软件方案解决连击现象&#xff1a; 以下是示例AutoHotKey脚本&#xff0c;实现了调用XButton1用于关闭窗口&#xff08;以及WinW&#xff0c;XButton2也导向…...

编程日记 2025/1/10 4:55:50

Linux 环境（Ubuntu）部署 Hadoop 环境

前置准备 准备三台机器 cat /etc/hosts 192.168.1.7 hadoop-master 192.168.1.11 hadoop-slave01 192.168.1.12 hadoop-slave02Linux 环境 cat /etc/os-release PRETTY_NAME"Ubuntu 24.10" NAME"Ubuntu" VERSION_ID"24.10" VERSION"24.…...

编程日记 2025/1/10 4:54:49

如何在Windows 11 WSL2 Ubuntu 环境下安装和配置perf性能分析工具？

在Windows 11 WSL2 Ubuntu 环境下完整安装和配置perf性能分析工具 一、背景二、准备工作三、获取并编译Linux内核源码四、安装和配置perf五、测试perf六、总结 一、背景 由于WSL2使用的是微软定制的内核&#xff0c;并非标准的Ubuntu内核&#xff0c;因此直接使用apt安装linux…...

编程日记 2025/1/10 4:50:45

Docker运维高级容器技术知识点总结

1、虚拟机部署和容器化部署的区别是什么&#xff1f; 1、技术基础&#xff1a; <1>.虚拟化技术在物理硬件上创建虚拟机&#xff0c;每台虚拟机运行自己完整的操作系统、从而实现资源隔离。 <2>.容器化技术&#xff1a;将应用程序打包在容器内&#xff0c;在进程空间…...

编程日记 2025/1/10 4:46:41

react-quill 富文本组件编写和应用

index.tsx文件 import React, { useRef, useState } from react; import { Modal, Button } from antd; import RichEditor from ./RichEditor;const AnchorTouchHistory: React.FC () > {const editorRef useRef<any>(null);const [isModalVisible, setIsModalVis…...

编程日记 2025/1/10 4:43:36

LabVIEW轴承性能测试系统

本文介绍了基于LabVIEW的高效轴承性能测试系统的设计与开发。系统通过双端驱动技术实现高精度同步控制&#xff0c;针对轴承性能进行全面的测试与分析&#xff0c;以提高轴承的可靠性和寿命。 项目背景 随着工业自动化程度的提高&#xff0c;对轴承的性能要求越来越高。传统的…...

编程日记 2025/1/10 4:35:28

【《游戏编程模式》实战04】状态模式实现敌人AI

目录 1、状态模式 2、使用工具 3、状态模式适用范围 4、实现内容 5、代码及思路 Enemy.cs EnemyState.cs 6、unity里的设置 7、运行效果展示 1、状态模式 “允许一个对象在其内部状态改变时改变自身的行为。对象看起来好像是在修改自身类。” 就是一个对象能随着自己…...

编程日记 2025/1/10 4:34:27

借助免费GIS工具箱轻松实现las点云格式到3dtiles格式的转换

在当今数字化浪潮下&#xff0c;地理信息系统&#xff08;GIS&#xff09;技术日新月异&#xff0c;广泛渗透到城市规划、地质勘探、文化遗产保护等诸多领域。而 GISBox 作为一款功能强大且易用的 GIS 工具箱&#xff0c;以轻量级、免费使用、操作便捷等诸多优势&#xff0c;为…...

编程日记 2025/1/10 4:28:21

科研绘图系列：R语言科研绘图之标记热图（heatmap）

禁止商业或二改转载，仅供自学使用，侵权必究，如需截取部分内容请后台联系作者! 文章目录 介绍加载R包数据下载导入数据数据预处理画图系统信息参考介绍 科研绘图系列：R语言科研绘图之标记热图（heatmap） 加载R包 library(tidyverse) library(ggplot2) library(reshape)…...

编程日记 2025/1/10 4:27:20

【轻松学C：编程小白的大冒险】--- C语言简介 02

在编程的艺术世界里&#xff0c;代码和灵感需要寻找到最佳的交融点&#xff0c;才能打造出令人为之惊叹的作品。而在这座秋知叶i博客的殿堂里&#xff0c;我们将共同追寻这种完美结合&#xff0c;为未来的世界留下属于我们的独特印记。 【轻松学C&#xff1a;编程小白的大冒险】…...

编程日记 2025/1/10 4:22:16

《HeadFirst设计模式》笔记（上）

设计模式的目录&#xff1a; 1 设计模式介绍 要不断去学习如何利用其它开发人员的智慧与经验。学习前人的正统思想。 我们认为《Head First》的读者是一位学习者。 一些Head First的学习原则&#xff1a; 使其可视化将文字放在相关图形内部或附近&#xff0c;而不是放在底部…...

编程日记 2025/1/10 4:20:14

数据结构：ArrayList与顺序表

目录 &#x1f4d6;一、什么是List &#x1f4d6;二、线性表 &#x1f4d6;三、顺序表 &#x1f42c;1、display()方法 &#x1f42c;2、add(int data)方法 &#x1f42c;3、add(int pos, int data)方法 &#x1f42c;4、contains(int toFind)方法 &#x1f42c;5、inde…...

编程日记 2025/1/10 4:17:12

SpringBoot之核心配置

学习目标&#xff1a; 1.熟悉Spring Boot全局配置文件的使用 2.掌握Spring Boot配置文件属性值注入 3.熟悉Spring Boot自定义配置 4.掌握Profile多环境配置 5.了解随机值设置以及参数间引用 1.全局配置文件 Spring Boot使用 application.properties 或者application.yaml 的文…...

编程日记 2025/1/10 4:14:10

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用&#xff0c;操作系统&#xff1a;Ubuntu24.04&#xff0c;Neofj版本&#xff1a;2025.04.0。 Apt安装 Neofj可以进行官网安装&#xff1a;Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...

编程新知 2025/11/9 6:34:57

在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能

下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能&#xff0c;包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...

编程新知 2025/10/16 23:00:32

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…...

编程新知 2025/11/9 4:34:25

23-Oracle 23 ai 区块链表（Blockchain Table）

小伙伴有没有在金融强合规的领域中遇见&#xff0c;必须要保持数据不可变&#xff0c;管理员都无法修改和留痕的要求。比如医疗的电子病历中&#xff0c;影像检查检验结果不可篡改行的&#xff0c;药品追溯过程中数据只可插入无法删除的特性需求&#xff1b;登录日志、修改日志…...

编程新知 2025/11/10 4:41:42

c++ 面试题(1)-----深度优先搜索（DFS）实现

操作系统&#xff1a;ubuntu22.04 IDE:Visual Studio Code 编程语言&#xff1a;C11 题目描述 地上有一个 m 行 n 列的方格&#xff0c;从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子&#xff0c;但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...

编程新知 2025/11/5 20:18:24

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器&#xff0c;其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机&#xff08;Virtual Host&#xff09;。 1. 简介 Nginx 使用 server_name 指令来确定…...

编程新知 2025/9/6 16:47:17

C# 类和继承(抽象类)

抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...

编程新知 2025/11/10 12:21:43

MySQL用户和授权

开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务&#xff1a; test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...

编程新知 2025/8/25 19:12:45

2023赣州旅游投资集团

单选题 1.“不登高山&#xff0c;不知天之高也&#xff1b;不临深溪&#xff0c;不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...

编程新知 2025/11/8 16:42:13

laravel8+vue3.0+element-plus搭建方法

创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...

编程新知 2025/10/15 0:25:46