定义知识网络的节点和边
知识网络构建
通过python代码自动生成知识网络
用pyvis库生成可点击、可缩放的网页图谱，现场展示时直接打开 HTML 文件即可互动
pip install networkx pyvis
示例代码如下
from pyvis.network import Network
nodes = {
"HTML5+CSS3网页设计": "核心课程",
"页面结构设计": "一级模块",
"模块一：HTML5初探": "二级模块",
"任务1：HTML5的基础知识": "任务",
"HTML5概述": "知识点",
"HTML5文档基本结构": "知识点",
"任务2：HTML5语法与编写规范": "任务",
"HTML5基本语法": "知识点",
"任务3：HTML5文本级标签应用": "任务",
"文本级标签": "知识点",
"任务4：页面中的图像插入与设置": "任务",
"图像标记格式与参数设置": "知识点",
"任务5：页面中的超链接的创建": "任务",
"超链接的设置": "知识点",
"模块二：使用HTML元素规划页面结构": "二级模块",
"任务6：应用无序列表呈现页面信息": "任务",
"无序列表": "知识点",
"任务7：应用定义列表呈现页面信息": "任务",
"定义列表": "知识点",
"任务8：应用有序列表呈现页面信息": "任务",
"有序列表": "知识点",
"任务9：应用语义化标签优化页面结构": "任务",
"HTML5语义标签": "知识点",
"页面元素修饰": "一级模块",
"模块三：CSS基础选择器设置元素样式": "二级模块",
"任务10：CSS基础认知": "任务",
"CSS应用基础": "知识点",
"任务11：应用CSS标记选择器设置元素样式": "任务",
"标记选择器": "知识点",
"任务12：应用CSS类选择器设置元素样式": "任务",
"类选择器": "知识点",
"任务13：应用CSS属性选择器设置元素样式": "任务",
"属性选择器": "知识点",
"模块四：CSS层叠特性与应用": "二级模块",
"任务14：CSS层叠特性与继承性探秘": "任务",
"CSS层叠性与继承性": "知识点",
"任务15：CSS优先级应用实践": "任务",
"CSS优先级": "知识点",
"模块五：CSS新增选择器应用实践": "二级模块",
"任务16：CSS属性选择器与关系选择器应用实践": "任务",
"属性选择器与关系选择器": "知识点",
"任务17：子代选择器的应用实践": "任务",
"子代选择器": "知识点",
"任务18：伪类选择器的应用实践": "任务",
"伪类与伪元素选择器": "知识点",
"任务19：链接伪类的应用实践": "任务",
"链接伪类": "知识点",
"页面的布局": "一级模块",
"模块六：表格的应用实践": "二级模块",
"任务20：表格绘制": "任务",
"表格的基本结构": "知识点",
"任务21：表格样式设置": "任务",
"表格重生": "知识点",
"模块七：认识盒子模型": "二级模块",
"任务22：元素盒模型基础认知": "任务",
"盒模型的概念与结构": "知识点",
"任务23：元素盒模型边距属性设置": "任务",
"盒子模型边距属性": "知识点",
"任务24：元素盒模型边框属性设置": "任务",
"盒子的边框属性": "知识点",
"任务25：元素盒模型大小控制": "任务",
"盒模型的大小控制属性": "知识点",
"任务26：元素盒模型背景颜色设置": "任务",
"盒模型背景设置": "知识点",
"任务27：元素盒模型背景图像的插入与设置": "任务",
"背景图像的插入与设置": "知识点",
"任务28：盒模型背景图像位置控制": "任务",
"背景图像位置控制": "知识点",
"模块八：元素浮动技术的布局应用": "二级模块",
"任务29：元素浮动设置": "任务",
"元素浮动": "知识点",
"模块九：页面元素的精确定位": "二级模块",
"任务30：元素相对定位技术应用与实践": "任务",
"相对定位": "知识点",
"任务31：元素绝对定位技术应用与实践": "任务",
"绝对定位": "知识点",
"任务32：元素固定定位技术应用与实践": "任务",
"固定定位": "知识点",
"页面中的数据采集": "一级模块",
"模块十：表单的应用": "二级模块",
"任务33：Input表单元素设置": "任务",
"表单的控件与属性": "知识点",
"任务34：其他表单元素设置": "任务",
"input元素及原理": "知识点",
"页面的多媒体特效制作": "一级模块",
"模块十一：HTML5多媒体技术应用": "二级模块",
"任务35：音频插入与控制": "任务",
"音频插入与控制": "知识点",
"任务36：视频插入与控制": "任务",
"视频插入与设置": "知识点",
"模块十二：CSS3动画制作应用与实践": "二级模块",
"任务37：过渡技术应用与实践": "任务",
"过渡的原理与设置": "知识点",
"任务38：元素2D变换技术应用与实践": "任务",
"2D变换": "知识点",
"任务39：元素3D变换技术应用与实践": "任务",
"3D变换": "知识点",
"任务40：关键帧动画制作技术应用与实践": "任务",
"关键帧的原理与设置": "知识点",
"响应式页面设计": "一级模块",
"模块十三：响应式布局应用与实践": "二级模块",
"任务41：视口应用与实践": "任务",
"视口": "知识点",
"任务42：媒体查询应用与实践": "任务",
"媒体查询": "知识点",
"任务43：百分比布局应用与实践": "任务",
"百分比布局原理与设置": "知识点",
"任务44：弹性布局应用与实践": "任务",
"弹性布局原理与设置": "知识点"
}
edges = [
("HTML5+CSS3网页设计", "页面结构设计"),
("HTML5+CSS3网页设计", "页面元素修饰"),
("HTML5+CSS3网页设计", "页面的布局"),
("HTML5+CSS3网页设计", "页面中的数据采集"),
("HTML5+CSS3网页设计", "页面的多媒体特效制作"),
("HTML5+CSS3网页设计", "响应式页面设计"),
("页面结构设计", "模块一：HTML5初探"),
("页面结构设计", "模块二：使用HTML元素规划页面结构"),
("模块一：HTML5初探", "任务1：HTML5的基础知识"),
("模块一：HTML5初探", "任务2：HTML5语法与编写规范"),
("模块一：HTML5初探", "任务3：HTML5文本级标签应用"),
("模块一：HTML5初探", "任务4：页面中的图像插入与设置"),
("模块一：HTML5初探", "任务5：页面中的超链接的创建"),
("任务1：HTML5的基础知识", "HTML5概述"),
("任务1：HTML5的基础知识", "HTML5文档基本结构"),
("任务2：HTML5语法与编写规范", "HTML5基本语法"),
("任务3：HTML5文本级标签应用", "文本级标签"),
("任务4：页面中的图像插入与设置", "图像标记格式与参数设置"),
("任务5：页面中的超链接的创建", "超链接的设置"),
("模块二：使用HTML元素规划页面结构", "任务6：应用无序列表呈现页面信息"),
("模块二：使用HTML元素规划页面结构", "任务7：应用定义列表呈现页面信息"),
("模块二：使用HTML元素规划页面结构", "任务8：应用有序列表呈现页面信息"),
("模块二：使用HTML元素规划页面结构", "任务9：应用语义化标签优化页面结构"),
("任务6：应用无序列表呈现页面信息", "无序列表"),
("任务7：应用定义列表呈现页面信息", "定义列表"),
("任务8：应用有序列表呈现页面信息", "有序列表"),
("任务9：应用语义化标签优化页面结构", "HTML5语义标签"),
("页面元素修饰", "模块三：CSS基础选择器设置元素样式"),
("页面元素修饰", "模块四：CSS层叠特性与应用"),
("页面元素修饰", "模块五：CSS新增选择器应用实践"),
("模块三：CSS基础选择器设置元素样式", "任务10：CSS基础认知"),
("模块三：CSS基础选择器设置元素样式", "任务11：应用CSS标记选择器设置元素样式"),
("模块三：CSS基础选择器设置元素样式", "任务12：应用CSS类选择器设置元素样式"),
("模块三：CSS基础选择器设置元素样式", "任务13：应用CSS属性选择器设置元素样式"),
("任务10：CSS基础认知", "CSS应用基础"),
("任务11：应用CSS标记选择器设置元素样式", "标记选择器"),
("任务12：应用CSS类选择器设置元素样式", "类选择器"),
("任务13：应用CSS属性选择器设置元素样式", "属性选择器"),
("模块四：CSS层叠特性与应用", "任务14：CSS层叠特性与继承性探秘"),
("模块四：CSS层叠特性与应用", "任务15：CSS优先级应用实践"),
("任务14：CSS层叠特性与继承性探秘", "CSS层叠性与继承性"),
("任务15：CSS优先级应用实践", "CSS优先级"),
("模块五：CSS新增选择器应用实践", "任务16：CSS属性选择器与关系选择器应用实践"),
("模块五：CSS新增选择器应用实践", "任务17：子代选择器的应用实践"),
("模块五：CSS新增选择器应用实践", "任务18：伪类选择器的应用实践"),
("模块五：CSS新增选择器应用实践", "任务19：链接伪类的应用实践"),
("任务16：CSS属性选择器与关系选择器应用实践", "属性选择器与关系选择器"),
("任务17：子代选择器的应用实践", "子代选择器"),
("任务18：伪类选择器的应用实践", "伪类与伪元素选择器"),
("任务19：链接伪类的应用实践", "链接伪类"),
("页面的布局", "模块六：表格的应用实践"),
("页面的布局", "模块七：认识盒子模型"),
("页面的布局", "模块八：元素浮动技术的布局应用"),
("页面的布局", "模块九：页面元素的精确定位"),
("模块六：表格的应用实践", "任务20：表格绘制"),
("模块六：表格的应用实践", "任务21：表格样式设置"),
("任务20：表格绘制", "表格的基本结构"),
("任务21：表格样式设置", "表格重生"),
("模块七：认识盒子模型", "任务22：元素盒模型基础认知"),
("模块七：认识盒子模型", "任务23：元素盒模型边距属性设置"),
("模块七：认识盒子模型", "任务24：元素盒模型边框属性设置"),
("模块七：认识盒子模型", "任务25：元素盒模型大小控制"),
("模块七：认识盒子模型", "任务26：元素盒模型背景颜色设置"),
("模块七：认识盒子模型", "任务27：元素盒模型背景图像的插入与设置"),
("模块七：认识盒子模型", "任务28：盒模型背景图像位置控制"),
("任务22：元素盒模型基础认知", "盒模型的概念与结构"),
("任务23：元素盒模型边距属性设置", "盒子模型边距属性"),
("任务24：元素盒模型边框属性设置", "盒子的边框属性"),
("任务25：元素盒模型大小控制", "盒模型的大小控制属性"),
("任务26：元素盒模型背景颜色设置", "盒模型背景设置"),
("任务27：元素盒模型背景图像的插入与设置", "背景图像的插入与设置"),
("任务28：盒模型背景图像位置控制", "背景图像位置控制"),
("模块八：元素浮动技术的布局应用", "任务29：元素浮动设置"),
("任务29：元素浮动设置", "元素浮动"),
("模块九：页面元素的精确定位", "任务30：元素相对定位技术应用与实践"),
("模块九：页面元素的精确定位", "任务31：元素绝对定位技术应用与实践"),
("模块九：页面元素的精确定位", "任务32：元素固定定位技术应用与实践"),
("任务30：元素相对定位技术应用与实践", "相对定位"),
("任务31：元素绝对定位技术应用与实践", "绝对定位"),
("任务32：元素固定定位技术应用与实践", "固定定位"),
("页面中的数据采集", "模块十：表单的应用"),
("模块十：表单的应用", "任务33：Input表单元素设置"),
("模块十：表单的应用", "任务34：其他表单元素设置"),
("任务33：Input表单元素设置", "表单的控件与属性"),
("任务34：其他表单元素设置", "input元素及原理"),
("页面的多媒体特效制作", "模块十一：HTML5多媒体技术应用"),
("页面的多媒体特效制作", "模块十二：CSS3动画制作应用与实践"),
("模块十一：HTML5多媒体技术应用", "任务35：音频插入与控制"),
("模块十一：HTML5多媒体技术应用", "任务36：视频插入与控制"),
("任务35：音频插入与控制", "音频插入与控制"),
("任务36：视频插入与控制", "视频插入与设置"),
("模块十二：CSS3动画制作应用与实践", "任务37：过渡技术应用与实践"),
("模块十二：CSS3动画制作应用与实践", "任务38：元素2D变换技术应用与实践"),
("模块十二：CSS3动画制作应用与实践", "任务39：元素3D变换技术应用与实践"),
("模块十二：CSS3动画制作应用与实践", "任务40：关键帧动画制作技术应用与实践"),
("任务37：过渡技术应用与实践", "过渡的原理与设置"),
("任务38：元素2D变换技术应用与实践", "2D变换"),
("任务39：元素3D变换技术应用与实践", "3D变换"),
("任务40：关键帧动画制作技术应用与实践", "关键帧的原理与设置"),
("响应式页面设计", "模块十三：响应式布局应用与实践"),
("模块十三：响应式布局应用与实践", "任务41：视口应用与实践"),
("模块十三：响应式布局应用与实践", "任务42：媒体查询应用与实践"),
("模块十三：响应式布局应用与实践", "任务43：百分比布局应用与实践"),
("模块十三：响应式布局应用与实践", "任务44：弹性布局应用与实践"),
("任务41：视口应用与实践", "视口"),
("任务42：媒体查询应用与实践", "媒体查询"),
("任务43：百分比布局应用与实践", "百分比布局原理与设置"),
("任务44：弹性布局应用与实践", "弹性布局原理与设置")
]
# 初始化知识网络
net = Network(height="800px", width="100%", bgcolor="#f5f5f5", font_color="black")
# 节点颜色映射
color_map = {
"核心课程": "#3498db",
"一级模块": "#2ecc71",
"二级模块": "#e74c3c",
"任务": "#f39c12",
"知识点": "#9b59b6"
}
# 添加节点
for node, category in nodes.items():
net.add_node(node, color=color_map[category], size=25 if category == "知识点" else 30)
# 添加边
for start, end in edges:
net.add_edge(start, end, width=1)
# 显示物理引擎控制按钮（可调整节点布局）
net.show_buttons(filter_=["physics"])
# 导出为HTML文件
net.write_html("html5_css3_knowledge_network.html")