系统介绍了 HTML 基础语法与常用标签，涵盖文档结构、文本排版、图像路径、超链接、列表、表格及表单元素。通过代码示例讲解了标签嵌套、属性设置及语义化用法，并提供了综合实践案例，帮助读者从零构建纯 HTML 页面结构，适合前端初学者入门学习。
HTML 指的是 超文本标记语言 : HyperText Markup Language
<!DOCTYPE html>
<html lang="en">
Document
<!DOCTYPE html>:
<html lang="en">:
lang="en" :表示网页语言是英语，如果想设置成中文可以写成 lang="zh-CN"<head>:
title 之间放网页标题<meta charset="UTF-8">:作用使用 UTF-8(国际通用编码) 防止中文乱码<meta name="viewport" content="width=device-width, initial-scale=1.0">:
<body>:元素包含了可见的页面内容 (简单来说就是用户可以直接看到的),比如图片、文字
</html>:关闭根标签，网页结束
/,如<body></body>双标签:成对出现，如<p></p>,段落标签
单标签:单独出现，如<br>,换行标签
快速生成骨架的方法(vscode):
在 HTML 文件中，先按下!(英文),然后配合enter/Tab键
向前缩进:Tab
向后缩进:Shift+Tab
父子关系(嵌套关系):子级标签换行且缩进(Tab 键)
<html>
<body></body>
</html>
兄弟关系(并列关系):兄弟标签要换行要对齐——同级别关系
<head></head>
<body></body>
注释:<!-- 这里是注释！ -->
为了方便与自己后续理解代码的含义和与方便别人理解，所以根据需求写适当的注释可以提高程序的可读性
vscode 中快速添加注释的方法:
添加/删除注释的快捷键:ctrl+/
调试
当代码出现问题，不易看出时，可以使用调试功能
在自己使用的浏览器中 鼠标右键->检查即可查看代码，或者按快捷键F12或者按Fn + F12(笔记本电脑）
标题标签特点:<h+num></h+num>
注意:h1 标签在一个网页中只能用一次，其他的标题标签可以多次使用
实践样例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>HawkPP 进阶之路</h1>
<h2>html 入门</h2>
<h3>html 进阶</h3>
<h4>css 入门</h4>
<h5>css 进阶</h5>
<h6>前端工程师 HawkPP</h6>
</body>
</html>
显示效果:
段落标签特点<p>这里是段落内容</p>
实践样例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>HawkPP is pretty much a noob.</p>
</body>
</html>
样例显示:
<br>:换行标签
<hr>:水平线标签
实践样例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>HawkPP is pretty much a noob.</p>
<p>But, hawkPP want to be a full stack Web developer!</p>
<hr>
<br>
<hr>
<p>HawkPP is pretty much a noob.</p>
<p><hr>But, hawkPP want to be a full stack Web developer!</p>
<hr>
</body>
</html>
样例显示:
| 标签 | 作用 | 示例 |
|---|---|---|
<b> | 定义粗体文本 (无语义) | <b>粗体</b> |
<strong> | 定义重要文本 (语义强调) | <strong>重要 (加粗)</strong> |
<i> | 定义斜体文本 (无语义) | <i>斜体</i> |
<em> | 定义强调文本 (语义强调) | <em>强调 (斜体)</em> |
<mark> | 定义高亮/标记文本 | <mark>高亮</mark> |
<small> | 定义小号字体文本 | <small>小号</small> |
<del> | 定义删除文本 (带删除线) | <del>删除</del> |
<ins> | 定义插入文本 (带下划线) | <ins>插入</ins> |
<sub> | 定义下标文本 | H<sub>2</sub>O |
<sup> | 定义上标文本 | X<sup>2</sup> |
<u> | 定义下划线文本 | <u>下划线</u> |
<s> | 定义不准确的文本 (带删除线) | <s>原价</s> |
提示:
<strong>和<em>具有语义化，利于 SEO(Search Engine Optimization(搜索引擎优化) 的缩写) 和屏幕阅读器<b>和<i>仅表示样式，无额外语义<s>和<del>的区别::内容"不再准确",:内容"已被删除
实践样例:
按表格顺序展示各标签的显示效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p><b>HawkPP</b> is pretty much <strong>a noob</strong>,<i>but</i> he want to be a <em>full stack developer</em>!!</p>
<p><mark>HawkPP</mark> is <small>not</small> a professional yet, <del>but</del> he is <ins>working hard</ins> to become one!!!</p>
<p>HawkPP want to drink H<sub>2</sub>O</p>
<p>HawkPP's growth rate is 10<sup>-n</sup></p>
<p><u>HawkPP</u></p>
<p><s>HawkPP want to study!!</s></p>
</body>
</html>
样例显示:
<div>:块级(block-level)元素，用于创建页面结构和布局，独占一行，会以块的形式占据可用空间
<span>:内联元素 (inline),用于对文本或行内元素进行样式化或包裹，不换行，只占据其内容的宽度
实践样例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>HawkPP</div>
<div>HawkPP want to study!!</div>
<span>HawkPP want to study!!</span>
<span>HawkPP</span>
</body>
</html>
样例显示
| 类型 | 写法特点 | 优点 | 缺点 | 常用场景 |
|---|---|---|---|---|
| 绝对路径 | 从根 / 完整网址开始 | 定位准确 | 换目录就失效 | 外部资源、静态 CDN |
| 相对路径 | 以当前文件为起点 | 灵活、可移植 | 依赖当前位置 | 项目内部图片、页面 |
相对路径查找方式: 从当前项目文件位置出发查找目标文件 使用文件和项目在同一个文件夹 (同级文件夹)→
./使用文件和项目在其他文件夹 (子文件夹文件)→文件夹名/使用文件在项目在上一级文件夹 (父文件夹)→../
实践样例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 相对路径样例 -->
<!-- 文件在其他文件夹 -->
<img src = "img/1.jpg">
<!-- 文件在当前文件夹 -->
<img src = "./壁纸.jpeg">
<!-- 文件在上一文件夹 -->
<img src = "../壁纸 3.jpg"width="500px">
<!-- 绝对路径样例 -->
<img src = "C:\Users\33518\Desktop\壁纸 2.jpg">
</body>
</html>
样例显示:
图片标签结构:<img src="url" alt="some_text" title = "text">
src = "url":src 指'source'，源属性的值是图像的 URL 地址，是必须属性。alt ="":替代文本 (图片加载失败时显示)widthheight:width(宽度) 与 height(高度) 属性用于设置图像的宽度与高度title:提示文本，鼠标悬停时显示 title 引号里面的文字实践样例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src = "img/1.jpg" alt = "photo1"height = "400" title = "photo1">
<img src = "./壁纸.jpeg" alt = "photo2">
<img src = "../壁纸 3.jpg" alt="photo3"width = "500">
</body>
</html>
样例显示:
超链接结构:<a href="URL">链接文本</a>
<a> 标签：定义了一个超链接(anchor)。它是 HTML 中用来创建可点击链接的主要标签。href 属性：指定目标 URL，当点击链接时，浏览器将导航到此 URLtarget属性:
_blank:在新窗口或新标签页中打开链接_self:在当前窗口或标签页中打开链接 (默认)_parent:在父框架中打开链接_top:在整个窗口中打开链接，取消任何框架rel:定义链接与目标页面的关系，nofollow:表示搜索引擎不应跟踪该链接，常用于外部链接，noopener 和 noreferrer:防止在新标签中打开链接时的安全问题注意：当使用
target="_blank"时，新页面可以通过 window.opener 访问原页面，存在安全风险，所以使用targe= "_blank"时，应该添加rel = "noopener noreferrer"
实践样例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="#" target="_blank" rel = "noopener noreferrer">第一篇博客</a>
</body>
</html>
样例效果:
ul li无序列表:ul 嵌套 li,ul 是无序列表，li 是列表条目，用于布局排列整齐的不需要规定顺序的区域，显示效果为粗体圆点 (典型的小黑圆圈)
结构:
<ul>
<li></li>
<li></li>
</ul>
实践样例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>HawkPP</li>
<li>HawkPlusPlus</li>
</ul>
</body>
</html>
样例显示:
ol li有序列表:ol 嵌套 li,ol 是有序列表，li 是列表条目，布局排列整齐的需要规定顺序的区域，列表项目使用数字进行标记
结构:
<ol>
<li></li>
<li></li>
</ol>
实践样例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ol>
<li>HawkPP</li>
<li>HawkPlusPlus</li>
</ol>
</body>
</html>
样例效果:
dl dt dd定义列表:dl 嵌套 dt 和 dd,dl 是定义列表，dt 是定义列表的标题，dd 是定义列表的描述 / 详情
结构:
<dl>
<dt>列表标题</dt>
<dd>列表描述 / 详情</dd>
</dl>
实践样例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<dl>
<dt>HawkPP</dt>
<dd>HawkPP want to be a full stack developer!!!!</dd>
<dt>HawkPlusPlus</dt>
<dd>HawkPP is growing!!</dd>
</dl>
</body>
</html>
样例效果:
| 标签 | 名称 | 描述 | 示例代码 |
|---|---|---|---|
<table> | 表格容器 | 定义整个表格 | <table>...</table> |
<tr> | 表格行 | 定义表格中的一行 | <tr>...</tr> |
<td> | 表格单元格 | 定义普通单元格 | <td>内容</td> |
<th> | 表头单元格 | 定义标题单元格 (加粗居中) | <th>标题</th> |
为方便记忆对应标签功能 (提供下面对应标签的英文)
tr:tr是 table row 的缩写，表示表格的一行。td:td是 table data 的缩写，表示表格的数据单元格。th:th是 table header 的缩写，表示表格的表头单元格。
| 标签 | 名称 | 作用 | 示例 |
|---|---|---|---|
<thead> | 表头组 | 包裹表头行，语义化分组 | <thead><tr><th>姓名</th></tr></thead> |
<tbody> | 表体组 | 包裹表格主体内容 | <tbody><tr><td>HawkPP</td></tr></tbody> |
<tfoot> | 表尾组 | 包裹表格汇总或底部内容 | <tfoot><tr><td>rating:-1000</td></tr></tfoot> |
结构:
<table>
<thead>
<tr>
<th>列标题 1</th>
<th>列标题 2</th>
<th>列标题 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>行 1，列 1</td>
<td>行 1，列 2</td>
<td>行 1，列 3</td>
</tr>
<tr>
<td>行 2，列 1</td>
<td>行 2，列 2</td>
<td>行 2，列 3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>最后一行，列 1</td>
<>最后一行，列 2
最后一行，列 3
实践样例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table>
<thead>
<tr>
<th>比赛次数</th>
<th>参赛人员</th>
<th>比赛成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>HawkPP</td>
<td>59</td>
</tr>
2
HawkPP
49
比赛总次数:2
参赛人:HawkPP
平均得分:54
样例效果
注意: 如果不定义边框属性，表格将不显示边框，如果要显示边框，在
table标签里面添加边框属性border
添加边框属性后显示效果:
colspan、rowspan)| 属性 | 名称 | 作用 | 示例 |
|---|---|---|---|
colspan | 跨列合并 | 横向合并 n 列 | <td colspan="2">合并 2 列</td> |
rowspan | 跨行合并 | 纵向合并 n 行 | <td rowspan="3">合并 3 行</td> |
合并规则:
colspan="n":当前单元格向右占用 n 列，被合并的单元格需删除rowspan="n":当前单元格向下占用 n 行，被合并的单元格需删除但是，不能跨表格结构标签合并单元格 (thead、tbody、tfoot)。
合并单元格的步骤：明确合并的目标保留最左最上的单元格，添加属性
n(取值是数字，表示需要合并的单元格数量) 跨行合并，保留最上单元格，添加属性rowspan跨列合并，保留最左单元格，添加属性colspan删除其他单元格
实践样例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table>
<thead>
<tr>
<th>比赛次数</th>
<th>参赛人员</th>
<th>比赛成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<!-- 合并行 -->
<td rowspan="2">HawkPP</td>
<td>59
2
49
参赛人对自己的评价
HawkPP is a noob at this!!!
样例效果:
用于收集用户的输入信息
通过标签<form>来创建标签
input 标签的各种类型基本结构: <input type="..." >
根据标签 type 属性值不同，来实现不同的功能，如：文本输入框、密码框、单选按钮、复选框等
按常用顺序排序整理如下:
| 排序 | type 值 | 说明 |
|---|---|---|
| 1 | text | 单行文本输入框 |
| 2 | password | 密码输入框，输入内容显示为圆点或星号 |
| 3 | submit | 提交按钮 |
| 4 | checkbox | 复选框 (多选框) |
| 5 | radio | 单选框 |
| 6 | button | 普通按钮 |
| 7 | file | 文件上传控件 |
| 8 | email | 邮箱输入框，提交时自动校验邮箱格式 |
| 9 | number | 数字输入框，可配合 min/max/step 使用 |
| 10 | tel | 电话号码输入框，移动端调出数字键盘 |
| 11 | hidden | 隐藏字段，不显示但会提交数据 |
| 12 | date | 日期选择器 |
| 13 | reset | 重置按钮，清空表单内容 |
| 14 | url | 网址输入框，需包含 http:// 或 https:// |
| 15 | search | 搜索框，带有清除按钮样式 |
| 16 | range | 滑块控件，用于范围选择 |
| 17 | color | 颜色选择器，返回十六进制色值 |
| 18 | image | 图像提交按钮 |
| 19 | time | 时间选择器 |
| 20 | datetime-local | 本地日期时间选择器 |
| 21 | month | 月份选择器 |
| 22 | week | 周选择器 |
| 属性名 | 作用 | 单选框 (radio) 补充说明 | 多选框 (checkbox) 补充说明 |
|---|---|---|---|
| name | 控件分组名称 | 同组 name 必须相同，实现互斥单选，只能选中一个 | 同组 name 必须相同，代表同一组选项，支持多选 |
| value | 控件提交取值 | 必须设置，同组内 value 不可重复，用于提交实际数据 | 必须设置，同组内 value 不可重复，用于提交实际数据 |
| checked | 默认选中状态 | 同组内最多只能有一个 checked，保证默认单选 | 同组内可以有多个 checked，支持默认多选 |
结构:<input type="radio">
结构: <input type="checkbox">
实践样例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<h1>Welcome to Website!!!</h1>
<!-- 单选框 -->
<!-- 按性别分类，即用 name 自定义分组，分为男、女、保密用 value 组内元素有哪些 -->
<input type="radio" name = "gender" value = "male">男
<input type="radio" name = "gender" value="female">女
<!-- checked 设置默认选中 -->
<input type="radio" name = "gender" value="secret" checked>保密
<br>
Please to guess hobby!!!!
编程
跑步
样例效果:
select下拉菜单:select 嵌套 option，select 是下拉菜单整体，option 是下拉菜单的每一项 结构如下:
<select>
<option></option>
<option></option>
<option selected> </option>
</select>
name用于后端，表单提交时，后端通过 name 获取选中的值，必须设置才能正确提交数据id用于前端 JS 操作、CSS 样式、label 关联都需要使用 id
实践样例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<ins>Please to guess where comes from!!!</ins>
<br>
<select name="county">
<option value="China">China</option>
<option value="USA">USA</option>
<option value="UK">UK</option>
<option value="Extraterrestria">Extraterrestria</option>
</select>
样例效果:
textarea文本框:<input type="text">
文本域:多行输入文本的表单控件，<textarea>默认提示文字</textarea>
样例实践:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<h1>Welcome to Website!!!</h1>
<strong>Please to register an account!!</strong>
<br>
<!-- 文本框 -->
id:<input type = "text" name="id"><br>
password:<input type = "password" name="password">
<br>
<u>What do you think of the website?</u>
<br>
<!-- 文本域 -->
<>Write your comment!!
样例效果:
label 标签与按钮label标签作用:用于为表单元素定义标注 (标签),关联表单控键
写法:
<label> <input></label>
把表单控件放在 <label> 标签里面，点击文字就能聚焦到输入框<input> <label for="XX"> </label>
用 for 属性指向控件的 id，标签和控件可以分开写。样例实践:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<!-- 隐式 -->
<label><input type="checkbox">我已阅读并同意《用户协议》 </label>
<br>
<!-- 显式 -->
<input type = "checkbox">
<label for="safe">我已阅读并同意《用户协议》</label>
<br>
</form>
</body>
</html>
样例效果:
通过实操发现有 label 和无 label 的区别如下: 使用
label标签增大点击范围的表单控件，如文本框，点击文字可以直接调整选择与否，其他的表单控件如密码框、上传文件、单选框、多选框、下拉菜单、文本域这些也有类似的效果
结构:<button>按钮</button>
| type 值 | 作用 | 使用场景 |
|---|---|---|
submit | 默认值,点击后提交表单 | 表单提交按钮 |
reset | 重置表单内所有输入框为初始值 | 清空表单 |
button | 普通按钮，无默认行为 | 配合 JavaScript 执行自定义操作 |
样例实践:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<h1>Welcome to Website!!!</h1>
<strong>Please to register an account!!</strong>
<br>
<!-- 文本框 -->
id:<input type = "text" name="id"><br>
password:<input type = "password" name="password">
<br>
<button type="submit">提交</button>
<button type=>重置
样例效果:
结合上述这篇博客内容，从零开发一个纯 HTML 个人博客网站。 要求不使用 CSS、不使用 JS，只通过 HTML 标签完成结构、内容、布局与交互。
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HawkPP's website</title>
</head>
<body>
<!-- ==================== 页面容器开始 ==================== -->
<!-- 最外层容器，宽度 1500px，作为整个页面的父容器 -->
<div>
<!-- ==================== 头部区域开始 ==================== -->
<!-- 页面头部，浅天蓝色背景 -->
<div>
<!-- 博客主标题，水平居中，移除默认下边距 -->
<h1> HawkPP's first blog website</h1>
</div>
<!-- ==================== 头部区域结束 ==================== -->
<!-- ==================== 菜单区域开始 ==================== -->
<!-- 左侧导航菜单，金黄色背景，宽度 200px，高度 1150px，向左浮动 -->
<div>
<!-- 菜单标题：加粗显示 -->
<strong>目录</strong><br>
<!-- 锚点链接：点击跳转到博主简介区域 -->
<a =>HawkPP 的简介
HTML 入门
HTML 进阶
CSS 入门
CSS 进阶
HawkPP 的简介
个人简介:Hi, I'm a CS student.I'm still learning the basics of C/C++ and Python, and I'm slowly getting into data structures and algorithms.I enjoy building small projects like simple games and personal websites, though I know I have a lot to improve.Thanks for stopping by my blog—I'm here to share my learning journey and grow together with others!
HTML 基础
HTML 进阶
CSS 基础
CSS 进阶
留言板
你的名字:
你的邮箱:
留言内容:
评价： 中评
好评
好好评
留言类型选择:
QQ
email
WeChat
提交留言
重置留言
版权归开发者所有
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML 转 Markdown 互为补充。 在线工具，Markdown 转 HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML 转 Markdown在线工具，online
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online
将JSON字符串修饰为友好的可读格式。 在线工具，JSON美化和格式化在线工具，online