只用HTML也能做网页

俗称css裸奔
css裸奔节（CSS Naked Day）每年四月九号，现已停办，现在的网页没有css基本不能看了
用HTML标签做个网页
预览地址
内容采集：建议维基百科

添加 TOC

Table of Content 目录
后面每个标题加上id=对应的名称

<nav>
      <ol>
        <li><a href="#chan">个人简介</a></li>
        <li><a href="#events">重要事件</a></li>
        <li><a href="#glory">主要成就和荣誉</a></li>
        <li><a href="#works">主要作品</a></li>
        <li><a href="#pictures">生活照</a></li>
        <li><a href="#life">生平</a></li>
      </ol>
    </nav>

<h1 id="chan">成龙</h1>

添加外部资源

添加图片

• 注意不要让图片变形
• 如果图片比例不对，需要使用工具裁剪（Win10自带的软件可以裁剪）
• 如果图片尺寸过大，无需特殊处理

• 如果图片体积过大（>300kb），则需要压缩（直接搜对应的图片格式压缩）

  <div>
      <a href="1.jpg" target="_blank"
        ><img width="500" src="1.jpg" alt="第一张图"
      /></a>
    </div>
    <div>
      <a href="2.jpg" target="_blank"
        ><img width="500" src="2.jpg" alt="第二张图"
      /></a>
    </div>
    <div>
      <a href="3.jpg" target="_blank"
        ><img width="500" src="3.jpg" alt="第三张图"
      /></a>
    </div>

  添加链接

• 国内一般需要添加 target=_blank（空白页打开）

• 添加完之后自己全部点一遍，防止出错

  学习到的一些快捷用法

  删除多个同种符号，如 [数字]

  VSCode里正则表达式

  点击编辑>替换 输入\[\d+\] 如图用空来替换
  

  多行文字每行都要加标签方法

  Ctrl+shift+P 搜索 emmet wrap

  
  选中之后 加自己想加的标签即可
  加单个标签 如 div
  每行加一个如 ol>li* 或div*
  加个 * 就表示每行都加

  ALT+左键可选多行

  兼容手机 两行代码

• meta：vp （VSCode自己生成的不完整，下面为完整代码）

  <meta name="viewport" content="width=device-width, initial-scale=1.0, 
  minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  

• img {max-width: 100%; }

   <style>
      img {
        max-width: 100%;
      }
   </style>
  

  用WIFI调试手机

1. 让手机和电脑处于同一 wifi
2. 手机可以直接用 IP 和端口访问电脑
3. IP：http-server 给出的 IP 全部试一遍（记得加路径）
4. 用 border 调试法调试 CSS （后面CSS补充）
5. 用 vConsole.js 调试 JS （后面补充）

   用Chrome远程调试

   教程
   先打开手机开发者工具的USB调试
   

   最后部署到 Github Pages

   预览链接放到显眼的位置

   如 edit