web前端开发工程师
1、web前端开发工程师是做什么的？
与网站打交道
2、成为一名web前端开发工程师具备的条件
1、兴趣
2、敲代码
3、web前端开发工程师需要学习什么
1、软件（代码的铺助工具）
浏览器：浏览器有非常多，（谷歌chrome、火狐、IE）
浏览器调试工具
编辑器：写代码的工具，hBullder、sublime、dreamwever
下载hBullder的地址为：http://www.dcloud.io/
点击下载按钮，下载即可。
ps:photoshop
2、语言(计算机编程语言)
HTML:超文本标记语言的一个方式
标记（标签）：<html></html>,/表示说话完成啦，用/表示。
文本：文本就是语言
语言：与浏览器沟通的一个方式
超：网页中不关可以放文本，还可以放图片，视频、音乐
CSS层叠样式表
width:200px;
height:300px;
background:red;
什么是javascript？
JavaScript：脚本语言（行为）（能控制的东西）:
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
这是我的第一个网页
<div onclick="this.style.width='800px';this.style.height='500px;"style="with:200px;height:300px;background:
url(http://img63.nipic.com/file/20150420/17961491_183615304000_1.jpg)">
这是一个方块
</body>
</html>
css一如方式—行间
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
css出现的位置：行间、内部、外部
行间样式表：给单独的标签添加样式
语法：<div style="width:100px"></div>
缺点：不利于修改
-->
例子如下：
<div style="with:100px;height: 100px;background:red;">div</div>
<div style="with:100px;height: 100px;background:red;">div</div>
<div style="with:100px;height: 100px;background:red;">div</div>
<div style="with:100px;height: 100px;background:red;">div</div>
<div style="with:100px;height: 100px;background:red;">div</div>
<div style="with:100px;height: 100px;background:red;">div</div>
<div style="with:100px;height: 100px;background:red;">div</div>
<div style="with:100px;height: 100px;background:red;">div</div>
<div style="with:100px;height: 100px;background:red;">div</div>
<div style="with:100px;height: 100px;background:red;">div</div>
<div style="with:100px;height: 100px;background:red;">div</div>
<div>div2</div>
</body>
</html>
</body>
</html>
css引入内部方式—内嵌
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
with:100px;
height: 100px;
background:black;
}
</style>
</head>
<body>
<!--
内部样式表：样式表写了一个html文件里面
语法：把样式写在一对<style></style>标签对当中，这个标签对是放在html页面里面的
缺点：内部样式表的作用范围只存在当前的页面
-->
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
css引入方式—外联
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="index.css"/>
</head>
<body>
<!--
外部样式表：把样式写在一个单独写在一个单独文件里，用到的时候用地址把它引进来就可以
div#10按一下tab键
-->
例子如下：
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
重新创建一个index.css
div{
width:100px;
height:100px;
background:blue;
}
设置边框的第一种方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width:300px;
height:300px;
border:1px dotted red;
}
</style>
</head>
<body>
<!--
border:1px dotted red;（位置可以切换，建议不进行切换）
边框（border）的组成
1、边框的粗细 1px代表
2、边框的样子
solid代表实线
dashed代表虚线
dotted代表点划线（不同的浏览器显示的是不一样的）
3、边框的颜色
red 颜色的英文单词
#f00 颜色的16进制表示法
rgta（255,0,0,0.5） 颜色的rgb的表示法
-->
<div></div>
</body>
</html>
注：此方法在工作当中常用
设置边框的第二种
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 300px;
height: 300px;
/* border:1px solid red; */
/* 复合样式 */
/* 单一样式 */
border-width: 1px 2px 3px 4px;
border-style: solid dashed dotted solid;
border-color: red green blue black;
/*
*border-width: 1px 2px 3px 4px;
* 上边 右边 下边 左边（注：当有4个值的时候，第一个值代表上边，第二个值代表右边，第三个值代表下边，第四个值代表左边）
*border-style: solid dashed dotted solid;
* 上边 右边 下边 左边（注：当有4个值的时候，第一个值代表上边，第二个值代表右边，第三个值代表下边，第四个值代表左边）
*border-color: red green blue black;
* 上边 右边 下边 左边（注：当有4个值的时候，第一个值代表上边，第二个值代表右边，第三个值代表下边，第四个值代表左边）
*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
设置第二个值得时间
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 300px;
height: 300px;
/* border:1px solid red; */
/* 复合样式 */
/* 单一样式 */
border-width: 1px 2px ;
border-style: solid dashed ;
border-color: red green ;
/*
*border-width: 1px 2px ;
* 上边/右边 下边/左边(注：当有2个值得时候，第一个值代表上边/右边，第二个值代表下边/右边。其它的同理)
*border-style: solid dashed ;
* 上边/右边 下边/左边(注：当有2个值得时候，第一个值代表上边/右边，第二个值代表下边/右边。其它的同理)
*border-color: red green ;
* 上边/右边 下边/左边(注：当有2个值得时候，第一个值代表上边/右边，第二个值代表下边/右边。其它的同理)
*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
设置3个值的时候
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 300px;
height: 300px;
/* border:1px solid red; */
/* 复合样式 */
/* 单一样式 */
border-width: 1px 2px 3px;
border-style: solid dashed dotted;
border-color: red green blue;
/*
*border-width: 1px 2px 3px;
* 上边 右边/左边 下边 (注：当3个值得时候，第一个值代表上边，第二个值代表右边/左边，第三个值代表下边)
*border-style: solid dashed dotted;
* 上边 右边/左边 下边 (注：当3个值得时候，第一个值代表上边，第二个值代表右边/左边，第三个值代表下边)
*border-color: red green blue;
* 上边 右边/左边 下边 (注：当3个值得时候，第一个值代表上边，第二个值代表右边/左边，第三个值代表下边)
*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
设置第三种边框方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width:300px;
height:300px;
border:1px solid red;
border-top:3px solid green;
border-right:1px solid yellow;
border-bottom-width: 10px;
}
</style>
</head>
<body>
<!--
边框的方向
top代表上边框
right代表左边框
bottom代表下边框
left代表左边框
width代表粗细
border-top 上边框
border-top-width代表上边框的粗细
border-top-style代表上边框的样式
border-top-color代表上边框的颜色
border-right 右边框
border-right-width代表右边框的粗细
border-right-style代表右边框的样式
border-right-color代表右边框的颜色
border-bottom 下边框
border-bottom-width代表下边框的粗细
border-bottom-style代表下边框的样式
border-bottom-color代表下边框的颜色
border-left 左边框
border-left-width代表左边框的粗细
border-left-style代表左边框的样式
border-left-color代表左边框的颜色
注：工作中不建议使用此方法进行写
-->
<div>
</div>
</body>
</html>
边框的特征
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width:0px;
height:0px;
border:20px solid red;
border-top-color:blue;
}
</style>
</head>
<body>
<!--
边框是什么形状？
边框是一个非矩形
border:20px solid #fff;#fff代表白色即空白
-->
<div></div>
</body>
</html>
背景颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width:300px;
height:300px;
border:10px solid red;
background-color:green;
background-color:rgba(255,107,35,1);
background-color:#008000;
}
</style>
</head>
<body>
<!--
background-color:#008000;#008000有简写法#080
background代表背景
background-color代表背景颜色
background-image代表背景图片
background-repeat代表图片是否重复
background-position代表背景图片的位置
background-attachment代表背景图片是否滚动
background-color代表背景颜色
颜色的单词
rgba()
#008000代表颜色十六进制表示法
transparent代表背景透明（默认值）
背景颜色会铺满整个容器
内容可以把容器的宽高撑开
背景不会占用容器的宽高
-->
<div>
<这是一段文字>
<img src="images/img.jpg"/>
</div>
</body>
</html>
背景图片与背景图平铺
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width:300px;
height:300px;
border:10px solid red;
background-image:url(http://p1.so.qhimgs1.com/bdr/200_200_/t01a475e7630aaf7131.jpg);
background-repeat:no-repeat;
background-positon:5px top;
}
</style>
</head>
<body>
<!--
background-positon:left 100px;
background-position：x y;背景图片的位置
传数值：（背景图片离左上角的距离）
x：
正值：从容器的左边往右边走的距离
负值：从容器的左边往右边走的距离
y：
正值：从容器的上边往下边走的距离
负值：从容器的上边往上边走的距离
传关键字
x：left代表图片在容器的左边
center：代表图片在容器x轴的中心
right代表图片在容器的右边
y:top代表图片在容器的左边
center代表图片在容器y轴的中心
bottom代表图片在容器的下边
如果只传一个值得花，那另一个值默认值为center
如果两个值都不写的话，那默认为0,0点，左上角
-->
<div>
</div>
</body>
</html>
背景图片的位置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width:1000px;
height:1000px;
border:10px solid red;
background-image: url(http://pic33.photophoto.cn/20141219/0005018343173598_b.jpg);
background-repeat:no-repeat;
background-position:0 10px;
background-position:center 10px;
}
</style>
</head>
<body>
<!--
background-position：x y背景图片的位置
传数值：（背景图片离左上角的距离）
x：
正值 从容器的左边往右边走的距离
负值 从容器的左边往右边走的距离
y:
正值 从容器的上边往下边走的距离
负值 从容器的上边往上边走的距离
传关键字
x：
left 图片在容器的左边
center图片子啊容器x轴的中心
right图片在容器的右边
y:
top图片在容器的上边
center图片在容器的y轴的中心
bottom图片在容器的下边
如果只传一个值得话，那另一个值默认为center
如果两个值都不写的话，那默认为0,0点，左上角
-->
<div></div>
</body>
</html>
背景滚动与background复合属性写法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width:800px;
height:800px;
border:10 px solid red;
background-image:url(http://pic33.photophoto.cn/20141219/0005018343173598_b.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
}
</style>
</head>
<body>
<!--
background-attachment 背景图片是否滚动
scroll 背景图片跟随滚动条滚动（默认）例子background-attachment:scroll;
fixed 背景图片不会跟随滚动条而滚动。例子background-attachment:fixed;
-->
<div></div>
</body>
</html>
复合性写法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width:800px;
height:800px;
border:10px solid red;
/* background-image: url(http://pic33.photophoto.cn/20141219/0005018343173598_b.jpg)
background-position:left top;
background-repeat:no-repeat;
background-attachment:scroll; */
background:green url(http://pic33.photophoto.cn/20141219/0005018343173598_b.jpg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
文字样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
font-weight:bold;
font-family:arial,"华文行楷","宋体","楷体";
}
</style>
</head>
<body>
<!--
font 文字
font-weight 文字着重
font-size文字倾斜
line-height文字行高
font-family字体（中文默认是宋体）
font-weight 文字加粗
weight 加粗
normal正常
font-style 文字倾斜
italic 倾斜
normal 正常
font-size 文字大小
50px 数字加单位
font-family 文字字体
“主要字体”，“备选字体2”表示如果用户电脑上有“主要字体”，就显示“主要字体”，如果用户电脑上没有主要字体，那就显示“备选字体1”，如果用户电脑没有“备选字体1”，就显示“备选字体2”
英文字体，“中文字体”；英文字符使用英文字体，中文字符使用中文字符；
font
-->
<div>欢迎大家来到博日公司</div>
</body>
</html>
行高
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
border: 1px solid red;
}
</style>
</head>
<body>
<!--
行高代表了一行文字在容器中所占的高度
line-height行高
16px 值是数字加单位
如果行高的值与容器的高度相等，那文字就会垂直居中
-->
<div>欢迎大家来到博日</div>
</body>
</html>
行高
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
border: 1px solid red;
}
</style>
</head>
<body>
<!--
行高代表了一行文字在容器中所占的高度
line-height行高
16px 值是数字加单位
如果行高的值与容器的高度相等，那文字就会垂直居中
测量多行文字行高的方法
1、首先要知道文字的大小
2、量小两行文字之间的距离
3、拿上面量出来的距离除上2
如果行高为奇数的话，文字的上边距会小一像素，下边距会多一像素
12 13/2=7.5 6
-->
<div>欢迎大家来到博日</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
border: 1px solid red;
font:bold italic 26px/50px "微软雅黑";
}
</style>
</head>
<body>
<!--
font:font-weight font-style font-size(必需)/line-height font-family(必需)；
-->
<div>欢迎大家来到博日</div>
</body>
</html>
文本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
color:red;
text-align:center;
width:130px;
border:1px solid #000;
text-indent:2em;
font-size:24px;
text-decoration:line-through;
letter-spacing: 10px;
}
</style>
</head>
<body>
<!-- 文本
color 颜色
text-algin 文本的对齐方式
text-indent 首行缩进（em缩进字符）
text-decoration 文本修饰
letter-spacing 字母的间距
word-spacing 单词的间距（以空格来解析）
white-space 强制不换行
color:red;
text-align:center;
color 代表颜色
值为颜色的几种表示方法
text-align:center;
text-algin 文本的对齐方式
left 左对齐（默认）
center 居中对齐
right 右对齐
text-indent 首行缩进
32px 值是数字加单位
text-decoration:underline;
text-decoration 文本修饰
underline 下划线
overline 上划线
line-through 中划线
none
letter-spacing 字母间距
-->
<div>欢迎大家来到李家</div>
</body>
</html>