基础面试题——HTML/CSS

最新推荐文章于 2024-08-09 18:20:18 发布
最新推荐文章于 2024-08-09 18:20:18 发布
阅读量1.5k 收藏 15
点赞数 4
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jensonCSDN/article/details/78888916
版权

1. 常用那几种浏览器测试？有哪些内核(Layout Engine)?

(Q1)浏览器：IE，Chrome，FireFox，Safari，Opera。
(Q2)内核：Trident，Gecko，Presto，Webkit。

2. 说下行内元素和块级元素的区别？行内块元素的兼容性使用？（IE8 以下）

(Q1)行内元素：会在水平方向排列，不能包含块级元素，设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。 块级元素：各占据一行，垂直方向排列。从新行开始结束接着一个断行。
(Q2)兼容性：display:inline-block;*display:inline;*zoom:1;

3.清除浮动有哪些方式？比较好的方式是哪一种？

（1）父级div定义height。
（2）结尾处加空div标签clear:both。
（3）父级div定义伪类:after和zoom。
（4）父级div定义overflow:hidden。
（5）父级div定义overflow:auto。
（6）父级div也浮动，需要定义宽度。
（7）父级div定义display:table。
（8）结尾处加br标签clear:both。

4.box-sizing常用的属性有哪些？分别有什么作用？

(Q1)box-sizing: content-box|border-box|inherit;
(Q2)content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框(元素默认效果)。 border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

5.Doctype作用？标准模式与兼容模式各有什么区别?

(Q1)告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
(Q2)标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

6.HTML5 为什么只需要写 ？

HTML5不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）。
而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

7.页面导入样式时，使用link和@import有什么区别？

（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;
（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
（3）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;

8.介绍一下你对浏览器内核的理解？

主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
JS引擎则：解析和执行javascript来实现网页的动态效果。
最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

9.html5有哪些新特性？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。

(1)绘画 canvas;
(2)用于媒介回放的 video 和 audio 元素;
(3)本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;
(4)sessionStorage 的数据在浏览器关闭后自动删除;
(5)语意化更好的内容元素，比如 article、footer、header、nav、section;
(6)表单控件，calendar、date、time、email、url、search;
(7)新的技术webworker, websocket, Geolocation;
IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式。当然也可以直接使用成熟的框架、比如html5shim;

<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->

10.简述一下你对HTML语义化的理解？

用正确的标签做正确的事情。
html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;
搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;
使阅读源代码的人对网站更容易将网站分块

乡子
关注
看完这篇文章保你面试稳操胜券——基础篇（html/css)
官方推荐
11-19 3万+
✨欢迎各位小伙伴：\textcolor{blue}{欢迎各位小伙伴：}欢迎各位小伙伴： ✨ 进大厂收藏这一系列就够了，全方位搜集总结，为大家归纳出这篇面试宝典，面试途中祝你一臂之力！，共分为四个系列 ✨包含Vue40道经典面试题\textcolor{green}{包含Vue40道经典面试题}包含Vue40道经典面试题 ✨包含react12道高并发面试题\textcolor{green}{包含react12道高并发面试题}包含react12道高并发面试题 ✨包含微信小程序34道必问面试题\textc.
2023高薪前端面试题（一、前端基础——css）
iaz999的博客
04-28 1451
Flex如果动画只是简单的状态切换，不需要中间过程控制，在这种情况下，css动画是优选方案。如果你在设计很复杂的富客户端界面或者在开发一个有着复杂UI状态的 APP。那么你应该使用js动画，这样你的动画可以保持高效，并且你的工作流也更可控。js动画与css3动画的区别_js逐帧动画_Sco_Jing1031的博客-CSDN博客。
js基础面试题.html
05-24
<h1>js基础面试题</h1> <h2>1、js 的类型</h2> 1.认识js的基本类型 > typeof undefined, //undefined typeof 'abc' ,//string typeof 123 ,//number typeof true ,//boolean typeof {} ,//object typeof [] ,//object typeof null ,//object typeof console.log ,//function typeof Symbol(1) // symbol <div>2、js 类型的原型搜索链</div> > Number.__proto__ === Function.prototype // true Boolean.__proto__ === Function.prototype // true String.__proto__ === Function.prototype // true Object.__proto__ === Function.prototype // true Function.__proto__ === Function.prototype //true Array.__proto__ === Function.prototype // true RegExp.__proto__ === Function.prototype // true Error.__proto__ === Function.prototype // true Date.__proto__ === Function.prototype // true <h2>2、js 引用类型与值类型</h2> <div>1.引用类型</div> > var a = {"x" : 1} ； > var b = a ; > a.x = 2; > console.log(b.x); //2 > a = { "x" : 3}; > console.log(b.x); //2 > <div>2.值类型</div> > var a = 88; > var b = a; > a = 98; > console.log(b); // 98 > b = 100; > console.log(b) ; // 100 > console.log(a) ; // 98 3.值类型跟引用类型的总结 >function abc(x){ > console.log(typeof (x)); //undefinded 值类型 > console.log(typeof (x)); //number 值类型 > console.log(typeof (‘abc’)); //string 值类型 > console.log(typeof (true)) ； //Boolean 值类型 > console.log(typeof (function(){ })) //function 引用类型 > console.log(typeof ([1,"a",,true])) //Array 引用类型 > console.log(typeof ({ a:10, b: 20})) //Object 或者json 引用类型 > console.log(typeof (null)); // null 引用类型 console.log(typeof (new Number(10))); //内置对象 引用类型 } >这里还有一道变态的前端面试题,仅限参考 >var a = { a: 1} ; >var b = a: >a.x = a = { a: 2 }; >console.log( a.x ); // --> undefined >console.log( b.x ) ; [ object Object ] > >到现在我都没搞懂这是其中的赋值问题 <h2>ES6 中的 var , let , const 的区别</h2> > 1.使用 var 声明的是变量，其作用域为该语句所在的函数内部，且存在变量提升现象 > 2.使用 let 声明的是变量，其作用域为该语句所在的代码块内，不存在变量提升 > 3.使用 const 声明的是常量，其作用域为该语句所在的代码块内，不存在变量提升, 值是不可修改更改的
Web开发基础知识
mwtopfire的博客
09-11 402
1.常用那几种浏览器测试？有哪些内核(Layout Engine)? (Q1)浏览器：IE，Chrome，FireFox，Safari，Opera。 (Q2)内核：Trident，Gecko，Presto，Webkit 2.说下行内元素和块级元素的区别？行内块元素的兼容性使用？（IE8 以下） (Q1)行内元素：会在水平方向排列，不能包含块级元素，设置width无效，h
大前端面试题集锦——HTML篇
最新发布
qq_41455525的博客
08-09 1051
常见的html面试题
HTML最基础面试题
weixin_42632642的博客
04-11 337
meta标签 meta标签分为俩大部分：HTTP标题信息(http_equiv)和页面描述信息（name） meta标签简述 meta常用于定义页面的说明，关键字，最后修改日期，和其他元数据， 这些元数据将服务浏览器（如何布局或重载页面）搜索引擎和其他网络服务 ...
45道CSS基础面试题（附答案）
weixin_30553065的博客
02-23 561
1 、介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？ 标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin 2、 box-sizing属性？ 用来控制元素的盒子模型的解析模式，默认为content-boxcontext-bo...
前端面试题对于HTML 语义化的理解？
m0_56344602的博客
09-24 148
语义化的好处 (利于SEO, 可阅读性更好) 语义化前： 在语义化之前，你可能会使用各种各样的标签去实现同样的功能，比如： 使用 span、div、p、a 等做文字, 做按钮 使用 div 做一切 从功能方面来说，这确实是不存在什么问题的，完全可以达到功能效果。但这不符合直觉，非常不友好： 对人不友好：阅读代码的人不能一眼看出代码的功能 对机器不友好：解析代码的程序不能很好的对这些元素进行分类处理 语义化后： HTML5 规范提倡语义化标签，即使⽤恰当语义的.
2023高薪前端面试题（一、前端基础——HTTP/HTML/浏览器）
iaz999的博客
04-29 3229
语义化就是构成HTML结构的标签要有意义。比如有这样的标签：header表示页面头部main表示页面主题footer表示页面底部那么这些标签构成的HTML结构就是有意义的，也是语义化的。​ 如果说页面的头部、主体以及底部都用div来表示，那么他就不是一个语义化的HTML结构了。
前端面试题（1）——HTML&CSS
Sydneylime的博客
11-08 78
默认情况下，盒子的width和heigth属性只是设置content的宽和高，盒子真正的宽：width+border+padding，真正的高：height+border+padding。优先级：内联样式>ID选择器>类选择器=属性选择器=伪类选择器>元素选择器=关系选择器=伪元素选择器>通配符选择器。行内元素在一行排列，宽和高不生效，大小靠内容撑开，左右margin生效，上下不生效，padding都生效。块级元素独占一行，宽和高生效，默认宽和父元素一样，内容撑开高度，margin和padding生效。
html+css+js面试总结
11-08
前端基础知识面试必备，面试中基本上所有的基础知识都涵盖在内。
HTML CSS 基础 面试题
Ellasun_web的博客
06-26 2308
HTML CSS 基础 面试题
HTML基础面试题
weixin_49757430的博客
03-30 162
1 DOCTYPE有什么作用？标准模式与混杂模式如何区分？它们有何意义? 告诉浏览器使用哪个版本的HTML规范来渲染文档。DOCTYPE不存在或形式不正确会导致HTML文档以混杂模式呈现。 标准模式（Standards mode）以浏览器支持的最高标准运行；混杂模式（Quirks mode）中页面是一种比较宽松的向后兼容的方式显示。 2 HTML5为什么只需要写 <!DOCTYPE HTML>？ HTML5不基于SGML（Standard Generalized Markup L.
HTML基础&常见面试题
hangao233的博客
04-11 2147
1. HTML常用标签 1.1 排版标签 排版标签主要和css搭配使用，显示网页结构的标签，是网页布局最常用的标签。 1）标题标签h 其基本语法格式如下： <h1> 标题文本 </h1> <h2> 标题文本 </h2> <h3> 标题文本 </h3> <h4> 标题文本 </h4> 2）段落标签p 作用语义： 可以把 HTML 文档分割为若干段落。在网页中要把文字有条理地显示出来
html+css基础面试题
acm_cn1234567890的博客
07-23 286
✨对HTML语义化标签理解 html5的新特性 script标签中defer和async的区别 ss引入的方式有哪些? link和@import的区别是? 两者都是外部引用CSS的方式 link和页面一同加载,import在页面加载完之后再加载 link兼容性比import好,因为link本身就是html标签 link可以使用js对其修改,import不可以 link还可以定义 RSS、rel 连接属性等,import只能导入样式 HTML行内元素、块状元素、行内块状元素 c..
Html基础面试题
baidu_26786335的博客
08-16 1217
1.前端三要素： html ,css ,js 2.谈谈你对B/S架构的认识？ 就是浏览器/服务器模式，。这种模式统一了客户端，将系统功能实现的核心部分集中到服务器上，简化了系统的开发、维护和使用。客户机上只要安装一个浏览器，服务器安装服务器软件，数据库软件等。 3.html网页的结构 <html> <head> </head> <body> </body> </html> 4.列出常见的标签，并简单介绍这些标签用在什么场景？
HTML基础面试问题
qq_39349116的博客
03-19 126
1.*结构（html）、表现（css）和行为（javascript） 2.html标签语义化的目的： 一、方便代码的阅读和维护。 二、同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容 。 三、使用语义化标签会具有更好地搜索引擎优化。 **3.html的常用标签：**标题标签h 、段落标签p 、水平线标签hr(认识)、换行标签br、div 和 span标签、文本格式化标签（b、str...
CSS基础&面试题精选
hangao233的博客
04-17 2358
css 基础 1. 引入CSS样式表（书写位置） 1.1 行内式（内联样式） <标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;">内容</标签名> 实际上任何HTML标签都拥有style属性，用来设置行内式。 案例： <div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div> 1.2 内部样式表（内嵌样式表） 概念： 称内嵌式，是将CSS代码集中写在HTML文档
“前端基础面试题总结——HTML结构、CSS布局与新特性概要”
前端基础面试题涵盖了HTML和CSS等前端知识的基本概念和常见问题，这些问题不仅可以帮助面试者检验自己的掌握程度，也可以帮助面试官评估应聘者的能力和经验。在HTML方面，面试题涉及HTML结构的语义化、元素属性的...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值