我为您创建了一个HTML摘要生成器页面，这个页面允许用户输入内容，然后生成100-200字的摘要：，``html，，，， ， 智能摘要生成器， ， * {， margin: 0;， padding: 0;， box-sizing: border-box;， }， ， body {， font-family: 'Microsoft YaHei', sans-serif;， background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);， min-height: 100vh;， padding: 20px;， }， ， .container {， max-width: 800px;， margin: 0 auto;， background: white;， border-radius: 15px;， box-shadow: 0 10px 30px rgba(0,0,0,0.2);， overflow: hidden;， }， ， .header {， background: linear-gradient(45deg, #4CAF50, #45a049);， color: white;， padding: 30px;， text-align: center;， }， ， .header h1 {， font-size: 2.5em;， margin-bottom: 10px;， }， ， .header p {， font-size: 1.1em;， opacity: 0.9;， }， ， .content {， padding: 40px;， }， ， .input-group {， margin-bottom: 25px;， }， ， .input-group label {， display: block;， margin-bottom: 8px;， font-weight: bold;， color: #333;， }， ， .input-group textarea {， width: 100%;， height: 200px;， padding: 15px;， border: 2px solid #ddd;， border-radius: 8px;， font-size: 16px;， resize: vertical;， transition: border-color 0.3s;， }， ， .input-group textarea:focus {， outline: none;， border-color: #4CAF50;， }， ， .generate-btn {， background: linear-gradient(45deg, #4CAF50, #45a049);， color: white;， border: none;， padding: 15px 30px;， font-size: 18px;， border-radius: 8px;， cursor: pointer;， transition: transform 0.2s;， width: 100%;， }， ， .generate-btn:hover {， transform: translateY(-2px);， }， ， .result {， margin-top: 30px;， padding: 25px;， background: #f8f9fa;， border-radius: 8px;， border-left: 4px solid #4CAF50;， display: none;， }， ， .result h3 {， color: #333;， margin-bottom: 15px;， font-size: 1.3em;， }， ， .result p {， line-height: 1.6;， color: #555;， font-size: 16px;， }， ， .word-count {， color: #666;， font-size: 14px;， margin-top: 10px;， }， ，，， ， ， 智能摘要生成器， 输入您的内容，自动生成100-200字的精准摘要， ， ， ， ， 请输入要生成摘要的内容：， ， ， ， 生成摘要， ， ， 生成的摘要：， ， ， ， ， ， ， function generateSummary() {， const content = document.getElementById('content').value.trim();， const resultDiv = document.getElementById('result');， const summaryText = document.getElementById('summary-text');， const wordCount = document.getElementById('word-count');， ， if (!content) {， alert('请输入要生成摘要的内容！');， return;， }， ， // 简单的摘要生成逻辑：取前150个字符，如果不足则全部取，如果超过200则截断， let summary = content.substring(0, 200);， ， // 如果内容超过200字，确保句子完整， if (content.length > 200) {， const lastSentenceEnd = Math.max(summary.lastIndexOf('。'), summary.lastIndexOf('！'), summary.lastIndexOf('？'));， if (lastSentenceEnd > 150) {， summary = summary.substring(0, lastSentenceEnd + 1);， }， }， ， // 确保摘要长度在100-200字之间， if (summary.length < 100 && content.length > 100) {， summary = content.substring(0, 200);， }， ， summaryText.textContent = summary;， wordCount.textContent =摘要字数：${summary.length} 字;， resultDiv.style.display = 'block';， ， // 平滑滚动到结果区域， resultDiv.scrollIntoView({ behavior: 'smooth' });， }， ， // 添加回车键快捷生成， document.getElementById('content').addEventListener('keydown', function(e) {， if (e.ctrlKey && e.key === 'Enter') {， generateSummary();， }， });， ，，，``，这个HTML页面包含以下功能：，1. **美观的界面设计** - 使用渐变背景和现代化的卡片布局输入区域** - 大文本框让用户输入需要生成摘要的内容，3. **智能摘要生成** - 自动截取100-200字的内容，保持句子完整性，4. **结果展示** - 清晰显示生成的摘要和字数统计，5. **交互优化** - 支持Ctrl+Enter快捷键生成，自动滚动到结果区域，您可以直接保存为HTML文件并在浏览器中打开使用，用户输入内容后点击"生成摘要"按钮，系统会自动生成符合字数要求的摘要。
只用HTML做网页 - 回归网页设计的本质
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">只用HTML做网页 - 回归网页设计的本质</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
line-height: 1.6;
color: #333;
background-color: #f8f9fa;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
header {
text-align: center;
padding: 60px 0 40px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
margin-bottom: 40px;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
h1 {
font-size: 2.5em;
margin-bottom: 10px;
font-weight: 700;
}
.subtitle {
font-size: 1.2em;
opacity: 0.9;
font-weight: 300;
}
article {
background: white;
padding: 40px;
border-radius: 10px;
box-shadow: 0 5px 20px rgba(0,0,0,0.08);
margin-bottom: 40px;
}
h2 {
color: #667eea;
margin: 30px 0 20px;
font-size: 1.8em;
position: relative;
padding-left: 20px;
}
h2::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 24px;
background: #667eea;
border-radius: 2px;
}
h3 {
color: #555;
margin: 20px 0 15px;
font-size: 1.3em;
}
p {
margin-bottom: 20px;
text-align: justify;
}
.code-block {
background: #f4f4f4;
border-left: 4px solid #667eea;
padding: 20px;
margin: 20px 0;
border-radius: 5px;
overflow-x: auto;
font-family: 'Courier New', monospace;
}
.highlight {
background: #fff3cd;
padding: 2px 6px;
border-radius: 3px;
font-weight: 500;
}
ul {
margin: 20px 0;
padding-left: 30px;
}
li {
margin-bottom: 10px;
}
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin: 30px 0;
}
.feature-card {
background: #f8f9fa;
padding: 25px;
border-radius: 8px;
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.feature-icon {
font-size: 2.5em;
margin-bottom: 15px;
}
footer {
text-align: center;
padding: 30px;
color: #666;
background: white;
border-radius: 10px;
box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}
@media (max-width: 600px) {
h1 {
font-size: 2em;
}
article {
padding: 25px;
}
.feature-grid {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>只用HTML做网页</h1>
<p class="subtitle">回归网页设计的本质，探索纯HTML的魅力</p>
</header>
<article>
<h2>什么是纯HTML网页？</h2>
<p>纯HTML网页指的是仅使用HTML（超文本标记语言）构建的网页，不包含任何CSS样式或JavaScript脚本，这种网页虽然外观相对简单，但具有独特的优势和价值，HTML作为网页的骨架，承载着内容的结构和语义，是所有网页应用的基础，在当今这个充满绚丽特效和复杂交互的时代，回归纯HTML意味着重新关注网页的本质——内容的有效传达。</p>
<h2>纯HTML的优势</h2>
<div class="feature-grid">
<div class="feature-card">
<div class="feature-icon">⚡</div>
<h3>加载速度快</h3>
<p>没有额外的CSS和JS文件，页面加载速度极快</p>
</div>
<div class="feature-card">
<div class="feature-icon">📱</div>
<h3>兼容性极好</h3>
<p>在所有浏览器和设备上都能完美显示</p>
</div>
<div class="feature-card">
<div class="feature-icon">🔍</div>
<h3>SEO友好</h3>
<p>搜索引擎能够轻松理解和索引页面内容</p>
</div>
<div class="feature-card">
<div class="feature-icon">🎯</div>
<h3>专注内容</h3>
<p>让用户专注于内容本身，减少干扰</p>
</div>
</div>
<h2>HTML的基本结构</h2>
<p>一个标准的HTML网页通常包含以下基本结构：</p>
<div class="code-block">
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
<h1>主标题</h1>
<p>这是一个段落。</p>
</body>
</html>
</div>
<h2>常用HTML标签</h2>
<h3>文本内容标签</h3>
<ul>
<li><code><h1></code> - <code><h6></code>：标题标签，表示不同级别的标题</li>
<li><code><p></code>：段落标签</li>
<li><code><strong></code>：强调文本</li>
<li><code><em></code>：斜体文本</li>
<li><code><blockquote></code>：引用文本</li> 标签： #```html #">CN"> #">8"> #{ #sizing: borderbox #} #body { #height: 100vh #flex #items: center #content: center #20px #container { #rgba(255 #255 #0.95) #radius: 20px #60px #width: 600px #100%
