我没有HTML经验，这段代码是从其他人那里得到的
我正在尝试使用YAML在HTML中创建一个Trello风格的任务和信息列表来存储数据。到目前为止，当内容部分只有一个项目时，它可以很好地工作，但一旦我尝试向内容添加项目列表，它只会在一行中显示每个项目。
这是页面本身的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- CHANGE DESCRIPTION/TITLE HERE -->
<meta name="description" content="AnimeKing314's kanban board." />
<title>Tasks</title>
<link rel="icon" type="image/png" href="../assets/favicon.png" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.css" />
<style>
@import url(https://fonts.googleapis.com/css2?family=Poppins&family=Work+Sans&display=swap);html{font-size:18px;font-family:Poppins,sans-serif}body{background:#fafafa;color:#121212}main{margin-bottom:3rem}h1,h2,h3,h4{font-family:'Work Sans',sans-serif;text-align:center}section{overflow:auto hidden;white-space:nowrap}h2{border-top:1px solid #111;border-bottom:1px solid #111;padding:.5rem 0;margin:.5rem 0}section{margin-bottom:1rem;text-align:center}section>div{height:500px;width:300px;height:100%;display:inline-block;margin:.5em 1em;background:#eee;box-shadow:0 0 4px #888;padding:1em;border-radius:4px}h3{border-bottom:1px solid #111;padding-bottom:.5em;margin-bottom:.5em}article{height:500px;overflow:hidden auto;white-space:normal}article div.card{margin:.3rem;padding:.3rem;background:#fafafa;box-shadow:0 0 2px #888;border:1px solid #aaa;border-radius:4px}article div.card h4{font-size:1rem;font-weight:700;text-align:left;margin:0}article div.card p{font-size:.8rem;margin:.5em 0;text-align:left}#overlay{text-align:center;position:fixed;top:0;bottom:0;left:0;right:0;padding:5em;background-color:#fafafa}#nsfw-confirm{display:inline-block;background:#d100d1;color:#fff;font-weight:700;padding:.2em 1em;cursor:pointer;margin-top:2em;box-shadow:0 0 4px #888}#nsfw-confirm:hover{text-decoration:none;background-color:purple;box-shadow:0 0 2px #888}
</style>
</head>
<body>
<!-- CHANGE HEADING HERE -->
<h1>Parallel Worlds of Lust Task Management</h1>
<main>
<section id="tasks">
<h2>Tasks</h2>
<div id="todo">
<h3>To Do</h3>
<article></article>
</div>
<div id="doing">
<h3>Doing</h3>
<article></article>
</div>
<div id="done">
<h3>Done</h3>
<article></article>
</div>
<div id="on-hold">
<h3>On Hold</h3>
<article></article>
</div>
</section>
<section id="other">
<h2>Other</h2>
<div id="universe-list">
<h3>Universe List</h3>
<article></article>
</div>
</section>
</main>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js" data-cfasync="false"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/nodeca/js-yaml/dist/js-yaml.min.js"></script>
<script type="text/javascript">
!function(){
"use strict";
$(document).on(":loaded",function(e){
Object.keys(e.tasks).forEach(function(t){
var n,a=e.tasks[t];a&&a.length&&$((n=t,n+" article")).append(a.map(function(e){
return t=e.title,n=e.content,$(document.createElement("div")).addClass("card").append([$(document.createElement("h4")).append(t),$(document.createElement("p")).append(n)]);var t,n
}))
})
})
}();
</script>
<script type="text/javascript">
!function(){
"use strict";
$(function(){
$.ajax("tasks.txt",{
dataType:"text",success:function(t){
$(document).trigger({
type:":loaded",tasks:jsyaml.load(t)
})
}
})
})
}();
</script>
</body>
</html>
这是YAML文档(用于结构(：
"#todo":
- title: Art
content: Make art for all intro scenes.
- title: Setup Code
content: Adding all the necessary background code. Still left is Cheat menu, Sandbox screens.
"#doing":
- title: Character Models
content: Find/make koikatsu character models for all intro characters.
- title: Script Intro
content: Complete the intro of the story (up to start of sandbox).
"#done":
"#on-hold":
"#universe-list":
- title: Pokemon
content:
- Misty
- title: DoA
content:
- Kasumi
- title: Gate, Thus the JSDF Fought There
content:
- Rory Mercury
- title: Railgun
content:
- Misaka
- Misaki
- Uiharu
- Kuroko
- Saten
- title: Main Universe
content:
- MC
- Little Sister
- Mother
- Jane
- Emma
- Tom
- title: Edge Universe
content:
- Quest Giving Girl, Name TBD
问题出现在宇宙列表中。而不是显示为(例如(：
Railgun
- 三坂
- Misaki
- 等等
显示为：
Railgun
MisakaMisakietc
我发现我可以向yaml文档的内容添加html标记。类似这样的东西：
- title: Main Universe
content:
- <li>MC</li>
- <li>Little Sister</li>
- <li>Mother</li>