WEB前端开发工程师
PC端(电脑) -页面
移动端(手机) -页面 ---- 用户体验问题
需要：
1、软件（工具 占5%）：
浏览器（谷歌、IE浏览器、火狐浏览器、苹果浏览器...）
浏览器插件（谷歌浏览器插件F12）
用来写代码的编辑器（例如：记事本、DW、Sblime...）
2、编程语言（占95%）：
HTML5 ：超文本标记语言 --------骨架
<!ductype html> 大小写不区分
<html> 开始 标签对
<head> 头部 开始
<meta charset="utf-8" /> 类似翻译 单标签
<title>标题（可以随便文体）-title</title>
</head> 头部 结束
<body> 主体 开始
内容1-content
换行符
内容2-content
</body> 主体 结束
</html> 结束
CSS3：层叠样式表 ----------装饰
<div style="表格规格 见下">内容</div> 表格
width : 200px; 宽度 “:”表示分隔 “;”表示停止
height : 200px; 长度 “px”表示单位像素
transition : 1s; 过渡 属JavaScript动作
font-size:30px; 字体
border : 8px solid red; 边框 “solid”表示实心（用到了复合样式）
background : red; 背景 加颜色
background : url() 背景 加图片地址 “url”表示链接 经常用
JavaScript：脚本语言 -----------行为
<div onclik="this.style.width='800px';"> “onclick”表示点击 “.”表示“的”
HTML注释的格式：
CSS和JavaScript注释的格式：/* 注释内容 */
样式出现的位置（行间、内部、外部）
1、外部（实际应用）：在head里<link rel="stylesheet" href="此处有链接"/>
2、内部（讲课多用）：上面写代码 下面写名称和元素
<head>
<title>标题</title>
<style> 内部上面写代码
div1{ “#”标识下面的“id”以｛｝结尾
width:100px;
}
</style>
</head>
<body>
<div id="div1">内容</div> 内部下面写名称和元素
</body>
3、行间（哪都少用）：
<div style="表格规格 见下">内容</div>
width : 200px;
height : 200px;
transition : 1s;
border : 8px solid red;
background : red;
background : url()
颜色值模式：
background-color:red; 直接接英文单词 red green blue pink yellow...
background-color:#(); 16进制 “#”后出来一个吸管 自带代码
background-color:rgb(140,164,234); 麻烦 需要到画图中找3个颜色值
background的所有属性：
background-color 规定要使用的背景颜色
background-position 规定背景图像的位置
background-size 规定背景图片的尺寸
background-repeat 规定如何重复背景图像
background-origin 规定背景图片的定位区域
background-clip 规定背景的绘制区域
background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动
background-image 规定要使用的背景图像（当既有背景颜色 也有背景图片时 背景图片更高级）
background-image:uel() “url”表示链接 可加网址地址 也可加图片的路径 “/”表示“的”
当直接加以上内容时 默认状态为“平铺”（从左上到右下）
background-repeat:
no-repeat; 不重复
repeated-x x轴平铺（水平平铺）
repeated-y y轴平铺（垂直平铺）
background-position:
背景定位： x y
100px 30px 数值 可为正负 （x/y中间不加任何东西 直接“x+单位 y+单位”如果数值是0px 则可直接写“0”省略单位）
20% 50% 百分比是基于背景颜色
left | center| right top | center | bottom 英文单词类 左/中/右 上/中/下
如果只给一个坐标 则给出为x坐标（可以为px/%/英文单词） y则默认为“center”（中间）
网站常用头部背景设置：
background-image:url()
background-repeat:repeat-x;
background-position:center 0px; （水平设置）
background-attachment:
fixde; 固定 滚动条动而界面的图片始终存在
scroll 滑动 一般可省略
复合样式：
background:red url() no-repeat 100px 0px fixed; 将所有的简单样式结合在一起 各属性之间空格隔开即可 各属性位置任意 方便快捷
边框：
border:1px dashed #033; 复合样式 “dashed”表示虚线 “solid”表示实线 “dotted”表示点划线（介于实线和虚线之间）
像素 虚线 颜色
PS：切图（抠图）、测量、图片简单的处理
Ctrl + N 对一般软件都是“新建”
Ctrl + S “保存”
在PS中 按“F”可简略界面 选中截好后 按“F8”出现信息界面（高度、宽度）
