会写网页的人很多，但不是每个人都是好的前端工程师。 想要成为一名优秀的前端工程师，必须要有网站用户体验的优化，包括网页的设计和实现。
作为UI设计师，当打完稿和开发对接后，需要对设计稿和切图进行标注，并将标注好的切图文件交给开发。 这时候就难了，这么多尺寸的图片怎么切？
如何剪切网页上的图片？ 专业网站制作中裁切图片有哪些规范？
在网站建设和制作中，我们经常听到定稿后可以切图，那么切图是一项怎样的工作呢，让我们专业的前端工程师来告诉你吧。
图片裁剪是网站制作过程中的一个专业术语，是前端工程师必备的一项基本技能。 图像切割是将设计文档转换为 HTML 的过程。
在网站建设和制作过程中，网页裁剪是指将设计好的PSD稿件转换为HTML，利用DIV+CSS将设计稿件以网页的形式展示出来的工作，网页裁剪是指将设计稿稿件根据版面的需要，利用Photoshop的切片工具将图片从文档中分离出来，配合DIV+CSS完成静态页面的制作。
规范一、文件规范。
1、html、css、js、图片都归档在系统开发目录下。
2、Html文件以英文命名，后缀为.htm。 同时把对应的接口放到同一个目录下。 如果命名稿件是中文的3D场景，则需要将同一个文件重命名为htm。 用于后端添加和功能查找。
3、CSS和js的命名也是如此。
id 和 class 应该如何命名？
这个名字可以随便起，所以有些人用英文、拼音或者随便打几个字母。 虽然这样说是可以的，但是会导致后期自己和他人修改网站。 会很麻烦，光是要找标签就头晕。 我个人根据级别命名，这里是一个例子：
比如我用head这个名字作为head，那么head可以分为两部分分别存放logo和存放导航栏。 我会用head_1和head_2来表示这两部分，那么存放logo的部分可能会分为左右两边是logo，另一边是广告或者搜索栏。 我将其命名为：head_1_left 和 head_1_right 来表示。 有时候我们在修改的时候不需要翻到html页面就可以看到这样的css代码，直接根据样式的名字就可以看到。
2、标签的合理使用有利于网站收藏和SEO优化
让我们举个例子。 有时候在一个新闻内容版块的html中，很多人会直接在div中间写上文字，然后控制这个div的样式：<div>新闻内容</div>。 虽然这完全是功能性的游戏ui切图命名规范，但是在搜索引擎看来，这不是文本内容而是代码，所以我们在写这个的时候记得合理使用p标签，比如上面的新闻内容应该写为：<div ><p>新闻内容</p></div>。 当我们合理的使用标签的时候，一方面可以让人觉得你在用心的做这个网页的排版，更重要的是可以让这个网站后期的优化更加有效。 以下是我想添加的标签的摘要：
h1：网页的主题，一个页面只能出现一个。 权重仅次于网站标题，所以尽量简单的把你建站的主要关键词放在里面。 如果把关键词包裹在像本文标题这样的句子中游戏ui切图命名规范，我们可以这样写：
<p>谈谈彭剑自己的权利</p>
<h1>网页布局</h1>
<p>一些需要注意的事情</p>。
h2-h3：一般在网页中使用h3就可以了，后面的h4-h6一般不会再用了。 我们需要合理安排这两个标签，h2表示页面中的一个栏目，h3表示该栏目中的一个小节或文章。
p：p标签是段落标签，也可以说是内容标签。 这个标签才是真正的内容。
alt：搜索引擎是不会看图片的，我们必须给他解释图片代表什么，所以我们注意在每张图片上都给他解释。
title：这个标签用在a标签中，一般很少用到。 但是我们要考虑到搜索引擎的优化，所以一定要注意给搜索引擎一个简单准确的解释，比如一篇文章的标题是《说说彭剑在做的时候应该注意的一些事情》他排版网站。”那么我们的代码应该写成
<a title="网页排版注意事项" href="">谈谈彭健在网站建设和排版时应该注意的一些问题</a>。
只需写下能够解释这个标题含义的最准确和最简短的描述即可。
nane：相信很少有人会注意到这个标签。 这个名字标签可以说是直接和搜索引擎对话的标签。 它也用在 a 中，它告诉搜索引擎超链接中有什么。 正如上面的标题，我们可以这样写：
<a name=”网页排版注意事项” title=”网页排版注意事项”href=””>说说彭剑自己在排版网站时应该注意的一些事情</a>。
strong：这是一个重要的标签，看起来和b标签一样。 很多做seo但不懂代码的人都知道每篇文章重要的关键词都要加粗，但总以为加粗的就是b标签。 事实上，这个粗体是一个强大的标签。 我们可以把这个标签加在我们网页的重要关键词上，然后在css中设置成和普通词一样。 不会影响正常浏览贴图笔刷，实际上已经优化过了。
上面的一些总结是作者自己在网页排版中一步步总结出来的。 当我们做web前端工程师的时候，可以简单的看懂代码，但是当我们做一个兼顾网站建设和运营的web前端工程师的时候，我们还要兼顾感受和网站优化的难易程度对于搜索引擎。
