HTML详细教程

HTML详细教程

HTML 零基础详细教程

本教程从基础概念到实战案例，循序渐进讲解HTML核心知识，适合零基础入门，所有代码均可直接复制运行，快速掌握网页搭建基础。

一、HTML 基础认知

  1. 什么是HTML

HTML（HyperText Markup Language，超文本标记语言），不是编程语言，是用来描述网页结构的标记语言，通过各类标签定义网页中的文字、图片、链接、视频等元素。

  1. HTML 文档基本结构

所有HTML页面都遵循固定的骨架结构，标签成对出现（少数自闭合标签除外），层级嵌套清晰。

1
2
3
4
5
6
7
8
<!DOCTYPE html> <!-- 声明文档类型为HTML5，必须放在第一行 -->
<html lang="zh-CN">  <!-- 根标签，lang指定语言（中文为zh-CN） -->
<head>  <!-- 头部：页面元信息，不显示在网页正文 -->    
<meta charset="UTF-8">  <!-- 字符编码，UTF-8支持所有中文/特殊字符 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">  <!-- 适配手机端 -->    <title>我的第一个HTML页面</title>  <!-- 网页标题，显示在浏览器标签 -->
    </head>  <body>  <!-- 主体：网页所有可见内容都写在这里 -->  
    你好，HTML！<!-- 正文内容 -->
      </body>  </html>
  1. 如何编写/运行HTML

编写工具：记事本（电脑自带）、VS Code（推荐，免费带语法高亮）、HBuilder等；

保存规则：文件后缀为.html或.htm，编码选择UTF-8；

运行：直接双击保存的HTML文件，用任意浏览器（Chrome/Edge/Firefox）打开即可。

  1. HTML 核心规则

标签不区分大小写，推荐小写（符合W3C规范）；

标签可嵌套，但不可交叉嵌套（正确：

，错误：

）；

部分标签为自闭合标签（无需结束标签），如
、、（HTML5中可省略/，写为
即可）。

二、HTML 基础标签

基础标签是搭建网页的核心，涵盖文字、段落、换行、标题、列表等常用元素，是必须掌握的基础。

  1. 标题标签：

    -

表示网页中的标题，从h1到h6字体逐渐变小，一个页面建议只写一个h1（符合SEO规范，为页面核心标题）。

1
2
3
4
5
6
<h1>一级标题（最大）</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题（最小）</h6>
  1. 段落与换行标签：

    、

：定义段落，自动在段落前后生成空白行，区分不同文本块；


：强制换行，无空白行，适用于同一段落内的换行。

这是第一个段落，HTML是网页的基础，所有网页都是基于HTML搭建的。

这是第二个段落
这是同一段落内的换行，用br标签实现。

  1. 文本格式化标签

用于对文字进行加粗、斜体、删除线、下划线等样式设置，分语义化标签（推荐，明确标签含义）和纯样式标签（仅做样式，不推荐）。

效果语义化标签纯样式标签加粗斜体删除线下划线上标-下标-加粗的文字（语义化，强调重要性）

斜体的文字（语义化，强调语气）

带删除线的文字

H2O（水的化学式，下标）

23=8（2的3次方，上标）

  1. 列表标签：无序列表、有序列表、自定义列表

网页中常用的内容排版形式，如导航、步骤、说明等，列表标签需嵌套使用（外层列表+内层列表项）。

（1）无序列表：