前端开发学习之一------前端开发是什么以及我们要学什么
1.web前端开发工程师是做什么的
简单地说，就是要与网站打交道
2.成为一名web前端工程师需要具备的条件
①兴趣
②敲代码（实践、需要去练习）
3.Web前端开发工程师需要学习什么（重点：HTML，CSS，JavaScript硬性指标）
①软件（代码的辅助工具）
浏览器：浏览器有非常多，（谷歌Chrome（性能比较稳定），火狐，IE）（访问网站必须通过浏览器，所以需要了解浏览器基础功能）
浏览器调试工具：F12可以快捷打开，或者：右键--->检查
编辑器：写代码的工具，HBuilder、sublime、Dreamweaver
PS：Photoshop处理图片
②语言（计算机编程语言）（与网站沟通的语言）
HTML（结构：如房屋结构）：超文本标记语言
语言：与浏览器你沟通的一个方式
标记（标签）：<>（必须放在一对尖括号当中）如<html> </html>这样表示HTML这句话说完了“/”或者<meta />,meta是个单标签
文本：文本就是语言
超：网页中不光可以放文本，还可以放图片、视频、音乐
例如：采用Hbuilder写一个简易的网页，一个网页就像人一样有头有身体，网页也大致相同，有head，有body，也对应人体身体结构，如下所示：
<!doctype html><!--doc就是document的缩写 文档头声明-->
<html>
<head>
<meta charset="utf-8"/><!-- character set设置编码格式 -->
<title>这里是标题</title>
</head>
<body>
这是我的第一个网页
</body>
</html>打开刚刚编辑的文件所在的位置，会发现有一个html结尾的文件，双击打开网页中就可以显示
可以看到刚刚编辑的title和body里文字的位置。
CSS（样式，如：房屋的样式，房屋里的地板砖颜色，款式等等）：层叠样式表
width:200px;
height:300px;
background:red;等等
网页是有很多方块组成，如下大大小小不同方块
画方块我们要用一个div标签（双标签）：<div>...... </div>在双标签中进行编写样式，而css就是用来控制div长什么样子，有多大，字体多大，什么颜色等。添加前也必须先找到你要添加的这个方块位置。下面在hbuilder中举例子：
<!-- 注意全部为英文格式下输入-->
<!doctype html><!--doc就是document的缩写 文档头声明-->
<html>
<head>
<meta charset="utf-8"/><!-- character set设置编码格式 -->
<title>这里是标题</title>
</head>
<body>
这是我的第一个网页
<div style="width:200px;height:300px;">
<!-- px代表像素,width表示宽，height表示高，每条命令结束后记得分号-->
这是一个方块
</div>
</body>
</html>但是查看网页时，并没有多大变化：
然后我们通过上述所讲的浏览器调试工具来查看一下：
那么怎么做才能更直观地将写入的方块展示在我们眼前呢？a添加一个背景
<div style="width:200px;height:300px;background:red;">
<!-- 1.px代表像素,width表示宽，height表示高，每条命令结束后记得分号-->
<!-- 2.background:red 为这个方块添加一个红色的背景，方便我们观察-->
这是一个方块
</div> 查看一下此时网页的状态，可以发现这时的div和这是一个方块这句话相结合起来的，也就是这是一个方块是css样式的内容
b添加一个边框，对style进行修改
<div style="width:200px;height:300px;border:5px solid red;">
<!-- 1.px代表像素,width表示宽，height表示高，每条命令结束后记得分号-->
<!-- 2a.background:red 为这个方块添加一个红色的背景，方便我们观察-->
<!-- 2b.border:5px solid red；为这个方块添加一个边框，10像素、实线、红色的边框，方便我们观察-->
这是一个方块
</div> c.给背景添加一张图片
简单的百度一张图片，右键复制图片地址
<!-- 2c.background:url()；括号里放置图片地址-->
<div style="width:200px;height:300px;background:url(http://p1.so.qhimgs1.com/bdr/_240_/t01f0c2ec21427f5ded.jpg);">
<!-- 1.px代表像素,width表示宽，height表示高，每条命令结束后记得分号-->
<!-- 2a.background:red 为这个方块添加一个红色的背景，方便我们观察-->
<!-- 2b.border:5px solid red；为这个方块添加一个边框，10像素、实线、红色的边框，方便我们观察-->
<!-- 2c.background:url()；括号里放置图片地址-->
这是一个方块
</div> 查看一下此时网页形式
可以发现图片的显示是有点问题的，因为这个方块设置的大小有点问题 ，此时可以使用刚所说的浏览器调试工具重新设置方框大小。但是一刷新还是会变回去，所以浏览器调试工具里面的更改只是暂时的，它只是能够直观的让我们见到更改后的样子，最根本的更改还是要去代码里更改。
JavaScript（行为，能控制的东西，比如房间里灯的开关）：脚本语言
举个例子：鼠标点击时图片变大，也是在div中编辑
<div onclick="this.style.width='800px';this.style.height='200px'"
style="width:200px;height:200px;background:url(http://p1.so.qhimgs1.com/bdr/_240_/t01f0c2ec21427f5ded.jpg);">
<!-- 1.px代表像素,width表示宽，height表示高，每条命令结束后记得分号-->
<!-- 2a.background:red 为这个方块添加一个红色的背景，方便我们观察-->
<!-- 2b.border:5px solid red；为这个方块添加一个边框，10像素、实线、红色的边框，方便我们观察-->
<!-- 2c.background:url()；括号里放置图片地址-->
<!-- 3.onclick；on当，click点击，当鼠标点击的时候的状态 ;this.style.width表示它的style的宽，点表示的-->
这是一个方块
</div> 点击前：
鼠标点击后：
其实，凡是网页上在动的，能动的也就是网页中的动画就是js来做的，也就是JavaScript做的
<!-- 注意全部为英文格式下输入-->
<!doctype html><!--doc就是document的缩写 文档头声明-->
<html>
<head>
<meta charset="utf-8"/><!-- character set设置编码格式 -->
<title>这里是标题</title>
</head>
<body>
这是我的第一个网页
<div onclick="this.style.width='800px';this.style.height='200px'"
style="width:200px;height:200px;background:url(http://p1.so.qhimgs1.com/bdr/_240_/t01f0c2ec21427f5ded.jpg);">
<!-- 1.px代表像素,width表示宽，height表示高，每条命令结束后记得分号-->
<!-- 2a.background:red 为这个方块添加一个红色的背景，方便我们观察-->
<!-- 2b.border:5px solid red；为这个方块添加一个边框，10像素、实线、红色的边框，方便我们观察-->
<!-- 2c.background:url()；括号里放置图片地址-->
<!-- 3.onclick；on当，click点击，当鼠标点击的时候的状态 ;this.style.width表示它的style的宽，点表示的-->
这是一个方块
</div>
</body>
</html>
综上，举个例子，HTML就是房屋的结构。css是房屋的样式，而js就是房屋里能动的、能操作的东西。样式是依托于结构的，房子想要呈现出不同的样子就必须依托于样式，比如同样的房屋结构，但是不同的装修风格可以使其展示出不同的样子，房屋里的开关这些需要我们去操作的就是js。通过学习了解到如果想做前端开发，那么HTML、CSS、JavaScript这三样东西是硬性指标，是必须要掌握的。
Hbuilder的基本使用
新建一个web项目
新建一个HTML文件
创建成功后
一些基本使用的操作
上一篇： 图解原生dialog标签（非常详细）
下一篇： javascript事件委托