HTML编程 课程一、HTML 基础入门
本课程揭示了前端学习的核心逻辑、技巧，通过深入浅出的讲解，快速掌握前端编程知识，学到的不仅是编程知识，更是编程的奥秘。在所有的编程语言中，前端编程是最容易学习的一门课程，它对外部环境依赖很少，只要有个文本编辑器和浏览器就可以开始学习了，是从小白到程序员转变的最快方式，通过本课程的学习，将实现学员从0到1的编程跨越。
学习前端编程的核心目的，是掌握构建用户可直观交互、视觉美观、功能流畅的网页 / 前端应用的能力，既能实现从 “静态页面搭建” 到 “动态交互开发” 的落地，也能满足企业前端开发岗位的核心需求，同时掌握一门跨平台的实用编程技能，适配网页、移动端 H5、小程序等多场景开发，为后续全栈开发、前端框架进阶打下基础，无论是职场就业、副业接单还是个人项目开发，都是低门槛、高实用的技术切入点。
前端编程围绕HTML、CSS、JS三个模块展开，它们是前端三个联系紧密又相对独立的部分，共同构成了一个整体。前端编程学习是一个循序渐进、持续积累的过程，遵循 “HTML→CSS→JS” 的核心逻辑，并不是一开始就学JavaScript，前端不等于JavaScript。结合科学的方法、有效的方式和实用的攻略，以 “基础为核心、实战为导向”，就能逐步掌握前端开发的核心能力，实现从入门到实战的跨越，为后续的技术进阶和职场发展打下坚实的基础。
HTML 是网页的 “骨架”，负责定义页面的结构和语义，决定页面有什么内容（如标题、段落、表单、图片），是所有前端开发的基础，没有结构的页面，样式和交互都无从谈起；CSS 是网页的 “皮肤”，基于 HTML 的结构实现视觉美化，负责页面的布局、颜色、字体、动画等样式设计，让页面更符合视觉审美；JS 是网页的 “大脑”，负责实现页面的动态交互和逻辑处理，让静态的页面 “动起来”，如表单验证、元素拖拽、数据请求等，是构建现代交互型前端应用的核心。先学透 HTML，能建立清晰的页面结构思维，避免后续 CSS 样式错乱、JS 获取元素困难；再学 CSS，能在稳定的结构上做视觉优化，理解样式与结构的关联逻辑；最后学 JS，能基于完整的 “结构 + 样式” 页面实现交互，层层递进的学习能降低理解难度。
这是一门通俗易懂、逻辑清晰且示例精简的HTML基础课程，将从核心概念出发，逐步带你掌握HTML的核心用法，最终能搭建出结构完整的基础网页。
一、HTML 核心概念认知
1. 什么是HTML？
HTML 全称是HyperText Markup Language（超文本标记语言），注意它不是编程语言（没有逻辑执行能力），而是标记语言，用于定义网页的结构和内容。
- 超文本：不仅能包含文本，还能包含图片、链接、视频等多种内容
- 标记语言：通过一系列预定义的「标签」来标记内容的含义（比如“这是标题”“这是段落”）
2. HTML 文档的基本结构（必背）
所有HTML文件都遵循固定的基本结构，就像写作文要有开头、正文、结尾一样，缺一不可，示例如下（可直接复制运行）：
HTML |
关键说明：
- 后缀名：HTML文件的后缀名必须是.html或.htm（推荐使用.html）
- 运行方式：直接用任意浏览器（Chrome、Edge等）打开保存后的HTML文件即可预览效果
- 结构特点：标签通常成对出现（开始标签<标签名>+ 结束标签</标签名>），少数标签是自闭合标签
二、HTML 核心标签学习
HTML的核心是标签，以下是最常用的核心标签，按功能分类，每个标签都附精简示例。
1. 标题标签（<h1>-<h6>）
用于定义网页中的标题，从<h1>到<h6>字体大小依次递减，一个页面建议只使用一个<h1>（提升搜索引擎优化效果）。
HTML |
2. 段落标签（<p>）
用于定义网页中的正文段落，自动在段落前后添加空白行，实现段落分隔。
HTML |
3. 链接标签（<a>，核心：href属性）
用于创建跳转链接，可跳转到其他网页、本地文件、页面锚点等，href属性是必须的，用于指定跳转目标地址。
HTML |
4. 图片标签（<img>，自闭合，核心属性：src、alt）
用于在网页中插入图片，是自闭合标签（无结束标签），两个核心属性缺一不可：
- src：指定图片的地址（本地图片路径或网络图片URL）
- alt：图片加载失败时的替代文本，提升可访问性，搜索引擎也会依赖该属性
HTML |
5. 列表标签（有序列表<ol>+ 无序列表<ul>+ 列表项<li>）
用于展示有规律的一组数据，分为有序列表（有顺序编号）和无序列表（无顺序，默认圆点标记），列表项必须放在<li>中。
HTML |
三、HTML 标签的通用特性
1. 标签属性
几乎所有HTML标签都可以添加属性，属性放在开始标签中，格式为属性名="属性值"（属性值建议用双引号包裹），用于补充标签的额外信息（比如<a>的href、<img>的src）。
2. 注释语法
HTML注释用于标注代码说明，不会在页面上显示，语法为：<!-- 这里是注释内容 -->，便于自己和他人理解代码含义。
3. 自闭合标签
部分标签不需要包裹内容，称为自闭合标签，常见的有：<br>（换行）、<img>（图片）、<meta>（头部配置）、<hr>（水平线）。
四、实战：整合所有知识点，搭建一个简单网页
将上面学习的标签整合起来，实现一个结构完整的简单网页，示例如下：
HTML |
五、学习总结与下一步
- HTML 的核心是「结构」，通过预定义标签标记内容的含义，不负责样式美化（样式由CSS负责）
- 掌握基本结构（html/head/body）和核心标签的用法，就能搭建基础网页
- 下一步建议：
- 多动手练习，修改示例中的内容、路径，观察页面变化
- 学习CSS，为网页添加颜色、布局、字体等美化效果
- 了解HTML5的新标签（如<header>、<footer>、<section>），提升网页结构的语义化
运行提示
所有示例代码均可直接复制到记事本（或VS Code等编辑器），保存为.html后缀文件，用浏览器打开即可查看效果，建议边看边改，加深理解。
HTML页面总体架构： HTML元素+网页布局区块概念汇总表