HTML5是一種用于創建Web頁面和Web應用程序的標記語言。其中很實用的一個功能是創建評論區。下面我們以prettify樣式為例進行代碼實現。

<!-- 引入prettify樣式 -->
 <link  rel="stylesheet">
<!-- 引入jquery庫 -->
 <script src="http://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<!-- 引入prettify代碼高亮插件 -->
 <script src="http://cdn.bootcss.com/prettify/r298/prettify.min.js"></script>
<!-- 引入數據存儲插件 -->
 <script src="http://cdn.bootcss.com/store.js/1.3.17/store.min.js"></script>
<!-- 引入markdown解析插件 -->
 <script src="http://cdn.bootcss.com/markdown-it/7.0.0/markdown-it.min.js"></script>
<!-- html結構 --><div class="container">
<div id="comment"></div>
<form id="comment-form">
<textarea id="comment-textarea" placeholder="說點什么吧..."></textarea>
<button id="comment-button">提交評論</button>
</form>
 </div>
<!-- js -->
 <script>
$(function () {
// 加載數據
var data = store.get('comment-data');
if (data) {
$('#comment').html(data);
prettyPrint();
}
// 點擊提交按鈕
$('#comment-button').on('click', function () {
var comment = $('#comment-textarea').val();
if (comment !== '') {
// 將評論數據進行markdown解析和代碼高亮
var md = window.markdownit();
comment = md.render(comment);
comment = prettyPrintOne(comment);
// 更新數據
var oldData = $('#comment').html();
var newData = oldData + comment;
$('#comment').html(newData);
prettyPrint();
// 存儲數據
store.set('comment-data', newData);
// 清空輸入框
$('#comment-textarea').val('');
}
});
});
 </script>

以上代碼將創建出一個具有評論功能的HTML頁面。具體實現效果可以根據自己的需求進行調整。