段落一：
实现留言和回复的页面需要以下基本的组成部分：一个留言框、一个留言列表、一个回复按钮和回复表单。接下来我们将一个一个地介绍如何设计和编写这些组件的HTML和CSS代码。首先，我们来编写HTML代码，这是一个简单的页面布局，以便我们可以在其上工作。
留言板
发表留言
留言列表
在这段代码中，我们首先创建了一个标题（h4）和两个段落（p），一个用于发表留言，而另一个用于显示留言列表。接下来，我们创建了一个表单，用于输入留言消息和提交按钮。表单的提交按钮将触发一个事件，我们将在后面介绍。最后，我们创建了一个无序列表作为留言列表的容器。
段落二：
下一步，我们将编写CSS代码来美化留言板。这是一个非常简单的样式表，可以使所有元素的布局看起来不那么杂乱无章。
pre class="brush:css;toolbar:false">
form {
display: block;
margin-top: 10px;
}
textarea {
display: block;
margin-bottom: 10px;
}
#messages {
margin-top: 20px;
list-style: none;
padding: 0;
}
li {
margin-bottom: 10px;
border: 1px solid #CCC;
padding: 10px;
}
在这些CSS规则中，我们给表单和textarea元素添加了一些样式，以使其看起来更舒适。另外，我们将留言列表与主内容区域进行了一些间距调整，为所有条目添加了边框和内边距，以使它们彼此分开。
段落三：
一旦所有元素呈现在页面上并且有了样式，我们可以开始编写JavaScript代码。以下是一个简单的代码，可以在提交留言时将其添加到留言列表中。
pre class="brush:javascript;toolbar:false">
var messageList = document.getElementById('messages');
function addMessage(text) {
var message = document.createElement('li');
message.textContent = text;
messageList.appendChild(message);
}
document.querySelector('form').addEventListener('submit', function(event) {
event.preventDefault();
var messageField = event.target.querySelector('textarea');
var messageText = messageField.value.trim();
if (messageText) {
addMessage(messageText);
messageField.value = '';
}
});
在这个JavaScript代码片段中，我们需要在页面中找到留言列表（通过ID）和表单。然后我们添加一个名为addMessage的函数，在其中创建一个新的li元素，将文本添加到其中并将其附加到留言列表中。最后，我们通过监听form的submit事件来处理在提交留言时的逻辑。在这个事件的处理程序中，我们首先防止提交表单并且获取textarea元素中的文本。然后，我们检查文本是否存在并且调用addMessage函数。最后，我们清空textarea元素。
段落四：
最后，我们需要创建一个回复表单和回复按钮，以使用户可以回复单个留言。以下是HTML代码和JavaScript代码，可以实现此功能。
回复
在HTML中，我们再次使用一个简单的表单来输入回复消息。现在我们需要更新我们的JavaScript代码，以便在单击回复按钮时切换回复表单，并将焦点设置在文本框中。
pre class="brush:javascript;toolbar:false">
var replyField = document.getElementsByName('reply')[0];
function replyToMessage(event) {
var messageItem = event.target.closest('li');
if (messageItem) {
if (replyField.parentNode === messageItem) {
collapseReply();
} else {
collapseReply();
messageItem.appendChild(replyField.parentNode);
replyField.focus();
}
}
}
function collapseReply() {
var replyParent = replyField.parentNode;
if (replyParent) {
replyParent.parentNode.insertBefore(replyField, replyParent.nextSibling);
replyField.value = '';
}
}
messageList.addEventListener('click', replyToMessage);
在这个更新的JavaScript代码片段中，我们将replyToMessage函数添加到messageList元素的click事件中。此函数使用事件的目标元素查找最近的li元素，并在其下方添加回复表单。如果回复表单当前位于此元素的下方，我们将折叠回复表单。否则，我们将移动回复表单，并将焦点设置到文本框中。最后，我们定义了另一个collapseReply函数，用于折叠回复表单。
综上所述，HTML5实现留言和回复的页面需要通过一系列的HTML、CSS和JavaScript代码构建所需的页面。此外，我们还需要一些服务器端逻辑（该逻辑不在本回答范围内）。我们首先定义了所需的HTML元素，然后对这些元素进行了一些基本的CSS样式设置。接下来，我们编写了JavaScript代码，以便在提交留言时将其添加到留言列表中，并且创建了一个回复表单，并在单击回复按钮时，切换回复表单，并将其添加到所选留言的下方。所有这些代码，一旦正确组合在一起，将会提供一个非常基本的留言板功能。
