html题目总结

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和visibilitity会影响布局,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来编写的，浏览器应该以何种方式来解析该文档

的作用就是让浏览器进入标准模式，使用最新的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：事件主体是被拖放元素，在整个拖放操作结束时触发。