前端基础
1、 软件架构：
- C/s,客户端，服务器： 一般使用的软件都是c/s架构，qq c表示客户端，用户通过客户端来使用软件
s表示服务器，服务器负责处理软件业务逻辑 特点：软件使用必须安装 软件更新是，服务器和客户端的同时更新 C/s不能跨系统使用
C/s架构的软件客户端和服务器通信采用的是自有协议，相对来说比较安全。 - B/s，浏览器，服务器： B/s本质上也是c/s，只不过b/s构架的软件，使用浏览器作为软件的客户端。
Bs构架软件通过使用浏览器访问网页的形式，来使用软件，京东，淘宝 软件不需要安装，直接使用浏览器访问指定的网址即可
特点：
软件不需要安装，直接使用浏览器访问指定的网址即可
软件更新时，客户端不需要更新
软件可以跨平台，只要系统中有浏览器，就可以使用
B/s架构的软件，客户端和服务器之间通信采用的是通用的http协议，相对来说不安全
2、 网页：结构，表现和行为
结构：html，描述页面的结构
表现：css，控制页面中元素的样式
行为：js，响应用户操作
3、HTML：超文本标记语言
纯文本中只能保存文本内容。
超文本指的是超链接，可以从一个页面跳转到另一个页面。
属性：可以通过属性来设置标签如何处理标签中的内容
属性名=“属性值”，一个标签中国可以同时设置多个属性，但是属性间需要用空格隔开
Doctype:告诉浏览器使用哪个html版本
Html5文档申明：<!doctype html>
不写文档申明，会导致有些浏览器解析页面进入怪异模式，不能正常解析页面。
-
元素：一个完整的标签称为元素
-
标签：
标题标签：h1~h6，从大到小，重要性一次降级，一般页面只能写一个h1 段落标签：表示内容中一个自然段
p，字符之间的空格，都会当成一个空格解析
自结束标签: Br：换行 ；Hr：一条水平线 -
Img：
相对路劲：相对于当前资源所在目录的位置
绝对路劲：…/返回上一级 -
图片格式：
JPEG（JPG）
JPEG：图片支持的颜色比较多，图片可以压缩，但是不支持透明 一般使用JPEG来保存照片等颜色丰富的照片
GIF：支持的颜色少，只支持简单透明，支持动态图 图片颜色单一或者是动态图是可以使用gif
PNG：支持的颜色多，并且支持复杂的透明
可以用来显示颜色复杂的透明 使用原则： 效果不一致，使用效果好的 效果一致，使用小的 Center标签：标签中的内容，会默认在页面中居中 -
一些特殊字符，如<,>不能直接使用，需要使用特殊的符号表示这些特殊符号实体
空格:$nbsp 一个 代表一个空格
版权符号：© -
进制：几进制就是满几进一
二进制：0 1
十进制：满十进一
十六进制：满十六进一，a,b,c,d,e,f:分别表示10,11,12,13,14,15,16
八进制：满八进一 -
乱码问题： 字符集：编码和解码的规则所采用的规则，称为字符集
-
乱码产生原因：编码和解码所采用的字符集不同
常见字符集：ASCII，iso-88590-1，GBK ,GB3212（中文系统默认编码），UTF-8（国码）
Mate:设置网页的一些元数据，设置网页的关键字，指定网页描述，请求网页的重定向元素:
Charset:字符集
Name: 对content的描述
Content: 关键字 //请求重定向
http-equiv=refresh Cntent=’4,url’ -
Xhtml语法规范： html不区分大小写，但一般都使用小写 Html中注释不能嵌套
HTML标签必须结构完整，要么成对出现，要么自结束标签 浏览器会尽最大的努力正确的解析页面，所有不符合语法规范的内容，浏览器会自动修复
Html标签可以敲套，但是不能交叉嵌套 HTML标签中的属性必须有值，且值必须加引导 -
内联框架：可以引入一个外部的页面，使用iframe引入内联框架
属性： Src:指向一个外部页面的路径，可以使用相对路劲
Width:Height Name :可以为内联框架指定一个name值 在实际开发中，不推荐使用内联框架，因为内联框架中的内容不会被搜索引擎所检索。 -
超链接：可以让我们从一个页面跳转到另一个页面，a a元素可以包含任意元素，除了它本身。
-
属性：
Href:指向链接跳转到目标地址，可以写一个相对链接或完整的地址 Target:规定在何处打开链接：
_blabk：在新窗口打开超链接
_self：表示在当前窗口打开，默认值 可以设置一个内联框架的name值，链接将会在指定的内联框架中打开 如果将链接地址设置为#，点击链接将自动回到顶部 链接地址设置为#+ID值，点击链接可以自动定位到id位置
发送电子邮件超链接，点击链接以后可以自动打开计算机中默认的邮件客户端 Href:mailto:邮件地址
当点击这个链接时，会默认打开计算机的默认电子邮件客户端，并且将收件人设置mailto后的邮件地址 -
p元素内不能包含任何块元素
4、CSS：层叠样式表
Tilt
内联样式
内部样式
外部样式
Css语言：选择器，声明块
选择器：通过选择器可以选中页面中指定的元素，并且将声明块中的样式应用到选择器对应的元素上。
声明块：紧跟在选择器的后边，使用一对{}括起来，一个声明块中可以写多个声明，多个声明之间使用；隔开，选择器和样式值之间使用:隔开。
块元素：独占一行，前后有换行符，会自动填充父元素，可设置height，width，padding，margin在水平和垂直上都有效。主要用来做页面中的布局
内联元素：不会独占一行，前后无换行符，设置height，width无效，垂直方向上margin无效，水平方向上padding，margin有效。主要用来选中文本设置样式。
一般使用块元素开包含内联元素。
元素选择器：可以选择页面中的所有指定元素
标签名：{}
Id选择器：#id属性值{}
class选择器：.class属性值{}
选择器分组（并集选择器）：选择器1，选择器2，选择器3{}
通配选择器：可以用来选择页面中的所有元素，*{}
复合选择器：交集选择器：可以选中同事满足多个选择器的元素，选择器1选择器2选择器N{}，对于id选择器，不建议使用复合
元素之间的关系：
父元素：直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接或间接包含后代的元素
后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素
兄弟元素：拥有相同父元素的元素叫做兄弟元素
后代元素选择器：选中指定元素的后代元素，祖先元素 后代元素{}
子元素选择器：选中指定父元素的指定子元素，父元素 > 子元素{} ie6及以下不支持子元素选择器
伪类专门用来表示元素的一种特殊的状态
伪类选择器：
A:link 正常连接（没访问）
A:visited:访问过的链接，只能定义字体颜色
A:hover:鼠标滑过的链接(其他元素也可以设置,ie6不支持）
A:active:正在点击的链接(其他元素也可以设置,ie6不支持）
伪类的顺序：
link,visited,hover,active,优先级一样
:focus：获取焦点，文本框获取焦点
:before：指定元素前，需要结合content样式一起使用
:after：指定元素后，需要结合content样式一起使用。
::selection：选中的元素，为p标签中选中的内容：：设置样式
火狐中 ::-moz-selection{}
伪元素选择器：使用伪元素来表示元素中的一些特殊的位置
:first-letter：首字母
:first-line：首行
属性选择器：可以根据元素中的属性或属性值来选取指定元素
Title属性:可以诶任何标签指定，单鼠标移入到元素上市，元素中的title属性的值将会作为提示文字。
[Title]{} 选取含有指定属性的元素
[Title=’属性值’]{} 选取含有指定属性值的元素
[Title^=’属性值’]{} 选取以属性值开头的元素
[Title$=’属性值’]{} 选取以属性值结尾的元素
[Title*=’属性值’]{} 选取属性值以包含指定内容的元素
子元素的伪类：
:first-child：选择第一个子标签
:last-chide：选择最后一个子标签
:nth-child：选择指定位置的子元素,从1开始
选择指定类型的子元素：
:first-of-type
:last-of-type
:nth-of-type
Child：在所有的子元素中排列
Type：在当前类型的子元素中排列
兄弟元素选择器：
前一个 + 后一个 ：可以选中一个元素后紧挨着的指定的兄弟元素
前一个 ~ 后边所有：可以选中一个元素后边所有的兄弟元素
否定伪类：可以从已选中的元素中剔除某些元素
：not(选择器)
样式的继承：祖先元素上的样式，可以被他的后代元素所继承
利用继承可以将一些基本的样式设置给祖先元素这样所有的后代元素将会自动继承这些样式。但是并不是所有的样式都会被子元素继承。
选择器的优先级
内联样式：1000
Id选择器：100
Class和伪类选择器：10
元素选择器：1
通配*:0
继承的样式：没有优先级
内联选择器>Id选择器>class选择器>标签选择器
当选择器中包含多种选择器是，需要将多种选择器的优先级相加在比较。
选择器的优先级不会超过最大的数量级。如果选择器的优先级一样，则使用靠后的样式。
！Import，则此时该样式将会获得一个最高的优先级，会高于所有的样式，在开发中应尽量避免使用。
文本标签：
Em:表示一段内容中的着重点，语气上的强调，默认使用斜体
Strong:表示一个内容的重要性，强调内容，默认粗体
I：斜体，
B：加粗
Small：标签内容会比他的父元素中的文字要小一些，合同中的小字，网站版权等使用
Cite：表示参考的内容，例如加书名号的内容
q：表示一个短的引用（行内引用），引用的内容会默认加引号
Blockquote：表示一个长引用（块级引用）
Sup：设置一个上标
Sub：设置一个下标
Ins：表示一个插入的内容，会自动添加下划线
Del：表示一个删除的内容，会自动添加删除线
Code：专门用来表示代码
Pre：是一个预格式标签，会将代码中的格式保存，不会忽略多个空格
列表：块元素
无序列表：ul标签创建一个无序列表，一个li就是一个列表项
Type属性可以修改无序列表的项目符号
Disc：默认值，实心的圆点
Square：实心的方块
Circle：空心的圆
有序列表：ol标签创建一个有序列表，一个li就是一个列表项
Type:可以指定序号的类型
1：默认值，数字
A/A：字母
I/i：罗马数字
定义列表：对一些词汇或内容进行定义，dl来创建一个定义列表，有两个子标签，dt:被定义的内容，dd对定义内容的描述
长度单位
px:像素，像素是网页中使用最多的单位，一个像素就是一个小点，屏幕就是由这些小点构成的。
%百分比：根据其父元素的样式来计算该值，当父元素属性值发生变化是，子元素也会按照比例发生改变，自适应网页常用。
Em：和百分比类似，相对于当前元素的字体大小来计算 1em = 1font-size，当字体大小发生改变时，em也会随之改变，当设置相关字体样式时，常使用em
十六进制rgb值表示颜色：
#红色#绿色#蓝色
00 – ff
颜色单位：
在css中可以直接使用颜色的单词来表示不同的颜色
Red，blue,green
Rgb值也可以表示不同的颜色：red,green,blue
通过三种颜色的不同的浓度（0-255，或百分比0-100%），来表示不同的颜色
字体的样式：
字体颜色：color
字体大小：font-size，设置的并不是文字本身的大小
文字字体：font-family，可以同时指定多个字体，多个字体之间用，隔开，浏览器会优先支持前边使用的字体。如果浏览器不支持使用的字体，则采用默认字体。
字体样式：font-style：
normal，默认值，文字正常显示
Italic,文字一斜体显示
Oblique：文字会以倾斜的效果显示
字体粗细：font-weight：
Nromal:默认值，正常显示
Bold:加粗显示
也可以指定100-900之间的9个值
设置小型大写字母：font=variant，将所有字母都以大写字母显示，但是小写字母要比大写字母小
Normal:默认值，
small-caps：文本一小型大写字母显示
Font:可以同时设置字体相关的所有样式，将字体样式的值，统一写在font样式中，不同值之间隔开，font：斜体 加粗 小型大写字母 大小 字体，前三个没有顺序要求，可写可不写，但是文字大小和字体必须写，而且字体必须是最后一个样式，大小必须是倒数第二个样式。
字体分类：font-family:serif
Serif：衬线字体
Sans-serif：非衬线字体
Monospace:等宽字体
Cursive：草书字体
Fantasy：虚幻字体
行间距
line-height：设置行高，行间距=行高-字体大小
文本样式：
text-transform：将元素中的字母全部变成大小
Uppercase：大写，
Lowercase：小写，
Capitalize：首字母大写，通过空格识别单词
None：正常显示
text-decoration：文本修饰，给文本添加各种修饰，为文本的上方，下方或者中间添加线条
Underline：定义文本下划线
Overline：定义文本上划线
line-through：在文本中间插入一条线
None:默认值，定义标准的文本
letter-spacing：用来设置字符之间的间距
word-spacing：用来设置单词之间的间距，词与词之间空格的大小
Text-align:文本对齐
Left:默认值，文本靠左对齐
Right：文本靠右对齐
Center：文本居中对齐
Justify：两端对齐，调整文本之间的空格大小，来达到两端对齐的效果。
text-indent：2em首行缩进
标准盒子模型
Content + padding + border + margin 组成
Border边框：
Border-width：边框的宽度，顺时针的方向表示上 右 下 左 ，三个值：上 左右 下，两个值：上下 左右
Border-color：边框颜色
Border-style:边框样式，solid 实现 ，dotted 点状边框，dashed 虚线，double 双线
Border：1px solid red
Padding内边距：会影响盒子可见框的大小
Margin外边距：不会影响可见框的大小，但是会影响盒子的位置。margin设置负值，则元素会相反方向移动。Auto,可使子元素在父元素中水平居中。
垂直外边距重叠:
垂直外边距会发生重叠，兄弟元素之间相邻的外边距会取最大值而不是取和
父子元素的垂直外边距重叠，则子元素的外边距会设置给父元素
内联元素的盒模型
内联元素不能设置width和height，可以设置水平方向的padding，border，margin
Display和visibility
Display：可改变元素的类型
Inline:内联元素
Block：块元素
inline-block：将一个元素变为行内块元素
None：隐藏元素，元素不会在页面中占有位置
Visibility：设置元素的隐藏和显示状态
Visible：默认值，默认在页面中显示
Hidden：元素会隐藏不显示
元素隐藏后，在页面中仍占有位置
Overflow
子元素超出父元素的内容称为溢出的内容
Hidden:设置父元素隐藏溢出内容
Visible：默认值，溢出可见
Scroll：会为父元素添加滚动条，通过拖动滚动条，查看溢出内容。不论内容是否溢出，都会添加滚动条
Auto：根据需求自动添加滚动条
文档流：处在网页最底层，表示的是一个页面中的位置，所创建的元素默认都处在文档流中
元素在文档流中的特点：
块元素：独占一行，自上向下排列。自动填充父元素。高度默认被内容撑开。
内联元素：在文档流中只占自身大小，从左向右排列。宽高默认被内容撑开。
浮动：float
脱离文档流
Nne：默认值，不浮动
Left：脱离文档流，页面左侧浮动
Right：脱离文档流，页面右侧浮动
当一个元素浮动后，元素会立即脱离文档流，他下边的元素会立即向上移动，元素浮动以后，会尽量向页面的左上或者右上漂浮，直到遇到父元素的边框或者其他的浮动元素。
如果浮动元素上边是一个没有浮动的块级元素，则浮动元素不会超过块级元素。浮动的元素不会超过浮动的兄弟元素，最多一边对齐。
高度塌陷问题
文档流中，父元素的高度默认是子元素撑开的，但是当为子元素设置浮动后，子元素会完全脱离文档流，此时子元素会无法撑开父元素的高度，父元素高度塌陷。
解决：
1、页面中元素都有一个隐含的属性block formatting context BFC，该属性可以设置打开或者关闭，默认关闭。当开启bfc后
(1)父元素的垂直外边距不会和子元素重叠
(2)开启bfc的元素不会被浮动元素所覆盖
(3)开启bfc的元素可以包含浮动的子元素
(4)开启bfc，设置元素浮动（会导制父元素的宽度丢失），设置元素绝对定位，设置元素为inline-block（会导致父元素的宽度都是），将overflow设置为一个非visible的值。Overflow：hidden
2.在高度塌陷的父元素的最后，添加一个空白的div，对空杯的div添加清除浮动
3.after伪类：
.clearfix:after{
Content:””;
Display:block;
Clear:both;
}
.clearfix{
Zoom:1
}
清除浮动
Clear：可以用来清除其他浮动元素对前元素的影响
None：默认值，不浮动
Left：清除左侧浮动元素对当前元素的影响
Right：清除右侧浮动元素对当前元素的影响
Both：清除两侧浮动元素对当前元素的影响，清除对他影响最大的元素的浮动
定位：将指定的元素摆放到页面的任意位置 position
Static：默认值，元素没有开启定位
Relative相对定位：相对于元素在文档流中原来的位置定位，的left，top，right，bottom。相对定位的元素不会脱离文档流。会使元素提升一个层级。不会改变元素的性质，块还是块，内联还是内联。
Absolute：绝对定位，会使元素脱离文档流。不设置偏移量，则元素的位置不会发生变化。相对于离他最近的开启了定位的祖先元素进行定位。如果所有的祖先元素都没有定位，则相对于浏览器窗口进行定位。会使元素提升一个层级。会改变元素的性质，内联元素会变成块元素，块元素的宽度和高度默认都被内容撑开。
Fixed：固定定位。
固定定位也是一种绝对定位，大部分特点和绝对定位一样，不同的是：
固定定位永远都会相对于浏览器窗口进行定位
固定定位在浏览器窗口某个位置，不会随滚动条滚动
如果元素的层级一样，下面的元素会盖住上边的
z-index属性可以设置元素的层级。没有开启定位的元素，不能使用z-index，父元素的层级再高也不会盖住子元素。
Opacity：设置元素透明背景，0-1之间的值
Ie8及以下的浏览器需要使用如下属性代替：filter：alpha（opacity=20（0-100））
背景：
background-color：背景颜色
background-image：url（相对路径）背景图片
如果背景图片大于元素，默认会显示图片的左上角
如果背景图片和元素一样大，则会将背景图片全部显示
如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素
可以同时为一个元素指定背景颜色和背景图片，这样背景颜色将会作为背景图片的底色，一般情况下设置背景图片是都会同时指定一个背景颜色。
background-repead：设置背景图片的重复方式
Repeat：默认值，背景图片会双方向重复
no-repeat：背景图片不重复
Repeat-x：x轴重复
repeat-y：y轴
background-position：调整背景图片在元素中的位置，top right bottom center中的两个值来指定一个背景图片的位置
Top left：左上
Buttom right：右下
如果只给出一个值，则第二个值默认为center
也可以直接指定两个数值，一个水平偏移量，一个垂直偏移量
background-attachment：用来设置背景图片是否随页面一起滚动
Scroll：默认值，背景图片随着窗口滚动
Fixed：背景图片会固定在某一位置，不随页面滚动
不随窗口滚动的图片一般都是设置给body
雪碧图：
图片整合技术（css-sprite，雪碧图）：
优点：将多个图片整合为一张图片里，浏览器只需要发送一次请求，可以同时加载多个图片，提高访问效率，提高了用户体验。减少了图片的总大小，提高请求速度，增加了用户体验。
表格：
Table：格式化的数据，表格的列数右td最多的那行决定，表格可以嵌套
rowspan:纵向合并表格
Colspan：横向合并表格
使用table标签可以隔离父子元素的外边距，阻止外边距重叠
//即可解决高度塌陷问题，又可确保父元素和子元素的垂直外边距不会重叠
Clearfix:before,.clearfix:after{
Content:’’;
Display:table;
Clear:both;
}
.clearfix{
Zoom:1
}
表单：将用户信息提交给服务器，form
Action：指向服务器的一个地址
Input的值要想提交到服务器，需要设置name属性。
单选按钮：type：radio，通过name属性进行分组，name属性相同的表示一组。需要用户选择的但是不需要用户直接填写内容的表单，还项必须指定一个value属性，这样被选中的表单相的value属性值将最终提交给服务器。
多选框：type：CheckBox，通过name属性进行分组，name属性相同的表示一组。必须指定value属性，表示要提交给服务器的值。
下拉列表：select，name属性需要给select，value属性需要指定为option，multiple=multiple表示多选下拉列表。
如果希望单选按钮或者多选框中默认选中：添加属性checked：checked
希望在下拉框中默认选中，在option中添加属性selected：selected来设置为默认选中。
Textarea：文本域
Fieldset:表单分组，legend分组名称
框架集：在一个页面中引入其他的外部的页面，可以，同时引入多个页面。
Frameset：创建框架集，frameset不能和body出现在同一个页面中
Rows：指定框架集中的所有的框架，一行一行的排列
Cols：指定框架的所有的页面，一列一列的排列
Frame：子标签来指定要引入的页面，引入几个页面就创建几个frame
不推荐使用，frameset和iframe一样，它里边的内容都不会被搜索引擎所检索。
2858
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
