> For the complete documentation index, see [llms.txt](https://tonyyipx.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tonyyipx.gitbook.io/web/1-frontend-web-development.md).

# 01 - 前端Web 开发

[TonyYipx的博客 🔙](https://tonyyipx.gitbook.io/tonyyipx/)

### ★互联网如何运作

* 互联网是一推长电线/[海底电缆](https://www.submarinecablemap.com/)
* 客户端 - 服务器（open 24/7）
  * 客户端发出 **请求** 访问网页 “[www.google.com”](http://www.google.com”)
  * **请求** 被发送到互联网服务提供商（ISP）
  * 然后，ISP会将消息转发到DNS服务器
    * DNS 服务器
      * 输入：网页URL
      * 输出：网站的[**IP**](https://www.nslookup.io/)地址
  * 获取到IP地址
  * 浏览器根据IP地址向服务器发送消息
  * 服务器返回数据

### ★网站如何运作

* 服务器返回的数据由三种不同的文件组成：
  * HTML
    * 网站的结构内容（房子的砖块）
  * CSS
    * 网站的样式外观，针对HTML元素（墙的颜色、门的形状）
  * JS
    * 实现功能（灯泡、炊具，让房子变成一个家）
* 注意[Chrome开发者工具](https://developer.chrome.com/docs/devtools?hl=zh-cn)