前端4-8-1：Doctype、display、visibility、opacity、全局属性、事件与方法

最新推荐文章于 2023-06-12 16:53:51 发布
最新推荐文章于 2023-06-12 16:53:51 发布
阅读量1.2k 收藏 4
点赞数 1
分类专栏： Html5+Css3 文章标签： Doctype display 全局属性、事件与方法 opacity visibility
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44015669/article/details/115530992
版权

1、下面有关html Doctype的描述，说法错误的是？

A、它的责任就是告诉浏览器文档使用哪种html或者xhtml规范

B、不同文档模式主要影响CSS内容的呈现，尤其是浏览器对盒模型的解析

C、不同浏览器在混杂模式下的行为差异非常大，如果不使用某些hack技术，跨浏览器的行为根本就没有一致性可言。

D、如果在文档开始处没有发现文档类型声明，则所有浏览器都会默认开启严格模式

【解析】

D：Doctype不存在或错误，浏览器默认 混杂模式

【知识点：Doctype】

  • DOCTYPE文档类型的声明，就是告诉浏览器使用哪种规范来解释这个文档中的规范。
  • 如果没有它，浏览器会使用怪异模式 DOCTYPE声明必须在HTML文档的第一行，位于<html>标签之前 所有的浏览器都有两种模式：怪异模式和严格模式（也有人叫标准模式）。
  • IE 6 for Windows/mac, Mozilla, Safari和Opera 都实现了这两种模式，但是IE 6以下版本永远定在了怪异模式。
  • 关于HTML：严格模式、混杂模式、怪异模式 的 区别以及Doctype的作用。详情请点击查阅

2、把鼠标移到按钮并点击时，会产生一串什么样的事件？

A、active hover focus

B、foucs hover active

C、hover active foucus

D、hover focus active

【知识点】

  • hover -> focus -> active
  • 悬停 -> 聚焦 -> 响应

3、下列说法错误的是()

A、设置display:none后的元素只会导致浏览器的重排而不会重绘

B、设置visibility:hidde后的元素只会导致浏览器重绘而不会重排

C、设置元素opacity:0之后，也可以触发点击事件

D、visibility:hidden的元素无法触发其点击事件

【知识点：display、visibility、opacity】

  • display：none指的是元素完全不陈列出来，不占据空间，涉及到了DOM结构，故产生reflow与repaint
  • visibility：hidden指的是元素不可见但存在，保留空间，不影响结构，故只产生repaint，但不可触发绑定事件
  • opacity=0：指的是元素不可见但存在，保留空间，不影响结构，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的

详见CSS：display、visibility、opacity 的详解 与比较

4、以下是Video/Audio中会触发的事件的有？

A、load

B、play

C、seeked

D、abort

【知识点】

  • 方法：load() play() pause()
  • 事件：play() playing() pause() seeked() seeking() abort()当音频/视频的加载已放弃时触发

 

濯一一
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
前端面试题以及vue前端面试题
01-22
17. CSS 中隐藏元素的方法：可以使用 display、visibility、opacity 等属性来隐藏元素。 18. 超链接访问后 hover 样式不出现的问题：可以使用 CSS 伪类或 JavaScript 解决。 19. Css Hack：是一种特殊的 CSS 语法，...
前端面试宝典（前端知识）
12-23
- **隐藏元素**：可以使用display:none, visibility:hidden, 或CSS3的opacity:0。 - **居中布局**：可以使用margin负值、Flexbox或Grid布局实现水平和垂直居中。 - **position与display**：position控制元素相对...
CSS中的display与visibility
前端学习博客
01-17 399
文章目录一.display: none二.visibility: hidden三.opacity: 0四.`display: none`与`visibility: hidden`的区别五.元素隐藏方法总结： 一.display: none DOM 结构：浏览器不会渲染 display 属性为 none 的元素，不占据空间； 事件监听：无法进行 DOM 事件监听； 性能：动态改变此属性时会引起重排，性能较差； 继承：不会被子元素继承，毕竟子类也不会被渲染； transition：transition 不支持
HTML理论练习题(六)
欣欣酱博客
03-07 1596
1.浏览器将打开一个新的窗口，应在a标签中使用 "target=_self" "target=_top" "target=_blank" "target=_parent" 解析:self是在当前窗口打开新的；top是在当前框架打开新网页；blank是在父窗口打开新的；parent是在父框架打开新的； 2.要去掉文本超链接的下划线，下列正确的是（） a{underline:none} a{ text-decoration:none} a{ text-decoration:und
2021-05-25
yyhjiulaikankan的博客
05-25 1910
HTML面试题总结2 1.属于HTML5标签语意化的元素有 (AD) A.article、footer B.block C.section、banner D.header、nav 解释：html5手册语义化标签：article、section、aside、hgroup、header、 footer、nav、time、mark、figure、figcaption、contextmenu+menu 2.下面有关html结构正确的有（ ABC ） A.<ul><li></li&g
visibility:hidden和display:none的区别
Sfh的博客
07-12 934
有时候我们在对前端网页布局的过程中，会碰到需要得把某个元素给隐藏起来，这个时候我们一般有两种做法： display:none，设置这个属性后，该元素可以理解成从页面上完全消失了，看不见也摸不着，而且会导致页面的重绘和重排，同时还触发不了点击事件 visibility:hidden，设置这个是属性后，该元素可以理解成我们肉眼看不见但是依然存在，也就是看不见但摸得着，只会导致页面的重绘，同时可以触发点击事件（插个题外话：设置元素opacity:0之后，也可以触发点击事件） ...
2021我整理的53到面试题【附答案】
前端人公众号作者
03-06 2339
1.下面输出的结果为? function(){ console.log(a) vara=1; functiona(){} console.log(a) } A.statements require a function name B.1,ƒ a(){} C.ƒ a(){},1 解析： 选 A 2.下面输出的结果为? for(vari=0;i<3;i++){ setTimeout(function(){ console...
Web前端面试题，包括HTM、CSS、JavaScript等相关题
10-19
- **隐藏元素**：display:none和visibility:hidden的区别在于是否占用空间。 7. **CSS技巧与问题**： - **Hover问题**：在已访问链接上hover样式失效，可通过CSS伪类解决。 - **Css Hack**：针对特定浏览器的CSS...
2022最全前端面试题汇总
04-03
19. 隐藏DOM元素：使用`display:none`、`visibility:hidden`或`opacity:0`，区别在于是否占据空间和是否可见。 20. 超链接hover问题：如果已访问的链接没有hover样式，可能是浏览器默认样式覆盖，可通过CSS重置或...
前端面试题，包含HTML，css，js
11-07
20. **CSS隐藏元素**：可以使用display:none、visibility:hidden、opacity:0、position:absolute/fixed配合负margin或width/height:0等方法隐藏元素。 21. **Css Hack**：由于不同浏览器对CSS解析的差异，有时需要...
HTML+CSS阶段练习（易错）
最新发布
m0_54430913的博客
06-12 489
HTML+CSS阶段性习题（易错）
前端面试题总结（4）
wuyxinu的博客
06-21 8580
一、题目 1、以下代码执行后，console 输出的信息是？ for(let i = 0; i < 5; i++){ requestAnimationFrame(() => console.log(i)); } 2、以下代码中文字的最终颜色是 <style> div > #title{color: blue;} div > h3#title.title{color: red;} [lang="en"] h3.title{color: g
HTML5事件—visibilitychange 页面可见性改变事件
Bright2017的博客
11-10 1244
visibilitychange事件是浏览器新添加的一个事件，当浏览器的某个标签页切换到后台，或从后台切换到前台时就会触发该消息，现在主流的浏览器都支持该消息了
html 隐藏元素点击事件,css隐藏元素的几种方法中可以触发点击事件的是？
weixin_42314648的博客
06-04 1814
css隐藏元素的几种方法中可以触发点击事件的是是opacity设置为0的方法。css隐藏元素的方式：1、display:none;.box{display: none;}最简单也最粗暴的方法就是设置元素的display属性为none。设置为display:none;的元素将不会再占用页面空间，其占用的空间会被其他元素所占有，从而会引起浏览器的重排和重汇。2、visibility: hidden.b...
display、opacity、visibility的区别？
yiyueqinghui的博客
07-10 1000
共同点 都让元素不可见 二者区别 隐藏后是否占据原有空间 display：none 从渲染树中消失，不占据空间，不能点击 visibility：hidden 从渲染树消失，占据空间，不能点击 opacity：0 从渲染树消失，占据空间，可以点击 性能 display：none 引起页面回流与重绘，性能消耗大 visibility：hidden 只造成本元素的重绘，性能消耗较少 opacity：0 只造成本元素重绘，性能消耗较少 这一点的区别是由于是否隐藏后是否占据原有空间的区别而引起的 继承
visibility:hidden的元素绑定click event会起作用吗
qq_21058391的博客
10-12 8772
有时候，你使用了flex布局，但是不得不隐藏某个元素 1）若display:none,则破坏了原有的布局。不可行 2）visibility:hidden则占据原来的位置，很方便， 但元素现在可以点击吗？答案是不可以的。设为visibility:hidden后，元素现在是不可以选择的 既然无法选择，即使绑定了click事件，也自然无法点击啦！
HTML语义化说法正确的,12题精选的CSS面试题（含解析）
weixin_35012177的博客
06-04 1779
本文收集整理了12道关于CSS的面试题，大家一起来看看吧。1.在 css 选择器当中，优先级排序正确的是()A、id选择器>标签选择器>类选择器B、标签选择器>类选择器>id选择器C、类选择器>标签选择器>id选择器D、id选择器>类选择器>标签选择器4个等级的定义如下：第一等：代表内联样式，如: style=””，权值为1000第二等：代表ID选择...
80道前端面试经典选择题
热门推荐
qq_40588413的博客
02-08 1万+
前言 看了一下各种面试题，选择题是必有的 所以我整理了一些经典的前端面试选择题，希望能对大家日后找工作有所帮助！ HTML/CSS 1、在 css 选择器当中，优先级排序正确的是（） A、id选择器>标签选择器>类选择器 B、标签选择器>类选择器>id选择器 C、类选择器>标签选择器>id选择器 D、id选择器>类选择器>标签选择器 解析： 选D...
解决设置了display:none的元素，会先展示再隐藏
weixin_30784141的博客
07-31 2665
问题：元素明明设置了display:none，但是在刷新页面的时候却会先显示了出来，然后才会隐藏，实现display:none 原因：由于元素渲染的时候，样式还没有应用上去，导致的 解决办法：使用内联样式，动态改变display的值为none或者是block，使用moseenter和mouseleave事件替代hover，在moseenter和mouseleave事件中去改变disp...
前端面试必备：HTML-CSS-JS全解析与性能优化技巧
19. 隐藏元素 - 使用display:none、visibility:hidden或opacity:0等属性使元素不可见。 20. hover问题 - 需要清除hover伪类的默认样式，或者使用:hover伪类覆盖原有样式。 21. CSS Hack - 特殊的CSS技巧，针对老版...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

濯一一

你的鼓励：我最大的动力

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

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

打赏作者

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

抵扣说明：

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

余额充值