初次接触编程或尝试网页开发（如制作网站）的人，可能会首次接触到域名、主机、HTML、CSS、JavaScript、API等术语。 虽然现在即使不懂编程语言也能通过AI实现，但若能理解这些基础概念的作用机制，学习过程会事半功倍。本课程旨在快速帮助您掌握网页开发中核心要素——域名、主机、HTML、CSS、JavaScript及API的概念与功能。
域名、主机、HTML、CSS、JavaScript与API全解析！
若将建站过程比作"建造房屋"，那么域名、主机及各类网络技术便是构成房屋的要素。用房屋类比能让理解事半功倍！下面就让我们通过房屋比喻来确认域名、主机、HTML、JavaScript和API的作用。
网络概念 房屋类比 作用 域名 房屋地址 用户访问网站的路径 托管 房屋本身 存储网站数据的空间 HTML 房屋的骨架 构成网站基本结构 CSS 房屋的内部装饰 网站的设计与样式装饰 JavaScript 房屋的电气与自动化 为网站添加动态功能 API 连接外部服务 连接外部数据或功能
🏡 域名：房屋地址
技术概念： 网站的地址。作用：
将网络上的IP地址转换为人类可读的格式，便于用户访问网站。
示例： google.com, naver.com.
正如朋友们 需要准确地址 才能拜访您的住所，互联网用户访问网站时同样 需要地址 指引。
域名示例 ：www.myhouse.com "即为域名。输入此地址后，用户便能找到您的家（网站）。
注册域名 如同登记房屋地址 。若地址遗失，无人能找到您的住所。要建立主页，必须先设置域名。
域名
🏠 托管：建造房屋的土地
技术概念： 将网站托管于互联网的服务器空间。作用：
存储网站内容，确保用户可全天候访问。
托管服务商（如AWS、Cafe24等）负责服务器管理与维护。
可将托管视为建造房屋的土地。建造房屋需要土地，对吧？为搭建网站，我们可选择在线租赁托管服务器，或自行运营托管服务器。
网站需要由数据和文件构成的存储空间 ，这个空间就是托管服务器。
如同您在家中存放物品，网站内容（文本、图片、视频）也会存储在托管服务器上 。
托管服务类似于房屋租赁或产权持有。选择优质托管服务，就能拥有安全舒适的"家园"。
主要托管服务包括
🛠️ HTML：房屋的骨架
基础语言：
定义网页结构的语言。作用：
通过文档标记（<h1>, <p>, <img> 等）来组织内容。
文本、图像、链接等元素的布局。
特征：
属于静态语言，更偏向标记语言 而非编程语言。
易于学习，是网页开发的基础起点。
可将HTML视为建造房屋的骨架。它在空白空间中构建基础网站结构。
正如建造房屋需要墙壁、天花板、门等基础结构 。
而构建网站基础框架的语言正是HTML 。HTML如同建造房屋的"骨架"设计图。
但仅有骨架的房屋看起来会很单调吧？这时就需要CSS和JavaScript的 加持！
眼前这个看似空白的页面，其实也是由HTML和CSS构成的。而页面跳转时使用的技术，就是JavaScript。
下面的代码是HTML示例：
<h1>여기는 거실입니다</h1>
<p>거실에는 소파와 테이블이 있습니다.</p>在示例代码中，h1代表页面标题1（头部1），即告知页面主题；p代表段落。
<> 代表代码的开始，</> 代表代码的结束。因此"<h1>"表示标题1的起始，"</h2>"则表示标题1的结束。
下方简要列出了 HTML 主要术语清单，更多 HTML 相关知识请参阅本文 ！
📖 HTML核心术语清单
术语 说明 标签(Tag) HTML的基本构成单元。用尖括号(< >）包裹，用于标记代码的起始与结束。 元素(Element) 包含标签与内容的完整结构。<태그>내용</태그> 形态。 属性(Attribute) 为标签提供附加信息的键值对。<태그 속성="값">내용</태그> 形态。 头部 定义文档元数据的区域。<head> 在</head> 正文(Body) 网页中显示的主要内容区域。 <body> 在 body 标签内编写。 HTML5 HTML的最新标准版本，可更轻松实现多媒体与交互功能。 DOCTYPE 定义文档HTML版本的声明。 <DOCTYPE html> 格式。 注释(Comment) 添加代码说明的区域。浏览器不显示。 <!-- 내용 -->
🎨 CSS：房屋的室内设计
基础语言： 定义网页样式（设计）的语言。作用：
指定HTML元素的颜色、尺寸、位置、背景等。
使网页视觉美观且用户友好。
特点：
与HTML分离，可独立管理设计部分。
运作方式： 作为声明式语言，描述样式而非逻辑。
可将CSS 视为房屋的室内装饰 。若无CSS，房屋仅具备功能性而外观粗糙。正如决定墙纸颜色、地面材质、家具布局一样，为网页添加CSS能使其成为精致美观的居所。
CSS通过设定网站的颜色、尺寸、位置、背景等，为HTML构建的骨架施加设计。它为HTML骨架注入美学元素 。CSS相当于房屋的油漆、壁纸和家具 布局——无论是将墙壁涂成白色，还是为窗户悬挂窗帘，这些都是CSS的职责。
CSS代码示例：
h1 {
color: blue;
font-size: 24px;
}
此为H1标签的样式应用示例。"color: blue;font-size: 24px;
📖 CSS核心术语表
术语 说明 选择器 用于选择要应用样式的HTML元素。例如： h1, .class, #id 等。 属性 定义样式的属性。例如： color, font-size, margin. 值 表示属性(Property)的指定值。例如： blue, 16px, 10px. Class 用于将相同样式应用于多个元素的属性。示例： .myClass. ID 用于为特定元素应用唯一样式的属性。例如： #myId. 内联样式 在HTML标签的 style 属性中直接编写CSS的方式。例如： <h1 style="color: red;">. 外部CSS 在独立的 .css 文件中编写样式并进行关联的方式。 盒模型 定义元素尺寸与边距的模型， margin, border, padding, content 包含。 伪类 仅在特定状态下应用样式的类。例如： :hover, :focus. 媒体查询 根据屏幕尺寸或设备类型应用不同样式。例如： @media
⚡ JavaScript："网页的功能（生命）"
编程语言： 为网页添加动态功能的脚本语言。作用：
处理用户交互（点击、输入等）。
实现动画效果、按钮点击事件及实时数据更新。
特点：
作为编程语言，可编写变量、条件语句、循环语句等逻辑。
示例： 点击按钮弹出通知或实时更新数据。
JavaScript如同安装在房屋中的智能功能 。它能添加交互动作，例如按下按钮点亮灯光，或通过传感器自动开启门锁。具体应用场景 包括：用户点击按钮时弹出窗口，或实现图片幻灯片切换功能。
JavaScript是赋予家居活力的核心元素。如同"智能家居"般，按下按钮即可开启灯光或播放音乐。应用于网页时，它负责实现页面跳转、弹出窗口及图片轮播等交互功能。
JavaScript代码示例 ：
document.querySelector('button').
addEventListener('click',
() => { alert('문이 열렸습니다!'); });document.querySelector('button')：<button> 选择元素。在页面中查找第一个 <button> 元素。
addEventListener('click',: 为选定按钮添加点击事件监听器 。设置当用户点击按钮时执行特定操作。
() => { alert('문이 열렸습니다!'); }:箭头函数 。函数内容 alert('문이 열렸습니다!')为弹出警告窗口 。
📖 JavaScript 核心术语表
术语 说明 变量 用于存储数据的变量。 var, let, const通过 `var` 或 `let` 声明。 函数 定义代码块并使其可复用的函数。 function 使用关键字编写。 Array 将多个数据存储于单个变量的列表形式。示例： [1, 2, 3]. 对象 以键值对形式存储数据的结构。例如： { key: "value" }. 事件 为响应用户操作（点击、输入等）而触发的事件。 DOM 通过JavaScript操作HTML文档的对象模型（Document Object Model）。 回调函数 作为参数传递给其他函数的函数。常用于异步操作。 Promise 表示异步操作完成或失败的对象。 .then以及 .catch处理。 Async/Await 一种语法，可帮助像编写同步代码那样编写异步任务。 Loop 通过循环语句多次执行代码块。例如： for, while. Conditional 根据条件执行不同代码。例如： if, else, switch. Scope 变量或函数生效的有效范围。 Global与 Local。 闭包 函数能够访问其声明环境（作用域）中变量的特性。 API 应用程序用于交互的工具与函数集合。 ES6 JavaScript的最新语法（ECMAScript 6）。 let, const包含箭头函数等特性。 Hoisting JavaScript中将变量或函数声明提升至代码顶部的行为机制。
📡 API：连接外部服务的接口
技术概念： 与外部服务或应用程序连接以实现数据交互的接口。
作用：
调用外部功能（天气、支付、地图等）获取数据或发送数据。
开发者无需自行实现复杂功能，即可利用外部服务。
特征：
用于与其他服务通信的规则和工具。
例如： 通过PayPal API处理支付，或使用Google Maps API显示位置信息。
API如同 安装在房屋内的配送系统或连接外部水电的管道 。PI在网站与外部服务间扮演中介角色 。正如家庭需连接外接管道才能订餐或用水，网站同样需要连接外部数据或功能（API）。
例如，要在网站上显示天气信息，就需要使用外部天气API。通过API，您的家（网站）就能与外部世界互动！
API运作机制
客户端(Client)：
使用API的程序或用户（如浏览器、应用程序）。
发起数据请求（如天气应用查询实时天气）
API请求：
客户端向API的特定**端点（URL）**发送请求。
请求主要使用HTTP方法：
GET： 获取数据。POST： 创建数据。PUT： 修改数据。DELETE： 删除数据。
示例： GET https://api.weather.com/current?city=Seoul
服务器(Server):
处理API请求的系统。
确认客户端请求，并处理所需数据。
响应(Response):
服务器将请求结果返回给客户端。
主要以JSON格式返回数据。
示例：json复制编辑{ "city": "Seoul", "temperature": "15°C", "condition": "Sunny" }
客户端处理：
客户端利用响应数据显示信息或执行后续操作。
示例：在应用界面显示"首尔当前天气：晴，15°C"。
API可视作餐厅的菜单与点餐流程 。
响应(Response)： 提供完成的菜品。菜单（API文档）： 可选菜品及选项（功能与接口）。点餐(Request)： 请求所需菜品(数据)。厨房(服务器)： 处理请求并准备餐点。
简易示例（JavaScript调用REST API）
fetch('https://api.weather.com/current?city=Seoul')
.then(response => response.json()) // 응답 데이터를 JSON으로 변환
.then(data => console.log(data)) // 결과 출력
.catch(error => console.error('Error:', error)); // 오류 처리
上述API调用示例的运行流程如下：
1. fetch('https://api.weather.com/current?city=Seoul') ：通过fetch函数发送URL请求 → 服务器响应。
2. then(response => response.json()) : 응답 데이터를 JSON으로 변환response.json() 该函数本身也返回Promise，因此当JSON数据准备就绪后， then传递数据。
3. .then(data => console.log(data)) : 将转换后的数据通过then处理 → 输出至控制台。 data此处的 response.json()表示转换后的JSON数据。可利用该数据进行界面展示或执行其他操作。本示例中 console.log(data)使用.then()将JSON数据输出至浏览器控制台。
4. .catch(error => console.error('Error:', error)); 发生错误时通过catch处理 catch 捕获块将被执行。error 该对象包含错误信息，可将其输出至控制台或通知用户。
1. `fetch` 函数
说明： 用于发送HTTP请求的函数。作用：
https://api.weather.com/current?city=Seoul向服务器发送请求以获取首尔天气数据。默认执行GET请求，通过在URL中包含查询参数来请求数据。
fetch该函数为异步函数 ，返回Promise对象。
GET请求
说明： 从服务器获取数据的HTTP请求方式。作用：
用于读取服务器资源，不修改数据。
通过在URL中添加查询参数(?city=Seoul）来精确指定请求内容。
示例：网页或图像文件的加载均采用GET请求。
then 方法
说明： 在Promise成功解析后执行。作用：
处理前序操作的结果，可将多个 then以链式结构串联多个操作，实现任务的顺序执行。
示例：处理数据转换并显示到界面的任务。
response.json()response.json()
该操作返回Promise，将实际数据转换为对象并准备就绪供后续使用。
说明： 将服务器返回的响应数据解析为JSON格式。角色： JSON（JavaScript对象表示法）是服务器与客户端之间数据传输的通用格式。
📖 API核心术语列表
术语 描述 API（应用程序编程接口） 应用程序之间通信和数据交换的接口。 端点 接收API请求的特定URL。例如： https://api.example.com/data. 请求 客户端向API请求数据的操作。例如： GET, POST, PUT, DELETE. 响应 API对请求向客户端发送的数据。例如：以JSON格式返回。 HTTP方法 定义API请求的操作类型。例如： GET(查询), POST(创建), PUT(修改)， DELETE(删除)。 状态码 表示请求结果的HTTP代码。例如： 200 OK, 404 Not Found, 500 Internal Server Error. JSON（JavaScript对象表示法） API请求与响应数据的通用格式。易于人类阅读且便于机器处理。 Header 包含在请求和响应中的元数据。例如：认证令牌、内容类型。 查询参数 URL中包含的附加数据。例如： ?key=value. 身份验证 验证API访问权限的过程。例如：API密钥、OAuth。 速率限制 在特定时间段内限制客户端可发送请求数量的机制。 Webhook API在特定事件发生时向客户端推送数据的方式。 REST（表征状态转移） API设计架构风格，通过URL表示资源。以RESTful API形式实现。 GraphQL 专为API设计的查询语言，可按需请求并获取特定数据。 SDK（软件开发工具包） 为便捷使用特定API而提供的库及工具集合。 CORS（跨源资源共享） 允许或限制跨域请求的安全策略。
编程语言分类
HTML与CSS：基础结构与样式
与其说是编程语言，不如理解为设计和美化网页内容的工具 。
初学者也能轻松入门， 可为网页开发打下基础。
JavaScript：编程的第一步
JavaScript是赋予网页动态效果的实际编程 语言。
通过JavaScript学习条件语句、循环语句、函数等编程核心概念。
API：高级应用
在掌握编程语言和工具的基础后，将学习运用API连接外部服务 的技术。
这在实际服务开发阶段被广泛应用。
如何学习才好？
循序渐进从基础开始：
按HTML → CSS → JavaScript顺序学习。
在理解各自角色与功能的同时，从创建简单网页开始实践。
实践与项目：
用基础HTML/CSS构建静态页面，通过JavaScript添加交互功能。
尝试利用API实现实时数据（如天气信息）展示等项目。
循序渐进式扩展：
从初级阶段学习HTML、CSS、JavaScript，逐步扩展至API、服务器开发及数据库领域。
结论 域名和主机是使网站能在互联网上运行的核心概念。配置好主机与域名，并运用HTML、CSS、JavaScript即可开启网页开发之旅。夯实
