昨天还是有很多人搞不清楚为啥学Python要学前端，也有人搞不清楚了啥是后端工程师
先说一下啥是后端工程师：
会写Java、python、php、c++等系列的一种语言代码，会写SQL语句，能做简单的数据库设计，会Spring和iBatis，懂一些设计模式等。
主要做的就是网站或者软件，手机app后台的交互和互动，以及数据库体系；让其展现在前台；
然后再看一下项目各部分人员职责：
可以看到后端和前端需要进行联调的，而在日常体现就是，当你在页面输入密码，你输入密码的界面为前端，当你输入完毕后，你的数据传入服务器，服务器会验证你的账号密码是否正确，这就是后端的一部分。
那你在单位，总不能看不到前端的东西吧，那你如何合作进行接口的调试。
进入正题：
本次代码：（http://note.youdao.com/noteshare?id=e19fc655d30d625b978436e18c738725）
课上精华全在代码中，虽然文中我会摘出，难免有遗漏。
今天内容为html+css，因为在日常网页制作中，这两个是不能分开的。
先学习一下html里的列表标签：
一、列表标签
什么是列表？
把内容制成表,以表显示
容器里面装载着文字或图表的一种形式，叫列表。
列表最大的特点就是 整齐 、整洁、 有序
1、无序列表 ul
无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：
比如下面这些，新闻是没有顺序的，不用排队，先到先得，后发布先显示。
注意：
1. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
2. <li>与</li>之间相当于一个容器，可以容纳所有元素。
3. 无序列表会带有自己样式属性.
2、有序列表 ol
有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法格式如下：
所有特性基本与ul 一致。
但是我们可以通过修改代码改变前面序号的样式和开始：
变成这样：
3、自定义列表
定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：
一般网站最下面的服务都用无序编写的：
4、通过style来修饰我们的列表
效果
通过style我们可以修改列表的背景颜色，列表的长度宽度，还有border边框，也可以修改每一行的颜色，但是我们发现这样非常的繁琐，而且混合在一起看着非常的乱，这时候css就应运而生。
二、CSS
1、CSS的发展历程
从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。
可以说CSS 是网页的美容师。我们用京东作为例子，当京东首页去掉CSS后：
2、CSS初识
CSS(Cascading Style Sheets) 美化样式
CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。
CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。
3、引入CSS样式表
CSS可以写到那个位置？ 是不是一定写到html文件里面呢？
（1）内部样式表（用的最多）
内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下：
语法中，style标签一般位于head标签中title标签之后，也可以把他放在HTML文档的任何地方。
type="text/CSS" 在html5中可以省略， 写上也比较符合规范， 所以这个地方可以写也可以省略。
（2）、行内式（内联样式）
内联样式，又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式，就是我们之前的例子用的style方法，其基本语法格式如下：
语法中style是标签的属性，实际上任何HTML标签都拥有style属性，用来设置行内式。其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标签及嵌套在其中的子标签起作用。
（3）、外部样式表（外链式）
链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中，其基本语法格式如下：
注意： link 是个单标签哦!!!
该语法中，link标签需要放在head头部标签中，并且必须指定link标签的三个属性，具体如下：
href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
type：定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。
rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
（4）、三种样式表总结
CSS样式规则
使用HTML时，需要遵从一定的规范。CSS亦如此，要想熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则，具体格式如下：
在上面的样式规则中:
1.选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。
2.属性和属性值以“键值对”的形式出现。
3.属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
4.属性和属性值之间用英文“:”连接。
5.多个“键值对”之间用英文“;”进行区分。
三、选择器（重点）
要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器（选择符）。
CSS基础选择器
1、标签选择器（元素选择器）
标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下：
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
我们把整个html里所有的ol有序列表都去掉了前面的序号，一般我们只需要取消特定的，而不是全部取消。
标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。
2、类选择器
类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：
.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
标签调用的时候用 class=“类名” 即可。
这样只有调用了类选择器的才会被修饰：
类选择器最大的优势是可以为元素对象定义单独或相同的样式。 可以选择一个或者多个标签
小技巧：
1.长名称或词组可以使用中横线来为选择器命名。
2.不建议使用“_”下划线来命名CSS选择器。
输入的时候少按一个shift键; 浏览器兼容问题 (比如使用_tips的选择器命名，在IE6是无效的) 能良好区分JavaScript变量命名(JS变量命名是用“_”)
3.不要纯数字、中文等命名， 尽量使用英文字母来表示。
练习：
让我们用类选择器来模拟谷歌的图标
首先我们在头中写CSS
然后在body中使用类
效果：
3、多类名选择器
我们可以给标签指定多个类名，从而达到更多的选择目的。
亚瑟使用了3个类选择器。
注意：
1. 样式显示效果跟HTML元素中的类名先后顺序没有关系,受CSS样式书写的上下顺序有关。
2. 各个类名中间用空格隔开。
多类名选择器在后期布局比较复杂的情况下，还是较多使用的。
4、id选择器
id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下：
#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。
用法基本和类选择器相同。
id选择器和类选择器最大的不同在于使用次数上，class能无限次调用，id理论上只能用一次，但是由于html的运行时，会自动修复这个问题，所以并不会报错。
Id和class同时修改同一个标签时，优先使用id的修改。
5、全局选择器
全局选择器用“*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下：
* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
所有的都会修改的
注意：
别用！！！
四、CSS字体样式属性
1、font-size:字号大小
font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。
2、font-family:字体
font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑，可以使用如下CSS样式代码：
p{ font-family:"微软雅黑";}
可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。
常用技巧：
1. 现在网页中普遍使用14px+。
2. 尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。
3. 各种字体之间必须使用英文状态下的逗号隔开。
4. 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
5. 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: "Times New Roman";。
6. 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。
3、font-weight:字体粗细
字体加粗除了用 b 和 strong 标签之外，可以使用CSS 来实现，但是CSS 是没有语义的。
font-weight属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100~900（100的整数倍）。
小技巧：
数字 400 等价于 normal，而 700 等价于 bold。 但是我们更喜欢用数字来表示。
4、font-style:字体风格
字体倾斜除了用 i 和 em 标签之外，可以使用CSS 来实现，但是CSS 是没有语义的。
font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：
normal：默认值，浏览器会显示标准的字体样式。
italic：浏览器会显示斜体的字体样式。
oblique：浏览器会显示倾斜的字体样式。
5、font:综合设置字体样式 (重点)
font属性用于对字体样式进行综合设置，其基本语法格式如下：
选择器{font: font-style font-weight font-size/line-height font-family;}
使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。
注意：其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。
五、CSS外观属性
1、color:文本颜色
color属性用于定义文本的颜色，其取值方式有如下3种：
1.预定义的颜色值，如red，green，blue等。
2.十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。
3.RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。
需要注意的是，如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。
2line-height:行间距
line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px
我们一般使用行高来设置垂直居中。
一般情况下，行距比字号大7.8像素左右就可以了。
3、text-align:水平对齐方式
text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。其可用属性值如下：
left：左对齐（默认值）
right：右对齐
center：居中对齐
text-indent:首行缩进
text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。
1em 就是一个字的宽度 如果是汉字的段落， 1em 就是一个汉字的宽度
text-decoration 文本的装饰
六、CSS注释
CSS规则是使用 /* 需要注释的内容 */ 进行注释的，即在需要注释的内容前使用 “/*” 标记开始注释，在内容的结尾使用 “*/”结束。
七、标签显示模式（display）
标签的类型(显示模式)
HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。具体如下：
1、块级元素(block-level)
每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。
显示：“
即使空白很多，div还是分成了上下两个。
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。
块级元素的特点：
（1）总是从新行开始
（2）高度，行高、外边距以及内边距都可以控制。
（3）宽度默认是容器的100%
（4）可以容纳内联元素和其他块元素。
2、行内元素(inline-level)
行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。
样式：
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。
当我们用css修改span的大小你会发现：
：
效果：
大小并没有发生改变
行内元素的特点：
（1）和相邻行内元素在一行上。
（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
（3）默认宽度就是它本身内容的宽度。
（4）行内元素只能容纳文本或则其他行内元素。（a特殊）
注意：
只有文字才能组成段落，因此p里面不能放块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。
链接里面不能再放链接。
3、块级元素和行内元素区别
块级元素的特点：
（1）总是从新行开始
（2）高度，行高、外边距以及内边距都可以控制。
（3）宽度默认是容器的100%
（4）可以容纳内联元素和其他块元素。
行内元素的特点：
（1）和相邻行内元素在一行上。
（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
（3）默认宽度就是它本身内容的宽度。
（4）行内元素只能容纳文本或则其他行内元素。
4、行内块元素（inline-block）
在行内元素中有几个特殊的标签——<img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。
行内块元素的特点：
（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。
（2）默认宽度就是它本身内容的宽度。
（3）高度，行高、外边距以及内边距都可以控制。
5、标签显示模式转换 display
块转行内：display:inline;
行内转块：display:block;
块、行内元素转换为行内块： display: inline-block;
此阶段，我们只需关心这三个，其他的是我们后面的工作。
八、CSS优先级
定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。
在考虑权重时，初学者还需要注意一些特殊的情况，具体如下：
继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。
行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。
权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。
CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。
九、表格 table
表格的现在还是较为常用的一种标签。
在HTML网页中，要想创建表格，就需要使用表格相关的标签。创建表格的基本语法格式如下：
效果：
在上面的语法中包含三对HTML标签，分别为 <table><tr><td> ,通常还有<th>表示表头，与<td>一致的用法。
<tr>中包含几对<td>，就表示该行中有多少列（或多少个单元格）。
注意：
1. <tr></tr>中只能嵌套<td></td>
2. <td></td>标签，他就像一个容器，可以容纳所有的元素
！！！！！！！！！表格可以用来布局！！！！！！！！！！
1、表格属性
（1）table标签属性
我们上面展示了，一般表格的效果，但是每个格子之间好像有空隙，那如何取消这个空隙呢？
Border :表格边框的粗细
Cellspacing：单元格和单元格之间的距离
cellspadding ：内容与单元格边框的距离
align：表格的位置 center居中、left靠左、right靠右
bgcolor：表格背景颜色
表头一般位于表格的第一行或第一列，其文本加粗居中，如下图所示，即为设置了表头的表格。设置表头非常简单，只需用表头标签<th>
（3）表格结构
在使用表格进行布局时，可以将表格划分为头部、主体和页脚（页脚因为有兼容性问题，我们不在赘述），具体如下所示：
<thead></thead>：用于定义表格的头部。
必须位于<table></table> 标签中，一般包含网页的logo和导航等头部信息。
<tbody></tbody>：用于定义表格的主体。
位于<table></table>标签中，一般包含网页中除头部和底部之外的其他内容。
虽然加不加thead和tbody并不会对表格产生影响，但是我们还是应该注意格式。
（4）表格标题
表格的标题： caption
定义和用法
caption 元素定义表格标题。
caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。
（4）合并单元格(难点)
跨行合并：rowspan 跨列合并：colspan
合并单元格的思想：
将多个内容合并的时候，就会有多余的东西，把它删除。 例如把3个td 合并成一个， 那就多余了2个，需要删除。
Rowspan = 2：就是合并两行的单元格，
Colspan = 2 ：就是合并两列的单元格
表格第一行：
而在下面被合并的行就应该删除合并项
表格第二行：
2、总结表格
表格提供了HTML 中定义表格式数据的方法。
表格中由行中的单元格组成。
表格中没有列元素，列的个数取决于行的单元格个数。
表格不要纠结于外观，那是CSS 的作用。
表格的学习要求： 能手写表格结构，并且能合并单元格。
十、表单标签 form
表单的目的是为了收集用户信息。
在我们网页中，我们也需要跟用户进行交互，收集用户资料，此时也需要表单。
在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。
常用属性：
Action ：在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。
method ：用于设置表单数据的提交方式，其取值为get或post。
name ：用于指定表单的名称，以区分同一个页面中的多个表单。
注意：每个表单都应该有自己表单域。
1、表单控件：
包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
提示信息：
一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。
表单域：
他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。
2、input 控件(重点)
在上面的语法中，<input />标签为单标签，type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。除了type属性之外，<input />标签还可以定义很多其他的属性，其常用属性如下表所示。
然我们来学习如何做出上面那种输入账号密码的界面：
（1）、text
效果：
一般我们账号使用text类型的input控件：
Placeholder：是在输入框中显示文字
Maxlength：是限制长度，防止无聊的人输入20位手机号码
（2）、password
效果：
效果：
一般这种选项我们只能选择一个，不可能又同意又不同意的，所以需要添加
name这个属性，当多个radio的name相同时只能选择一个，
checked是默认选择，你一打开网页就会默认选择的
（4）checkbox
效果：
Check是同类型进行多选，当然你也可以单选，
Name：代表类型
Value：代表选项的值
其实这就是我们python中的字典，当用户填写后，会用字典的方式传入服务器{hobby:book}
然后由我们在后端进行处理。
（5）、select-option
效果：
这个太常见了，不解释干啥的了，背下来
Name：代表选单的类别，可空
Option：代表选项
value可空
（6）、file
效果：
（7）submit（重要）
效果：
Submit：会把你所有填写的东西进行提交，提交给谁呢？
在你建立表单的时候，会有一个网址，提交给这个网址，也就是我们后台的服务器
Method：分为post和get
Post会隐藏用户信息
Get会显示在地址栏
（
7）textarea控件(文本域)
如果需要输入大量的信息，就需要用到<textarea></textarea>标签。通过textarea控件可以轻松地创建多行文本输入框，其基本语法格式如下：
<textarea cols="每行中的字符数" rows="显示的行数">
文本内容
</textarea>
注意，所有的图标好不好看，样式美不美都可以通过css来修改，我们可以在input中添加style属性来来修改大小。
十一、作业
1、
制作一个居中的表格。
答案（http://note.youdao.com/noteshare?id=d0b689317c4e73427a62c9a111155fd1）
2、注册页（用表格来布局）
制作一个世纪佳缘登录页，要求点击已有账号立即登陆跳转到作业3
答案：（http://note.youdao.com/noteshare?id=01541fba051b3cc26a01787804d9322c）
3、登录页（用表格来布局）
点击不是会员？立即注册跳到作业2
答案（http://note.youdao.com/noteshare?id=3e35dc13b0900b1bd6e28319752b0ae2）
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
