实现这一功能主要依赖于`<input>`元素以及File API或使用iframe标签结合浏览器的安全策略来完成：
1. **通过<input type="file">选择本地文件：**
首先，你可以在页面上添加一个type属性为"file" 的输入框让用户选取他们想要打开的本地文件:
html
<!DOCTYPE html>
<html lang="zh">
<body>
<label for="my-file-selector">点击这里选择您的本地文件：</label>
<input id="my-file-selector" type="file">
<!-- 显示区域 -->
<div id="display-area"></div>
<script>
document.getElementById('my-file-selector').addEventListener('change', function(e) {
var file = e.target.files[0];
if (window.FileReader && file.type.indexOf("image") > -1 ) { // 检查是否支持图片格式读取，并只处理图像类型
let reader = new FileReader();
reader.onloadend = function() {
document.querySelector('#display-area').innerHTML = '<img src="' + this.result + '"/>';
};
reader.readAsDataURL(file);
}
});
</script>
</body>
</html>
上述代码段创建了一个允许用户浏览其设备以选取消息的控件，并在其选定后利用FileReader对象将所选图像转换成Data URL并在网页内动态生成
2. **使用 iframe 加载本地文件：**
对于文本或者PDF这类非可以直接插入到DOM中的文件类型，可以尝试用iframe嵌入的方式来查看它们。但请注意由于同源政策限制及安全原因，这种方式并不总是可行，尤其对绝对路径下的本地文件往往无效。
例如：
html
<iframe width="100%" height="600px" frameborder="0" scrolling="auto"
src="/path/to/local/file.pdf">
此浏览器不支持IFrame。
</iframe>
总的来说，现代web应用程序可以通过JavaScript提供的API灵活地操作客户端存储的文件数据，从而实现在HTML界面中有效地加载与展示本地文件的目标。而对于一些特殊类型的文件，则可能需要借助其他技术和手段配合才能达成预期效果。同时，请始终注意尊重用户体验隐私权及相关法律法规要求。