HTML面试题：简述⼀下 src 与 href 的区别

述⼀下 src 与 href 的区别

1. href 是指向网络资源所在位置, 建立和当前元素（锚点）或当前文档（链接）之间的链接, 用于超链接 。
2. src 是指向外部资源的位置, 指向的内容将会嵌入到文档中当前标签所在位置;
   1. 在请求 src 资源时会将其指向的资源下载并应用到文档内,
   2. 例如 js 脚本, img 图片和 iframe 等元素 。
   3. 当浏览器解析到该元素时, 会暂停其他资源的下载和处理, 直到将该资源 加载、编译、执行 完毕;
   4. 图片和框架等元素也如此, 类似于将所指向资源嵌入当前标签内 。 这也是为什么将 js 脚本放在底部而不是头部 。

之前有整理过部分知识点, 现在将整理的相关内容, 验证之后慢慢分享给大家; 这个专题是 "前端面试题" 的相关专栏; 大概会有200+的文章。

如果对大家有所帮助，可以点个关注、点个赞; 文章会持续打磨。

有什么想要了解的前端知识, 可以在评论区留言, 会及时分享所相关内容。

跳转到邮箱：

 <a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a>
 <a href="mailto:someone@microsoft.com?cc=someoneelse@microsoft.com&bcc=andsomeoneelse2@microsoft.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">发送邮件！</a>

图像映射：

创建图像映射需要img、map、area三个标签同时存在，img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性，area中coords属性为设置或返回图像映射中可点击区域的坐标,area标签可以设置多个。相关文档推荐：https://www.w3school.com.cn/html/html_images.asp


 <body>
        <img src="img.PNG" usemap="#buhuo" alt="捕获" />
        <map name="buhuo" id="buhuo">
            <area shape="circle" coords="10,10,100,100" href ="上次阅读位置.PNG" target ="_self"alt="没有图片！" />
            <area shape="circle" coords="10,10,100,100" href ="上次阅读位置.PNG" target ="_self"alt="没有图片！" />
        </map>
    </body>

特殊字符：标签会被解析，采用特殊字符代码可以代替特殊字符

锚点定位：

通过锚点链接，用户可以快速的定位到目标。


 <a href="#two">定位到标题2</a><!-- 使用<a href="#id名">链接文本</a>，注意#的使用 --> 
    
  <h3>标题1</h3>
  <h3 id="two">标题2</h3><!-- 使用id名进行标注供锚点链接使用 -->
  <h3>标题3</h3>
  <h3>标题4</h3>

路径：

相对路径：

分为三种情况：1、同级目录 2、上一级目录 3、下级目录


   <img src="picture.jpg"/> <!-- 同级目录下的文件直接写文件名引入即可 -->
    <img src="images/picture.jpg"/> <!-- 下级目录中的文件需要先进入下一级目录，然后/找到文件后写文件名即可 -->
    <img src="../images/picture.jpg"/> <!-- 上级目录中的文件需要先../进入上级目录，再使用同级目录的方法查找文件 -->

绝对路径：

绝对路径是相对于计算机或者网站(网址)而言的，一般很少使用绝对路径


 <img src="C:\Users\17121\Desktop\picture.jpg"/> <!-- 电脑上面绝对路径几乎没人使用，因为换电脑后，文件就无法使用 -->
    <img src="http://webimages/picture.jpg"/> <!-- 网上的绝对路径经常会被使用，但是文件一旦消失或者主机和域名过期，将无法使用 -->

提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者删除。

笔者：苦海123

其它问题可通过以下方式联系本人咨询：
QQ：810665436
微信：ConstancyMan

在前面

今年国庆假期终于可以憋在家里了不用出门了，不用出去看后脑了，真的是一种享受。这么好的光阴怎么浪费，睡觉、吃饭、打豆豆这怎么可能（耍多了也烦），完全不符合我们程序员的作风，赶紧起来把文章写完。

这篇文章比较基础，在国庆期间的业余时间写的，这几天又完善了下，力求把更多的前端所涉及到的关于文件上传的各种场景和应用都涵盖了,若有疏漏和问题还请留言斧正和补充。

自测读不读

以下是本文所涉及到的知识点，break or continue ?

文件上传原理
最原始的文件上传
使用 koa2 作为服务端写一个文件上传接口
单文件上传和上传进度
多文件上传和上传进度
拖拽上传
剪贴板上传
大文件上传之分片上传
大文件上传之断点续传
node 端文件上传

原理概述

原理很简单，就是根据 http 协议的规范和定义，完成请求消息体的封装和消息体的解析，然后将二进制内容保存到文件。

我们都知道如果要上传一个文件，需要把 form 标签的enctype设置为multipart/form-data,同时method必须为post方法。

那么multipart/form-data表示什么呢？

multipart互联网上的混合资源，就是资源由多种元素组成，form-data表示可以使用HTML Forms 和 POST 方法上传文件，具体的定义可以参考RFC 7578。

multipart/form-data 结构

看下 http 请求的消息体

请求头：

Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryDCntfiXcSkPhS4PN 表示本次请求要上传文件，其中boundary表示分隔符，如果要上传多个表单项，就要使用boundary分割，每个表单项由———XXX开始，以———XXX结尾。

消息体- Form Data 部分

每一个表单项又由Content-Type和Content-Disposition组成。

Content-Disposition: form-data 为固定值，表示一个表单元素，name 表示表单元素的名称，回车换行后面就是name的值，如果是上传文件就是文件的二进制内容。

Content-Type：表示当前的内容的 MIME 类型，是图片还是文本还是二进制数据。

解析

客户端发送请求到服务器后，服务器会收到请求的消息体，然后对消息体进行解析，解析出哪是普通表单哪些是附件。

可能大家马上能想到通过正则或者字符串处理分割出内容，不过这样是行不通的，二进制buffer转化为string,对字符串进行截取后，其索引和字符串是不一致的，所以结果就不会正确，除非上传的就是字符串。

不过一般情况下不需要自行解析，目前已经有很成熟的三方库可以使用。

至于如何解析，这个也会占用很大篇幅，后面的文章在详细说。

最原始的文件上传

使用 form 表单上传文件

在 ie时代，如果实现一个无刷新的文件上传那可是费老劲了，大部分都是用 iframe 来实现局部刷新或者使用 flash 插件来搞定，在那个时代 ie 就是最好用的浏览器（别无选择）。

DEMO

这种方式上传文件，不需要 js ，而且没有兼容问题，所有浏览器都支持，就是体验很差，导致页面刷新，页面其他数据丢失。

HTML

 <form method="post" action="http://localhost:8100" enctype="multipart/form-data">

        选择文件:
            <input type="file" name="f1"/> input 必须设置 name 属性，否则数据无法发送<br/>
<br/>
            标题：<input type="text" name="title"/><br/><br/><br/>

        <button type="submit" id="btn-0">上 传</button>

</form>

复制代码

文件上传接口

服务端文件的保存基于现有的库koa-body结合 koa2实现服务端文件的保存和数据的返回。

在项目开发中，文件上传本身和业务无关，代码基本上都可通用。

在这里我们使用koa-body库来实现解析和文件的保存。

koa-body 会自动保存文件到系统临时目录下，也可以指定保存的文件路径。

然后在后续中间件内得到已保存的文件的信息，再做二次处理。

ctx.request.files.f1 得到文件信息，f1为input file 标签的 name
获得文件的扩展名，重命名文件

NODE

/**
 * 服务入口
 */
var http = require('http');
var koaStatic = require('koa-static');
var path = require('path');
var koaBody = require('koa-body');//文件保存库
var fs = require('fs');
var Koa = require('koa2');

var app = new Koa();
var port = process.env.PORT || '8100';

var uploadHost= `http://localhost:${port}/uploads/`;

app.use(koaBody({
    formidable: {
        //设置文件的默认保存目录，不设置则保存在系统临时目录下  os
        uploadDir: path.resolve(__dirname, '../static/uploads')
    },
    multipart: true // 开启文件上传，默认是关闭
}));

//开启静态文件访问
app.use(koaStatic(
    path.resolve(__dirname, '../static') 
));

//文件二次处理，修改名称
app.use((ctx) => {
    var file = ctx.request.files.f1;//得道文件对象
    var path = file.path;
    var fname = file.name;//原文件名称
    var nextPath = path+fname;
    if(file.size>0 && path){
        //得到扩展名
        var extArr = fname.split('.');
        var ext = extArr[extArr.length-1];
        var nextPath = path+'.'+ext;
        //重命名文件
        fs.renameSync(path, nextPath);
    }
    //以 json 形式输出上传文件地址
    ctx.body = `{
        "fileUrl":"${uploadHost}${nextPath.slice(nextPath.lastIndexOf('/')+1)}"
    }`;
});

/**
 * http server
 */
var server = http.createServer(app.callback());
server.listen(port);
console.log('demo1 server start ......   ');
复制代码

CODE

https://github.com/Bigerfe/fe-learn-code/

在线咨询

上一篇：CSS3实现3D水晶立方体效果
下一篇：给我一个浏览器，我就能写代码-几个在线编辑器网站推荐

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商