HTML5 引入了许多新特性，主要包括：
<header>、<footer>、<article>、<section> 等，使得页面结构更加清晰。<input> 类型如 email、url、date 等，以及 placeholder、required 等属性。<audio> 和 <video> 标签，使得在网页中嵌入音频和视频更加方便。<canvas> 标签用于绘制图形，以及 <svg> 标签用于矢量图形。localStorage 和 sessionStorage，用于在客户端存储数据。语义化标签是指使用具有明确含义的 HTML 标签来描述页面内容的结构。例如，使用 <header> 表示页面的头部，使用 <footer> 表示页面的底部。
为什么要使用语义化标签？
<meta> 标签有哪些常见用途？<meta> 标签用于提供页面的元数据，常见的用途包括：
<meta charset="UTF-8"> 指定页面的字符编码。<meta name="viewport" content="width=device-width, initial-scale=1.0"> 用于移动端页面适配。<meta name="description" content="页面描述"> 提供页面的简短描述。<meta name="keywords" content="关键词1, 关键词2"> 提供页面的关键词，有助于 SEO。<meta name="author" content="作者名"> 提供页面的作者信息。<script> 标签的 async 和 defer 属性有什么区别？<script> 标签的 async 和 defer 属性都用于控制脚本的加载和执行顺序，但它们的行为有所不同：
async：脚本会异步加载，加载完成后立即执行。多个 async 脚本的执行顺序不确定。defer：脚本会异步加载，但会在文档解析完成后按照顺序执行。使用场景：
async：适用于不依赖其他脚本的独立脚本，如广告、统计代码等。defer：适用于需要按顺序执行的脚本，如依赖其他脚本的库。<iframe> 标签有什么作用？如何使用？<iframe> 标签用于在页面中嵌入另一个 HTML 页面。常见的用途包括嵌入地图、视频、广告等。
基本用法：
<iframe src="https://www.example.com" width="600" height="400"></iframe>
常用属性：
src：指定嵌入页面的 URL。width 和 height：指定嵌入页面的宽度和高度。frameborder：指定是否显示边框，通常设置为 0 以去除边框。sandbox：用于限制嵌入页面的行为，如禁止脚本执行、表单提交等。<canvas> 和 <svg> 有什么区别？<canvas> 和 <svg> 都用于在网页中绘制图形，但它们的工作原理和适用场景有所不同：
<canvas>：
<svg>：
<form> 标签有哪些常用属性？<form> 标签用于创建表单，常见的属性包括：
action：指定表单提交的 URL。method：指定表单提交的 HTTP 方法，如 GET 或 POST。enctype：指定表单数据的编码类型，如 application/x-www-form-urlencoded（默认）、multipart/form-data（文件上传）等。target：指定表单提交后响应的显示位置，如 _blank（新窗口）、_self（当前窗口）等。autocomplete：指定是否启用表单的自动填充功能。<input> 标签有哪些常用类型？<input> 标签用于创建各种输入控件，常见的类型包括：
text：单行文本输入框。password：密码输入框。email：电子邮件输入框。url：URL 输入框。number：数字输入框。date：日期选择器。checkbox：复选框。radio：单选框。file：文件上传控件。submit：提交按钮。reset：重置按钮。button：普通按钮。<label> 标签有什么作用？<label> 标签用于为表单控件添加标签，提升用户体验和可访问性。通过 for 属性将 <label> 与对应的表单控件关联起来，点击标签时可以聚焦到对应的控件。
示例：
<label for="username">用户名：</label>
<input type="text" id="username" name="username">
<table> 标签有哪些常用子标签？<table> 标签用于创建表格，常见的子标签包括：
<thead>：表头部分。<tbody>：表体部分。<tfoot>：表尾部分。<tr>：表格行。<th>：表头单元格。<td>：表格单元格。示例：
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
</tr>
</tbody>
</table>
CSS 盒模型是用于描述元素在页面中占据空间的模型，包括内容区域、内边距、边框和外边距。
标准盒模型（W3C 盒模型）：
- 元素的宽度和高度只包括内容区域，不包括内边距、边框和外边距。
- 计算公式：width = content width
IE 盒模型（怪异盒模型）：
- 元素的宽度和高度包括内容区域、内边距和边框，但不包括外边距。
- 计算公式：width = content width + padding + border
如何切换盒模型：
/* 标准盒模型 */
box-sizing: content-box;
/* IE 盒模型 */
box-sizing: border-box;
position 属性有哪些值？它们有什么区别？position 属性用于指定元素的定位方式，常见的值包括：
static：默认值，元素按照正常的文档流进行布局。relative：相对定位，元素相对于其正常位置进行偏移。absolute：绝对定位，元素相对于最近的已定位祖先元素进行定位。fixed：固定定位，元素相对于浏览器窗口进行定位，不随页面滚动而移动。sticky：粘性定位，元素在滚动到特定位置时变为固定定位。display 属性有哪些常用值？它们有什么区别？display 属性用于指定元素的显示方式，常见的值包括：
block：块级元素，独占一行，可以设置宽度和高度。inline：行内元素，不独占一行，不能设置宽度和高度。inline-block：行内块元素，不独占一行，但可以设置宽度和高度。none：元素不显示，且不占据空间。flex：弹性盒子布局，用于创建灵活的布局。grid：网格布局，用于创建复杂的网格布局。float 属性有什么作用？如何清除浮动？float 属性用于使元素浮动在页面的左侧或右侧，常用于实现文字环绕图片的效果。
清除浮动的方法：
clear 属性：在浮动元素后面添加一个空元素，并设置 clear: both;。overflow 属性：在父元素上设置 overflow: hidden; 或 overflow: auto;。::after 伪元素清除浮动。.clearfix::after {
content: "";
display: block;
clear: both;
}
flexbox 布局有哪些常用属性？flexbox 是一种弹性盒子布局模型，常用的属性包括：
display: flex;：将容器设置为弹性盒子布局。flex-direction：指定主轴的方向，如 row（水平）、column（垂直）。justify-content：指定主轴上的对齐方式，如 flex-start、center、space-between。align-items：指定交叉轴上的对齐方式，如 flex-start、center、stretch。flex-wrap：指定是否换行，如 nowrap（不换行）、wrap（换行）。align-content：指定多行内容在交叉轴上的对齐方式。grid 布局有哪些常用属性？grid 是一种网格布局模型，常用的属性包括：
display: grid;：将容器设置为网格布局。grid-template-columns：指定列的宽度。grid-template-rows：指定行的高度。grid-gap：指定网格之间的间距。grid-column 和 grid-row：指定元素在网格中的位置。justify-items 和 align-items：指定网格项在单元格内的对齐方式。justify-content 和 align-content：指定网格在容器内的对齐方式。BEM 命名规范是什么？BEM 是一种 CSS 命名规范，全称为 Block Element Modifier，用于提高 CSS 代码的可维护性和可读性。
.header、.menu。.header__logo、.menu__item。.header--fixed、.menu__item--active。示例：
<div class="header">
<div class="header__logo"></div>
<div class="header__menu">
<div class="header__menu__item header__menu__item--active"></div>
</div>
</div>
伪类 和 伪元素 有什么区别？:hover、:focus、:nth-child()。::before、::after、::first-line。示例：
/* 伪类 */
a:hover {
color: red;
}
/* 伪元素 */
p::before {
content: "前缀";
}
媒体查询 是什么？如何使用？媒体查询用于根据设备的特性（如屏幕宽度、分辨率）应用不同的样式，常用于响应式设计。
示例：
/* 当屏幕宽度小于 600px 时应用此样式 */
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
动画 和 过渡 有什么区别？@keyframes 定义动画的关键帧，可以控制动画的每一帧。transition 定义元素在状态变化时的过渡效果，如颜色、大小等。示例：
/* 动画 */
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}
.element {
animation: slide 2s infinite;
}
/* 过渡 */
.element {
transition: background-color 0.5s ease;
}
.element:hover {
background-color: red;
}
JavaScript 中的数据类型分为两大类：原始类型 和 引用类型。
原始类型：
number：数字，包括整数和浮点数。string：字符串。boolean：布尔值，true 或 false。null：表示空值。undefined：表示未定义的值。symbol：表示唯一的标识符（ES6 新增）。引用类型：
object：对象，包括数组、函数、日期等。== 和 === 有什么区别？==：宽松相等，会进行类型转换后再比较。===：严格相等，不会进行类型转换，只有类型和值都相同时才返回 true。示例：
1 == '1'; // true
1 === '1'; // false
闭包 是什么？有什么作用？闭包是指函数能够访问其词法作用域中的变量，即使函数在其词法作用域之外执行。
作用：
示例：
function createCounter() {
let count = 0;
return function() {
count++;
return count;
};
}
const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2
原型链 是什么？原型链是 JavaScript 中实现继承的机制。每个对象都有一个原型对象，通过 __proto__ 属性指向其原型对象。当访问对象的属性或方法时，如果对象本身没有该属性或方法，JavaScript 会沿着原型链向上查找，直到找到该属性或方法或到达原型链的顶端（null）。
示例：
function Person(name) {
this.name = name;
}
Person.prototype.sayHello = function() {
console.log(`Hello, ${this.name}`);
};
const person = new Person('Alice');
person.sayHello(); // Hello, Alice
this 指向什么？this 的指向取决于函数的调用方式：
this 指向 window（浏览器）或 global（Node.js）。this 指向 window（非严格模式）或 undefined（严格模式）。this 指向调用该方法的对象。this 指向新创建的对象。this，this 指向外层作用域的 this。示例：
const obj = {
name: 'Alice',
sayHello: function() {
console.log(`Hello, ${this.name}`);
}
};
obj.sayHello(); // Hello, Alice
事件循环 是什么？事件循环是 JavaScript 处理异步操作的机制。JavaScript 是单线程的，但通过事件循环可以实现非阻塞的异步操作。
事件循环的工作流程：
Promise 的 then 回调）。setTimeout 回调）。免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
