HTML 安装使用教程

发布于:2025-07-05 ⋅ 阅读:(13) ⋅ 点赞:(0)

一、HTML 简介

HTML(HyperText Markup Language)即超文本标记语言,是构建 Web 网页的基础语言。它定义了网页的结构和内容,与 CSS 和 JavaScript 共同构成前端开发三大核心技术。


二、HTML 安装说明

HTML 不需要安装!

HTML 是一种标记语言,只需要使用任何文本编辑器编写 .html 文件,并通过浏览器打开即可查看效果。


三、准备开发环境

3.1 选择文本编辑器

编辑器 特点
VS Code 插件丰富、调试友好、主流推荐
Sublime Text 启动快、轻量级编辑器
Atom GitHub 出品,支持多语言
Notepad++ Windows 下经典编辑器

3.2 使用浏览器预览

任何现代浏览器都可以打开 .html 文件:

  • Google Chrome
  • Firefox
  • Safari
  • Edge

四、编写第一个 HTML 页面

4.1 示例代码:hello.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Hello HTML</title>
</head>
<body>
    <h1>你好,HTML!</h1>
    <p>这是我的第一个网页。</p>
</body>
</html>

4.2 运行页面

  1. 使用文本编辑器保存为 hello.html
  2. 双击或拖到浏览器打开,即可看到网页效果

五、常见 HTML 标签简介

标签 说明
<html> HTML 根标签
<head> 页面头部信息(元信息)
<body> 页面主体内容
<h1>~<h6> 标题标签
<p> 段落
<a> 超链接
<img> 图片
<ul><li> 无序列表
<div> 通用容器

六、搭建本地 HTML 开发环境(可选)

6.1 使用 Live Server 插件(VS Code)

  1. 安装 Live Server 插件
  2. 右键 HTML 文件 → Open with Live Server
  3. 实现自动刷新功能,提升开发效率

6.2 使用本地 HTTP 服务(可选)

Python 3 环境下:

# 在 HTML 文件目录中启动
python -m http.server 8000

访问:http://localhost:8000


七、进阶推荐

  • 学习 HTML5 新增语义标签:<article><section><nav>
  • 配合 CSS 完善页面样式
  • 使用 JavaScript 实现交互功能
  • 学习网页结构化设计与响应式布局

八、学习资源推荐


本文由“小奇Java面试”原创发布,转载请注明出处。

可以搜索【小奇JAVA面试】第一时间阅读,回复【资料】获取福利,回复【项目】获取项目源码,回复【简历模板】获取简历模板,回复【学习路线图】获取学习路线图。

在这里插入图片描述