前端基础
软件架构
c/s一般我们使用的都是，c表示客户端。s表示服务器负责处理软件的业务逻辑（远程位置）数据发给服务器
特点：
1软件使用前要安装
2软件更新时服务器和客户端要同时更新
3软件不能跨平台使用
4客户端和服务器通信采用的是自有协议（相当于密码本），相对安全，防止数据被截获
B/s b浏览器，s服务器
1本质上是从c/s，b/s是以浏览器作为客户端
2 b/s通过使用浏览器访问网页的形式，使用软件
特点
1.软件无需安装，直接访问网站
2.软件更新时客户端无需更新
3.软件可以跨平台
4.采用的是通用的HTTP协议，谁都知道，安全性不高，可通过程序加强安全性
c/s的开发成本高，咱们主要做的是b/s
软件开发流程
ps图片
前端把设计图转化为代码
后端是将静态修改为动态网页
介绍HTML
结构 HTML:描述页面的结构（链接，标题，段落，图片）
表现 CSS（东西多）：控制页面的元素的样式（漂亮，外在样式，页面大小，背景字体颜色）
行为javaScript：响应用户的操作（点击交互）
进制
几进制就是满几进一
二进制0，1
十六进制10-15 a-f来表示10，11，12，13，14，15
HTML（htm）超文本标记语言
超文本：超链接(我们可实现页面跳转)
文本在纯文本编辑器中编写的内容，纯文本中只能保存文本内容
html是使用标签的形式标识网页中的不同组成部分html这有一个根标签
<标签名></标签名>标签一般有两个
网页的所有东西应写在根标签里，还有子标签（head,body）
head子标签（title）祖先标签，后代标签
head标签设置信息，（不可见）帮助浏览器解析网页的
body标签是可见的部分
title标签标题（不会在网页中出现）默认显示在标题栏中搜索引擎在检索页面时，会首先检索title标签其中的内容。
注意标准的格式
注释<!—
注释内容
—>
字体标签
属性：对处理标签内内容,是写在开始标签中就是名值对的结构
一个开始标签中可以设置多个属性，属性用空格隔开
doctype
为了让；浏览器知道我们使用的是html的版本我们还需要在网页的最上面来添加一个doctype声明来告诉浏览器网页的版本
**<!doctype html>**html5的声明，不写导致有些浏览器进入怪异模式，浏览器解析页面会导致页面无法正常显示，必须要写文档声明。
怪异模式
元素
标签是元素
1.乱码问题
乱码出现
计算机是个很笨的机器，他只认识两个东西0，1
计算机中保存的内容最终都需要转化为二进制0，1的内容
在读取内容时需要将二进制编码转化为正确的内容
编码 依据规则，将字符转化为二进制
解码 ~~~将编码转化为字符
字符集 编码和解码所采用的规则
根本原因编码和解码采用的字符集不同
常见的字符集{
ASCII
ISO-8859-1
GBK
GB2312中文默认编码
UTF-8万国码支持所有文字
ANSI 自动系统的默认编码来保存文件
}
在中文系统浏览器中默认的是GB2312
meta标签用来设置网页的一些元数据，比如网页的字符集，关键字，简介
meta是一个自结束标签编写时可以在开始标签中添加一个，书写的位置在头标签
标题标签：在HTML中一共有六级标题标签h1~h6
在显示效果上hj1最大
使用标签时，关心的是语义
在body标签中所使用
2.标签
实体
在HTML中一些如<,>这种特殊字符，不能直接使用需要用一些特殊的符号来表示，这些符号我们称为实体<转义字符串>
实体的语法：
&实体的名字：
< <
>
空格
版权符号 ©
在body标签中书写实体
图片标签
在head标签中
使用一个img标签，是自结束标签
src设置一个外部图片的路径
搜索引擎可以通过alt属性来识别不同的图片（不写则没有）
width宽度修改图片一般都使用像素
height高度
如果同时指定则都变（不建议修改）
图片的路径目前都是相对路径
相对路径相当前资源的所在目录的位置
…/返回上一目录有几个返回几个
图片的格式
jpeg(jpg)（图片支持的颜色比较多，图片可以压缩，但是不支持透明）用来保存图片
gif支持的颜色少，支持简单的透明，复杂的不行，支持动态图
png支持的颜色多，支持丰富的透明
图片的使用规则：效果不一致，使用效果好的
效果一致，使用小的
meta标签
1使用meta可以设置网页的关键字
2用来指定网页的描述
3请求的重定向
<meta http-equiv=“refreah” content=“秒数”；url="http://www.baidu.com（）目标路径 " />
3.内联框架
内联框架（body标签中）（类似于图片标签）
使用内联框架可以引入一个外部页面
使用iframe来创建一个内联框架
属性：
arc：指向一个外部页面的路径,可以使用相对路径（相对路径是指以当前文件资源所在的目录为参照基础，链接到目标文件资源(或文件夹)的路径）
在现实中不推荐使用，不会被搜索引擎检索
width，length
name 可以为内联框架指定一个name属性
4.html的使用规范
1.html不区分大小写，但是我们一般要小写
2.HTML中的注释不能嵌套
3.html标签中必须结构完整，要么成对出现,要么自结束标签
不符合规则的形式浏览器会自动加上，有时会加错。
4.html标签可以嵌套，但是不能交叉嵌套
5.html标签中的属性必须有值，值必须加引号（单双都行）
5.超链接
超链接（body标签）
使用超链接可以使我们从一个页面跳转到另一个页面
使用a标签来创建一个超链接
属性：href：指向链接跳转的目标地址，可以写一个写一个相对路径，也可以写一个完整的地址
a标签中的targer属性可以用来打开指定打开链接位置
可选值：
_self:表示在当前窗口打开（默认值）
_blank:在一个新的窗口打开链接
(表现标签不建议使用)
创建超链接时，如果地址不确定可以直接写一个#（自动跳转到当前页面的顶部）作为占位符
html中有一个属性，每一个元素都可以设置，该属性可以作为标签的唯一标识
这个属性就是id，id属性在同一个页面中且只能有一个不能重复
css
1.元素
块元素
div就是一个块元素，所谓块元素就是会独占一行的元素
div是对页面进行布局的
用来做页面中的布局
内联元素
span是一个内联元素（行内元素）专门用来选中文字
行内元素指的是自身大小的元素，不会独占一行
选中文本设置样式
常见的内联元素：a,img iframe span
一般情况下只使用块元素去包含内联元素
a元素可以包含任意的元素
p元素不能包含任何的块元素h
**伪元素（**使用伪元素表示元素的一些特殊的位置）
p:first-letter
p:first-line
before表示元素最前面的部分
一般before都需要结合content这个样式一起使用，
通过content可以向before或after的位置添加一些内容
after表示最后面
2.选择器
元素选择器
p{}作用，通过元素选择器，可以选择页面中的所有的指定元素
语法标签
h1{}
id选择器：筛选唯一的元素（id不能以数字开头）
#name{
属性
}
类选择器
我们可以为元素设置class属性，class可以重复，一个元素
可设置多个class属性，多个值用空格隔开
语法
.类名{
属性
}
选择器分组(并集选择器)
语法：选择器1，选择器2，选择器N{}(
并集选择器)
**通配选择器（**选择页面中的所有元素）
语法*{}
复合选择器（交集选择器）
可以选中多个选择器的元素
后代元素选择器
作用选中指定元素的指定元素
语法
祖先元素 后代元素{} 父元素>子元素
伪类选择器
伪类的定义：
伪类是添加到选择器的关键字，用于指定所选元素的特殊状态。例如，伪类 :hover 可以用于选择一个按钮，当用户的指针悬停在按钮上时，设置此按钮的样式。
<a class =“abc” href=http…">名字<>（a是超链接标签）
伪类表示元素的一种特殊化状态
当我们需要为处在这些特殊化状态的元素设置样式是可以使用伪类
没访问过的链接：
:ink表示普通的链接（没访问过的）
:visited表示访问过的链接
由于涉及到用户隐私问题，所以使用visited只能写字体的颜色
浏览器是通过历史记录来判断连接是否访问过
:active被点击的状态
.hover伪类表示鼠标移入的状态
:hover和:active也可以为其他元素设置
ie6中不支持对超链接以外的元素设置：:hover和:active
-:focus:获取焦点
-:before指定元素前
-:after 指定元素后
-::selection选中的元素（注意在火狐需要另一种方式编写:：-moz-selection）
（input）可以创建一个文本输入框
属性选择器
title属性，这个属性可以给任何的标签指定
当鼠标移入到元素上，元素中的title属性值将作为提示文字显示
属性选择器
作用：可以根据元素中的属性只来选取指定元素
语法：
[属性名]选含有指定属性的元素
[属性名=“属性值”]选取含有指定属性值的元素
[属性名^=“属性值”]选取以指定内容开头的元素
[属性名$=“属性值”]选取以指定内容结尾的元素
[属性名*=“属性值”]只要包含属性元素
兄弟元素选择器
后一个兄弟元素选择器
作用：可以选中一个元素后紧挨着的指定的兄弟元素
语法：前一个+后一个
前一个~后所有元素
选择器的优先级
当使用不同的选择器时选择同一个元素并且设置相同的样式时
内联样式 1000
id选择器 100
类和伪类 10
元素 1
通配选择器 0
继承的样式 没有优先级
当选择器中包含多种选择器时，需要将多种选择器的优先级相加然后再排序
但是注意，选择器计算不会超过它的最大数量级。如果选择器的优先级一样则使用靠后的样式
并集选择器的优先级单独计算
div,p，#p1 .hello{}
可以将样式的最后，添加一个！important,可以获得一个最高优先级，将会优先于所有的样式显示甚至超过内联样式，但是在开发中尽量尽量不用
3.伪类
子元素的伪类
：first-child 可以选中第一个子元素（不考虑父亲）
：last-child最后一个子元素
：nth-child （3）可以选中任意位置的子元素
even表示偶数位置的子元素
odd表示奇数
:first-of-type
:last-of-type
child,是在所有的子元素中排列。
而type，是在当前类型的子元素中排列
否定伪类
作用：可以从已选中的元素中剔除出的元素
语法:
:not(选择器)
伪类的顺序
:link
:visited
:hover(鼠标移入)
:active
优先级都一样
4. 样式的继承
祖先元素的样式，会被他的后代元素所继承
利用继承，可以将基本样式设置给祖先元素，这样所有的后代元素将会自动继承这些样式。
但是并不是所有的样式都会被子元素所继承，比如：背景相关的样式都不会被继承，比如背景的样式不会被继承
5.文本标签及样式
P标签中
em(表示的是语气强调)标签用于表示一段内容重的着重点
strong标签用于表示一个内容的重要性，强调的是内容
em表现为斜体，而strong显示为粗体
i标签以斜体显示，b表示加粗显示（个性化）
small标签中的内容会比他父元素的文字要小一点（版权声明）
网页中所有加书名号的内容都可以使用cite标签，表示参考内容
q标签表示一个短的引用（行内引用）
blockquotea标签表示一个长引用（块级引用）
sup标签设置上标
22
赵薇[1][1]
sub标签表示下标(like sup)
del标签表示删除的内容
del标签的内容表示为带删除线
ins插入的内容
需要直接编写一些代码
pre标签表示一个预格式，会将代码的格式保存，不会忽略多个空格
专门表示代码
6.列表
无序列表，有序列表
无序列表 使用一个ul标签来创建一个无序列表，使用li在ul中建立一个一个的列表项一个li就是一个列表项（通过type可以修改项目符号）
有序列表
有序列表与无序列表相似只不过使用ol来代替ul
有序列表使用有序的序号作为项目符号
可选值1.默认值1，2，3
a/A,采用小写，或大写字母作为序号
i/I采用小写或大写的罗马数字作为序号
ol也是块元素
列表之间可以嵌套
定义列表（下拉菜单）
用对一些词汇或内容进行定义
使用dl来创建一个定义列表
dll中有两个子标签，dt：被定义的内容
dd对定义内容的描述
文本格式化
长度单位
像素px
像素是我们在网页中使用的最多的一个单位
一个像素相当于我们屏幕中的一个小点，我们的屏幕的实际上是由这些像素点构成的一个像素相当于一个点
但是这些像素点，是不能直接看到
显示效果越好越清晰，像素就越小，反之像素越大
百分比%，
也可以将单位设置为一个百分比形式，这样浏览器将会根据其父元素的样式来计算该值
使用百分比的好处是，当父元素的属性发生变化时，子元素也会按照比例来发生变化
在我们创造一个自适应的页面时，经常使用百分比做为单位
em和百分比类似，它是相对于当前元素的字体大小来计算
使用em时当字体大小发生变化时，em也会随之改变
当设置字体相关的样式时经常会使用em
16进制RGB值（可以表示颜色）语法：
#红色绿色蓝色
十六进制00表示为没有
ff表示的最大，相当于rgb中的255
红色#ff0000
黑色#000000
字体样式
font-size设置的并不是文字本身的大小
在页面中，每个文字都在一个看不到的框中的，我们设置的font-size实际上是设置格高度并不是字体的大小
通过font-family可以指定文字的字体该样式可以指定多个字体
当采用多个字体时，浏览器会优先使用前边的字体，如果字体不支持，则使用默认字体
字体的分类
serif（衬线字体）
sans-serif(非衬线字体)(比较直)
monospace(等宽字体)
cursive（草书字体）
fantasy(虚幻字体)
font-style可以用来设置文字的斜体
可选值：normal,默认值，正常显示
italic 文字会以斜体显示
oblique 文字会以倾斜的效果显示
大部分浏览器都不会对倾斜和斜体做区分，
font-weight可以设置文本加粗效果
可选值：normal 默认值，文本正常显示
bold文本加粗显示
font-variant可以用来设置小型大写字母
可选值：normal 默认值，文本正常显示
small-caps 文本以小型大写字母显示
css提供了一个样式font使用该样式可以同时设置字体相关的所有样式（至少两个（大小，字体））
line-height来设置行高，行高类似与单线本
网页中的文字实际上写在一条线上
行间距=行高-字体大小
可以接受的值：
1.直接就收一个大小
2.可以指定一个百分数，则会相对字体去计算行高
3.可以直接传递一个数值，则行高会设置字体大小相应的倍数
对于单行文本来说，可以将行高设置为和父元素的高度一致，这样可以是单行文本在父元素中垂直居中
**font还会指定行高（字体后加入行高）**在体后可以添加/行高，该值是可选的，如果不指定则会使用默认值
text-transform样式可以设置文本的大小写
可选值：
none默认值
capitalize单词的首字母大写
uppercase所有的字母都大写
lowercase所有的字母都小写
文本的修饰
text-decoration
可选值：
none不参加任何修饰，正常显示
underline为文本添加下划线
overline为文本添加上划线
line-throuth 为文本添加删除线
超链接会默认添加下划线（去除超链接的下划线）
text-decoration :none;
letter-spacing可以指定字符间距
word-spacing:可以设置单词间的距离（实际上是词与词空格的大小）
text-align用于设置文本对齐方式
可选值：
left 默认值：文本靠左对齐
right,文本靠右对齐
center 文本居中对齐
justify两端对齐
通过调整文本之间的空格大小，来达到一个两段对齐的目的
test-indent用来设置首行缩进 2em两个缩进
当它指定一个正值时，会自动向右侧缩进指定的像素
如果为它指定一个负值，则会向左移动指定的像素
通过这种方式可以将一些不想显示的文字隐藏起来
盒子模型
css处理网页时，它认为所有的元素都是盒子
一个盒子包括
内容区(content)(包含元素)
内边距(padding)
边框(border)
外边距(margin)
1.盒子模型的边框
设置边框必须指定三个样式（缺一不可）
1.border-width:边框的宽度（盒子的大小增大）
如果指定了四个值，这四个值会分别设置为上右下左（按照顺时针的方向设置的）
如果指定三个值，这三个值分别设置给上 左右 下
**如果指定两个值，这两个值分别设置给上下 左右 **
一个都是这个形式
border-color:边框的颜色
border-style:边框的样式（solid实线）
border-xxx-width可类比
xxx的值可能是top right bottom left
专门用来设置指定边的宽度
border（四个边一样）
可以设置四个边框的样式（
border-top,border-right border-bottom,border-left
可以单独边生效
内边距（padding）（四个方向的内边距）会影响盒子的可见框大小，元素的背景会延伸到内边距
盒子大小由内容区，内边距和边框共同决定
外边距指的是盒子与盒子间的距离（不会影响盒子的大小，会影响盒子的位置）
margin-top:
margin-left:
margin-right
margin-bottom: ;正值往右负值往左
margin还可以设置为auto，auto一般只设置给水平方向的margin
如果只指定左外边距或右边距的margin为auto则会将外边距设置为最大值
垂直方向外边设置为auto则外边距默认为0
如果将left和right同时设置为auto，则会将两侧的外边距设置为相同的值
就可以使元素自动在父元素中居中
简写属性 上下左右规则和padding一样
2.垂直方向外边距的重叠（折叠）
所谓的外边距重叠指的是兄弟元素之间的相邻外边距会取最大值不是取和
如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素
浏览器默认样式
默认样式，正常情况下我们是不需要使用的
我们可以去*{
margin:0;
padding:0;
}
内联元素的盒模型
设置水平内边距，内联元素可以设置水平方向的内边距
垂直方向内边距，内联元素可以设置垂直方向内边距，但是不会影响页面的布局
为元素设置边框
水平外边距不会重叠但是会求和
垂直边距不支持
通过display样式可以修改元素的类型
可选值：
inline：可以将作为内联元素显示
block：可以将元素设置为块元素显示
inline-block：将一个元素转化为行内块元素
可以使一个元素既有行内元素的特点又有块元素的特点
既可以设置宽高，又不会独占一行
none表示不显示元素，不显示
visibility 设置元素的显示和隐藏
可选值：visible默认显示
hidden表示隐藏
overflow
子元素默认是存在于父元素的内容区中
理论上讲子元素的最大可以等于父元素的内容区，则超过的大小会在父元素以外的位置显示，超出父元素的内容，我们称为溢出的内容
通过overflow可以设置父元素如何处理溢出内容：
可选值：visible
hidden,溢出的部分隐藏
scroll，为父元素添加滚动条
auto,会根据要求添加滚动条
3.文档流（网页中的位置的一层）
网页的最底层
我们创建的元素默认在文档流中
元素在文档流的特点
块元素
1.在文档中会独占一行，会自上而下排列
2.块元素在文档流中默认宽度是父元素的100%
3.块元素在文档流中的高度默认被内容撑开
内联元素
1.内联元素在文档流中只占自身的大小，会默认从左向右排列
如果一行中不足以容纳所有的内联元素，则会换到下一行继续自左向右
2.内联元素在文档流中的高度默认被内容撑开
浮动
块元素在文档流中默认垂直排列，所以这三个div自上至下依次排开
如果希望块元在页面中水平排列，可以使块元素脱离文档流，使用float来使元素浮动，从来脱离文档流
可选值
none,默认值，元素默认在文档流中排列，
left元素会立即脱离文档流，像文本的左侧移动
right元素右侧移动
4.浮动
当为一个元素设置浮动以后（float属性是一个非none的值）元素会立即脱离文档流，元素脱离文档流之后,他下边的元素会立即向上移动，元素浮动以后会尽量向页面的左上或者是右上移动，直到遇到父元素边框
如果浮动元素上边没有一个浮动的块元素，则浮动元素不会超过块元素
浮动元素不会超过兄弟元素 ，最多最多一边齐
浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围
所以我们可以通过浮动来设置文字环绕图片
在文档流，子元素的宽度默认占服选父元素的全部
内联元素脱离文档以后会变成块元素
5.网页的布局
摆放盒子的方法
高度塌陷（父元素的高度坍塌）
我们可以将父元素的高度写死，将高度固定
根据w3c的标准，在页面元素都一个隐含的属性；叫做Block formatting context简称bFc该属性可以设置打开或关闭，默认是关闭的，当开启元素的bfc时元素将会有如下的特性：
1.父元素的垂直外边距不会和子元素重叠
2.开启BFC的元素，不会被浮动元素所覆盖
3.fc的元素可有包含浮动的子元素
如何开启元素的BFC（对父元素来说）
1.设置元素浮动
2.设置元素绝对定位
3.设置元素为inline-block（可以解决问题），但是会导致宽度丢失，不推荐使用这种方式
4.将元素的overflow设置为一个非visible的值（副作用最小）
overflow-hidden
还有另一个隐含的属性叫做haslayout.
该属性的作用和BFC相似，所以ie6浏览器可以通过开haslayout来解决问题
开启的方式很多
直接将元素的zoom设置为1即可
zoom表示放大元素，后面跟着一个数值，写几就将元素放大几倍
zoom:1表示不放大元素，但是可以开启haslayout
解决高度塌陷的方法
我们有时希望清除其他浮动元素对当前元素的影响
可选值：
none:默认值，不清除浮动
left：清除左侧浮动元素对当前元素的影响
right,清除右侧浮动元素对当前元素的影响
both.清除两侧浮动元素对当前元素的影响
清除浮动以后，元素回到原来的位置
解决高度塌陷方案二：
可以直接在高度塌陷的父元素后，添加一个空白的div
由于这个div并没有浮动，所以他是可以撑开父元素的高度的，
然后在对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度，基本没有副作用
使用这种方式会在页面中添加多余的结构
解决高度塌陷方案三：可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动
这样做和添加一个div的原理一样，可以达到一个相同的效果。
而且不会在页面中添加多余的div
1147
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
