html 评论区创建

最新推荐文章于 2024-04-01 08:15:00 发布
最新推荐文章于 2024-04-01 08:15:00 发布
阅读量1.1w 收藏 25
点赞数 3
分类专栏： ____html html 菜鸟之路
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40788630/article/details/79465395
版权 
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>李佳的网页菜鸟之路</title>
 </head>
 <body><!-- form是指表单，也可以理解成一块区域  action属性指将表单提交的地址 method属性指提交方式 现在流行的为post以及get（post更为保密）-->
  <form action="#" method="post">
  评论：<br/> <!--clos指每行可以显示60个字符 rows指行数-->
  <textarea cols="60" rows="5">  评论时注意文明用语。
  </textarea><!--textarea指可以创建多行文本-->
  <br/><br/><!-- input指表单控件，type指向的是控件类型，例如下行中submit（中文意思为顺从）指提交按钮控件 value（中文意思为价值价格重要性）指控件上显示的名字-->
  <input type="submit" value="提交"/>
  </form>
 </body>
</html>

「已注销」
关注
  • 3
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用HTML怎样编写评论区,可爱的博客园样式之自定义“评论区”样式
weixin_34791959的博客
06-15 3115
# cute-cnblogs 评论区代码美化说明一些人可能比较喜欢个别区域的，这里是博客园评论区的样式代码。(PS：基于博客园主题“SimpleMemor”进行的样式修改，勾选禁用默认样式了，可能主题不同，class啥的也不同，不同的只能自己耐心改一下啦~)OωO表情是插件喔，github ，就是图片类型的需要js进行处理，因为发表评论的引入使用不一样，具体可以自行对比下官网与我引入的js，也可...
html评论区展开内容怎么写,基于JavaScript实现评论框展开和隐藏功能
weixin_30488255的博客
05-30 1177
1.效果图如下所示，点击评论会在对应的评论区域展开评论输入框，点击取消会取消对应的评论输入框2.html代码：需要引入jQuery.jsclass="nr-comment">class="nr-comment-con">class="nr-comment-nav">class="comment-number">493条评论class="comment-sort">切换...
js+css+html制作简易留言板
热门推荐
橘猫吃不胖的博客
11-29 6万+
js+css+html制作简易留言板1 案例说明2 编写HTML代码3 编写css代码4 编写JavaScript代码5 全部代码 1 案例说明 利用JavaScript、css以及html制作简易留言板，也可以看作是简易评论区。 要求在页面文本框中输入一些文字之后，点击“发布”按钮，就可以让输入的文字显示在下面，重新输入一些文字，再点击发布，就可以让新发布的内容显示在最上面。点击后面的删除，就可以删除已经发布的文字。 【案例分析】利用节点的创建、添加和删除相关知识完成一个简易的留言板功能。在页面中实现单击
网页评论区必不可少的一个 HTML 标签，你还记得么
最新发布
qq_30094821的博客
04-01 544
我们每天都在网页上填写信息、留下评论或者记录笔记。你有没有想过，这些文字是如何在网页上得以畅快输入与展示的呢？
一个漂亮的移动端评价页面
乌药ice
12-16 7028
源代码下载:一个漂亮的移动端评价页面 效果图: 这个水印影响效果了。 源代码下载:一个漂亮的移动端评价页面 文件结构图: HTML代码: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content=&q
jQuery-评论表格
谷伊阳的编程技术博客
06-25 679
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;评论回复页面&lt;/title&gt; &lt;meta chars
评论列表模板 html代码,组件案例-评论列表.html
weixin_30827827的博客
06-08 1599
Document评论人： {{ item.user }}{{ item.content }}评论人：评论内容：var commentBox = {data() {return {user: '',content: ''}},template: '#tmpl',methods: {postComment() { // 发表评论的方法// 分析：发表评论的业务逻辑// 1. 评论数据存到哪里去？？？ ...
uni-app实现点赞评论功能
10-15
同时，调用获取评论列表的接口，更新`item.community_on`数组，确保评论区显示最新数据。 总结起来，uni-app实现点赞评论功能主要涉及以下步骤： 1. 创建点赞和评论的UI元素，绑定相应的事件监听器。 2. 在事件监听...
jquery 新浪网易的评论块制作
10-29
在本文中，我们将探讨如何使用jQuery来创建类似新浪和网易的评论块，重点在于实现文本框内添加图片的功能。在传统的HTML中，`textarea`元素是不允许直接嵌入图片的，因此，为了实现这一功能，我们可以参考新浪的实现...
原生js实现回复评论功能
11-28
创建一个新的评论添加到评论列表里 功能4.回复里的点赞 判断我是否点了赞，做相应操作 功能5.回复或者删除 判断字符串回复还是删除，做相应操作 代码用了事件代理，还有三元运算判断，减少代码量 每行代码都有详细的...
利用HTML、CSS 实现带表情的评论框的制作教程
09-28
主要介绍HTML带表情的评论框，表情通过Json数据加载，可以根据自己的喜好改变表情。本评论框代码为HTML，CSS，JQ三个方面的代码，html的代码还是比较简单的，大家可以学习一下
评论区模板.zip
06-03
网页评论区模板，一个简简单单的网页评论区，写完评论可以清空评论
网站评价模块代码
03-20
网站的各种评价模块代码
Node.js实现用户评论社区功能（体验前后端开发的乐趣）
10-17
本教程将带领开发者体验前后端开发的乐趣，通过Node.js创建一个简单的用户评论社区。 首先，我们需要创建项目结构。在名为`comment-list`的文件夹中，设立`public`文件夹，用于存储客户端可以直接访问的资源，如CSS...
讲解WordPress中用于获取评论模板和搜索表单的PHP函数
10-23
总的来说，`comments_template()`和`get_search_form()`是WordPress开发中不可或缺的工具，它们帮助开发者轻松地控制和定制评论区和搜索功能。理解并灵活运用这两个函数，可以使你在创建WordPress主题时更加得心应手...
h5评论直接显示代码_2019-11-16 爬虫-qq音乐评论
weixin_36403956的博客
12-27 250
目标网址:https://y.qq.com/n/yqq/song/001qvvgF38HVc4.html#comment_boxqq音乐 周杰伦的说好不哭打开charles，刷新网页，复制评论在charles里查找，很容易找到评论接口https://c.y.qq.com/base/fcgi-bin/fcg_global_comment_h5.fcg?g_tk=160454710&login...
在html页面添加了评论和回复,14.问题详情页面以及添加评论
weixin_36249804的博客
06-10 1787
现在在首页我们已经可以看到展示的问题了，我们再设计一个问题的详情页，通过点击问题的标题进去，可以给问题添加评论或者回答。问题的详情页都使用一个名为'details.html'的模板，其网址我们设计成'/details//'的形式，这时候我们可以用到一开始提到过的url传参，编写对应的视图函数如下：@app.route('/details//')def details(question_id):qu...
网页实现的评论功能的代码
Strangewu的博客
10-17 1万+
实现一个评论功能的页面并能通过验证码验证 效果展示1 效果展示2 效果展示3 效果展示4 内容 名字 描述 主页面展示 main.html 文章部分与评论部分整体 主页面css main.css 修饰整个页面整体部分 评论功能整体CSS commentStyle.css 评论区大小，所处的位置等 评论后展示出来的CSS getSQLcomment.css 评论展示出来内容的位置，等 写评论过程中的js check,js 从六个中的一个头像，或网名随机产生一个，以及点击
HTML评论区页面实现
05-26
实现一个HTML评论区页面一般需要以下步骤： 1. 创建HTML结构 在HTML中，评论区可以使用`<div>`元素来包含所有的评论，并使用`<ul>`元素和`<li>`元素来分别表示评论列表和每条评论。此外，评论区还需要一个表单来允许用户输入评论。可以使用`<form>`元素来创建表单。 ```html <div class="comments"> <ul class="comment-list"> <li class="comment"> <div class="comment-body"> <p class="comment-author">John Doe</p> <p class="comment-content">This is a comment.</p> </div> </li> <!-- more comments... --> </ul> <form class="comment-form"> <h2>Leave a Comment</h2> <input type="text" name="author" placeholder="Name" required> <textarea name="content" placeholder="Comment" required></textarea> <button type="submit">Submit</button> </form> </div> ``` 2. 添加CSS样式 为了让评论区看起来更好，我们需要添加一些CSS样式。可以使用`<style>`元素在HTML文件中添加CSS样式，或将样式写入独立的CSS文件中并在HTML文件中引用。 ```css .comments { max-width: 600px; margin: 0 auto; } .comment-list { list-style-type: none; padding: 0; } .comment { margin-bottom: 20px; border: 1px solid #ccc; border-radius: 5px; padding: 10px; } .comment-author { font-weight: bold; } .comment-content { margin-top: 10px; } .comment-form { margin-top: 20px; } .comment-form h2 { margin-bottom: 10px; } .comment-form input, .comment-form textarea { display: block; width: 100%; margin-bottom: 10px; padding: 5px; border: 1px solid #ccc; border-radius: 5px; } .comment-form button[type="submit"] { padding: 5px 10px; background-color: #007bff; color: #fff; border: none; border-radius: 5px; cursor: pointer; } ``` 3. 实现JavaScript交互 为了使表单能够提交评论，需要使用JavaScript和服务器端代码来处理表单提交。在这里，我们可以使用AJAX技术来异步提交表单数据，以避免页面刷新。 ```js // 获取表单元素 var form = document.querySelector('.comment-form'); // 监听表单提交事件 form.addEventListener('submit', function(event) { event.preventDefault(); // 阻止表单默认提交行为 // 获取表单数据 var author = form.elements.author.value; var content = form.elements.content.value; // 发送POST请求 var xhr = new XMLHttpRequest(); xhr.open('POST', '/comment'); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.onload = function() { if (xhr.status === 200) { // 成功提交评论，刷新评论列表 fetchComments(); } else { alert('Failed to submit comment.'); } }; xhr.send(JSON.stringify({ author: author, content: content })); }); // 获取评论列表 function fetchComments() { var xhr = new XMLHttpRequest(); xhr.open('GET', '/comments'); xhr.onload = function() { if (xhr.status === 200) { // 成功获取评论，更新评论列表 var comments = JSON.parse(xhr.responseText); var commentList = document.querySelector('.comment-list'); commentList.innerHTML = ''; comments.forEach(function(comment) { var li = document.createElement('li'); li.classList.add('comment'); var div = document.createElement('div'); div.classList.add('comment-body'); var author = document.createElement('p'); author.classList.add('comment-author'); author.textContent = comment.author; var content = document.createElement('p'); content.classList.add('comment-content'); content.textContent = comment.content; div.appendChild(author); div.appendChild(content); li.appendChild(div); commentList.appendChild(li); }); } else { alert('Failed to fetch comments.'); } }; xhr.send(); } // 初始加载评论列表 fetchComments(); ``` 以上就是实现HTML评论区页面的基本步骤。当然，实际场景中还需要处理很多细节和安全性问题，例如输入验证、防止XSS攻击等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值