一，html+css基础
1-1
Html和CSS的关系
学习web前端开发基础技术须要掌握：HTML、CSS、JavaScript语言。下面咱们就来了解下这三门技术都是用来实现什么的：
1. HTML是网页内容的载体。内容就是网页制做者放在页面上想要让用户浏览的信息，能够包含文字、图片、视频等。
2. CSS样式是表现。就像网页的外衣。好比，标题字体、颜色变化，或为标题加入背景图片、边框等。全部这些用来改变内容外观的东西称之为表现。
3. JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。能够这么理解，有动画的，有交互的通常都是用JavaScript来实现的。
1-2
1， HTML标签不区分大小写，<h1>和<H1>是同样的，但建议小写，由于大部分程序员都以小写为准。
1-3
一个HTML文件是有本身固定的结构的。
<html>
<head>...</head>
<body>...</body>
</html>
代码讲解：
1. <html></html>称为根标签，全部的网页标签都在<html></html>中。
2. <head> 标签用于定义文档的头部，它是全部头部元素的容器。头部元素有<title>、<script>、 <style>、<link>、 <meta>等标签，头部标签在下一小节中会有详细介绍。
3. 在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。
1-4
1，下面这些标签可用在 head 部分：
<head>
<title>...</title>
<meta>
<link>
<style>...</style>
<script>...</script>
</head>
2，
代码注释不只方便程序员本身回忆起之前代码的用途，还能够帮助其余程序员很快的读懂你的程序的功能，方便多人合做开发网页代码。
语法：
<!--注释文字 -->
3，CSS注释代码
就像在Html的注释同样，在CSS中也有注释语句：用/*注释语句*/来标明（Html中使用<!--注释语句-->)
1-5
1，语义化：说的通俗点就是：明白每一个标签的用途（在什么状况下我可使用这个标签才合理）好比，网页上的文章的标题就得用标题标签，网页上的各个栏目的栏目名称也可使用标题标签。
2，语义化的做用
1）. 更容易被搜索引擎收录。
2）. 更容易让屏幕阅读器读出网页内容。
1-6
元素分类--块级元素
什么是块级元素？在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置display:block就是将元素显示为块级元素。以下代码就是将内联元素a转换为块状元素，从而使a元素具备块状元素特色。php
a{display:block;}
<strong>1-7
块级元素特色：</strong>
一、每一个块级元素都重新的一行开始，而且其后的元素也另起一行。（真霸道，一个块级元素独占一行）css
二、元素的高度、宽度、行高以及顶和底边距均可设置。html
三、元素宽度在不设置的状况下，是它自己父容器的100%（和父元素的宽度一致），除非设定一个宽度。前端
元素分类--内联元素
在html中，<span>、<a>、<label>、<input>、 <img>、 <strong> 和<em>就是典型的内联元素（行内元素）（inline）元素。固然块状元素也能够经过代码display:inline将元素设置为内联元素。以下代码就是将块状元素div转换为内联元素，从页使用div元素具备内联元素特色。程序员
<strong>1-8</strong>
内联元素特色：web
一、和其余元素都在一行上；面试
二、元素的高度、宽度、行高及顶部和底部边距不可设置；编程
三、元素的宽度就是它包含的文字或图片的宽度，不可改变。浏览器
块状元素独占一行，在默认的状况下，宽度自动填满父元素宽度
行内元素不会独占一行，宽度随着元素的内容改变而变化
行内元素的width和height的设置无效
行内元素的margin和padding的垂直方向上不产生边距效果
可使用display:block;或者display:inline;实现块级元素和行内的相互转换
HTML元素分为三大类：
块状元素：
- 网页框架基本结构块：html、body、frameset、frame、noframe、iframe
- 表单结构块：form、filedset、legend
- 布局结构块：div
- 段落结构块：p
- 标题结构块：h1-h6
- 列表结构块：ol、ul、dl、dt、dd、menu、dir
- 居中结构块：center
- 预约义结构块：pre
- 引用结构块：blockquote
- 结构装饰线：hr
- 网页标题框：title
行内元素：
- 行内包含框：span
- 超连接和映射包含框：a、area
- 图像包含框：img
- 格式化信息包含框：abbr、b、bdo、cite、code、del、dfn、em、font、i、ins、kbd、q、s、samp、small、strike、strong、sub、sup、tt、u、var
- 表单对象包含框：button、select、textarea、label
- 可执行的插件或对象包含框：applet、object
- 表格标题包含框：caption
- 无脚本包含框：noscript
其余元素：
- 头部区域隐藏元素：
- 头部包含框：head
- 默认基础字体属性：basefont
- 连接：link
- 元信息：meta
- 脚本：script
- 样式：style
- url基础：base
- 行内块状元素：
- 输入框：input
- 下拉选框：option
- 下拉框的分组：optgroup
- 列表项元素：
- 列表项：li
- 结构内隐藏元素：
- 图像映射包含框：map
- 参数：param
- 换行：br
- 表格系列类型元素：
- 表格框显示：table
- 表格行显示：tr
- 单元格显示：td
- 表格标题显示：th
- 表格行组显示：tbody
- 表格脚注组显示：tfoot
- 表格标题组显示：thead
HTML标签嵌套规则
- body能够直接包含块状元素、ins、del、script。不能够直接包含行内元素
- ins和del（行内元素）能够包含块状元素或者行内元素，其余任何行内元素都不容许包含块状元素
- p、h1-h6能够直接包含行内元素和文本信息，可是不容许包含块状元素
- dl元素只容许包含dt和dd，同时dt不能包含块状元素，只容许包含行内元素，对于dd能够包含任何元素
- form元素不可以直接包含input元素。缘由在于input元素属于行内元素，form元素仅仅可以包含块状元素
- table元素只可以包含caption、colgroup、col、thead、tbody、tfoot，不可以直接包含tr或者其余任何元素
2、认识标签（第一部分）
2-1
若是想在网页上显示文章，这时就须要<p>标签了，把文章的段落放到<p>标签中。
语法：
<p>段落文本</p>
2-2
<hx>标签来制做文章的标题。
标题标签一共有6个，h一、h二、h三、h四、h五、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。而且依据重要性递减。<h1>是最高的等级。
语法：
<hx>标题文本</hx> (x为1-6)
文章的标题前面已经说过了，可使用标题标签，另外网页上的各个栏目的标题也可以使用它们
2-3
有了段落又有了标题，如今若是想在一段话中特别强调某几个文字，这时候就能够用到<em>或<strong>标签。
但二者在强调的语气上有区别:<em> 表示强调，<strong> 表示更强烈的强调。而且在浏览器中<em> 默认用斜体表示，<strong> 用粗体表示。两个标签相比，目前国内前端程序员更喜欢使用<strong>表示强调
2-4
<em>、<strong>、<span>的区别：
1. <em>和<strong>标签是为了强调一段话中的关键字时使用，它们的语义是强调。
2. <span>标签是没有语义的，它的做用就是为了设置单独的样式用的，把一段话圈起来，而后用css设置样式。服务器
2-5
换行标签<br/>
<br/>标签做用至关于word文档中的回车。
分割线标签<hr/>
<hr/>标签和<br/>标签同样也是一个空标签，因此只有一个开始标签，没有结束标签。
<hr/>标签的在浏览器中的默认样式线条比较粗，颜色为灰色，可能有些人以为这种样式不美观，没有关系，这些外在样式在咱们之后学习了css样式表以后，均可以对其修改。
2-6
html特殊字符
空格： (;分号必不可少)
2-7
address标签，为网页加入地址信息
语法：
<address>地址信息</address>
如：
<address>北京市西城区德外大街10号</address>
在浏览器上显示的样式为斜体，若是不喜欢斜体，固然能够，能够在后面的课程中使用css样式来修改它<address>标签的默认样式
2-8
在介绍语言技术的网站中，必免不了在网页中显示一些计算机专业的编程代码，当代码为一行代码时，你就可使用<code>标签了，以下面例子：
<code>var i=i+300;</code>
语法：
<code>代码语言</code>
注意：在文章中通常若是要插入多行代码时不能使用<code>标签，若是是多行代码，可使用<pre>标签。
<pre> 标签的主要做用:预格式化的文本。被包围在 pre 元素中的文本一般会保留空格和换行符。若是用之前的方法，回车须要输入<br>签，空格须要输入 。
注意：<pre> 标签不仅是为显示计算机的源代码时用的，在你须要在网页中预显示格式时均可以使用它，只是<pre>标签的一个常见应用就是用来展现计算机的源代码。
三，认识标签（第二部分）
3-1
1，无序列表
ul-li是没有先后顺序的信息列表。
语法：
<ul>
<li>信息</li>
<li>信息</li>
......
</ul>
举例：
<ul>
<li>精彩少年</li>
<li>美丽忽然出现</li>
<li>触动心灵的旋律</li>
</ul>
ul-li在网页中显示的默认样式通常为：每项li前都自带一个圆点
2,有序列表
语法：
<ol>
<li>信息</li>
<li>信息</li>
......
</ol>
举例：
下面是一个热点课程下载排行榜：
<ol>
<li>前端开发面试心法 </li>
<li>零基础学习html</li>
<li>JavaScript全攻略</li>
</ol>
<ol>在网页中显示的默认样式通常为：每项<li>前都自带一个序号，序号默认从1开
3-2
<div>容器标签
在网页制做过程过中，能够把一些独立的逻辑部分划分出来，放在一个<div>标签中，这个<div>标签的做用就至关于一个容器。
语法：
<div>…</div>
肯定逻辑部分：
什么是逻辑部分？它是页面上相互关联的一组元素。如网页中的独立的栏目版块，就是一个典型的逻辑部分。以下图所示：图中用红色边框标出的部分就是一个逻辑部分，就可使用<div>标签做为容器
注释：<div> 是一个块级元素，也就是说，浏览器一般会在 div 元素先后放置一个换行符。
3-3
建立表格的五个元素：
table、tbody、tr、th、td
一、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。
二、<tbody>…</tbody>：当表格内容很是多时，表格会下载一点显示一点，但若是加上<tbody>标签后，这个表格就要等表格内容所有下载完才会显示。如右侧代码编辑器中的代码。（这个标签基本上不怎么用了）
三、<tr>…</tr>：表格的一行，因此有几对tr 表格就有几行。
四、<td>…</td>：表格的一个单元格，一行中包含几对<td>...<td/>，说明一行中就有几列。
五、<th>…</th>：表格的头部的一个单元格，表格表头。
六、表格中列的个数，取决于一行中数据单元格的个数。
表格仍是须要添加一些标签进行优化，能够添加标题和摘要
<table summary="本表格记录2012年到2013年库存记录，记录包括U盘和耳机库存量">
<caption>2012年到2013年库存记录</caption>
3-4
1，使用<a>标签，连接到别一个页面
使用<a>标签可实现超连接，它在网页制做中能够说是无处不在，只要有连接的地方，就会有这个标签。
语法：
<a href=”目标网址”>连接显示的文本</a>
例如：
<a href = "http://www.imooc.com">click here!</a>
上面例子做用是单击click here!文字，网页连接到http://www.imooc.com这个网页。
3-5
认识<img>标签，为网页插入图片
在网页的制做中为使网页炫丽美观，确定是缺乏不了图片，可使用<img>标签来插入图片。
语法：
<img src="http://m13121875965.blog.163.com/blog/图片地址" alt="下载失败时的替换文本" title = "提示文本">
举例：
<img src="http://m13121875965.blog.163.com/blog/myimage.gif" alt = "My Image" title = "My Image" />
讲解：
一、src：标识图像的位置；
二、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；
三、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；
四、图像能够是GIF，PNG，JPEG格式的图像文件。
四，表单标签（与用户进行交互）
4-1
表单是能够把浏览者输入的数据传送到服务器端，这样服务器端程序就能够处理表单传过来的数据。
语法：
<form method="传送方式" action="服务器文件">
讲解：
1.<form> ：<form>标签是成对出现的，以<form>开始，以</form>结束。
2.action ：浏览者输入的数据被传送到的地方,好比一个PHP页面(save.php)。
3.method ： 数据传送的方式（get/post）。
4-2
<input>输入框
文本输入框、密码输入框
当用户要在表单中键入字母、数字等内容时，就会用到文本输入框。文本框也能够转化为密码输入框。
语法：
<form>
<input type="text/password" name="名称" value="文本" />
</form>
一、type：
当type="text"时，输入框为文本输入框;
当type="password"时, 输入框为密码输入框。
二、name：为文本框命名，以备后台程序ASP 、PHP使用。
三、value：为文本输入框设置默认值。(通常起到提示做用)
4-3
文本域，支持多行文本输入
当用户须要在表单中输入大段文字时，须要用到文本输入域。
语法：
<textarea rows="行数" cols="列数">文本</textarea>
一、<textarea>标签是成对出现的，以<textarea>开始，以</textarea>结束。
二、cols ：多行输入域的列数。
三、rows ：多行输入域的行数。
4-4
单选框，复选框
语法：
<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
一、type:
当type="radio"时，控件为单选框
当type="checkbox"时，控件为复选框
二、value：提交数据到服务器的值（后台程序PHP使用）
三、name：为控件命名，以备后台程序ASP、PHP使用
四、checked：当设置checked="checked"时，该选项被默认选中
注意：同一组的单选按钮，name取值必定要一致，这样同一组的单选按钮才能够起到单选的做用。
4-5
下拉列表框，节省空间
下拉列表在网页中也常会用到，它能够有效的节省网页空间。既能够单选、又能够多选。
语法：<option value="提交值">选项</option>
提交值是向服务器提交的值，选项是显示的值。
<form action="save.php" method="post" >
<label>爱好:</label>
<select>
<option value="看书">看书</option>
<option value="旅游" selected="selected">旅游</option>
<option value="运动">运动</option>
<option value="购物">购物</option>
</select>
</form>
4-6
使用下拉列表框进行多选
下拉列表也能够进行多选操做，在<select>标签中设置multiple="multiple"属性，
就能够实现多选功能，进行多选时按下Ctrl键同时进行单击，能够选择多个选项。
以下代码：
<form action="save.php" method="post" >
<label>爱好:</label>
<select multiple="multiple">
<option value="看书">看书</option>
<option value="旅游">旅游</option>
<option value="运动">运动</option>
<option value="购物">购物</option>
</select>
</form>
4-7
在表单中有两种按钮可使用，分别为：提交按钮、重置。
1，提交按钮：当用户须要提交表单信息到服务器时，须要用到提交按钮。
语法：
<input type="submit" value="提交">
type：只有当type值设置为submit时，按钮才有提交做用
value：按钮上显示的文字
2，重置按钮，重置表单信息
当用户须要重置表单信息到初始时的状态时，好比用户输入“用户名”后，发现书写有误，可使用重置按钮使输入框恢复到初始状态。只须要把type设置为"reset"就能够。
语法：
<input type="reset" value="重置">
type：只有当type值设置为reset时，按钮才有重置做用
value：按钮上显示的文字