Essential Front-End Interview Q&A: HTML, CSS, JavaScript & More

HTML & CSS

img的alt和title的异同？

alt is the fallback text shown when an image fails to load; title appears as a tooltip on hover and provides additional description. alt is required for SEO, while title is optional.

简述一下src与href的区别

href points to a network resource and creates a hyperlink; src points to an external resource that is embedded in the document (e.g., scripts, images, frames) and is fetched before the page continues rendering.

html5新元素？

HTML5 introduces new elements such as <canvas>, <video>, <audio>, offline storage support, semantic tags like <article>, <footer>, <header>, <nav>, <section>, and new form controls (calendar, date, time, email, url, search).

CSS层叠是什么？介绍一下

Cascading means that styles are applied from outer to inner elements; later declarations override earlier ones, and inner elements take precedence over outer ones when conflicts arise.

CSS实现垂直和水平居中

One classic method uses absolute positioning: left:50%; margin-left:-width/2; for horizontal centering and top:50%; margin-top:-height/2; for vertical centering.

CSS code example (image omitted for brevity).

什么是CSS Hack?

CSS hacks are techniques that write different CSS rules for different browsers to address compatibility issues.

你知道哪些CSS浏览器兼容性问题。

Various compatibility problems exist; solutions often involve vendor prefixes, feature queries, or fallback styles.

px和em的区别

px

is an absolute unit (fixed size). em is relative to the current element’s font size, scaling with parent or root font size (default 16 px in browsers).

HTML5离线存储

localStorage

persists data across browser sessions; sessionStorage is cleared when the browser tab is closed.

说说你对语义化的理解

Semantic markup improves structure when styles are removed, aids SEO, assists assistive technologies, and makes code more maintainable.

描述一段语义的HTML代码

HTML5 semantic tags such as <article>, <nav>, <header>, and <footer> illustrate this principle.

如何居中div？

Set a width and apply margin:0 auto; (e.g., div{width:200px; margin:0 auto;}).

列出display的值，说明他们的作用。position的值，relative和absolute定位原点是？

Display values: block , none , inline-block , list-item . Position values: static (default), relative (offset from original position), absolute (offset from nearest positioned ancestor), fixed (offset from viewport).

对BFC规范的理解

Block Formatting Context (BFC) creates an isolated layout region where child elements do not affect outside elements; margins of adjacent blocks inside the same BFC may collapse.

描述CSS Reset的作用和用途。

CSS Reset removes default browser styles to achieve a consistent baseline across browsers.

CSS定义的权重

Specificity hierarchy: inline styles > IDs > classes/attributes > elements. Avoid overusing high specificity to keep CSS maintainable.

CSS定位方式有哪些?position属性的值有哪些?他们之间的区别是什么?

Position values: static , relative , absolute , fixed . Differences lie in whether the element participates in normal flow and which ancestor they are positioned against.

CSS中margin和padding的区别

margin

is the outer spacing that can collapse with adjacent margins; padding is inner spacing that never collapses.

使用CSS预处理器吗？喜欢哪个？

CSS preprocessors (e.g., Sass, Less) add variables, nesting, and functions to CSS; choice depends on project needs.

JavaScript

JS的基本数据类型

Number, String, Boolean, Object, Undefined.

JavaScript中如何检测一个变量是一个String类型？请写出函数实现

Use typeof variable === 'string' or

Object.prototype.toString.call(variable) === '[object String]'

.

JavaScript的DOM是什么意思?

The Document Object Model is a language‑independent interface that represents the page structure, allowing scripts to read and modify content and styles.

如何显示/隐藏一个DOM元素

Set style.display='none' to hide, or style.display='block' (or appropriate value) to show; alternatives include visibility:hidden or opacity.

JavaScript的节点是什么意思?

All parts of an HTML document are nodes: document node, element nodes, text nodes, attribute nodes, and comment nodes.

javascript对象的几种创建方式

Factory, constructor, prototype, combination, dynamic prototype, parasitic constructor, and safe constructor patterns.

javascript继承的6种方法

Prototype chain, constructor borrowing, combination inheritance, prototypal inheritance, parasitic inheritance, and parasitic combination inheritance.

NaN 是什么鬼？typeof 的结果是？如果一个变量的值是 NaN，怎么确定？

NaN stands for “Not a Number”. typeof NaN returns number. To test for NaN, use Number.isNaN(value) or value !== value.

怎样添加、移除、移动、复制、创建和查找节点？

Creation: createDocumentFragment(), createElement(), createTextNode(). Manipulation: appendChild(), removeChild(), replaceChild(), insertBefore(). Search: getElementsByTagName(), getElementsByName(), getElementById().

documentload和documentready的区别

load

fires after all resources (images, CSS, scripts) are loaded; $(document).ready() fires when the DOM is ready, before images and other external resources.

事件绑定的几种方法？

1) Inline onclick attribute. 2) Assigning to element.onclick. 3) addEventListener('click', handler).

事件冒泡？

Event bubbling is the propagation of an event from the target element up through its ancestors.

在Javascript中什么是伪数组？如何将伪数组转化为标准数组？

Pseudo‑arrays (e.g., arguments, NodeList) lack array methods. Convert with Array.prototype.slice.call(pseudoArray) or Array.from(pseudoArray).

常用JS框架都有什么？

Popular front‑end frameworks include jQuery, Angular, React, Vue, etc.

Javascript中callee和caller的作用？

caller

references the function that invoked the current function; callee references the currently executing function.

数组方法pop() push() unshift() shift()

push()

adds to the end, pop() removes from the end, unshift() adds to the beginning, shift() removes from the beginning.

为什么要用IIFE

Immediately‑Invoked Function Expressions create a private scope, avoiding global variable pollution and enabling modular code.

严格模式下进行 Javascript 开发有啥好处？

Strict mode catches common errors, disables unsafe features, and makes code run faster.

Node.js的适用场景

High‑concurrency applications such as chat, real‑time messaging, and streaming.

描述一下cookies

Cookies are small pieces of data stored by the browser; JavaScript can read, write, and delete them via document.cookie.

事件是？IE与火狐的事件机制有什么区别？ 如何阻止冒泡？

Events are actions that can be listened to. IE uses event bubbling, Firefox supports both bubbling and capturing. Use event.stopPropagation() to stop bubbling.

如何判断一个对象是否属于某个类

Use the instanceof operator (e.g., if (obj instanceof Person) { … }).

Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？

hasOwnProperty

checks only the object's own properties.

js延迟加载的方式有哪些？

Use defer, async, dynamic script insertion, or load scripts on demand.

javascript的本地对象，内置对象和宿主对象

Native objects (e.g., Array, Object), built‑in objects (e.g., Math, JSON), and host objects (e.g., window, document).

手写数组快速排序

Quicksort selects a pivot, partitions elements less/greater than the pivot, and recursively sorts the partitions.

统计字符串”aaaabbbccccddfgh”中字母个数或统计最多字母数。

Iterate over the string, count occurrences of each character, and track the maximum count.

写一个function，清除字符串前后的空格。（兼容所有浏览器）

Use function trim(str) { return str.replace(/^\s+|\s+$/g, ''); }.

如何制作一个combo选项

Overlay an <input> on a <select>, sync the input value on change event, allowing both manual entry and selection.

Other Topics

一次完整的HTTP事务是怎样的一个过程？

Domain resolution → TCP three‑way handshake → HTTP request → Server response → Browser parses HTML and fetches resources → Rendering.

Jquery与jQuery UI 有啥区别？

jQuery is a core library for DOM manipulation, events, and AJAX; jQuery UI builds on jQuery to provide UI widgets like dialogs, draggable elements, and resizable components.

如何判断当前脚本运行在浏览器还是node环境中？（阿里）

Check if the global object is window; if not, the script is running in Node.

你所了解到的web攻击技术

Common attacks: XSS (Cross‑Site Scripting), SQL injection, CSRF (Cross‑Site Request Forgery).

java的三大框架是什么,功能各是什么

Struts (MVC web framework), Hibernate (ORM for database persistence), Spring (dependency injection and bean management).

Jquery是什么？

jQuery is a lightweight JavaScript library that simplifies DOM traversal, event handling, animation, and AJAX.

你知道哪些关于ES6新增的东西

ES6 adds let/const, arrow functions, classes, modules, promises, template literals, spread/rest operators, and more.

如何控制网页在网络传输过程中的数据量?

Enable GZIP compression, remove unnecessary code, and avoid duplicate resources.

Flash、Ajax各自的优缺点，在使用中如何取舍？

Flash provides rich animation but requires a plugin; Ajax improves page speed and UX but is more complex and less secure. Use HTML/CSS for static content, Ajax for dynamic interactions, and Flash only when necessary.

常使用的库有哪些?常用的前端开发工具?开发过什么应用或组件?

Common library: jQuery. Tools: Firebug, Photoshop, EditPlus, color pickers, Eclipse.

说说YSlow

YSlow is a Firefox/Firebug plugin that analyzes page performance and suggests optimizations.

是否了解flex布局？

Flexbox provides a flexible layout model with properties like display:flex, justify-content, and align-items.

是否了解webpack

Webpack is a module bundler that processes assets and dependencies for modern web applications.

webSocket如何兼容低浏览器？

Fallbacks include Flash sockets, ActiveX HTMLFile (IE), multipart XHR, and long‑polling XHR.

简述同步和异步的区别

Synchronous code blocks execution until a task completes; asynchronous code allows other operations to continue while waiting for a task.

异步ajax的优缺点都有什么？

Advantages: non‑blocking UI, better user experience, saves bandwidth. Disadvantages: back button may not work, harder to manage multiple concurrent requests, less SEO‑friendly, potential data‑security concerns.

如何提高网页运行性能？

Optimize assets, enable compression, minimize DOM reflows, use caching, and defer non‑critical scripts.

对前端工程师这个职位你是怎么样理解的？

A front‑end engineer bridges design and functionality, delivering pixel‑perfect, performant, and maintainable interfaces while collaborating with designers, product managers, and back‑end teams.

最后分享一些大神建议的学习方法

Combine video tutorials with hands‑on coding, read foundational books (e.g., "DOM Programming Art", "JavaScript: The Good Parts"), and continuously explore new frameworks and best practices.