在前端开发中，尤其是在大型互联网公司的面试中，掌握H5的新增特性以及CSS和JavaScript的基础知识是非常重要的。以下是关于这些主题的详细阐述。
H5新增特性
HTML5带来了诸多新的特性，使得前端开发更为高效和灵活。其中一些重要的特性包括：
- 新的表单输入类型：H5引入了多种新的输入类型，如
email,tel,number,date等，使得输入验证更加高效。
```html
```
- 语义化标签：H5引入了许多新的标签，如
<header>,<footer>,<section>,<article>等，使文档结构更加清晰。
```html
我的网站
文章标题
文章内容...
```
CSS相关知识
在面试中，CSS权重也是一个常见的考察点，CSS的优先级由以下几个原则决定：
- 内联样式（权重最高）
- ID选择器
- 类选择器、伪类选择器
- 标签选择器、伪元素选择器
- 通配符选择器（权重最低）
除了选择器的权重，还有一些CSS布局的单位如rem, vh, vw等：
- rem：相对于根元素
<html>的字体大小，适用于响应式设计。 - vh：视口高度的百分比（1vh = 1%视口高度），适合用于全屏布局。
- vw：视口宽度的百分比（1vw = 1%视口宽度），适合横向布局。
html {
font-size: 16px; /* 1rem = 16px */
}
.container {
width: 50vw; /* 宽度为视口宽度的50% */
height: 50vh; /* 高度为视口高度的50% */
}
预处理器（Less/Sass）
Less和Sass是两种流行的CSS预处理器，它们提供了许多增强的功能，如变量、嵌套、混合等。下面是一个使用Sass的示例：
$primary-color: #3498db;
.container {
background-color: $primary-color;
.header {
color: white;
&:hover {
color: darken($primary-color, 10%);
}
}
}
JavaScript基础知识
JavaScript中的变量声明有三种方式：var, let, 和 const。
- var：变量提升，存在作用域问题。
- let：在块级作用域有效，不会提升。
- const：声明常量，必须初始化，值不可变，但对象的属性是可以改变的。
function demo() {
var name = 'Alice'; // 被提升
let age = 25; // 不会提升
const height = 170; // 高度是常量
if (true) {
var name = 'Bob'; // 变量提升至函数作用域
let age = 28; // 只在块级有效
console.log(name); // Bob
console.log(age); // 28
}
console.log(name); // Bob
console.log(age); // 25
console.log(height); // 170
}
demo();
JavaScript基本数据类型
JavaScript有七种基本数据类型：
- Undefined：未定义。
- Null：空值。
- Boolean：布尔值（true/false）。
- Number：数字，支持整数和浮点数。
- String：字符串。
- Symbol：唯一且不可变的数据类型，主要用于对象属性的唯一标识。
- BigInt：可以表示大于
Number.MAX_SAFE_INTEGER的整数。
let num = 42; // Number
let str = "Hello, World!"; // String
let isActive = true; // Boolean
let undef; // Undefined
let empty = null; // Null
const sym = Symbol('description'); // Symbol
const bigInt = 1234567890123456789012345678901234567890n; // BigInt
总结而言，准备前端面试时，深入理解HTML5新特性、CSS的原则和JavaScript的基础知识至关重要。有助于在技术面试中展示出色的前端技术能力。希望以上的内容能够帮助你在面试中取得好成绩。
![[前端大厂面试详解] 百度 前端一面，h5新增特性，rem,vm,vh,less.sass,css权重，js声明变量的方式，js基本数据类型，](http://img.makehui.com/186.jpg)
