WEB前端开发工程师

编辑器 DW，Sublime,记事本

浏览器火狐，IE浏览器......

浏览器插件F12

Photoshop

语言:

一.HTML:超文本标记语言，与浏览器打交道，主结构。

<meta charset="UTF–8">识别各种语言

1.标记，标签<html>

2.单标签<meta/><img/>

3.标签对<html></html><body></body>

注释:doc文件

type类型

px像素

<brl> 换行

二.CSS:层叠样式表起装饰作用

<div>内容</div>加格子

<div style="width:200px;">F12就可以看见格子

注释:background:url+链接地址;表背景

transition:1s; 表过渡

三.JavaScript:脚本语言（行为）动起来

<div. onclick="this.width='800px;this.height='400px">把以前的格子改成宽800，长400的格子。

编辑器:

记事本保存时名.html

sublime.!+Ctrl+E. 保存时名sublime.html右键在浏览器打开。Ctrl+滑动滑轮字体可变大变小。

注释html

/* */注释CSS样式表

行间样式表<div style=" ">内容 </div>

内部样式表<style>

#div{

width:100px;height:100px;

}

</head>

<body>

<div id="div1">aa</div>

</body>

外部样式表

新建

#div1{

width:100px;

background:red;

}

之后

在<head>之前

<link rel="stylesheet" ref="名.css">

<body>

</body>

单一样式

background-color:颜色单词/# 十六进制/rgb( )

background-image:url(）链接图片

/* 默认状态下，背景会平铺 */

background-repeat:no-repeat/repeat-x/repeat-y;

/* 重复 */

background-position:100px 30px;100% 30%;

X left center right

Y top center bottom

如果left其余的那个默认居中；如果bottom其余的默认居中。

background-attachment:fixed或scroll;固定背景或滑动背景。

复合样式

background:#ccc url(链接地址) no-repeart；

边框

border: 1px dashed虚线或solid实线或dotted点画线 #033

/* 复合样式 */

border-right:

border-top:

brder-left:

border-bottom:

PS技术

切图测量图片简单处理

印屏幕 prtsc sysrq

浏览器插件F12

快捷键

切入 Alt+Tab

复制 Ctrl+V

粘贴新建 Ctrl+N

放大缩小Ctrl+Ctrl-

删除 Alt+delete

ctrl+z

取消边框ctrl+D

抹掉Ctrl+t 回车或双击 Ctrl+D

学习笔记