HTML面试题

2022/5/25 4:20:04

编程Tag： HTML5

本文主要是介绍HTML面试题，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一、行内元素/块级元素非替换元素/替换元素

1.行内元素

左右两边都可以有元素，和其他元素在一行上；不可以设置宽高，其宽度就是内容的宽度。对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，但是padding上下对其他元素无影响。

常见的行内元素：<span></span>; <a></a>; <img></img>等等。

2. 块级元素

默认独自占据一行，左右两边都没有元素；可以设置宽高，在不设置宽度的情况下，默认为父元素的宽度一致。

常见的块级元素：<h1></h1>; <p></p>; <div></div>等等。

3. 替换元素

替换元素是浏览器根据元素的标签和属性，来决定元素的具体显示内容。例如： img标签，只写这一个标签，不添加属性，页面上是显示不出来你要的图片的，但是我们往img标签里面添加src，这时候页面上就能显示出你要的图片，src不同，页面上显示出来的内容也就不同。同样为替换元素的还有<input>标签，<textarea>标签等。

4.非替换元素

将内容直接告诉浏览器，将其显示出来。比如我们常用的<p>标签，浏览器直接会将<p>标签里面的东西显示出来。

块级元素与行内替换元素是可以设置宽高的，行内非替换元素无法设置宽高，但是行内元素和块级元素一样，都拥有盒子模型，行内元素在垂直方向的padding与margin是无效的。

二、img的title和alt属性

alt用于图片无法加载时显示，title为该属性提供信息，通常当鼠标滑动到元素上时显示。

当图片不输出信息的时候，会显示alt信息，鼠标放上去没有信息，当图片正常读取，不会出现alt信息。

当图片不输出信息的时候，会显示alt信息，鼠标放上去会出现title信息；

当图片正常输出的时候，不会出现alt信息，鼠标放上去会出现title信息；

除了纯装饰图片外都必须设置有意义的值，搜索引擎会分析。

三、Meta标签

Meta标签由name和content属性定义，用来描述网页文档的属性，比如网页的作者，网页描述，关键词等，除了HTTP标准固定了一些name作为大家使用的共识，开发者还可以自定义name。

常见的meta标签：

1. charset，用来描述HTML文档的编码类型。<meta charset = “UTF-8”>

2. keywords，页面关键词。<meta name = “keywords” content = “关键词”/>

3. description，页面描述。<meta name = “description” content = “页面描述内容”/>

4. refresh，页面重定向和刷新。<meta http-equiv= “refresh” content = “0;url=”/>

5. viewport，适配移动端，可以控制视口的大小和比例。<meta name= “viewport” content =“width = device-width,initial-scale = 1,maximun-scale = 1”/>。其中，content参数有以下几种：①width viewport:宽度（数值/device-width）②height viewport：高度（数值/device-height）③initial-scale：初始缩放比例 ④maximum-scale：最大缩放比例④minimum-scale：最小缩放比例⑤user-scalable：是否允许用户缩放（yes/no）

6. 搜索引擎搜索方式。<meta name = “robots” content = “index,follow”/>。其中，content参数有以下几种：①all:文件将被检索，且页面上的链接可以被查询②none:文件将不被检索，且页面上的链接不可以被查询③index：文件将被检索④follow：页面上的链接可以被查询⑤noindex:文件将不被检索⑥nofollow:页面上的链接不可以被查询。

四、DOCTYPE标签（标准模式、兼容模式）

DOCTYPE是HTML5中一种标准通用标记语言的文档类型声明，它的目的是告诉浏览器（解析器）应该以什么样（html或xhtml）的文档类型定义来解析文档，不同的渲染模式会影响浏览器对css代码甚至JavaScript脚本的解析。它必须声明在HTML文档的第一行。

标准模式：默认模式，浏览器使用W3C的标准解析渲染页面。在标准模式中，浏览器以其支持的最高标准呈现页面。

兼容模式：浏览器使用自己的兼容模式解析渲染页面。在兼容模式中，页面以一种比较宽松的向后兼容的方式显示。

五、JS延迟加载的六种方式（其中包括script标签的defer和async）

延迟加载就是等页面加载完成后再加载JavaScript文件。Js延迟加载有助于提高页面加载速度。

1. defer属性：给js脚本添加defer属性，这个属性会让脚本的加载与文档的解析同步解析，然后在文档解析完后再执行这个脚本文件，这样的话就能使页面的渲染不被阻塞。多个设置了defer属性的脚本按规范来说最后是顺序执行的，但是在一些浏览器中可能不是这样。

2. Async属性：给js脚本添加async属性，这个属性会使脚本异步加载，不会阻塞页面的解析过程，但是当脚本加载完成后立即执行js脚本，这个时候如果文档没有解析完成的话同样会阻塞。多个async属性的脚本的执行顺序是不可预测的，一般不会按照代码的顺序依次执行。

3. 动态创建dom方式：动态创建DOM标签的方式，可以对文档的加载事件进行监听，当文档加载完成后再动态的创建script标签来引入js脚本。

4. 使用setTimeout延迟方法：设置一个定时器来延迟加载js脚本文件

5. 让js最后加载：将js脚本放在文档的底部，来使js脚本尽可能的再最后来加载执行。

6. 使用jQuery的getScript()方法

$.getScript(“outer.js”,function(){//回调函数，成功获取文件后执行的函数

console.log(“脚本加载完成”)

})

六、重排和重绘

1.重排reflow：重新计算尺寸和布局，可能会影响其他元素的位置。如元素高度增加，可能会使相邻元素位置下移

2.重绘 repaint：元素外观改变，如颜色、背景色。但元素的尺寸、定位不变，不会影响其他元素的位置

3.区别：重排比重绘要影响更大，消耗也更大。所以要尽量避免无意义的重排

4.减少重排的方法：①集中修改样式，或直接切换css class ②修改之前先设置display:none，脱离文档流 ③使用BFC特性，不影响其他元素的位置④频繁触发使用节流和防抖 ④使用createDocumentFragment批量操作DOM ⑤优化动画，使用css3和requestAnimationFrame

七、引入css样式的方法和区别

1.行内样式

使用style属性引入CSS样式，实际在写页面时不提倡使用，在测试的时候可以使用。

<h1 style="color:red;">style属性的应用</h1>

<p style="font-size:14px;color:green;">直接在HTML标签中设置的样式</p>

2.内部样式表

在style标签中书写CSS代码。style标签写在head标签中。

<head>

</head>

3.外部样式表

CSS代码保存在扩展名为.css的样式表中，HTML文件引用扩展名为.css的样式表，有两种方式：链接式、导入式。

①链接式

②导入式

链接式和导入式的区别

@import：属于CSS2.1，先加载HTML结构再加载CSS文件。

4.CSS中的优先级

①样式优先级

行内样式>内部样式>外部样式(后两者是就近原则)

②选择器优先级

优先级：ID选择器>类选择器>标签选择器

八、Href和src的定义与区别

1.src和href都是用来引用外部的资源。

2.区别：

Src:表示对资源的引用，它指向的内容会嵌入到当前标签所在的位置。Src会将其指向的资源下载并应用到文档内，如请求js脚本。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，所以一般js脚本会放在页面底部。

Href:表示超文本引用，它指向一些网络资源，建立和当前元素或文本档的链接关系。当浏览器识别到它指向的文件时，就会并行下载资源，不会停止对当前文档的处理。常用在a、link等标签上。

九、创建dom元素的方法

1. document.write()

document.write()直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘

2. element.innerHTML

innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘。创建多个元素，结构稍微复杂

3. document.createElement()

创建多个元素，结构更清晰

十、双栏布局三栏布局

十一、水平垂直居中的方法

这篇关于HTML面试题的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

HTML面试题

相关编程文章