添加TOC

• TOC：Table of Content，目录
• 技巧：使用a href=#id名
• 注意：最下面的一个锚点往往无法达到页面顶部，可以通过添加额外的空白解决。

添加外部资源

添加图片

• 注意不要让图片变形
• 如果图片比例不对，需要使用工具裁剪一下。
• 如果图片尺寸过大，无需特殊处理。
• 如果图片体积过大(300kb) ，则需要压缩。

添加链接

• 国内一般需要添加target="_ blank"。
• 添加完了之后要自己全部点一遍，防止出错。

手机页面

手机适应

• 为meta:vp一项添加如下完整内容，VS Code默认生成的不完整，当然也可以找办法修改VS Code默认生成的meta:vp。

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

  • width=device-width：宽度和设备宽度一致。
  • initial-scale=1.0：默认缩放比例为一倍。
  • minimum-scale=1.0：最小缩放比例为一倍。
  • maximum-scale=1.0：最大缩放比例为一倍。
  • user-scalable=no：用户不准缩放。
• 为图表元素添加CSS样式：max-width: 100%;

手机调试

用WIFI调试手机

1. 让手机和电脑处于同一WIFI（一般台式机是直连的，没有WIFI）。
2. 手机可以直接用IP和端口访问电脑。
3. 用哪个IP? http server给出的IP全部试一遍。
4. 用border调试法调试CSS。
5. 用vConsole.js调试JS。

用Chrome远程调试

1. 搜索Chrome远程调试
2. 按照教程做
3. 按照视频配置一下

用Chrome映射端口

• 这个方法是需要通过USB连接，所以不需要在同一个WIFI下。
• 在Remote devices→Settings中，根据自己需要的端口号，添加端口。
• 直接在手机端浏览器中输入locolhost:端口号来访问网站。

部署到GitHub Pages

生成域名地址

1. 进入GitHub项目界面。
2. 点击Settings。
3. 点击左侧边栏中Code and automation中Pages。
4. 将Source中Branch下拉菜单改为main，并点击保存，生成免费域名。

发布预览

1. 进入GitHub项目界面。
2. 点击右侧边栏About右边的齿轮。
3. Description中输入“预览地址：”。
4. Website中输入网站首页。
5. 点击Save Change。