HTML入门 - 技术栈

文章目录

- 一、HTML核心规则
- 二、HTML基本结构（所有网页都必须有，固定模板）
- 三、HTML常用标签
- - [（一）标题标签（h1~h6）------ 用于显示标题，区分层级](#（一）标题标签（h1~h6）—— 用于显示标题，区分层级)
  - [（二）段落标签（p）------ 用于显示正文段落](#（二）段落标签（p）—— 用于显示正文段落)
  - [（三）换行标签（br/）------ 强制换行](#（三）换行标签（br/）—— 强制换行)
  - [（四）文本格式化标签------ 美化段落内文字，突出重点](#（四）文本格式化标签—— 美化段落内文字，突出重点)
  - [（五）超链接标签（a）------ 实现页面跳转](#（五）超链接标签（a）—— 实现页面跳转)
  - [（六）图片标签（img/）------ 插入图片](#（六）图片标签（img/）—— 插入图片)
  - [（七）容器标签（div、span）------ 用于布局、包裹内容](#（七）容器标签（div、span）—— 用于布局、包裹内容)
  - [（八）列表标签（ul、ol、li、dl、dt、dd）------ 用于显示列表内容](#（八）列表标签（ul、ol、li、dl、dt、dd）—— 用于显示列表内容)
  - - [1. ul（无序列表）的核心属性](#1. ul（无序列表）的核心属性)
    - [2. ol（有序列表）的核心属性](#2. ol（有序列表）的核心属性)
    - [3. dl（自定义列表）、dt（术语）、dd（解释）的核心属性](#3. dl（自定义列表）、dt（术语）、dd（解释）的核心属性)
    - [4. li（列表项）的核心属性](#4. li（列表项）的核心属性)
  - [（九）表格标签（table、tr、th、td）------ 用于展示结构化数据](#（九）表格标签（table、tr、th、td）—— 用于展示结构化数据)
  - - [1. table（表格容器）的核心属性](#1. table（表格容器）的核心属性)
    - [2. tr（表格行）的核心属性](#2. tr（表格行）的核心属性)
    - [3. th（表头单元格）、td（普通单元格）的核心属性](#3. th（表头单元格）、td（普通单元格）的核心属性)
  - [（十）表单标签（form、input、label、select、textarea）------ 实现用户交互](#（十）表单标签（form、input、label、select、textarea）—— 实现用户交互)
  - - [1. 表单容器标签（form）------ 所有表单元素的父容器](#1. 表单容器标签（form）—— 所有表单元素的父容器)
    - [2. 输入框标签（input）------ 最常用的表单元素，单标签](#2. 输入框标签（input）—— 最常用的表单元素，单标签)
    - [3. 标签关联标签（label）------ 关联输入框，提升体验](#3. 标签关联标签（label）—— 关联输入框，提升体验)
    - [4. 下拉菜单标签（select、option）------ 用于多选项选择，节省页面空间](#4. 下拉菜单标签（select、option）—— 用于多选项选择，节省页面空间)
    - [5. 文本域标签（textarea）------ 多行文本输入框，用于输入大量文字](#5. 文本域标签（textarea）—— 多行文本输入框，用于输入大量文字)
  - [（十一）HTML注释标签------ 标注代码，不显示在页面上](#（十一）HTML注释标签—— 标注代码，不显示在页面上)
- 四、新手实操注意事项（必看）
- 五、新手入门实操案例（综合运用所有标签）

HTML全称是HyperText Markup Language（超文本标记语言）， 它不是编程语言 （不用写复杂逻辑），只是"标记语言"------用固定的"标签"，告诉浏览器如何显示网页内容（比如哪里是标题、哪里是图片、哪里是段落）。

补充说明：标签的"属性"是标签的"附加设置"，用来修改标签的默认效果（比如给图片设宽度、给超链接设跳转地址），格式固定为：<标签名属性名="属性值"> 内容 </标签名>（单标签格式：<标签名属性名="属性值" />），属性名和属性值之间用"="连接，属性值必须用双引号（""）包裹。

一、HTML核心规则

HTML的核心是"标签"，所有网页内容都靠标签包裹，记住5个核心规则，避免踩坑：

标签大多是"成对出现"的：有一个"开始标签"，就有一个"结束标签"，格式是：<标签名> 内容 </标签名>（比如<p>这是段落</p>）；
少数标签是"单标签"（自闭合标签）：不需要结束标签，格式是：<标签名 />（比如插入图片的<img />，结尾加/表示闭合，避免出错）；
标签区分大小写吗？不区分（比如<P>和<p>效果一样），但行业规范统一写"小写"（养成好习惯，后续学习框架也需要小写）；
标签可以"嵌套"，但不能"交叉嵌套"：正确写法：<div><p>内容</p></div>；错误写法：<div><p>内容</div></p>（交叉嵌套会导致网页显示异常）；
标签属性规则：① 一个标签可以有多个属性，属性之间用空格隔开（比如<img src="1.jpg" alt="风景" width="300" />）；② 属性名和属性值不能写错（比如src不能写成sre，width不能写成widht）；③ 属性值必须用双引号包裹（单引号也可以，但行业规范用双引号）。

二、HTML基本结构（所有网页都必须有，固定模板）

任何一个HTML网页，都有固定的4个核心部分，就像"房子的框架"，缺一不可，直接复制下面的模板，后续所有操作都在这个模板里写内容即可：

HTML 复制代码

<!DOCTYPE html>  <!-- 声明这是一个HTML5文件，告诉浏览器如何解析 -->
<html lang="zh-CN">  <!-- HTML根标签，所有内容都包裹在这个标签里；lang="zh-CN"表示网页是中文 -->
<head>  <!-- 头部：存放网页的"配置信息"，不显示在页面上 -->
    <meta charset="UTF-8">  <!-- 编码格式：UTF-8，避免中文乱码（必须写） -->
    <title>我的第一个HTML页面</title>  <!-- 网页标题，显示在浏览器标签栏上 -->
</head>
<body>  <!-- 主体：存放网页的所有可见内容（标题、段落、图片等），用户能看到的都在这里 -->
    这里写你想显示的内容（比如文字、图片、按钮）
</body>
</html>

逐行解释（理解即可）：

<!DOCTYPE html>：声明文档类型，告诉浏览器"这是HTML5网页"，固定写法，复制即可；
<html>：根标签，整个网页的"容器"，所有其他标签都要放在这个标签里面；核心属性：lang（语言属性），值为"zh-CN"表示中文网页，值为"en"表示英文网页（比如），不写也能显示，但规范必须写；
<head>：头部区域，负责"配置"，比如网页标题、编码格式，这些内容不会显示在页面上，只供浏览器识别；
<meta charset="UTF-8">：重中之重，必须写！否则网页中的中文会变成"乱码"（比如显示成???）；核心属性：charset（编码属性），值固定为"UTF-8"（唯一常用值，记死即可）；
<title>：网页标题，比如你打开百度，浏览器标签栏显示"百度一下，你就知道"，就是这个标签的作用；无额外常用属性，只需在标签内写标题文字即可；
<body>：主体区域，所有用户能看到的内容（比如文字、图片、按钮），都要写在这个标签里；常用属性（了解即可，后续用CSS替代）：bgcolor（背景颜色，值为颜色英文或十六进制，比如表示背景为粉色）、text（文字颜色，比如表示文字为蓝色）。

三、HTML常用标签

（一）标题标签（h1~h6）------ 用于显示标题，区分层级

作用：网页中的标题（比如文章标题、板块标题），h1到h6字体大小逐渐变小，一个页面建议只写1个h1（比如网页主标题），避免多个h1导致浏览器识别混乱。

语法：成对标签，<h1>标题内容</h1>、<h2>标题内容</h2>...<h6>标题内容</h6>

核心属性：

align：设置标题的对齐方式，常用值：left（左对齐，默认）、center（居中对齐）、right（右对齐）；
id：给标题设置唯一标识（后续锚点跳转、CSS美化会用到），值自定义（不能有空格、中文，比如id="main-title"）；
class：给标题设置类名（后续CSS批量美化会用到），值自定义（比如class="title"），后续学CSS再重点用。

示例（写在标签里，包含属性用法）：

html 复制代码

<body>
    <h1 id="main-title" align="center">我的个人介绍</h1>  <!-- 主标题，居中对齐，设置唯一标识 -->
    <h2 class="sub-title" align="left">基本信息</h2>  <!-- 二级标题，左对齐，设置类名 -->
    <h3>姓名</h3>  <!-- 三级标题，默认左对齐，不添加额外属性 -->
    <h4>年龄</h4>
    <h5>爱好</h5>
    <h6>联系方式</h6>  <!-- 六级标题，最小 -->
</body>

注意：1. 标题标签是"块级元素"（独占一行，后面的内容会自动换行），不能用来单纯"放大文字"（后续用CSS控制字体大小），只能用于标题；2. align属性后续会被CSS替代，但可先学会用，能快速看到效果；3. id值必须唯一，一个页面不能有两个相同id的标签。

（二）段落标签（p）------ 用于显示正文段落

作用：网页中的正文内容（比如文章段落、介绍文字），自动换行，段落之间有默认间距。

语法：<p>段落内容</p>（成对标签）

核心属性：

align：对齐方式，和h1~h6标签的align属性一致（left/center/right），默认左对齐；
id：唯一标识，用法和h1~h6标签一致（比如id="intro"）；
class：类名，用法和h1~h6标签一致，后续CSS批量美化用；
title：鼠标悬停在段落上时，显示的提示文字（比如<p title="这是我的自我介绍">大家好...</p>，鼠标放上去会显示提示）。

示例（包含属性用法）：

html 复制代码

<body>
    <h1 id="main-title" align="center">我的个人介绍</h1>
    <p id="intro" align="center" title="自我介绍">大家好，我是一名前端学习者，今天开始学习HTML。我平时喜欢看书、敲代码，希望通过努力，学会前端开发，能独立做出自己的网页。</p>
    <p class="content" align="left">这是我的第二个段落，HTML很简单，只要多练习，就能快速上手。我会每天坚持学习，积累知识点，早日掌握前端核心技能。</p>
</body>

效果：两个段落自动换行，之间有明显间距，第一个段落居中，鼠标悬停显示提示文字，第二个段落左对齐，比直接写文字更规范、更美观。

（三）换行标签（br/）------ 强制换行

作用：在段落中强制换行（比如一句话中间换行、换行显示内容），单标签，不需要结束标签。

语法：<br />（注意结尾的/，建议加上，避免出错）

核心属性（极少用但需了解）：

clear：清除换行后的浮动影响（后续学CSS浮动再用），常用值：left/right/both，现阶段可忽略，只需要掌握标签本身的换行功能即可。

示例（无需额外属性，重点练换行功能）：

html 复制代码

<body>
    <p>大家好，我是前端学习者。<br />
    今天我学习了HTML的换行标签，<br />
    可以实现强制换行，让内容显示更整齐。</p>
</body>

注意：不要用多个<br />来实现"段落间距"（比如用3个<br />隔开两个段落），后续用CSS控制间距，养成规范写法；br标签的clear属性现阶段不用练，重点掌握换行功能。

（四）文本格式化标签------ 美化段落内文字，突出重点

作用：对段落中的部分文字进行格式化（加粗、斜体、下划线等），突出重点内容，均为成对标签，需嵌套在段落、标题等标签内使用，不单独使用。

常用文本格式化标签（必学，高频使用），语法及示例如下：

加粗标签（strong/b） ：使文字加粗，突出核心内容，推荐用strong（语义更强，浏览器更易识别）；

语法：<strong>加粗内容</strong> 或 <b>加粗内容</b>
斜体标签（em/i） ：使文字倾斜，用于强调、引用等场景，推荐用em（语义更强）；

语法：<em>斜体内容</em> 或 <i>斜体内容</i>
下划线标签（u） ：给文字添加下划线，用于标注重点、链接提示（不建议替代超链接标签a）；

语法：<u>下划线内容</u>
删除线标签（del/strike） ：给文字添加删除线，用于表示废弃、修改的内容，推荐用del；

语法：<del>删除线内容</del> 或 <strike>删除线内容</strike>
下标标签（sub） ：使文字变为下标，常用于数学公式、化学符号（如H₂O）；

语法：<sub>下标内容</sub>
上标标签（sup） ：使文字变为上标，常用于幂运算、注释标记（如2³、注释¹）；

语法：<sup>上标内容</sup>

核心说明：文本格式化标签是"行内元素"，不会独占一行，可嵌套使用（比如同时加粗+斜体），但不能嵌套块级元素（如div、p）。

示例（嵌套在段落标签内，包含所有常用格式化效果）：

html 复制代码

<body>
    <p>1. 加粗效果：<strong>HTML是前端入门必备技能</strong>（推荐用strong），<b>b标签也能实现加粗</b>；</p>
    <p>2. 斜体效果：<em>本教程适合零基础学习者</em>（推荐用em），<i>i标签也能实现斜体</i>；</p>
    <p>3. 下划线效果：<u>重点知识点请重点记忆</u>；</p>
    <p>4. 删除线效果：<del>旧知识点（已废弃）</del>，替换为新知识点；</p>
    <p>5. 下标和上标：水的化学式是H<sub>2</sub>O，2的3次方是2<sup>3</sup>=8；</p>
    <p>6. 嵌套使用：<strong><em>加粗+斜体，突出核心重点</em></strong>；</p>
</body>

注意：1. 文本格式化标签仅用于"突出重点"，不能滥用（比如全文都加粗，会失去重点）；2. strong和em不仅是样式标签，还带有语义（强调），利于搜索引擎识别，优先使用；3. 下标、上标标签常用于专业场景（公式、符号），日常文本慎用。

（五）超链接标签（a）------ 实现页面跳转

作用：点击文字/图片，跳转到其他网页（比如百度、自己写的其他HTML页面），成对标签，核心是"href属性"。

语法：<a href="跳转地址" target="打开方式">点击的内容</a>

核心属性（重中之重）：

href：必填属性，填写"跳转地址"（核心中的核心）；
值为外部网页地址：必须写完整（比如https://www.baidu.com），不能只写"www.baidu.com"（会跳转失败）；
值为本地HTML页面：写页面文件名（比如"first.html"），需确保两个页面在同一个文件夹；
值为页面内锚点：写"#+锚点id"（比如#bottom，对应页面中id="bottom"的标签）；
值为空（href=""）：点击不会跳转，常用于"暂未开发"的链接；
值为"#"（href="#"）：点击会跳转到当前页面顶部。

target：可选属性，控制跳转方式；

_self：默认值，在当前窗口打开跳转页面（会覆盖当前页面）；
_blank：在新窗口打开跳转页面（推荐，避免覆盖当前页面）；
_parent：在父窗口打开（后续学框架再了解）；
_top：在顶层窗口打开（后续学框架再了解）。

title：鼠标悬停在链接上时，显示的提示文字（比如<a href="https://www.baidu.com" title="跳转到百度首页">百度</a>）；

id/class：和前面标签的id、class用法一致，后续CSS美化链接样式用；

target="_blank"的补充说明：跳转外部网页建议都加这个属性，避免关掉自己写的页面。

示例（3种常用场景，包含所有必学属性）：

html 复制代码

<body>
    <!-- 1. 跳转到外部网页（百度），新窗口打开，添加提示文字 -->
    <a href="https://www.baidu.com" target="_blank" title="点击跳转到百度首页" id="baidu-link">点击跳转到百度</a>
    
    <!-- 2. 跳转到自己写的其他HTML页面（first.html），当前窗口打开 -->
    <a href="first.html" target="_self" title="跳转到我的第一个页面">跳转到我的第一个页面</a>
    
    <!-- 3. 跳转到页面内的指定位置（锚点跳转），当前窗口打开 -->
    <a href="#bottom" title="跳转到页面底部">跳转到页面底部</a>
    <p>这里是很多内容...（省略）</p>
    <p id="bottom">这是页面底部（和href里的#bottom对应）</p>
    
    <!-- 4. 空链接（暂不跳转） -->
    <a href="" title="暂未开发">我的作品（暂未开发）</a>
</body>

注意：1. href里的地址如果是外部网页，必须写完整（比如https://www.baidu.com），不能只写"www.baidu.com"（会跳转失败）；2. 如果是自己的页面，确保两个HTML文件在同一个文件夹，否则跳转失败；3. 锚点跳转时，href里的"#"不能少，且对应的标签必须有相同的id值。

（六）图片标签（img/）------ 插入图片

作用：在网页中插入图片（本地图片、网络图片），单标签，核心是"src属性"和"alt属性"。

语法：<img src="图片地址" alt="图片加载失败时显示的文字" width="图片宽度" height="图片高度" />

核心属性（重中之重）：

src：必填属性，填写图片地址（两种方式，核心中的核心）：
网络图片：复制图片的在线地址（比如百度图片右键"复制图片地址"）；注意：部分网络图片地址会失效，建议下载到本地后插入；
本地图片：图片和HTML文件放在同一个文件夹，直接写图片文件名（比如"img1.jpg"）；如果图片在文件夹里（比如新建"images"文件夹放图片），写"images/img1.jpg"；文件名不能有中文、空格。

alt：必填属性，图片加载失败时（比如地址错了、网络差、文件名错误），会显示这段文字；

作用1：方便排查错误（比如显示"风景图"，说明图片地址错了，可检查src）；
作用2：符合无障碍要求（屏幕阅读器会读取alt内容，帮助视障用户了解图片内容）；
示例：<img src="1.jpg" alt="风景图" />，如果1.jpg不存在，页面会显示"风景图"。

width：可选属性，控制图片的宽度，单位默认是"像素（px）"，可省略单位（比如width="300"和width="300px"效果一样）；

height：可选属性，控制图片的高度，单位和width一致；

重点提醒：width和height只写一个，另一个会自动按比例缩放（避免图片变形）；比如只写width="500"，高度会自动适配，不会拉伸或压缩图片。

title：可选属性，鼠标悬停在图片上时，显示的提示文字（比如<img src="1.jpg" alt="风景图" title="海边风景" />）；

border：可选属性，给图片添加边框，值为数字（表示边框宽度，单位px），比如border="1"表示1像素边框，border="0"表示无边框（默认无边框）；

align：可选属性，控制图片和周围文字的对齐方式（了解即可），常用值：left（文字在图片右侧）、right（文字在图片左侧）、middle（文字和图片居中对齐）。

示例（两种图片方式，包含所有必学属性）：

html 复制代码

<body>
    <!-- 1. 插入网络图片，设置宽度、提示文字、边框 -->
    <img src="https://t7.baidu.com/it/u=3456789012,123456789&fm=200&gp=0.jpg" alt="风景图" width="500" title="海边风景" border="1" />
    
    <!-- 2. 插入本地图片，设置高度、提示文字，不设宽度（自动适配） -->
    <img src="img2.jpg" alt="我的照片" height="300" title="我的个人照片" />
    
    <!-- 3. 图片和文字对齐示例 -->
    <img src="img2.jpg" alt="我的照片" width="100" align="left" />
    <p>这是我的个人照片，我平时喜欢看书、敲代码，希望通过努力，学会前端开发。</p>
</body>

注意：1. 本地图片的文件名不能有中文、空格（比如"我的照片.jpg"会加载失败）；2. 网络图片地址可能会失效，建议用稳定的图片地址，或下载到本地后插入；3. src和alt是必填属性，缺一不可，忘记写会导致图片加载异常或不符合规范；4. 不要同时设置width和height（除非明确知道图片比例），否则会导致图片变形。

（七）容器标签（div、span）------ 用于布局、包裹内容

作用：没有实际含义，专门用来"包裹内容""划分页面区域"，方便后续用CSS美化、布局（比如把标题和段落放在一个容器里，统一设置样式）。

核心区别（必记）：

div：块级元素，独占一行，适合划分大的区域（比如头部、主体、底部）；
span：行内元素，不独占一行，适合包裹段落中的部分文字（比如给某几个字设置颜色）。

语法：div是成对标签（<div>内容</div>），span也是成对标签（<span>内容</span>）

核心属性（后续CSS重点用）：

id：给容器设置唯一标识（后续锚点跳转、CSS单独美化这个容器用），值自定义（比如id="header"表示头部容器）；
class：给容器设置类名（后续CSS批量美化多个容器用），值自定义（比如class="container"，多个div都可以用这个类名）；
title：鼠标悬停在容器上时，显示的提示文字（用法和前面标签一致）；
div额外属性（了解即可）：align（容器内容的对齐方式，left/center/right），比如<div align="center">...</div>，容器内的内容会居中对齐；
span额外属性：基本不用额外属性，主要靠id/class配合CSS美化文字。

示例（包含属性用法）：

html 复制代码

<body>
    <!-- div：划分页面区域（头部），设置id和对齐方式 -->
    <div id="header" align="center" title="网页头部">
        <h1>我的个人博客</h1>
        <a href="https://www.baidu.com" target="_blank">首页</a>
        <a href="#">文章</a>
    </div>
    
    <!-- div：划分页面区域（主体），设置class -->
    <div class="content" id="main-content">
        <h2>今天的学习笔记</h2>
        <p>我今天学习了<span id="key-word" title="核心知识点">HTML容器标签</span>，div是块级元素，span是行内元素，它们都是用来包裹内容的。</p>
    </div>
    
    <!-- div：划分页面区域（底部），设置id -->
    <div id="footer" align="center">
        <p>版权所有 © 2026 我的个人博客</p>
    </div>
</body>

注意：1. div和span本身没有任何样式（默认是透明背景、无边框），后续学习CSS后，通过id/class给它们设置样式，才能实现布局和美化；2. id值唯一，class值可以重复，多个容器可以用同一个class；3. 重点掌握"用div划分区域、用span包裹文字"，属性用法记熟，后续学CSS会直接用到。

（八）列表标签（ul、ol、li、dl、dt、dd）------ 用于显示列表内容

作用：显示有序列表、无序列表、自定义列表（比如术语解释、分类说明），li、dt、dd均为"列表项"，需分别嵌套在对应容器标签内。

三种列表区别及用法：

无序列表（ul）：列表项前面是"圆点"（默认），没有顺序（比如爱好、商品列表）；

语法：<ul><li>列表项1</li><li>列表项2</li>...</ul>
有序列表（ol）：列表项前面是"数字"（默认），有顺序（比如步骤、排名）；

语法：<ol><li>步骤1</li><li>步骤2</li>...</ol>
自定义列表（dl、dt、dd）：用于"术语-解释"类场景（比如名词解释、分类说明），dl是容器，dt是术语/分类名，dd是对应解释，可一个dt对应多个dd；

语法：<dl><dt>术语/分类名</dt><dd>解释内容1</dd><dd>解释内容2</dd>...</dl>

核心属性：

1. ul（无序列表）的核心属性

type：设置列表项前面的"标记样式"（默认是圆点），常用值：
- disc：圆点（默认值，不用写也会显示）；
- circle：空心圆点；
- square：正方形；
- none：不显示任何标记（常用，后续用CSS替代）。
id/class：和前面标签用法一致，后续CSS美化列表用；
align：列表整体的对齐方式（left/center/right），默认左对齐。

2. ol（有序列表）的核心属性

type：设置列表项前面的"数字/字母样式"（默认是阿拉伯数字），常用值：
- 1：阿拉伯数字（1、2、3...，默认值）；
- a：小写字母（a、b、c...）；
- A：大写字母（A、B、C...）；
- i：小写罗马数字（i、ii、iii...）；
- I：大写罗马数字（I、II、III...）。
start：设置列表的起始值（比如start="3"，列表从3开始计数）；
id/class：和前面标签用法一致；
align：列表整体的对齐方式，默认左对齐。

3. dl（自定义列表）、dt（术语）、dd（解释）的核心属性

dl（自定义列表容器）：核心属性为id、class（后续CSS美化用），align（列表整体对齐方式，了解即可）；
dt（术语/分类名）：核心属性为id、class（单独美化术语用）、title（鼠标悬停提示）；
dd（解释内容）：核心属性为id、class（单独美化解释用）、title（鼠标悬停提示）；默认会自动缩进，与dt区分开。

4. li（列表项）的核心属性

id/class：给单个列表项设置标识或类名，后续单独美化某个列表项用；
title：鼠标悬停在列表项上时，显示的提示文字；
type：可以单独设置某个列表项的标记样式（覆盖ul/ol的type属性，了解即可）。

示例（包含所有必学属性，新增自定义列表示例）：

html 复制代码

<body>
    <h2>我的爱好（无序列表，空心圆点）</h2>
    <ul type="circle" id="hobby-list" align="center">
        <li title="我的爱好1">看书</li>
        <li id="key-hobby">敲代码</li>
        <li>听音乐</li>
        <li>运动</li>
    </ul>
    
    <h2>HTML学习步骤（有序列表，小写字母，从2开始）</h2>
    <ol type="a" start="2" class="step-list">
        <li title="步骤2">学习HTML基本结构</li>
        <li>学习常用标签</li>
        <li>练习写简单页面</li>
        <li>学习CSS美化页面</li>
    </ol>
    
    <h2>无标记无序列表</h2>
    <ul type="none">
        <li>无标记列表项1</li>
        <li>无标记列表项2</li>
    </ul>
    
    <h2>HTML常用标签解释（自定义列表）</h2>
    <dl id="tag-explain" class="explain-list">
        <dt id="tag-dt1" title="标题标签">h1~h6</dt>
        <dd id="tag-dd1">用于显示网页标题，区分层级，h1字体最大，h6最小</dd>
        
        <dt id="tag-dt2" title="段落标签">p</dt>
        <dd id="tag-dd2">用于显示网页正文段落，自动换行，段落间有默认间距</dd>
        
        <dt id="tag-dt3" title="图片标签">img</dt>
        <dd id="tag-dd3">用于在网页中插入图片，单标签，核心属性为src和alt</dd>
        <dd id="tag-dd4">可通过width和height属性控制图片大小，避免变形</dd>
    </dl>
</body>

注意：1. li标签必须嵌套在ul或ol里面，dt、dd必须嵌套在dl里面，均不能单独使用；2. ul、ol、dl都是块级元素，独占一行；3. ol的start属性值是数字，不管type是字母还是罗马数字，start都用数字设置（比如type="a" start="3"，列表从c开始）；4. 自定义列表中，一个dt可对应多个dd，dd默认缩进，无需额外设置；5. 列表的type属性后续会被CSS替代，可先学会用，能快速看到效果。

（九）表格标签（table、tr、th、td）------ 用于展示结构化数据

作用：在网页中展示结构化数据（比如成绩表、商品信息表、个人信息表），通过标签嵌套实现表格的行、列、表头，核心是"表格容器+行+单元格"的嵌套结构，均为成对标签。

核心标签及关系（必记）：

table：表格容器，所有表格相关标签（tr、th、td）都必须嵌套在table里面，是表格的最外层标签；
tr：表格行，代表表格的"一行"，必须嵌套在table里面，一个tr对应一行内容；
th：表头单元格，代表表格的"表头"（比如姓名、年龄、成绩），默认居中、加粗显示，嵌套在tr里面；
td：普通单元格，代表表格的"普通内容"，默认左对齐，嵌套在tr里面；
补充：一个tr里面可以嵌套多个th或td，th和td不能直接嵌套在table里面，必须放在tr内。

基础语法（最简表格，1行2列表头+2行数据）：

html 复制代码

<table>
    <tr><th>表头1</th><th>表头2</th></tr>  <!-- 表头行，2个表头单元格 -->
    <tr><td>数据1</td><td>数据2</td></tr>  <!-- 第一行数据，2个普通单元格 -->
    <tr><td>数据3</td><td>数据4</td></tr>  <!-- 第二行数据，2个普通单元格 -->
</table>

核心属性（重中之重）：

1. table（表格容器）的核心属性

border：必填属性（基础用法），设置表格边框宽度，值为数字（单位px），比如border="1"表示1像素边框，border="0"表示无边框（默认无边框，不写则看不到表格轮廓）；
width：设置表格整体宽度，单位默认px，可省略单位（比如width="600"表示表格宽600px），也可写百分比（比如width="80%"，表格宽度占父容器的80%）；
align：设置表格整体的对齐方式（left/center/right），默认左对齐，比如align="center"表示表格居中显示；
cellspacing：设置单元格之间的间距，值为数字（单位px），默认有间距，比如cellspacing="0"表示单元格之间无间距；
cellpadding：设置单元格内容和单元格边框之间的内边距，值为数字（单位px），比如cellpadding="5"表示内容和边框之间有5px空隙，让表格更美观；
id/class：后续CSS美化表格用，用法和前面标签一致。

2. tr（表格行）的核心属性

align：设置当前行所有单元格（th/td）内容的对齐方式（left/center/right），会覆盖th/td自身的align属性；
id/class：后续CSS单独美化某一行用；
bgcolor：设置当前行的背景颜色（了解即可，后续用CSS替代），比如bgcolor="lightblue"表示行背景为浅蓝色。

3. th（表头单元格）、td（普通单元格）的核心属性

align：设置单个单元格内容的对齐方式（left/center/right），th默认center，td默认left；
width：设置单个单元格的宽度，可单独控制某一列的宽度；
height：设置单个单元格的高度，可单独控制某一行的高度；
colspan：合并"列"，值为数字，表示当前单元格合并几列（比如colspan="2"表示合并当前列和右侧1列，共2列）；
rowspan：合并"行"，值为数字，表示当前单元格合并几行（比如rowspan="2"表示合并当前行和下方1行，共2行）；
id/class：后续CSS单独美化某个单元格用；
bgcolor：设置单个单元格的背景颜色（了解即可，后续用CSS替代）。

示例（包含所有必学属性，含合并单元格场景，贴合新手实操）：

html 复制代码

<body>
    <h2 align="center">学生成绩表（含合并单元格）</h2>
    <!-- 表格：边框1px，宽600px，居中，单元格无间距，内边距5px -->
    <table border="1" width="600" align="center" cellspacing="0" cellpadding="5" id="score-table" class="table-style">
        <!-- 第一行：表头，合并2列（班级），其余为普通表头 -->
        <tr align="center" bgcolor="lightgray">
            <th colspan="2">班级</th>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>总分</th>
        </tr>
        <!-- 第二行：数据，合并2行（一年级1班） -->
        <tr align="center">
            <td rowspan="2">一年级</td>
            <td rowspan="2">1班</td>
            <td>张三</td>
            <td>95</td>
            <td>98</td>
            <td>193</td>
        </tr>
        <!-- 第三行：数据，继承合并的班级单元格 -->
        <tr align="center">
            <td>李四</td>
            <td>92</td>
            <td>96</td>
            <td>188</td>
        </tr>
        <!-- 第四行：数据，单独一行（一年级2班），合并2列班级 -->
        <tr align="center" bgcolor="lightgray">
            <td colspan="2">一年级2班</td>
            <td>王五</td>
            <td>89</td>
            <td>93</td>
            <td>182</td>
        </tr>
        <!-- 第五行：数据，合并2列班级，合并2列成绩（缺考） -->
        <tr align="center">
            <td colspan="2">一年级2班</td>
            <td>赵六</td>
            <td colspan="2">缺考</td>
            <td>0</td>
        </tr>
    </table>
</body>

补充注意：1. 合并单元格后，被合并的单元格（比如rowspan="2"对应的下方单元格、colspan="2"对应的右侧单元格）无需再写，否则会导致表格错乱；2. 示例中包含行合并（rowspan）、列合并（colspan）的常见场景，贴合新手实操，可直接复制到HTML文件中运行查看效果；3. 表头行和部分数据行设置了背景色，方便区分层级，后续可通过CSS统一美化。

（十）表单标签（form、input、label、select、textarea）------ 实现用户交互

作用：用于收集用户输入的信息（比如登录、注册、留言、问卷），是网页交互的核心标签，核心容器为form，其他表单标签需嵌套在form内。

核心逻辑：用户在表单中输入内容，点击提交按钮后，表单数据会发送到指定服务器（后续学习后端会用到），现阶段重点掌握表单标签的用法和显示效果。

核心标签及用法（必学，高频使用）：

1. 表单容器标签（form）------ 所有表单元素的父容器

语法：所有表单元素

核心属性：

action：必填属性，填写"数据提交的服务器地址"（现阶段可写#，表示暂不提交，仅展示表单）；
method：可选属性，设置数据提交方式，常用值：get（默认，数据会显示在地址栏，适合简单数据）、post（数据不显示，适合敏感数据，如密码）；
id/class：后续CSS美化表单容器用，用法和前面标签一致；
title：鼠标悬停在表单区域时，显示的提示文字。

2. 输入框标签（input）------ 最常用的表单元素，单标签

语法：

核心属性（重中之重）：

type：必填属性，设置输入框类型（决定输入框的功能），常用类型如下：

text：单行文本输入框（默认，用于输入姓名、账号等普通文本）；
password：密码输入框（输入内容会隐藏为圆点/星号，用于输入密码）；
radio：单选按钮（多个单选按钮name值相同，只能选择一个，用于性别、单选选项）；
checkbox：复选框（多个复选框name值相同，可选择多个，用于兴趣、多选选项）；
submit：提交按钮（点击后提交表单数据，按钮上默认显示"提交"，可通过value修改）；
reset：重置按钮（点击后清空表单内所有输入内容，按钮上默认显示"重置"）；
button：普通按钮（无默认功能，需配合后续JS实现功能，按钮文字通过value修改）；
file：文件上传按钮（用于上传图片、文档等文件）。

name：必填属性，给输入框命名（服务器接收数据时识别用，同一组单选/复选框name值必须相同）；

value：可选属性，设置输入框的默认值（比如默认显示"请输入姓名"，或单选按钮默认选中状态）；

placeholder：可选属性，输入框内的提示文字（用户输入后会自动消失，比value更友好，比如placeholder="请输入手机号"）；

id：唯一标识，后续配合label标签关联使用，或CSS美化用；

required：可选属性，设置输入框为"必填项"（用户不输入则无法提交表单，无需写属性值，直接写required即可）；

disabled：可选属性，设置输入框为"禁用状态"（用户无法输入、无法点击，无需写属性值，直接写disabled即可）。

3. 标签关联标签（label）------ 关联输入框，提升体验

作用：点击label标签的文字，会自动聚焦到对应的输入框（比如点击"姓名"文字，光标自动定位到姓名输入框），提升用户体验，成对标签。

语法：有两种关联方式，推荐第一种（语义更清晰）：

方式1：<label for="输入框id">提示文字</label> + <input id="输入框id" ... />（for属性值必须和输入框id一致）；

方式2：<label>提示文字<input ... /></label>（直接嵌套输入框，无需for和id）。

4. 下拉菜单标签（select、option）------ 用于多选项选择，节省页面空间

语法：<select name="下拉菜单名称"><option value="选项值">选项文字</option>...</select>

核心属性：

select标签：name（必填，服务器识别用）、id（关联label用）、multiple（可选，设置为多选下拉菜单，无需写属性值）；
option标签：value（必填，服务器接收的选项值）、selected（可选，设置该选项为默认选中状态，无需写属性值）；
补充：option标签可嵌套在optgroup标签内，实现选项分组（比如省份分组、学科分组）。

5. 文本域标签（textarea）------ 多行文本输入框，用于输入大量文字

语法：<textarea name="文本域名称" rows="行数" cols="列数" placeholder="提示文字">默认文本</textarea>（成对标签）

核心属性：

name：必填属性，服务器识别用；
rows：可选属性，设置文本域的默认行数（高度）；
cols：可选属性，设置文本域的默认列数（宽度）；
placeholder：提示文字，用户输入后消失；
required：必填项，用户必须输入内容才能提交；
disabled：禁用状态，用户无法输入；
readonly：只读状态，用户可以查看，但无法修改内容。

示例（包含所有常用表单元素，贴合新手实操，可直接复制运行）：

html 复制代码

<body>
    <h2 align="center">用户注册表单</h2>
    <!-- 表单容器，暂不提交数据（action="#"），提交方式为post -->
    <form action="#" method="post" id="register-form" align="center">
        <!-- 单行文本输入框 + label关联 -->
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username" placeholder="请输入3-10位用户名" required />
        <br /><br />

        <!-- 密码输入框 -->
        <label for="password">密码：</label>
        <input type="password" id="password" name="password" placeholder="请输入6-12位密码" required />
        <br /><br />

        <!-- 单选按钮（性别） -->
        <label>性别：</label>
        <label for="male"><input type="radio" id="male" name="gender" value="male" checked /> 男</label>
        <label for="female"><input type="radio" id="female" name="gender" value="female" /> 女</label>
        <br /><br />

        <!-- 复选框（兴趣） -->
        <label>兴趣：</label>
        <label for="hobby1"><input type="checkbox" id="hobby1" name="hobby" value="code" /> 敲代码</label>
        <label for="hobby2"><input type="checkbox" id="hobby2" name="hobby" value="book" /> 看书</label>
        <label for="hobby3"><input type="checkbox" id="hobby3" name="hobby" value="sport" /> 运动</label>
        <br /><br />

        <!-- 下拉菜单（学历） -->
        <label for="education">学历：</label>
        <select id="education" name="education">
            <option value="" selected>请选择学历</option>
            <option value="high">高中</option>
            <option value="college">大专</option>
            <option value="undergraduate">本科</option>
            <option value="graduate">研究生</option>
        </select>
        <br /><br />

        <!-- 文本域（个人简介） -->
        <label for="intro">个人简介：</label><br />
        <textarea id="intro" name="intro" rows="5" cols="50" placeholder="请简要介绍自己（可选）"></textarea>
        <br /><br />

        <!-- 文件上传 -->
        <label for="avatar">上传头像：</label>
        <input type="file" id="avatar" name="avatar" />
        <br /><br />

        <!-- 提交按钮和重置按钮 -->
        <input type="submit" value="注册" />
        <input type="reset" value="重置" />
        <!-- 普通按钮（暂无功能） -->
        <input type="button" value="取消" />
    </form>
</body>

注意：1. 所有表单元素（input、select、textarea）必须嵌套在form标签内，否则无法提交数据；2. 单选按钮、复选框的name值必须相同，才能实现"单选""多选"功能；3. required属性会强制用户输入，提交时若未输入，浏览器会提示"请填写此字段"；4. 文本域的rows和cols仅控制默认大小，用户可手动拉伸，后续可通过CSS固定大小；5. 文件上传标签（type="file"）仅负责选择文件，实际上传功能需配合后端实现，现阶段仅需掌握标签用法。

（十一）HTML注释标签------ 标注代码，不显示在页面上

作用：给代码添加注释（比如标注标签作用、代码功能），方便自己后续查看或他人协作，浏览器会忽略注释内容，不会在页面上显示。

语法：（双破折号包裹，注意前后没有空格，注释内容可换行）

核心说明：

注释不能嵌套（比如 --> 会报错）；
注释可以写在任何位置（标签内、标签外、代码中间），但不能破坏标签的语法结构；
建议养成写注释的习惯，尤其是复杂代码（比如合并单元格的表格、嵌套标签），后续修改更高效。

示例（结合前面的表格代码，添加注释）：

html 复制代码

<body>
    <h2 align="center">学生成绩表（含合并单元格）</h2>
    <!-- 表格核心配置：边框1px、宽600px、居中、无单元格间距、内边距5px -->
    <table border="1" width="600" align="center" cellspacing="0" cellpadding="5" id="score-table" class="table-style">
        <!-- 表头行：灰色背景，班级列合并2列 -->
        <tr align="center" bgcolor="lightgray">
            <th colspan="2">班级</th>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>总分</th>
        </tr>
        <!-- 数据行1：一年级1班，合并2行班级单元格 -->
        <tr align="center">
            <td rowspan="2">一年级</td>
            <td rowspan="2">1班</td>
            <td>张三</td>
            <td>95</td>
            <td>98</td>
            <td>193</td>
        </tr>
        <!-- 数据行2：继承一年级1班的合并单元格，无需重复写班级 -->
        <tr align="center">
            <td>李四</td>
            <td>92</td>
            <td>96</td>
            <td>188</td>
        </tr>
        <!-- 数据行3：一年级2班，灰色背景，合并2列班级 -->
        <tr align="center" bgcolor="lightgray">
            <td colspan="2">一年级2班</td>
            <td>王五</td>
            <td>89</td>
            <td>93</td>
            <td>182</td>
        </tr>
        <!-- 数据行4：一年级2班，赵六缺考，合并2列成绩单元格 -->
        <tr align="center">
            <td colspan="2">一年级2班</td>
            <td>赵六</td>
            <td colspan="2">缺考</td>
            <td>0</td>
        </tr>
    </table>
</body>

四、新手实操注意事项（必看）

所有标签的属性值必须用双引号包裹（行业规范），单引号也可生效，但不推荐；
单标签（img、br等）建议加上结尾的/（<img />、<br />），避免浏览器解析异常；
标签嵌套遵循"父子嵌套"，不交叉嵌套（比如不能写<div><p>内容</div></p>）；
本地图片、本地HTML文件的文件名，不能有中文、空格，否则会加载失败；
外部网页链接（比如百度），必须写完整地址（https://www.baidu.com），缺一不可；
练习时建议"边写边运行"：新建文本文档，将代码复制进去，后缀名改为.html，双击即可用浏览器打开查看效果；
遇到代码报错，优先检查3点：标签是否闭合、属性名/属性值是否写错、文件/图片路径是否正确。

五、新手入门实操案例（综合运用所有标签）

以下案例整合了前面所有常用标签，可直接复制运行，快速熟悉标签用法，贴合新手入门场景：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的第一个HTML页面（新手实操）</title>
</head>
<body>
    <!-- 头部区域：标题+导航链接 -->
    <div id="header" align="center">
        <h1 id="main-title">我的个人主页</h1>
        <a href="https://www.baidu.com" target="_blank" title="跳转到百度">百度</a>
        <a href="#intro" title="查看个人介绍">个人介绍</a>
        <a href="#hobby" title="查看我的爱好">我的爱好</a>
        <a href="#score" title="查看我的成绩">我的成绩</a>
    </div>

    <hr /> <!-- 水平分隔线，分隔不同区域 -->

    <!-- 个人介绍区域 -->
    <div id="intro" class="content">
        <h2 align="center">个人介绍</h2>
        <img src="https://t7.baidu.com/it/u=3456789012,123456789&fm=200&gp=0.jpg" alt="我的照片" width="300" align="left" style="margin-right: 20px;" />
        <p title="个人简介">大家好，我是一名<strong>前端零基础学习者</strong>，目前正在系统学习HTML。我每天坚持练习1小时，希望通过努力，能够独立写出属于自己的网页。<br />
        我性格开朗，喜欢<em>敲代码、看书、运动</em>，欢迎大家和我一起交流学习，共同进步！</p>
    </div>

    <hr />

    <!-- 我的爱好区域（无序列表） -->
    <div id="hobby" class="content">
        <h2 align="center">我的爱好</h2>
        <ul type="circle" align="center">
            <li>敲代码（HTML、后续学习CSS/JS）</li>
            <li>看书（前端相关书籍、小说）</li>
            <li>运动（跑步、跳绳）</li>
            <li>听音乐（缓解学习压力）</li>
        </ul>
    </div>

    <hr />

    <!-- 我的成绩区域（表格） -->
    <div id="score" class="content">
        <h2 align="center">我的学习成绩表</h2>
        <table border="1" width="500" align="center" cellspacing="0" cellpadding="5">
            <tr align="center" bgcolor="lightgray">
                <th>科目</th>
                <th>成绩</th>
                <th>等级</th>
            </tr>
            <tr align="center">
                <td>HTML</td>
                <td>95</td>
                <td>优秀</td>
            </tr>
            <tr align="center">
                <td>计算机基础</td>
                <td>90</td>
                <td>良好</td>
            </tr>
            <tr align="center">
                <td>英语</td>
                <td>85</td>
                <td>良好</td>
            </tr>
        </table>
    </div>

    <hr />

    <!-- 底部区域 -->
    <div id="footer" align="center">
        <p>© 2026 我的个人主页 | 前端零基础学习中</p>
        <a href="#header" title="返回顶部">返回顶部</a>
    </div>
</body>
</html>

实操提示：1. 案例中包含了标签嵌套、超链接锚点跳转、图片插入、表格、列表、容器标签等所有核心知识点；2. 可将代码复制到文本文档，保存为.html文件（比如"my-first-page.html"），双击打开即可查看效果；3. 尝试修改代码（比如修改图片地址、调整表格数据、新增列表项），观察页面变化，加深理解。

核心总结：HTML入门的关键是"记住标签用法+多实操"，所有标签都围绕"告诉浏览器如何显示内容"展开，无需复杂逻辑，只要熟练掌握常用标签和属性，多写多练，就能快速上手。后续学习CSS后，可进一步美化页面，让网页更美观、更具个性化。