网站过场动画成都网站建设冠辰

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

网站过场动画,成都网站建设冠辰,外贸网站搭建,政务网站开发理念以下是对这些 HTML 面试问题的详细解答#xff1a; 1. HTML 的 src 和 href 属性有什么区别? src (Source) 属性#xff1a; 用于嵌入资源#xff0c;例如图像、脚本或 iframe。加载资源时#xff0c;当前页面的加载会暂停#xff0c;直到资源加载完成。常用于 img 1. HTML 的 src 和 href 属性有什么区别? src (Source) 属性 用于嵌入资源例如图像、脚本或 iframe。加载资源时当前页面的加载会暂停直到资源加载完成。常用于 img、script 和 iframe 标签。例子img srcimage.jpg alt图片 script srcscript.js/scripthref (Hypertext Reference) 属性 用于建立超链接指向外部资源或内部的网页。不会暂停页面加载用户可以点击链接跳转。常用于 a、link 和 area 标签。例子a hrefhttps://example.com访问示例网站/a link hrefstyles.css relstylesheet2. 什么是 HTML 语义化? HTML 语义化是指通过使用具有明确含义的标签使 HTML 结构具有更好的可读性和意义。 优点 提高可读性开发者和浏览器可以更轻松理解文档结构。增强 SEO语义化标签帮助搜索引擎更好地索引页面内容。增强可访问性辅助工具如屏幕阅读器可以更好地解释页面内容。 常见语义化标签 header、footer、article、section定义页面结构。nav定义导航。aside定义侧边内容。figure 和 figcaption定义图像及其说明。 3. DOCTYPE(文档类型)的作用是什么? 定义 DOCTYPE 声明用于告诉浏览器当前 HTML 文档的标准。作用 让浏览器以标准模式Standard Mode渲染页面。避免浏览器进入怪异模式Quirks Mode导致布局和样式出现问题。 HTML5 DOCTYPE 示例!DOCTYPE html4. HTML 的 script 标签中 defer 和 async 有什么区别? defer 脚本异步加载并在 HTML 解析完成后按顺序执行。适合依赖 HTML 结构的脚本。示例script srcscript.js defer/scriptasync 脚本异步加载加载完成后立即执行可能在 HTML 未解析完成时执行。适合独立的脚本如广告或分析工具。示例script srcscript.js async/script区别总结 defer 保证脚本按顺序执行适用于多个依赖的脚本。async 脚本独立加载和执行更快。 5. 常用的 HTML meta 标签有哪些? meta 标签用于定义页面的元信息常用的有 字符编码meta charsetUTF-8视口设置适配移动端meta nameviewport contentwidthdevice-width, initial-scale1.0描述meta namedescription content页面的描述内容关键字meta namekeywords contentHTML, CSS, JavaScript作者信息meta nameauthor content作者名字防止搜索引擎索引meta namerobots contentnoindex, nofollow6. HTML5 相比于 HTML有哪些更新? 新增语义化标签 如header、footer、article、section、nav。 新增表单功能 增加了新的输入类型email、url、date、number 等。表单属性required、placeholder、pattern。 支持多媒体 新增 audio 和 video 标签。 新增 API 地理位置Geolocation API本地存储localStorage 和 sessionStorage拖放Drag and Drop API画布canvas 标签。 废弃元素 移除了 center、font 等。 7. HTML 中img 标签 srcset 属性的作用是什么? 作用 提供一组图像 URL 和其对应的显示条件允许浏览器根据设备像素密度或屏幕宽度选择最合适的图像。示例img srcdefault.jpg srcsetsmall.jpg 480w, medium.jpg 1024w sizes(max-width: 600px) 480px, 1024px alt图片浏览器会根据视口大小和分辨率选择合适的图像。480w 表示图像宽度为 480 像素。 8. HTML 行内元素有哪些?块级元素有哪些?空 (void) 元素有哪些? 行内元素 不占据独立一行内容按行排列。常见a、span、img、strong、em、label。 块级元素 独占一行通常是容器。常见div、p、h1~h6、section、article、ul、li。 空元素 没有闭合标签只有单个标签。常见img、input、br、hr、meta。 9. HTML 中title 与 h1 标签的区别是什么? title 标签 定义网页的标题显示在浏览器标签栏。对 SEO 友好用于搜索引擎结果的标题。示例title我的网页标题/titleh1 标签 表示页面的主要标题。用于内容层次结构通常一个页面只有一个 h1。示例h1欢迎来到我的网站/h110. Canvas 和 SVG 有什么区别? Canvas 基于像素的绘图。提供动态绘制能力但不易修改内容。使用 JavaScript 绘制适合实时动画和复杂图像处理。示例canvas idmyCanvas width200 height100/canvas scriptconst canvas document.getElementById(myCanvas);const ctx canvas.getContext(2d);ctx.fillStyle red;ctx.fillRect(0, 0, 150, 75); /scriptSVG 基于 XML 的矢量图形。内容可以通过 DOM 轻松修改和操作。适合静态图形或需要高分辨率的图形。示例svg width100 height100circle cx50 cy50 r40 fillblue / /svg区别总结 Canvas 注重像素适合动画SVG 注重结构适合静态矢量图形。 如果需要进一步展开或补充某些问题可以继续探讨 以下是对这些 CSS 和 JavaScript 面试问题的详细解答 1. 有哪些 CSS 选择器? 请分别介绍 CSS 选择器用于选择 HTML 元素以应用样式。常见选择器有 通配符选择器 () 选择所有元素。示例 {margin: 0;padding: 0; }类型选择器 选择特定标签的元素。示例p {color: blue; }类选择器 (.) 选择特定类的元素。示例.classname {font-size: 14px; }ID 选择器 (#) 选择特定 ID 的元素。示例#idname {background-color: yellow; }属性选择器 根据属性值选择元素。示例input[typetext] {border: 1px solid gray; }后代选择器 (A B) 选择 B 元素前提是它是 A 元素的后代。示例div p {color: green; }子选择器 (A B) 选择 A 元素的直接子元素 B。示例ul li {list-style: none; }相邻兄弟选择器 (A B) 选择紧接在 A 后面的 B 元素。示例h1 p {font-size: 12px; }通用兄弟选择器 (A ~ B) 选择与 A 同级的所有 B 元素。示例h1 ~ p {color: gray; }伪类选择器 选择元素的特定状态。示例a:hover {text-decoration: underline; }伪元素选择器 选择元素的特定部分。示例p::first-line {font-weight: bold; }2. 如何计算 CSS 的优先级? CSS 优先级是用数字计算的规则如下 行内样式1000ID 选择器100类选择器、伪类、属性选择器10标签选择器、伪元素1通配符、继承、默认样式0 计算优先级的示例 /* 优先级为10 (类选择器) / .class {color: red; }/ 优先级为100 (ID 选择器) / #id {color: blue; }/ 优先级为101 (ID 标签选择器) */ #id p {color: green; }规则 优先级高的样式覆盖优先级低的。同优先级时后出现的覆盖前面的。 3. CSS 中可继承与不可继承属性有哪些? 可继承属性 文本相关属性 colorfont 系列font-family、font-size、font-style 等。visibilityletter-spacing、word-spacing。 默认行为通过继承从父级传递到子级。 不可继承属性 盒模型相关属性 marginpaddingborderwidth、heightbox-shadow 布局相关属性 displaypositionz-indexoverflow 强制继承 对于不可继承属性可以通过 inherit 强制继承div {width: inherit; }4. CSS 中 display 属性的值及其作用 display 属性决定元素的显示方式。常见值 block 块级元素独占一行。示例div {display: block; }inline 行内元素与其他元素共享一行。示例span {display: inline; }inline-block 具有行内特性但可以设置宽高。示例img {display: inline-block; }none 隐藏元素不占据空间。示例p {display: none; }flex 设为弹性布局容器。示例div {display: flex; }grid 设为网格布局容器。示例div {display: grid; }5. 使用 link 和 import 引用 CSS 的区别 link 标签 在 HTML 文件中引入 CSS 文件。优点支持并行加载适合现代浏览器。示例link relstylesheet hrefstyle.cssimport 规则 在 CSS 文件中导入另一个 CSS 文件。缺点浏览器需要解析 CSS 文件后再加载导入的文件加载速度较慢。示例import url(style.css);6. JavaScript 有哪些数据类型? 它们的区别是什么? 基本数据类型 (Primitive Types) string、number、bigint、boolean、undefined、symbol、null。特点不可变、存储在栈中。 引用数据类型 (Reference Types) object (包括数组、函数等)。特点可变、存储在堆中。 7. 如何判断 JavaScript 变量是数组? Array.isArray() (推荐) Array.isArray([1, 2, 3]); // trueinstanceof [1, 2, 3] instanceof Array; // trueObject.prototype.toString Object.prototype.toString.call([1, 2, 3]); // [object Array]8. JavaScript 中 null 和 undefined 的区别是什么? null 表示一个空的或无效的对象引用。需要手动赋值let value null;undefined 表示变量未初始化或不存在。系统自动赋值let value; // 默认是 undefined9. typeof null 的结果是什么? 为什么? 结果typeof null; // object原因 这是 JavaScript 的一个历史遗留问题null 最初被设计为对象的特殊值因此 typeof null 返回 object。 10. typeof 和 instanceof 有什么区别? typeof 检测变量的数据类型。适合检查基本数据类型。示例typeof 42; // numberinstanceof 检测对象是否是某个构造函数的实例。示例[] instanceof Array; // true总结 typeof 主要用于基础类型判断。instanceof 用于引用类型判断尤其是继承关系的判断。以下是对这些 JavaScript 面试问题的详细解答 1. 为什么 JavaScript 中 0.1 0.2 ! 0.3如何让其相等? 原因 JavaScript 使用 IEEE 754 双精度浮点数来表示数字这种表示方式无法精确存储某些小数例如 0.1 和 0.2。计算过程中的精度损失导致0.1 0.2; // 0.30000000000000004解决方法 使用 toFixed() 或 toPrecision() 将结果四舍五入到指定的小数位数。 (0.1 0.2).toFixed(1); // 0.3使用乘除法避免小数计算 先将数字放大为整数计算再缩小。 (0.1 * 10 0.2 * 10) / 10 0.3; // true使用 EPSILON 判断 JavaScript 提供 Number.EPSILON 表示最小可区分值。 Math.abs(0.1 0.2 - 0.3) Number.EPSILON; // true2. 说说你对 fetch 的理解它有哪些优点和不足? fetch 是什么? fetch 是现代浏览器提供的原生 API用于发起 HTTP 请求返回一个基于 Promise 的结果。 优点 语法简单 使用 Promise代码更清晰。 fetch(url).then(response response.json()).then(data console.log(data)).catch(error console.error(error));原生支持 内置支持不需要额外的库。 可扩展性 支持各种 HTTP 方法、头部设置、跨域请求等。 流式响应 支持 ReadableStream适合处理大文件。
不足 不支持超时控制 需要手动实现超时逻辑。 const controller new AbortController(); setTimeout(() controller.abort(), 5000); // 超时 5 秒 fetch(url, { signal: controller.signal });错误处理复杂 fetch 仅在网络错误时抛出异常HTTP 状态码错误如 404、500不会自动触发 catch。 fetch(url).then(response {if (!response.ok) {throw new Error(HTTP error response.status);}return response.json();});浏览器兼容性 IE 不支持需要 polyfill。 3. JavaScript 中 Object.keys 的返回值是无序的吗? 是否有序 根据规范 如果对象的属性是数字键索引Object.keys 返回的数组按 升序 排列。其他非数字键的属性按 插入顺序 返回。 示例const obj { 1: one, 3: three, 2: two, a: A, b: B }; console.log(Object.keys(obj)); // [1, 2, 3, a, b]4. JavaScript 的 BigInt 和 Number 类型有什么区别? 区别 表示范围 Number安全整数范围为 -2^53 ~ 2^53由 Number.MAX_SAFE_INTEGER 定义。BigInt支持任意大小的整数。 操作 BigInt 无法与 Number 混合运算。 1n 2; // TypeError 1n BigInt(2); // 3n精度 Number 是浮点类型可能有精度损失。BigInt 精确表示整数。 性能 BigInt 操作效率较低。
示例 console.log(Number.MAX_SAFE_INTEGER); // 9007199254740991 console.log(9007199254740991 1); // 9007199254740992 (精度丢失) console.log(9007199254740991n 1n); // 9007199254740992n (精确)5. 什么是 JavaScript 的尾调用? 使用尾调用有什么好处? 尾调用 尾调用是指一个函数的最后一步调用另一个函数。尾调用条件 调用是函数的最后一步。返回调用的结果。
好处 减少内存占用 避免多余的调用栈帧提升性能。对递归函数尤为重要即尾递归优化。
示例 普通递归会累积调用栈 function factorial(n) {if (n 1) return 1;return n * factorial(n - 1); // 不是尾调用 }尾递归优化调用栈 function factorial(n, acc 1) {if (n 1) return acc;return factorial(n - 1, acc * n); // 尾调用 }6. 使用 let 全局声明变量能通过 window 对象取到吗? 答案不能。 原因 使用 let 或 const 声明的全局变量不会成为 window 对象的属性。示例let x 10; console.log(window.x); // undefined对比 使用 var 声明的全局变量会成为 window 对象的属性。 var y 20; console.log(window.y); // 207. let、const 和 var 的区别是什么?

1. var 作用域 函数作用域。变量提升 会提升至作用域顶部默认值为 undefined。可重复声明 可以在同一作用域内多次声明。
2. let 作用域 块作用域。变量提升 也会提升但在提升前无法访问称为“暂时性死区”。不可重复声明 同一作用域内不允许重复声明。
3. const 作用域 块作用域。常量 声明时必须初始化值不能重新赋值对象属性可以修改。不可重复声明 同一作用域内不允许重复声明。 8. 说说你对 JS 作用域的理解?
4. 什么是作用域? 作用域是指代码中变量、函数或对象的可访问范围。
5. 分类 全局作用域 定义在任何函数或块外的变量具有全局可访问性。示例var globalVar I am global;函数作用域 使用 var 声明的变量在函数内部是局部的。示例function scopeTest() {var localVar I am local;console.log(localVar); }块作用域 使用 let 或 const 声明的变量只能在声明的块中访问。示例if (true) {let blockVar I am block scoped;console.log(blockVar); }3. 闭包与作用域 闭包是函数能够“记住”并访问其定义时的作用域。示例function outer() {let outerVar I am outer;return function inner() {console.log(outerVar); // 闭包访问}; } const fn outer(); fn(); // I am outer1. ES6 箭头函数和普通函数有什么区别?
   1.1 语法上的区别 箭头函数更简洁不需要 function 关键字// 普通函数 function sum(a, b) {return a b; }// 箭头函数 const sum (a, b) a b;1.2 特性上的区别 this 绑定规则 箭头函数没有自己的 this会捕获其定义时的上下文 this。普通函数的 this 根据调用方式动态绑定。 const obj {value: 10,arrowFunc: () this.value, // 捕获定义时的上下文normalFunc() {return this.value; // 根据调用时绑定}, };console.log(obj.arrowFunc()); // undefined (指向全局或模块的 this) console.log(obj.normalFunc()); // 10arguments 对象 箭头函数没有 arguments 对象可以通过剩余参数代替。普通函数有 arguments可以访问函数的实际参数。 const arrowFunc () console.log(arguments); // Error function normalFunc() {console.log(arguments); // 可用 }作为方法或事件处理函数 箭头函数的 this 不会改变适合绑定事件。普通函数会动态绑定可能需要手动处理 this。 const obj {value: 42,handler: () console.log(this.value), // 指向全局或模块 }; document.body.addEventListener(click, obj.handler);是否可作为构造函数 箭头函数不能作为构造函数。普通函数可以通过 new 操作符生成实例。 2. ES6 箭头函数能当构造函数吗? 答案不能。 箭头函数没有 [[Construct]] 内部方法无法用 new 操作符调用。示例const Arrow () {}; const obj new Arrow(); // TypeError: Arrow is not a constructor3. ES6 有哪些新特性? 变量声明let 和 const 块作用域避免变量提升。示例let a 10; const b 20;箭头函数 简洁语法自动绑定 this。示例const add (a, b) a b;模板字符串 支持多行和嵌入表达式。示例const greeting Hello, \({name};解构赋值 解构对象和数组。示例const [a, b] [1, 2]; const { x, y } { x: 3, y: 4 };展开运算符 ... 用于复制、合并或解构。示例const arr [...arr1, ...arr2];默认参数 函数参数支持默认值。示例const greet (name Guest) Hello, \){name};类和继承 新增 class 和 extends。示例class Person {constructor(name) {this.name name;} } class Student extends Person {constructor(name, grade) {super(name);this.grade grade;} }模块化 使用 import 和 export。示例import { foo } from ./module.js; export const bar 42;Promise 用于异步编程。示例const promise new Promise((resolve, reject) {resolve(Success); });Symbol 和 Map/Set 新的数据类型和数据结构。示例const sym Symbol(id); const map new Map();4. TypeScript 有哪些常用类型? 基本类型 string, number, boolean, null, undefined, any, void, never. 数组类型 number[] 或 Arraynumber。示例const nums: number[] [1, 2, 3];元组类型 固定长度、已知类型的数组。示例const tuple: [number, string] [42, Hello];枚举类型 定义一组命名常量。示例enum Direction {Up,Down,Left,Right, }对象类型 定义对象结构。示例interface Person {name: string;age: number; }联合类型 变量可为多种类型之一。示例let value: string | number;类型别名 定义自定义类型。示例type ID string | number;5. 什么是 TypeScript 的对象类型? 怎么定义对象类型? 对象类型定义 在 TypeScript 中对象类型是描述对象结构的类型。可以使用 interface 或 type 定义对象类型。 定义方式 使用接口 (interface) interface Person {name: string;age: number; }const user: Person {name: Alice,age: 25, };使用类型别名 (type) type Person {name: string;age: number; };const user: Person {name: Bob,age: 30, };嵌套对象类型 interface Address {city: string;zipCode: number; }interface Person {name: string;address: Address; }const user: Person {name: Charlie,address: {city: New York,zipCode: 10001,}, };可选属性和只读属性 interface Person {name: string;age?: number; // 可选readonly id: string; // 只读 }const user: Person {name: Diana,id: 12345, };// user.id 54321; // Error: Cannot assign to id because it is a read-only property