1.什么是 DOCTYPE， 有何作用？
Doctype是HTML5的文档声明，通过它可以告诉浏览器，使用哪一个HTML版本标准解析文档。在浏览器发展的过程中，HTML出现过很多版本，不同的版本之间格式书写上略有差异。如果没有事先告诉浏览器，那么浏览器就不知道文档解析标准是什么？此时，大部分浏览器将开启最大兼容模式来解析网页，我们一般称为怪异模式，这不仅会降低解析效率，而且会在解析过程中产生一些难以预知的bug，所以文档声明是必须的。
2.说说对 html 语义化的理解
HTML标签的语义化，简单来说，就是用正确的标签做正确的事情，给某块内容用上一个最恰当最合适的标签，使页面有良好的结构，页面元素有含义，无论是谁都能看懂这块内容是什么。
语义化的优点如下：
- 在没有CSS样式情况下也能够让页面呈现出清晰的结构
- 有利于SEO和搜索引擎建立良好的沟通，有助于爬虫抓取更多的有效信息，爬虫是依赖于标签来确定上下文和各个关键字的权重
- 方便团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化
3.对于Web标准以及W3C的理解
Web标准简单来说可以分为结构、表现、行为。其中结构是由HTML各种标签组成，简单来说就是body里面写入标签是为了页面的结构。表现指的是CSS层叠样式表，通过CSS可以让我们的页面结构标签更具美感。行为指的是页面和用户具有一定的交互，这部分主要由JS组成
W3C，全称：world wide web consortium是一个制定各种标准的非盈利性组织，也叫万维网联盟，标准包括HTML、CSS、ECMAScript等等，web标准的制定有很多好处，比如说：
- 可以统一开发流程，统一使用标准化开发工具（VSCode、WebStorm、Sublime），方便多人协作
- 学习成本降低，只需要学习标准就行，否则就要学习各个浏览器厂商标准
- 跨平台，方便迁移都不同设备
- 降低代码维护成本
4.行级元素和块级元素分别有哪些及怎么转换？
常见的块级元素：p、div、form、ul、li、ol、table、h1、h2、h3、h4、h5、h6、dl、dt、dd
常见的行级元素：span、a、img、button、input、select
块级元素：
- 总是在新行上开始，就是每个块级元素独占一行，默认从上到下排列
- 宽度缺少时是它的容器的100%，除非设置一个宽度
- 高度、行高以及外边距和内边距都是可以设置的
- 块级元素可以容纳其它行级元素和块级元素
行内元素：
- 和其它元素都会在一行显示
- 高、行高以及外边距和内边距可以设置
- 宽度就是文字或者图片的宽度，不能改变
- 行级元素只能容纳文本或者其它行内元素
使用行内元素需要注意的是：
- 行内元素设置宽度
width无效 - 行内元素设置
height无效，但是可以通过line-height来设置 - 设置
margin只有左右有效，上下无效 - 设置
padding只有左右有效，上下无效
可以通过display属性对行内元素和块级元素进行切换
5.H5有哪些新元素和新特性
HTML5主要是关于图像、位置、存储、多任务等功能的增加：
- 语义化标签，如：article、footer、header、nav等
- 视频video、音频audio
- 画布canvas
- 表单控件，calemdar、date、time、email
- 地理
- 本地离线存储，localStorage长期存储数据，浏览器关闭后数据不丢失，sessionStorage的数据在浏览器关闭后自动删除
- 拖拽释放
6.cookie、sessionStorage 和 localStorage 的区别
7.iframe的作用以及优缺点
优点
- 可以在页面上独立显示一个页面或者内容,不会与页面其他元素产生冲突。
- 可以在多个页面中重用同一个页面或者内容,可以减少代码的冗余。
- 加载是异步的,页面可以在不等待 iframe 加载完成的情况下进行展示。
- 方便地实现跨域访问
缺点
- 搜索引擎可能无法正确解析 iframe 中的内容
- 会阻塞主页面的 onload 事件
- 和主页面共享连接池,影响页面并行加载
8.meta viewport 是做什么用的，怎么写？
Viewport，适配移动端，可以控制视口的大小和比例：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
其中，content 参数有以下几种：
- width viewport ：宽度(数值/device-width)
- height viewport ：高度(数值/device-height)
- initial-scale ：初始缩放比例
- maximum-scale ：最大缩放比例
- minimum-scale ：最小缩放比例
- user-scalable ：是否允许用户缩放(yes/no）
9.css盒子模型有几种类型？它们区别是什么
根据盒子大小的计算方式不同，css 盒子模型分成了两种类型，分别是 W3C 标准盒子模型和怪异盒子模型也叫 IE 盒子模型。
- 标准盒子模型：设置的宽度 = 内容的宽度，盒子的宽度 = 内容的宽度 + padding2 + margin2 + border*2。
- IE盒子模型：设置的宽度 = 盒子的宽度，内容的宽度 = 盒子的宽度 - padding2 - margin2 - border*2。
默认情况下都是标准盒子模型，设置 IE 盒子模型：box-sizing:border-box，设置标准模型：box-sizing:content-box
9.标签上title与alt属性有什么区别？
alt 是给搜索引擎识别，在图像无法显示时的替代文本。
title 是元素的注释信息，主要是给用户解读。
当鼠标放到文字或是图片上时有 title 文字显示。在 IE 浏览器中 alt 起到了 title 的作用，变成文字提示。
10.css的引用有哪些，link和@import的区别
css 的引用有哪些：
-
内联方式（直接在
html标签中的style样式） 嵌入方式（在< style >标签下书写css代码） -
链接方式（使用 link 引入外部的
css文件）link 和 @import的区别：link和import写法不同，link通过 标签的 href 属性引入，import 通过@import url()引入。link是XHTML标签，还可以定义其他事务，@import属于CSS范畴，只能加载CSS。link无兼容问题，@import兼容IE5以上。link支持使用Javascript控制DOM去改变样式，@import不支持改变样式。link是连接整个css文件，@import可以模块化引入css文件。link引用CSS时，在页面加载时同时加载css，而@import会把css文件放在页面的最底部，导致css最后才加载完毕，等到页面完全加载才加载css，导致页面留白时间长，影响用户体验。
11.href和src的区别？
请求资源不同：href超文本引用，用来建立当前元素和文档之间的连接，常用的是link、a标签。src会将指向的资源下载并引用到当前文档中，常用的标签有script，img，iframe标签。作用结果不同：href 用于在当前文档和引用资源之间确立联系，src用于替换当前内容。浏览器解析方式不同：herf 引用的资源时，浏览器会将其识别为CSS文档，并行下载资源并且不会停止对当前文档的处理。当浏览器解析到src时，会暂停其他资源的下载和处理，直接将该资源下载，编译，执行完毕。
12.解释CSS中的BFC是什么，它的作用是什么？
BFC（块级格式化上下文）是CSS中的一种渲染模式，它创建了一个独立的渲染环境，其中的元素按照一定的规则进行布局和定位。BFC的作用包括：清除浮动、防止外边距重叠等。
形成bfc常见的条件
- 浮动元素 float 不是 none
- 绝对定位元素 position是absolute或fixed
- 块级元素 overflow 不是 visible
- display的值为inline-block，flex等
13.px em rem vw vh 分别解释一下这几个单位
"CSS 单位分为绝对单位（px）和相对单位（em、rem、vw、vh）。
px是固定单位，适合边框和精确控制。比如border: 1px solid #ccc。em相对当前字体大小，适合组件内部。比如按钮中padding: 0.75em会随按钮字体缩放。rem相对根字体，适合全局布局。设置html {font-size: 16px}后，2rem就是 32px。vw/vh相对视口，适合全屏布局。width: 50vw是视口一半宽度。其中1vh = 视口高度的 1%
如何设计一个完美的响应式系统？
- 可预测性：rem 为主，保持比例关系
- 适应性：结合 vw 实现视口响应
- 限制边界：使用 clamp/min/max 限制极端情况
- 渐进增强：提供回退方案
14.padding-top, 10%, 10rem，10vh， 10em 取值逻辑是什么？
百分比（10%）相对于包含块（containing block）的宽度rem（10rem）相对于根元素（html）的字体大小vh（10vh）10vh = 视口高度的10%em（10em）相对于当前元素的字体大小，如果当前元素未设置字体，则继承父元素字体
15.物理像素 逻辑像素 分辨率 像素比？
- 物理像素（Physical Pixels / Device Pixels）
- 本质：屏幕硬件的最小发光单元，由红、绿、蓝子像素组成
- 特点：硬件固定，不可变，决定了屏幕的物理显示能力
- 逻辑像素（Logical Pixels / CSS Pixels）
- 本质：软件开发中使用的抽象单位，与设备无关
- 目的：在不同密度屏幕上保持视觉一致性
- 特点：由操作系统/浏览器管理，可缩放
- 分辨率（Resolution）
- 屏幕分辨率：屏幕的物理像素总数（如 1920×1080）
- 像素密度：PPI（Pixels Per Inch），每英寸的物理像素数
- 设备像素比（Device Pixel Ratio, DPR）
- 定义：物理像素与逻辑像素的比例
16.npm cpm pnpm yarn 介绍一下，各自的优点
- npm Node.js 官方包管理器，生态最全
- cnpm npm 的淘宝镜像，国内加速
- yarn Facebook 出品，确定性安装 + 性能优化
- pnpm 硬链接 + 符号链接，节省空间 + 速度快
17.移动端的1px，怎么处理
第一层：问题根源
"移动端1px问题本质是CSS像素与物理像素的差异。由于Retina屏的DPR（设备像素比）通常为2或3，CSS的1px会渲染为2或3个物理像素，导致视觉上变粗。"
第二层：解决方案
"主流的解决方案有五种：
- transform缩放：通过伪元素+scale缩放，兼容性好
- 0.5px：直接使用0.5px，但Android兼容性差
- 背景渐变：用linear-gradient模拟边框
- viewport缩放：整体缩放页面，影响大不推荐
- box-shadow：用阴影模拟，简单但效果有限"
第三层：最佳实践
"在实际项目中，我推荐使用transform: scale方案。可以封装成SASS混合宏或CSS工具类。对于新项目，还可以结合CSS变量和媒体查询实现动态适配。"
第四层：现代方案
"现在也可以使用min-resolution媒体查询或border-image等现代CSS特性，不过需要注意浏览器兼容性。"
