文章目录
前端基础
1.C/S（客户端/服务器）
2.B/S（浏览器/服务器）
3. 开发流程
HTML
1.常用标签
1）标题标签（h1~h6）
2）段落标签
用于表示内容中的一个自然段
p标签中的文字，默认会独占一行，并且段与段之间会有一个间距
字符之间写再多的空格，浏览器也会当成一个空格解析，换行也会当成空格解析
3）换行标签
在页面中，可以使用br标签来表示换行，br标签是一个自结束标签
4)水平线标签
hr标签也是一个自结束标签，可以在页面中生成一条水平线
5）图片标签
使用img标签来向网页引入一个外部图片
img标签也是一个自结束标签
属性：
src:设置一个外部图片途径
alt：可以用来设置在图片不能显示时，对图片的描述
搜索引擎可以通过alt属性来识别不同的图片（理解：通过alt描述的属性中的关键字进行检索）
width：用来修改图片的宽度，一般以px为单位
height：用来修改图片的高度，一般以px为单位
宽度和高度两个属性如果设置一个，另一个也会同时等比例调整大小
设置两个，则按设定的值 如果不写alt属性，搜索引擎不会对img中的图片进行收录
src 属性配置的是图片的路径，目前我们要使用的路径全都是相对路径。
若图片在html文件的上一级,可以使用…/来返回上一级目录
若图片在下一级 文件名/图片名
<img src="图片名" alt="这是一张好看的图片" width="200px" height="125px" />
6）meta标签
使用meta标签可以用来设置网页的关键字（写在title和之间）
<!doctype html>
<html>
<head>
<meta charset="Utf-8" />
<title>first</title>
<meta name="keywords" content="HtML5,java,前端 " /> <!-- 设置网页关键字-->
<meta name="description" content="发布html5，js等前端相关的内容"/> <!-- 指定网页描述-->
<meta http-equiv="refresh" content="5;url=http://www.baidu.com" />
</head>
<body>
<h1>五秒以后跳转页面</h1>
</body>
</html>
可以用来设置网页关键字
可以用来指定网页描述
搜索引擎在检索页面时，会同时检索页面中的关键词和描述，
但是这两个值不会影响页面在搜索引擎中的排名
可以用来重定向
<meta http-equiv=“refresh”/ content=秒数；url=“目标路径”>
7）center标签
center标签中的内容，会默认在页面中居中显示
8）文本输入框标签
<input type="text">
2.实体
实体的语法： &实体的名字；
eg：
< <
空格  ；
版权符号 ©；
> >
3.图片格式
1）格式
2）.图片使用原则
效果不一致，使用效果好的
效果一致，使用内存小的
4.内联框架
9.超链接
1）概述
使用超连接可以从一个页面跳转到另一个页面
2）#
当链接地址不确定时，可将链接地址设置为#
如果将链接地址设置为#，则点击超链接后，会自动跳转到当前页面的顶部
若想点击后到达其他位置
html中有一个属性 ：id 每一个元素都可以设置，该属性可以作为标签的唯一标识
id属性在同一个页面中只能有一个不能重复
eg：跳转到id为bottom的元素所在位置
直接在href 中写 #id 属性值
CSS
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p{color:red;}
</style>
<meta charset="utf-8">
<title>css</title>
</head>
<body>
<p>
一盏离愁 孤单伫立在窗口<br/>
我在门后 假装你人还没走<br/>
旧地如重游 月圆更寂寞<br/>
夜半清醒的烛火 不忍苛责我<br/>
一壶漂泊 浪迹天涯难入喉<br/>
你走之后 酒暖回忆思念瘦<br/>
</p>
</body>
</html>
1.外部样式表
若想要多个文件应用同一个样式表，可以将样式表编写到外部文件中，通过link标签来将外部的css文件引入到当前页中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<link rel="stylesheet" type="text/css" href="../style.css" />
</head>
<body>
<p>一盏离愁孤单伫立在窗口</p>
</body>
</html>
2.CSS语法
1）注释 /* */
作用和HTML文件中的注释作用类似，只不过它必须编写在style标签里，或者是css文件中
2）选择器和声明块
选择器：通过选择器可以选中页面中指定的元素(标签)并且将声明块中的样式应用到选择器
声明块：紧跟在选择器后边，使用一对{}括起来
声明块中实际上就是一组一组的名值对结构
这一组一组的名值对 称为声明
声明块中的多个声明用 ；隔开
声明的样式名和样式值之间用 ：来连接
3.块元素和内联元素
1）块元素
div 就是一个块元素，块元素是会独占一行的元素
div 这个标签没有任何语义，就是一个纯粹的块元素，并且不会为它里边的元素设置任何样式（例如 不像
,两段之间会间隔一行）
常见块元素：p h1,h2…,
2) 内联元素（行内元素）
行内元素指只占用自身大小的元素，不会占用一行
常见内联元素 a img iframe span
span 元素没有任何语义，span 标签专门用来选中文字，然后为文字来设置
3）总结
块元素主要用来做页面中的布局
内联元素主要用来选中文本设置样式
一般只使用块元素包含内联元素，而不会使用内联元素去包含块元素
a元素可以包含任何元素，但不能包含他自己
p元素不可以包含任何其他块元素
4.常用选择器
1）id选择器
通过元素的id 属性值选中唯一的一个元素
语法：#id属性值{}
注意：可以同时为一个元素设置多个class属性值，多个值之间用空格隔开
3）选择器分组（并集选择器）
通过选择器分组可以同时选中多个选择器对应的元素
语法：选择器1，选择器2，选择器N{ }
4）通配选择器
用来选中页面中的所有元素
语法： { }*
5）复合选择器（交集选择器）
作用：可以选中同时满足多个条件的元素
语法：选择器1选择器2选择器N { }
eg:给有class p2 span 元素设置一个背景颜色为黄色
6）子元素和后代元素选择器
（1）
父元素：直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接或间接包含后代元素的元素
后代元素：直接或间接被祖先包含的元素，子元素也是后代元素
兄弟元素：拥有相同父元素的元素叫做兄弟元素
（2）后代元素选择器
作用：选中指定元素的指定后代元素
语法：祖先元素 后代元素 { }
子元素选择器
作用：选中指定父元素的指定子元素
语法：父元素>子元素
5.伪类选择器
伪类专门用来表示元素的一种特殊的状态
比如：访问过的超链接，普通的超链接，获取焦点的超链接
当需要为处在这些特殊状态的元素设置元素样式时，可以使用伪类
1）：visited （只能设置颜色）
** 表示访问过的链接**
浏览器通过历史记录判断一个链接是否访问过
由于涉及用户隐私，使用visited伪类只能设置字体颜色
2）：hover
表示鼠标移入的状态
3）：active
表示超链接被点击的状态
注意：hover和active也可以为其他元素设置（IE6除外）
4）::selection
为p标签中选中的内容使用样式
可以使用::selection 伪类
注意：这个伪类在火狐中需要采用另一种方式编写 -moz-selection
5）代码
6.伪元素
1)概述
使用伪元素来表示元素中的一些特殊位置
2）first-letter
为第一个字符来设置样式
3）first-line
为元素的第一行设置一个背景颜色
7.属性选择器
1)作用与语法
作用：可以根据元素中的属性或属性值来选取指定元素
语法：
[属性名] 选取含有指定属性的元素**
[属性名=“属性值” ] 选取含有指定属性值的元素
[ 属性名^=“属性值”] 选取属性值以指定内容开头的元素
[ 属性名$=“属性值”] 选取属性值以指定内容结尾的元素
[ 属性名=“属性值”]* 选取属性值以包含指定内容的元素（即含有即可）
2）title属性
可以给任何标签指定
当鼠标移入到元素上时，元素中的title属性的值将会作为提示文字显示
8.子元素选择器
1）first-child
2）last-child
3）nth-child
可以选中任一位置的子元素
该选择器后边可以指定一个参数，指定要选中第几个子元素
even 表示偶数位置的子元素 odd 表示奇数位置的子元素
:first-of-type
:last-of-type
:nth-of-type
和:first-child这些非常的类似，
只不过child，是在所有的子元素中排列
而type，是在当前类型的子元素中排列
9.兄弟元素选择器
1）后一个兄弟元素选择器
作用：可以选中一个元素后紧挨着的指定的兄弟元素
语法 ：前一个+后一个
2）选中后面的所有兄弟元素
语法：前一个~后边所有
10.否定伪类
作用：可以从已选中的元素中剔除出某些元素
语法： ：not（选择器）
决定
优先级高的优先显示。
优先级的规则**
内联样式 优先级 1000
id选择器 优先级 100
类和伪类 优先级 10
元素选择器 优先级 1**
**通配* ** **优先级0 **
**继承的样式，没有优先级 **
当选择器中包含多种选择器时，需要将多种选择器的优先级相加然后在比较，
但是注意，选****择器优先级计算不会超过他的最大的数量级，
如果****选择器的优先级一样，则使用靠后的样式。
并集选择器的优先级是单独计算
可以在样式的最后，添加一个 !important 则此时该样式将会获得一个最高的优先级,
将会优先于所有的样式显示甚至超过内联样式
13.伪类的顺序
涉及到a的伪类一共有四个:
:link :visited :hover :active
而这四个选择器的优先级是一样的。
注意:写的时候按照 上面顺序写，因为优先级一样，所以会造成样式的覆盖
14.文本标签
1）&
这两个标签都表示强调内容
效果为斜体，主要是语气上的强调
为加粗 主要是内容的强调，比em更强烈
2)i标签
内容会以斜体表示，没有语义
3）b标签
加粗，无语义
h5中规定，对于不需要着重的内容，可以用i，b
4）small标签
small标签中的元素比父标签中的文字小一些
可表示一些细则中的内容，比如合同中的小字，网站的版权声明
5）cite标签
网页中所有加书名号的内容都可以使用cite标签，表示参考内容
比如：歌名，书名，电影名
6）q标签（短引用）
表示一个短的引用（行内引用）
引用内容会默认加上引号
7）blockquote（长引用）
表示一个长引用（块级引用）
可让内容独占一行
8）sup（上标）
使用该标签来设置一个上标
比如可以达到次方的效果
9）sub（下标）
10）del(删除线)
11）ins（插入，下划线）
12）pre（预格式）
保留代码格式
13）code（专门表示代码，但不保留格式）
15.列表标签
列表就相当于去超市购物时的那个购物清单
在html 中也可以创建列表
1）无序列表
使用ul标签创建一个无序列表
使用li在ul中创建一个一个的列表项
ul和li都是块元素
注意：默认项目符号一般不使用
如果需要设置项目符号，则可以采用为li设置背景图片的方式来设置
2) 有序列表
有序列表和无序列表类似，只不过它使用ol来代替ul
type属性可以指定序号的类型
可选值：1，a，A
eg：
注意：列表之间都是可以互相嵌套的，可以在无序列表中放个有序列表
也可以在有序列表中放一个无序列表
3）定义列表
使用dl来创建一个定义列表
dl中有两个子标签
dt：被定义的内容
dd：对定义内容的描述
16.单位
1）长度单位
像素px:
一个像素就相当于屏幕上的一个小点，
屏幕实际上就是由这些像素点构成的
百分比%
可以将单位设置成一个百分比的形式，这样浏览器将会根据其父元素的样式计算该值
使用百分比的好处是，当父元素的属性值发生变化时，子元素也会按照比例发生改变
em
和%类似，是相当于当前元素的字体大小来计算的
1em=1font-size
1em=100px
使用em时，当字体大小发生改变时，em也会随之改变
当设置字体相关的样式时，经常使用em
2）颜色单位
在CSS可以直接使用颜色的单词来表示不同颜色
也可以使用RGB值来表示不同颜色
RGB值指通过Red Green Blue三元色的不同的浓度，表示不同的颜色
eg：rgb（红色浓度，绿色浓度，蓝色浓度）
颜色浓度需要一个0~255之间的值
也可以用一个百分数来设置，表示255的百分之几
也可以使用16进制数来代替，使用三组两位的十六进制来表示颜色
语法#红色绿色蓝色
两位重复的颜色可以简写
eg：#ff0000
简写#f00
17.字体样式
1)font-size
设置的并不是文字本身的大小，在页面中每个文字都处在一个框中
它设置的实际上是格的高度，一般情况文字比格略大或略小
2）font-family
指定文字字体
当采用某种字体时，若支持，则为该字体，不支持，则为默认字体
该样式可以同时指定多个字体
eg：font-family：arial，微软雅黑；
注意：当使用多个字体时，会优先使用前边的字体，如果前面没有再尝试下一个
3）font-style
4）font-weight
5）font-variant
6)字体样式合并书写
7）text-transform
8）text-decoration
9）letter-spacing&word-spacing
10）text-align
18.字体分类
字体分为五大类
serif（衬线字体） sans-serif（非衬线字体） monospace（等宽字体） cursive（草书字体） fantasy（虚幻字体）
当设置大的分类时，浏览器会自动选择指定的字体并应用样式
一般会将字体的大分类，指定为font-family 中的最后一个字体（即备选字体）
19 .行间距
1)行间距
注意：对于单行文本来说，可以将行高设置为和父元素的高度一致这样可以使单行文本在父元素中垂直居中
2)text-indent 首行缩进
由于字体大小的改变会影响首行缩进的效果（因为像素会改变）
因此可以使用em来进行开头空两格
eg：text-indent：2em；（空两格）
1）简介
一个盒子会分成以下部分
- 内容区（content）
- 内边距（padding）
- 边框（border）
- 外边距（margin）
使用width设置盒子内容区的宽度
使用height来设置盒子内容区的高度
注意：width和height只设置盒子内容区的大小，而不是盒子的整个大小，
盒子可见框的大小由内容区，内边距和边框共同决定
2）边框
（1）宽度
要为元素设置边框必须指定三个样式
border-width：边框宽度
border-color：边框颜色
border-style：边框样式
使用border-width可以分别指定四个边框的宽度
如果指定四个值，分别指定 上 右 下 左（即顺时针）
如果指定三个值，分别设置给 上 左右 下
如果指定两个值 分别设置给 上下 左右
除了border-width，CSS中还提供了四个border-xxx-width
xxx的值可能是top right bottom left 专门用来设置指定边的宽度
（2）颜色
border-color与border-width规则相
（3）样式（border-style）
可选值
none 默认
solid 实线边框
dotted 点状边框
dashed 虚线
double 双线
（4）简写
border：样式1，样式2，样式3；
边框的简写样式，可以设置四个边框的样式，宽度，颜色，而且无顺序要求
border一指定就是四个边，无法单独指定
border-XXX 可以单独设置四个边的样式
3）内边距(padding)
指盒子内容区与盒子之间的距离
四个方向的内边距可以通过 padding -top等来设置
注意：元素的背景会延伸到内边距
使用padding可以同时设置四个边框的样式，规则和border-width一致
可见框的宽度和高度分为
4）外边距（margin）
盒子与盒子之间的距离
不会影响盒子可见框的大小，会影响盒子的位置
四个方向的外边距：margin-top，margin-right等
由于页面中的元素靠左上摆放的，所以注意当我们设置上和左边距时，会导致盒子自身的位置发生改变
如果设置右和下外边距会改变其他其他盒子的位置
margin 还可以设置为auto，auto一般只设置给水平方向的margin
如果只指定左外边距或右外边距的margin为auto，则会将外边距设置为最大值
如果将left和right 同时设置为auto，则会将两侧的外边距设置为相同的值，即居中
使用margin可以同时设置四个外边距的样式，规则和border-width，padding一致
（1）重叠
垂直外边距的重叠
在网页中垂直方向的相邻外边距会发生外边距的重叠
外边距的重叠指兄弟元素之间相邻的外边距会取两者的最大值而不是和
如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父亲
5)默认样式
6）内联元素的盒模型
内联元素不能设置width和height
可以设置水平方向 ，垂直方向的内边距，
但不会像块元素那样影响页面的布局（即将其他元素的布局挤开），可能会造成覆盖的效果（如下图）
内联元素可以设置边框，但是垂直的边框不会影响布局，水平会影响内联元素支持水平的外边距，不支持垂直，水平不会重叠而是取和
7）display和visibility
(1)display
通过display 样式可以修改元素的类型
inline:可以将一个元素作为内联元素显示
block：可以将一个元素设置块元素显示
inline-block:j将一个元素转为行内块元素：既有行内元素的特点，也有块元素的特点，既可以设置宽高，又不会独占一行
none:隐藏元素，并且元素不会在页面中继续占用位置
（2）visibility
可以用来设置元素的隐藏和显示状态
可选值
visible： 默认值，元素默认在页面中显示
hidden：元素隐藏不显示，不影响布局，会占用位置
8）overflow
通过overflow 可以处理溢出内容可选值
visible：默认值，不会对溢出内容做任何处理
hidden：溢出内容会被修剪，不显示
scroll：会为父元素添加滚动条
该属性不论内容是否溢出，都会添加水平和垂直双方向的滚动条
auto，根据需求自动添加滚动条，需要水平就添加水平，需要垂直就添加垂直，都不需要就不加
auto，根据需求自动添加滚动条，需要水平就添加水平，需要垂直就添加垂直，都不需要就不加21 文档流
文档流处在网页的最底层，它表示的是一个页面中的位置
创建的元素默认都处在文档流中
元素在文档流中的特点
块元素：
- 块元素在文档流中独占一行，自上向下排列
- 块元素默认宽度是父元素的100%
- 默认高度被子元素撑开
内联元素：
- 内联元素在文档流中只占自身的大小，会默认从左向右排列，如果一行中不足以容纳所有的内联元素，则换到下一行，继续自左向右
- 内联元素的宽度和高度默认被撑开
当元素的宽度的值为auto时，此时指定内边距不会影响可见框的大小，而是自动修改宽度，以适应内边距
22.浮动
如果希望块元素在页面中水平排列，可以使块元素脱离文档流
使用float来使元素浮动，从而脱离文档流
可选值
none :元素默认在文档流中排列
left：元素会立即脱离文档向页面左侧浮动
right：元素立即脱离文档流，向页面右侧浮动
1）块元素的浮动
当为一个元素设置浮动，元素脱离文档流后，下面的元素会向上移动
元素浮动以后，会尽量向页面的左上或是右上移动，直到遇到父元素的边框或其他浮动元素
如果浮动元素上边是不浮动的块元素，则浮动元素不会超过块元素
浮动元素不会超过它上边的兄弟元素，最多一边齐
浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围
所以我们可以通过浮动来设置文字环绕图片的效果
在文档流中，子元素若不设置宽度则
当元素设置浮动之后，会完全脱离文档流
块元素脱离文档流以后，高度和宽度都被内容撑开
2）内联元素的浮动
开启浮动之后，内联元素脱离文档流以后会变成块元素
23.高度塌陷
1）解释
为避免塌陷，可以给父元素设置固定高度，一旦固定，父元素高度不能适应子元素高度2）解决高度塌陷
(1)方案一
开启元素的BFC后，元素会有以下特性：- 父元素的垂直外边距不会和子元素重叠
- 开启BFC的元素不会被浮动元素所覆盖
- 开启BFC的父元素可以包含浮动的子元素
开启BFC的方法
1.设置元素浮动
使用这种方式虽然可以撑开父元素，但是会导致父元素的宽度缺失，而且使用这种方式也会导致下边的元素向上移动2.设置元素绝对定位
3.设置元素为inline-block
可以解决问题，但父元素的宽度会丢失4.将元素的overflow设置为一个非visible的值
**auto和hidden为推荐方式**注意：IE6不兼容BFC，但具有另一个隐含的属性hasLayout（将zoom值设为1即可）
在IE6中，如果为元素指定了一个宽度，则会默认开启hasLayout
zoom表示放大，后面的值表示放大几倍
(2)方案二：清除浮动
有时需要清除掉其他元素浮动对当前元素产生的影响，可以使用clear来完成
clear可以用来清除其他浮动元素对当前元素的影响
可选值：
none：默认值，不清除浮动
left：清除左侧浮动元素对当前元素的影响
right：清除右侧浮动元素对当前元素的影响
both：清除两侧浮动元素对当前元素的影响
清除box1浮动对box2产生的影响
清除浮动以后，元素会回到其他元素浮动之前的位置（即假设浮动元素不浮动后，元素应该在的位置）
(3)方案三
可以直接在高度塌陷的父元素的最后，添加一个空白的div,
由于这个div并没有浮动，所以他是可以撑开父元素的高度的,
然后在对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度，使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构
4）方案四
24.定位
1）概述
指将指定元素摆放到页面的任意位置
通过定位可以任意摆放元素
通过position可以设置元素定位
可选值
static ：默认值：元素没有开启定位
relative：开启元素的相对定位
absolute：开启元素的绝对定位
fixed：开启元素的固定定位（绝对定位的一种）
当开启元素的定位时，可以通过left，right，top，bottom四个属性来设置偏移量
left：元素相对于其定位位置的左侧偏移量（若向右移动，则用left）类似于坐标
…
2）相对定位
开启了元素的相对定位之后，而不设置偏移量时，元素不会发生任何变化
相对定位是相对于元素在文档流中原来的位置进行定位
相对定位的元素没有脱离文档流
相对定位会使元素提升一个层级
相对定位不会改变元素的性质，块还是块，内联还是内联
3）绝对定位
-
开启绝对定位会使元素脱离文档流
-
开启绝对定位，不设置偏移量，元素位置不变
-
绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的（一般，开启了子元素的绝对定位都会同时开启父元素的相对定位）
如果所有的祖先元素都未开启定位，则相对于浏览器窗口进行定位 -
绝对定位会使元素提升一个层级
-
绝对定位会改变元素性质，内联元素变成块元素
块元素的宽度和高度默认被内容撑开
4）固定定位
固定定位是一种绝对定位
大部分特点与绝对定位相同
不同点：
固定定位永远相对于浏览器窗口定位
固定定位会固定在浏览器窗口某个位置，不会随滚动条滚动而消失
5）层级
如果定位元素层级一样，则代码中，下面的元素盖住上面的
通过z-index属性可以用来设置元素的层级
通过指定一个正整数作为值，该值将会作为当前元素的层级 层级越高，越优先
对于没有开启定位的元素不能用z-index
父元素的层级再高也不会覆盖住子元素
25.opacity
可以用来设置元素背景的透明
需要一个0~1之间的值
IE8及以下的浏览器不支持，需要使用如下属性代替
fliter：alpha（opacity=50）； 需要0~100之间的值
26.背景
1）background-imge
设置背景图片
如果背景图片大于元素,默认显示图片左上角
如果背景图片小于元素大小，则默认将图片平铺，以充满元素
可以同时为一个元素指定背景图片和背景颜色，这样背景颜色将会作为背景图片的底色
语法：background-image：url（相对路径）；
2）background-repeat
用于设置背景图片的重复方式
repeat：默认值，双方向重复（平铺）
no-repeat：不会重复，显示图片原本大小
repeat-x：背景图片沿水平方向重复
repeat-y：垂直方向重复
3）background-position
调整图片位置
可选值
1.该属性可以使用top，right，left，center，bottom中的两个值来指定图片位置
2.可****以指定两个偏移量分别表示水平和竖直方向
eg：background-position：200px 180px；
第一个是水平偏移量
如果指定的是一个正值，则图片会向右移动指定的像素
如果是负值，则会向左移动
第二个是竖直偏移量与水平同理
4）background-attachment
用来设置背景图片是否随页面一起滚动
可选值：
scroll：默认值，背景图片随窗口滚动
fixed:背景图片固定在某一位置，不随页面滚动（类似于固定定位）
不随窗口滚动的图片一般设置给body，而不设置给其他元素
本周总结
这一周学了前端的知识，刚开始觉得还行，后来感觉东西好杂，等到写页面的时候，才发现学的东西都没理解，真正体会到了导航条乱飞的感觉，前端真的是会不了一点
456
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
