首页  思维导图  详情

01.html+css基础

2020-01-09 13:31:05   0  举报





仅支持查看

AI智能生成

html + css 基础

基础

作者其他创作

大纲/内容

盒子模型

CSS中将每一个元素都设置为了一个矩形的盒子

将所有的元素都设置为盒子，是为了方便页面的布局

当这些元素都是盒子以后，我们的布局就变成了在页面中摆放盒子

盒子模型

分支主题

尺寸计算

/*外盒尺寸计算（元素空间尺寸）*/

Element空间高度 = content height + padding + border + margin

Element 空间宽度 = content width + padding + border + margin

/*内盒尺寸计算（元素实际大小）*/

Element Height = content height + padding + border （Height为内容高度）

Element Width = content width + padding + border （Width为内容宽度）

每个盒子都由如下几部分构成

内容区

内容区相当于盒子存放东西的空间

内容区在盒子的最里边

元素的所有的子元素都是放在父元素的内容区

内容区设置

width

内容区的宽度

height

内容区的高度

内边距

内边距指的是内容区和边框之间的距离，内边距会影响盒子的大小

盒子中一共有四个方向的内边距

padding-top

padding-right

padding-bottom

padding-left

padding

可以同时设置四个方向的内边距，规则和border-width一致

padding:上右下左

padding:上左右下

padding:上下左右

盒子的可见框大小由内容区、内边距和边框共同决定

边框

边框盒子可见框最外侧，边框是盒子的边缘

设置边框

设置边框需要同时设置三个属性，缺一不可, 如:只设style属性,width和color默认为 1px,black

border-width

边框的宽度

可以同时指定四个边框的宽度，也可以分别指定

规则

四个值

border-width : 10px 20px 30px 40px;

border-width : 上右下左;

三个值

border-width : 10px 20px 30px;

border-width : 上左右下 ;

两个值

border-width : 10px 20px;

border-width : 上下左右 ;

一个值

border-width : 10px;

border-width : 上下左右 ;

border-color

边框的颜色

border-style

边框的样式 solid dashed(大使的) dotted double

除了这三个样式，CSS中还提供了

border-xxx-width

border-xxx-color

border-xxx-style

xxx可以是

top

right

bottom

left

通过这些样式可以单独指定四个边的颜色，宽度和样式

CSS3 border-radius 圆角

一个值：四个角都是按照设置的这个值为半径去切一个圆

两个值：第一个值表示：左上角和右下角，第二个值表示：右上角和左下角

三个值：第一个表示：左上角，第二个表示：右上角和左下角第三个表示：右下角

分支主题

四个值：顺时针方向：左上角右上角右下角左下角

边框的简写属性

border

border-left

border-top

border-right

border-bottom

外边距

外边距盒子和其他盒子之间的距离，外边距不会影响可见框的大小，但是会影响盒子的位置

也是具有四个方向的外边距

margin-top

margin-right

margin-bottom

margin-left

简写属性

margin

规则和padding一致

margin值

可以设置为auto

如果单独将左右外边距设置为auto，则会将左或右外边距设置为最大值

如果同时将左右外边距设置为auto，则会将左右外边距设置为一个相等的值，通过这种方式使一个子元素在它的父元素中水平居中

盒子水平居中：margin:0 auto 注意与文本水平居中区别：text-aglin：center。 单行文本垂直居中：将line-height 值设定为盒子的height值。

可以设置为负值

如果将margin设置为负值，则元素会向相反的方向移动

外边距的垂直塌陷(合并)

相邻的垂直外边距会发生重叠现象

相邻元素的外边距会取最大值

子元素的外边距会传递给父元素 内嵌塌陷问题解决：

1，父元素加上边框或上内边距

2，父元素加overflow：hidden

3,子元素加float属性.

水平外边距不会重叠，而是取和

内联元素的盒子模型

width

height

padding

支持水平方向的padding

垂直方向的padding也支持，但是不会影响布局

border

支持四个方向边框，但是垂直的边框不会影响布局

margin

支持水平方向外边距

不支持垂直方向的

盒子阴影

box-shadow

box-shadow:水平阴影垂直阴影模糊距离阴影尺寸阴影颜色内/外阴影；

1. 前两个属性是必须写的。其余的可以省略。

2. 外阴影 (outset) 但是不能写默认, 想要内阴影 inset

CSS3 盒子模型

box-sizing

content-box

保持内容大小不变,盒子会被改变

border-box

保持盒子不变,会改变内容的大小

盒模型相关的样式

display

设置元素的显示类型

可选值

none

元素不会在页面中显示，并且不会占据页面的位置

block

元素会作为块元素显示

inline

元素会作为内联元素显示

inline-block

元素会作为行内块元素显示

既具有内联元素的特点也具有块元素的特点

不独占一行

可以设置宽高

visibility

设置元素是否在页面中显示

可选值

visible

默认值，元素在页面中正常显示

hidden

元素不在页面中显示，但是依然在页面中占据位置

overflow

设置元素如何处理溢出内容

可选值

visible

默认值，不会处理溢出的内容，在父元素以外的地方显示

hidden

溢出的内容会被隐藏不会显示

scroll

在父元素中同时添加水平和垂直方向的滚动条

不内容是否溢出都会添加滚动条

auto

根据需要自动生成滚动条

盒子模型布局稳定性

按照优先使用宽度（width）其次使用内边距（padding）再次外边距（margin）

原因：

1. margin 会有外边距合并还有 ie6下面margin 加倍的bug（讨厌）所以最后使用。

2. padding 会影响盒子大小，需要进行加减计算（麻烦）其次使用。

3. width 没有问题（嗨皮）我们经常使用宽度剩余法高度剩余法来做。

文档流/标准流

文档流指的是网页中的一个位置

文档流是网页的基础，是网页的最底层，所有的元素默认都是在文档流中排列

元素在文档流中默认自左向右，自上向下排列（和我们的书写习惯一致）

块元素

1.块元素在文档流中自上向下排列

2.块元素在文档流中宽度默认是父元素的100%

3.块元素在文档流中高度默认被内容撑开

内联元素

1.内联元素在文档流中自左向右排列，如果一行中不足以容下所有的内联元素，则换到下一行，继续自左至右排列

2.内联元素在文档流中宽度和高度默认都被内容撑开

CSS

CSS叫做层叠样式表，用来设置页面中元素的样式。背景颜色、字体颜色、字体大小。。。

CSS负责结构、表现、行为中的表现

注释

语法:/*注释内容 */ 快捷键:ctrl+ /

不能嵌套

元素之间的关系

父元素

直接包含子元素的的元素叫做父元素

子元素

直接被父元素包含的元素叫做子元素

祖先元素

直接或间接包含后代元素的元素叫做祖先元素，父元素也是祖先元素

后代元素

直接或间接被祖先元素包含的元素叫后代元素，子元素也是后代元素

兄弟元素

拥有相同父元素的元素叫做兄弟元素

编写的位置

1.内联样式

将样式编写到标签的style属性中

这种样式只会对当前标签起作用，不能对样式进行复用，不方便后期维护，不推荐使用

2.内部样式表

将样式表编写到head中的style标签中

使用内部样式表，进一步将表现和结构分离，可以同时为多个元素设置样式，方便后期的维护

3.外部样式表

将样式表编写到外部的CSS文件中，然后通过link标签将外部文件引入

将样式编写到外部样式表中，可以在不同的页面中使用同一个样式表，完全将表现和结构分离，方便后期的维护，推荐使用的方式

基本语法

选择器

通过选择器可以选中页面中的一组元素，然后为其设置样式

元素选择器

根据标签名，选中页面中的指定元素

语法：标签名{ }

例子：

div{}

p{}

h1{}

id选择器

根据元素的id属性值选中一个唯一的元素

语法：#id {}

例子：

#box1{}

#hello{}

类选择器

根据元素的class属性值，选中一组元素

语法：.class{}

例子：

.hello{}

.box{}

通配选择器

选中页面中的所有元素

语法：*{}

通配选择器的性能比较差，尽量避免使用

并集选择器

可以同时选中符合多个选择器的元素

语法：选择器1,选择器2,选择器N{}

例子：

div,p,#box,.hello{}

注意最后一个不用加逗号了

交集选择器

可以选中满足多个条件的元素

语法：选择器1选择器2选择器N{}

注意:使用交集选择时,如有,标签选择器,标签选择器一定要写在最前面

例子：p.hello{}

后代元素选择器

选中指定元素的指定后代元素

语法：祖先元素后代元素{}

例子：

div span {}

div p{}

子元素选择器

选中指定元素的指定子元素

语法：父元素 > 子元素 {}

例子：

div > span {}

div > p{}

兄弟元素选择器

选取后一个兄弟元素

前一个 + 后一个

选取后边所有的兄弟元素

前一个 ~ 后边所有

声明块

声明块中实际上就是一个一个CSS声明

声明

每一个CSS声明都是一个样式，实际上就是一个名值对的结构

名和值之间使用:链接

:左边是样式的名字

:右边是样式的值

每一个声明以;结尾

例子

color:red;

font-size:20px;

CSS书写规范

空格规范

属性名与之后的 : 之间不允许包含空格， : 与属性值之间必须包含空格。

选择器与 { 之间必须包含空格。

选择器规范

子主题 1当一个 rule 包含多个 selector 时，每个选择器声明必须独占一行

选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确。

属性规范

属性定义必须另起一行。

属性定义后必须以分号结尾。

伪类和伪元素选择器

伪类和伪元素用来表示元素所处的一个特殊的状态，或者是一个特殊的位置

单标签不能加伪元素;

如:input

伪元素前面不能加空格;

链接伪类选择器

:link

表示一个普通的链接（未访问过的链接)

:visited

表示访问过的链接,

:hover

鼠标移入的链接，也可以为其他元素设置hover

:active

正在被点击的链接，也可以为其他元素设置active

目标伪类选择器

:target

:focus

表示元素获取焦点的状态，一般用于文本框

结构伪类选择器

:first-child

寻找父元素的第一个子元素，在所有的子元素中排序

:last-child

寻找父元素的最后一个子元素，在所有的子元素中排序

:nth-child

寻找父元素中的指定位置子元素，在所有的子元素中排序

例子

p:nth-child(3)

可以使用even/(2n-1)，来找到偶数的子元素

可以使用odd(2n)，来找到奇数的子元素

p:nth-last-child(3)倒数第3

子元素的伪类

:first-of-type

寻找指定类型中的第一个子元素

:last-of-type

寻找指定类型中的最后一个子元素

:nth-of-type

寻找指定类型中的指定子元素

伪元素选择器

::first-letter

表示第一个字符

::first-line

表示文字的第一行

::selection

表示内容被选中的状态

在火狐中使用::-moz-selection来代替

两个重要的伪元素选择器

:before

选中元素的最前边

一般该伪类都会结合content一起使用，通过content可以向指定位置添加内容

:after

选中元素的最后边

一般该伪类都会结合content一起使用，通过content可以向指定位置添加内容

属性选择器

根据元素的属性选择指定元素

[属性名]

选取含有指定属性的元素

[属性名="属性值"]

选取属性值等于指定值的元素

[属性名^="属性值"]

选取属性值以指定内容开头的元素

[属性名$="属性值"]

选取属性值以指定内容结尾的元素

[属性名*="属性值"]

选取属性值中包含指定内容的元素

否定伪类

从一组元素中将符合要求的元素剔除出去

语法：

:not(选择器)

例子：

.abc:not(div)

块元素和内联元素

块元素block

块元素会独占页面中的一行，无论他的内容的多少

一般使用块元素对页面进行布局

可以设置width height

常见的块元素

div ol ul dl li

h1~h6

内联元素inline

内联元素只占用自身的大小，不会独占一行

内联元素也叫行内元素（inline）

一般内联元素都是用来为文本来设置效果

常见的内联

span

行内块元素inline-block

一行可以显示多个，可以设置宽高img input

包裹规则

一般都是使用块元素去包裹内联元素，而不会使用内联去包裹块元素

a元素可以包含任意元素，除了a本身

p元素不能包含任何块元素

区别

分支主题

转换display

display:block

注意:行内块(img/input)不能转块元素

display:inline

display:inline-block

CSS 三大特性

css层叠性

一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。

1. 样式冲突，遵循的原则是就近原则。那个样式离着结构近，就执行那个样式。

2. 样式不冲突，不会层叠

css继承性

为祖先元素设置样式，会同时应用到它的后代元素上，这一特性称为样式的继承。

通过样式的继承可以将一些样式统一设置个祖先元素，这样所有的后代都会应用到相同的样式。

恰当地使用继承可以简化代码，降低CSS样式的复杂性。子元素可以继承父元素的样式（text-，font-，line-这些元素开头的都可以继承，以及color属性）

但是并不是所有的样式都会继承，比如：背景相关的，边框相关的，定位相关的。具体参考文档

特殊

css中高度不能继承

a标签不能继承color属性 text-decoration属性

h系列标签不能继承父辈的font-size font-weight

CSS选择器的优先级

当使用选择器为元素设置样式时，如果样式发生了冲突，采用哪个样式由选择器的优先级来决定。

优先级

!important

无穷大

内联样式

1000

id选择器

100

类和伪类选择器

元素选择器

通配选择器

继承的样式

没有优先级

当样式发生冲突时，需要将相关的选择器优先级进行求和计算，优先级高的优先显示，如果优先级一样，则显示靠后的样式

优先级计算时，总大小不能超过他的最大的数量级

可以在样式后边添加一个!important，如果样式中添加了该内容，则该样式将会获取最大的优先级，将会优先于所有的样式显示，包括内联样式，但是这个属性要慎用。

复合选择器权重

分支主题

注意:看选择器能否作用到元素,我们从右向左看.

选择器的性能

浏览器在解析一组选择器时，是从后边往前一个一个的解析的

如果选择器编写过于长的话，浏览器解析起来性能会比较差，所以在编写选择器时，越短越好。

*通配选择器，性能也比较差，要避免使用通配选择器

单位

长度单位

像素，像素就是构成一个图片的最小的单位，我们的屏幕就是由一个一个像素点构成

一个像素指的就是一个像素点

在不同的显示器中，一个像素的大小是不同的，越清晰的屏幕像素越小

可以将一个元素的样式值设置为一个百分比的值，这样浏览器将会根据父元素的值去计算出相应的值

当父元素的值改变时，子元素的值会按照一定比例一起改变，经常用于自适应的页面

em会相对于当前元素的字体大小来计算

1em = 1font-size

em经常用于设置文字相关的一些样式，因为当文字大小发生改变时，em会随之改变

颜色单位

颜色单词

直接使用英文单词来表示颜色

red green blue orange

RGB值

所谓RGB值就是通过红绿蓝三元色的不同组合来搭配出各种不同的颜色

语法：

rgb(红色,绿色,蓝色)

这三个值需要一个0-255之间的值

0表示没有

255表示最大

rgb(50,200,30)

也可以使用百分数来设置RGB值，需要0%-100%之间的值

百分数最终也是转换为0-255的

0%相当于0

100%相当于255

rgb(100%,0%,0%)

十六进制RGB值

也是一种RGB值的表示方式，不同的是它使用的是16进制数字来表示而不是10进制

语法：

#红色绿色蓝色

这里的颜色需要一个00-ff之间的值

例子：

#ff0000

如果颜色的是两位两位重复的，可以进行简写

比如 #aabbcc 可以写成 #abc

比如 #bbffaa 可以写成 #bfa

字体/文本样式

字体

color

字体的颜色

font-style

设置斜体

font-weight

设置文字的加粗100-900 的整百数

font-size

字体的大小

浏览器中默认的字体大小一般都是16px，而我们开发时一般会统一为12px

font-family

设置文字的字体,三种表示方式

汉字

英文

编码

在浏览器console面板中通过escape("字体")可以将这个字体转换为Unicode编码

font-variant

小型大写字母

font

文字的简写属性

可以同时设置所有的字体相关的样式

语法：

font: [加粗斜体小大字母] 大小[/行高] 字体

加粗，斜体，小大字母，顺序无所谓，写不写都行，如果不写在使用默认值

文本大小font-size，和字体font-family必须写，且大小必须是倒数第二个，字体必须是最后一个

大小后可以设置行高，可写可不写，如果不写则使用默认值

文本样式

line-height

行高

文本默认都是在行高中垂直居中的

通过line-height可以修改行高

行间距 = 行高 - 字体大小

line-height=盒子高度时,单行文本居中

分支主题

text-decoration

设置文本修饰

none 链接去下划线

overline上划线

underline下划线

line-through贯穿线

text-align

设置文本对齐

text-align:center; 水平居中

text-indent

设置首行缩进

它需要一个长度单位，如果是正值则首行向右移动，如果是负值则向左移动

em/dx

注意只能对块元素有效

letter-spacing

字符间距

对中文,设置文字间距

对英文,设置字母间距

word-spacing

单词间距

只对英文有效

text-shadow

文字影子:

text-shadow:水平位置垂直位置模糊距离阴影颜色

水平距离垂直距离不能少

text-transform

设置文本的大小写

背景

background-color

背景颜色

background-image

背景图片

需要一个url地址作为参数:例子：background-image:url(图片的路径)

多背景

以逗号分隔设置多背景

多背景如要设置颜色,一定要放在最后一个属性上

background-repeat

设置背景图片重复方式

可选值：

repeat

默认值，背景图片会平铺显示

沿x轴和y轴双方向重复

no-repeat

背景图片不重复

repeat-x

背景图片沿水平方向重复

repeat-y

背景图片沿垂直方向重复

background-position

设置背景图片的位置

设置方式一

可以直接通过几个位置的关键字来设置图片的位置

top

left

right

bottom

center

可以通过以上关键字两两组合的形式，将背景图片设置到元素的任意位置

如果仅仅指定一个值，则第二个值默认是center

设置方式二

可以直接指定两个值，来设置背景图片的偏移量

例子：

background-position : x轴偏移量 y轴偏移量;

x轴偏移量，用来指定图片的水平位置

如果指定一个正值，则图片向右移动

如果指定一个负值，则图片向左移动

y轴偏移量，用来指定图片的垂直位置

如果指定一个正值，则图片向下移动

如果指定一个负值，则图片向上移动

方式一二可以混用

注意与插入图片的区别:插入图片用margin 调整位置

background-attachment

用来设置背景是否随页面滚动

可选值

scroll

默认值，背景图片会随页面一起滚动

fixed

背景图片不随页面滚动，会固定在页面的指定位置

设置该属性的背景，则背景会永远相对于浏览器窗口进行定位

一般这种背景都会设置给body

background-size

设置图片大小：可以是像素 /百分比 /cover /contain

contain 等比例缩放:一边与盒子重合后图片不再缩放

cover 等比例缩放:铺满盒子

注意背景图片与插入图片的区别:插入图片用width/height调整大小

background

背景的简写属性

可以通过它来设置所有的背景相关的样式

该简写属性没有顺序的要求，也没有数量的要求，不写的属性使用默认值

opacity

用来设置背景的不透明度

可选值

0-1

0表示完全透明

1表示完全不透明

0.5半透明

IE8及以下的浏览器不支持该样式，可以使用滤镜来代替

filter:alpha(opacity=值)

这里值需要一个0-100之间的值

0相当于完全透明

100完全不透明

HTML

网页的结构

一个网页有三个部分组成

结构

结构是页面的整体结构，哪里是标题，哪里是段落，哪里是图片

结构使用HTML来编写

表现

表现是页面的外在的样式，比如字体，字体大小，字体颜色，背景。。。

使用CSS来设置页面中元素的样式

行为

页面和用户之间的交互行为

使用JavaScript来设置页面的行为

一个设计优良的网页要求结构、表现、行为三者分离

在开发中总是要面临一个问题，就是程序之间的耦合，三者分离就是为了解耦合

HTML，超文本标记语言

负责页面中的结构，定义出页面中的各个组成部分

HTML是采用纯文本的形式的编写，采用HTML标签来标识出页面中的不同部分

html 的标签语义化

使用有意义的单词作为标签的名字

核心：在合适的地方使用合理的标签

标签分类

双标签：成对出现

<标签名></标签名>

单标签：自结束标签

<标签名 />

属性

通过属性可以设置标签的效果

属性需要定义在开始标签中或这自结束标签中

属性实际上是一组一组名值对结构

例子：

<标签名属性名="属性值" 属性名="属性值"></标签名>

<标签名属性名="属性值" 属性名="属性值" />

标签的关系

嵌套关系（父子关系）

并列关系（兄弟关系）

HTML页面的基本结构

文档声明

<!doctype html>

用来标识当前页面的html的版本

该声明用来告诉浏览器，当前的页面是使用HTML5的标准编写的

快捷键：

！+tab或html:5+tab

html:4s+tab

html:xt+tab

常用标签

<html>

网页的根标签

一个页面中有且只有一个根标签

网页中的所有内容都需要写在html标签的内部

<head>

网页的头部

该标签中的内容不会在网页中直接显示

该标签用于帮助浏览器解析页面

子标签

<title>

用来设置网页的标题

默认会在浏览器的标题栏中显示

搜索引擎检索网页时，会主要检索title中的内容，它会影响到页面在搜索引擎中的排名

<meta>

用来设置网页的元数据，比如网页使用的字符集

设置网页的关键字

设置网页的描述

请求的重定向

<body>

网页的主体

网页中所有的可见部分都需要在body中编写

标题标签

在html中一共有六级标题

六级标题中，h1最重要，h6最不重要，一般页面中只会使用h1~h3

h1的重要性仅次于title，浏览器也会主要检索h1中的内容，以判断页面的主要内容

一般一个页面中只能写一个h1，一般只给logo 使用

logo 图片用背景图.

文字用text-indent:-9999px;移开

<p>

段落标签

<br />

换行标签

<hr />

水平线标签

内联框架

可以向一个页面中引入其他的外部页面

属性

src

外部页面的地址，可以使用相对路径

width和height

可以设置框架的宽度和高度

name

可以为内联框架指定一个名字

可以将该属性值设置为超链接的target属性的值

这样当点击超链接时，页面将会在相应的内联框架中打开

内联框架中的内容不会被搜索引擎所检索，所以开发中尽量不要使用内联框架

文本标签

<em>

表示语气上的强调

表示内容的重要性

<del>

删除的内容

<ins>

插入的内容

<i>

表示单纯的斜体

<b>

表示单纯的加粗

<small>

表示细则一类的内容

<cite>

表示参考的内容，凡是加书名号的都可以使用cite

<q>

短引用，行内引用

长引用，块级引用

<sup>

上标

<sub>

下标

<pre>

预格式标签，可以保留代码中空格换行这些格式

<code>

表示程序代码

超链接

a标签的几种作用：

1.可以实现页面间的跳转

2.可以当前页面跳转（空链接）#

3.可以实现当前页面的定位

4.可以现实跳转页面的定位要去的页面的地址+#+要去的位置的id

5.可以实现下载 (强烈不推荐使用)

<a>链接的文字</a>

属性

href

指向链接跳转的目标地址，可以是一个相对路径

还可以是#id属性值，这样当点击超链接以后，将会跳转到当前页面的指定位置 # 可以回到顶部

可以使用mailto:来创建一个发送电子邮件的超链接

可以下载，但不安全，不使用

target

指定在哪个窗口中打开链接

可选值

_self

默认值，默认在当前窗口打开链接

_blank

在新窗口中打开链接

内联框架的name属性值

在指定的内联框架中打开链接

在header标签中可以对全部跳转方式设定 <base target="">

注释

语法

ctrl+ / 快捷键

注释中的内容不会在页面中显示，但是会在源码中显示，我们可以通过注释来说明网页的代码

也可以通过注释隐藏一些页面中不想显示的内容

实体

在HTML页面中一些特殊符号是不能直接使用，需要使用实体来代替这些特殊符号

实体也可以称为转义字符

实体的语法

&实体名;

注意分号结束

常用的实体

空格

&nbsp;

&lt;

&gt;

版权符号

&copy;

图片标签

<img />

使用图片标签可以向页面中引入一个外部图片

属性

src

指向一个外部图片的路径，可以使用相对路径

alt

指定一个在图片无法加载时对图片的描述

搜索引擎主要通过该属性来识别图片的内容

如果不写该属性则搜索引擎不会对图片进行收录

width

设置图片的宽度

height

设置图片的高度

border

边框大小

title

给图片加一个标签（鼠标悬停在图片上显示）

图片的格式

JPEG

颜色丰富的图片，如，照片

GIF

颜色单一，简单透明的图片，动态图

PNG

颜色丰富，复杂透明的图片

图片选择的原则

效果一致，用小的

效果不一致，用效果好的

路径问题

绝对路径

磁盘绝对路径

网络绝对路径

相对路径

文件和图片在同一级目录

直接可以通过图片的名字拿到图片

文件在图片的上一级目录

先找到存放图片的文件夹，然后在通过图片的名字拿到图片

文件在图片的下一级目录

先通过“../”返回到上一级目录

列表

无序列表

使用ul来创建一个无序列表，在列表中使用li来表示一个列表项

无序列表使用符号作为项目符号

有序列表

使用ol来创建一个有序列表，在列表中使用li来表示一个列表项

使用有序的序号作为项目符号

定义列表

dl dt dd

definition list definition title definition data

列表相关的元素都是块元素，他们之间可以互相嵌套  列表ul ol dl 内不能嵌套其他标签。ul ol只能嵌套li,dl只能嵌套dt dd

去除项目符号

list-style:none

表格

结构table caption（表头） thead tr th（内容头部） tbody tr td

相关属性：合并rowspan colspan cellpaddig cellspacing border align

表格table标签内只能嵌套表格相关标签 但th td 内可以放其他标签

表单

form fieldset legend（设置区域名称） label

label的两种用法

form三个重要属性

action

指定接收并处理表单数据的服务器程序的url地址。

method

用于设置表单数据的提交方式，其取值为get或post

name

用于指定表单的名称，以区分同一个页面中的多个表单。

input 属性有 type=”text“ password radio（name checked预选） checkbox（checked预选） button range submit reset （submit/reset须要写在form内）  file image

checked=“checked” 缩写checked

select option（selected预选）

textarea 多行文本框（cols rows ）

了解富文本编辑器

xHtml语法规范

1.HTML中不区分大小写，但是尽量使用小写

2.HTML的注释不能嵌套/a标签也不能嵌套

3.标签必须结构完整

要么成对出现

要么自结束标签

4.标签可以嵌套但是不能交叉嵌套

5.属性必须有值，且值必须加引号，单引号双引号都可以

div span 是没有语义的是我们网页布局主要的2个盒子 DIV+CSS 都是双标签

html 5 新增

新增标签

header

nav

main

footer

aside

article

section

新增input属性

placeholder 占位符/设置用户提示

autofocus 自动定位到输入框

multiple 多文件上传对应type=“file”

autocomplete

需要放在表单域from中并且有name属性， 要设置有submit 按键

required 必填项

accesskey 规定激活（使元素获得焦点）元素的快捷键

新增type属性的值

tel

url

输入格式http://。。。

number

对应maxlength max min

对比text 属性，输入后有个删除键，可以快速删除

range

日期时间

time

datetime

手机端使用较多

date

month

day

week

数据列表

datalist

注意与select区别

select

datalist

多媒体

音频播放器

audio

视频播放器

video

音频视频分享标签embed

课程简介

软件的架构

C/S，客户端/服务器

1.一般我们使用的软件都是C/S架构

2.比如系统的中的软件QQ、360、office、XMind

3.C表示客户端，用户通过客户端来使用软件

4.S表示服务器，服务器负责处理软件的业务逻辑

特点

1.软件使用前必须得安装

2.软件更新时，服务器和客户端得同时更新

3.C/S架构的软件不能跨平台使用

4.C/S架构的软件客户端和服务器通信采用的是自有协议，相对来说比较安全

B/S，浏览器/服务器

1.B/S本质上也是C/S，只不过B/S架构的软件，使用浏览器作为软件的客户端

2.B/S架构软件通过使用浏览器访问网页的形式，来使用软件

3.比如：京东淘宝 12306 知乎新浪微博

特点

1.软件不需要安装，直接使用浏览器访问指定的网址即可

2.软件更新时，客户端不需要更新

3.软件可以跨平台，只要系统中有浏览器，就可以使用

4.B/S架构的软件，客户端和服务器之间通信采用的是通用的HTTP协议，相对来说不安全

五大浏览器及内核

chrome

blink 内核

firefox

Gecko内核

Trident内核

safari

webkit内核

opera

blink内核

进制

几进制就是满几进一

二进制

0 1

10 11 100 101 110 111

十进制

0 1 2 3 4 5 6 7 8 9

10 11 12 13 14 。。。

十六进制

满16进1

0 1 2 3 4 5 6 。。。 9 a b c d e f

10 11 12 ... 19 1a 1b 1c 1d 1e 1f

16进制由于是满16进1，所以必须设置几个特殊的字符来表示10 11 12 13 14 15

使用a b c d e f分别表示10 11 12 13 14 15

八进制

满8进1

0 1 2 3 4 5 6 7

10 11 12 13 14 15 16 17 20 21 22

乱码的问题

乱码出现的原因

计算机是一个非常笨的机器，它只认识两个东西 0 1

在计算机中保存的任何内容，最终都需要转换为0 1这种二进制编码来保存，包括网页中的内容

比如：中国，在计算机底层，可以能需要转换为 1010001001010101011010

在读取内容时，需要将二进制编码，在转换为正确的内容

编码

依据一定的规则，将字符转换为二进制编码的过程

解码

依据一定的规则，将二进制编码转换为字符的过程

字符集

编码和解码所采用的规则，我们称为字符集

常见的字符集

ASCII

ISO-8859-1

GBK

GB2312

中文系统的默认编码

UTF-8

万国码，支持地球上所有的文字

ANSI

自动以系统的默认编码来保存文件

产生乱码的根本原因是，编码和解码采用的字符集不同

在中文系统的浏览器中，默认都是使用GB2312进行解码的

前端常用软件：

dreamwave

不用

sublime

webstome

hbuider

布局

浮动

使用float来设置元素浮动

使用display:inline-block,来布局页面,块元素间有间隙,很难消除

使用float:无间隙

浮动不会压住文字

可选值

none

默认值，不浮动，元素在文档流中

left

元素向左浮动

right

元素向右浮动

float特点

元素不占位置（脱离标准流）

可以实现元素的模式转换

块元素脱离文档流以后

1.不会独占一行

2.宽度和高度都被内容撑开

内联元素脱离文档流以后会变成块元素

浮动的元素顶端对齐

不超过他上边的浮动的兄弟元素，最多一边齐

子元素浮动只能到达父元素的顶部/左部/右部，除非你非要把他移动出去（margin）

浮动前面有标准流，会浮动到标准流的后面

浮动元素不会覆盖文字，文字会自动环绕在浮动元素的周围，可以通过浮动来实现文字环绕的效果

解决开启float 后高度塌陷

高度塌陷原因

父元素在文档流中高度默认是被子元素撑开的，当子元素脱离文档流以后，将无法撑起父元素的高度，也就会导致父元素的高度塌陷

塌陷后果

父元素的高度一旦塌陷所有元素的位置将会上移，导致整个页面的布局混乱

清除浮动方法

1.给父盒子,增加高度

2.使用clear清除浮动

clear:left/right/both;

注意:一个元素设置clear 清除浮动,只能控制自己,不能控制别人

浮动找浮动,不浮动找不浮动

对于元素清除浮动,只能清除这个元素前面的浮动元素,不能清除后面的

3给父盒子,增加overflow:hidden.触发BFC(少使用,使用后,超出内容不可见)

BFC

Block Formatting Context

块级格式化环境

BFC是元素的隐含属性，默认是在关闭状态的

可以通过一些特殊的样式，来开启BFC

开启BFC以后元素将会具有如下特性

1、父元素的垂直外边距不会与子元素重叠

2、开启BFC的元素不会被浮动元素所覆盖

3、开启BFC的元素可以包含浮动子元素

开启BFC的方式

1.设置元素浮动

2.设置元素绝对定位

3.设置元素的类型为inline-block

4.设置overflow为一个非默认值

一般都是使用overflow:hidden来开启BFC

hasLayout

在IE6中没有BFC，但是有一个和BFC类似的hasLayout

在IE6中可以通过开启hasLayout来解决高度塌陷的问题

副作用最小的开启方式

zoom:1

当为元素设置宽度非默认值时，会自动开启hasLayout

4.使用额外标签法: 必须是块元素

需要在html 结构中增加多余结构

5.使用伪元素::after清除浮动(优先使用)

向父元素后添加一个块元素，并对其清除浮动

原理同额外标签法但是不用向页面中添加多余结构

重点掌握:

clearfix ::after{ content:"."; /*这个.是为了解决低版本浏览器兼容问题*/ display:block; /* ::after 增加的元素为行内元素 */  clear:both  visibility:hidden;  height:0; line-height:0;  }

6.使用before和after双伪元素清除浮动

.clearfix:before,.clearfix:after {  content:""; display:table; /* 这句话可以出发BFC BFC可以清除浮动,BFC我们后面讲 */ } .clearfix:after { clear:both; } .clearfix { *zoom:1; }

定位

通过定位可以将页面中的元素，摆放到页面的任意位置

使用position来设置元素的定位

可选值

static

默认值，元素没有开启定位

可以用来清除定位

relative

开启元素的相对定位

absolute

开启元素的绝对定位

fixed