Web 前端基础：HTML 核心语法和常用标签
HTML部分
一、HTML简介
HTML是什么？
HTML 指的是 超文本标记语言 : HyperText Markup Language
HTML骨架
<!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> </body> </html> <!DOCTYPE html>:
- 声明 HTML5 文档
- 声明有助于浏览器中正确显示网页
<html lang="en">:
- HTML 页面的根元素
lang="en":表示网页语言是英语，如果想设置成中文可以写成lang="zh-CN"
<head>:
- 存放网页配置信息，不会显示在页面上,（简单来说是给浏览器看的内容），比如后面用css写的内容里面的
title之间放网页标题<meta charset="UTF-8">:作用使用UTF-8（国际通用编码）防止中文乱码<meta name="viewport" content="width=device-width, initial-scale=1.0">:- 视口设置：移动端适配必备。
- width=device-width：宽度 = 设备屏幕宽度
- initial-scale=1.0：默认不缩放
<body>:元素包含了可见的页面内容（简单来说就是用户可以直接看到的），比如图片、文字</html>:关闭根标签，网页结束
二、HTML 标签语法
标签结构
- 标签要成对出现，中间包裹内容
- <>里面放英文字母（标签名）
- 结束标签比开始标签多
/,如<body> </body> - 标签分类：双标签和单标签（相对于双标签会少很多）
双标签：成对出现，如<p></p>,段落标签
单标签：单独出现，如<br>，换行标签
*[快速生成骨架的方法（vscode)]
在HTML文件中，先按下!（英文），然后配合enter/Tab键
向前缩进：Tab
向后缩进：Shift+Tab
标签嵌套关系（父子、兄弟）
父子关系（嵌套关系）：子级标签换行且缩进（Tab键）
<html> <body></body> </html> 兄弟关系（并列关系）：兄弟标签要换行要对齐 —— 同级别关系
<head></head> <body></head> HTML 注释和调试
注释 :<!-- 这里是注释！ -->
为了方便与自己后续理解代码的含义和与方便别人理解，所以根据需求写适当的注释可以提高程序的可读性
*[vscode中快速添加注释的方法]:
添加/删除注释的快捷键：ctrl+/
调试
当代码出现问题，不易看出时，可以使用调试功能
在自己使用的浏览器中 鼠标右键-> 检查 即可查看代码，或者按快捷键F12或者按Fn + F12(笔记本电脑）
三、HTML 文本排版标签
标题标签 h1~h6
标题标签特点：<h+num></h+num>
- 以<h+数字>来表示标题标签
- 文字加粗
- 随着数增大而减小
- 独自占一行
- 自动换行
注意：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>这里是段落内容</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、水平线 h
<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>的区别:<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 & 行内元素 span
<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> 样例显示
四、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
图片标签结构：<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> 样例显示：
五、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="https://editor.ZEEKLOG.net/md?articleId=159436052&spm=1011.2415.3001.9698" target="_blank" rel = "noopener noreferrer">HawkPP的第一篇博客</a> </body> </html> 样例效果：
六、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> 样例效果：
七、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> <td>最后一行,列2</td> <td>最后一行,列3</td> </tr> </tfoot> </table> 实践样例：
<!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> <tr> <td>2</td> <td>HawkPP</td> <td>49</td> </tr> </tbody> <tfooter> <tr> <td>比赛总次数:2</td> <td>参赛人:HawkPP</td> <td>平均得分:54</td> </tr> </tfooter> </table> </body> </html> 样例效果
注意：
如果不定义边框属性，表格将不显示边框，如果要显示边框，在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</td> </tr> <tr> <td>2</td> <!-- 删除重合的表格元素 --> <!-- <td>HawkPP</td> --> <td>49</td> </tr> </tbody> <tfoot> <tr> <td>参赛人对自己的评价</td> <!-- 合并列 --> <td colspan="2">HawkPP is a noob at this!!!</td> <!-- 删除重合的表格元素 --> <!-- <td>平均得分:54</td> --> </tr> </tfoot> </table> </body> </html> 样例效果：
八、HTML 表单
表单是什么？
用于收集用户的输入信息
通过标签<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 HawkPP's 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><br> <strong>Please to guess HawkPP's hobby!!!!</strong><br> <!-- 多选框 --> <input type="checkbox" name = "hobby" value="coding">编程 <input type="checkbox" name = "hobby" value="running">跑步 <input type="checkbox" name = "hobby" value="other"> </form> </body> </html> 样例效果：
下拉菜单 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 HawkPP 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> </form> </body> </html> 样例效果：
文本框和文本域 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 HawkPP's 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 HawkPP website?</u> <br> <!-- 文本域 --> <textarea>Write your comment!!</textarea> <br> </form> </body> </html> 样例效果：
label 标签与按钮
label标签
作用：用于为表单元素定义标注（标签），关联表单控键
写法：
- 包裹法（隐式关联）:
<label> <input></label>
把表单控件放在<label>标签里面，点击文字就能聚焦到输入框 - for属性法（显式关联）:
<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 HawkPP's 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="reset">重置</button> <br> </form> </body> </html> 样例效果：
综合HTML实践
题目描述
结合上述这篇博客内容，从零开发一个纯HTML个人博客网站。
要求不使用CSS、不使用JS，只通过HTML标签完成结构、内容、布局与交互。
任务要求
- 构建标准规范的HTML5页面骨架，包含完整头部配置与页面结构。
- 使用文本排版标签搭建博客标题、段落、分割线与文本格式，让文章内容清晰易读。
- 插入个人头像或博客配图，正确使用相对/绝对路径与图片属性。
- 实现超链接跳转，可以包括外部链接、文章链接、页面内导航链接。
- 使用三类列表展示博客分类、文章目录、个人信息介绍。
- 完成一个留言表单，包含输入框、单选、多选、下拉菜单、文本域、按钮等完整功能。
- 使用语义化标签区分页面区域，代码规范、注释清晰、结构合理。
- 页面底部使用页脚区域展示版权信息。
代码如下
<!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 href="#HawkPP_profile">HawkPP的简介</a><br> <!-- 锚点链接：点击跳转到HTML基础区域 --> <a href="#HTML_basic"> HTML入门</a><br> <!-- 锚点链接：点击跳转到HTML进阶区域 --> <a href="#HTML_advanced">HTML进阶</a><br> <!-- 锚点链接：点击跳转到CSS入门区域 --> <a href="#CSS_basic">CSS入门</a><br> <!-- 锚点链接：点击跳转到CSS进阶区域 --> <a href="#CSS_advanced">CSS进阶</a><br> </div> <!-- ==================== 菜单区域结束 ==================== --> <!-- ==================== 内容区域开始 ==================== --> <!-- 主体内容区域，浅灰色背景，宽度1300px，向左浮动，高度自适应 --> <div> <!-- ==================== 博主简介区域开始 ==================== --> <!-- 博主简介标题，二级标题，作为锚点目标 --> <h2>HawkPP的简介</h2><br> <!-- 博主头像图片，宽度200px，高度200px，alt属性为HawkPP --> <img src="C:\Users\33518\Pictures\Image_1771658476254_187.jpg" alt="HawkPP"width="200"height="200px"> <!-- 个人简介文字，使用段落标签，包含换行 --> 个人简介:<p>Hi, I'm HawkPP, a CS student.I'm still learning the basics of C/C++ and Python, and I'm slowly getting into data structures and algorithms.<br>I enjoy building small projects like simple games and personal websites, though I know I have a lot to improve.<br>Thanks for stopping by my blog—I'm here to share my learning journey and grow together with others!</p> <!-- 水平分隔线，分隔博主简介和文章区域 --> <hr> <!-- ==================== 博主简介区域结束 ==================== --> <!-- ==================== 文章占位区域开始 ==================== --> <!-- HTML基础标题，作为锚点目标 --> <h2>HTML基础</h2><br><hr> <!-- HTML进阶标题，作为锚点目标 --> <h2>HTML进阶</h2><br><hr> <!-- CSS基础标题，作为锚点目标 --> <h2>CSS基础</h2><br><hr> <!-- CSS进阶标题，作为锚点目标 --> <h2>CSS进阶</h2><br><hr> <!-- ==================== 文章占位区域结束 ==================== --> <!-- ==================== 留言板表单开始 ==================== --> <form> <!-- 表单标题：留言板，水平居中，加粗 --> <h2><strong>留言板</strong></h2> <!-- 姓名输入框：使用label隐式关联，文本类型 --> <label>你的名字：<input type="text"><br></label> <!-- 邮箱输入框：使用label隐式关联，邮箱类型，带占位提示 --> <label>你的邮箱：<input type="email" placeholder="请输入邮箱"></label><br> <br> <!-- 留言内容：label显式关联文本域，设置字体大小和垂直对齐 --> <label for="commence">留言内容：</label> <!-- 文本域：宽度50列，高度5行，带占位提示，垂直对齐和内边距 --> <textarea cols="50" rows ="5"style ="vertical-align:middle; padding: 5px;" placeholder="请输入留言内容"></textarea> <br> <!-- 评价单选框组：三个选项，name相同实现单选 --> 评价： <label><input type="radio" name="chance">中评</label> <label><input type="radio" name="chance">好评</label> <label><input type="radio" name="chance">好好评</label> <br> <!-- 留言类型下拉菜单：label显式关联select --> <label for="kinds">留言类型选择：</label> <select name="kinds"> <option>QQ</option> <option>email</option> <option>WeChat</option> </select> <br> <!-- 表单按钮：提交按钮和重置按钮 --> <button type="submit">提交留言</button> <button type="reset">重置留言</button> </form> <!-- ==================== 留言板表单结束 ==================== --> </div> <!-- ==================== 内容区域结束 ==================== --> <!-- ==================== 底部区域开始 ==================== --> <!-- 页面底部，橙色背景，清除浮动，文字居中 --> <div> <!-- 版权信息，包含作者超链接 --> 版权归<a href="https://blog.ZEEKLOG.net/2503_94115885?type=blog"><strong>HawkPP</strong></a>所有 </div> <!-- ==================== 底部区域结束 ==================== --> </div> <!-- ==================== 页面容器结束 ==================== --> </body> </html> 显示效果：
文末说明
参考资料
本文学习与编写过程中参考了以下教程：
- 菜鸟教程：HTML 教程 | 菜鸟教程
- 黑马程序员前端教程：[黑马程序员Web前端基础课程]
版权声明
- 本文作者：HawkPP
- 发布平台：ZEEKLOG
- 转载请注明出处，本文仅供学习交流使用
联系与反馈
如有疏漏或错误，欢迎各位大佬指正，我会及时修改完善！
感谢你的阅读与交流！
