H5模拟面试题

article/2025/10/9 15:00:08

HTML & HTML5

Position属性的值有哪些？怎样使用？

  • absolute
    生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过”left”,”top”,”right”以及”bottom”属性进行规定。
  • fixed
    生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
  • relative
    生成相对定位的元素，相对于其正常位置进行定位。因此，”left:20”会向元素的 LEFT 位置添加 20 像素。
  • static
  • 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
  • inherit
    规定应该从父元素继承 position 属性的值。

Doctype有什么作用？严格模式与混杂模式有什么区别？

  • Doctype作用

<!DOCTYPE>声明叫做文件类型定义DTD（Document Type Definition），声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。<!DOCTYPE>声明必须在 HTML 文档的第一行，这并不是一个 HTML 标签。

  • 严格模式与混杂模式的区别:
  • 严格模式：又称标准模式，是指浏览器按照 W3C 标准解析代码。
  • 混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码。
  • 如何区分：浏览器解析时到底使用严格模式还是混杂模式，与网页中的 DTD 直接相关。
  • 意义：

严格模式与混杂模式存在的意义与其来源密切相关，如果说只存在严格模式，那么许多旧网站必然受到影响，如果只存在混杂模式，那么会回到当时浏览器大战时的混乱，每个浏览器都有自己的解析模式。

常用浏览器的内核有哪些？

  • Trident内核。又称其为IE内核。Trident（又称为MSHTML），是微软开发的一种排版引擎。
  • Gecko内核。以C++编写的网页排版引擎。
  • WebKit内核。它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高，导致一些编写不标准的网页无法正常显示。
  • Presto内核。加入动态功能，例如网页或其部分可随着DOM及Script语法的事件而重新排版。

什么是CSS Hack，作用是什么？

CSS hack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样的符号是有标准的，CSS hack就是让你记住这个标准），以达到应用不同的CSS样式的目的。

  • 作用

CSS hack用来解决有些css属性在不同浏览器中显示的效果不一样的问题。

浏览器识别字符标准对应表
—–浏览器识别字符标准对应表—–

对W3C标准有哪些认识和理解?

标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维 护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性

什么是语义化的HTML?

语义化的HTML就是写出的HTML代码，符合内容的结构化（内容语义化），选择合适的标签（代码语义化），能够便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

优点：1.语义化有利于SEO(网站推广)，有利于搜索引擎爬虫更好的理解我们的网页，从而获取更多的有效信息，提升网页的权重。2.在没有CSS的时候能够清晰的看出网页的结构，增强可读性。3.便于团队开发和维护，语义化的HTML可以让开发者更容易的看明白，从而提高团队的效率和协调能力。4.支持多终端设备的浏览器渲染。

HTML5为什么只需要写<!DOCTYPE html>就可以了？

doctype是documenttype（文档类型）的简写，在页面中，用来指定页面所使用的xhtml（或者html）的版本。要想制作符合标准的页面，一个必不可少的关键组成部分就 是doctype声明。只有确定了一个正确的doctype，xhtml里的标识和css才能正常生效。
html 告诉浏览器这个文件是html格式网页文件
两个合起来就是 html5标准网页声明,原先的是一串很长的字符串,现在是这个简洁形式,支持html5标准的主流浏览器都认识这个声明。

HTML5有哪些新特性？移除了哪些元素？如何处理新标签的浏览器兼容性问题？如何区分HTML和HTML5?

HTML5已形成了最终的标准，概括来讲，它主要是关于图像，位置，存储，多任务等功能的增加。

  • 新增的元素有绘画 canvas ，
  • 用于媒介回放的 video 和 audio 元素，
  • 本地离线存储 localStorage长期存储数据，浏览器关闭后数据不丢失，而sessionStorage的数据在浏览器关闭后自动删除，

  • 此外，还新增了以下的几大类元素。

    内容元素，article（定义外部的内容。）、footer、header、nav、section（内容）。
    表单控件，calendar（日历）、date（日期）、time（时间）、email邮箱（）、url（链接）、search（搜索）。
    控件元素，webworker（是运行在后台的JavaScript，不会影响页面的性能）, websockt, Geolocation。

  • 移出的元素有下列这些：

显现层元素：basefont，big，center，font, s，strike，tt，u。
性能较差元素：frame，frameset，noframes。

如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？

  • 处理兼容问题有两种方式：

1.IE8/IE7/IE6支持通过document.方法产生的标签，利用这一特性让这些浏览器支持HTML5新标签。
2.使用是html5shim框架另外，DOCTYPE声明的方式是区分HTML和HTML5标志的一个重要因素，此外，还可以根据新增的结构、功能元素来加以区分。

CSS & CSS3

1.如何实现垂直居中?

为实现良好的兼容性，PC端实现垂直居中的方法一般是通过绝对定位，table-cell，负边距等方法。

 // HTML结构：
<div class="box box1"><span>垂直居中</span>
</div>
  • 方法1：table-cell
// CSS:
.box1{display: table-cell;vertical-align: middle;text-align: center;        
}
  • 方法2：display:flex
.box2{display: flex;justify-content:center; // 主轴align-items:Center;  // 交叉轴
}
  • 方法3：绝对定位和负边距
.box3{position:relative;}
.box3 span{position: absolute;width:100px;height: 50px;top:50%;left:50%;margin-left:-50px;margin-top:-25px;text-align: center;
}
  • 方法4：绝对定位和0
.box4 span{width: 50%; height: 50%; background: #000;overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; 
}
  • 方法5：translate
.box6 span{position: absolute;top:50%;left:50%;width:100%;transform:translate(-50%,-50%);text-align: center;
}
  • 方法6：display:inline-block
.box7{text-align:center;font-size:0;
}
.box7 span{vertical-align:middle;display:inline-block;font-size:16px;
}
.box7:after{content:'';width:0;height:100%;display:inline-block;vertical-align:middle;
}
  • 方法7：display:flex和margin:auto
.box8{display: flex;text-align: center;
}
.box8 span{margin: auto;}
  • 方法8：display:-webkit-box
.box9{display: -webkit-box;-webkit-box-pack:center;-webkit-box-align:center;-webkit-box-orient: vertical;text-align: center
}
  • 方法9：display:-webkit-box
<div class="floater"></div>  
<div class="content"> Content here </div>  // CSS
.floater {float:left; height:50%; margin-bottom:-120px;
}
.content {clear:both; height:240px; position:relative;
}

2. 什么是FOUC?如何解决？

如果使用import方法对CSS进行导入,会导致某些页面在Windows 下的Internet Explorer出现一些奇怪的现象:以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效(Flash of Unstyled Content),简称为FOUC。

  • 原因大致为：

1，使用import方法导入样式表。
2，将样式表放在页面底部
3，有几个样式表，放在html结构的不同位置。

其实原理很清楚：当样式表晚于结构性html加载，当加载到此样式表时，页面将停止之前的渲染。此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的花屏现象。

  • 解决方法：
    使用LINK标签将样式表放在文档HEAD中;或将css文件放在CDN服务器上。 
<link rel="stylesheet" href="style.css">

3. 什么是DIV高度塌陷？，如何解决？

  • 如果父元素只包含浮动元素，且父元素未设置高度和宽度，那么它的高度就会塌缩为零，也就是所谓的“高度塌陷”。

解决“高度塌陷”问题的方法：

1.浮动父级元素，父级元素的高度就会扩大，直到完全包含它里面的浮动元素。如果使用这种方法，一定要在该元素的下个元素添加clear:both,确保浮动元素落到父级元素的下方。

2.使用overflow:hidden,zoom:1,overflow:hidden属性会强制父级元素扩大到包含浮动元素，zoom:1只是触发IE6的hasLayout模式，不会对其他浏览器产生影响。

{ overflow:hidden; zoom:1; 
}

3.使用:after伪类清除，不会影响其他任何样式，通用性强。

.clearfix{ zoom:1; 
} 
.clearfix:after{ content:''; display:block; height:0; clear:both; overflow:hidden; 
}

4、如何实现中间div宽度固定，两端div自适应宽度？说出2种方法

  • float法

通过使两边的div左右浮动，脱离文档流，再为中间的div设置margin-left,margin-right值为左右div的宽度即可.此处应该注意的是中间div在代码中的位置，应该放在最后。存在问题：在屏幕宽度减少至一定程度后，右边div会错位，另起一行。

/*float法*/
.float .left {float: left;height: 200px;
}
.float .center {margin: 0 400px;height: 200px;
}
.float .right {float: right;height: 200px;
}
  • display:flex法
<style type="text/css">.container{width: 100%;height: 500px;display: flex;}.div01,.div03{background: black;flex: auto;}.div02{background: red;width: 220px;}</style>  <div class="container"><div class="div01"></div><div class="div02"></div><div class="div03"></div>
</div>// 使用"display: flex"声明使用弹性盒布局。//  CSS 属性声明"flex-direction"用来确定主轴的方向:
// row（默认值）主轴为水平方向。排列顺序与页面的文档顺序相同。如果文档顺序是 ltr，则排列顺序是从左到右；如果文档顺序是rtl，则排列顺序是从右到左。
// row-reverse  主轴为水平方向。排列顺序与页面的文档顺序相反。
// column   主轴为垂直方向。排列顺序为从上到下。
// column-reverse   主轴为垂直方向。排列顺序为从下到上。// CSS 属性"flex-wrap"用来声明当容器中条目的尺寸超过主轴尺寸时应采取的行为。
// nowrap（默认值）容器中的条目只占满容器在主轴方向上的一行，可能出现条目互相重叠或超出容器范围的现象。
// wrap 当容器中的条目超出容器在主轴方向上的一行时，会把条目排列到下一行。下一行的位置与交叉轴的方向一致。
// wrap-reverse 与wrap的含义类似，不同的是下一行的位置与交叉轴的方向相反。

http://chatgpt.dhexx.cn/article/kL8dBdKj.shtml

相关文章

前端H5面试题CSS：如何解决 margin“塌陷”？

前端H5面试题CSS：如何解决 margin“塌陷”？

一、外边距塌陷共有两种情况 ①第一种情况&#xff1a; 两个同级元素&#xff0c;垂直排列&#xff0c;上面的盒子给 margin-bottom 下面的盒子给 margin-top&#xff0c;那么他们两个的间距会重叠&#xff0c;以大的那个计算。 解决这种情况的方法为&#xff1a;两个外边距…
阅读更多...
Java面试题十二：Java内存模型，h5移动端开发面试题

Java面试题十二：Java内存模型，h5移动端开发面试题

Java开发人员并不需要像C/C++开发人员，需要时刻注意内存的分配和释放，而是全权交给虚拟机（JVM）去管理，自然关于内存管理或是内存的模型、结构对Java开发来说就是一个“黑箱”。 两眼一抹黑似乎也不影响写Java的代码。但我也说过，了解一些内部的机制或者是自己认为不重要…
阅读更多...
前端H5面试题（总结）

前端H5面试题（总结）

一、v-if 与 v-show的选择 1、v-if 和 v-show具有类似的功能&#xff0c;不过 v-if 才是真正的条件渲染&#xff0c;它会根据表达式是当地销毁或者重建元素及绑定的事件或子组件。 若表达式初始值为false&#xff0c;则一开始元素/组件并不会渲染&#xff0c;只有当条件第一次…
阅读更多...
前端H5面试题（vue为主）

前端H5面试题（vue为主）

一.src和href的区别 &#xff1f; src表示引用资源&#xff0c;表示替换当前元素&#xff0c;用在img&#xff0c;script&#xff0c;iframe上&#xff0c;src是页面内容不可缺少的一部分。常用场景&#xff1a; <img src"img/girl.jpg"></img> <if…
阅读更多...
h5面试题20道

h5面试题20道

本文转载自:http://www.cnblogs.com/HanJie0824/p/5841640.html 1.新的 HTML5 文档类型和字符集是&#xff1f; HTML5 文档类型很简单&#xff1a; <!doctype html> HTML5 使用 UTF-8 编码示例&#xff1a; <meta charset"UTF-8"> 2.HTML5 中如何嵌…
阅读更多...
h5面试题总结

h5面试题总结

导航的解析流程 1.导航被触发。 2.在失活的组件里调用beforeRouteLeave守卫 3.调用全局的 beforeEach 守卫 4.在重用的组件里调用 beforeRouteUpdate 守卫 (2.2) 5.在路由配置里调用 beforeEnter 6.解析异步路由组件 7.在被激活的组件里调用 beforeRouteEnter 8.调用全…
阅读更多...
H5前端面试题汇总

H5前端面试题汇总

1.关于利用数组去重的方法,除了用最简单的set去重以外, 还有reduce,先来看一下reduce的基本使用吧 那么问题来了, 如何用reduce来给类数组对象去重呢? 2.promise是用来做什么的? promise是用来解决异步编程问题(简单说是就是解决回调地狱的), promise有三种状态: paddin…
阅读更多...
C语言中关于fscanf()方法与fgets()方法的简单知识点总结

C语言中关于fscanf()方法与fgets()方法的简单知识点总结

fscanf() int fscanf(FILE* stream, const char* format, [argument...]);fscanf()方法与scanf()方法类似。不同的是多了第一个参数&#xff0c;文件指针参数&#xff0c;后两个参数用法类似。其中要注意的是第三个参数处填写变量时&#xff0c;不要遗漏取地址符&。 要点…
阅读更多...
C语言快速进阶C++（基本篇+STL篇）

C语言快速进阶C++（基本篇+STL篇）

目录 前言 用C做题的好处 using namespace std cin&#xff0c;cout头文件 变量声明 bool变量 const定义常量 string类 结构体 引用& vector set map(键值对) stack(栈) queue(队列) unordered_map和unordered_set(无序键值对和无序集合) 此思维导图来源于…
阅读更多...
Ｃ语言fgets()函数的用法总结

Ｃ语言fgets()函数的用法总结

从c11之后取消了gets()函数&#xff0c;用fgets()代替&#xff0c;用法有所不同&#xff0c;这里详细介绍下fgets()该如何使用。 char *fgets (char *__restrict __s, int __n, FILE *__restrict __stream) 第一个参数为数据存放的数组&#xff0c;第二个参数为最大长度&#x…
阅读更多...
C语言一行语句太长的换行处理方法

C语言一行语句太长的换行处理方法

文章目录 1、C语言中代码的多行书写2、获取视频教程3、版权声明 1、C语言中代码的多行书写 对C语言初学者来说&#xff0c;编写的程序的功能很简单&#xff0c;一句代码很短&#xff0c;但是在实际开发中&#xff0c;参数往往很长很多&#xff0c;一句代码可能会很长&#xff…
阅读更多...
（c语言）fgest（）键盘获取后解决换行符'\n'的问题

（c语言）fgest（）键盘获取后解决换行符'\n'的问题

fgets是会读取回车换行符的。有时候我们并不希望在字符串中存在换行符。 #include <stdio.h>int main (int argc,char *argv[]) {char str[30]"";//scanf("%s",str);printf("随便输入一个字符串呗&#xff1a;");fgets(str,sizeof(str),s…
阅读更多...
C语言按行读取文件的正确使用：fgets、feof、ferror

C语言按行读取文件的正确使用：fgets、feof、ferror

转自 https://blog.csdn.net/yss28/article/details/53453959 一、fgets函数 原型 char *fgets(char *buf, int bufsize, FILE *stream); 功能 fgets函数用来从stream所指文件中读入bufsize-1个字符放入buf为起始地址的空间内&#xff1b;如果在未读满bufsize-1个字符之时…
阅读更多...
Linux系统下C语言的编程技巧

Linux系统下C语言的编程技巧

Linux系统能够为人们提供更加安全实用的效果,保证计算机系统能够稳定的运行。利用Linux系统下首先要进行C语言的编程,掌握编程的技巧能够更好的发挥计算机的作用。如何掌握Linux系统下计算机C语言的编程技巧是计算机发展的关键要素。本文对Linux系统下计算机C语言的编程技巧进行…
阅读更多...
C语言使用fgetc（）函数

C语言使用fgetc（）函数

fgets&#xff08;&#xff09;函数用法比单一&#xff0c;请结合代码一起理解 #include "stdio.h" #include "stdlib.h" int main() {FILE *fp; //定义文件指针char filename[200]; //存放输入的文件名字char str; //存放一个职工…
阅读更多...
C语言-宏的实现

C语言-宏的实现

写一个宏&#xff0c;计算结构体中某变量相对于首地址的偏移。 结果 #define struct(struct_type,numname) (size_t)&(((struct_type*)0)->numname)实现过程 #include<stdio.h> #define struct(struct_type,numname) (size_t)&(((struct_type*)0)-…
阅读更多...
C语言中fgets()函数回车符相关的问题

C语言中fgets()函数回车符相关的问题

fgets函数 目录 fgets函数fgets函数与gets函数fgets函数包含回车符原因消去回车符需要消去回车符的情况任务描述编程要求测试说明思路代码问题关键 消去操作 fgets函数与gets函数 请移步下方链接&#xff0c;其中包含了scanf函数、gets函数以及fgets函数的区分总结&#xff1a…
阅读更多...
c语言中fgetc函数的介绍

c语言中fgetc函数的介绍

点击上方蓝字关注我&#xff0c;了解更多咨询 1、fgetc函数返回的字符实际上是文件流中位置指针指向的字符。 当fgetc函数读取错误时&#xff0c;返回EOF并设置文件错误标志位。 2、该函数以无符号char强制转换为int的形式返回读取的字符&#xff0c;如果到达文件末尾或出现读错…
阅读更多...
fgets()函数的详解-使用技巧-C语言基础

fgets()函数的详解-使用技巧-C语言基础

这篇文章要探讨的是“fgets()函数的详解以及使用时需要注意的一些细节”。涉及fgets()函数的应用和需要注意的问题。属于C语言基础篇&#xff08;持续更新&#xff09;。 fgets()&#xff08;函数原型&#xff1a;char *fgets(char *restrict str, int size, FILE *restrict s…
阅读更多...
【耀扬表情包语音包】

【耀扬表情包语音包】

阅读更多...
推荐文章

Copyright @ 2022~2023