当前位置: 首页 > Web前端 > HTML5

前端面试题(总结)

时间:2023-04-05 18:28:56 HTML5

为什么HTML1.HTML5只需要写HTML5不是基于SGML(StandardGeneralizedMarkupLanguage),所以不需要引用DTD,但是需要doctype来规范浏览器的行为(这样浏览器知道如何解析文档Parsing)HTML4.0是基于SGML的,所以必须引用DTD来告知浏览器文档使用的文档类型2.说说内联元素,块元素,空元素,这行内元素有:a,span,img,input,select,strong,em,b(标记元素)块元素:div,p,ul,li,ol,dd,dt,dl,h1-h6空元素:hr,br,输入,img,链接,meta3。导入样式时,使用link和@importlink的区别在于XHTML标记。除了加载css,它还可以定义SSR,定义rel连接属性等。@import是css提供的,只能加载css样式的页面。页面加载的时候,引入link资源是可以同时加载的,而@import引入的css必须要等页面加载完成后才能加载。链接是XHTML标签,没有兼容性问题,而@import是css2.1提出的,IE5以下低版本浏览器不支持4.HTML5语义理解简单介绍。没有css样式时,以文档的形式显示,方便阅读。HTML5语义使页面内容结构化、清晰,便于浏览器和搜索引擎分析。有利于视障人士使用屏幕阅读器根据标记访问网站,有利于团队的开发和维护,有利于SEO:便于爬虫抓取更有效的信息.5.描述cookie、localStorage和sessionStorage的区别。cookie本身是用来在客户端和服务器之间进行通信的。因为它有存储功能,所以借来存储信息。cookie数据在同源HTTP请求中总是会携带localStorage和sessionStorage。数据不会自动发送到服务器。本地存储cookie的存储大小只有4k;而localStorage和sessionStorage可以达到5M以上。过期时间cookie在设定的过期时间前有效。当前浏览器窗口关闭后自动删除6.实现绘制1px高的无边框线。在不同的浏览器中,标准模式和怪异模式

7.网页验证码的作用及其解决的安全问题区分用户是人还是机器,可以防止恶意破解密码、刷票等;可以防止黑客通过暴力破解的方式不断尝试登录特定的注册用户。data-custom属性嵌入在html元素中,可以被js用来操作数据。注意:data属性要小写,data-后面至少要有一个字符。数据不能单独使用。data属性的值可以是任意的string9。说说HTML5的新特性,移除的元素(说说HTML5)新特性:绘制canvas视频和音频元素,用于媒体播放本地离线locaStorage长期存储数据,数据浏览器关闭后不会丢失浏览器关闭后sessionStorage自动删除数据表单控件:data,email,search,url,calendar,time语义标签:header,footer,nav,section,article新技术:webworker,websocket,Geolocation移除元素纯表现元素:basefont,center,font,big,u,tt,strike,s对可用性有负面影响的元素:frame,frameset,noframesCSS1。介绍标准盒模型和IE的怪盒模型w3c标准盒模型:内容的宽度是设置的widthIE怪盒模型:内容的宽度包括border和padding2.css优先级计算优先级是就近原则,当权重相等,最接近的样式优先级更高!导入>id>类>标签!import优先级高于inlinestyle3.简单说明为什么需要重新设置css文件浏览器有很多种,不同浏览器默认的样式是不一样的。需要重新设置浏览器的样式4.如何让两个div横向布局使用flex布局:父元素设置:display:flex使用浮动布局(或者使用display:inline-block)//htmlfff
dddf
//CSS。左{浮动:左;背景:红色;/*显示:内联块;*/}.right{溢出:隐藏;背景:绿色;/*display:inline-block;*/}5.左侧固定宽度,右侧自适应左侧固定宽度+设置浮动宽度:300px;向左飘浮;右边设置overflow:hidden(ormargin-left:leftwidth).left{float:left;宽度:300px;背景:红色;}.right{溢出:隐藏;background:green;}父元素设置display:flex;左边设置宽度:300px;右侧设置flex-grow:1parentelementsetdisplay:table;左边设置宽度:300px;右侧设置显示:table-cell;宽度:100%;父元素设置位置:relative;左设置位置:绝对;宽度:300px;右边设置margin-left:左边的宽度6.两个div完成两列布局:要求高度可变(父元素也是),实时两个div相等(当高度左边div的高度被子元素拉高,右边div的高度和左边一样)父元素设置display:table;右侧设置:display:table-cell父元素设置display:flex;rightsettingflex-grow:17.左右宽度固定,中间采用左右浮动布局自适应。居中布局,此时应该把中间的div放在右边的浮动下面(因为居中的div在正常的文档流中占据了全屏宽度,所以右边的浮动元素会放在下一行)//htmlfffddddss//css.left{float:left;背景:红色;}.right{浮动:右;背景:绿色;}.center{边距:0自动;background:yellow;}使用flex布局父元素设置display:flex;左侧固定宽度:300px;右侧固定宽度:300px;中间设置flex-grow:1//htmlfffssddddd//css.box{display:flex;}.left{width:300px;背景:红色;}.right{宽度:300px;背景:绿色;}.center{flex-grow:1;background:yellow;}使用绝对定位,左右两边绝对定位,脱离文档流,中间使用margin留一个固定宽度的margin值。左{位置:绝对;顶部:0;左:0;宽度:300px;背景:红色;}。右{位置:绝对;右:0;顶部:0;宽度:300px;背景:绿色;}.center{边距:0300px;background:yellow;}8.圣杯布局(类似于双飞翼布局)实际上是通过使用负边距值实现的,即solid比solid(两侧框的宽度固定,中间的框自适应)class="leftcol">.box{溢出:隐藏;填充:0150px;}.left{左:-150px;-左:-100%;宽度:150px;高度:50px;背景:红色;}.right{右:-150px;左边距:-150px;宽度:150px;高度:50px;{宽度:100%;高度:50px;背景:黄色;}.col{位置:相对;float:left;}定位完成后,position:relative;然后在左右两列分别加上左右值,使中间的内容不被覆盖9.双飞翼布局dgdggdgdsgdsfhsgkjsdflkghjsdkghsdghsdhgdhgsdhgsdghsdhgjdhkghsdghsdghskdjhgsdhfgsdfhg.left{margin-left:-100%;宽度:150px;高度:50px;背景:红色;}.right{margin-left:-150px;宽度:150px;高度:50px;背景:绿色;}.center{宽度:100%;高度:50px;background:yellow;}.col{float:left;}.wrap{margin:0150px;}和holygrail布局只是在中间的div中添加一个包含容器,以防止通过设置margin:0fixed覆盖文本包含容器中的宽度值;10.如何水平居中浮动元素,如何水平居中绝对定位元素居中浮动元素.right{向左飘浮;宽度:150px;高度:50px;边距:000-75px;位置:相对;左:50%;顶部:50%;background:green;}居中绝对定位element.right{position:absolute;宽度:150px;高度:50px;保证金:0自动;左:0;顶部:0;底部:0;右:0;background:green;}11.position的相对值和绝对值的定位原点在哪里?固定定位的父元素:生成绝对定位,相对于浏览器窗口定位relative:生成相对定位的元素,相对于它们的正常位置定位static:没有定位,元素出现在正常流中(忽略偏移量声明:top,left,right,bottom,z-index)inherit:从父元素继承position属性的值12、li与li之间不可见的空格是什么原因?linebox的排列会受到中间空白(回车或空格)的影响,空格也是字符,也会套用样式,占用空间,将字符大小设置为0可以去除间隔,然后提升效果和高级浏览器交互,增加功能,实现更好的用户体验优雅降级:先构建完整功能,再制作兼容低版本浏览器的JS部分,等待更新