网络开发基础：了解域名、主机、HTML、CSS、JavaScript、API 概念和作用！

作者

初次接触编程或尝试网页开发（如制作网站）的人，可能会首次接触到域名、主机、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 相关知识请参阅本文！

웹 개발 기초 3 : HTML 주요 용어와 개념 한눈에 보기

📖 HTML核心术语清单

术语说明
标签(Tag)HTML的基本构成单元。用尖括号(< >）包裹，用于标记代码的起始与结束。
元素(Element)包含标签与内容的完整结构。
<태그>내용</태그> 形态。
属性(Attribute)为标签提供附加信息的键值对。
<태그 속성="값">내용</태그> 形态。
头部定义文档元数据的区域。
<head> 在</head>
头部标签内编写元数据。
正文(Body)网页中显示的主要内容区域。 <body> 在 body 标签内编写。
HTML5HTML的最新标准版本，可更轻松实现多媒体与交互功能。
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;:"则将字体大小设定为24像素。

    📖 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')：在HTML文档中 <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应用程序用于交互的工具与函数集合。
    ES6JavaScript的最新语法（ECMAScript 6）。 let, const包含箭头函数等特性。
    HoistingJavaScript中将变量或函数声明提升至代码顶部的行为机制。

    📡 API：连接外部服务的接口

    • 技术概念：与外部服务或应用程序连接以实现数据交互的接口。
    • 作用：
      • 调用外部功能（天气、支付、地图等）获取数据或发送数据。
      • 开发者无需自行实现复杂功能，即可利用外部服务。
    • 特征：
      • 用于与其他服务通信的规则和工具。
      • 例如：通过PayPal API处理支付，或使用Google Maps API显示位置信息。

    API如同安装在房屋内的配送系统或连接外部水电的管道。PI在网站与外部服务间扮演中介角色。正如家庭需连接外接管道才能订餐或用水，网站同样需要连接外部数据或功能（API）。

    例如，要在网站上显示天气信息，就需要使用外部天气API。通过API，您的家（网站）就能与外部世界互动！

    API运作机制

    1. 客户端(Client)：
      • 使用API的程序或用户（如浏览器、应用程序）。
      • 发起数据请求（如天气应用查询实时天气）
    2. API请求：
      • 客户端向API的特定**端点（URL）**发送请求。
      • 请求主要使用HTTP方法：
        • GET：获取数据。
        • POST：创建数据。
        • PUT：修改数据。
        • DELETE：删除数据。
      • 示例： GET https://api.weather.com/current?city=Seoul
    3. 服务器(Server):
      • 处理API请求的系统。
      • 确认客户端请求，并处理所需数据。
    4. 响应(Response):
      • 服务器将请求结果返回给客户端。
      • 主要以JSON格式返回数据。
      • 示例：json复制编辑{ "city": "Seoul", "temperature": "15°C", "condition": "Sunny" }
    5. 客户端处理：
      • 客户端利用响应数据显示信息或执行后续操作。
      • 示例：在应用界面显示"首尔当前天气：晴，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请求 → 服务器响应。
    （此阶段通过GET请求向服务器获取数据）

    2. then(response => response.json()) : 응답 데이터를 JSON으로 변환
    （服务器转换后的响应以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处理
    当因网络问题、错误URL或服务器响应失败等导致请求失败时， catch 捕获块将被执行。error 该对象包含错误信息，可将其输出至控制台或通知用户。

    1. 1. `fetch` 函数
      • 说明：用于发送HTTP请求的函数。
      • 作用：
        • https://api.weather.com/current?city=Seoul向服务器发送请求以获取首尔天气数据。
        • 默认执行GET请求，通过在URL中包含查询参数来请求数据。
        • fetch该函数为异步函数，返回Promise对象。
    2. GET请求
      • 说明：从服务器获取数据的HTTP请求方式。
      • 作用：
        • 用于读取服务器资源，不修改数据。
        • 通过在URL中添加查询参数(?city=Seoul）来精确指定请求内容。
        • 示例：网页或图像文件的加载均采用GET请求。
    3. then 方法
      • 说明：在Promise成功解析后执行。
      • 作用：
        • 处理前序操作的结果，可将多个 then以链式结构串联多个操作，实现任务的顺序执行。
        • 示例：处理数据转换并显示到界面的任务。
    4. 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。
    速率限制在特定时间段内限制客户端可发送请求数量的机制。
    WebhookAPI在特定事件发生时向客户端推送数据的方式。
    REST（表征状态转移）API设计架构风格，通过URL表示资源。以RESTful API形式实现。
    GraphQL专为API设计的查询语言，可按需请求并获取特定数据。
    SDK（软件开发工具包）为便捷使用特定API而提供的库及工具集合。
    CORS（跨源资源共享）允许或限制跨域请求的安全策略。

    编程语言分类

    1. HTML与CSS：基础结构与样式
      • 与其说是编程语言，不如理解为设计和美化网页内容的工具。
      • 初学者也能轻松入门，可为网页开发打下基础。
    2. JavaScript：编程的第一步
      • JavaScript是赋予网页动态效果的实际编程语言。
      • 通过JavaScript学习条件语句、循环语句、函数等编程核心概念。
    3. API：高级应用
      • 在掌握编程语言和工具的基础后，将学习运用API连接外部服务的技术。
      • 这在实际服务开发阶段被广泛应用。

    如何学习才好？

    1. 循序渐进从基础开始：
      • 按HTML → CSS → JavaScript顺序学习。
      • 在理解各自角色与功能的同时，从创建简单网页开始实践。
    2. 实践与项目：
      • 用基础HTML/CSS构建静态页面，通过JavaScript添加交互功能。
      • 尝试利用API实现实时数据（如天气信息）展示等项目。
    3. 循序渐进式扩展：
      • 从初级阶段学习HTML、CSS、JavaScript，逐步扩展至API、服务器开发及数据库领域。

    结论

    域名和主机是使网站能在互联网上运行的核心概念。配置好主机与域名，并运用HTML、CSS、JavaScript即可开启网页开发之旅。夯实
    基础的同时，通过实际项目实践能更高效地掌握知识！

    관련 콘텐츠:

    Default Thumbnail网站开发基础 3：HTML 关键术语和概念概览 Default Thumbnail1. 应用程序接口基础知识 – 了解应用程序接口和数据库 (DB) Default Thumbnail2. 应用程序接口深度挖掘概念–构建服务的关键概念 Default ThumbnailCGI 访问与 Shell（外壳访问）访问的区别和适当性

    发表评论

    목차
    → 목차