完整教程：HTML 核心基础与常用标签全解析

1.1 HTML 基础

1.1.1 什么是 HTML

HTML (Hyper Text Markup Language), 超文本标记语言.

超文本：比文本要强大，通过链接和交互方式来组织和呈现信息的文本形式，不仅仅有文本，还可能包含图片，音频，或者自己已经审阅过它的学者所加的评注、补充或脚注等等.

标记语言：由标签构成的语言HTML 的标签都是提前定义好的，使用不同的标签，表示不同的内容.类似飞书文档，Word 文档

我是⼀级标题
我是⼆级标题
我是三级标题

经过浏览器解析后的效果如下

1.1.2 认识 HTML

标签HTML 代码是由 “标签” 构成的。

形如:

 我是三级标题

标签名 (body) 放到 <> 中
大部分标签成对出现.<h1> 为开始标签，</h2> 为结束标签.
少数标签只有开始标签，称为 "单标签".
开始标签和结束标签之间，写的是标签的内容.
开始标签中可能会带有 "属性".id 属性相当于是给这个标签设置了一个唯一的标识符 (身份证号码).1 <h3 id="myId">我是三级标题</h3>

1.1.3 HTML 文件基本结构


 
 第一个页面
 
  hello world

html 标签是整个 html 文件的根标签 (最顶层标签)
head 标签中写页面的属性.
body 标签中写的是页面上显示的内容
title 标签中写的是页面的标题.

1.1.4 标签层次结构

父子关系
兄弟关系

 
   
       第一个页面
   
   
       hello world

其中:

head 和 body 是 html 的子标签 (html 就是 head 和 body 的父标签)
title 是 head 的子标签. head 是 title 的父标签.
head 和 body 之间是兄弟关系.

可以使用 chrome 的开发者工具查看页面的结构.

标签之间的结构关系,构成了⼀个DOM树

DOM 是DocumentObjectMode(文档对象模型)的缩写.

1.2 HTML 快速入门

1.2.1 开发工具

HTML 可以使用系统自带的记事本來编写，但是非常不方便，我们课程中使用前端专业的开发工具:Visual Studio Code

Visual Studio Code（简称 “VS Code”）是 Microsoft 在 2015 年 4 月 30 日 Build 开发者大会上宣布的一款跨平台源代码编辑器，可以运行在 Windows,macOS 和 Linux 上。它具有对 JavaScript, TypeScript 和 Node.js 的内置支持，并具有丰富的其他语言 (例如 C++, C#, Java, Python, PHP, Go).

官网: https://code.visualstudio.com进行下载，安装即可.

1.2.2 快速开发

在 VS Code 中创建文件 xxx.html, 直接输入 !, 按 Enter 或 tab 键，此时能自动生成代码的主体框架.

 
 
 
   
   
   Document

细节解释：(了解即可，不必深究)

<!DOCTYPE html> 称为 DTD (文档类型定义), 描述当前的文件是一个 HTML5 的文件.
<html lang="en"> 其中 lang 属性表示当前页面是一个 "英语页面", 这里暂时不用管.(有些浏览器会根据此处的声明提示是否进行自动翻译).
<meta charset="UTF-8"> 描述页面的字符编码方式。没有这一行可能会导致中文乱码.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- name="viewport" 其中 viewport 指的是设备的屏幕上能用来显示我们的网页的那一块区域.
- content="width=device-width, initial-scale=1.0" 在设置可视区和设备宽度等宽，并设置初始缩放为不缩放.(这个属性对于移动端开发更重要一些).

在<body></body>标签中，任意书写文字，按 Ctrl+s 保存文件，通过浏览器访问即可。如:

 
 
 
   
   
   Document
 
 
 第一个Document

浏览器运行结果如下:[浏览器界面截图：

1.3 HTML 常见标签

1.3.1 标题标签 h1-h6

有六个，从 h1-h6. 数字越大，则字体越小.

 hello
 hello
 hello
 hello
 hello
 hello

1.3.2 段落标签: p

在 HTML 中，段落，换行符，空格都会失效，如果需要分成段落，需要使用专门的标签

p 标签表示一个段落.

 这是一个段落

 这是一个段落
 这是一个段落

注意:

p 标签描述的段落，前面没有缩进.(未来 CSS 会学)
自动根据浏览器宽度来决定排版.
html 内容首尾处的换行，空格均无效.
在 html 中文字之间输入的多个空格只相当于一个空格.

1.3.3 换行标签:br

想要完成换行的话，也可以通过<br/>标签来实现.br 是 break 的缩写，表示换行.

br 是一个单标签 (不需要结束标签)
br 标签不像 p 标签那样带有一个很大的空隙.
<br/> 是规范写法，不建议写成 <br>

 这是一个br标签

 这是一个br标签

 这是一个br标签

展示结果:

1.3.4 图片标签:img

img 标签必须带有 src 属性，表示图片的路径。

此时要把 rose.jpg 这个图片文件放到和 html 中的同级目录中。

img 标签的其他属性

width/height: 控制宽度高度。高度和宽度一般改一个就行，另外一个会等比例缩放。否则就会图片失衡.
border: 边框，参数是宽度的像素。但是一般使用 CSS 来设定.

注意:

属性可以有多个，不能写到标签之前
属性之间用空格分割，可以是多个空格，也可以是换行.
属性之间不分先后顺序
属性使用 "键值对" 的格式来表示.

关于目录结构:对于一个复杂的网站，页面资源很多，这种情况可以使用目录把这些文件整理好.

相对路径：以 html 所在位置为基准，找到图片的位置.
- 同级路径：直接写文件名即可 (或者，/)
- 下一级路径:image/1.jpg
- 上一级路径:../image/1.jpg
绝对路径：一个完整的磁盘路径，或者网络路径。例如
- 磁盘路径 D:/rose.jpg（最好使用 /, 不要使用 \）
- 网络路径https://img2.baidu.com/it/u=3359649605,3626874592&fm=253&fmt=auto&app=138&f=JPEG?w=500h&h=752

1.3.5 超链接: a

超链接标签（<a>）的核心属性：

href：必填属性，指定点击后跳转的目标页面地址。
target：控制打开方式，默认值_self（当前标签页打开），设为_blank则在新标签页打开。

链接的常见形式

外部链接引用其他网站的地址，需填写完整网络路径：
```
百度
```
内部链接用于网站内部页面跳转，使用相对路径（需确保文件在同一目录）：
- 示例：在同一目录下创建1.html和2.html，实现互相跳转：
```
我是 1.html
点我跳转到 2.html

我是 2.html
点我跳转到 1.html
```
空链接使用#作为href的占位符（点击后不跳转，仅表示链接样式）：
```
空链接
```

超链接是 HTML 中实现页面跳转的核心标签，常用于导航栏、内容关联跳转等场景，通过不同的href形式可适配外部、内部及临时占位的需求。

1.4 表格标签

HTML 表格由多个标签协作构成，核心结构为：table（整个表格）包含tr（行），tr包含td（单元格）；还可通过thead（表头区域）、tbody（主体区域）划分表格模块。

表格标签的属性（需写在`table`标签中）

表格可通过属性设置样式（实际开发中更常用 CSS），常用属性包括：

属性名	作用描述
`align`	表格相对于周围元素的对齐方式（如`align="center"`表示居中，不控制内部元素对齐）
`border`	表格边框宽度，`1`表示有边框（数值越大边框越粗），空值表示无边框
`cellpadding`	单元格内容与边框的距离，默认 1 像素
`cellspacing`	单元格之间的间距，默认 2 像素
`width/height`	表格的宽度 / 高度

示例代码

原来表格：


  
  
    
      aaa
      bbb
      111
    
    
      ccc
      ddd
      ddd
    
    
      eee
      ffff
      ffff

合并单元格：

1.5 表单相关标签

1.5.1 form 标签

form标签用于定义表单区域，负责指定数据的提交方式与目标页面，语法如下：


  ... [form的内容]

其核心作用是包裹表单控件，后续需结合后端代码实现数据提交逻辑。

属性	作用说明
`action`	指定表单数据提交的目标地址（可以是本地 HTML 文件、后端接口地址等），这里是提交到同目录下的`demo1.html`
`method`	指定表单的提交方式，可选值为`get`（默认）或`post`，这里使用`get`方式

`get`与`post`提交方式的区别

提交方式	数据传递位置	数据大小限制	安全性	适用场景
`get`	拼接到 URL 地址后	一般限制 2KB	低（数据可见）	简单查询、非敏感数据提交
`post`	放在 HTTP 请求体中	无明确限制	高（数据隐藏）	登录、注册、敏感数据提交


  姓名：

  密码：

  性别：
  
  男
  
  女 

  兴趣：
  
  排球
   篮球
   乒乓球
   羽毛球

1.gender是 on,是因为没有写名字，他只知道值，但是不知道这个值对应的属性是什么
2.性别这里他知道名字，因为他们男女的input一样，但是不知道对应的值是多少所以是on，解决办法是再后面写一个value


  
  
    姓名：

    密码：

    性别：
    
    男
    
    女 

    兴趣：
    
    排球
     篮球
     乒乓球
     羽毛球

优化正常命名：

demo1.html?username=张三&pwd=123456&gender=male&hobby=volleyball&hobby=basketball

1.5.2 input 标签

input是表单的核心控件标签，可实现单行文本、按钮、单选框等多种交互组件，关键属性包括：

type（必填）：决定控件类型，常见取值有button、checkbox、text、file、password、radio等；
name：为控件命名，单选框需同名才能实现 “多选一”；
value：控件的默认值；
checked：用于单选 / 复选框，设置默认选中状态。

常用 input 类型示例

1.文本框用于输入单行文本：


姓名: 

密码: 

性别:  男
       女

性别单选框通过统一的name="gender"实现互斥选择；
使用<label>标签并通过for属性关联单选框的id，点击 “男 / 女” 文字即可选中对应单选框，提升了操作便捷性。

类型	核心特点	关键属性要求	适用场景
单选框（radio）	同一组内只能选一个	必须设置相同的 name 属性	二选一 / 多选一的选项（如性别）
复选框（checkbox）	同一组内可多选	建议设置相同的 name 属性	多选项（如兴趣、爱好）



性别：

男

女 


兴趣：

排球

篮球

乒乓球

羽毛球

2.button



  姓名：

  密码：

  性别：
  
  男
  
  女 

  兴趣：
  
  排球
   篮球
   乒乓球
   羽毛球

这个复选框的特点是：通过checked属性默认选中了 “羽毛球” 选项，name="chec"用于后端接收多选结果，value="4"是提交的对应数据。

 羽毛球

文本框

密码框

单选框

性别：
男
女

注意：单选框之间必须具备相同的name属性，才能实现 “多选一” 效果。

复选框

爱好：
吃饭 睡觉 打游戏

普通按钮

当前点击了没有反应，需要搭配 JS 使用 (后面会重点研究)。

提交按钮

提交按钮必须放到form标签内。点击后就会尝试给服务器发送请求

1.5.3 select 标签（下拉菜单）

select用于创建下拉选择菜单，option定义菜单项，通过selected="selected"设置默认选中项：

学历：

1.5.4 textarea 标签（文本域）

textarea用于多行文本输入，rows（行数）、cols（列数）为基础尺寸属性（实际开发常用 CSS 调整样式），标签内的内容为默认文本（空格会影响显示）：

1.6 无语义标签：div & span

这两个标签本身无实际语义，仅作为 “容器” 用于网页布局：

div：division 的缩写，意为 “分割”，是块级元素（独占一行），常用于大区域布局；
span：意为 “跨度”，是行内元素（不独占一行），常用于小范围内容包裹。

示例：


  咬人猫
  咬人猫
  咬人猫


  兔总裁
  兔总裁
  兔总裁


  阿叶君
  阿叶君
  阿叶君

1.7 序列

序列是编程和标记语言中用于组织一组相关元素的结构，常见的有有序序列和无序序列，在 HTML 中最具代表性的是有序列表（<ol>）和无序列表（<ul>），以下是详细说明：

1.7.1 有序序列（有序列表）

有序序列指的是元素的排列存在明确的顺序（如数字、字母、罗马数字等），顺序的改变会影响语义。在 HTML 中，使用<ol>（Ordered List）标签定义有序列表，列表项由<li>（List Item）标签包裹。

核心特性

列表项默认以阿拉伯数字（1、2、3…）进行编号
可通过type属性修改编号类型，支持数字（1）、大写字母（A）、小写字母（a）、大写罗马数字（I）、小写罗马数字（i）
可通过start属性指定编号的起始值（仅支持数字，会自动对应到所选类型）

代码示例



    第一步：打开编辑器
    第二步：编写代码
    第三步：运行测试



    章节C
    章节D
    章节E



    第一个要点
    第二个要点

1.7.2 无序序列（无序列表）

无序序列指的是元素的排列没有固定顺序，仅表示元素属于同一组，顺序改变不影响语义。在 HTML 中，使用<ul>（Unordered List）标签定义无序列表，列表项同样由<li>标签包裹。

核心特性

列表项默认以实心圆点（●）作为项目符号
可通过type属性修改符号类型，支持实心圆点（disc，默认）、空心圆圈（circle）、实心方块（square）
现代开发中，更多使用 CSS 替代type属性来定制符号样式（如取消符号、使用图标等）

代码示例



    苹果
    香蕉
    橙子



    篮球
    足球
    排球



    红色
    绿色
    蓝色



    首页
    关于我们
    联系我们

拓展：嵌套序列

有序序列和无序序列可以互相嵌套，形成层级结构，例如：

1.7.3 自定义列表

自定义列表是 HTML 中第三种重要的序列（列表）类型，它并非简单的有序 / 无序项排列，而是用于展示术语 - 解释、标题 - 内容这类关联型的结构，由<dl>（Definition List）、<dt>（Definition Term，定义术语 / 标题）和<dd>（Definition Description，定义描述 / 内容）三个标签配合实现。

核心特性

<dl>是自定义列表的容器，包裹所有<dt>和<dd>标签；
一个<dl>中可以包含多个<dt>，每个<dt>可以对应一个或多个<dd>；
默认样式下，<dd>会有缩进效果（通常是 40px 左右的左边距），可通过 CSS 修改；
常用于展示商品属性、文档说明、网站底部导航等场景。

代码示例

基础用法（单术语单描述）


    HTML
    超文本标记语言，用于构建网页的结构。
    CSS
    层叠样式表，用于美化网页的样式。

进阶用法



    JavaScript
    一种脚本语言，用于实现网页的交互效果。
    可在浏览器端运行，也可通过Node.js在服务器端运行。



    前端三大核心技术
    
        
            HTML
            负责页面结构
            CSS
            负责页面样式
            JS
            负责页面交互
        
    
    前端框架
    React
    Vue
    Angular

1.7 综合练习：用户注册

用于实现用户注册界面（具体内容未完全展示）。

这些标签的核心作用：select和textarea补充了表单的交互类型，div和span则是网页布局的基础容器，是前端页面结构搭建的常用工具。

用户注册页面实现说明

该页面通过表格布局+表单控件搭建，核心实现逻辑如下：

实现思路

布局方式：用<table>做整体结构排版，通过<tr>（行）+<td>（单元格）排列表单项；
交互控件：用<input type="text">实现输入框，通过placeholder设置提示文字；
辅助元素：用<div>包裹按钮与链接，<a>实现 “登录” 跳转。

代码示例

用户注册

  
    用户名
    
  
  
    手机号
    
  
  
    密码
    
  


  
  已有账号？登录

功能说明

表格负责页面的整齐排版，让标签与输入框对应对齐；
placeholder用于提示用户输入内容（如 “请输入用户名”）；
“注册” 按钮为普通按钮（需搭配 JS 实现提交逻辑），“登录” 是空链接（需补充实际跳转地址）。

posted @ 2026-01-10 14:25 gccbuaa 阅读(8) 评论(0) 收藏举报

刷新页面返回顶部

gccbuaa

完整教程：HTML 核心基础与常用标签全解析

1.1 HTML 基础

1.1.1 什么是 HTML

我是⼀级标题

我是⼆级标题

我是三级标题

1.1.2 认识 HTML

我是三级标题

1.1.3 HTML 文件基本结构

1.1.4 标签层次结构

1.2 HTML 快速入门

1.2.1 开发工具

1.2.2 快速开发

1.3 HTML 常见标签

1.3.1 标题标签 h1-h6

hello

hello

hello

hello

hello

hello

1.3.2 段落标签: p

1.3.3 换行标签:br

1.3.4 图片标签:img

1.3.5 超链接: a

链接的常见形式

1.4 表格标签

表格标签的属性（需写在table标签中）

示例代码

1.5 表单相关标签

1.5.1 form 标签

get与post提交方式的区别

1.5.2 input 标签

常用 input 类型示例

文本框

密码框

单选框

复选框

普通按钮

提交按钮

1.5.3 select 标签（下拉菜单）

1.5.4 textarea 标签（文本域）

1.6 无语义标签：div & span

1.7 序列

1.7.1 有序序列（有序列表）

核心特性

代码示例

1.7.2 无序序列（无序列表）

核心特性

代码示例

拓展：嵌套序列

1.7.3 自定义列表

核心特性

代码示例

基础用法（单术语单描述）

进阶用法

1.7 综合练习：用户注册

用户注册页面实现说明

实现思路

代码示例

用户注册

功能说明

表格标签的属性（需写在`table`标签中）

`get`与`post`提交方式的区别