一、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 运行页面
- 使用文本编辑器保存为
hello.html
- 双击或拖到浏览器打开,即可看到网页效果
五、常见 HTML 标签简介
标签 | 说明 |
---|---|
<html> |
HTML 根标签 |
<head> |
页面头部信息(元信息) |
<body> |
页面主体内容 |
<h1>~<h6> |
标题标签 |
<p> |
段落 |
<a> |
超链接 |
<img> |
图片 |
<ul><li> |
无序列表 |
<div> |
通用容器 |
六、搭建本地 HTML 开发环境(可选)
6.1 使用 Live Server 插件(VS Code)
- 安装 Live Server 插件
- 右键 HTML 文件 → Open with Live Server
- 实现自动刷新功能,提升开发效率
6.2 使用本地 HTTP 服务(可选)
Python 3 环境下:
# 在 HTML 文件目录中启动
python -m http.server 8000
访问:http://localhost:8000
七、进阶推荐
- 学习 HTML5 新增语义标签:
<article>
、<section>
、<nav>
等 - 配合 CSS 完善页面样式
- 使用 JavaScript 实现交互功能
- 学习网页结构化设计与响应式布局
八、学习资源推荐
本文由“小奇Java面试”原创发布,转载请注明出处。
可以搜索【小奇JAVA面试】第一时间阅读,回复【资料】获取福利,回复【项目】获取项目源码,回复【简历模板】获取简历模板,回复【学习路线图】获取学习路线图。