HTML刷题

已于 2022-12-07 19:10:06 修改
阅读量655 收藏
点赞数
文章标签： html java 前端
于 2022-12-05 19:00:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ssss39/article/details/128129676
版权

HTML5 之前的版本是 HTML4.01

onblur 和 onfocus 属于焦点事件：

onblur：失去焦点

onfocus：获取焦点

链接：为同一个文件添加多种文件格式的原因是什么 ？&l__牛客网
来源：牛客网
 

1.为同一个文件添加多种文件格式的原因是什么 ？C

1

2

<source src="html_5.mp4" type="video/mp4">

<source src="html_5.ogv" type="video/ogg">

A.提供后备支援
B.解决媒体支持问题
C.提供备份支持并解决媒体支持问题

解析
媒体支持问题:不同浏览器及版本可能对文件格式的支持不同，多放几个格式以免浏览器碰到一个文件不能支持 
提供备份支持：如果浏览器两个格式都能支持，其中一个文件某些原因不能播放了，那还有另外一个文件可用嘛

2.

 3.

链接：HTML5中关于 section元素使用正确的是_网易笔试题_牛客网
section元素： section元素 是html5中新增加的结构元素，它有更进一步的语义。表示页面中的一个内容区块，比如章节、页眉、页脚，或者页面中的其他部分。它可以与 h1, h2, h3, h4, h5等元素结合起来使用，表示文档结构。

4.

以下正确表示10^2的是  B

  • 10<sub>2</sub>
  • 10<sup>2</sup>
  • 10<mark></mark>
  • 10*2

解析: <sub>可以记忆为subscript below, 而<sup>则记忆为subscript up

链接：以下正确表示10^2的是__牛客网

包含在 <sup> 标签和其结束标签 </sup> 中的内容将会以当前文本流中字符高度的一半来显示，但是与当前文本流中文字的字体和字号都是一样的。

<sup></sup>上标

<sub></sub>下标

<mark></mark>突出显示

5.

<i><em>都表示斜体，如果这种斜体字对该浏览器不可用的话，可以使用高亮、反白或加下划线等样式。区别在于<em>表示强调，<i>单纯表示斜体

6.

链接：以下哪个是在 HTML5 之前已经引入的特性？__牛客网
html5十大新特性的总结：
一、html5新特性之用于绘画的canvas元素
二、html5新特性之更加丰富强大的表单
三、html5新特性之用于媒介的video和audio元素
四、html5新特性之html5地理定位
五、html5新特性之html5拖放
六：html5新特性之html5 Web存储
七、html5新特性之html5应用程序缓存
八、html5新特性之html5 Web Workers
九、html5新特性之html5服务器发送事件
十、html5新特性之html5 WebSocket　

7.

值描述
_blank在新空白窗口中打开被链接文档。
_self默认。在当前窗口中打开被链接文档。
_parent在父框架集中打开被链接文档。
_top在整个窗口中打开被链接文档。
framename在指定的框架中打开被链接文档。

8.      

p{  border:5px   solid red;}

为了代码的可读性，建议按照，border-width，border-style，border-color，的顺序书写。 但其实顺序调换是不影响呈现的

另外注意，若没有指定border-style属性值，边框是不会显示的，因为其默认值为none

9.

链接：下列描述错误的是（）_搜狗笔试题_牛客网
来源：牛客网

一些常见的状态码为：

200 - 服务器成功返回网页 
404 - 请求的网页不存在 
503 - 服务不可用 
详细分解：

1xx（临时响应） 
表示临时响应并需要请求者继续执行操作的状态代码。

代码 说明 
100 （继续） 请求者应当继续提出请求。服务器返回此代码表示已收到请求的第一部分，正在等待其余部分。 
101 （切换协议） 请求者已要求服务器切换协议，服务器已确认并准备切换。

2xx （成功） 
表示成功处理了请求的状态代码。

代码 说明 
200 （成功） 服务器已成功处理了请求。通常，这表示服务器提供了请求的网页。 
201 （已创建） 请求成功并且服务器创建了新的资源。 
202 （已接受） 服务器已接受请求，但尚未处理。 
203 （非授权信息） 服务器已成功处理了请求，但返回的信息可能来自另一来源。 
204 （无内容） 服务器成功处理了请求，但没有返回任何内容。 
205 （重置内容） 服务器成功处理了请求，但没有返回任何内容。 
206 （部分内容） 服务器成功处理了部分 GET 请求。

3xx （重定向） 
表示要完成请求，需要进一步操作。 通常，这些状态代码用来重定向。

代码 说明 
300 （多种选择） 针对请求，服务器可执行多种操作。服务器可根据请求者 (user agent) 选择一项操作，或提供操作列表供请求者选择。 
301 （永久移动） 请求的网页已永久移动到新位置。服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。 
302 （临时移动） 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。 
303 （查看其他位置） 请求者应当对不同的位置使用单独的 GET 请求来检索响应时，服务器返回此代码。 
304 （未修改） 自从上次请求后，请求的网页未修改过。服务器返回此响应时，不会返回网页内容。 
305 （使用***） 请求者只能使用***访问请求的网页。如果服务器返回此响应，还表示请求者应使用***。 
307 （临时重定向） 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。

4xx（请求错误） 
这些状态代码表示请求可能出错，妨碍了服务器的处理。

代码 说明 
400 （错误请求） 服务器不理解请求的语法。 
401 （未授权） 请求要求身份验证。 对于需要登录的网页，服务器可能返回此响应。 
403 （禁止） 服务器拒绝请求。 
404 （未找到） 服务器找不到请求的网页。 
405 （方法禁用） 禁用请求中指定的方法。 
406 （不接受） 无法使用请求的内容特性响应请求的网页。 
407 （需要***授权） 此状态代码与 401（未授权）类似，但指定请求者应当授权使用***。 
408 （请求超时） 服务器等候请求时发生超时。 
409 （冲突） 服务器在完成请求时发生冲突。服务器必须在响应中包含有关冲突的信息。 
410 （已删除） 如果请求的资源已永久删除，服务器就会返回此响应。 
411 （需要有效长度） 服务器不接受不含有效内容长度标头字段的请求。 
412 （未满足前提条件） 服务器未满足请求者在请求中设置的其中一个前提条件。 
413 （请求实体过大） 服务器无法处理请求，因为请求实体过大，超出服务器的处理能力。 
414 （请求的 URI 过长） 请求的 URI（通常为网址）过长，服务器无法处理。 
415 （不支持的媒体类型） 请求的格式不受请求页面的支持。 
416 （请求范围不符合要求） 如果页面无法提供请求的范围，则服务器会返回此状态代码。 
417 （未满足期望值） 服务器未满足”期望”请求标头字段的要求。

5xx（服务器错误） 
这些状态代码表示服务器在尝试处理请求时发生内部错误。 这些错误可能是服务器本身的错误，而不是请求出错。

代码 说明 
500 （服务器内部错误） 服务器遇到错误，无法完成请求。 
501 （尚未实施） 服务器不具备完成请求的功能。例如，服务器无法识别请求方法时可能会返回此代码。 
502 （错误网关） 服务器作为网关或***，从上游服务器收到无效响应。 
503 （服务不可用） 服务器目前无法使用（由于超载或停机维护）。通常，这只是暂时状态。 
504 （网关超时） 服务器作为网关或***，但是没有及时从上游服务器收到请求。 
505 （HTTP 版本不受支持） 服务器不支持请求中所用的 HTTP 协议版本。

HttpWatch状态码Result is

200 - 服务器成功返回网页，客户端请求已成功。 
302 - 对象临时移动。服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。 
304 - 属于重定向。自上次请求后，请求的网页未修改过。服务器返回此响应时，不会返回网页内容。 
401 - 未授权。请求要求身份验证。 对于需要登录的网页，服务器可能返回此响应。 
404 - 未找到。服务器找不到请求的网页。 
2xx - 成功。表示服务器成功地接受了客户端请求。 
3xx - 重定向。表示要完成请求，需要进一步操作。客户端浏览器必须采取更多操作来实现请求。例如，浏览器可能不得不请求服务器上的不同的页面，或通过***服务器重复该请求。 
4xx - 请求错误。这些状态代码表示请求可能出错，妨碍了服务器的处理。 
5xx - 服务器错误。表示服务器在尝试处理请求时发生内部错误。 这些错误可能是服务器本身的错误，而不是请求出错。

10.

链接：当使用HTML5的拖放API实现拖动时，需要监听”开始拖动”_京东笔试题_牛客网

拖放

拖放是一种常见的特性，即抓取对象以后拖到另一个位置。

在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

首先，为了使元素可拖动，把 draggable 属性设置为 true

拖动什么 - ondragstart

放到何处 - ondragover

ondragover 事件规定在何处放置被拖动的数据。

进行放置 - ondrop

当放置被拖数据时，会发生 drop 事件

11.

在 HTML 中，文档类型 doctype 的声明是必要的。在所有文档的头部，你都将会看到"<!DOCTYPE html>" 的身影。这个声明的目的是防止浏览器在渲染文档时，切换到我们称为“怪异模式 (兼容模式)”的渲染模式。“<!DOCTYPE html>" 确保浏览器按照最佳的相关规范进行渲染，而不是使用一个不符合规范的渲染模式。

12.

hover -> focus -> active

悬停 -> 聚焦 -> 响应

13.什么是语义化标签?

总结语义化优点：

易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。
有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
方便其他设备解析，如盲人阅读器根据语义渲染网页
有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。

marquee 元素（<marquee>） 用来插入一段滚动的文字。改元素已经 过时（被废弃），请不要再使用。

 以下是常见的语义化标签及其作用
<header>      <!--：页眉通常包括网站标志、主导航、全站链接以及搜索框。-->
<nav>           <!--：标记导航，仅对文档中重要的链接群使用。-->
<main>         <!--：页面主要内容，一个页面只能使用一次。-->
<article>       <!--：定义外部的内容，其中的内容独立于文档的其余部分。-->
<section>     <!--：定义文档中的节。比如章节、页眉、页脚或文档中的其他部分。-->
<aside>        <!--：定义其所处内容之外的内容。如侧栏、文章链接、广告、相关产品列表等。-->
<footer>        <!--：页脚，只有当父级是body时，才是整个页面的页脚。--> 

<title>           <!--：页面主体内容。-->
<hn>             <!--：h1~h6，分级标题，<h1> 与 <title> 协调有利于搜索引擎优化。-->
<ul>              <!--：无序列表。-->
<li>               <!--：有序列表。-->
<small>         <!--：呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权。-->
<strong>       <!--：和 em 标签一样，用于强调文本，但它强调的程度更强一些。-->
<em>            <!--：将其中的文本表示为强调的内容，表现为斜体。-->
<mark>         <!--：使用黄色突出显示部分文本。-->
<figure>        <!--：规定独立的流内容（图像、图表、代码等等）（默认有40px左右margin）。-->
<cite>           <!--：表示所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。-->
<blockquoto> <!--：定义块引用，块引用拥有它们自己的空间。-->
<q>                <!--：短的引述（跨浏览器问题，尽量避免使用）。-->
<time>           <!--：datetime属性遵循特定格式，文本必须是合法的时间格式。-->
<abbr>          <!--：简称或缩写。-->
<dfn>             <!--：定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。-->
<address>     <!--：作者、或组织的联系信息（电子邮件地址、指向联系信息页的链接）。-->
<del>             <!--：移除的内容。-->
<ins>             <!--：添加的内容。-->
<code>         <!--：标记代码。-->
<meter>        <!--：定义已知范围或分数值内的标量测量。（IE 不支持 meter 标签）-->
<progress>   <!--：定义运行中的进度（进程）。-->

数据序列化技术?

数据序列化是将内存对象转化为字节流的过程，它直接决定了数据解析效率以及模式演化能力（数据格式发生变化时，比如增加或删除字段，是否仍能够保持兼容性）。

14.

链接：以下哪个标签用于表示 HTML5 中不同类型输出的结果 ？__牛客网

output：<output> 标签定义不同类型的输出，比如脚本的输出。

placeholder：该提示会在输入字段为空时显示，并会在字段获得焦点时消失。

autofocus：当页面加载时 input 元素应该自动获得焦点。

required：如果使用该属性，则字段是必填（或必选）的。

15.

链接：下面标签嵌套正确的是_字节跳动笔试题_牛客网

a无所不能，但a不能嵌套自己

自定义列表 dl dt dd

块状元素可以嵌套行内元素和某些块级元素

行内元素不能嵌套块级元素

p不能包含块状元素

li比较牛逼，可以嵌套div 也可以嵌套它的父亲ul ol

链接：下面标签嵌套正确的是_字节跳动笔试题_牛客网

ul是unordered lists的缩写 (无序列表)

li是list item的缩写 （列表项目）

ol是ordered lists的缩写（有序列表）

dl是definition lists的英文缩写 (自定义列表)

dt是definition term的缩写 (自定义列表组)

dd是definition description的缩写（自定义列表描述）

nl是navigation lists的英文缩写 （导航列表）

tr是table row的缩写 （表格中的一行）

th是table header cell的缩写 （表格中的表头）

td是table data cell的缩写 （表格中的一个单元格）

16.

链接：下面哪些标签可以在HTML页面中插入GIF动画和MP3声音文_爱奇艺笔试题_牛客网

- video(H5新增)

作用：播放视频

<video>
    <source src="" type=""></source>
    <source src="" type=""></source>
</video>

- audio(H5新增)

作用: 播放音频

<audio src=""></audio>
<audio>
    <source src="" type="">
</audio>

img标签与image控件的一点有意思的区别

在网页开发中，要显示一个图片，有两种选择：第一种是使用HTML直接支持的img标签，设置其src属性。第二种是使用image这个服务器控件，设置其imageurl属性。

在很多时候，他们都没有什么大的区别。我们通常都建议使用Img标签。

有一个时候，可能用Image控件能解决一个棘手的问题。因为Img标签不能识别～这个符号，通常这个符号都是代表网站根目录，img标签只能使用相对路径引用图片。所以，在下面的情况下会有一点问题：

如果我们是在母版页中使用了一个图片，该母版页可能被很多页面用到，而且这些页面是分布在不同的文件夹的。那么，大家想想看，在不同的文件夹中的页面被显示出来的时候，当然会按照它这个文件夹的相对位置找那个图片，这样的话，除非每个文件夹里面都有那个图片，否则很多页面就看不到图片。

而用Image控件就能够解决这个问题

17.HTML基础选择器,组合选择器

..._第四范式笔试题_牛客网

18.

  • 鼠标移入onmouseover
  • 鼠标移出onmouseout
  • js里的属性名使用驼峰命名，而css里使用连接线“-”
  • 30px属性值为字符型，需要用单引号引住才对

<a href="#" οnmοuseοver="this.style.fontSize='30px'">注册</a>

19.

链接：基于以下 HTML 结构和 CSS 样式，文本的颜色应该是__牛客网
4个等级的定义如下：

第一等：代表内联样式，如: style=””，权值为1000。

第二等：代表ID选择器，如：#content，权值为100。

第三等：代表类，伪类和属性选择器，如.content，权值为10。

第四等：代表类型选择器和伪元素选择器，如div p，权值为1。

20.

<meter> 元素表示已知范围内的标量值或阶乘值。

它包括全局属性，如min、max、value、optimal、low、high、form等。

链接：哪个元素表示给定范围内的标量值 ？__牛客网
定义和用法：
<meter> 标签定义已知范围或分数值内的标量测量。也被称为 gauge（尺度）。
例子：磁盘用量、查询结果的相关性，等等。

注释：<meter> 标签不应用于指示进度（在进度条中）。如果标记进度条，请使用 <progress> 标签。

浏览器支持:FireFox chrome safari  Opera不支持IE，IE是业界毒瘤.

21.

SVG 即 Scalable Vector Graphics，是一种用来绘制 矢量图 的 HTML5 标签。你只需定义好XML属性，就能获得一致的图像元素。 

22.

initial-scale: viewport 的初始缩放级别（0-10之间的正数，1表示无缩放）

minimum-scale: viewport 能缩放的最小值（0-10之间的正数）

maximum-scale: viewport 能缩放的最大值（0-10之间的正数）

user-scalable: 是否可以手动缩放（yes or no）\

23.

链接：浏览器在一次 HTTP 请求中，需要传输一个 4097 字节_阿里巴巴笔试题_牛客网

IndexdDB 是 HTML5 的本地存储，把一些数据存储到浏览器（客户端）中，当与网络断开时，可以从浏览器中读取数据，用来做一些离线应用。

Cookie 通过在客户端 ( 浏览器 ) 记录信息确定用户身份，最大为 4 kb 。

url 参数用的是 get 方法，从服务器上获取数据，大小不能大于 2 kb 。

Session 是服务器端使用的一种记录客户端状态的机制 。

post 是向服务器传送数据，数据量较大。

local Storage 也是 HTML5 的本地存储，将数据保存在客户端中（一般是永久的）

24.

链接：下列哪个操作是W3C标准定义的阻止事件向父容器传递：_阿里巴巴笔试题_牛客网

DOM中的事件对象：（符合W3C标准）

   preventDefault()        取消事件默认行为

   stopImmediatePropagation()         取消事件冒泡同时阻止当前节点上的事件处理程序被调用。

   stopPropagation()      取消事件冒泡对当前节点无影响。

IE中的事件对象：

   cancelBubble()          取消事件冒泡

   returnValue()             取消事件默认行为

25.

你只要记住两点，设置一般用 set 开头， 获取采用 get 开头;
对于键值的话，一般都是 (key, value)的形式；

26.

牛客网 - 找工作神器|笔试题库|面试经验|实习招聘内推，求职就业一站解决_牛客网链接：关于XML，JSON、HTML5下面哪些描述是错误的&nbs_用友笔试题_牛客网
1、JSON是JavaScript Object Notation；XML是可扩展标记语言。
2、JSON是基于JavaScript语言；XML源自SGML。
3、JSON是一种表示对象的方式；XML是一种标记语言，使用标记结构来表示数据项。
4、JSON不提供对命名空间的任何支持；XML支持名称空间。
5、JSON支持数组；XML不支持数组。
6、XML的文件相对难以阅读和解释；与XML相比，JSON的文件非常易于阅读。
7、JSON不使用结束标记；XML有开始和结束标签。
8、JSON的安全性较低；XML比JSON更安全。
9、JSON不支持注释；XML支持注释。
10、JSON仅支持UTF-8编码；XML支持各种编码。

27.

链接：MVC是一种常见的架构。以下描述错误的是？_摩拜笔试题_牛客网

任何系统都可以使用mvc架构，mvc其实是一种思想，不止系统可以使用，比如家用电器甚至商场管理模式等等，都可以是mvc这种思想，我在前端这块是这样理解mvc的。

m，model，模型，相当于业务逻辑

v， view， 视图，相当于网页

c，controller， 控制器， 相当于页面中的交互

我甚至可以这样理解，控制器就相当于触发事件的button等，model就相当于触发事件后执行的那些js代码，view就相当于代码执行完之后渲染出的页面。

基于这种理解mvc的方式来看这个题目：

只有Web系统才能使用MVC   // 这明显错误,任何系统都可以使用MVC
只有能够保存正在数据库里面的实体才能称之为模型（Model） // MVC是中思想,不止保存在数据库里的数据才能称为模型
只有以HTML形式显示的页面才是视图（View） // 同上,程序中的交互界面也可以是视图
模型变更之后，只有控制器（Controller）才能驱动视图变更或重新渲染视图 // 是的

牛客网 - 找工作神器|笔试题库|面试经验|实习招聘内推，求职就业一站解决_牛客网求职之前，先上牛客，就业找工作一站解决。互联网IT技术/产品/运营/硬件/汽车机械制造/金融/财务管理/审计/银行/市场营销/地产/快消/管培生等等专业技能学习/备考/求职神器，在线进行企业校招实习笔试面试真题模拟考试练习，全面提升求职竞争力，找到好工作，拿到好offer。https://www.nowcoder.com/exam/test/64359620/submission?examPageSource=Intelligent&pid=45963851&testCallback=https%3A%2F%2Fwww.nowcoder.com%2Fexam%2Fintelligent%3FquestionJobId%3D10%26tagId%3D21003&testclass=%E8%BD%AF%E4%BB%B6%E5%BC%80%E5%8F%91

28.

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

29.

链接：下列哪些情况可触发reflow_蘑菇街笔试题_牛客网

体现：

repaint是某个DOM元素进行重绘；reflow是整个页面进行重排，也就是页面所有DOM元素渲染。

如何触发：

style变动造成repaint和reflow。

不涉及任何DOM元素的排版问题的变动为repaint，例如元素的color/text-align/text-decoration等等属性的变动。

除上面所提到的DOM元素style的修改基本为reflow。例如元素的任何涉及长、宽、行高、边框、display等style的修改。

常见触发场景：

  1. 触发repaint：
    1. color的修改，如color=#ddd；
    2. text-align的修改，如text-align=center；
    3. a:hover也会造成重绘。
    4. :hover引起的颜色等不导致页面回流的style变动。
    5. 等等太多，
  2. 触发reflow：
    1. width/height/border/margin/padding的修改，如width=778px；
    2. 动画，:hover等伪类引起的元素表现改动，display=none等造成页面回流；
    3. appendChild等DOM元素操作；
    4. font类style的修改；
    5. background的修改，注意着字面上可能以为是重绘，但是浏览器确实回流了，经过浏览器厂家的优化，部分background的修改只触发repaint，当然IE不用考虑；
    6. scroll页面，这个不可避免；
    7. resize页面，桌面版本的进行浏览器大小的缩放，移动端的话，还没玩过能拖动程序，resize程序窗口大小的多窗口操作系统。
    8. 读取元素的属性（这个无法理解，但是技术达人是这么说的，那就把它当做定理吧）：读取元素的某些属性（offsetLeft、offsetTop、offsetHeight、offsetWidth、scrollTop/Left/Width/Height、clientTop/Left/Width/Height、getComputedStyle()、currentStyle(in IE))；
    9. 链接：下列哪些情况可触发reflow_蘑菇街笔试题_牛客网
       

      reflow：几乎是无法避免的。现在界面上流行的一些效果，比如树状目录的折叠、展开（实质上是元素的显 示与隐藏）等，都将引起浏览器的 reflow。鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化，都会引起它内部、周围甚至整个页面的重新渲 染。通常我们都无法预估浏览器到底会 reflow 哪一部分的代码，它们都彼此相互影响着。

      repaint：如果只是改变某个元素的背景色、文 字颜色、边框颜色等等不影响它周围或内部布局的属性，将只会引起浏览器 repaint（重绘）。repaint 的速度明显快于 reflow

      下面情况会导致reflow发生

      1：改变窗口大小

      2：改变文字大小

      3：内容的改变，如用户在输入框中敲字

      4：激活伪类，如:hover

      5：操作class属性

      6：脚本操作DOM

      7：计算offsetWidth和offsetHeight

      8：设置style属性

      那么为了减少回流要注意哪些方式呢？

      1：不要通过父级来改变子元素样式，最好直接改变子元素样式，改变子元素样式尽可能不要影响父元素和兄弟元素的大小和尺寸

      2：尽量通过class来设计元素样式，切忌用style

30.空元素

链接：以下不属于空元素（void elements）的是：_360公司笔试题_牛客网

一个空元素（empty element）可能是 HTML，SVG，或者 MathML 里的一个不可能存在子节点（例如内嵌的元素或者元素内的文本）的element。

HTML，SVG 和 MathML 的规范都详细定义了每个元素能包含的具体内容（define very precisely what each element can contain）。许多组合是没有任何语义含义的，比如一个 <audio> 元素嵌套在一个 <hr> 元素里。

在 HTML 中，通常在一个空元素上使用一个闭标签是无效的。例如， <input type="text"></input> 的闭标签是无效的 HTML。

在 HTML 中有以下这些空元素：

 空元素 - 术语表 | MDN

 31.BFC

链接：以下哪些样式会创建 BFC ()_用友笔试题_牛客网

zoom:1 触发IE浏览器的haslayout达到和现代浏览器BFC的效果,可用于IE6、IE7的清除浮动

深入理解 BFC :
深度理解 BFC，解决高度塌陷问题_W1ping的博客-CSDN博客_bfc高度塌陷

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与,

哪些情况会产生触发BFC:

  1. 根元素
  2. float属性不为none
  3. position为absolute或fixed
  4. display为inline-block, table-cell, table-caption, flex, inline-flex
  5. overflow不为visible（一般设置overflow：hidden） 

32.         

超小屏幕（手机）小屏幕（平板）

中等屏幕（桌面）

大屏幕（桌面）

<768px

>=768

>=992

>=1200

.col-xs-

.col-sm-

.col-md-

.col-lg-

33.深入理解 iframe

 深入理解 iframe - Leophen - 博客园

 链接：以下哪个选项的描述是错误的_京东笔试题_牛客网

局限：

1、创建比一般的 DOM 元素慢了 1-2 个数量级

iframe 的创建比其它包括 scripts 和 css 的 DOM 元素的创建慢了 1-2 个数量级，使用 iframe 的页面一般不会包含太多 iframe，所以创建 DOM 节点所花费的时间不会占很大的比重。但带来一些其它的问题：onload 事件以及连接池（connection pool）

2、阻塞页面加载

及时触发 window 的 onload 事件是非常重要的。onload 事件触发使浏览器的 “忙” 指示器停止，告诉用户当前网页已经加载完毕。当 onload 事件加载延迟后，它给用户的感觉就是这个网页非常慢。

window 的 onload 事件需要在所有 iframe 加载完毕后（包含里面的元素）才会触发。在 Safari 和 Chrome 里，通过 JavaScript 动态设置 iframe 的 SRC 可以避免这种阻塞情况

3、唯一的连接池

浏览器只能开少量的连接到 web 服务器。比较老的浏览器，包含 Internet Explorer 6 & 7 和 Firefox 2，只能对一个域名（hostname）同时打开两个连接。这个数量的限制在新版本的浏览器中有所提高。Safari 3+ 和 Opera 9+ 可同时对一个域名打开 4 个连接，Chrome 1+, IE 8 以及 Firefox 3 可以同时打开 6 个

绝大部分浏览器，主页面和其中的 iframe 是共享这些连接的。这意味着 iframe 在加载资源时可能用光了所有的可用连接，从而阻塞了主页面资源的加载。如果 iframe 中的内容比主页面的内容更重要，这当然是很好的。但通常情况下，iframe 里的内容是没有主页面的内容重要的。这时 iframe 中用光了可用的连接就是不值得的了。一种解决办法是，在主页面上重要的元素加载完毕后，再动态设置 iframe 的 SRC。

4、不利于 SEO

搜索引擎的检索程序无法解读 iframe。另外，iframe 本身不是动态语言，样式和脚本都需要额外导入。综上，iframe 应谨慎使用。

34.

链接：DOM 文件对象模型，提供了树状结构的表示方法，以下描述正确_京东笔试题_牛客网

一、DOM树一共有12种节点类型，常用的有4种：

1、Document类型（document节点）——DOM的“入口点”

2、Element节点（元素节点）——HTML标签，树构建块

3、Text类型（文本节点）——包含文本

4、Comment类型（注释节点）——有时我们可以将一些信息放入其中，它不会显示，但JS可以从DOM中读取它。

35.回流与重绘

 链接：下列对 Reflow（回流）和 Repaint（重绘）的描述_顺丰集团笔试题_牛客网

一句话总结，回流一定触发重绘，但重绘不一定触发回流

分析选项：

  • A：Repaint比Reflow更加花费时间影响性能
        从局部和整体的关系就可以看出应该是 Reflow比Repaint更加花费时间影响性能
  • B：一条条地修改DOM的样式要比先定义好css的class然后修改DOM的className减少reflow/repaint
        每一次修改都触发 reflow/repaint ，所以当然是用class统一修改更能减少触发概率，提升性能；另外现代的游览器对一段时间内的平凡修改样式做了优化，不会每修改一次便 reflow/repaint 一次，而是等待最后一次修改完成之后再统一 reflow/repaint  
  • C：为HTML标签使用fixed或absoult的position，那么修改他们的CSS是不会reflow的
        标签的position设置为fixed或absolut会导致标签脱流，故再修改它们的样式不会引起reflow，但还是有 repaint 哒，如果不能 repaint 就意味着你不能修改标签的样式啦！
  • D: 改变了某个元素的背景颜色，文字颜色等会导致Reflow
            如上文所述，颜色只会导致 repaint  不会 Reflow

更多详细信息可以查看：

https://segmentfault.com/a/1190000017329980

36.

链接：下列说法错误的是()_用友笔试题_牛客网

display：none指的是元素完全不陈列出来，不占据空间，涉及到了DOM结构，故产生reflow与repaint

visibility：hidden指的是元素不可见但存在，保留空间，不影响结构，故只产生repaint，但不可触发绑定事件

opacity=0：指的是元素不可见但存在，保留空间，不影响结构，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的

37. 

1.TD，英文全称是"table data cell"，中文含义："表中的数据单元".
2.TR ，英文全称是"table row"的缩写，中文含义"表行".
3.TH，英文全称是"table header cell"的缩写，中文含义"表头单元格".


 

斜躺青年
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
前端面试---笔试记录
weixin_49175902的博客
04-28 2789
今天上午去参加了一场国企的笔试面试。到中午的时候，通知笔试成绩合格。紧接着就是下午的面试。面试时是两位面试官，轮番吊打我，然后告诉我回家等通知，愉悦（ganga）的气氛就在此时凝固了。总之，面完出来，觉得自己这些年啥也没学会。和面试官say byebye以后拖着没有知识的脑袋回家了。下面总结一下今天的五十道笔试题。都是单选，每题2分，这里就不附正确答案了，题目比较基础，都自己尝试着做一下吧，就当是给正在找工作的小朋友们加点菜吧。 1、哪个元素表示给定范围内的标量值？ A.option B.meter C.l
【刷题H5应用网站源码】无后端无数据库轻量化部署简单+四种刷题模式
08-14
特色内容 无后端、无数据库轻量化部署简单 使用JSON作为题库存储，层次清晰，结构简单易懂 有配套的word模板和模板到JSON转换工具 四种刷题模式：顺序刷题、乱序刷题、错题模式、背题模式 主要结构 index.html 主页，显示题库列表 type.html 刷题模式选择页面，可选四种模式 timu.html 刷题页面 json/*.json 存储题库 js/public.js js数组对应JSON题库的文件路径和描述信息ID等 py-timuToJson 转换JSON的模板和脚本
零基础html学习/刷题-第一期
GUIDM的博客
08-15 619
之前写的html学习的文章都是零零散散的，这次出个整合的专栏，把内容集中起来，做个知识复盘，顺带刷刷题。
【牛客网-前端笔试题】——HTML专项练习
xiaolu567的博客
09-16 7233
秋招正式批已经到来,相信不少小伙伴在为找工作而烦恼,对自己的实力不太自信,感觉好难找工作,不用怕,下面我来给各位推荐一个知名刷题网站《牛客》
初学一个月html，css，js，JQ制作的网页刷题
m0_64120895的博客
10-28 1003
初学一个月html，css，js，JQ制作的网页刷题
html牛客网刷题---选择题
qq_37244548的博客
07-30 426
1，超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了，解决方法是改变CSS属性的排列顺序？（） Aa:link {} a:visited {} a:hover {} a:active {} Ba:visited {} a:link {} a:hover {} a:active {} Ca:active {} a:link {} a:hover {} a:visited {} Da:link {} a:active {} a:hover {} a...
刷题H5应用网站源码 无后端无数据库轻量化部署简单+四种刷题模式
07-25
刷题 H5应用网站源码，无后端无数据库轻量化部署简单+四种刷题模式，无后端、无数据库轻量化部署简单 使用 JSON 作为题库存储，层次清晰，结构简单易懂，有配套的 word 模板和模板到 JSON 转换工具，四种刷题模式：...
面试刷题必备
12-18
最新的传智播客web前端面试总结,复习web知识,查漏补缺必备
刷题网站666 yyds
05-07
刷题 刷题 刷题 刷题 刷题 刷题 网站 网站 网站 网站 网站 网站 赶快行动吧 赶快行动吧 赶快行动吧 赶快行动吧 赶快行动吧 赶快行动吧 ！！！！！！ ！！！！！！ ！！！！！！ ！！！！！！ ！！！！！！ ！！！！...
leetcode刷题.html
05-26
力扣刷题，由于面试需要，整理一下自己的刷题经验，今后会一直总结经验，向大家分享自己的心得，提升自己，希望大家多多关照，有问题的话dd我
Interview:面试刷题
05-15
在准备面试时，尤其是针对IT行业的面试，刷题是一个非常重要的环节。这通常涉及到解决算法问题、理解数据结构以及熟悉编程语言的细节。本压缩包文件"Interview-main"可能包含了与HTML相关的面试题目和解答，HTML是...
牛客网html里的各种刷题
Jm990407的博客
10-11 677
1.关于命名方式： 驼峰式命名： （1）函数名中的每一个逻辑断点都有一个大写字母来标记，如：firstName （2）函数名中的每一个逻辑断点都有一个下划线来标记，如：first-name 大驼峰式命名例子：FirstName 小驼峰式命名例子：firstName 匈牙利命名法： 在变量名前面加上相应的小写字母的符号标识作为前缀，表时出变量的作用域，类型等这些符号可以多个同时使用，顺...
HTML刷题---table
oyx的博客
02-28 140
HTML table
牛客html刷题笔记1
JIAY_WX的博客
06-11 277
html 前端刷题笔记
HTML/CSS刷题笔记1
sinat_38449828的博客
10-01 390
题目来源：牛客网 1、IE9及以上支持box-radius以及box-shadow属性，Chorme\Safari\Firefox支持所有边框属性 2、sessionStorage：创建一个本地存储的数据对，数据名称，数据值，临时保存本窗口的数据，当窗口关闭时数据也会被删除，想要永久保存（除非手动删除）可以用localStorage。 3、link和@import的区别，1、link是XML...
HTML、CSS刷题总结
zyj123__的博客
07-17 628
这道题是自己做错的一道题，原因也是很丢人了，竟然忘记了li也是块级元素，c选项代码结构看起来复杂，其实只是考察块级元素可以嵌套块级元素使用，ol与li都是块级元素,所以这个选项结构是没有问题的。 a呢是因为根据 HTML5 规范，在没有其他合适标签更合适时，才应该把 标签作为最后的选项。HTML5 规范声明：应该使用 h1-h6 标签来表示标题，使用 em 标签来表示强调的文本，应该使用 strong 标签来表示重要文本，应该使用 mark 标签来表示标注的/突出显示的文本。 第二道 这道其实没什么其他.
比较好的刷题网站推荐
weixin_34337381的博客
07-06 1335
1.Leetcode鼎鼎大名的Leetcode，据不完全统计在上面被刷过的题可以围绕地球三圈。（没说赤道哈，就是这么严谨。）总之，很多国内外的码农在上面刷题。难度从easy到hard都有，而且覆盖面极广。现在还增加了数据库和shell，相匹配的论坛也可以多看看。很锻炼和国外码农沟通的能力，对于以后去混Github也有好处。 特点：各种语言支持很广泛，题型覆盖很广，测试数据集较弱。 2.Codi...
刷题-html
Mikon_0703
11-10 153
script标签中defer和async的区别？ defer：script被异步加载后不会立即执行，而是等待文档解析完成后执行 async：script异步加载完成后立即执行 前端存储方式 localStorage、sessionStorage、cookies、WebSQL、IndexedDB localStorage：键值对（key-value），永久性存储，大小为5M，兼容IE8+ sessionStorage：页面关闭后会被清理，不能在同源窗口中共享，会话级别的存储方式 cookies：本地存..
【刷题篇】html+css+js 4/10
yjj510818155的博客
03-12 337
牛客网题目分析 解析： 1.大多数HTML元素被定义为块级元素或内联元素 HTML < div > 元素 HTML < div > 元素是块级元素，它是可用于组合其他 HTML 元素的容器。 < div >元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。 如果与 CSS 一同使用，< div >元素可用于对大...
html+javascript写一个基于题库的刷题程序
最新发布
11-16
基于题库的刷题程序可以使用HTML和JavaScript来实现。以下是一个简单的示例： 首先，需要创建一个包含题库的数组，每个题目都包含题目描述、选项和正确答案等信息。 在HTML部分，我们可以创建一个显示题目、选项和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

斜躺青年

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值