1、什么是浏览器盒模型？
The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model. CSS盒模型描述了通过 文档树中的元素 以及相应的 视觉格式化模型(visual formatting model) 所生成的矩形盒子。
Content（内容）： 元素实际包含的信息，例如文本、图片等。
Padding（内边距）： 围绕在内容外部的空白区域，提供元素内容与边框之间的距离。
Border（边框）： 位于内边距外部的边框线，定义元素的边界。
argin（外边距）： 位于边框外部的空白区域，定义元素与其他元素之间的距离。
标准盒模型： 盒子总宽度 = width + padding + border + margin。
怪异(IE)盒模型： 盒子总宽度 = width + margin ，使用属性box-sizing: border-box实在这种模式。
2、什么是BFC？如何生成BFC ？ BFC解决什么问题？
BFC 介绍juejin.cn/post/7340531314883854374?searchId=2024060422233655A7DA9690E1DA292FB6
概念
BFC “Block Formatting Context”，中文叫“块级格式化上下文”。是一种特殊的上下文环境。当一个元素创建 BFC 后，就具备了一个完全独立的环境。BFC 会影响当前元素和内部元素的布局表现，但不会影响跟外部元素之间的布局关系。
解决两个问题
1、清除浮动影响（clear the floats）
2、避免外边距合并（prevent margins collapsing）。
生成BFC环境
1、是 overflow 属性。当一个元素的 overflow 属性值不是 visible、clip 时，就会创建 BFC。比如：overflow: hidden、overflow: auto。
2、是浮动元素。即 float 属性值不为 none。
3、是绝对定位元素（Absolutely positioned elements）。即 position 属性值是 absolute 或 fixed。
4、是 display 属性。当一个元素的 display 属性设置成 inline-block 或 table-cell 时，就会创建 BFC。
5、是 Flex 项目和 Grid 项目。这要求它们的父元素设置了 display: flex 或 display: grid。
3、对 html 语义化的理解？
- 对机器友好，带有语义的文字表现力丰富，更适合搜索引擎的爬虫爬取有效信息，有利于SEO。除此之外，语义类还支持读屏软件，根据文章可以自动生成目录；
- 对开发者友好，使用语义类标签增强了可读性，结构更加清晰，开发者能清晰的看出网页的结构，便于团队的开发与维护。
<h1>~<h6>标签：标题标签，h1等级最高，h6等级最低
<header></header>：用于定义页面的介绍展示区域，通常包括网站logo、主导航、全站链接以及搜索框
<nav></nav>：定义页面的导航链接部分区域
<main></main>：定义页面的主要内容，一个页面只能使用一次。
<article></article>：定义页面独立的内容，它可以有自己的header、footer、sections等
<section></section>：元素用于标记文档的各个部分，例如长表单文章的章节或主要部分
<aside></aside>：一般用于侧边栏
<footer></footer>：文档的底部信息
<small></small>：呈现小号字体效果
<strong></strong>：用于强调文本
4、块级元素和行级元素的区别
常见的块级元素：p、div、form、ul、li、ol、table、h1、h2、h3、h4、h5、h6、dl、dt、dd
常见的行级元素：span、a、img、button、input、select
5、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）
6. HTML5新增了哪些新特性？
【新增】
- 语义化标签，如：article、footer、header、nav等
- 视频video、音频audio
- 画布canvas
- 表单控件，calemdar、date、time、email
- 地理位置 API（Geolocation API）
- 拖拽属性 draggable
【移除】
- 纯表现的元素：
basefont、font、s、strike、tt、u、big、center - 对可选用性产生负面影响的元素：
frame、frameset、noframes
7、搜索引擎优化SEO中的TDK是什么？
在SEO中，TDK其实就是title、description、keywords这三个标签，title表示标题标签，description是描述标签，keywords是关键词标签
8、img上 title 与 alt的区别？
- alt：全称
alternate，切换的意思，如果无法显示图像，浏览器将显示alt指定的内容 - title：当鼠标移动到元素上时显示title的内容
一般当鼠标滑动到元素身上的时候显示title，而alt是img标签特有的属性，是图片内容的等价描述，用于图片无法加载时显示，这样用户还能看到关于丢失了什么东西的一些信息，相对来说比较友好。
9、src 和 href 的区别
src和href都是HTML中特定元素的属性，都可以用来引入外部的资源。两者区别如下：
src： 全称source，它通常用于img、video、audio、script元素，通过src指向请求外部资源的来源地址，指向的内容会嵌入到文档中当前标签所在位置，在请求src资源时，它会将资源下载并应用到文档内，比如说：js脚本、img图片、frame等元素。当浏览器解析到该元素时，会暂停其它资源下载，直到将该资源加载、编译、执行完毕。这也是为什么将js脚本放在底部而不是头部的原因。
href： 全称hyper reference，意味着超链接，指向网络资源，当浏览器识别到它指向的⽂件时，就会并⾏下载资源，不会停⽌对当前⽂档的处理，通常用于a、link元素。
10、Canvas和SVG标签的区别
SVG： SVG可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言XML描述的2D图形的语言，SVG基于XML就意味着SVG DOM中的每个元素都是可用的，可以为某个元素附加Javascript事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
特点：
- 不依赖分辨率
- 支持事件处理器
- 最适合带有大型渲染区域的应用程序（比如谷歌地图）
- 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
- 不适合游戏应用
Canvas： Canvas是画布，通过Javascript来绘制2D图形，是逐像素进行渲染的。其位置发生改变，就会重新进行绘制。
特点：
- 依赖分辨率
- 不支持事件处理器
- 弱的文本渲染能力
- 能够以 .png 或 .jpg 格式保存结果图像
- 最适合图像密集型的游戏，其中的许多对象会被频繁重绘
11、说说你对 WEB 标准以及 W3C 的理解与认识
web 标准简单来说可以分为结构、表现和行为。其中结构主要是有 HTML 标签组成。或许通俗点说，在页面 body 里面我们写入的标签都是为了页面的结构。表现即指 css 样式表，通过 css 可以是页面的结构标签更具美感。行为是指页面和用户具有一定的交互，同时页面结构或者表现发生变化，主要是由 js 组成。 web 标准一般将该三部分独立分开，使其更具有模块化。但一般产生行为时，就会有结构或者表现的变化，也使这三者的界限并不那么清晰。
标签规范可以提高搜索引擎对页面的抓取效率，对 SEO 很有帮，以下几点规范：
- 标签字母要小写
- 标签要闭合
- 标签不允许随意嵌套
- 尽量使用外链 css 样式表和 js 脚本。是结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。
- 样式尽量少用行间样式表，使结构与表现分离，标签的 id 和 class 等属性命名要做到见文知义，标签越少，加载越快，用户体验提高，代码维护简单，便于改版
- 不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性。
