HTML 技巧

位图和矢量图

• 位图使用像素网格来定义——位图文件精确包含每个像素的位置和它的色彩信息。流行的 web 位图格式包括 Bitmap（.bmp）、PNG（.png）、JPEG（.jpg），以及 GIF（.gif）。
• 矢量图使用算法来定义——矢量图文件包含了图形和路径的定义，电脑可以根据这些定义计算出当它们在屏幕上渲染时应该呈现的样子，SVG 格式（基于 XML）。

特点

• 矢量图像放大不失真
• 矢量图像通常体积更小
• 矢量图像中的文本仍然可访问，适合SEO
• SVG 非常容易变得复杂，这意味着文件大小会增加

使用空格实体字符实现文本两端对齐

三种空格实体字符

•   不换行空格（No-Break Space）
  • 占据的宽度可能会受到字体样式、容器宽度、CSS 布局和其他相关因素的影响
•   半角空格（En Space）
  • 占据的宽度正好是 1/2 个中文字符的宽度
•   全角空格（Em Space）
  • 占据的宽度正好是 1 个中文字符的宽度

<div>
  <div>姓&emsp;&emsp;名： 情枫</div>
  <div>手&ensp;机&ensp;号： 13312341234</div>
  <div>电子邮箱： fungrids@qq.com</div>
</div>

姓  名： 情枫

手 机 号： 13312341234

电子邮箱： fungrids@qq.com