HTML
1.前端工程化
题目总结
1.什么是标签语义化？:合理的标签干合适的事情，看到标签就知道准备干什么，比方说header，footer等
2.都有哪些标签，都是啥意思？：块级标签，行内标签，行内块标签，
块级标签的特点：
- 宽度100%，高度自适应(由内容撑开)
- 独立成行(独占一行)
- 可以设置margin，padding，border，宽度和高度
行内标签的特点:
- 宽度高度自适应
- 默认水平排列，不独占一行
- 可设置border，可设置水平方向的margin，padding。
- 不可以设置宽高
行内块标签
- 对宽高属性值都有效，还能多个标签在一行
如何相互转化
- display（inline,inline-block,block）
display的值有哪些？:flex ,table ,none,等等
3.让元素隐藏，可以怎样做？
- display:none真正意义的隐藏，页面源码都不显示隐藏的页面源码，隐藏元素不占任何空间，但是可以通过Dom操作访问到
- opacity:0 opacity属性是设置元素的透明度，会影响页面布局，但只是不可见，会影响页面的交互操作
- visibility:hidden 也只是显示不可见, 元素位置处显示一块空白，影响布局，但是不影响交互
- position:absoute,为了不影响页面布局又想交互，position属性将元素移出原来的页面显示，并可以与之交互
- 总结：opacity和visibility会影响布局,display不影响布局但是无法直接交互
4.filter(滤镜)还能做哪些？（没用过）
- 灰度设置
- 反色
- 饱和度设置
- 透明度设置
- 模糊，阴影
5.flex：1 1 auto(用来补全剩余空间),flex有三个参数，第一个是项目放大比例默认是0，第二个是缩小比例，默认是1，第三个是项目占据主轴空间
6.实现居中的方式？
-
text-align:center
- 可以水平居中块级元素中的行内元素（inline，inline-block）
- 用来居中块级元素中的块级元素，如果内层的div有自己的宽度，那么这种方法只能让其中的文字等内容居中
-
**margin:0 auto
- 设置块级元素，实现水平居中**
-
display:table-cell(有点迷)
- 配合width，text-align：center，vertical-align:middle
- 这个方式是对单元格td来说的，让大小不固定垂直居中，float，absolute等属性都会影响他的实现，
- 父级元素需要固定宽高，元素设置成行内元素，或者行内块
*css3的translate
-
水平居中元素，并且元素脱离文档流
-
设置top:50%,left:50%.
-
使用transform来向左上偏移半个内元素的宽和高
-
弹性伸缩盒模型
-
用js的方式获得浏览器的宽和高，在js中设置盒子的样式，宽度为(浏览器宽度-盒子宽度)/2 ,高度为(浏览器高度-盒子高度)/2
7.都有哪些盒子模型？那怎样切换呢？
-
W3C标准的盒模型(标准盒模型):width,height指的是内容区域content的宽度高度
-
E标准的盒子模型（怪异盒模型）:
- width指的是内容，边框，内边距宽度这三者之和
- height指的是内容，边框，内边距高度这三者之和
-
切换
- box-sizing:content-box(标准)||border-box（IE盒模型）
8.src和href的区别
-
共性：两者都是用来引用外部的资源
-
src：表示对资源的引用，它所指向的内容会嵌入到当前标签所在的位置。src会将其指向的资源下载并应用到文档中。例如：请求js脚本。
- 当浏览器解析到该元素时，会暂停其他资源下载和处理，直到将src引用的资源加载、编译、执行完成，故此我们一般把js脚本放到底部(防止加载js文件阻塞页面的渲染)
-
有点问题，加载图片的时候会不会阻塞，学长的说法是加载资源的时候是不会阻塞，js阻塞也是在js执行的时候阻塞
-
href：表示超文本的引用，它指向一些网络资源，建立和当前元素或本文档的链接关系。当浏览器识别到他指向的文件时，就会并行下载(不会停止其他正在进行的操作)，常用在a、link标签
9.对HTML语义化的理解
-
语义化是根据内容的结构化（内容语义化），选择合适的标签（代码语义化）。简要概述就是用合适的代码做合适的事情
-
优点：（1）对机器友好。语义类还支持读屏软件，根据文章可以自动生成目录。（2）对开发者友好，开发者能清晰的看出网页的结构（看到相应的标签就知道该标签要用来干什么了）
-
常用的语义化标签：header、nav、aside、main、footer这些都是标签
10.DOCTYPE（文档类型）的作用
- DOCTYPE是HTML5中一种标准通用标记语言的文档声明类型，目的告诉浏览器（解析器）应该以什么样（html或xhtml）的文档类型定义来解析文档
- 不同的渲染模式会影响浏览器对css代码甚至对javascript脚本的解析，故我们把它声明在第一行
- 浏览器渲染页面的两种模式（可通过document.compatMode获取）CSS1Compat（标准模式）(strict mode)BackCompat（怪异模式或混杂模式）(quirks mode)
11.script标签中defer和async的区别
-
没有这两个会怎么办呢？
-
没有这两个属性，浏览器会立即加载并执行相应的脚本，也就是不会等待后续加载的文档元素，读取到就会开始加载和执行，这样就会堵塞后续文档的加载
-
共同点:这两个属性都是去异步加载外部的js脚本文件，他们不会堵塞页面的解析
-
区别：多个带async属性的标签，不能保证这些加载的顺序；多个带defer属性的标签，能保证加载的顺序，这些按照加载顺序执行
-
脚本是否并行执行
- async属性（HTML文档被解析时遇见async脚本，则在后台加载脚本，文档解析过程不中断，脚本加载完成后，文档停止解析，待脚本执行完毕后在继续执行）
- defer属性，加载后续文档的过程和js脚本的加载（此时js脚本是加载 不是执行）是并行的（异步），js脚本需要等到文档所有元素解析完成之后才执行，在DOMContentLoaded事件触发执行之前
- 补充：DOMContentLoaded事件
- 脚本是要在CSSOM生成之后才可以执行的（解释：因为js可以查询任意对象的样式，所以意味着在CSS解析完成，也就是CSSOM生成之后，js才可以被执行）
- 解释一下，当 HTML 文档解析完成就会触发 DOMContentLoaded，而所有资源加载完成之后，load 事件才会被触发。
- 补充： DOMContentLoaded会在defer执行完毕后触发，不会等待async（只要HTML解析完毕就触发)
-
链接https://zhuanlan.zhihu.com/p/25876048
12.常用的meta标签有哪些？
- meta标签由name和content属性定义：用来描述网页文档的属性，比如作者，网页描述，关键词等，除了HTTP标准固定了一些name作为大家使用 的共识，开发者还可以自定义name
- 常用的meta标签
- 1、charset用来描述HTML文档的编码类型 charset='utf-8’
- keywords,页面关键词****
- description，页面描述
- refresh，页面重定向和刷新
- viewport，适配移动端，可以控制视口的大小和比例
- content的参数
- width ：宽度（数值/device-width）
- height：高度（数值/device-height）
- initial-scale:初始缩小比例
- maximum-scale：最大缩放比例
- minimum-scale：最小缩放比例
- user-scalable：是否允许用户缩放（yes/no）
- 搜索引擎方式
- content的参数
- all:文件将被检索，且页面上的链接可以被查询
- none：文件将不被检索，且页面上的链接不可以被查询
- index：文件将被检索
- follow：页面上的链接可以被查询
- noindex：文件将不被检索
- nofollow：页面上的链接不可以被查询
13.HTML5有哪些更新
1. 语义化标签
- header：定义文档的页眉（头部）；
- nav：定义导航链接的部分；
- footer：定义文档或节的页脚（底部）；
- article：定义文章内容；
- section：定义文档中的节（section、区段）；
- aside：定义其所处内容之外的内容（侧边）；
2.媒体标签
-
audio：音频
-
属性：controls（控制面板），autoplay（自动播放），loop（true那么就是循环播放）
-
video视频
-
属性：poster：指定视频还没有完全下载完毕，或者用户还没有点击播放前显示的封面。默认显示当前视频文件的第一针画面，当然通过poster也可以自己指定。
-
controls 控制面板
-
width
-
height
-
source标签 因为浏览器对视频格式支持程度不一样，为了能够兼容不同的浏览器，可以通过source来指定视频源。
3.表单
- 表单类型：
- email，url，number，search，range，color，(time，data，datetime，datetime-local ，week，month)
- 表单属性
- **(1)placeholder：提示信息 （2）autofocus：自动获取焦点 **
- （3）autocompleted（value为on或off），前提首先表单必须提交过，其次是name属性
- （4）required：输入框不能为空，必须有值才能够提交（5）pattern：里边写入想要的正则模式
- （6）mutiple：可以选择多个文件或者邮箱（7）form（form表单的ID）
4.DOM查询操作
- document.querySelector()找一个
- document.querySelectorAll()找所有
它们选择的对象可以是标签，可以是类(需要加点)，可以是ID(需要加#)
5. Web存储
HTML5 提供了两种在客户端存储数据的新方法：
- localStorage - 没有时间限制的数据存储
- sessionStorage - 针对一个 session 的数据存储
6.img的srcset属性的作用？
- srcset属性用于设置不同屏幕密度下，img 会自动加载不同的图片。
7.行内、块级、空元素
8.Web Worker？
-
背景：javascript采用的是单线程模型，也就是说，所有的任务只能在一个线程上完成
-
为javascript创造多线程环境，允许主线程创建worker线程，将一些任务分配给后者运行。在主线程运行的同时，worker线程在后台运行。等到worker线程完成计算任务，再把结果返回给主线程。
-
**worker线程和主线程不在同一个上下文环境，它们不能直接通信，必须通过消息完成
9.title1与h1的区别，b与strong的区别，i与em的区别？
- strong标签是一个有很好的语义的标签，而b标签只是一个简单加粗标签，语义化不好或者说没有
- title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取有很大的影响
- i标签的作用：仅仅是为了让字体显示斜体，对于SEO没什么作用。em标签的作用：不仅可以让字体显示斜体，而且可以加强语气，告诉搜索引擎这里是重要的
10.iframe有哪些优点和缺点？
- iframe元素会创建包含另外一个文档的内联框架(即行内框架)
- 优点
- 用来加载速度较慢的内容（广告等），可以让脚本并行下载，可以实现子域通信
- 缺点
- iframe会阻塞页面的onload事件。无法被一些搜索引擎识别。会产生很多页面，不容易管理
11.Canvas和SVG的区别
-
SVG：Svg可缩放矢量图标（Scalable vector Graphics）是基于可扩展标记语言XML描述的2D图形的语言，SVG基于XML就意味着SVG DOM中的每个元素都是可用的，可以为某个元素附加Javascript事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
-
Canvas：Canvas是画布，通过Javascript来绘制2D图形，是逐像素进行渲染的。其位置发生改变，就会重新进行绘制。
-
**通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。使用 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL，而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 、、、 标签中的 URL **
12. 文档声明（Doctype）和<!Doctype html>有何作用? 严格模式与混杂模式如何区分？它们有何意义?
- 文档声明（Doctype）：文档声明就是为了告诉浏览器，当前文档是使用什么版本的HTML来编写的，浏览器应该以何种方式来解析该文档
- <!doctype html>的作用就是让浏览器进入标准模式，使用最新的html5标准来解析页面；如果不写，浏览器就会进入混杂模式。
- 严格模式与混杂模式的区分：
- 严格模式： 又称为标准模式，指浏览器按照
W3C标准解析代码； - 混杂模式： 又称怪异模式、兼容模式，是指浏览器用自己的方式解析代码。混杂模式通常模拟老式浏览器的行为，以防止老站点无法工作；
- 严格模式： 又称为标准模式，指浏览器按照
13.浏览器乱码的原因是什么？如何解决？
- 原因
- 网页源代码是gbk的编码，而内容中的中文是utf-8编码的
- html网页编码是gbk，而程序从数据库中调出呈现是utf-8编码的内容也会造成编码乱码
- 浏览器不能自动检测网页编码，从而造成网页乱码
- 解决
- 使用软件编辑HTML网页内容；
- 如果网页设置编码是
gbk，而数据库储存数据编码格式是UTF-8，此时需要程序查询数据库数据显示数据前进程序转码； - 如果浏览器浏览时候出现网页乱码，在浏览器中找到转换编码的菜单进行转换。
14. 渐进增强和优雅降级之间的区别
- （1）渐进增强（progressive enhancement）：主要是针对低版本的浏览器进行页面重构，保证基本的功能情况下，再针对高级浏览器进行效果、交互等方面的改进和追加功能，以达到更好的用户体验。
- （2）优雅降级 graceful degradation： 一开始就构建完整的功能，然后再针对低版本的浏览器进行兼容。
15. 说一下 HTML5 drag API
https://juejin.cn/post/6844903513491767303
dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发。
darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。
dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。
dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。
dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。
drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。
dragend：事件主体是被拖放元素，在整个拖放操作结束时触发。
post/6844903513491767303
dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发。
darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。
dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。
dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。
dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。
drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。
dragend：事件主体是被拖放元素，在整个拖放操作结束时触发。