"俗话说，出来江湖混的，持善良之心，怀正义之气，总有志同道合者共相为谋。而HTML也有这么几个大哥们er、小兄dei、小宝贝儿。他们一起干大事，为服务好普罗大众贡献自己一份力量，接下来让我们一起走进他们吧。"
——有心人做有心事哦，晚安EmilyChen！
（一）WEB初识
【1】浏览器
| 五大主流浏览器 | 开发团队或浏览器内核简称 | CSS3特定属性（新属性加前缀） |
|---|---|---|
| Chrome | webkit | -webkit-transform |
| Safari | webkit | |
| IE | ms | |
| Firefox | moz | |
| Opera | o | |
| 浏览器内核（渲染内核和js内核，前者渲染代码，计算显示方式，进而读取呈现页面；后者偏向于动态效果的展示） | ||
【2】web标准
浏览器编写的代码统一规范，让浏览器尽可能显示一致的效果①由此依据，内容能被更广泛的设备访问
②方便代码维护，提高页面加载速度
③网站流量的费用就降低了
④更容易被搜索引擎搜索
⑤让web的发展前景更广阔
（二）SEO规范
（Search Engine Optimization）搜索引擎优化【1】浏览器标签页title 标题
控制在28个字符最佳，网站名（或产品名）-网站的介绍【2】Keywords 关键字
6~8个关键字最佳，电商类网站可以多些【3】Description 网站说明
字符数含空格不超过120个汉字最佳 补title、Keywords未能充分的描述 用英文逗号隔开： "关键字1,关键字2"【4】LOGO
加个h标题，告诉搜索引擎这里很重要--h里放个链接--链接里加个网站名和title提示，便于搜索引擎收录（三）IDE
（Integrated Department Environment）集成开发环境，又叫代码编辑工具【1】常用
Dreamweaver Sublime Text WebStorm VScode【2】Emmet语法
- 页面骨架：！ 按下tab键
- 多个子元素：ul>li*6
- 序列化：h$*6
- 内容化：h｛学生｝*6
- 带名：.div #div
- 复制粘贴上下行：光标到对象，shift+alt+↑或↓
- 多行选择：光标到对象，shift+alt+按下拖动光标
- 查询：ctrl+h
- 替换：ctrl+alt+enter
（四）切图
【1】Cutterman是个嵌入正版PhotoShop的一个快速成图的插件，便于web前端与UI设计工作上的对接
【2】比PS更小巧的就是Framework，建议用此软件进行精灵图的代码书写
精灵图（sprite），因谐音又叫雪碧图
把大量小图片集中于一张大背景图，一般用svg格式会好点- 优点：可应用于大量的矢量小图标，减少服务器请求次数，加快页面加载速度，提升用户体验
- 代码：background：url（）no-repeat position
- 切记：position是根据切图软件选取对象的x,y坐标而定，且多为负值