html实践&手机调试

1.html实践

1.搜索栏小技巧（ctrl+shift+p）

• wrap：自动换行。
• emmet wrap：使用缩写包围。在搜索栏输入ul>li*，ul无序列表内每行都用li包围，*表示多行。
• 正则表达式替换：编辑>替换>使用正则表达式>输入内容：（目标替换内容），全部替换。例：删除全部[数字]内容。

• alt+鼠标位置，多选行打相同的标签。
• 关闭自动改格式化：setting打开设置（ui）> 搜索format on save（保存时自动格式化）>取消保存自动格式化文件
• format：格式化文档。手动格式化

2.页面制作技巧

• TOC（Table of Content）目录
• a href=#xxx，锚点链接。页面内容跳转。注：最后一个锚点无法到达页面顶部，可以添加空白区域解决，一般不解决。空白区高度根据屏幕高度添加，在600~700左右。例：<div style='height:600'>
• 添加图片：保证图片不能变形。（注：图片右键可以看高清大图。）

1. 图片比例不对，使用工具裁剪。
2. 图片尺寸过大，无需特殊处理。
3.  图片体积过大（>300k下载速度慢），压缩/降低图片分辨率。

2.手机调试

1.meta:vp（viewport视口）

<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（初始比例），默认缩放比1倍
• minimum-scale=1.0（最小比例），最小缩放比1倍
• maximum-scale=1.0（最大比例），最大缩放比1倍
• user-scalable=no（用户是否能伸缩），用户不能缩放

2.img响应式宽度

img { max-width: 100%; }

图片最大宽度100%，图片不会超出屏幕宽度。

3.用wifi调试手机

手机和电脑处于同一wifi下，使用hs本地服务。将hs路径加上路径使用手机设备访问。

例：http://192.168.0.103:8080/jayChou.html

4.Chrome远程调试（安卓）

教程：https://developers.google.com/web/tools/chrome-devtools/remote-debugging/?hl=zh-cn

注：如果浏览器中找不到【远程设备】这个选项了，那么可以：地址栏里输 chrome://inspect，回车进入。

3.部署github pages

使用远程仓库上传，上传页面后刷新。

1.使用github pages:

Settings>Pages>Branch（选中main）>使用Github Pages提供的网址，复制添加路径

2.添加预览地址：（github Repositories主页可以直接预览）

编辑按钮>添加Description和Website>save changes保存

---

我的demo页面：JayChou