跳到主要内容
极客日志极客日志
首页博客AI提示词GitHub精选代理工具
搜索
|注册
博客列表

目录

  1. 一、HTML 简介
  2. HTML 是什么？
  3. HTML 骨架
  4. 二、HTML 标签语法
  5. 标签结构
  6. 标签嵌套关系（父子、兄弟）
  7. HTML 注释和调试
  8. 三、HTML 文本排版标签
  9. 标题标签 h1~h6
  10. 段落标签 p
  11. 换行 br、水平线 hr
  12. 文本格式化标签
  13. 块级元素 div & 行内元素 span
  14. 四、HTML 图像与路径
  15. 相对路径与绝对路径
  16. 图像标签 img
  17. 五、HTML 超链接
  18. 六、HTML 列表
  19. 无序列表 ul li
  20. 有序列表 ol li
  21. 定义列表 dl dt dd
  22. 七、HTML 表格
  23. 表格基本结构
  24. 表头、表体、表尾
  25. 合并单元格（colspan、rowspan）
  26. 八、HTML 表单
  27. 表单是什么？
  28. input 标签的各种类型
  29. 单选框、多选框
  30. 单选框
  31. 多选框
  32. 下拉菜单 select
  33. 文本框和文本域 textarea
  34. label 标签与按钮
  35. label 标签
  36. 按钮
  37. 综合 HTML 实践
  38. 题目描述
  39. 任务要求
  40. 显示效果：
  • 💰 8折买阿里云服务器限时8折了解详情
HTML / CSS大前端

Web 前端基础：HTML 核心语法与常用标签

系统讲解 HTML 基础语法，涵盖文档骨架、文本排版、图像路径、超链接、列表、表格及表单等核心标签。内容包括标签结构、嵌套关系、语义化标签应用、表单控件类型及属性配置，并通过综合实践案例演示纯 HTML 页面构建流程，适合前端初学者入门。

落日余晖发布于 2026/4/5更新于 2026/4/2012 浏览

一、HTML 简介

HTML 是什么？

HTML 指的是 超文本标记语言 : HyperText Markup Language

HTML 骨架

<!DOCTYPE html>
<html lang="en">

    
    
    Document
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
</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></body>

HTML 注释和调试

注释: <!-- 这里是注释！ --> 为了方便与自己后续理解代码的含义和方便别人理解，所以根据需求写适当的注释可以提高程序的可读性

VS Code 中快速添加注释的方法: 添加/删除注释的快捷键：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>进阶之路</h1>
    <h2>html 入门</h2>
    <h3>html 进阶</h3>
    <h4>css 入门</h4>
    <h5>css 进阶</h5>
    <h6>前端工程师</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>这是一个示例段落。</p>
</body>
</html>

样例显示：

段落样例显示

换行 br、水平线 hr

<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>第一行内容。</p>
    <p>第二行内容。</p>
    <hr>
    <br>
    <hr>
    <p>第三行内容。</p>
    <p><hr>第四行内容。</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>开发者</b> is pretty much <strong>a noob</strong>,<i>but</i> he want to be a <em>full stack developer</em>!!</p>
    <p><mark>开发者</mark> is <small>not</small> a professional yet, <del>but</del> he is <ins>working hard</ins> to become one!!!</p>
    <p>开发者 want to drink H<sub>2</sub>O</p>
    <p>开发者's growth rate is 10<sup>-n</sup></p>
    <p><u>开发者</u></p>
    <p><s>开发者 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>块级元素示例</div>
    <div>块级元素示例</div>
    <span>行内元素示例</span>
    <span>行内元素示例</span>
</body>
</html>

样例显示

div 和 span 标签样例

四、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\Desktop\壁纸 2.jpg">
</body>
</html>

样例显示：

相对路径和绝对路径样例

图像标签 img

图片标签结构：<img src="url" alt="some_text" title = "text">

  • src = "url":src 指'source'，源属性的值是图像的 URL 地址，是必须属性。
  • alt ="":替代文本（图片加载失败时显示）
  • width height: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，当点击链接时，浏览器将导航到此 URL
  • target 属性：
    • _blank: 在新窗口或新标签页中打开链接
    • _self: 在当前窗口或标签页中打开链接（默认）
    • _parent: 在父框架中打开链接
    • _top: 在整个窗口中打开链接，取消任何框架
  • rel:定义链接与目标页面的关系，nofollow: 表示搜索引擎不应跟踪该链接，常用于外部链接，noopener 和 noreferrer: 防止在新标签中打开链接时的安全问题

注意：当使用 target="_blank" 时，新页面可以通过 window.opener 访问原页面，存在安全风险，所以使用 target="_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://example.com" target="_blank" rel="noopener noreferrer">示例链接</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>列表项 1</li>
        <li>列表项 2</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>第一项</li>
        <li>第二项</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>术语 1</dt>
        <dd>定义内容 1</dd>
        <dt>术语 2</dt>
        <dd>定义内容 2</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>内容</td></tr></tbody>
<tfoot>表尾组包裹表格汇总或底部内容<tfoot><tr><td>总计</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 border="1">
        <thead>
            <tr>
                <th>比赛次数</th>
                <th>参赛人员</th>
                <th>比赛成绩</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>开发者 A</td>
                <td>59</td>
            </tr>
            <tr>
                <td>2</td>
                <td>开发者 A</td>
                <td>49</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>比赛总次数:2</td>
                <td>参赛人：开发者 A</td>
                <td>平均得分:54</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

样例效果

表格样例 1

注意： 如果不定义边框属性，表格将不显示边框，如果要显示边框，在 table 标签里面添加边框属性 border

添加边框属性后显示效果:

表格样例 2

合并单元格（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 border="1">
        <thead>
            <tr>
                <th>比赛次数</th>
                <th>参赛人员</th>
                <th>比赛成绩</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <!-- 合并行 -->
                <td rowspan="2">开发者 A</td>
                <td>59</td>
            </tr>
            <tr>
                <td>2</td>
                <!-- 删除重合的表格元素 -->
                <td>49</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>参赛人对自己的评价</td>
                <!-- 合并列 -->
                <td colspan="2">开发者是一个新手</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

样例效果：

表格样例 3

八、HTML 表单

表单是什么？

用于收集用户的输入信息 通过标签 <form> 来创建标签

input 标签的各种类型

基本结构：<input type="..." > 根据标签 type 属性值不同，来实现不同的功能，如：文本输入框、密码框、单选按钮、复选框等

按常用顺序排序整理如下：

排序type 值说明
1text单行文本输入框
2password密码输入框，输入内容显示为圆点或星号
3submit提交按钮
4checkbox复选框（多选框）
5radio单选框
6button普通按钮
7file文件上传控件
8email邮箱输入框，提交时自动校验邮箱格式
9number数字输入框，可配合 min/max/step 使用
10tel电话号码输入框，移动端调出数字键盘
11hidden隐藏字段，不显示但会提交数据
12date日期选择器
13reset重置按钮，清空表单内容
14url网址输入框，需包含 http:// 或 https://
15search搜索框，带有清除按钮样式
16range滑块控件，用于范围选择
17color颜色选择器，返回十六进制色值
18image图像提交按钮
19time时间选择器
20datetime-local本地日期时间选择器
21month月份选择器
22week周选择器

单选框、多选框

属性名作用单选框（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>欢迎网站</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>请猜测开发者的爱好!!!!</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>请猜测开发者来自哪里!!!</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>欢迎网站</h1>
        <strong>请注册账号!!</strong>
        <br>
        <!-- 文本框 -->
        id:<input type="text" name="id"><br>
        password:<input type="password" name="password">
        <br>
        <u>您如何看待这个网站?</u>
        <br>
        <!-- 文本域 -->
        <textarea>请输入评论!!</textarea>
        <br>
    </form>
</body>
</html>

样例效果：

文本框和文本域样例

label 标签与按钮

label 标签

作用：用于为表单元素定义标注（标签），关联表单控键

写法：

  1. 包裹法（隐式关联）:<label> <input></label> 把表单控件放在 <label> 标签里面，点击文字就能聚焦到输入框
  2. 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 的区别如下： 使用 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>欢迎网站</h1>
        <strong>请注册账号!!</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 标签完成结构、内容、布局与交互。

任务要求
  1. 构建标准规范的 HTML5 页面骨架，包含完整头部配置与页面结构。
  2. 使用文本排版标签搭建博客标题、段落、分割线与文本格式，让文章内容清晰易读。
  3. 插入个人头像或博客配图，正确使用相对/绝对路径与图片属性。
  4. 实现超链接跳转，可以包括外部链接、文章链接、页面内导航链接。
  5. 使用三类列表展示博客分类、文章目录、个人信息介绍。
  6. 完成一个留言表单，包含输入框、单选、多选、下拉菜单、文本域、按钮等完整功能。
  7. 使用语义化标签区分页面区域，代码规范、注释清晰、结构合理。
  8. 页面底部使用页脚区域展示版权信息。

代码如下

<!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> 我的第一个博客网站</h1>
        </div>
        <!-- ==================== 头部区域结束 ==================== -->
        <!-- ==================== 菜单区域开始 ==================== -->
        <!-- 左侧导航菜单，金黄色背景，宽度 200px，高度 1150px，向左浮动 -->
        <div>
            <!-- 菜单标题：加粗显示 -->
            <strong>目录</strong><br>
            <!-- 锚点链接：点击跳转到博主简介区域 -->
            <a href="#profile">我的简介</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>我的简介</h2><br>
            <!-- 博主头像图片，宽度 200px，高度 200px，alt 属性为开发者 -->
            <img src="./avatar.jpg" alt="开发者" width="200" height="200px">
            <!-- 个人简介文字，使用段落标签，包含换行 -->
            个人简介:<p>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.<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>
            <!-- 版权信息，包含作者超链接 -->
            版权所有
        </div>
        <!-- ==================== 底部区域结束 ==================== -->
    </div>
    <!-- ==================== 页面容器结束 ==================== -->
</body>
</html>

显示效果：

综合案例 11

综合案例 12

  • 💰 8折买阿里云服务器限时8折购买
  • 🦞 5分钟部署阿里云小龙虾了解详情
  • 🤖 一键搭建Deepseek满血版了解详情
  • 一键打造专属AI 智能体了解详情
极客日志微信公众号二维码

微信扫一扫，关注极客日志

微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog

更多推荐文章

查看全部
  • Rust 获取系统内存 CPU 信息并实现图片采集设置壁纸
  • WebGPU全面解析：新一代Web图形与计算API
  • HTML+CSS+JavaScript 前端三剑客基础知识体系
  • AWS Kiro 账号池管理系统：Amazon Q Developer 转 OpenAI 兼容代理
  • Spring Web MVC 入门：从概念到实践
  • 位运算算法核心技巧与经典例题解析
  • AI 绘画隐私保护方案：基于 Flux 的本地部署实践
  • Spring AI 实战：基于 Ollama 构建离线私有化 AI 服务方案
  • 大数据视角下时序数据库选型：Apache IoTDB 核心优势解析
  • HTTP Cookie 深入解析：Web 会话追踪机制
  • 扣子（Coze）Skills+OpenClaw 实战：构建 AI 智能体自动化技能
  • 论文实证分析：稳健性检验常用方法及 Python 示例
  • 前端文件下载实战：从原理到最佳实践
  • 8 款科研绘图工具推荐：AI 助力学术可视化与图表绘制
  • 神经网络基础理论与手写数字识别实战
  • Python Web 框架 Django 高级应用：中间件、信号与缓存实战
  • DirSearch Web 路径扫描工具安装与使用指南
  • Python 爬虫数据存储实战：NoSQL 数据库核心应用
  • 数据结构：常见排序算法详解
  • Meta Llama 4 Scout MoE 架构与性能深度解析

相关免费在线工具

  • Base64 字符串编码/解码

    将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online

  • Base64 文件转换器

    将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online

  • Markdown转HTML

    将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。 在线工具，Markdown转HTML在线工具，online

  • HTML转Markdown

    将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML转Markdown在线工具，online

  • JSON 压缩

    通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online

  • JSON美化和格式化

    将JSON字符串修饰为友好的可读格式。 在线工具，JSON美化和格式化在线工具，online