MAMP安装后localhost无法访问htdocs下index.html问题咨询

附问题相关操作截图
这是我首次在此发帖求助。
我近期学完了HTML/CSS/JavaScript相关课程，已经能熟练运用这三项技术。目前正在学习PHP，了解到需要搭建localhost本地环境，就下载安装了MAMP，把网站文件都放到htdocs目录后，无法通过localhost访问到index.html文件。
我当前在浏览器中输入的访问路径为：localhost/htdocs/web-development/Portfolio/index.html
我的诉求是实现本地网站预览，测试基于HTML/CSS/JavaScript、PHP/phpMyAdmin开发的注册表单功能。
我目前仅能熟练编写HTML/CSS/JavaScript代码，属于编程新手，若表述不够清晰还请谅解。
我使用Atom作为代码编辑器。
——卢卡斯

访问失败的核心原因是URL路径层级写错了：MAMP的Apache服务默认已经将htdocs目录配置为网站根目录，访问localhost时服务会直接读取htdocs文件夹内的内容，不需要在URL里额外加htdocs层级，按以下步骤操作即可：

• 先确认MAMP服务运行状态
  打开MAMP控制面板，确认Apache、MySQL两个服务的状态指示灯为绿色（正常运行中）。在MAMP的Preferences > Ports设置页查看Apache当前的监听端口：MAMP默认初始端口为8888，这种情况访问地址需要带端口后缀；如果之前手动修改为80端口，访问时不需要额外加端口。
• 使用正确路径访问文件
  你当前的文件存放路径是htdocs/web-development/Portfolio/index.html，对应正确访问地址为：
  localhost:[你的Apache端口号]/web-development/Portfolio/index.html
  举个例子：如果Apache端口是默认的8888，就访问localhost:8888/web-development/Portfolio/index.html；如果端口设置为80，直接访问localhost/web-development/Portfolio/index.html即可打开页面。
• 验证PHP和数据库可用性
  静态页面正常打开后，在Portfolio目录下新建test.php文件，写入代码<?php phpinfo(); ?>，访问该文件的对应路径，如果能正常显示PHP版本、配置信息页面，说明PHP运行正常。之后访问localhost:[Apache端口]/phpMyAdmin确认可以正常登录管理数据库，就能开始测试注册表单功能了。

实用提示：如果觉得每次输入端口麻烦，直接在MAMP端口设置里把Apache端口改为80、MySQL端口改为3306，保存后重启服务，后续所有本地地址都可以直接用localhost/xxx的格式访问，不需要加端口后缀。

内容的提问来源于stack exchange，提问作者Lukas Thern Lovén