SALT-NLP/Design2Code-HARD
This dataset consists of 80 extra difficult webpages from Github Pages, which challenges SoTA multimodal LLMs on converting visual designs into code implementations. Each example is a pair of source HTML and screenshot ({id}.html and {id}.png). See the "easy" version of the Design2Code testset here Note that all images in these webpages are replaced by a placeholder image (rick.jpg) Please refer to our project page and our paper for more information.
6379
1<!DOCTYPE html>2<html xml:lang="zh-CN" xmlns="">3 <head>4 <style>5 body {6 margin: 0px;7 font-size: small;8 background-color: WhiteSmoke;9 color: Black;10}11#main {12 float: left;13 padding-bottom: 20px;14 padding: 0px;15 font: normal normal 100% 'Trebuchet MS', verdana, sans-serif;16 word-wrap: break-word;17 overflow: hidden;18}19 20#content-wrapper {21 margin-top: 0px;22 margin-right: 0px;23 margin-bottom: 0;24 margin-left: 5px;25}26 27h1 {28 font-size: 300%;29 font-weight: bold;30 line-height: 120%;31 text-align: center;32}33h4 {34 font-size: 120%;35 font-weight: bold;36}37 38.post-info {39 text-align: left;40 font-weight: normal;41}42.post-info .date-header {43 font-size: 125%;44 padding: 1px 50px 1px 20px;45 color: Gray;46}47.post-info .tag {48 font-size: 100%;49 padding: 1px;50 margin-left: 15px;51}52 53.post {54 padding: 0px 20px 0px 20px;55 margin-bottom: 20px;56 line-height: 22px;57}58 59.post h2 {60 font-size: 150%;61 font-weight: bold;62 margin-top: 10px;63 margin-bottom: 10px;64 padding: 0px 0px 0px 22px;65}66.post h3 {67 font-size: 120%;68 font-weight: bold;69 margin-top: 10px;70 margin-bottom: 10px;71 padding: 0px 0px 0px 22px;72}73.post h4 {74 font-size: 110%;75 font-weight: bold;76 margin-top: 5px;77 margin-bottom: 5px;78 padding: 0px 0px 0px 22px;79}80 81.post blockquote, .post q, .post pre, .post code {82 background-color: #DDD;83}84.post blockquote {85 margin: 1em 2em;86 border: 0px none;87}88.post pre, .post code {89 font-family: "DejaVu Sans Mono", Monaco, Menlo, Consolas, "Lucida Console", Courier, monospace;90}91.post pre {92 overflow-x: auto;93 padding: 0.5em 1em;94 border: 0px none;95}96.post pre.shell {97 background-color: Black;98 color: LawnGreen;99 border: 4px ridge Gray;100 padding: 1em;101 overflow-y: scroll;102}103 104.post a[target="_blank"] {105 background: transparent url(../images/external_link.gif) no-repeat scroll right center;106 padding-right: 13px;107}108 109a {110 text-decoration: none;111 color: #0066FF;112}113a:hover {114 text-decoration: underline;115 color: #88BBFF;116}117a img {118 border: 0;119}120a:visited {121 color: #800080;122}123 124#sidebar a {125 color: #0066FF;126}127#sidebar a:visited {128 color: #800080;129}130#sidebar a:hover {131 color: #88BBFF;132}133 134#sidebar {135 text-transform: none;136 background-color: White;137 color: Black;138 padding-left: 20px;139 width: 30%;140 float: right;141 font: normal normal 100% 'Trebuchet MS', verdana, sans-serif;142 border-left: 2px dashed Black;143 word-wrap: break-word;144 overflow: hidden;145}146.sidebar h2 {147 font-weight: bold;148 font-size: 120%;149 color: Black;150}151.sidebar h3 {152 font-weight: bold;153 font-size: 100%;154 color: Black;155}156.sidebar .widget {157 padding: 4px 8px 0px 0px;158}159 160/*--@ Source code syntax highlight @--*/161.source pre { background: DarkSlateGray; }162.source .hll { background-color: LightYellow; }163.source .k { color: DodgerBlue; font-weight: bold; } /* Keyword */164.source .kt { color: DodgerBlue; font-weight: bold; } /* Keyword.Type */165.source .kn { color: DodgerBlue; font-weight: bold; } /* Keyword.Namespace */166.source .kr { color: DodgerBlue; font-weight: bold; } /* Keyword.Reserved */167.source .kc { color: DodgerBlue; font-weight: bold; } /* Keyword.Constant */168.source .kd { color: DodgerBlue; font-weight: bold; } /* Keyword.Declaration */169.source .kp { color: DodgerBlue; font-weight: bold; } /* Keyword.Pseudo */170.source .n { color: White; } /* Name */171.source .nb { color: SteelBlue; font-weight: bold; } /* Name.Builtin */172.source .bp { color: SteelBlue; font-weight: bold; } /* Name.Builtin.Pseudo */173.source .nn { color: GoldenRod; font-weight: bold } /* Name.Namespace */174.source .nc { color: GoldenRod; font-weight: bold; } /* Name.Class */175.source .nf { color: GoldenRod; font-weight: bold } /* Name.Function */176.source .no { color: White; } /* Name.Constant */177.source .nd { color: White; } /* Name.Decorator */178.source .ne { color: White; } /* Name.Exception */179.source .nv { color: White; } /* Name.Variable */180.source .vc { color: White; } /* Name.Variable.Class */181.source .vg { color: White; } /* Name.Variable.Global */182.source .vi { color: White; } /* Name.Variable.Instance */183.source .nl { color: White; } /* Name.Label */184.source .nt { color: SteelBlue } /* Name.Tag */185.source .ni { color: SteelBlue; } /* Name.Entity */186.source .na { color: OliveDrab; } /* Name.Attribute */187.source .py { color: White; } /* Name.Property */188.source .nx { color: White; } /* Name.Other */189.source .m { color: Orchid; } /* Literal.Number */190.source .mb { color: Orchid; } /* Literal.Number.Bin */191.source .mi { color: Orchid; } /* Literal.Number.Integer */192.source .il { color: Orchid; } /* Literal.Number.Integer.Long */193.source .mo { color: Orchid; } /* Literal.Number.Oct */194.source .mh { color: Orchid; } /* Literal.Number.Hex */195.source .mf { color: Orchid; } /* Literal.Number.Float */196.source .s { color: Chocolate; } /* Literal.String */197.source .sb { color: Chocolate; } /* Literal.String.Backtick */198.source .sc { color: Chocolate; } /* Literal.String.Char */199.source .sd { color: Chocolate; } /* Literal.String.Doc */200.source .s2 { color: Chocolate; } /* Literal.String.Double */201.source .se { color: Chocolate; } /* Literal.String.Escape */202.source .sh { color: Chocolate; } /* Literal.String.Heredoc */203.source .si { color: Chocolate; } /* Literal.String.Interpol */204.source .sx { color: Chocolate; } /* Literal.String.Other */205.source .sr { color: Chocolate; } /* Literal.String.Regex */206.source .s1 { color: Chocolate; } /* Literal.String.Single */207.source .ss { color: Chocolate; } /* Literal.String.Symbol */208.source .o { color: Aqua; } /* Operator */209.source .ow { color: Aqua; } /* Operator.Word */210.source .p { color: White; } /* Punctuation */211.source .c { color: LimeGreen; font-style: italic; } /* Comment */212.source .ch { color: LimeGreen; font-style: italic; } /* Comment.Hashbang */213.source .cm { color: LimeGreen; font-style: italic; } /* Comment.Multiline */214.source .c1 { color: LimeGreen; font-style: italic; } /* Comment.Single */215.source .cs { color: LimeGreen; font-style: italic; } /* Comment.Special */216.source .cp { color: SteelBlue; font-weight: bold; font-style: italic; } /* Comment.Preproc */217.source .cpf { color: LawnGreen; font-style: italic; } /* Comment.PreprocFile */218.source .x { color: DarkGray; } /* Other */219 </style>220 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">221 <meta content="Python script by program.think@gmail.com" name="generator">222 <meta content="program-think.blogspot.com" name="provider">223 <title>224 [Username Redacted]的博客225 </title>226 </head>227 <body>228 <div id="outer-wrapper">229 <div id="content-wrapper">230 <div id="main" style="width:67%;">231 <h1>232 <a title="跳转到俺的博客">233 [Username Redacted]的博客234 </a>235 </h1>236 <hr>237 <div class="post">238 <h2>239 ★关于240 </h2>241 <br>242 你看到的这个博客离线版本，制作于243 <b style="font-size:125%;">244 2021-04-13245 </b>246 <br>247 （正常情况下，每次有新博文，这个离线版本都会在【一周内】更新；如果俺比较忙，更新会有滞后）248 <br>249 <br>250 <h3>251 ◇如何获取俺博客的【离线电子书】252 </h3>253 <br>254 要想【自动】获取俺博客的离线版本，请使用 BT Sync（Resilio Sync）进行自动同步。如果你不熟悉这款软件，请看教程《255 <a>256 扫盲 BTSync（Resilio Sync）257 </a>258 》。259 <b>260 安装好 BT Sync 之后，添加如下“同步密钥”，即可自动同步。261 </b>262 <br>263 <code style="font-size:125%;">264 B7P64IMWOCXWEYOXIMBX6HN5MHEULFS4V265 </code>266 <br>267 <br>268 <h3>269 ◇电子书格式说明270 </h3>271 <br>272 <b>273 HTML 格式274 </b>275 <br>276 不管你用的是哪个操作系统，只要你装了浏览器，就可以直接浏览【HTML 格式】。277 <br>278 首先，确保你【已经完成】BT Sync 的同步（在界面上，该同步目录的图标变为绿色）。279 <br>280 浏览的时候，先进入 BT Sync 同步目录下的281 <code>282 blog283 </code>284 目录，再进入285 <code>286 html287 </code>288 目录，打开289 <code>290 index.html291 </code>292 就可以显示【离线浏览的首页】。293 <br>294 备注：295 <br>296 <code>297 html298 </code>299 目录下所有网页的交叉链接，都已经转换为【相对路径】。因此，你可以把整个300 <code>301 html302 </code>303 目录复制到其它电脑；也可以用压缩软件打包，然后分享给其他人。304 <br>305 <br>306 <b>307 CHM 格式308 </b>309 <br>310 “CHM 格式”需要你手动制作（别怕，俺提供了傻瓜化的【一键式生成】），具体步骤如下：311 <br>312 1. 首先，确保你已经完成 BT Sync 的同步（在界面上，该同步目录的图标变为绿色）。313 <br>314 2. 使用 Windows 系统的同学，进入如下目录：315 <code>316 blog\make\chm317 </code>318 并双击319 <code>320 make-chm.wsf321 </code>322 <br>323 3. 使用 Linux 或 Mac OS 系统的同学，进入如下目录：324 <code>325 blog/make/chm326 </code>327 并运行 Python 脚本328 <code>329 make-chm.py330 </code>331 （该脚本同时兼容 Python2 和 Python3）332 <br>333 备注：334 <br>335 不使用 Windows 系统的同学，可以参考维基百科的“336 <a rel="nofollow" target="_blank">337 这个页面338 </a>339 ”列出了【非 Windows】下的 CHM 阅读软件。340 <br>341 <br>342 <b>343 EPUB 格式344 </b>345 <br>346 “EPUB 格式”需要你手动制作（别怕，俺提供了傻瓜化的【一键式生成】），具体步骤如下：347 <br>348 1. 首先，确保你已经完成 BT Sync 的同步（在界面上，该同步目录的图标变为绿色）。349 <br>350 2. 使用 Windows 系统的同学，进入如下目录：351 <code>352 blog\make\epub353 </code>354 并双击355 <code>356 make-epub.wsf357 </code>358 <br>359 3. 使用 Linux 或 Mac OS 系统的同学，进入如下目录：360 <code>361 blog/make/epub362 </code>363 并运行 Python 脚本364 <code>365 make-epub.py366 </code>367 （该脚本同时兼容 Python2 和 Python3）368 <br>369 备注：370 <br>371 EPUB 的阅读软件很多，而且各个平台（Windows、Linux、Mac OS、Android、iOS）都有。维基百科的“372 <a rel="nofollow" target="_blank">373 这个页面374 </a>375 ”列出了常用的 EPUB 阅读软件。376 <br>377 <br>378 <h2>379 ★最新博文380 </h2>381 <br>382 （此处列出最近的【30篇】博文，更多博文请点击右侧栏的【分类标签】）383 <br>384 <br>385 <h3>386 <a>387 近期安全动态和点评（2021年1季度）388 </a>389 </h3>390 <div class="post-info" style="margin-bottom:30px;">391 <span class="date-header">392 2021-04-11393 </span>394 <a class="tag">395 IT396 </a>397 <a class="tag">398 IT.信息安全399 </a>400 <a class="tag">401 时事评论402 </a>403 </div>404 <h3>405 <a>406 每周转载：新疆棉花——从“人权争议”到“外交对抗”（外媒报道30多篇）407 </a>408 </h3>409 <div class="post-info" style="margin-bottom:30px;">410 <span class="date-header">411 2021-03-29412 </span>413 <a class="tag">414 外交415 </a>416 <a class="tag">417 政治418 </a>419 <a class="tag">420 时事评论421 </a>422 <a class="tag">423 转载424 </a>425 </div>426 <h3>427 <a>428 计算机网络通讯的【系统性】扫盲——从“基本概念”到“OSI 模型”429 </a>430 </h3>431 <div class="post-info" style="margin-bottom:30px;">432 <span class="date-header">433 2021-03-18434 </span>435 <a class="tag">436 IT.信息安全437 </a>438 <a class="tag">439 IT.网络440 </a>441 <a class="tag">442 IT.翻墙443 </a>444 </div>445 <h3>446 <a>447 每周转载：3月3日，缅甸政变经历“最血腥一天”（外媒报道及现场照片，多图）448 </a>449 </h3>450 <div class="post-info" style="margin-bottom:30px;">451 <span class="date-header">452 2021-03-05453 </span>454 <a class="tag">455 政治456 </a>457 <a class="tag">458 时事评论459 </a>460 <a class="tag">461 转载462 </a>463 </div>464 <h3>465 <a>466 “水门事件”以及尼克松下台的经过467 </a>468 </h3>469 <div class="post-info" style="margin-bottom:30px;">470 <span class="date-header">471 2021-02-22472 </span>473 <a class="tag">474 历史475 </a>476 <a class="tag">477 政治478 </a>479 <a class="tag">480 政治.法制481 </a>482 </div>483 <h3>484 <a>485 每周转载：内卷的天朝，各阶层的众生相（网文17篇）486 </a>487 </h3>488 <div class="post-info" style="margin-bottom:30px;">489 <span class="date-header">490 2021-01-31491 </span>492 <a class="tag">493 政治494 </a>495 <a class="tag">496 教育497 </a>498 <a class="tag">499 时事评论500 </a>501 <a class="tag">502 转载503 </a>504 </div>505 <h3>506 <a>507 开博12周年庆，博文分类汇总508 </a>509 </h3>510 <div class="post-info" style="margin-bottom:30px;">511 <span class="date-header">512 2021-01-15513 </span>514 <a class="tag">515 博客通告516 </a>517 </div>518 <h3>519 <a>520 近期安全动态和点评（2020年4季度）521 </a>522 </h3>523 <div class="post-info" style="margin-bottom:30px;">524 <span class="date-header">525 2021-01-09526 </span>527 <a class="tag">528 IT529 </a>530 <a class="tag">531 IT.信息安全532 </a>533 <a class="tag">534 时事评论535 </a>536 </div>537 <h3>538 <a>539 分享各类电子书（科普、政治、IT、历史、等，180本）——增加【科普】大类540 </a>541 </h3>542 <div class="post-info" style="margin-bottom:30px;">543 <span class="date-header">544 2020-12-22545 </span>546 <a class="tag">547 书评/影评548 </a>549 <a class="tag">550 历史551 </a>552 <a class="tag">553 政治554 </a>555 <a class="tag">556 科普557 </a>558 </div>559 <h3>560 <a>561 学习与人生——700篇博文之感悟562 </a>563 </h3>564 <div class="post-info" style="margin-bottom:30px;">565 <span class="date-header">566 2020-12-04567 </span>568 <a class="tag">569 学习方法570 </a>571 <a class="tag">572 学会思考573 </a>574 <a class="tag">575 心理学576 </a>577 <a class="tag">578 教育579 </a>580 <a class="tag">581 职场点滴582 </a>583 </div>584 <h3>585 <a>586 博弈论入门教程——从基本概念到具体案例587 </a>588 </h3>589 <div class="post-info" style="margin-bottom:30px;">590 <span class="date-header">591 2020-11-18592 </span>593 <a class="tag">594 科普595 </a>596 <a class="tag">597 经济598 </a>599 </div>600 <h3>601 <a>602 2020年美国大选的选情分析603 </a>604 </h3>605 <div class="post-info" style="margin-bottom:30px;">606 <span class="date-header">607 2020-11-02608 </span>609 <a class="tag">610 政治611 </a>612 <a class="tag">613 时事评论614 </a>615 </div>616 <h3>617 <a>618 美国政党简史（上）——从“邦联时期”到“南北战争前”619 </a>620 </h3>621 <div class="post-info" style="margin-bottom:30px;">622 <span class="date-header">623 2020-10-22624 </span>625 <a class="tag">626 历史627 </a>628 <a class="tag">629 政治630 </a>631 <a class="tag">632 政治.法制633 </a>634 </div>635 <h3>636 <a>637 近期安全动态和点评（2020年3季度）638 </a>639 </h3>640 <div class="post-info" style="margin-bottom:30px;">641 <span class="date-header">642 2020-10-12643 </span>644 <a class="tag">645 IT646 </a>647 <a class="tag">648 IT.信息安全649 </a>650 <a class="tag">651 时事评论652 </a>653 </div>654 <h3>655 <a>656 二十年目睹之怪现状——中国学术界、科技界的“奇葩排行榜”657 </a>658 </h3>659 <div class="post-info" style="margin-bottom:30px;">660 <span class="date-header">661 2020-09-29662 </span>663 <a class="tag">664 IT665 </a>666 <a class="tag">667 IT.业界评论668 </a>669 <a class="tag">670 政治671 </a>672 <a class="tag">673 政治.腐败674 </a>675 <a class="tag">676 教育677 </a>678 </div>679 <h3>680 <a>681 每周转载：半导体行业现状——华为全面断供、中芯前景堪忧、弘芯轰然倒塌（网文14篇）682 </a>683 </h3>684 <div class="post-info" style="margin-bottom:30px;">685 <span class="date-header">686 2020-09-15687 </span>688 <a class="tag">689 IT690 </a>691 <a class="tag">692 外交693 </a>694 <a class="tag">695 时事评论696 </a>697 <a class="tag">698 经济699 </a>700 <a class="tag">701 转载702 </a>703 </div>704 <h3>705 <a>706 如何用 Tor 访问对 Tor 不友好的网站——扫盲“三重代理”及其它招数707 </a>708 </h3>709 <div class="post-info" style="margin-bottom:30px;">710 <span class="date-header">711 2020-08-31712 </span>713 <a class="tag">714 IT715 </a>716 <a class="tag">717 IT.信息安全718 </a>719 <a class="tag">720 IT.网络721 </a>722 <a class="tag">723 IT.翻墙724 </a>725 <a class="tag">726 IT.软件介绍727 </a>728 </div>729 <h3>730 <a>731 每周转载：约瑟夫·奈谈“美国对华战略”（中英文对照及俺的点评）732 </a>733 </h3>734 <div class="post-info" style="margin-bottom:30px;">735 <span class="date-header">736 2020-08-24737 </span>738 <a class="tag">739 外交740 </a>741 <a class="tag">742 政治743 </a>744 <a class="tag">745 时事评论746 </a>747 <a class="tag">748 转载749 </a>750 </div>751 <h3>752 <a>753 每周转载：“中美对抗”进入【科技脱钩】阶段（网文7篇）754 </a>755 </h3>756 <div class="post-info" style="margin-bottom:30px;">757 <span class="date-header">758 2020-08-11759 </span>760 <a class="tag">761 外交762 </a>763 <a class="tag">764 政治765 </a>766 <a class="tag">767 时事评论768 </a>769 <a class="tag">770 转载771 </a>772 </div>773 <h3>774 <a>775 回顾六四系列[34]： 5月17日，“戒严令”出笼的经过776 </a>777 </h3>778 <div class="post-info" style="margin-bottom:30px;">779 <span class="date-header">780 2020-07-27781 </span>782 <a class="tag">783 历史784 </a>785 <a class="tag">786 政治787 </a>788 </div>789 <h3>790 <a>791 近期安全动态和点评（2020年2季度）792 </a>793 </h3>794 <div class="post-info" style="margin-bottom:30px;">795 <span class="date-header">796 2020-07-07797 </span>798 <a class="tag">799 IT800 </a>801 <a class="tag">802 IT.信息安全803 </a>804 <a class="tag">805 时事评论806 </a>807 </div>808 <h3>809 <a>810 每周转载：超级富豪王振华性侵9岁女童（大量网友评论，多图）811 </a>812 </h3>813 <div class="post-info" style="margin-bottom:30px;">814 <span class="date-header">815 2020-06-26816 </span>817 <a class="tag">818 政治819 </a>820 <a class="tag">821 政治.法制822 </a>823 <a class="tag">824 时事评论825 </a>826 <a class="tag">827 转载828 </a>829 </div>830 <h3>831 <a>832 扫盲 Linux 逻辑卷管理（LVM）——兼谈 RAID 以及“磁盘加密工具的整合”833 </a>834 </h3>835 <div class="post-info" style="margin-bottom:30px;">836 <span class="date-header">837 2020-06-16838 </span>839 <a class="tag">840 IT841 </a>842 <a class="tag">843 IT.信息安全844 </a>845 <a class="tag">846 IT.软件介绍847 </a>848 </div>849 <h3>850 <a>851 如何理解“英美法系”（普通法系）——从“英国古代史”聊到“香港国安法”852 </a>853 </h3>854 <div class="post-info" style="margin-bottom:30px;">855 <span class="date-header">856 2020-06-04857 </span>858 <a class="tag">859 历史860 </a>861 <a class="tag">862 政治863 </a>864 <a class="tag">865 政治.法制866 </a>867 <a class="tag">868 经济869 </a>870 </div>871 <h3>872 <a>873 每周转载：朝廷推香港版《国安法》，【一国一制】降临（外媒报道8篇）874 </a>875 </h3>876 <div class="post-info" style="margin-bottom:30px;">877 <span class="date-header">878 2020-05-24879 </span>880 <a class="tag">881 政治882 </a>883 <a class="tag">884 时事评论885 </a>886 <a class="tag">887 转载888 </a>889 </div>890 <h3>891 <a>892 聊聊“核战略的博弈模型”与“中美新冷战”893 </a>894 </h3>895 <div class="post-info" style="margin-bottom:30px;">896 <span class="date-header">897 2020-05-13898 </span>899 <a class="tag">900 军事901 </a>902 <a class="tag">903 外交904 </a>905 <a class="tag">906 时事评论907 </a>908 </div>909 <h3>910 <a>911 “政治体制”与“系统健壮性”——基于“复杂性科学”的思考912 </a>913 </h3>914 <div class="post-info" style="margin-bottom:30px;">915 <span class="date-header">916 2020-04-26917 </span>918 <a class="tag">919 历史920 </a>921 <a class="tag">922 政治923 </a>924 <a class="tag">925 政治.常识926 </a>927 <a class="tag">928 经济929 </a>930 </div>931 <h3>932 <a>933 近期安全动态和点评（2020年1季度）934 </a>935 </h3>936 <div class="post-info" style="margin-bottom:30px;">937 <span class="date-header">938 2020-04-13939 </span>940 <a class="tag">941 IT942 </a>943 <a class="tag">944 IT.信息安全945 </a>946 <a class="tag">947 时事评论948 </a>949 </div>950 <h3>951 <a>952 在线查毒工具 VirusTotal 的 N 种玩法——从“误报/漏报”聊到“攻击者对它的利用”953 </a>954 </h3>955 <div class="post-info" style="margin-bottom:30px;">956 <span class="date-header">957 2020-03-27958 </span>959 <a class="tag">960 IT961 </a>962 <a class="tag">963 IT.信息安全964 </a>965 </div>966 <h3>967 <a>968 分享各类电子书（【英文版】专场，177本）969 </a>970 </h3>971 <div class="post-info" style="margin-bottom:30px;">972 <span class="date-header">973 2020-03-17974 </span>975 <a class="tag">976 书评/影评977 </a>978 <a class="tag">979 军事980 </a>981 <a class="tag">982 历史983 </a>984 <a class="tag">985 政治986 </a>987 <a class="tag">988 经济989 </a>990 </div>991 </div>992 </div>993 <div id="sidebar-wrapper">994 <div class="sidebar section" id="sidebar">995 <div class="widget HTML" id="BlogAbout">996 <div class="widget-content">997 <img alt="[Username Redacted]的Logo" src="rick.jpg" title="[Username Redacted]的Logo">998 <br>999 <br>1000 <img height="16" src="rick.jpg" width="16">1001 <a target="_blank">1002 博客主站点 (BlogSpot)1003 </a>1004 <br>1005 <img height="16" src="rick.jpg" width="16">1006 <a target="_blank">1007 俺的邮箱 (Gmail)1008 </a>1009 <br>1010 <img height="16" src="rick.jpg" width="16">1011 <a target="_blank">1012 俺的收藏 (GitHub)1013 </a>1014 <br>1015 <img height="16" src="rick.jpg" width="16">1016 <a target="_blank">1017 俺的推特 (@programthink)1018 </a>1019 <br>1020 </div>1021 </div>1022 <div class="widget HTML" id="BlogFeed">1023 <h2 class="title">1024 订阅博客1025 </h2>1026 <div class="widget-content">1027 <a target="_blank" title="RSS 订阅">1028 <img alt="RSS 订阅" border="0" src="rick.jpg">1029 </a>1030 <a title="邮件订阅">1031 <img alt="邮件订阅" border="0" src="rick.jpg">1032 </a>1033 <br>1034 </div>1035 </div>1036 <div class="widget Text" id="BlogDesc">1037 <h2 class="title">1038 博客主要内容1039 </h2>1040 <div class="widget-content">1041 ★提升思维能力1042 <br>1043 ★普及政治常识1044 <br>1045 ★扫盲翻墙姿势1046 <br>1047 ★揭露党国嘴脸1048 <br>1049 ★网络安全教程1050 <br>1051 ★软件开发技术1052 </div>1053 </div>1054 <div class="widget Label" id="BlogTags">1055 <h2>1056 分类标签1057 </h2>1058 <div class="widget-content list-label-widget-content">1059 <ul>1060 <li>1061 <a class="tag">1062 IT1063 </a>1064 (207)1065 </li>1066 <li>1067 <a class="tag">1068 IT.Linux1069 </a>1070 (6)1071 </li>1072 <li>1073 <a class="tag">1074 IT.业界评论1075 </a>1076 (16)1077 </li>1078 <li>1079 <a class="tag">1080 IT.人工智能1081 </a>1082 (3)1083 </li>1084 </ul>1085 </div>1086 </div>1087 <div class="widget Label" id="BlogRecommend">1088 <div class="widget-content">1089 <h2>1090 推荐帖子（翻墙技术）1091 </h2>1092 <ul>1093 <li>1094 <a>1095 如何翻墙（全方位入门扫盲）1096 </a>1097 </li>1098 <li>1099 <a>1100 常见翻墙问题答疑1101 </a>1102 </li>1103 <li>1104 <a>1105 获取翻墙软件方法大全1106 </a>1107 </li>1108 <li>1109 <a>1110 多台电脑如何共享翻墙通道1111 </a>1112 </li>1113 </ul>1114 <h2>1115 推荐帖子（信息安全）1116 </h2>1117 <ul>1118 <li>1119 <a>1120 计算机网络通讯的【系统性】扫盲——从“基本概念”到“OSI 模型”1121 </a>1122 </li>1123 <li>1124 <a>1125 为啥朝廷总抓不到俺——十年反党活动的安全经验汇总1126 </a>1127 </li>1128 <li>1129 <a>1130 “对抗专制、捍卫自由”的 N 种技术力量1131 </a>1132 </li>1133 <li>1134 <a>1135 如何防止黑客入侵（系列）1136 </a>1137 </li>1138 </ul>1139 <h2>1140 推荐帖子（提升个人能力）1141 </h2>1142 <ul>1143 <li>1144 <a>1145 学习与人生——700篇博文之感悟1146 </a>1147 </li>1148 <li>1149 <a>1150 如何【系统性学习】——从“媒介形态”聊到“DIKW 模型”1151 </a>1152 </li>1153 <li>1154 <a>1155 如何完善自己的知识结构1156 </a>1157 </li>1158 <li>1159 <a>1160 《如何阅读一本书》——书评及内容纲要1161 </a>1162 </li>1163 </ul>1164 <h2>1165 推荐帖子（洗脑与反洗脑）1166 </h2>1167 <ul>1168 <li>1169 <a>1170 聊聊洗脑和脑残——分析“脑残的起源”和“脑残的觉醒”1171 </a>1172 </li>1173 <li>1174 <a>1175 批判性思维扫盲——学会区分“事实”与“观点”1176 </a>1177 </li>1178 <li>1179 <a>1180 扫盲逻辑谬误——以五毛言论为反面教材1181 </a>1182 </li>1183 <li>1184 <a>1185 比“欺骗”更狡猾的洗脑——基于【真实数据】进行忽悠1186 </a>1187 </li>1188 </ul>1189 <h2>1190 推荐帖子（心理学）1191 </h2>1192 <ul>1193 <li>1194 <a>1195 为什么独立思考这么难——谈谈心理学的成因，并分享俺的经验1196 </a>1197 </li>1198 <li>1199 <a>1200 不要成为“粉丝”——谈谈“偶像崇拜”的成因和危害