<!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代码
本文讲解了如何正确地使用HTML中的iframe标签，并指出了一种错误的用法：即使用<iframe id="" src="javascript:false"/>来关闭iframe的方式是不正确的。正确的做法应该是使用完整的开始和结束标签，并在其中插入相应的内容。
扫一扫
339
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
