<a>标签的超链接前面会自动加上当前(网站)地址

当前(网站)地址是 fyh.com,在代码里写 <a> 标签时,会自动在链接前添加 fyh.com。

例如写如下代码 <a href="www.baidu.com">baidu</a>,在浏览器中点击链接会跳转至 fyh.com/www.baidu.com,而不是想要的 www.baidu.com。

解决方法:

1、href="www.baidu.com",超链接地址www.baidu.com前面要带上 http:// 或者 https://

2、如果不知道超链接前面是 http:// 还是 https://,则可以加 //(即://baidu.com),浏览器会自动判断是 http 还是 https

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>我的个人博客生成器</title> <style> /* 页面基础样式 */ body { font-family: 'Microsoft YaHei', Arial, sans-serif; margin: 0; padding: 20px; background-color: #f5f5f5; } /* 容器样式 - 左右布局 */ .container { display: flex; gap: 20px; max-width: 1200px; margin: 0 auto; } /* 输入区域样式 */ .input-area, .output-area { flex: 1; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } /* 文本区域样式 */ textarea { width: 100%; height: 300px; padding: 15px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; line-height: 1.5; resize: vertical; box-sizing: border-box; } /* 提交按钮样式 */ input[type="submit"] { background-color: #0077cc; color: white; padding: 12px 30px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; transition: background-color 0.3s; } input[type="submit"]:hover { background-color: #005fa3; } /* 预览iframe样式 */ iframe { width: 100%; height: 400px; border: 1px solid #ccc; border-radius: 4px; background: white; } /* 标签样式 */ .tag { display: inline-block; background-color: #e0e0e0; color: #555; padding: 4px 12px; margin: 2px; border-radius: 15px; font-size: 0.8em; text-decoration: none; } .tag:hover { background-color: #d0d0d0; } /* 详情展开样式 */ details { margin-top: 20px; background: #f9f9f9; padding: 15px; border-radius: 4px; } summary { cursor: pointer; font-weight: bold; color: #0077cc; } pre { background: #2d2d2d; color: #f8f8f2; padding: 15px; border-radius: 4px; overflow-x: auto; font-size: 12px; } h1 { text-align: center; color: #333; margin-bottom: 30px; } h3 { color: #555; border-bottom: 1px solid #eee; padding-bottom: 10px; } </style> </head> <body> <h1>🎨 我的个人博客生成器</h1> <div class="container"> <!-- 左侧输入区 --> <div class="input-area"> <form method="POST"> <h3>📝 请输入你的博客内容:</h3> <textarea name="blog_content" placeholder="在这里写下你的博客内容...例如: 今天发现了一个很棒的学习网站,https://www.php.net,这里有最权威的PHP文档。 还找到了一个不错的编程社区:https://stackoverflow.com 在这里可以找到各种编程问题的答案。 #PHP #编程学习 #Web开发 今天学习了字符串处理和正则表达式,感觉对文本处理有了新的认识。函数封装让代码更加模块化,易于维护。 期待后续学习更多有趣的知识!"><?php // 在文本区域中显示之前提交的内容,使用htmlspecialchars防止XSS攻击 if(isset($_POST['blog_content'])) { echo htmlspecialchars($_POST['blog_content']); } ?></textarea> <br><br> <input type="submit" value="🚀 生成博客!"> </form> </div> <!-- 右侧输出区 --> <div class="output-area"> <h3>👀 生成的博客预览:</h3> <?php /** * 任务1:将文本中的URL地址转换为可点击的HTML链接 * @param string $text 原始文本 * @return string 处理后的文本(包含HTML链接) */ function makeClickableLinks($text) { // 使用正则表达式匹配以http://或https://开头的URL // 正则表达式说明:/(https?:\/\/[^\s]+)/ // - `https?`:匹配 http 或 https(s?表示s出现0次或1次) // - `:\/\/`:匹配 :// // - `[^\s]+`:匹配一个或多个非空格的字符 $pattern = '/(https?:\/\/[^\s]+)/'; // 替换模式:将匹配到的URL用<a>标签包裹起来 // `$1` 是对正则中第一个括号内匹配到的内容的引用,即完整的URL $replacement = '<a href="$1" target="_blank" style="color: #0077cc; text-decoration: none;">$1</a>'; // 使用preg_replace函数执行正则替换 return preg_replace($pattern, $replacement, $text); } /** * 任务2:将文本中的标签(如#PHP)格式化为带样式的Span元素 * @param string $text 原始文本 * @return string 处理后的文本(包含格式化后的标签) */ function formatHashtags($text) { // 使用正则表达式匹配以#开头、后跟一个或多个字母/数字/下划线的标签 // 正则表达式说明:/#(\w+)/ // - `#`:匹配字符# // - `\w+`:匹配一个或多个字母、数字或下划线 $pattern = '/#(\w+)/'; // 替换模式:将匹配到的标签用<span>标签包裹,并添加一个CSS类`tag` // `$1` 是对正则中第一个括号内匹配到的内容的引用,即`#`后面的文字(如PHP) $replacement = '<span class="tag">#$1</span>'; // 使用preg_replace函数执行正则替换 return preg_replace($pattern, $replacement, $text); } /** * 任务3:将处理好的博客内容包装成一个完整的HTML页面 * @param string $content 已经过URL和标签处理的博客正文 * @return string 完整的HTML页面代码 */ function wrapBlogContent($content) { // 使用date函数获取当前日期,并格式化为"年-月-日"的形式 $currentDate = date("Y年m月d日"); // 使用nowdoc语法定义一个多行字符串,用于构建完整的HTML // 这种语法非常适合编写大段的、内嵌HTML的字符串 $html = <<<'HTML' <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>我的生成博客</title> <style> body { font-family: 'Microsoft YaHei', sans-serif; line-height: 1.6; padding: 40px; max-width: 800px; margin: 0 auto; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; } .blog-container { background: white; padding: 40px; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); } .blog-title { color: #333; border-bottom: 3px solid #667eea; padding-bottom: 15px; margin-bottom: 20px; } .blog-date { color: #666; font-size: 0.9em; margin-bottom: 30px; padding: 10px; background: #f8f9fa; border-radius: 5px; } .blog-content { margin-top: 20px; font-size: 16px; } .blog-content p { margin-bottom: 20px; } .tag { display: inline-block; background: linear-gradient(135deg, #667eea, #764ba2); color: white; padding: 5px 15px; margin: 5px; border-radius: 20px; font-size: 0.8em; font-weight: bold; } a { color: #667eea; text-decoration: none; font-weight: bold; } a:hover { text-decoration: underline; } </style> </head> <body> <div class="blog-container"> <h1 class="blog-title">✍️ 我的博客随笔</h1> <p class="blog-date">📅 发布日期: HTML; // 拼接日期 $html .= $currentDate . '</p>'; // 拼接内容 $html .= '<div class="blog-content">' . nl2br($content) . '</div>'; // 闭合标签 $html .= '</div></body></html>'; // 返回最终生成的完整HTML字符串 return $html; } // 检查是否是POST请求并且有博客内容 if ($_SERVER["REQUEST_METHOD"] == "POST" && !empty($_POST['blog_content'])) { // 获取原始博客内容 $originalContent = $_POST['blog_content']; echo "<h4>✅ 处理流程:</h4>"; echo "<ol>"; echo "<li>原始内容长度: " . strlen($originalContent) . " 字符</li>"; // !!!核心处理流程!!! // 步骤1:调用函数,转换URL为链接 $contentWithLinks = makeClickableLinks($originalContent); echo "<li>已识别并转换URL链接</li>"; // 步骤2:调用函数,格式化标签 $formattedContent = formatHashtags($contentWithLinks); echo "<li>已格式化标签</li>"; // 步骤3:调用函数,将最终内容包装成完整HTML页面 $finalBlogHTML = wrapBlogContent($formattedContent); echo "<li>已生成完整HTML页面</li>"; echo "</ol>"; // 在预览区域显示生成的博客 echo "<h4>🎯 博客预览:</h4>"; echo "<iframe srcdoc=\"" . htmlspecialchars($finalBlogHTML) . "\" title=\"博客预览\"></iframe>"; // 显示生成的HTML源代码,供调试学习 echo "<details>"; echo "<summary>🔍 查看生成的HTML源码</summary>"; echo "<pre>" . htmlspecialchars($finalBlogHTML) . "</pre>"; echo "</details>"; } elseif ($_SERVER["REQUEST_METHOD"] == "POST") { // 如果提交了表单但内容为空 echo "<div style='color: #d32f2f; background: #ffebee; padding: 15px; border-radius: 4px;'>"; echo "⚠️ 请输入博客内容后再点击生成按钮!"; echo "</div>"; } else { // 首次访问页面时的提示 echo "<div style='color: #666; text-align: center; padding: 40px;'>"; echo "<p>👆 请在左侧输入你的博客内容,然后点击生成按钮</p>"; echo "<p>✨ 系统会自动:</p>"; echo "<ul style='text-align: left; display: inline-block;'>"; echo "<li>将网址转换为可点击链接</li>"; echo "<li>格式化 #标签 为美观样式</li>"; echo "<li>生成完整的博客页面</li>"; echo "</ul>"; echo "</div>"; } ?> </div> </div> </body> </html>一、基于补充的“个人博客生成器”项目,执行进阶版任务,具体任务要求: 在原来“博客预览”的下方,新增一个“博客内容分析报告”区域。学生需要编写新的函数,实现以下四个核心统计功能: 统计基础信息:总字符数、总单词数、预计阅读时间。 统计标签数量:识别并统计文章中使用了多少个#标签。 统计链接数量:识别并统计文章中包含了多少个http/https链接。 关键词高亮:让用户输入一个自定义关键词(如“PHP”),并在原文中高亮显示它。 WEB页面样式不限; 二、任务要点: 1、创建统计函数:创建至少3个新的自定义函数来完成统计。 getBasicStats($text): 统计字符数、单词数,并计算阅读时间(假设每分钟阅读200个单词)。 countHashtags($text): 使用正则表达式统计并返回所有#标签的数量和列表。 countLinks($text): 使用正则表达式统计文本中http/https链接的数量。 2、实现关键词高亮:在左侧表单中新增一个文本输入框,用于让用户输入想要高亮的关键词。 编写一个 highlightKeyword($text, $keyword) 函数,使用字符串替换功能,将文中所有的关键词替换为 <mark style="background-color: yellow;">$keyword</mark>。 3、整合与显示: 在生成博客后,调用这些统计函数。 将统计结果以清晰、美观的格式显示在“博客预览”区域下方。 三、关键知识点提示: 字符串函数:strlen(), str_word_count(), str_ireplace() 正则表达式:preg_match_all() 这是完成统计的关键匹配步骤。 自定义函数:如何设计函数接收参数并返回结果。 表单处理:如何获取新增的输入框的值 ($_POST['keyword'])。输出修改后的完整php代码
最新发布
11-28
​ 不想看那么多分析的,只想了解大概原理的可直接跳转到目录二。 想直接拿 最终解决办法的,请跳到目录四。 一、前提背景 1.直接向后台传值删除的批量操作 在使用Thinkphp 工作时,会发现若想获取所有选中的id,并进行批量删除操作时,会使用以下代码: 在选中复选框checkbox后,点击delete删除按钮,向后台控制器Action传输ids,然后在后台循环执行已经写好了的SQL删除语句,删除成功后向前端返回值。 <div> //删除按钮 <li><a class="delete" href="__URL__/foreverdelete/navTabId/{$module}" target="selectedTodo" callback="navTabAjax" title="delete" warn="{$Think.lang.select_item}" postType="string"rel="ids"><span>{$Think.lang.del_item}</span></a></li> //显示的list表格 <table class="table" width="100%" layoutH="111"> <thead> <tr> <th width="5"><input type="checkbox" group="ids" class="checkboxCtrl"></th> <th width="5" orderField="item_id" <if condition="$_REQUEST._order eq 'item_id'">class="{$_REQUEST._sort}"</if>>{$Think.lang.id}</th> <th width="300">Name</th> </tr> </thead> <tbody> <volist id="vo" name="list"> <tr target="sid_node" rel="{$vo['item_id']}" style="height: 27px;"> <td><input name="ids" value="{$vo['item_id']}" type="checkbox"></td> <td>{$vo['item_id']}</td> <td title="{$vo['NOTE']}">{$vo['ITEM_NAME']}</td> </tr> </volist> </tbody> </table> </div> 2.执行原理 以上代码能成功执行的原理: 是<a> 标签定义超链接向后台foreverdelete方法传值, target 用于控制链接点击后的行为,获取到我们选中的 checkbox的id值; 最后将一切操作放到后台控制器中执行; callback是回调逻辑,用于操作成功后的响应 targert和 callback 都是自定义属性, target="selectedTodo" target 属性用于指定链接点击后操作的目标对象或作用域。在给定的代码中,target="selectedTodo" 表示该链接的操作将作用于一个名为 selectedTodo 的目标对象。这种机制通常用于与前端框架或库结合使用,例如 DWZ(一个基于 jQuery 的 UI 框架),用于实现特定的功能,如选中并删除多个条目。 在这种情况下,selectedTodo 是一个用于存储用户选择数据的变量或对象,当链接被点击时,这些数据会被传递给后端进行处理。该属性的值 selectedTodo 并不是标准 HTML 中定义的值,而是由前端框架或开发者自定义的标识符,用于触发特定的逻辑处理流程。 callback="navTabAjax" callback 属性用于指定链接点击后执行的回调函数。回调函数是一种在操作完成后执行的函数,通常用于处理异步操作的结果。在给定的代码中,callback="navTabAjax" 表示链接点击后会调用一个名为 navTabAjax 的回调函数。 该函数的作用包括:检查响应状态码是否为成功,重新加载指定的导航标签页(navTab),或关闭当前标签页等。通过 callback 属性,可以将链接的行为与特定的前端逻辑绑定在一起,从而实现更复杂的交互功能。 总结 3.缺陷 一切只能在后台进行固定操作,无法在页面进行操作时动态更改。 当我想实现批量更改数据操作:选中需要更改的->点击按钮->打开弹窗->输入我想要更改的值时->提交更改时。 target需要更改为 target=“dialog”,用于打开对应弹窗。但此时就会发现,缺少了selectedTodo,就无法获取到选中的checkbox的id,传值到后台。 二、通过按钮打开弹窗,并获取选中的所有id,进行批量更改操作 1.解决思路 经过尝试和思考,我最终选择通过点击时,调用JS方法拼接好id,然后向后台方法传值写入数据库中,mass_change方法从数据库获取ids,最后传给弹窗的方法。 <div> <li><a class="assign" href="__URL__/mass_change/navTabId/{$module}" target="dialog" mask="true" warn="{$Think.lang.select_item}" rel="mass_change" width="800" height="300" onclick="sendids()"><span>批量</span></a></li> </div> <script> function sendids(){ //得到chekbox对象 var checkbox = document.getElementsByName("ids"); var id =""; //当选中时,拿到它的value值,并拼起来 //需要注意的是,这样拼出来的id字符串,是以 ","结尾的,所以在使用的时候,应先将 ","去掉,也可在if中做判断 ,当为最后一个时,拼的时候不加 "," for ( var i = 0; i < checkbox.length; i++) { if(checkbox[i].checked){ id = id + checkbox[i].value+","; } } $.ajax({ type: "GET", url: '__URL__/get_mass/ids/'+id, dataType: "json", async: true, }); } </script> 2.注意事项 a按钮里传值的方法,和JS里传值的方法不能是同一个方法。 如果都是mass_change,这样子会出现,明明传输到ids了,但是你始终拿不到ids的值的情况。 原因在于:         点击按钮后,先是sendids()向mass_change 传入了ids值,你的后台显示能成功打印。                 然后 a标签打开弹窗又重新调用了一次mass_change 。 相当于执行了两次mass_change方法,所以第一次传输的ids值,自然无法在第二次调用时使用。 打开的弹窗就无法获取到传输的ids了。 3.实现方法 如前面所说,既然会执行两次mass_change()方法,导致无法正常获取ids,那我就用写两个方法:  先在js里向另一个自定义后台方法get_mass()传值,在get_mass方法里,将ids上传到数据表A中存储。 public function get_mass($ids){ $ids = rtrim($ids,','); //这里因为我的版本过老,我删除了设置数据库的sql ,大家需要自己补上 $sql_table = "INSERT INTO mass_change_table (id,ids) VALUES('NULL','$ids')"; $result = mysql_query($sql_table,$db); if($result){ $this->success('success'); }else{ $this->error("请重试"); } } 然后在从 mass_change里通过sql数据库,获取已经上传好的ids值,最后传值到弹窗中。 public function mass_change () { //这里因为我的版本过老,我删除了设置数据库的sql ,大家需要自己补上 $get_ids_sql = mysql_query("SELECT ids from mass_change_table order by id desc limit 1",$db); $res = mysql_fetch_array($get_ids_sql, MYSQL_ASSOC); //获取ids $ids = $res['ids']; $this->assign('ids',$ids); //需要的ids if ($this->_get("navTabId")) { //导航值 $this->assign("navTabId",$this->_get("navTabId")); } $this->display(); } 然后最后在弹窗里提交,到mass_update()里, 在mass_update()里 获取已经填好的表单值(其中就有ids),进行批量更改操作。 这样整体就能实现到通过按钮打开弹窗,并获取选中的所有id,进行批量更改的操作了。 三、思路解释 为什么我会选择用三个方法, 第一个方法上传ids到数据库,第二个方法获取ids传递到弹窗,第三个方法进行批量sql操作呢? 原因在于,我发现当我想使用cookie或$SESSION 存储传输过来的ids,然后再让mass_change通过cookie或$SESSION拿值时,一直拿不到,都是null。个人猜测可能和两次调用导致的。(若有懂的大哥们,可在评论区指出我的错误) 所以最后我只能使用上传数据库,用数据库保存ids数据,在从数据库获取ids数据的笨方法。 四、优化后的最终解决方法(效率最高最有效) 从前面的注意事项就可看出,其实只要我们能解决掉以下问题: (因为执行了两次mass_change方法,所以第一次传输的ids值,自然无法在第二次调用时使用。 打开的弹窗就无法获取到传输的ids了。) 就可以最有效的实现通过按钮打开弹窗,并获取选中的所有id,进行批量更改操作。 顺着这个思路走,我尝试不通过使用a标签里的DWZ方法 targer=‘dialog’ 来打开弹窗,而是直接使用 sendids()的JS方法来调用DWZ的弹窗。 这样就只会调用一次mass_change()方法,可以直接在第一次就把拼接到的is传输到后台控制器中,直接获取id,不需要在使用目录二里的笨方法,写到数据库上,能有效提高效率和响应速度。 1.优化后的前端HTML代码 <div> <li><a class="assign" href="javascript:void(0):" onclick="sendids()"><span>批量更改</span></a></li> </div> <script> function sendids(){ //得到chekbox对象 var checkbox = document.getElementsByName("ids"); var id =""; //当选中时,拿到它的value值,并拼起来 //需要注意的是,这样拼出来的id字符串,是以 ","结尾的,所以在使用的时候,应先将 ","去掉,也可在if中做判断 ,当为最后一个时,拼的时候不加 "," for ( var i = 0; i < checkbox.length; i++) { if(checkbox[i].checked){ id = id + checkbox[i].value+","; } } // 判断是否为空 if (!id) { alert("请至少选择一个项目"); return ; // 停止函数执行 } // 手动打开弹窗(使用 DWZ 的方式) 并传输拼接好的id $.pdialog.open("__URL__/mass_change/ids/"+id+"/navTabId/{$module}", "mass_change", "批量更改QR", { width: 600, height: 400, mask: true }); return false; // 阻止DWZ默认行为 } </script> 2.优化后的后端代码 public function mass_change () { $ids = rtrim($_REQUEST['ids'],','); $this->assign('ids',$ids); //传给mass_change页面 if ($this->_get("navTabId")) { $this->assign("navTabId",$this->_get("navTabId")); } $this->display(); } public function mc_update(){ $x= trim($_POST['你想传输过来的字段名']); // 看你自己要传什么数据 // 使用 explode 函数将字符串按逗号分割为数组,使用 implode 函数将数组重新组合为字符串,最后在前后加上引号。 $ids = "'" . implode("','", explode(",", $_POST['ids'])) . "'"; $dbname = C("数据库名"); $db=mysql_connect(C("DB_HOST"), C("DB_USER"), C("DB_PWD")) or die("Can not connect mysql database." . mysql_error()); MySQL_query("SET NAMES 'utf8'"); mysql_select_db($dbname,$db) or die("Could not select database"); $result = mysql_query("update语句,直接使用 in 来批量更改,不需要用循环语句",$db); if($result){ $this->success (L("operation_success")); }else{ $this->error('Error'); } } 若对你有帮助,请帮忙点赞收藏,感谢! ​请根据已编辑的文章内容,生成文章摘要
08-26
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值