A、数据、服务器 1、上网就是请求数据，数据缓存。2、服务器服务器上面存放着网页相关的文件：包括HTML、CSS、JS文件、图片等。
当我们打开浏览器，输入网址，我们的计算机就会对这些文件发送HTTP请求
服务器收到这个请求之后，会把这些文件通过HTTP协议，传输到我们的计算机通道中，
然后，我们的浏览器再对这些文件进行渲染，呈递到页面上。 3、HTTP（超文本传输协议 ：Hypertext Transfer Protocol.）比普通文本厉害的文本，就是超文本 4、HTML业界的一个标准，网页技术的严格的三层分离：
HTML负责描述页面的语义；CSS负责面熟页面的样式；JS负责描述页面的动态效果；
所以：HTML不能让文字居中，也不能更改样式，比如颜色、字体，这都是CSS干的，也不能让盒子动起来，这是JS干的
也就是说：HTML只能干一件事情，通过标签对，给文本添加语义。 B、HTML 1、文档声明头任何一个标准的HTML页面，第一行一定是
<!DOCTYPE ……>
作用：它可以告知文档用哪个类型的规范
我们之前所学的HTML，他是HTML4.01版本，也是从IE6开始兼容的，HTML5是从IE9开始兼容的。
有很多类型：
在HMTL4.01版本里面，有两种大规范，每个大规范里面有三个小规范，所以总共有6个规范。
HTML4.01它分为两种：普通的、以及XHTML。
HTML它觉得自己的规范不严谨
<h1><H1>
于是，诞生了一个严谨的规范：XHTML ，X代表的严格； HTML 4.01 Strict 严格的该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">HTML 4.01 Transitional 普通的该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">HTML 4.01 Frameset 带有框架的该 DTD 等同于 HTML 4.01 Transitional，但允许框架集内容。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">在HTML5里面，简化成了<!DOCTYPE html>，并且，向下兼容 2、字符集<meta charset="utf-8" />字符集用meta标签定义，meta代表“元”，“元”配置，便是基本的项目配置
Charset就是字符集合的意思，
在中文项目开发中，主要分为两种字符集：
1、 UTF-8：国际通用字库，涵盖了全球所有人类的文字语言。
2、 Gb2312:是国标，中国的字库，里面只包含所有汉子和常用的外文，比如日文片假名，还有一些常见的符号$￥。
字库的规模：UTF-8>gb2312
字库的选择，因为UTF-8涵盖的文字很多，所以臃肿，加载速度很慢，gb2312小巧，加载速度快很多
列子：
QQ网，网易，搜狐都是用的gb2312，他们追求显示速度、
新华网，用的UTF-8，保证字符集的数量。 2.1 关键字和页面描述meta标签除了可以设置字符集，还可以设置关键字和页面描述
<meta name="description" content="网易是中国领先的互联网技术公司
为用户提供免费邮箱、游戏、搜索引擎服务,开设新闻、娱乐、
体育等30多个内容频道,及博客、视频、论坛等互动交流,网聚人的力量。" /
给页面设置这个描述，那么当你百度搜索的内容和这个相关，就会显示出你的页面，这个技术叫做“SEO搜索引擎优化”
定义关键字： 3. title标签也能有助于SEO， 4. HTML，对换行不敏感，对空格，tab不敏感。当出现空格、换行的时候，会出现空白折叠现象。5. HMTL标签5.1 P标签段落标签，他是一个文本级标签，里面只能放文字、图片、表单元素，其余一律不能放。 5.2 img页面中可以插入图片的类型有：jpg,gif,png,bmp。
Html是不能直接放入图片，因为他是纯文本，所以只能插入图片路径，所以长传项目的时候，图片也要一起打包上传。
语法：
他是一个自封闭镖标签
自封闭标签和标签对的区别，标签对除了给页面添加语义，还要添加内容，自封闭标签只要添加语义就行了。5.2.1 img标签属性alt:替代
src:路径
当你需要返回上一层的时候，那么，就：../
相对路径绝对不会出现下列情况：
aaa/../bb/1.jpg 6. 超级链接一个网站，他是由很多html页面组成的，html之间，是可以通过超链接相互跳转，形成一个“网”。
语法：<a href="index.html">主页</a>
a， 就是锚的意思 6.1 a标签的另外两个属性title：悬停文本
target：是否在新窗口中打开。目标的意思
<a href="index.html" title="这是前往主页的" target="_blank">主页</a>
target="_blank" _blank他是一个固定的写法 6.2 锚点页面中是可以有锚点的，所谓的锚点，就是一个小标记，这个标记用户不可察觉，可以通过name属性来设置，或者ID，如果a标签有name属性，那么就是页面的一个锚点
<a href="#md" target="_blank">前往锚点</a>
<a id="md">我是一个锚点</a> 最后，a标签是一个文本级标签，a的语义要小于p，a就可以当做文本来处理，所以p里面就相当于放的纯文字
正确：p包裹a
<p><a>段落</a></p>
错误：
<a><p>duanluo</p></a> 7. 列表（三种）7.1无序列表无序列表，用来定义一个列表的语义，并且每个项目和每个项目之间是不分先后的
Ul，无序列表
Li，列表项 7.2有序列表Ol，有序列表
Li，列表项
有序列表用的不多，平时可以直接在ul里面加入数字代表序列 7.3定义列表定义列表也是一个组标签，不过比较复杂，出现了三个标签：
dl:表示定义列表
dt：表示定义标题
dd：表示定义表述词
dt,dd只能在dl里面，dl里面只能有dt,dd,一个dt可以配多个dd
dt,dd 都是容器级标签，想放什么都可以，所以，现在我们应该注意并且了解：
【用什么标签，不是根据样式来决定，而是语义。】 8. div和spandiv和span是非常重要的标签，div的语义的’分割’，span的语义是’范围、跨度’，在CSS里面，他们都是最重要的盒子。
Div是一个容器级标签，里面什么都可以放，包括他自己。
Span也表达一个小区域，小跨度，但是是一个文本级标签。
也就是说，span里面只能放文字、图片、表单元素，里面不能放p、h1-h6、ul、dl、ol、div。
Span里面是放小元素的，div里面是放大东西的。
我们日常的开发模式都称为：div+css布局，div负责布局，负责结构，负责分块，CSS负责样式。 9. 表单表单就是收集用户信息的，让用户填写、选择的。
Form就是英语表单的意思，里面有action和method属性。Action就是表示，将要把表单提交到哪个地儿。Method属性表示用什么HTTP方法提交，有get和post两种方法。（在JS的AJXA里面详细介绍）。 9.1 文本框 <input type="text" />Input表示输入，指的是这是一个“输入小部件”，
Type代表类型
Text，表示是一个文本。
这也是自封闭标签
还有默认值：value，就是框中已经填写好的内容。 9.2 密码框 <input type="password" />9.3 单选按钮<input type="radio" name="xingbie" />男
<input type="radio" name="xingbie" />女
只能选一个，术语叫做互斥，通过name来设置，name相同则互斥。
如果想要默认被选中，那么则加上checked 9.3 复选框<input type="checkbox" name="aihao"/>睡觉
<input type="checkbox" name="aihao"/>吃饭
<input type="checkbox" name="aihao"/>打球
复选框最好也要给相同的name。
在html5里面，input类型会增加很多，在这里，我们先用这几个基本的 9.4 下拉列表Select就是选择，option就是选项
Select标签和ul,ol,dl一样，都是组标签。我们可以用select做页面的分块布局 9.5 多行文本框（文本域）Text就是文本，area就是区域
<textarea cols="30" rows="10"></textarea>
这个标签，是一个标签对，里面不用写东西，如果写了，就是默认文字。
Cols代表列，rows代表行。值就是一个数，表示多少行多少列。 9.6 三种按钮按钮也是input标签，一共有三种：
普通标签：
<input type="button" value="我是一个普通标签" />
提交按钮：
<input type="submit" />
Submit就是英语提交的意思，这个按钮不需要填写内容就有提交的文字，这个按钮点击后，表单就会被提交到后台。
传统前端开发工程师，只需要关系页面的样式，板式，交互，数据的保存，读取，处理，都是后台做的，但是，我们后面会学（node.js，他是处理后台数据的框架），然后，我们怎么把数据给后台，通过两种方式，一种表单提交，另一种，ajxa. 9.7 label标签在前面的单选按钮里面，有两个汉字，男、女，这两个汉字和input标签没有关系，那么，label就是解决这个问题的，
Input元素要有一个ID，然后label标签就有一个for属性，和ID相同，就表示绑定起来了。
什么表单元素都可以有label 9.8 重置按钮：<input type="reset" " />
Reset复位的意思
Input类型：
Text,password,radio,checkbox,button,submit,reset。 互联网前端分为三层：结构，样式，行为HTML 超文本标记语言 从语义的角度上描述页面的结构
CSS 层叠样式表 从审美的角度负责页面的样式
JS JavaScript 从交互的角度描述页面的行为 1、CSS整体感知CSS 层叠样式表，“层叠式”
目前最新的，CSS3，目前我们用的是CSS2.1，相互不冲突。
<style type="text/css">
</style>
Type表示类型，text表示他是纯文本。
CSS对换行不敏感，对空格，也不敏感，但是他有他的标准，冒号，分号，都不能少。 2. CSS选择器2.1标签选择器就是用标签名来当做选择器：
1） 所有标签都可以当做选择器
2） 不管这个标签藏的多深，都能被选择
3） 选择所有的，而不是某一个，所以是共性的，而不是特性。
一般用途在于CSS样式初始化。 2.2 ID选择器表示选择ID #div{ color: red;}1） 所有标签都可以有ID，ID的命名，要以字母开头，可以有数字，下划线。大小写严格区分，也就是说aa,和AA是两个不同的ID
2） 同一个页面中，也就是同一个HTML文件中，不能出现两个重复的ID，也是独特的 2.3 类选择器就是类选择器，英文叫做class。
所谓的类，他是class属性，和ID相似，任何表情都可以带有类，并且是可以重复的
一个元素可以有多个类
正确的一个思路：就是多用所谓的“公共类”，就是我们的类可以提供公共服务。
也就是说：
1） 不要试图用一个类名把某个标签元素的所有样式写完，这个标签可以多携带几个类，一起完成这个标签的样式。
2） 每个类尽可能的小，有一个公共的概念，能够让跟多的标签去使用它。
Class控制样式，ID控制行为
在我们的CSS里面，尽可能的用class去改变样式，除非极特殊的情况可以用ID，ID一般给JS使用。 一个标签，可以同时被多种选择器选择，标签选择器，ID选择器，类选择器，这些选择器都可以选择上同一个标签，从而影响样式，CSS层叠式的第一层含义。 3. 高级选择器3.1 后代选择器后代选择器不等于子代选择器，空格代表后代
只要是选择标签的后代，不管隔了多少代，都能被选中。 3.2并集选择器可以同时选择多个类名，用,隔开 3.3交集选择器p.fg{color: blue;}必须同时满足两个条件，同时是P标签并且CLSS为fg 3.4 通配符选择器*{margin:0;padding:0;}但是，通配符选择器效率不高，页面上标签越多的时候，效率越低。
在项目开发中，需要改变全局，尽量用公共类 3.5 儿子选择器IE7开始兼容，IE6不好使
只能选择儿子，孙子一下选不中。 4. CSS的继承性和层叠性。有些属性，当给自己设置的时候，自己的后代，也会被继承上，这就是继承性。 4.1 那些属性可以被继承：Color,text-开头的，line-开头的，font-开头的
当标签被设置这些属性的时候，他的后代都会被继承上这个属性，一层层继承下去，知道最小的一代
上面的文字样式都可以被继承；所有关于盒子的，定位的，布局的属性都不能被继承。 4.2 层叠性什么是层叠性？相当于权重；
层叠性：处理CSS冲突的能力，所以要对权重进行计算，所有的计算，没有任何兼容问题。
当选择器，选中某一个元素的时候，就要进行权重计算，
ID的数量，类的数量，标签的数量
一个ID=100的权重
一个class=10的权重
一个标签=1的权重。
并且，没有进制，比如十个标签，不等于一个class，还是比一个class小。
1,3,20
1,2,7 当权重相同的时候，选择最近的哪个，继承的权重为0. 权重问题：1） 先看有没有选中，如果选中了，那么以（id数，类数，标签数）来计算权重，谁大听谁的，如果都一样，听后面写的。
2）如果没有被选中，那么权重都是0，那么就近，如果权重相同，就近原则。
2）
color: blue!important;
表示绝对选中；不用计算任何权重问题；
！important无法提升继承的权重，该是0还是0
！important不影响就近原则。 5. 盒模型一个盒子主要属性就5个：width,height,padding,border,margin.
合起来就是一个盒模型。
盒模型主要分:W3C盒模型和IE盒模型（CSS3里面重点详解） 5.1 paddingPadding 内边距，padding的区域是有背景色的，在CSS2.1的前提下，并且背景色和内容区域相同
也就是说：background-color将填充border以内的所有区域
Padding是四个方向，所以我们可以分别描述四个方向；
Padding：20px 30px 50px;
Padding四个方向分别为：上，右，下，左；
Padding是可以用一个值包含四个方向；
小属性：Padding-left:20px;
大属性：padding:20px;
小属性一定不能写在大属性上面，但是小属性可以写在大属性下面 5.2 border边框：边框三要素：线型、粗细、颜色；
颜色如果不写，默认黑色，其他不写，没有边框。
一般在公司开发中，如果需要用到边框样式，则选择图片边框。一般不需要用到那些奇怪的属性。
Borde:1px solid red;
同样，可以拆分为三个小属性来写
Border-width,border-style,border-color。
小属性如果设置多个值，那么就是上右下左的顺序执行，并且用空格隔开。
小属性还可以往下拆一层
Border-top-width;
平时在工作中，尽量用大属性写。 6. 标准文档流宏观上来讲，我们的web页面，是一个流，必须从上往下一步步执行，就像织毛衣一样
微观来讲：
1） 空白折叠现象：
比如，我们想让IMG标签之间没有空隙，则必须紧密相连。
2） 高矮不齐，底边对齐
3） 自动换行，一行写不满，换行写 7. 块级元素和行内元素在标准文档流中，标签严格分为两个等级：
1） 块级元素
霸占一行，不能与其他任何元素并列，
能接受宽高的设置
如果不设置宽度，那么宽度默认为父级元素的100%
2） 行内元素
与其他元素并排，不能设置宽度和高度，默认的宽度就是内容的宽度。
在之前的HMTL里面，我们标签分为：文本级、容器级
文本级：p,span,a,b,I,u,em
容器级：div,h,li,dt,dd
CSS的分类，和上面很想，只有P不同
所有文本级标签，都是行内元素，P是块级元素
所有容器级标签都是块级元素。 7.1块级元素和行内元素的互相转换Display:inline
Display是显示模式的意思，inline就是行内
Display:block
转为块级元素
Display:none 隐藏元素，并且元素不占位置。
Visbility 元素不可见，但是会占用位置
标准流里面限制很多，标签的性质很恶心，比如要并排，就是设置宽高，所以，我们要做一个操作，脱离标准文档流：
CSS一共有是那种脱离标准文档流的手段：
1） 浮动
2） 绝对定位
3） 固定定位 8. 浮动浮动是CSS布局里面用的最多的一个属性。
浮动的三个性质： 8.1 浮动的元素脱标浮动的元素脱离了标准文档流，不再和其他元素同处一个水平面上。 8.2 浮动的元素互相贴靠如果有足够空间，那么就会互相铁卡，实在靠不住，就自己靠墙 8.3 浮动的元素有 “子围”9. 清除浮动9.1 清除浮动1：给浮动的元素的祖先元素添加高度。如果一个元素要浮动，那么他的祖先元素，一定要有高度，因为有高度的盒子，才能关注的浮动。 9.2 clear:both经常用这个清除浮动，但是这个方法有个问题，会导致margin失效 9.3 隔墙法在隔墙法的办法上，还有一个方法，内墙法。 9.4 overflow:hidden;overflow:溢出，hidden：隐藏
一个付清不能被自己浮动的儿子，撑出高度。但是，只要给父亲加上overflow：hidden，那么，父亲就能被儿子撑出高度。 9.5 浏览器的兼容问题。第一：IE6，不支持小于12PX的盒子，任何小于12PX的盒子，在IE6里面看起来都大了一些。 .box2{width: 5px;height: 5px;background: red;_font-size: 0px;}解决方法：将盒子的字号设置小于盒子的高度。
浏览器hack，hack就是我们平时说的黑客，指浏览器提供的后门，专门针对某一个浏览器做兼容，IE6留了一个后门，只要给CSS属性前面加上_，那么这个属性就会变成IE6认识的专有属性。 第二：IE6不支持用overflow：hidden来清除浮动
那么，就给IE6单独加上一条属性：_zoom:1;
这个属性可以出发浏览器的hasLayout机制，这个机制只有IE6才有，所以不用管是干嘛的。 10. MarginMargin外边距 10.1 margin 的坍塌现象。在标准文档流中，竖直、垂直方向的margin不叠加，以较大的那个为准。如果不在标准流，那么是不会出现坍塌现象。比如都浮动起来。 10.2 盒子的居中。Margin：0 auto;
Margin的值为auto,表示自动。当left、right两个方向，都是auto，则表示自动相同，就居中了
1） 使用这个方法的时候，盒子必须有width,并且是明确的宽度。
2） 只有标准流的盒子，才能用这个方法。
3） 这个方法是居中盒子，不是居中盒子的内容。
4） 居中内容：text-align:conter; 10.3 平时开发善于用父亲的padding，而不是儿子的margin、如果父亲没有border，那么儿子的margin实际上是给文档流踹了一脚，所以，他的父亲也跟着掉下来了
Margin这个属性，本质上是用来描述兄弟和兄弟之间的距离，最好不要用margin来表达父子之间的距离
所以，我们开发中，善于用父亲的padding，而不是儿子的margin. 10.4 关于margin的IE6兼容问题。IE6的双倍margin BUG。
当出现连续浮动的元素，携带和浮动方向相同的margin，队首元素，会双倍margin
解决方法：使浮动方向和margin方向相反，比如
Float:left;margin-right:20px;
在IE6里面，会出现3PX的BUG。
解决方法：不用去管，出现这个情况，就是代码不标准，标准不允许子元素对父元素设置margin 11. 行高CSS中，所有的行，都有行高，盒模型的padding，绝对不是直接作用在文字上的，而是作用在行上的。必须行高来设置文字居中。
一般，为了严格保证文字在行里面居中，我们有个默认的规定：行高、字号，一般都是偶数。这样，它们的差，就是偶数，就能被2整除。 11.2 font属性。使用font属性，能够将字号、行高、字体，都一起设置。
font: 14px/250px"微软雅黑";
等价于：
Font-size:14px;
Line-height:250px;
Font-family:’微软雅黑’；
网页上设置字体，必须是用户电脑已经安装的字体；
在页面中，一般我们只用：微软雅黑，宋体，黑体，如果需要用到其他字体，一般选择切图。
有的时候，为了防止用户电脑没有微软雅黑，那么就用英文状态下的逗号隔开，然后选择备选字体。
font-family: "微软雅黑","宋体";
备选字体可以有无数个，都用逗号隔开。
我们在设置备选字体的时候，要把英文字体放在前面，这样所有的中文，就不能匹配英语字体，就自动变成后面的中文字体。
所有中文字体，都有一个英文别名
微软雅黑的英语别名是：
Microsoft YaHei
宋体的英语别名是：
SimsSun.
行高可以用百分比设置，表示字号的百分之多少，一般来说，都要大于100%,因为行高一定大于字号。
Font：12px/24px;
等价于：
Font:12px/200%; 12. 超链接的们美化。超链接就是a标签。 12.1 伪类。a标签有四种伪类：
a:link{
表示用户没有点击过这个链接的样式。
}
a:visited{
表示用户访问过这个链接的样式
}
a：hover{
表示用户鼠标悬停的样式。
}
a:active{
表示用户点击这个链接，但是没有松开鼠标的时候的样式
}
记住，这四种状态，在CSS中，必须按照顺序写，否则，失效
然后，在他们那些前端前辈的研究中发现，这几个a标签的伪类美化，是可以简写的：
a:link,a:visited是可以省略的，直接写在a标签里面 13. Background13.1 background-color:red;背景颜色设置。
有三中表示方法：
单词、rgb、十六进制。 13.2 background-image:给盒子加上背景图片。
Background-image: url(img/1.png);
用相对路径写。
背景图片默认平铺开来。 13.3 background-repeat设置背景图是否平铺，重复。
有三个属性：
background-repeat： no-repeat; 不重复
background-repeat: repeat-x; 横向重复
background-repeat： repeat-y; 纵向重复 13.4 background-poisition背景属性定位。
background-poisition: x轴移动量 y轴移动量；
移动量用像素表达，并且可以为负数。 13.5 CSS精灵：“CSS精灵”，也叫做“CSS雪碧”技术，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片，然后用，CSS的背景定位来显示我们所需要的图片部分。
优点：减少了HTTP请求，比如说原本有四张图片，那么就需要4个HTTP请求，但是用了CSS精灵，四张合为一张，HTTP请求就只有一个了。、 13.6 background-attachment背景固定在网页，不会随着滚动条滚动而滚动。 13.7 background是可以写成综合属性background:red url(img/1.png) no-repeat 100px 100px fixed; 14. 相对定位定位有三种：相对定位、绝对定位、固定定位。
相对定位：position: relative；
什么是相对定位？
相对定位，就是微调元素的位置，让元素相对自己原来本身的位置，进行位置调整
相对定位不脱标，老家留坑，形影分离。
相对定位不脱离标准文档流，真实位置，实在原来的位置，只不过肉眼看到的影子被定位过去了，到处飘。 14.1 相对定位的用途相对定位有坑，所以一般不做“压盖效果”，在页面中的效果很小，就两个：
1） 微调元素
2） 做绝对定位的参考，子绝父相。
相对定位有两个值：top,left。 15. 绝对定位position: absolute;
绝对定位比相对定位更灵活。
并且绝对定位是脱离标准文档流的，所有的标准文档流的性质，在使用了绝对定位后，都不遵守了。
然后，使用了绝对定位后，标签就不区分所谓的行内元素和块元素了，不需要display：block就可以设置宽高了。 15.1 参考点绝对定位的参考点用TOP描述，如果没有相对定位做参考，则以页面的左上角为参考点，而不是浏览器的左上角。
![]()
image.png
Bottom相对于浏览器窗口底部为参考点。常用的方法，一个绝对定位的元素，如果父辈元素中出现了相对定位，那么就以父元素的左上角为参考点。
然后，是听从最近的有定位的祖先元素，而不一定是父亲 不一定非要相对定位，任何定位都可以做参考点。子绝父绝，子绝父相，子绝父固，都可以给儿子定位，但是，由于其他几个定位方法，没有一个盒子在文档流里面，所以不稳定，一般采取子绝父相，父亲没有脱标，儿子在父亲的范围内移动，是最好的。 当我们使用了绝对定位后，margin失效了，那么，怎么居中？
Left:50%;margin-left:负宽度的一半； 16. 固定定位基于浏览器窗口的一个定位
页面不管如何滚动，盒子显示的位置不变
Position:fixed;
IE6 不兼容。 17. Z-index表示层叠关系
Z-index表示谁压着谁，谁大就在上面。
只有定位了的元素才能有z-index值，不管什么定位。
Z-index没有单位，单纯的数字，只比较大小
如果都没有z-index,那么，谁写在HTML后面，谁压住别人。
从父现象，父亲z-index比别人小，自己再大也没用。
| 
收藏
淘帖
踩
