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 超文本标记语言
语言：和浏览器认识的语言、和浏览器打交道（沟通）
标记、标签：<html> <html>
标签对：<html></html>
单标签：<meta /> <img />
超：图片、声音、视频超出于文本的范畴
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>hello world</body>
</html>
UTF-8是很有来头的编码，认识世界各个语言，能够正确识别语言，相当于是翻译家，不会出现乱码的现象
Css层叠样式表（给网页做装修的）
width: 100px;
height: 100px;
background: red;
Javascript：脚本语言（是一种可以动的行为）
搭建一个网页相当于搭建一个房子 html css js(冬暖夏凉)
案例：onclick="this.style.width='800px';this.style.height='800px';"
（让页面动起来）
第一章常用标签
Html标签：
作用所有html中标签的一个根节点。
Head标签：
作用：用于存放：
title,meta,base,style,script,link
注意：每个head标签中都必须有一个有title标签，其它的可选。
Body标签：
作用：用于存放所有的html的结构标签：
p,h,a,b,u,i,s,em,del,ins,strong,ul,li,ol,
Title标签：
作用：让页面拥有一个属于自己的标题。
meta 标签：
常用用法：
1.Description：可以描述页面，可以用来使用百度程序（网络爬虫）来收录关键信息，以此提高页面的排名。
2.Keywords：关键词，可以用来提高页面的关健词的比重（前升排名的一种方式）
3.字符集（编码格式）：charset
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
gbk,utf-8之间的区别：
相同点：都是字符的编码格式。
区别：
utf-8:收录是全世界所有的语言中的文字。
gbk:收录了汉字，片假名。
大小：
utf-8>gbk
性能：
uft-8<gbk
约定：将来我们在整个学习过程中都用utf-8;
utf-8存储一个汉字占3个字节，
gbk存储一个汉字上2个字节
标签的分类：
双标签：有开始有结束，开始和结束之间是存在内容
<h1></h1>,<p></p>
单标签：只有一个标签，自己闭合自己。
<hr /> ,<br /> ,<img/>
标签与标签之间的关系：
嵌套关系：一个标签包含另外一个标签，他们之间构造父子关系。
并列关系：两个标签并列，他们构造兄弟关系。
注意：将来在书写代码的时候如果两个标签之间的关系是嵌套关系，最好通过代码直接反映出来（子元素相对于父元素有一个缩进）。如果是并列关系，最好要有对齐。
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名：<p id=”mubiao”>这是目标</p>
4.在一个页面跳转到指定的页面的指定的位置。
a标签的属性
href a标签跳转的目标地址
target _blank:保留原始页面，再进行跳转
_self:在当前页面进行跳转
base 为页面上所有的a标签设置跳转的方式（base标签一般放在titile标签下面）
路径问题：
第一种：绝对路径
带有盘符的路径：C:\上课内容\01html第一天\4-源代码\1.jpg.
第二种：相对路径
由页面是一个文件，图片 也是一个文件，而现在需要在页面上输出图片，所以需要得到图片相对于文件的路径.
a.如果页面与图片在同一目录下面：
<img src=”2.jpg” />
b.如果页面在图片一上级目录：
<img src=”image/1.jpg” />
c.如果图片在页面的上一级目录：
<img src=”../2.jpg” />
问题：那么将来我们在实际开发中到底是用绝对路径，还是用相对路径？？
只要不出意外情况都是用相对路径：因为相对路径的可移植性要强。
无序列表 ul li
有序列表 ol
自定义列表 dl dt dd
注释
<!--我是html里面的注释-->
/*我是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 属性规定单元格可横跨的列数。<td colspan="2"></td>
rowspan 属性规定单元格可横跨的行数。<td rowspan="2"></td>
表单
form 表单
<input type="…… " name="" value="" />
text 文本框
password 密码
radio 单选
checkbox 复选
submit 提交
reset 重置
button 按钮
image 图片
file 上传
hidden 隐藏
label 标签为 input 元素定义标注
<input type="checkbox" name="" id="a"/>
<label for="a">……</label>
checked 在页面加载时默认选定的 input 元素。
<input type="checkbox" name="" checked/>
disabled 属性规定应该禁用 input 元素。
<input type="checkbox" name="" disabled/>
select/option 下拉选框
textarea 文本域
各个浏览器下的默认滚动条显示不兼容
css3新增 resize 调整尺寸属性；
常见的实体字符
<!--空格-->
<button>登 录</button>
<!--引号-->
<input type="text" value="这是个"引号""/>
<!--大于小于号-->
<div> 这是个<span标签></div>
<!--版权所有-->
<div>版权所有©2016</div>
<!--显示&字符-->
<div>空格的实体字符是&nbsp</div>
Css Hack调整兼容性
hack虽然有黑客的意思，但是这里和黑客没有半毛钱关系，这里hack是小技巧的意思。
方式一 条件注释法（较为常用）
只在IE下生效
<!--[if IE]><![endif]-->
只在IE6下生效
<!--[if IE 6]><![endif]-->
只在IE6以上版本生效
<!--[if gte IE 6]><![endif]-->
只在IE8上不生效
<!--[if ! IE 8]><![endif]-->
非IE浏览器生效
<!--[if !IE]><![endif]-->
方式二 属性前缀法
*加在属性上 表示该属性只针对IE567生效（最常用的是这个 还有其他的）
\9是支持ie10以及ie10以下
* +是支持ie7以及ie7以下
_是ie以及ie6以下
固定布局的类型 www.jd.com
响应式布局的类型
流式布局（就像水一样，其实就是按照百分比布局 https://m.jd.com/ http://m.sohu.com/）
栅格布局（bookstrap栅格布局系统 其实就是改变一个范围做出改变，一格一格的改变 http://www.bootcss.com/）
瀑布流布局 （随窗口的改变而改变，等宽不等高，就像瀑布一样,蒙德里安风格 错落大方 超现实主义 简洁大气冷抽象 时装 家具）
圣杯布局 双飞翼布局（中间自适应，两边不改变 www.taobao.com）
网友评论