前端html面试题答案

最新推荐文章于 2024-08-09 18:20:18 发布

短暂又灿烂的

最新推荐文章于 2024-08-09 18:20:18 发布

阅读量608

点赞数 2

分类专栏：前端 html 面试题文章标签： html html5 css

本文链接：https://blog.csdn.net/weixin_42232156/article/details/120265924

版权

前端同时被 3 个专栏收录

266 篇文章 11 订阅

订阅专栏

html

8 篇文章 0 订阅

订阅专栏

面试题

8 篇文章 0 订阅

订阅专栏

一.Doctype作用？严格模式与混杂模式如何区分？它们有何意义?

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

严格模式：又称标准模式，是指浏览器按照 W3C 标准解析代码。

混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码。

如何区分：浏览器解析时到底使用严格模式还是混杂模式，与网页中的 DTD 直接相关。

1、如果文档包含严格的 DOCTYPE ，那么它一般以严格模式呈现。（严格 DTD ——严格模式）
 
2、包含过渡 DTD 和 URI 的 DOCTYPE ，也以严格模式呈现，但有过渡 DTD 而没有 URI （统一资源标识符，就是声明最后的地址）会导致页面以混杂模式呈现。（有 URI 的过渡 DTD ——严格模式；没有 URI 的过渡 DTD ——混杂模式） 

3、DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现。（DTD不存在或者格式不正确——混杂模式）

4、HTML5 没有 DTD ，因此也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容。（ HTML5 没有严格和混杂之分）

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

二.HTML5 为什么只需要写？

因为 HTML 5 不基于 SGML，因此不需要对 DTD 进行引用，但是需要 doctype 来规范浏览器的行为。
PS:
SGML是标准通用标记语言,简单的说，就是比HTML,XML更老的标准，这两者都是由SGML发展而来的。
BUT，HTML5不是的。

3.行内元素有哪些？块级元素有哪些？空(void)元素有那些？

行内元素：a、b、span、img、input、strong、select、label、em、button、textarea

块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote

空元素：即系没有内容的HTML元素，例如：br、meta、hr、link、input、img

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

（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;

（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

（3）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;

(4)link支持使用js控制DOM去改变样式，而@import不支持;

五.html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5
HTML5现在已经不是SGML的子集，主要是关于图像，位置，存储，多任务等功能的增加。

1 绘画canvas；

2 用于媒介回放的video和audio元素；

3 本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失；

4 sessionStorage的数据在浏览器关闭后自动删除；

5 语义化更好的元素，比如article，footer，header，nav，section；

6 表单控件：calender，date，time，email，url，search

7 新的技术：webworker，websockt，Geolocation

移除的元素：

纯表现的元素：basefont，big，center，font，s，strike，tt，u

对可用性产生负面影响的元素：frame，frameset，noframes；

处理兼容问题:
支持HTML5新标签：IE8、IE7，IE6支持通过doument.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后还需要添加默认的样式。

当然最好的方式是直接使用成熟的框架，使用最多的是html5shim框架

<!--[if it IE9]>

<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>

<![endif]-->

如何区分HTML和HTML5：

DOCTYPE声明，新增的结构元素，功能元素

六.简述一下你对HTML语义化的理解?

⒈用正确的标签做正确的事情

⒉HTML语义化让页面的内容结构化，结构更清晰，便于对浏览器，搜索引擎解析；

⒊及时在没有样式CSS情况下也以一种文档格式显示，并且时任意阅读的；

⒋搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO；

⒌时阅读源代码的人对网站更容易将网站分块，便于阅读维护理解

七.HTML5的离线储存怎么使用，工作原理能不能解释一下？

首先，在html页面头部加入一个manifest的属性:

<!DOCTYPE HTML>
<html manifest = "cache.manifest">
...
</html>

然后书写cache.manifest文件：

CACHE MANIFEST
#v0.11

CACHE:
js/app.js
css/style.css

NETWORK:
resourse/logo.png

FALLBACK:
/ /offline.html

manifest （即 .appcache 文件）文件是简单的文本文件，可分为三个部分：

CACHE ：
在此标题下列出的文件将在首次下载后进行缓存。（由于包含manifest文件的页面将被自动离线存储，所以不需要把页面自身也列出来）

NETWORK ：
在此标题下列出的文件需要与服务器的连接，且不会被缓存，离线时无法使用。
可以使用 “*” 来指示所有其他资源/文件都需要因特网连接：

NETWORK: *

如果在CACHE和NETWORK中有一个相同的资源，那么这个资源还是会被离线存储，也就是说CACHE的优先级更高。

FALLBACK：
在此标题下列出的文件规定当页面无法访问时的回退页面。比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了，那么就去访问offline.html。

八.浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？

在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。
离线的情况下，浏览器就直接使用离线存储的资源。

九.请描述下cookie,localStorage和sessionStorage的区别

相同点:均存储与客户端
不同点:
1.存储大小
cookie数据大小不能超过4k;sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
2.有效时间

localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage 数据在当前浏览器窗口关闭后自动删除。
cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

十.iframe有哪些优缺点？

1.iframe能够原封不动的把嵌入的网页展现出来。

2.如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。

3.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。

4.如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。

iframe的缺点：

1.会产生很多页面，不容易管理。

2.iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差。

3.代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化。

4.很多的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。

5.iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。分析了这么多，现在基本上都是用Ajax来代替iframe，所以iframe已经渐渐的退出了前端开发。

十一.Label的作用是什么？是怎么用的？

label标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。

<label for="Name">Number:</label> <input type=“text“name="Name" id="Name"/>

<label>Date:<input type="text" name="B" /></label>

十二.HTML5的form如何关闭自动完成功能？

1、在IE的Internet选项菜单里的内容–自动完成里面设置

2、设置Form的autocomplete为"on"或者"off"来开启或者关闭自动完成功能

3、设置输入框的autocomplete为"on"或者"off"来开启或者关闭该输入框的自动完成功能

打开自动完成功能的Form<br>  
<form name="form1" autocomplete="on">  
    打开自动完成功能的输入框  
    <input type="text" autocomplete="on" name="txtOff1"><br>  
    关闭自动完成功能的输入框  
    <input type="text" autocomplete="off" name="txtOn1"><br>  
    <input type="submit" value="提交"><br>  
</form>  
关闭自动完成功能的Form<br>  
<form name="form1" autocomplete="off">  
    打开自动完成功能的输入框  
    <input type="text" autocomplete="on" name="txtOff1"><br>  
    关闭自动完成功能的输入框  
    <input type="text" autocomplete="off" name="txtOn1"><br>  
    <input type="submit" value="提交"><br>  
</form>

十三.如何实现浏览器内多个标签页之间的通信?

调用localstorge、cookies等本地存储方式。

方法一：

localstorge在一个标签页里被添加、修改或删除时，都会触发一个storage事件，通过在另一个标签页里监听storage事件，即可得到localstorge存储的值，实现不同标签页之间的通信。
页面1代码:

<input id="name">
<input type="button" id="btn" value="提交">
<script type="text/javascript">
	$(function(){  
		$("#btn").click(function(){  
			var name=$("#name").val();  
			localStorage.setItem("name", name); 
		});  
	});  
</script>

页面2代码:


<script type="text/javascript">
	$(function(){ 
		window.addEventListener("storage", function(event){  
			console.log(event.key + "=" + event.newValue);  
		});   
	});
</script>

方法二：

使用cookie+setInterval，将要传递的信息存储在cookie中，每隔一定时间读取cookie信息，即可随时获取要传递的信息。

页面1代码:

<input id="name">
<input type="button" id="btn" value="提交">
<script type="text/javascript">
	$(function(){  
		$("#btn").click(function(){  
			var name=$("#name").val();  
			document.cookie="name="+name;  
		});  
	});  
</script>

页面2代码:

<script type="text/javascript">
	$(function(){ 
		function getCookie(key) {  
			return JSON.parse("{\"" + document.cookie.replace(/;\s+/gim,"\",\"").replace(/=/gim, "\":\"") + "\"}")[key];  
		}   
		setInterval(function(){  
			console.log("name=" + getCookie("name"));  
		}, 10000);  
	});
</script>

十四.webSocket如何兼容低浏览器？

1.Adobe Flash Socket
2. ActiveX HTMLFile (IE)
3. 基于 multipart 编码发送 XHR
4. 基于长轮询的 XHR

十五.页面可见性（Page Visibility）API 可以有哪些用途？

页面可见性：就是对于用户来说，页面是显示还是隐藏, 所谓显示的页面，就是我们正在看的页面；隐藏的页面，就是我们没有看的页面。因为，我们一次可以打开好多标签页面来回切换着，始终只有一个页面在我们眼前，其他页面就是隐藏的，还有一种就是…，(把浏览器最小化，所有的页面就都不可见了)。

API 很简单，document.hidden 就返回一个布尔值，如果是true, 表示页面可见，false 则表示，页面隐藏。不同页面之间来回切换，触发visibilitychange事件。还有一个document.visibilityState, 表示页面所处的状态，取值：visible, hidden 等四个。

document.addEventListener("visibilitychange", function(){
    if(document.hidden){
        document.title ="hidden";
    }else {
        document.title = "visibile";
    }
})

十六.如何在页面上实现一个圆形的可点击区域？

1.map+area实现

<img src="../imgs/test.jpg" width="200" border="0" usemap="#Map" />
<map name="Map" id="Map">
  <area shape="circle" coords="100,100,100" href="http://www.baidu.com" target="_blank" />
</map>

2.使用css实现

<style> 
 .disc{  
     width:100px;  
     height:100px;  
     background-color:dimgray;  
     border-radius: 50%;  
     cursor: pointer;  
     position: absolute;  
     left:50px;  
     top:50px;    
     line-height: 100px;  
     text-align: center;  
     color: white;  
 }  
</style> 

<div class="disc">点击区域</div>

3.html+js实现

<div id="demo"></div>
<script>
     var demo = document.getElementById('demo');
     demo.onclick = function(e){
         //获取正方形的中心
         let left = this.getBoundingClientRect().left
          + this.offsetWidth / 2;
         let top = this.getBoundingClientRect().top 
         + this.offsetHeight / 2;
         //每次鼠标点击的坐标点
         let x1 = e.clientX;
         let y1 = e.clientY;
         //根据两点间距离公式求出鼠标点击的位置距离圆心的距离
         //有可能是负数，因此加上绝对值
         let distance = Math.abs(Math.sqrt(Math.pow(x1-left, 2)
          + Math.pow(y1 - top, 2)));
         //如果两点间距离大于规定的半径距离则不触发事件
         if(distance > 100){
             console.log('在这个圆内');
         }
     }
</script>

十七.实现不使用 border 画出1px高的线，在不同浏览器的Quirksmode和CSSCompat模式下都能保持同一效果。

// 实现代码
<div style="height:1px;overflow:hidden;background:red"></div>

十八.网页验证码是干嘛的，是为了解决什么安全问题？

区分用户是计算机还是人的公共全自动程序。可以防止恶意破解密码、刷票、论坛灌水
有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试
PS:验证码的原理是服务器端随机生成验证码字符串，保存在内存中，并写入图片，发送给浏览器端显示，浏览器端输入验证码图片上字符，然后提交服务器端，提交的字符和服务器端保存的该字符比较是否一致，一致就继续，否则返回提示。