当前位置：首页 > article >正文

五分钟快速学习优秀网站的HTML骨架布局设计

article 2025/3/5 1:03:24

一.编写多级过滤脚本，在控制台执行copy方法进行提取：

在这里插入图片描述

过滤脚本脚本

// 在浏览器F12的控制台里，直接执行以下脚本
copy(
  document.documentElement.outerHTML
    // 一级过滤：移除动态内容
    .replace(/<script\b[^>]*>[\s\S]*?<\/script>/gi, '')
    .replace(/<link[^>]+>/gi, '') 
    .replace(/<style\b[^>]*>[\s\S]*?<\/style>/gi, '')
    
    // 二级过滤：清理属性
    .replace(/ (class|style|data-[^=]+)="[^"]*"/gi, '') 
    .replace(/ (id|name|aria-\w+)="[^"]*"/gi, '')
    .replace(/<([a-z]+)( [^>]*)?>/gi, '<$1>') // 保留标签名
    
    // 三级过滤：移除非结构元素
    .replace(/<img[^>]+>/gi, '')
    .replace(/<svg[\s\S]*?<\/svg>/gi, '')
    .replace(/<picture[\s\S]*?<\/picture>/gi, '')
    .replace(/<canvas[\s\S]*?<\/canvas>/gi, '')
    
    // 四级过滤：压缩空白
    .replace(/\s+/g, ' ')
    .replace(/>\s+</g, '><')
);

各层级过滤详解

层级	过滤目标	正则表达式示例	作用说明
1	动态内容	`<script[^>]>[\s\S]?</script>`	移除所有脚本和样式表
2	非必要属性	`(class\|style)="[^"]*"`	保留纯标签无属性
3	媒体资源	`<img[^>]+>`	删除图片/SVG等二进制内容
4	结构冗余	`<!--.*?-->`	清除注释
5	空白压缩	`>\s+<` → `><`	最小化空白字符

高级优化技巧

智能标签保留

// 只保留结构性标签（div/section等），移除内容型标签
.replace(/<(?!\/?(div|section|header|footer|main|nav|ul|ol|li)|html|body)[^>]+>/gi, '')

DOM层级压缩

// 合并连续嵌套的div（常见结构冗余）
.replace(/<div>\s*<div>/g, '<div>')
.replace(/<\/div>\s*<\/div>/g, '</div>')

CSS选择器逆向标记

// 为关键元素添加注释标记（便于后续还原）
.replace(/<header>/g, '<!-- header-start --><header>')
.replace(/<\/header>/g, '</header><!-- header-end -->')

可视化结构提取工具

还可以使用Chrome浏览器内置的 Accessibility Tree 获取最简结构：

打开 Chrome 开发者工具 (F12)
切换到 Elements 面板
右键点击 <html> 标签 → Copy → Copy accessibility tree
获得纯文本结构：

Document
├── Heading "Baidu"
├── Navigation
│   ├── Link "Home"
│   ├── Link "Demo"
└── Main
    ├── Section
    │   ├── Heading "Introduction"

最终效果对比

过滤前	过滤后	压缩率
原始HTML 1.2MB	骨架HTML 86KB	92.8%
包含328个DOM节点	保留89个关键节点	72.9%
含32个外部资源引用	零外部依赖	100%

注意事项

动态生成内容的处理
若目标站使用React/Vue等框架，需先触发所有懒加载后再执行脚本：

// 滚动到页面底部触发动态加载
window.scrollTo(0, document.body.scrollHeight);
setTimeout(() => { /* 执行提取代码 */ }, 3000);

PWA应用的特别处理
对于使用Service Worker的网站，需先卸载SW：

navigator.serviceWorker.getRegistrations().then(regs => 
  regs.forEach(reg => reg.unregister())

CSS样式的快速采集

// 提取所有内联样式（含媒体查询）
Array.from(document.styleSheets).forEach(sheet => {
  try { // 规避跨域样式表报错
    Array.from(sheet.cssRules).forEach(rule => 
      console.log(rule.cssText)
    )
  } catch(e) {}
});

二、其他高效学习工具推荐

1. 浏览器扩展（合法使用）

SnapCopy：一键复制元素及其父级结构
CSS Peeper：可视化提取颜色/字体/间距
VisBug：设计工具直接测量页面元素

2. 半自动化流程

// 生成简化版HTML骨架（控制台运行）
const clonePage = () => {
  const html = document.documentElement.cloneNode(true);
  // 清理脚本和外部资源
  html.querySelectorAll('script, link[rel="stylesheet"], iframe').forEach(el => el.remove());
  // 保留内联样式
  const styles = document.createElement('style');
  styles.textContent = Array.from(document.styleSheets)
    .map(sheet => {
      try { return Array.from(sheet.cssRules).map(r => r.cssText).join('\n'); } 
      catch { return ''; }
    }).join('\n');
  html.querySelector('head').appendChild(styles);
  return html.outerHTML;
};
copy(clonePage());

三、确保合法合规学习

1. 敏感信息剔除

配合正则表达式清洗工具（如VS Code的查找替换）：

// 清除敏感信息
(data-\w+="[^"]*")|(id="[^"]*")|(<!--.*?-->)

2. 结构化学习步骤

布局逆向工程
用CSS Grid Generator重建目标网站的网格系统

色彩系统提取
使用Chrome开发者工具的Styles面板，配合以下代码提取主色系：

// 提取页面使用最多的5种颜色
const colors = new Map();
Array.from(document.querySelectorAll('*'))
  .map(el => getComputedStyle(el).color)
  .forEach(color => colors.set(color, (colors.get(color) || 0) + 1));
console.log([...colors.entries()].sort((a,b) => b[1]-a[1]).slice(0,5));

动效分解
用Chrome的Performance面板录制交互过程，分析关键帧：

// 测量动画执行时间
const el = document.querySelector('.animated-element');
el.addEventListener('animationstart', () => 
  console.time('animation'));
el.addEventListener('animationend', () => 
  console.timeEnd('animation'));

四、Linux下如何学

混合开发

# 使用wget仅下载允许爬取的内容（需遵守robots.txt）
wget --mirror --convert-links --adjust-extension --page-requisites --no-parent https://www.baidu.com/

代码转化学习
通过AST Explorer解析目标网站的CSS/JS，生成可视化语法树，学习其代码组织方式

组件化重构
将提取的页面拆分为Vue/React组件：

// 示例：导航栏组件转换
const NavBar = () => (
  <header className="navbar" style={{ 
    display: 'flex', 
    justifyContent: 'space-between' 
  }}>
    <img src="/logo.png" className="logo" />
    <nav className="menu">
      {['Home', 'Demo', 'Docs'].map(item => (
        <a key={item} href={`#${item.toLowerCase()}`}>
          {item}
        </a>
      ))}
    </nav>
  </header>
);

五、法律风险规避措施

元数据清洗脚本

# 使用BeautifulSoup清洗下载的HTML
from bs4 import BeautifulSoup

with open('downloaded.html') as f:
    soup = BeautifulSoup(f, 'html.parser')

# 删除版权相关meta标签
for meta in soup.select('meta[name*="rights"], meta[name*="author"]'):
    meta.decompose()

# 重写title
soup.title.string = "My Learning Project"

with open('clean.html', 'w') as f:
    f.write(str(soup))