WEB前端开发做什么？
PC端页面
移动端页面
解决用户体验问题
必备条件是什么？
1>会上网，会打字，懂得互联网是什么
2>兴趣
3>肯练习
浏览器和服务器如何信息交互？
通过浏览器如何查看请求报文和响应报文?
浏览器通过输入的地址，将请求报文发送到服务器，服务器从请求报文中得到要请求文件的信息，服务器读取它的信息，然后交给响应报文，浏览器接收响应报文，浏览器将文件内容显示出来。
浏览器在显示内容之前会做一些处理，通过浏览器内核来解析响应回来的内容，才能将页面显示出来。
浏览器内核：
内核（Rendering Engine）：可大概译为“渲染引擎”，不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释（如标准通用标记语言下的一个应用HTML、JavaScript）并渲染（显示）网页。
内核的分类：
Trident：ie , 猎豹安全浏览器,360极速浏览器,百度浏览器...
Gecko：Firefox
Webkit：Safari，Chrome
Presto：Opera
不同的内核在渲染同一内容的时候会有差别。
页面的本质：从服务器中响应回来的一段文本通过浏览器内核来解析，解析出来显示到页面上。
http协议：浏览器与服务器交互的约定
http协议：请求报文 响应报文 url https协议 ftp协议
Url：http://192.168.16.200:8080/index.html 协议名 服务器的ip 端口号 请求文件的名称
DNS域名解析系统 将192.168.16.200----->www.taobao.com
所以建立网站首先要购买 服务器和域名 ，用域名来绑定服务器
学习那些知识才能做出精美作品？
1>软件（5%的时间）
浏览器: chrome IE 火狐 苹果 欧朋
浏览器插件：F12
用来写代码的编辑器（ws、sublime......）
Photoshop、FW（测量、剪裁、编辑）
2>语言（至少花95%的时间）
至少要学习： html css js这三种基本的语言
HTML 超文本标记语言
语言：和浏览器认识的语言、和浏览器打交道（沟通）
标记、标签：
标签对：
单标签： ![]()
超：图片、声音、视频超出于文本的范畴
,
单标签：只有一个标签，自己闭合自己。
,
,![]()
标签与标签之间的关系：
嵌套关系：一个标签包含另外一个标签，他们之间构造父子关系。
并列关系：两个标签并列，他们构造兄弟关系。
注意：将来在书写代码的时候如果两个标签之间的关系是嵌套关系，最好通过代码直接反映出来（子元素相对于父元素有一个缩进）。如果是并列关系，最好要有对齐。
h系列的标签(Header)：h1,h2,h3,h4,h5,h6
作用：把页面上的文字加上标题的语义。
h1,h2,h3,h4,h5,h6:将文字放大，加粗.并且逐渐变小。（h1标签是最大的。）
p标签(Paragraph)：段落标签
作用：给页面的上一段文字加上段落的说语义
hr标签
作用：在页面显示一条横线
br标签
作用：换行
b u i s(没有语义) strong ins em del
作用：
b：加粗
u: 下划线
i: 倾斜
s: 删除线
建议在含有语义化情景时尽量不要使用，因为这些标签没有语义。
strong:加粗
ins:下划线
em:倾斜
del:删除线
可以使用有语义化的意思
Img标签
作用：在页面显示一张图片
src 图片显示的路径
alt 如果图片加载不出来会显示这个属性中的文字
title 介绍这张图片
a标签（锚）
作用：可以在一个页面跳转到另一个页面。
注意：在a标签之内必须要写上文字，如果没有，那么这个标签在页面上找不到。
1.可以跳转到另外的页面。
2.可以不跳转（跳转到当前页面）href=”#”
3.可以在当前页面进行定位。
A.设置a标签的href属性为“#id名”，
B.在页面的指定位置加入一个目标标签（可以是任意标签）
C.必须给这个标签设置一个id名：这是目标
4.在一个页面跳转到指定的页面的指定的位置。
a标签的属性
href a标签跳转的目标地址
target _blank:保留原始页面，再进行跳转
_self:在当前页面进行跳转
base 为页面上所有的a标签设置跳转的方式（base标签一般放在titile标签下面）
路径问题：
第一种：绝对路径
带有盘符的路径：C:\上课内容\01html第一天\4-源代码\1.jpg.
第二种：相对路径
由页面是一个文件，图片 也是一个文件，而现在需要在页面上输出图片，所以需要得到图片相对于文件的路径.
a.如果页面与图片在同一目录下面：
b.如果页面在图片一上级目录：
c.如果图片在页面的上一级目录：
问题：那么将来我们在实际开发中到底是用绝对路径，还是用相对路径？？
只要不出意外情况都是用相对路径：因为相对路径的可移植性要强。
无序列表 ul li
有序列表 ol
自定义列表 dl dt dd
注释
/*我是css里面的注释*/
Photoshop相关的操作（切图、测量、对图片简单的处理）
首先下载ps软件
如何得到一张图片
1>设计师给的ps图片
2>印屏幕：prt scsysrq
新建画布，放大缩小图片，新建图层，复制图层，吸管使用，渐变，钢笔，打字，图片切图、去除图片上的文字、alt+delete前景颜色、ctrl+delete后景颜色
第二章 css
引入css样式：行间样式 内部样式 外部样式
border样式 （做练习三角）
border: 10px dashed black;
/*复合样式 虚线有兼容问题*/
border: 10px dotted black;
/*点划线有兼容问题*/
border-top: 10px solid blueviolet;
border-left: 10px solid red;
border-right: 10px solid hotpink;
border-bottom: 10px solid yellow;
background样式（做练习）
background-image: url("a.jpg");
/*默认状态下是平铺的*/
background-repeat: no-repeat;
/*背景不平铺*/
background-color: red;
/*背景图片比背景颜色层级高*/
background-repeat: repeat-x;
/*背景水平平铺*/
background-repeat: repeat-y;
/*背景垂直平铺*/
background-position: 10px 10px;
/*背景定位*/
第一个参数水平，第二个参数垂直
left、center、right top、center、bottom
background-attachment: fixed;
/*背景固定*/
background-attachment: scroll;
/*默认样式滚动*/
合写
background: red url("a.jpg") no-repeat center center;
颜色单位
Red（颜色单词） #333333(16进制模式) rgb(255,255,255) rgb模式
font（做练习）
font-size 文字大小
font-weight 文字加粗(bold加粗/normal正常)
font-style 文字倾斜(italic倾斜/normal正常)
line-height 行高 （文字在一行上下居中）
font-family 字体
-------------------------------------
font:font-weight font-style font-size/line-height font-family;
font:font-size font-family(必须要写)
-------------------------------------
color 文字颜色
text-indent 首行缩进 (1em=1个文字大小)
text-align 文本对齐方式(left/center/right)
text-decoration 文本修饰(underline下划线/line-through 删除/overline 上划线/none)
letter-spacing字间距
word-spacing空格之间的间距，单词与单词之间的间距
写一个盒子模型
可视宽（高）=border+padding+width(height)
1> padding内填充(padding在元素的边框以内，内容之外,padding会显示元素的背景)
Top|right|bottom|left
2>Margin:(边框以外，不显示元素的背景)
Top|right|bottom|left
margin叠加的问题（相邻两个元素上下margin是叠加，取最大值显示）
Margin传递问题 （子元素的margin会传递给父级）
Margin-left:auto(注意下距离左侧auto，会把剩下的空余距离全都占掉)
Margin-right同理
Margin：0 auto；居中
常见的选择器
Id选择器（同一页面不能重名）#
类选择器 .
标签选择器 p
包含选择器 .box p
群组选择器 ,
通配符 *
选择器的优先级
1.选择器优先级一致的情况下，后面的样式会覆盖前面的样式
2.行间样式>id选择器>class选择器>标签选择器>通配符
包含选择器和群组选择器比较：
包含选择器优先级可以叠加(优先级可以相互抵消)
群组选择器优先级不叠加
标签类型
块
1.独占一行
2.支持所有样式
3.不设置宽度的时候，宽度撑满整个一行
内嵌
1.可以在一行显示
2.不支持宽高，不支持上下的margin和padding等样式的问题
3.宽度由内容撑开
4.代码换行被解析
那如何判断他们是块状还是内联？
div、 ul li 、dl dt dd、 h1 、p 、strong 、a、 em
如何清除默认样式？
块和内嵌的转换？
1.display:block; 显示为块
2.Display:inline;显示为内嵌
块状元素如何在同一行显示？第一种方法解决
Display:inline-block的特征：
1.块在一行显示
2.行内属性标签支持宽高
3.没有宽度的时候内容撑开宽度
4.标签之间的换行被解析(问题)
5.Ie6 7不支持inline-block(问题)
分页的练习
块元素如何在同一行显示？第二种方法解决
浮动
浮动的定义：使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。
float:left | right | none | inherit;
浮动的特征：
1、块在一排显示
2、内联支持宽高
3、默认内容撑开宽度
4、脱离文档流
5、提升层级
清除浮动：
1.加高
问题：扩展性不好
2.父级浮动
问题：页面中所有元素都加浮动，margin左右自动失效
3.inline-block 清浮动方法：
问题：margin左右auto失效；
4.空标签清浮动
问题：IE6 最小高度 19px；（解决后IE6下还有2px偏差）
5.br清浮动
问题：不符合工作中：结构、样式、行为，三者分离的要求。
6.after伪元素 清浮动方法（现在主流方法）
.clear:after{content:'';display:block;clear:both;}
.clear{*zoom:1;}
after伪类： 元素内部末尾添加内容；
:after{content"添加的内容";} IE6，7下不兼容
zoom 缩放
a、触发 IE下 haslayout，使元素根据自身内容计算宽高。
b、FF 不支持；
7.overflow:hidden 清浮动方法；
问题：需要配合 宽度 或者 zoom 兼容IE6 IE7等一些问题
定位
如何让div2移动到图2上面的位置？
定位元素位置控制 top/right/bottom/left 定位元素偏移量。
position:relative; 相对定位
a、不影响元素本身的特性；
b、不使元素脱离文档流（元素移动之后原始位置会被保留）；
c、如果没有定位偏移量，对元素本身没有任何影响；
d、提升层级
position:absolute; 绝对定位
a、使元素完全脱离文档流；
b、使内嵌支持宽高；
c、块属性标签内容撑开宽度；
d、如果有定位父级相对于定位父级发生偏移，没有定位父级相对于body发生偏移；
e、相对定位一般都是配合绝对定位元素使用；
f、提升层级
z-index:[number]； 定位层级
a、定位元素默认后者层级高于前者；
b、建议在兄弟标签之间比较层级
z-index:[number]； 定位层级
position:fixed； 固定定位
与绝对定位的特性基本一致，的差别是始终相对整个文档进行定位；
问题：IE6不支持固定定位；
position:absolute; 绝对定位元素子级的浮动可以不用写清浮动方法；
position:fixed; 固定定位元素子级的浮动可以不用写清浮动方法；（IE6不兼容）
关于层级问题的一些思考。
1.后来居上原则
2.层级优先z-index
3.拼爹原则
4.加上定位之后，继承失效
伪类
:link
伪类将应用于未被访问过的链接，与:visited互斥。
:visited
伪类将应用于已经被访问过的链接，与:link互斥。
:hover
伪类将应用于有鼠标指针悬停于其上的元素。
:active
伪类将应用于被激活的元素，如被点击的链接、被按下的按钮等。
需要注意的是在CSS的定义中，同一个元素的:hover必须位于:link、:visited之后才能生效，:active必须位于:hover之后才能生效。
:focus
伪类将应用于拥有键盘输入焦点的元素。
:first-child
伪类将应用于元素在页面中第一次出现的时候
伪元素
:first-letter
伪元素的样式将应用于元素文本的第一个字（母）。
:first-line
伪元素的样式将应用于元素文本的第一行。
:before
在元素内容的最前面添加新内容。
:after
在元素内容的最后面添加新内容。
伪元素和伪类的区别：
与伪类针对特殊状态的元素不同的是，伪元素是对元素中的特定内容进行操作，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。
表格
表格标签：
table 表格
thead 表格头
tbody 表格主体
tr 表格行
th 元素定义表头
td 元素定义表格单元
表格样式重置
table{border-collapse:collapse;} 单元格间隙合并
th,td{padding:0;}重置单元格默认填充
colspan 属性规定单元格可横跨的列数。 