第一讲：WEB前端开发是做什么的及需要学习那些内容
WEB前端开发工程师要做什么？
答：做PC端和移动端的网页并解决用户体验的问题。
WEB前端开发工程师具体要学习什么内容及必备条件？
答：必备条件：（1）能上网、会打字、懂得互联网、用过搜索引擎。
（2）有浓厚的兴趣。
（3）肯做联系，勤敲代码。
学习内容：（1）软件：
浏览器[谷歌、IE、火狐、苹果]
浏览器插件
用来写代码的编辑器：记事本、DW、Sublime···
用来处理图片的工具：PhotoShop
※（2）语言：
HTML
CSS
JavaScript
第二讲：HTML语言是什么
HTML超文本标记语言
超：超出文本。一个网页不只有文本还有声音有图片有视频。
文本：文本形式。
语言：和浏览器打交道的，与浏览器进行沟通。
标记、标签：<html> <不能出现汉字>
标签对：<html>（标签头）
<head>（头部头）
<title>标题-title（可以出现汉字）</title>（标题）
</head>（头部尾）
<body>（主体头）
内容-content
</body>（主体尾）
</html>（标签尾）
单标签：<meta /> <img /> /:表示结束。
<!doctype html>：写一个文档，类型是html。写在<html>前，大小写都可。
<meta charset=”UTF-8”/>：文档的翻译器，识别各国语言，防止出现乱码。
记事本编辑器使用此语句时：保存时把编码换至UTF-8。
写在<head>后。
DW、Sublime等编辑器自带文本格式。
DW：自带文本格式。
Sublime：先打出“！”，再按ctrl+E，自动生成文本格式。
第三讲：CSS语言和JS语言介绍及演示
CSS：层叠样式表
<body>写在主体内</body>
<div>aaaa</div>（把内容包起来，给内容加外观）
加样式：<div style=”width : 200px; height : 200px; background:red;border:8px solid red;”>（英文输入法）
样式=属性名称：值 ；
width:宽 height:高 px：像素 background：背景颜色
border：边框 solid：实线 font-size：字体
加图片：浏览器中的图片：右键--复制图片网址
background:url(图片地址);
加过渡时间：transition : 1s（时间1秒）结合JavaScript使用。
JavaScript：脚本语言 （行为，网页做动态变化）
<div onclick=”this.style.width = ‘800px’;this.style.height = ‘400px’;” style=”width : 100px; height : 100px; background:red;border:8px solid red;”>
onclick=”this.style.width = ‘800px’;”
点击时发生=”这个图片.样式.属性名称=’变化后的量’;”
与样式不同的是：样式：属性名称：值
JavaScript：属性名称=’ 值 ‘
第四讲：记事本、sublime、DW介绍
记事本 打码时无提示
代码生成：自行打码
<!doctype html>
<html>
<head>
<meta charset=”UTF-8”/>
<title></title>
</head>
<body>
</body>
</html>
字体放大：格式--字体
折叠代码：无法实现
效果呈现：保存.html文件，双击桌面文件。
Sublime 打码时有提示
代码生成：先打出“！”，再按ctrl+E，自动生成文本格式。
字体放大：ctrl+滚动滑轮
折叠代码：点击标签前面数字的箭头
效果呈现：保存.html文件，右键代码--在浏览器中打开。
DW： 打码时有提示
代码生成：点击“代码”自动生成
效果呈现：拆分：所见即所得。不用保存，立即呈现效果。
第五讲：id选择符、样式出现的位置（行间、内部、外部）
前提步骤：新建html文件--点击代码--桌面新建文件夹--把创建文件保存进去
行间样式表 ：html注释，电脑不识别。
```
<body>
<div style=”width:100px;height:100px;background:red;font-size:30px;”>aaa</div>
<div style=”width:100px;height:100px;background:red;font-size:30px;”>bbb</div>
<div style=”width:100px;height:100px;background:red;font-size:30px;”>ccc</div>
</body>
行间样式表：代码在一行，比较直观简单，命令只作用在一个元素上。
内部样式表
```
<head>
<meta charset=”UTF-8”/>
<title></title>
<style>（样式标签）#是id的意思
#div1{
width:100px;
height:100px;
background:red;
}
#div2{
width:100px;
height:100px;
background:red;
}
</style>
</head>
<body>
<div id=”div1（英文开头）”>aaa</div>
<div id=”div2（英文开头）”>bbb</div>
</body>
外部样式表
```
<head>
<meta charset=”UTF-8”/>
<title></title>
<link rel=”stylesheet” href=”（此处点击连接，选择要连接的样式表）”>（创建连接）
</head>
<body>
<div id=”div1”>aaa</div>
<div id=”div2”>bbb</div>
</body>
用记事本写样式：
#div1{
width:100px;
height:100px;
background:red;
}
保存到桌面的文件夹中 样式表的后缀.css 名字不可以是中文
通过改变外部样式表，改变页面样式。
第六讲：常用样式：单位值种类、颜色值模式、背景图片、平铺、背景定位
常用样式 /**/CSS注释
<head>
<meta charset=”UTF-8”/>
<title></title>
<style>
#div1{
width:200px;（单位值种类：px 像素 % 百分比 mm 毫米）
height:200px;
background-color:red;（颜色值模式：英文单词，16进制--#，rgb()）
background-image:url(img/1.jpg（路径）);（背景图片默认状态下是平铺）
background-repeat:no-repeat;（不平铺）
background-repeat:repeat-x;（x轴平铺）
background-repeat:repeat-y;（y轴平铺）
background-position:100px 30px;（背景定位：x y 不写项为居中）
background-position:10% 30%;
（英文方式：x : left center right y : top center bottom）
（background-repeat:repeat-x;
background-position:40px 0px; 平铺x轴，右移40像素，左边不会留空白）
（background-repeat:no-repeat;
background-position:-40px -30px; 可以设负值，图片缩进）
}
</style>
</head>
<body>
<div id=”div1”></div>
</body>
第七讲：背景中scroll的设置、复合样式（简化单一样式）
scroll的设置 <br/>换行符
<head>
<meta charset=”UTF-8”/>
<title></title>
<style>（不加名字可以直接写body）
body{
height:3000px;
background-image:url(img/1.jpg);
background-repeat:no-repeat;（如果是0，px可省）
background-attachment:fixed;（固定定位）
background-attachment:scroll;（可滚动，不加此句默认滚动）
}
</style>
</head>
<body>
</body>
单一样式
background-image:url(img/1.jpg);
background-repeat:no-repeat;
background-position:center 0px;
background-attachment:fixed;
复合样式
background:url(img/1.jpg) no-repeat center 0px fixed;（位置可以随意换）
第八讲：边框
<head>
<meta charset=”UTF-8”/>
<title></title>
<style>
#div1{
width:400px;
height:400px;
border:1px dashed #033;（粗细1像素，虚线，颜色）
background:red;
}
</style>
</head>
<body>
<div id=”div1”></div>
</body>
样式：solid 实线 dashed 虚线 dotted 点画线（像素过高在不同浏览器中会出现兼容问题）
border-top:10px solid red;（上部）
border-bottom:10px solid yellow;（下部）
border-left:10px solid blue;（左部）
border-right:10px solid green;（右部）
第九讲：PS切图快捷键操作、印屏幕、浏览器插件获取WEB图片
PS技术：切图（抠图）、测量、图片简单的处理
如何得到一张图片：（1）设计师给的PS图片，格式（.psd）
（2）印屏幕：PrtSc
打开PhotoShop--新建ctrl+n--粘贴ctrl+v
放大 ctrl++ 双击放大镜还原 缩小ctrl+- 拖拽 ：空格
抠图：选框工具+添加选取+从选取中减去+与选取交叉
保存：ctrl+c 新建 ctrl+n 尺寸不变 背景内容：透明
存储为WEB 和设备所用格式 选择gif
拾色器：填充颜色 选中--油漆工具（alt+del）前景色
（ctrl+del）背景色
拉伸：ctrl+t 渐变
（3）浏览器的插件F12 移动鼠标 右键图片地址
第十讲：网易新闻小结构实例
反选 ctrl+shift+i
嵌套包含关系
```
<div id=”box”>
<div id=”title”></div>（缩进 TAB）
<div id=”content-1”></div>
<div id=”content-2”></div>
</div>
```
切换模式 f 可拖拽
测量 选中--F8
渐变 取小像素 平铺
验证方法：100%的状态下进行比较 印屏幕