H5 Mosh教程笔记
先列出教程中会用到的网站
网站H5规范验证网站
CSS格式规范验证网站
转义字符查询
免费图片下载网站
免费图片视频下载网站
浏览器HTML标签，CSS属性支持情况查询网站
CSS一致化工具安装
渐变色代码生成网站
CSS形状代码生成网站
字体网站fontsquirrel
字体网站fonts
字体网站myfonts
rem字体大小预览网站
css雪碧图工具网站，或者谷歌一下css sprites
DataURI生成网站，或者谷歌一下Data URI Generator
CSS滤镜展示
图片裁切工具网站，或者谷歌一下CSS Clip Generator
不同分辨率图片生成网站
图片格式转换网站
矢量图背景网站
图标字体网站
教程开始
· 图片
· 内容图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.meal {
/* 全屏展示图片，不需要提供高度，浏览器会自动计算高度 */
width: 100vw;
}
</style>
</head>
<body>
<!-- meal.jpg是位图，放大之后，像素不够描绘那么多细节，就会模糊 -->
<img class="meal" src="images/meal.jpg" alt="">
</body>
</html>
· 背景图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background: url(images/bg-sanfrancisco.jpg);
/* 图片尺寸不够大时，不重复展示图片来布满整个屏幕 */
/* 如果想在横轴或纵轴方向重复图片 */
/* 可以设置repeat-x或者repeat-y */
background-repeat: no-repeat;
/* 确定背景图位置，参数表示x轴位置和y轴位置 */
/* 或者使用百分比表示(相对于X轴或Y轴的长度百分比) */
/* background-position: 100px 100px; */
/* 修改背景图大小，宽，高，也可以使用百分比 */
background-size: 100px 100px;
/* 此时高度用100%，会导致图片消失，因为默认高度时0，0的100%，还是0 */
/* 需要手动指定页面高度 */
background-size: 100% 100%;
height: 300vh;
/* 将图片拉伸并覆盖整个容器 */
background-size: cover;
/* 在页面滚动时，背景图不动，只是页面内容动 */
/* 同时，因为图片不会动，所以，即使时cover效果，也只会把图片拉满一整屏，而不是高度设置的3倍屏幕高度 */
background-attachment: fixed;
}
</style>
</head>
<body>
<h1>My Heading</h1>
</body>
</html>
· 雪碧图
雪碧图就是把多张用到的图合并成一张图，在下载的时候能减少文件大小，通过CSS来切分图片，在生成雪碧图的时候，雪碧图生成工具会同时生成图片和对应的CSS(代码中bg开头的样式)，直接拷贝使用就好
css雪碧图工具网站，或者谷歌一下css sprites
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.bg-landing {
width: 100px;
height: 100px;
background: url("images/css_sprites.png") -10px -10px;
display: inline-block;
}
.bg-rocketship {
width: 100px;
height: 100px;
background: url("images/css_sprites.png") -130px -10px;
display: inline-block;
}
.bg-saturn {
width: 100px;
height: 100px;
background: url("images/css_sprites.png") -10px -130px;
display: inline-block;
}
.bg-ufo {
width: 100px;
height: 100px;
background: url("images/css_sprites.png") -130px -130px;
display: inline-block;
}
.bg-dishes {
width: 100px;
height: 100px;
background: url("images/css_sprites.png") -250px -10px;
display: inline-block;
}
</style>
</head>
<body>
<span class="bg-dishes"></span>
<span class="bg-landing"></span>
<span class="bg-rocketship"></span>
<span class="bg-saturn"></span>
<span class="bg-ufo"></span>
</body>
</html>
· 数据标识符 Data URLs
数据标识符就是把文件内容写到URL里，就不用下载文件，而是直接把文件内容嵌入到HTML里。Data URL的标识是data开头。数据标识符的方式会比源文件要大，而且不好维护，尽量少用
DataURI生成网站，或者谷歌一下Data URI Generator
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAFGmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNi4wLWMwMDIgNzkuMTY0MzUyLCAyMDIwLzAxLzMwLTE1OjUwOjM4ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjEuMSAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjAtMTAtMDdUMDY6NDA6MTgtMDc6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDIwLTEyLTA2VDEwOjE2OjA5LTA4OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDIwLTEyLTA2VDEwOjE2OjA5LTA4OjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9InNSR0IgSUVDNjE5NjYtMi4xIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjQxNTMwODQ0LTk0YmIt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" alt="">
</body>
</html>
· 图片裁切
图片在切图网站中，选择切好的样式，并拷贝CSS代码，粘贴到目标图片的样式里就好
图片裁切工具网站，或者谷歌一下CSS Clip Generator
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.meal {
clip-path: polygon(
0% 20%,
60% 20%,
60% 0%,
100% 50%,
60% 100%,
60% 80%,
0% 80%
);
}
</style>
</head>
<body>
<img class="meal" src="images/meal.jpg" alt="a meal" />
</body>
</html>
· 图片滤镜
CSS提供了很多滤镜，具体可以谷歌，这里举一个例子
CSS滤镜展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.meal:hover {
/* 灰阶滤镜 模糊滤镜*/
filter: grayscale(70%) blur(3px);
}
</style>
</head>
<body>
<img class="meal" src="images/meal.jpg" alt="a meal" />
</body>
</html>
· 支持高分辨率屏
image.png
物理分辨率是设备的参数，逻辑分辨率是CSS中使用的标准，像素比DPR可以理解成放大比例，就是一个像素会被放大几倍来显示。
image.png
这张meal的图，在iPhone3上是1:1正常显示，但在iPhone4上，按理说不会占满宽度，因为图片像素只有屏幕像素的一半，但因为iPhone4的DPR是2，也就是1个像素会放大2倍显示，所以这样图会占满屏幕宽度，但是又有个问题，因为图片是320x320，被放大两倍后，图会模糊，像素并不能严格匹配iPhone4的屏幕，所以需要更高清的图，也就是我们常用的@2x图或者@3x图来适配DPR2，3的屏幕，或者更高，这种图片处理方式最适合的就是固定宽度的图片
不同分辨率图片生成网站
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.meal {
width: 400px;
}
</style>
</head>
<body>
<img
src="images/meal.jpg"
alt="A bow of salmon and curry"
class="meal"
srcset="images/meal.jpg 1x, images/meal@2x.jpg 2x, images/meal@3x.jpg 3x"
/>
</body>
</html>
· 分辨率转换
在提供了高分辨率图片后，我们可以在不同的屏幕展示合适的图片，这在固定宽度的图片上很好用，但如果图片宽度是变化的，比如全屏展示的图片，就会出现分辨率转换的问题，同样是DPR = 2的显示器，实际分辨率还是会不一样，越大的分辨率，在对图片进行分辨率转换的时候就越消耗资源，所以，需要另外一种方式，可以指定图片的实际宽度，浏览器会自己选择合适的宽度。如果不希望所有屏幕都全屏展示图片，可以使用图片的尺寸集合指定显示宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.meal {
width: 400px;
}
</style>
</head>
<body>
<img
src="images/meal.jpg"
alt="A bow of salmon and curry"
class="meal"
srcset="
images/meal.jpg 400w,
images/meal@2x.jpg 800w,
images/meal@3x.jpg 1200w
"
sizes="
(max-width: 500px) 100vw,
(max-width: 700px) 50vw,
33vw
"
/>
</body>
</html>
· 新图片格式使用webp
这里会用到一个新标签picture，放置多个图片源供浏览器选择
图片格式转换网站
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 在支持webp的浏览器中，使用webp图片，否则使用jpg图片 -->
<!-- 若连picture标签都不支持，那就用img标签 -->
<picture>
<source type="image/webp" srcset="images/meal.webp" />
<source type="image/jpeg" srcset="images/meal.jpg" />
<img src="images/meal.jpg" alt="A bow of salmon and curry">
</picture>
</body>
</html>
· 美术指导(其实就是不同屏幕显示不同图片，不知道为啥教程里取这个名字)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<picture>
<!-- 屏幕宽度最大不超过500px的时候，显示裁切过的图片 -->
<source media="(max-width: 500px)" srcset="images/meal-cropped.jpg">
<!-- 屏幕最小宽度大于501px的时候，显示完整图片 -->
<source media="(min-width: 501px)" srcset="images/meal.jpg">
<!-- 不支持picture的标签，显示完整图片 -->
<img src="images/meal.jpg" alt="A bow of salmon and curry">
</picture>
</body>
</html>
· 可缩放矢量图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background: url(images/constellation.svg);
}
.ufo {
width: 100px;
}
</style>
</head>
<body>
<img class="ufo" src="images/ufo.svg" alt="UFO">
</body>
</html>
· 图标字体
图标字体网站
在网站中生成图标字体工具集，link到网站中就可以使用，具体空降教程P6-00:56:00
下一篇
H5 Mosh教程笔记 - 表单简介
上一篇
H5 Mosh教程笔记 - 字体简介
网友评论