当前位置： 首页 > ai >正文

Python Day27 HTML 核心知识笔记及例题分析

ai 2025/8/12 16:40:01

一、HTML 基础认知

（一）HTML 是什么

HTML（HyperText Markup Language）即超文本标记语言 ，它不是编程语言，而是用于描述网页结构的标记语言 。通过各种标签（标记）来定义网页的内容和结构，比如文字、图片、链接、表格等元素的呈现与组织。

（二）HTML 标签语法

  1. 完整标签：由开始标签、标签体内容和结束标签组成，语法为 <tagName attr='val'....> 标签体内容 </tagName> ，例如 <p style="color: red;">这是一段红色文字</p> ，p 是标签名，style 是属性，"color: red;" 是属性值，“这是一段红色文字” 是标签体内容 。
  2. 单标签：部分标签在网页中不分开始和结束标签，这类标签称为单标签，语法是 <tagName attr='val'.... /> ，像 <br />（换行）、<hr />（水平分割线）、<img src="xxx" />（图片）等都是单标签 。

二、网页基本结构

（一）网页构成概述

一个网站由多个网页组成，单个网页后缀名常见为 .html 、.htm ，也可用 .xhtml（对格式要求更严格 ）。一个网页本质上由三个核心部分构成：

（二）具体组成部分

  1. 文档类型声明：<!DOCTYPE html> ，这是 HTML5 的标记，用于告知浏览器当前网页使用的 HTML 版本，让浏览器以对应的规范去解析网页 。
  2. 网页头信息（head 标签）：head 标签是不可见标签（浏览器页面上不会直接显示其内容 ），通常包含 meta 和 title 两个关键子标签 。
    • meta ：单标签，用于设置网页的头信息，比如网页编码（<meta charset="UTF-8"> 可设置为 UTF-8 编码，避免中文乱码 ）、适配设备（响应式布局相关设置 ）等 。
    • title ：用于设置网页的标题，会显示在浏览器的页签上，方便用户识别和管理网页，例如 <title>我的个人网页</title> 。
  3. 网页正文内容（body 标签）：浏览器页面上实际呈现给用户的数据都放置在这里，像文字、图片、视频、表格等可视化内容的标签，都要写在 body 标签内部 。

（三）网页骨架结构

网页有且仅有一个根标签 html ，它包含两个重要子标签：

  • head ：负责承载网页头信息，如上述的 meta 、title 等设置 。
  • body ：承载网页的正文内容，是用户能看到的网页可视化部分的容器 。在空白网页文件中，输入 ! + tab 可快速生成网页的基本骨架，示例如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>

三、常见 HTML 标签分类及用法

（一）标题标签（h1 - h6 ）

  1. 作用与特点：对应 1 级标题到 6 级标题，h1 字体最大、层级最高，h6 字体最小、层级最低 。默认字体加粗（font-weight: bold; ）、颜色为黑色（color: black; ） ，且都是块级元素 。
  2. 块级元素特性：独占一行，宽度默认铺满父容器整个宽度，高度由内容填充，允许使用 width 和 height 样式更改宽和高 ，例如 <h1 style="width: 200px; height: 50px;">一级标题</h1> 。

（二）文本相关标签

  1. 段落标签（p ）：块级元素，用于定义一段文本内容 。p 标签不允许嵌套任意块级元素，但可以嵌套行内元素和行内块元素 。另外，white-space: pre; 属性可保留文本中的换行、空格等格式，比如 `<p style="white-space: pre;">
    这是一段
    有多行
    且带空格的文本

</p>` 会按原始格式显示 。
2. 预格式标签（pre ）：会保留元数据的格式，包括换行符、空格、制表符效果 ，常与 `code` 标签配合用于展示代码，例如：
```html
<pre>
<code>
# 获取 100~1000 之间的水仙花数
for x in range(100, 1000):
a = x // 100
b = x // 10 % 10
c = x % 10
if a3 + b3 + c**3 == x:
print(x)
</code>
</pre>
```
让代码在网页上按编写时的格式展示 。

（三）列表标签

  1. 有序列表（ol + li ）：ol 是有序列表的容器标签，li 代表列表项 ，默认会给列表项添加数字序号 。列表项 li 里还可嵌套其他列表，比如：

<ol><li>首页</li><li><i>关于我们</i><ol><li>QQ</li><li>微信</li><li>电话</li></ol></li>
</ol>

  1. 无序列表（ul + li ）：ul 是无序列表容器标签，li 为列表项，默认列表项前是圆点符号 。无论是有序列表还是无序列表，常用来做网站导航等场景 ，示例：

<ul><li>首页</li><li><b>关于我们</b><ul><li>QQ</li><li>微信</li><li>电话</li></ul></li>
</ul>

  1. 数据列表（dl + dt + dd ）：dl 是数据列表容器，dt 定义列表标题，dd 定义标题对应的详情内容 ，通常用于制作网站底部导航等，例如：

<dl><dt>关于</dt><dd>关于我们</dd><dd>广告合作</dd><dd>友情链接</dd>
</dl>

（四）图片与链接标签

  1. 图片标签（img ）：单标签，用于在网页加载图片 。
    • src 属性：设置图片地址，支持绝对路径（如 https://xxx.com/xxx.jpg ）和相对路径（以 ./ 、../ 等开头，代表相对当前项目的路径 ） ，例如 <img src="cat.gif" alt="猫咪"> ，alt 属性是图片加载失败时显示的替代文本 。
    • 元素特性：行内块元素，不独占一行，多个行内块元素默认水平布局，宽和高默认按内容填充，也可设置 width 和 height ，比如 <img src="cat.gif" style="width: 200px;" alt="猫咪"> 。
  2. 超链接标签（a ）：用于实现页面跳转等功能 。
    • href 属性：设置要跳转的地址，让 a 标签拥有超链接效果 。值可以是绝对地址（如 https://www.baidu.com/ ）、相对地址（如 ./page2.html ） ，也可设置为 javascript:void(0) 禁止跳转，或者 #id 值实现锚点定位（快速定位到当前网页指定 id 元素位置 ），例如 <a href="#top">回到顶部</a> 配合 <h1 id="top">顶部标题</h1> 使用 。
    • target 属性：设置跳转方式，_self 是在当前网页打开新网页（默认值 ）；_blank 是在新窗口打开新网页；_parent 在父窗口打开；_top 在顶层窗口打开 ，比如 <a href="https://www.baidu.com/" target="_blank">百度</a> 会在新窗口打开百度页面 。
    • 元素特性：行内元素，不独占一行，按水平方向布局，宽度和高度默认由内容填充，不能设置宽高 。

（五）表格标签（table ）

  1. 基本结构：由 table （表格容器 ）、tr （行 ）、th （表头单元格，默认文本居中 ）、td （普通单元格 ）等标签组成 ，还可配合 thead （表头 ）、tbody （表体 ）、tfoot （表尾 ）划分结构，让语义更清晰 。
  2. 常用属性与特性：
    • colspan ：合并列，指定单元格跨多少列 ，例如 <td colspan="2">合并两列</td> 。
    • rowspan ：合并行，指定单元格跨多少行 ，例如 <td rowspan="3">合并三行</td> 。
    • 表格相关标签里，table 可设置宽度（如 width="80%" ）、边框（border="1" ）等，tr 、td 、th 可设置对齐方式（align ，值如 center 居中、left 左对齐等 ） 。

（六）其他常用标签

  1. 加粗标签（b、strong ）：b 标签单纯实现加粗效果；strong 标签不仅加粗还带有强调效果（主要给搜索引擎用，帮助高效检测数据 ） ，二者都是行内标签 。行内标签特点是不独占一行，按水平方向布局，宽高默认由内容填充，不能设置宽高 ，示例 <b>加粗文字</b><strong>强调且加粗文字</strong> 。
  2. 斜体标签（i、em ）：i 标签实现斜体效果；em 标签斜体且带强调效果 ，较常用 em 标签 ，同样是行内标签 ，例如 <i>斜体文字</i><em>强调且斜体文字</em> 。
  3. 上下标标签（sub、sup ）：sub 实现下标效果（类似化学公式里 H₂O 的 “₂” ），sup 实现上标效果（类似数学公式里 3⁵ 的 “⁵” ） ，是行内元素 ，语法如 <h1>H<sub>2</sub>O</h1><h1>3<sup>5</sup></h1> 。
  4. 布局标签（div、span ）：
    • div ：块级元素，专门用于布局，自身不带任何样式，可嵌套所有标签 ，常用来划分网页的不同区域，比如头部、内容区、底部等 ，例如 <div><h2>内容区标题</h2><p>内容区文本</p></div> 。
    • span ：行内元素，用于水平布局，自身不带任何样式，可嵌套所有标签 ，常用来包裹一小段文本做特殊样式处理，比如 <span style="color: red;">红色文字</span> 。

三、元素显示模式（display ）

（一）块级元素（block ）

代表标签如 div 、p 、h1 - h6 、ul 、ol 、li 、table 等 。特性是独占一行，按从上到下垂直布局，宽度默认是父容器宽的 100% ，高度由内容填充，支持设置宽和高 。

（二）行内块元素（inline-block ）

代表标签如 img 、input 等 。特性是不独占一行，按从左到右水平方向布局，宽和高均由内容填充，支持设置宽和高 。

（三）行内元素（inline ）

代表标签如 a 、b 、strong 、i 、em 、span 等 。特性是不独占一行，按从左到右水平方向布局，宽和高均由内容填充，不支持设置宽和高 。

以上就是 HTML 核心知识的整理，涵盖了网页结构、常用标签语法及特性、元素显示模式等内容，帮助你更好地理解和运用 HTML 构建网页 。

一、HTML 核心概念回顾

  1. HTML 定义
    超文本标记语言（HyperText Markup Language），非编程语言，通过标签描述网页结构，标签分：

    • 完整标签：<tagName attr="val">内容</tagName>（如 <p>段落</p> ）
    • 单标签：<tagName attr="val" />（如 <br /> 换行、<img /> 图片 ）

  2. 网页基本结构

    • 文档声明：<!DOCTYPE html> （HTML5 标准）
    • 头部（head）：含 meta（设置编码、设备适配等）、title（网页标题，显示在浏览器标签）
    • 主体（body）：网页可见内容的容器，所有展示元素写在此处

二、示例网页功能拆解（含古诗、链接、表格等）

1. 古诗与链接模块

<!-- 古诗展示 + 链接 -->
<pre>无题一去二三里，烟村四五家。楼台六七座，八九十枝花。
</pre>
<hr/>
<a href="https://www.baidu.com/">点我到百度</a>
<a href="#">点我到无题诗</a>

  • <pre> 标签：保留文本格式（换行、空格），适合展示诗歌等需固定排版的内容
  • <a> 链接：href 设跳转地址（# 为占位，可替换为实际页面链接）
2. 请假条表格模块

<!-- 请假条表格 -->
<table width="80%" border="1" cellspacing="0"><caption>请假条</caption><!-- 表格行与单元格：align 控制对齐，colspan 合并列，rowspan 合并行 --><tr align="center" height="40"><td width="100">部门</td><td width="130"></td><td width="100">请假人</td><td width="130"></td><td width="80">日期</td><td width="260"> ______年 ____ 月 ____ 日</td></tr><!-- 省略中间行... --><tr height="140" ><td colspan="2"><pre>请假人签字：<br><br><br><br>          ________年____月____日</pre></td><td colspan="2"><pre>部门主管意见：<br><br><br><br>          ________年____月____日</pre></td><td colspan="2"><pre>批准人签字：<br><br><br><br>          ________年____月____日</pre></td></tr>
</table>

  • <table> 核心属性：
    • border：设置表格边框
    • cellspacing：单元格间距（0 为无缝）
    • colspan/rowspan：合并列 / 行，实现复杂布局
3. 个人简历表格模块

<!-- 个人简历表格 -->
<table width="60%" border="1" cellspacing="0"><caption><h1>个人简历</h1></caption><tr height="40" align="center"><td width='80' >姓名：</td><td width='120' ></td><td width='80' >性别：</td><td width='120'></td><td rowspan="4" ></td></tr><!-- 省略中间行... --><tr height="40" align="center"><td colspan="5">自我评价：</td></tr>
</table>

  • 简历表格设计：用 rowspan 合并单元格实现 “照片列” 跨多行，caption 设标题（搭配 <h1> 强调层级）

三、代码完整结构（含所有模块）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>综合示例</title>
</head>
<body><!-- 古诗 + 链接 --><pre>无题一去二三里，烟村四五家。楼台六七座，八九十枝花。</pre><hr/><a href="https://www.baidu.com/">点我到百度</a><a href="#">点我到无题诗</a><!-- 请假条表格 --><table width="80%" border="1"  cellspacing="0"><caption>请假条</caption><tr align="center" height="40"><td width="100">部门</td><td width="130"></td><td width="100">请假人</td><td width="130"></td><td width="80">日期</td><td width="260"> ______年 ____ 月 ____ 日</td></tr><tr align="center" height="40" ><td>请假时间</td><td colspan="5">________ 年 ____ 月 ____ 日 至 ______ 年 ____ 月 ____ 日</td></tr><tr align="center" height="40"><td>请假类别</td><td colspan="5" align="center">□事假  □病假  □婚假  □丧假  □产假  □工伤假  □其他</td></tr><tr height="90" align="center"><td>请假事由</td><td colspan="5"><p style="color: red;"">(离 XXX期间产生的一切安全问题有请假人自行承担，与XX无关)</p></td></tr><tr height="140" ><td colspan="2"><pre>请假人签字：<br><br><br><br>          ________年____月____日</pre></td><td colspan="2"><pre>部门主管意见：<br><br><br><br>          ________年____月____日</pre></td><td colspan="2"><pre>批准人签字：<br><br><br><br>          ________年____月____日</pre></td></tr></table><!-- 个人简历表格 --><table width="60%" border="1" cellspacing="0"><caption><h1>个人简历</h1></caption><tr height="40" align="center"><td width='80' >姓名：</td><td width='120' ></td><td width='80' >性别：</td><td width='120'></td><td rowspan="4" ></td></tr><tr height="40" align="center"><td>身高：</td><td></td><td>体重：</td><td></td></tr><tr height="40" align="center"><td>出生年月：</td><td></td><td>民族：</td><td></td></tr><tr height="40" align="center"><td>联系电话：</td><td></td><td>电子邮箱：</td><td></td></tr><tr height="40" align="center"><td>婚姻状况：</td><td></td><td>政治面貌</td><td colspan="2"></td></tr><tr height="40" align="center"><td>特长爱好：</td><td></td><td>健康状况：</td><td colspan="2"></td></tr><tr height="40" align="center"><td>联系地址：</td><td colspan="4"></td></tr><tr height="40" align="center"><td colspan="5">教育背景</td></tr><tr height="40" align="center"><td>毕业院校：</td><td></td><td>最高学历：</td><td colspan="2"></td></tr><tr height="40" align="center"><td>主修课程：</td><td colspan="4"></td></tr><tr height="40" align="center"><td>校园经历：</td><td colspan="4"></td></tr><tr height="40" align="center"><td colspan="5">工作经历</td></tr><tr height="40" align="center"><td>实践经验：</td><td colspan="4"></td></tr><tr height="40" align="center"><td>自我评价：</td><td colspan="4"></td></tr></table>
</body>
</html>

四、关键知识总结

标签 / 属性作用与特点典型场景
<pre>保留文本原始格式（换行、空格）诗歌、代码片段展示
<a>超链接，href 设跳转地址，target 控制打开方式导航、外部链接、锚点定位
<table>表格容器，colspan/rowspan 合并单元格请假条、简历、数据报表
style="color: red;"行内样式，快速设置文本颜色强调重要提示（如请假条免责声明）
caption表格标题，提升语义化表单、报表标题展示
http://www.xdnf.cn/news/17539.html

相关文章：

  • 【Kafka系列】第三篇｜ 在哪些场景下会选择使用 Kafka？
  • 自建Web应用防火墙(WAF)
  • React 19 通用 ECharts 组件
  • uni-app app端安卓和ios如何申请麦克风权限，唤起提醒弹框
  • 什么是网络准入控制系统？解析一款网络准入的详细功能
  • FPGA+护理：跨学科发展的探索（二）
  • 最短路问题从入门到负权最短路
  • 【算法专题训练】11、字符串中的变位词
  • “鱼书”深度学习进阶笔记（3）第四章
  • MLAG双活网络妙招：BGP + 静态VRRP实现智能负载均衡
  • （一）vscode搭建espidf环境
  • Linux线程——线程控制及理解
  • LLM大语言模型初步学习认识
  • day23｜前端学习三件套
  • 集成电路学习：什么是URDF Parser统一机器人描述格式解析器
  • 10种经典学习方法的指令化应用
  • 动态创建可变对象：Python类工厂函数深度解析
  • 【k近邻】Kd树的构造与最近邻搜索算法
  • 用户虚拟地址空间布局
  • JVM管理数据的方式
  • 剧本杀小程序系统开发：推动行业数字化转型新动力
  • Linux中DNS系统搭建与配置指南（配实验步骤与注释）
  • 在 .NET Core 5.0 中启用 Gzip 压缩 Response
  • Tricentis Tosca：现代软件测试的自动化利器
  • 企业级 IT 运维服务平台数据备份方案：基于 rsync 的自动化实现
  • AI生成代码时代的商业模式重构：从“软件即产品”到“价值即服务”
  • 云原生环境Prometheus企业级监控
  • Notepad++ 插件开发实战：从理念到落地的探索
  • 嵌入式第二十五天(基于Linux操作系统的编程-文件操作)
  • 大模型提示词工程实践：大语言模型文本转换实践