前端面试题：HTML
1. 如何通过表单下载文件？
2. 通过设置表单的target="_blank"或window.open(url，"_blank")来下载文件会被浏览器拦截吗？如何解决？
3.请问H5页面如何调起 第三方地图（腾讯地图、高德地图、百度地图）进行导航呢？
4.举例说明HTML5出来后,有哪些HTML标签被弃用了？
4.举例说明HTML5出来后,有哪些HTML标签被弃用了？
1、能用css代替的元素
basefont、big、center、font、s、strike、tt、u。这些元素纯粹是为画面展示服务的，HTML5中提倡把画面展示性功能放在css中统一编辑。
2、不再使用frame框架。
frameset、frame、noframes。HTML5中不支持frame框架，只支持iframe框架，或者用服务器方创建的由多个页面组成的符合页面的形式，删除以上这三个标签。
3、只有部分浏览器支持的元素
applet、bgsound、blink、marquee等标签。
4、其他被废除的元素
废除rb，使用ruby替代。
废除acronym使用abbr替代。
废除dir使用ul替代。
废除isindex使用form与input相结合的方式替代
废除listing使用pre替代
废除xmp使用code替代
废除nextid使用guids
废除plaintex使用“text/plian”（无格式正文）MIME类型替代。
**扩展知识**新增元素
内容元素：article、header，footer,section,nav,aside
表单元素：calendar，date，time，number,url,search;
多媒体：video,audio;
控件元素： websockt,webwork
绘画：canvas;
存储：localStorage;sessionStorage
3.请问H5页面如何调起 第三方地图（腾讯地图、高德地图、百度地图）进行导航呢？
方法
<a href="androidamap://poi?sourceApplication=dingtalk&keywords=阿里巴巴">打开安卓高德地图</a><br>
<a href="iosamap://poi?sourceApplication=dingtalk&keywords=阿里巴巴">打开iOS高德地图</a><br>
<a href="baidumap://map/place/search?query=阿里巴巴">打开百度地图</a><br>
<a href="qqmap://map/search?keyword=阿里巴巴">打开腾讯地图</a>
其中，高德区分安卓和ios，百度和腾讯不区分。另外，需要注意的是，已知微信内置浏览器无法唤起以上所有地图APP（FUCK），可能微信的jssdk有提供方法吧（微信不允许不是自家或者合作方的APP在微信自带浏览器中唤起）。
文档
2. 通过设置表单的target="_blank"或window.open(url，"_blank")来下载文件会被浏览器拦截吗？如何解决？
其他同类问题：在ajax异步请求完成后使用window.open来打开新窗口也会出现被拦截现象
原因分析：：
浏览器为了维护用户安全和体验，对于非用户操作产生的新弹出窗口会对其进行阻止，因为浏览器认为这不是一个用户希望看到的页面。
各浏览器对拦截时机的判断不一致。
解决方案：：
方案一、创建一个a标签，利用a标签跳转，能解决大多数浏览器兼容问题，但是这种方法写在ajax异步请求完成后调用无效。
function openWin(url) {
var a = document.createElement("a"); //创建a标签
a.setAttribute("href", url);
a.setAttribute("target", "_blank");
document.body.appendChild(a);
a.click(); //执行当前对象
}
openWin("./page/......");
方案二、 模拟form表单提交，能解决大多数浏览器兼容问题，但是这种方法写在ajax异步请求完成后调用无效。
var form = document.createElement('form');
form.action = '"./page/a.html?id=1';
form.target = '_blank';
form.method = 'POST';
document.body.appendChild(form);
form.submit();
方案三、 在ajax调用之前先打开窗口，然后再设置新窗口的url来达到跳转的效果，但是该方法如果ajax响应太慢，则会出现一个空白窗口，影响用户体验，所以建议给该新窗口增加提示“正在拼命加载中”，但是我觉得这个并不是最好的解决方案。
//先在ajax函数之前打开新窗口，后再加载url
$('#btn').click(function () {
//打开一个不被拦截的新窗口
var win = window.open();
win.document.body.innerHTML="正在拼命加载中......";
$.ajax({
url: 'a.com',
success: function (url) {
//修改新窗口的url
win.location.href = url;
}
});
});
方案四、 把ajax异步改成同步，该方法会阻塞浏览器运行导致卡顿，经过测试，就算改成同步，chrome还是会阻拦，Firefox不会阻拦
//先在ajax同步函数之后打开新窗口
$('#btn').click(function () {
$.ajax({
url: 'a.com',
async: false, // 同步，意味着执行该ajax完成后，后续代码才继续运行
success: function (url) {
}
});
//执行完ajax后再打开新窗口
window.open("./page/......", "_blank");
});
方案五、 把ajax执行完后，弹出一个弹出框提示用户，由用户确认点击打开，这个方法目前感觉是最友好的
$('#btn').click(function () {
$.ajax({
url: 'a.com',
success: function (url) {
option.open({
//type: 1,
icon: 3,
title: "支付",
btn: ['立即查看', '取消'],
content: "文件已经校验成功，请查看结果",
btn1: function (index) {
option.closeAll();
window.open("./page/......");
},
btn2: function (index) {
option.closeAll();
}
});
}
});
});
参考链接： https://zhuanlan.zhihu.com/p/60449946
1. 如何通过表单下载文件？
- form 表单的action设置为接口地址，设置method为post/get
post方法：
根据需要传递的参数设置多个input:name=key, value=value
如果请求的接口不需要参数，建议设置一个input,否则可能会引起报错。
扩展：get方法：
在action的url后拼接参数可能会没有效果，建议还是用input的name、value的形式储存。 - submit提交到后台
参考链接：
