前端开发概述
什么是前端开发
前端也叫做web前端开发，它指的是基于web的互联网产品的页面（也可叫界面）开发及功能开发。
什么是互联网产品
互联网产品就是指网站为满足用户需求而创建的用于运营的功能及服务，百度搜索、QQ、网易邮箱等都是互联网产品。
前端开发需要哪些技术
前端工程师参照产品的效果图来开发页面（也可叫界面），效果图是由UI工程师用Photoshop（少量设计师用firework）来设计的，为了方便与UI设计师对接工作，前端需要掌握一些Photoshop的技能，Photoshop还可以辅助页面开发。把效果图布局成页面，需要用到HTML语言和CSS语言，页面功能的开发需要用到javascript，为了快速开发和系统开发，还需要学习一些前端的javascript库和框架。
HTML文档概述和基本结构
html概述
HTML是Hyper Text Mark-up Language的首字母缩写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个标签组成，用这种语言制作的文件保存的是文本文件，文件的扩展名为html或htm，一个文件就是一个页面，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网页可以从一个网页连接另外一个网页。
html基本结构
在sublime中新建文件index.html，输入html，然后按tab键，会自动补齐框架，如下所示：
<!DOCTYPE html>
<!-- 这里是自己加的注释（在sublime里面可用ctrl+/对内容进行注释），上面这句话告诉浏览器，这是html5版本的，即文档声明 -->
<!-- 注释不会渲染到页面上 -->
<html>
<!-- 告诉你这是什么文档：html，一个html文件以这个标签开头，以/html结尾 -->
<head lang="zh-CN">
<!-- head里面一般放置网页的元信息（相当于是设置文件 -->
<!-- lang定义了这个网页是什么语言的，如果是英文：“en”，可写可不写 -->
<title>html5大法好</title>
<!-- 网页的标记，即浏览器最上面的标签中要显示的内容 -->
<meta charset="utf-8">
<!-- 告诉浏览器用什么方式解码：utf-8 -->
</head>
<!-- head标签和body标签同级 -->
<body>
<!-- body里面才是网页显示的内容 -->
你好，世 界
<!-- 如果用浏览器打开（在sublime里面文档编辑处，右击，open in browser），就会显示“你好，世界”而且会发现，不论有多少的空白，html只当一个空白，这是html的特性。如果真的要加很多个空格，使用样式即可 -->
<!-- 当然，也可以使用实体转换符（空格： ）来实现显示空格的效果，各实体转换符要用时候百度即可 -->
<br>你好，世 界</br>
<!-- <br>标签表示新起一行 -->
</body>
</html>
<!-- html中标签都是成对出现的，相当于一个容器，比如html里面包含了head，body等 -->
HTML文档类型
常用的两种文档类型是xhtml1.0和html5
xhtml 1.0是html5之前的一个常用的版本
目前最常用的是html5
学习html其实就是学习标签的用法
html标签
网页上显示的内容都是放在body标签里面
html中多个标签可以嵌套，通常写的时候外层和内层间有缩进，但是其实是为了好看，不缩进也行
body内
html标题标签
<h1>这里是一级标题</h1>
<h2>这里是二级标题</h2>
<h3>这里是三级标题</h3>
<!-- 1-6一共6个级别 -->
html段落标签
即p标签，p：paragraph
<p>中间可以放一个段落</p>
字符实体
常用的3个：
空格：&nmsp; <!-- 包括后面的分号，不精确，要精确控制，要用样式 -->
尖括号>：> <!-- gt：greater than -->
尖括号<：< <!-- lt:less than -->
换行标签
<br/> <!-- 在有这个标签的地方就换行 -->
块标签
<div>
div就表示一块内容，
没有语义
<span>
行内元素，表示一行中的一小段内容，没有具体的语义。它本身不带任何的样式，所以如果是仅html中使用这个标签，看不出来差别，往往结合样式使用
</span>
</div>
<!-- 如果是文本，div中的多个段落是挨着的，而p中多个段落间是有空行的 -->
含样式和语义的标签
标签的语义通常用在面试上，用的时候常常不怎么注意
<em>：行内元素，表示语气中的强调，em：emphasize，本身带样式——倾斜，其实只是为了给样式而已
<i>：行内元素标签，表示专业词汇，本身带样式——倾斜
<b>：行内元素，表示文档中的关键字或产品名，本身带样式——加粗，b：bold
<strong>：行内元素，表示非常重要的内容，通常是把一段非常重要的内容包起来，本身带样式——加粗
语义化的标签
语义化的标签，就是在布局的时候多使用有语义的标签，搜索引擎在爬网页的时候能认识这些标签，理解文档的结构，方便网站的收录。比如：h1标签表示是标题，p标签表示是段落，ul，li标签表示列表，a标签表示链接，dl，dt，dd表示定义列表等，语义化的标签不多
html图像标签
<img>标签可以在网页上插入一张图片，它是独立使用的标签，它的常用属性有：
1. src="./images/pic.png"，定义图片的引用地址
2. alt=""，定义图片加载失败时显示的文字，搜索引擎会使用这个文字收录图片，盲人读屏软件会读这个文字让盲人识别图片，所以此属性相当重要
具体用法：
<img src="./images/pic.png alt="这里是对图片的文字描述" />
绝对路径和相对路径
相对路径：相对于网页文件本身，./表示当前路径，可以省略
绝对路径：文件迁移能力差，一般不用，相对于磁盘的位置，eg：C:\users...\pic.png
html链接标签
<a>标签可以在网页上定义一个链接地址，它的常用属性有：
1. href属性 定义跳转的地址
2. title属性 定义鼠标悬停时弹出的提示文字框
3. target属性 定义链接窗口打开的位置，有_self：缺省值，新页面替换原来的页面，在原位置打开；_blank：新页面会在新开的一个浏览器窗口打开
具体用法：
<a href="www.baidu.com" title="百度一下" target="_self">跳转到百度</a>
<!-- 注意：跳转到新的页面后，建议在新的页面添加一个跳转回去的链接 -->
<!-- 用图片进行超链接 -->
<a href="www.baidu.com" title="去到百度"><img src="./images/baidu.png" alt="百度一下" /></a>
<a href="#" title="这是一个缺省链接，默认链接到页面底部"></a>
列表
列表分为有序列表和无序列表
- 有序列表
实际开发过程用得不多
<ol>
<li>
列表文字一
</li>
<li>
列表文字二
</li>
<li>
列表文字三
</li>
</ol>
- 无序列表
一般用在新闻列表
<ul>
<li>
新闻标题1
</li>
<li>
<a href="#">新闻标题2</a>
</li>
<li>
新闻标题3
</li>
</ul>
关于标签li的记忆：list，ol：ordered list，ul：unordered list
- 定义列表
定义列表通常用于术语的定义。<dl>标签表示列表的整体。<dt>标签定义术语的题目。<dd>标签是术语的解释。一个dl中可以有多个题目和解释，代码如下：
<h3>前端三大块</h3>
<dl>
<dt>html</dt>
<dd>负责页面的结构</dd>
<dt>css</dt>
<dd>负责页面的体现</dd>
<dt>javascript</dt>
<dd>负责页面的行为</dd>
</dl>
</body>
记忆：dt中的t可以理解为title，dd中第二个d可以理解为description
html表格
<table>标签，声明一个表格，它的常用属性如下：
1. border属性，定义表格的边框，设置值是数值
2. cellpadding属性，定义单元格内容与边框的距离，设置值是数值
3. cellspacign属性，定义单元格与单元格之间的距离，设置值是数值
4. align属性，设置整体表格相对于浏览器窗口的水瓶对齐方式，设置值有：left | center | right
<thead> 定义表格的表头,thead元素应该与tbody和tfoot元素结合起来使用。
<tbody> 放数据本体
<tfoot> 放表格的注脚
每个页面都有head ,body两部分，对于比较复杂的页面，页面的排版用到了很多的表格，表格的结构也就相对的复杂了，所以又将表格分割成三个部分：题头、正文和脚注。而这三部分分别用:thead,tbody,tfoot来标注。但是真正写的时候，可以只用th和td和tr
<tr>标签：定义表格中的一行，table row
<td>和<th>标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格——h可以记忆为header，th默认居中加粗，他们的常用属性如下：
1. align：设置单元格中内容的水瓶对齐方式默认left，设置值有：left | right | center
2. valign：设置单元格中内容的垂直对齐方式，记忆：vertical align，top | middle | bottom
3. colspan：设置单元格的水平合并，设置值是数值
4. rowspan：设置单元格的水质合并，设置值是数值
用法示例：
<table border="1" width="300" height="200" align="center">
<!-- 设置表格边框为的像素为1，整个表格的宽度为300，高度为200，居中对齐 -->
<tr>
<th>一</th>
<!-- th默认加粗 -->
<th>二</th>
<th>三</th>
</tr>
<tr>
<td align="left">1</td>
<!-- 设置内容左对齐 -->
<td align="center">2</td>
<!-- 设置内容居中对齐 -->
<td align="right">3</td>
<!-- 设置内容右对齐 -->
</tr>
<tr>
<td valign="top">1</td>
<!-- 设置内容靠上 -->
<td valign="top" align="center">2</td>
<!-- 设置内容靠上水平居中 -->
<td valign="top">3</td>
</tr>
</table>
示例2：
<table border="1" width="600" height="300" align="center">
<tr>
<td colspan="5" height="20%">基本情况</td>
<!-- 合并单元格：实际上只有一个格子，但是占据5个的宽度 -->
</tr>
<tr>
<td width="20%"></td><!-- 设置格子宽度为表格的20% -->
<td width="20%"></td>
<td width="20%"></td>
<td width="20%"></td>
<td rowspan="5" width="20%"><img src="./me1.png" alt="胡歌的图片" /></td>
<!-- 纵向合并5个格子为一个：实际上是把高度拓展到5个格子的高度，所以下面每行的格子数少1 -->
<!-- 注意：图片不能超出单元格的大小，否则表格格式会被破坏 -->
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
视频与音频
<audio src="音频的地址" controls="true | false">这里插入的内容当浏览器不支持audio元素时展示</audio>
<!--controls表明显示控制条 -->
<video src="视频地址" controls="true | false" loop="true | false" preload="none | metadata | auto" width="数值" height="数值" autoplay="true | false">浏览器不支持时显示的内容</video>
视频与音频的属性是一样的，常用属性如下：
src：视频或音频的来源
controls：是否显示控制条
loop：是否循环播放
preload：是否预加载，none：不预加载，metadata：部分预加载，auto：全部预加载（默认值）
width/height：设置视频播放区域的宽度和高度
autoplay：是否自动播放
页面布局
布局也可以叫做排版，它指的是把文字和图片等元素按照我们的意愿有极地排列在页面上，布局的方式分为两种：
- table布局：通过table元素将页面空间划分成若干个单元格，将文字或图片等元素放入单元格中，隐藏表格的边框，从而实现布局。这种布局方式也叫传统布局。
- HTML+CSS布局（DIV+CSS）：主要通过CSS样式设置来布局文字或图片等元素，需要用到CSS盒子模型、盒子类型、CSS浮动、CSS定位、CSS背景图定位等知识来布局，它比传统布局要复杂，目前是主流的布局方式。
table方式
table来做整体页面的布局，布局的技巧归纳为如下几点：
- 按照设计图的尺寸设置表格的宽高以及单元格的宽高
- 将表格的border、cellpadding、cellspacing全部设置为0
- 针对布局复杂的布局，可以在单元格里面再嵌套表格，嵌套表格划分布局的空间
- 单元格中的元素或者嵌套表格用align和valign设置对齐方式
- 通过属性或css样式设置单元格中元素的样式
应用：制作简历
<!DOCTYPE html>
<html>
<head>
<title>个人简历</title>
<meta charset="utf-8">
</head>
<body topmargin="0">
<table width="800" height="800" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="260" valign="top" bgcolor="#f2f2f2">
<table width="200" border="0" cellpadding="0" cellspacing="0" align="center">
<tr height="100"></tr>
<tr>
<td><img src="./头像.jpeg" title="个人头像" width="150" height="150"></td>
</tr>
<tr>
<td>张达山</td>
</tr>
<tr>
<td>18323954188</td>
</tr>
<tr>
<td>zhagndashan@126.com</td>
</tr>
</table>
</td>
<td width="30"></td>
<td width="480" valign="top">
<table width="480" cellspacing="0" cellpadding="0">
<tr height="80"></tr>
<tr>
<td align="right"><img src="./resume.jpg" width="250" height="100"></td>
</tr>
</table>
<br>
<!-- <br>的作用是加一个空行 -->
<hr />
<!-- <hr>的作用是画一条线 -->
<table width="480" height="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2"><b>个人基本情况</b></td>
</tr>
<tr>
<td><b>姓 名：</b>张达山</td>
<td><b>籍 贯：</b>北京昌平</td>
</tr>
<tr>
<td><b>性 别：</b>男</td>
<td><b>身 高：</b>174cm</td>
</tr>
<tr>
<td><b>民 族：</b>汉</td>
<td><b>体 重：</b>70kg</td>
</tr>
<tr>
<td><b>出生日期：</b>1992-09-23</td>
<td><b>电 话：</b>18223954188</td>
</tr>
<tr>
<td><b>专 业：</b>工业设计</td>
<td><b>现居住地：</b>昌平天通苑</td>
</tr>
</table>
<br>
<br>
<table width="480" height="80" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><b>教育背景及工作经历</b></td>
</tr>
<tr>
<td><b>2008.09-2011.06</b></td>
<td>北京邮电大学 工业设计专业</td>
</tr>
<tr>
<td><b>2011.06-2012.09</b></td>
<td>北京微创信息科技有限公司 前端开发工程师</td>
</tr>
</table>
<br>
<br>
<table width="480" height="80" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><b>所获荣誉</b></td>
</tr>
<tr>
<td width="70"><b>2008年</b></td>
<td>荣获“高级美术设计师”证书</td>
</tr>
<tr>
<td width="70"><b>2011年</b></td>
<td>荣获“优秀毕业生”称号</td>
</tr>
</table>
</td>
<td width="30"></td>
</tr>
</table>
</body>
</html>
HTML表单
表单用于搜集不同类型的用户输入，表单由不同类型的标签组成，相关标签及属性用法如下：
1. <form>标签 定义整体的表单区域
action属性 定义表单数据提交地址
method属性 定义表单提交的方式，一般有“get”方式和“post”方式，默认为get方式，即通过地址栏提交。对于敏感信息，通常通过post方式提交
2. <label>标签 为表单元素定义文字标注
for属性，配合input中type为text（需要指定id属性）时使用，for="input中id的值"
3. <input>标签 定义通用的表单元素
type属性：
="text" 定义单行文本输入框
="password"定义密码输入框
="radio"定义单选框
="checkbox"定义复选框
="file"定义上传文件
="submit"定义提交按钮
="reset"定义重置按钮
="image"定义图片作为提交按钮，用src属性定义图片地址
="hidden"定义一个隐藏的表单区域，用来存储值
代码示例：
<!DOCTYPE html>
<html>
<head>
<title>表单实例</title>
<meta charset="utf-8">
</head>
<body>
<h1>注册表单</h1>
<form action="">
<!-- action定义提交地址，空表示提交到当前页面 -->
<!-- 因为提交的信息有敏感信息，所以通过Post方式提交 -->
<p>
<label for="username">用户名：</label>
<!-- label标签用来定义表单中下一个元素的文字 -->
<!-- 使用for属性，使点击文字的时候就能够将光标定位于输入框中 -->
<input type="text" name="username" id="username" />
<!-- 单个标签在后面空格加/ -->
<!-- 每一个表单控件（元素）都必须要有一个name属性，是通过这个属性去提交数据的，name属性相当于键名 -->
<!-- 对于要用户输入的，用户输入的内容就相当于键值；对于选择框，其中的value就相当于键值 -->
<!-- 如果不写name属性，则不能提交 -->
</p>
<p>
<label>密 码：</label>
<input type="password" name="password">
<!-- 密码输入框，输入时显示为小黑圆点 -->
</p>
<p>
<label>性 别：</label>
<input type="radio" name="gender" value="0">男
<input type="radio" name="gender" value="1">女
<!-- name一样的的时候就只能选择一个 -->
<!-- 复选框的name通常一样 -->
<!-- 如果有value属性，提交的时候就提交值；如果没有这个属性，提交的时候就显示的是on -->
</p>
<p>
<label for="favorite">爱 好：</label>
<input type="checkbox" name="sing" id="a"><label for="a">唱</label>
<!-- 使用id属性和for属性，使点击“唱”这个文字时，就能够选中对应选择框 -->
<input type="checkbox" name="dance">跳
<input type="checkbox" name="rap">rap
<input type="checkbox" name="python">python
</p>
<p>
<label>头 像：</label>
<input type="file" name="pic">
</p>
<p>
<label>个人介绍：</label>
<textarea name="introduce"></textarea>
<!-- 多行文本输入框 -->
</p>
<p>
<label>籍 贯：</label>
<select name="site">
<!-- select声明一个下拉的表单空间 -->
<!-- 与option(声明下拉菜单中的选项)配合使用 -->
<option value="1">北京</option>
<option value="2">河南</option>
<option value="3">河北</option>
<option value="4">重庆</option>
<option value="5">四川</option>
<option value="6">广西</option>
</select>
</p>
<p><input type="hidden" name="hid01" value="123"></p>
<!-- 创建隐藏表单域，它的作用通常是在页面上存储一个值，然后提交的时候一起提交 -->
<p>
<input type="submit" name="" value="提交">
<!-- 创建提交按钮 -->
<!-- value定义了按钮上显示的文字 -->
<input type="reset" name="" value="重置">
<!-- 创建重置按钮 -->
<input type="image" name="submit" src="./submit.jpeg">
<!-- 创建图片提交按钮 -->
<!-- 图片提交一般会导致提交两次，不建议使用 -->
</p>
</form>
</body>
</html>
HTML5新增标签
新增语义标签
1. <header> 页面头部，页眉
2. <nav> 页面导航
3. <article> 一篇文章
4. <section>文章中的章节
5. <aside> 侧边栏
6. <footer> 页面底部、页脚
音频视频
PC端兼容h5的新标签的方法，在页面中引入以下js文件
<script type="text/javascritpt" src="//cdn.bootcss.com/html5shiv/r29/html5.js"></script>
表单控件
新增类型：网址 邮箱 日期 时间 星期 数量 范围 电话 颜色 搜索
<label>网址：</label><input type="url" name="" required><br><br>
<label>邮箱：</label><input type="email" name="" required><br><br>
<label>日期：</label><input type="date" name=""><br><br>
<label>时间：</label><input type="time" name=""><br><br>
<label>星期：</label><input type="week" name=""><br><br>
<label>数量：</label><input type="number" name=""><br><br>
<label>范围：</label><input type="range" name=""><br><br>
<label>电话：</label><input type="tel" name=""><br><br>
<label>颜色：</label><input type="color" name=""><br><br>
<label>搜索：</label><input type="search" name=""><br><br>
新增常用表单控件属性：
- placeholder 设置文本框默认提示文字,placeholder意为占位符
- autofocus 自动获得焦点，不用设置值，直接加属性即可
- autocomplete 联想关键词，一般是取消掉（autocomplete="off"），自己做
