HTML、CSS基础知识

时间 2019-11-13

标签 html css 基础知识栏目 HTML 繁體版

原文原文链接

前端基础css

1. CSS 8html

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

1.2. CSS负责结构、表现、行为中的表现 8浏览器

1.3. 编写的位置 8安全

1.3.1. 1.内联样式 8服务器

1.3.2. 2.内部样式表 8架构

1.3.3. 3.外部样式表 8框架

1.4. 基本语法 9布局

1.4.1. 选择器 9性能

1.4.2. 声明块 11

1.5. 元素之间的关系 12

1.5.1. 父元素 12

1.5.2. 子元素 12

1.5.3. 祖先元素 12

1.5.4. 后代元素 12

1.5.5. 兄弟元素 12

1.6. 块元素和内联元素 12

1.6.1. 块元素 12

1.6.2. 内联元素 13

1.6.3. 包裹规则 13

1.7. 伪类和伪元素 13

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

1.7.2. :link 14

1.7.3. :visited 14

1.7.4. :hover 14

1.7.5. :active 14

1.7.6. :focus 14

1.7.7. ::selection 14

1.7.8. :first-letter 14

1.7.9. :first-line 14

1.7.10. :before 14

1.7.11. :after 15

1.8. 属性选择器 15

1.8.1. 根据元素的属性选择指定元素 15

1.8.2. [属性名] 15

1.8.3. [属性名="属性值"] 15

1.8.4. [属性名^="属性值"] 15

1.8.5. [属性名$="属性值"] 15

1.8.6. [属性名*="属性值"] 15

1.9. 兄弟元素选择器 15

1.9.1. 选取后一个兄弟元素 15

1.9.2. 选取后边全部的兄弟元素 16

1.10. 子元素的伪类 16

1.10.1. :first-child 16

1.10.2. :last-child 16

1.10.3. :nth-child 16

1.10.4. :first-of-type 16

1.10.5. :last-of-type 16

1.10.6. :nth-of-type 16

1.11. 否认伪类 17

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

1.11.2. 语法： 17

1.11.3. 例子： 17

1.12. 样式的继承 17

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

1.12.2. 经过样式的继承能够将一些样式统一设置个祖先元素，这样全部的后代都会应用到相同的样式。 17

1.12.3. 可是并非全部的样式都会继承，好比：背景相关的，边框相关的，定位相关的。具体参考文档 17

1.13. 选择器的优先级 17

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

1.13.2. 优先级 17

1.13.3. 当样式发生冲突时，须要将相关的选择器优先级进行求和计算，优先级高的优先显示，若是优先级同样，则显示靠后的样式 18

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

1.13.5. 能够在样式后边添加一个!important，若是样式中添加了该内容，则该样式将会获取最大的优先级，将会优先于全部的样式显示，包括内联样式，可是这个属性要慎用。 18

1.14. 选择器的性能 18

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

1.14.2. 若是选择器编写过于长的话，浏览器解析起来性能会比较差，因此在编写选择器时，越短越好。 18

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

1.15. 单位 19

1.15.1. 长度单位 19

1.15.2. 颜色单位 19

1.15.3. 文本样式 21

1.16. 背景 23

1.16.1. background-color 23

1.16.2. background-image 23

1.16.3. background-repeat 23

1.16.4. background-position 24

1.16.5. background-attachment 25

1.16.6. background 26

1.16.7. opacity 26

2. HTML 26

2.1. 网页的结构 27

2.1.1. 一个网页有三个部分组成 27

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

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

2.2. HTML，超文本标记语言 27

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

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

2.5. 标签 27

2.5.1. 成对出现 27

2.5.2. 自结束标签 28

2.6. 属性 28

2.6.1. 经过属性能够设置标签的效果 28

2.6.2. 属性须要定义在开始标签中或这自结束标签中 28

2.6.3. 属性其实是一组一组名值对结构 28

2.6.4. 例子： 28

2.7. HTML页面的基本结构 28

2.8. 文档声明 28

2.8.1. <!doctype html> 28

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

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

2.9. 经常使用标签 29

2.9.1. <html> 29

2.9.2. <head> 29

2.9.3. <body> 30

2.9.4. <h1> ~ <h6> 30

2.9.5. <p> 30

2.9.6. <br /> 30

2.9.7. <hr /> 31

2.9.8. 内联框架 31

2.9.9. 超连接 31

2.10. 注释 32

2.10.1. 语法 32

2.10.2. 注释中的内容不会在页面中显示，可是会在源码中显示，咱们能够经过注释来讲明网页的代码 33

2.10.3. 也能够经过注释隐藏一些页面中不想显示的内容 33

2.11. 实体 33

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

2.11.2. 实体也能够称为转义字符 33

2.11.3. 实体的语法 33

2.11.4. 经常使用的实体 33

2.12. 图片标签 33

2.12.1. <img /> 33

2.12.2. 使用图片标签能够向页面中引入一个外部图片 34

2.12.3. 属性 34

2.12.4. 图片的格式 34

2.13. 相对路径 35

2.13.1. 相对于当前资源所在的目录的路径 35

2.13.2. 可使用../返回一级目录，返回几级使用几个../ 35

2.14. xHtml语法规范 35

2.14.1. 1.HTML中不区分大小写，可是尽可能使用小写 35

2.14.2. 2.HTML的注释不能嵌套 35

2.14.3. 3.标签必须结构完整 35

2.14.4. 4.标签能够嵌套可是不能交叉嵌套 35

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

2.15. 文本标签 35

2.15.1. <em> 35

2.15.2. <strong> 35

2.15.3. <i> 36

2.15.4. <b> 36

2.15.5. <small> 36

2.15.6. <cite> 36

2.15.7. <q> 36

2.15.8. <blockquote> 36

2.15.9. <sup> 36

2.15.10. <sub> 36

2.15.11. <del> 36

2.15.12. <ins> 36

2.15.13. <pre> 37

2.15.14. <code> 37

2.16. 列表 37

2.16.1. 无序列表 37

2.16.2. 有序列表 37

2.16.3. 定义列表 38

2.16.4. 列表相关的元素都是块元素，他们之间能够互相嵌套 38

2.16.5. 去除项目符号 38

3. 布局 38

3.1. 浮动 38

3.1.1. 使用float来设置元素浮动 38

3.1.2. 可选值 38

3.1.3. 特色 38

3.1.4. 浮动之后元素的特色 39

3.1.5. 高度塌陷 39

3.2. 定位 42

3.2.1. 经过定位能够将页面中的元素，摆放到页面的任意位置 42

3.2.2. 使用position来设置元素的定位 42

3.2.3. 可选值 42

3.2.4. 相对定位 42

3.2.5. 绝对定位 43

3.2.6. 固定定位 43

3.2.7. 层级 43

3.2.8. 偏移量 43

4. 课程简介 44

4.1. 软件的架构 44

4.1.1. C/S，客户端/服务器 44

4.1.2. B/S，浏览器/服务器 45

4.2. 进制 45

4.2.1. 几进制就是满几进一 45

4.2.2. 二进制 45

4.2.3. 十进制 46

4.2.4. 十六进制 46

4.2.5. 八进制 46

4.3. 乱码的问题 46

4.3.1. 乱码出现的缘由 46

5. 盒子模型 48

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

5.2. 将全部的元素都设置为盒子，是为了方便页面的布局 48

5.3. 当这些元素都是盒子之后，咱们的布局就变成了在页面中摆放盒子 48

5.4. 盒子模型 48

5.5. 每一个盒子都由以下几部分构成 48

5.5.1. 内容区 48

5.5.2. 内边距 49

5.5.3. 边框 49

5.5.4. 外边距 52

5.6. 内联元素的盒子模型 53

5.6.1. width 53

5.6.2. height 53

5.6.3. padding 53

5.6.4. border 53

5.6.5. margin 53

不支持(width, height) 53

5.7. 盒模型相关的样式 54

5.7.1. display 54

5.7.2. visibility 54

5.7.3. overflow 55

5.8. 文档流 55

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

5.8.2. 文档流是网页的基础，是网页的最底层，全部的元素默认都是在文档流中排列 55

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

5.8.4. 块元素 56

5.8.5. 内联元素 56

1. CSS

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

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

1.3. 编写的位置

1.3.1. 1.内联样式

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

<p style="color:red;"></p>

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

1.3.2. 2.内部样式表

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

<style type="text/css"></style>

color:red;

}

</style>

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

1.3.3. 3.外部样式表

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

<link rel="stylesheet" type="text/css" href="文件的路径"/>

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

1.4. 基本语法

1.4.1. 选择器

经过选择器能够选中页面中的一组元素，而后为其设置样式

元素选择器

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

语法：标签名{ }

例子：

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{}

1.4.2. 声明块

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

声明

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

名和值之间使用:连接

:左边是样式的名字

:右边是样式的值

每个声明以;结尾

例子

color:red;

font-size:20px;

1.5. 元素之间的关系

1.5.1. 父元素

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

1.5.2. 子元素

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

1.5.3. 祖先元素

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

1.5.4. 后代元素

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

1.5.5. 兄弟元素

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

1.6. 块元素和内联元素

1.6.1. 块元素

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

通常使用块元素对页面进行布局

常见的块元素

div

p

h1~h6

1.6.2. 内联元素

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

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

通常内联元素都是用来为文原本设置效果

常见的内联

span

a

img

1.6.3. 包裹规则

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

a元素能够包含任意元素，除了a自己

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

1.7. 伪类和伪元素

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

1.7.2. :link

表示一个普通的连接（未访问过的连接）

1.7.3. :visited

表示访问过的连接

1.7.4. :hover

鼠标移入的连接，也能够为其余元素设置hover

1.7.5. :active

正在被点击的连接，也能够为其余元素设置active

1.7.6. :focus

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

1.7.7. ::selection

表示内容被选中的状态

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

1.7.8. :first-letter

表示第一个字符

1.7.9. :first-line

表示文字的第一行

1.7.10. :before

选中元素的最前边

通常该伪类都会结合content一块儿使用，经过content能够向指定位置添加内容

1.7.11. :after

选中元素的最后边

通常该伪类都会结合content一块儿使用，经过content能够向指定位置添加内容

1.8. 属性选择器

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

1.8.2. [属性名]

选取含有指定属性的元素

1.8.3. [属性名="属性值"]

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

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

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

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

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

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

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

1.9. 兄弟元素选择器

1.9.1. 选取后一个兄弟元素

前一个 + 后一个

1.9.2. 选取后边全部的兄弟元素

前一个 ~ 后边全部

1.10. 子元素的伪类

1.10.1. :first-child

寻找父元素的第一个子元素，在全部的子元素中排序

1.10.2. :last-child

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

1.10.3. :nth-child

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

例子

p:nth-child(3)

可使用even，来找到偶数的子元素

可使用odd，来找到奇数的子元素

1.10.4. :first-of-type

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

1.10.5. :last-of-type

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

1.10.6. :nth-of-type

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

1.11. 否认伪类

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

1.11.2. 语法：

:not(选择器)

1.11.3. 例子：

.abc:not(div)

1.12. 样式的继承

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

1.12.2. 经过样式的继承能够将一些样式统一设置个祖先元素，这样全部的后代都会应用到相同的样式。

1.12.3. 可是并非全部的样式都会继承，好比：背景相关的，边框相关的，定位相关的。具体参考文档

1.13. 选择器的优先级

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

1.13.2. 优先级

内联样式

1000

id选择器

100

类和伪类选择器

10

元素选择器

1

通配选择器

0

继承的样式

没有优先级

1.13.3. 当样式发生冲突时，须要将相关的选择器优先级进行求和计算，优先级高的优先显示，若是优先级同样，则显示靠后的样式

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

1.13.5. 能够在样式后边添加一个!important，若是样式中添加了该内容，则该样式将会获取最大的优先级，将会优先于全部的样式显示，包括内联样式，可是这个属性要慎用。

1.14. 选择器的性能

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

1.14.2. 若是选择器编写过于长的话，浏览器解析起来性能会比较差，因此在编写选择器时，越短越好。

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

1.15. 单位

1.15.1. 长度单位

px

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

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

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

%

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

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

em

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

1em = 1font-size

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

1.15.2. 颜色单位

颜色单词

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

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

1.15.3. 文本样式

字体

color

字体的颜色

font-size

字体的大小

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

font-family

设置文字的字体

font-style

设置斜体

font-weight

设置文字的加粗

font-variant

小型大写字母

font

文字的简写属性

能够同时设置全部的字体相关的样式

语法：

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

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

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

大小后能够设置行高，可写可不写，若是不写则使用默认值

文本样式

line-height

行高

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

经过line-height能够修改行高

行间距 = 行高 - 字体大小

text-transform

设置文本的大小写

text-decoration

设置文本修饰

text-align

设置文本对齐

text-indent

设置首行缩进

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

letter-spacing

字符间距

word-spacing

单词间距

1.16. 背景

1.16.1. background-color

背景颜色

1.16.2. background-image

背景图片

须要一个url地址做为参数

例子：background-image:url(图片的路径)

1.16.3. background-repeat

设置背景图片重复方式

可选值：

repeat

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

沿x轴和y轴双方向重复

no-repeat

背景图片不重复

repeat-x

背景图片沿水平方向重复

repeat-y

背景图片沿垂直方向重复

1.16.4. background-position

设置背景图片的位置

设置方式一

能够直接经过几个位置的关键字来设置图片的位置

top

left

right

bottom

center

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

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

设置方式二

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

例子：

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

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

若是指定一个正值，则图片向右移动

若是指定一个负值，则图片向左移动

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

若是指定一个正值，则图片向下移动

若是指定一个负值，则图片向上移动

1.16.5. background-attachment

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

可选值

scroll

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

fixed

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

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

通常这种背景都会设置给body

1.16.6. background

背景的简写属性

能够经过它来设置全部的背景相关的样式

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

1.16.7. opacity

用来设置背景的不透明度

可选值

0-1

0表示彻底透明

1表示彻底不透明

0.5半透明

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

filter:alpha(opacity=值)

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

0至关于彻底透明

100彻底不透明

2. HTML

2.1. 网页的结构

2.1.1. 一个网页有三个部分组成

结构

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

结构使用HTML来编写

表现

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

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

行为

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

使用JavaScript来设置页面的行为

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

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

2.2. HTML，超文本标记语言

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

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

2.5. 标签

2.5.1. 成对出现

<标签名></标签名>

2.5.2. 自结束标签

<标签名 />

2.6. 属性

2.6.1. 经过属性能够设置标签的效果

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

2.6.3. 属性其实是一组一组名值对结构

2.6.4. 例子：

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

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

2.7. HTML页面的基本结构

<!doctype html>

<html>

<head>

</head>

<body>

</body>

</html>

2.8. 文档声明

2.8.1. <!doctype html>

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

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

2.9. 经常使用标签

2.9.1. <html>

网页的根标签

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

网页中的全部内容都须要写在html标签的内部

2.9.2. <head>

网页的头部

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

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

子标签

<title>

用来设置网页的标题

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

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

<meta>

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

设置网页的关键字

设置网页的描述

请求的重定向

2.9.3. <body>

网页的主体

网页中全部的可见部分都须要在body中编写

2.9.4. <h1> ~ <h6>

标题标签

在html中一共有六级标题

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

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

通常一个页面中只能写一个h1

2.9.5. <p>

段落标签

2.9.6. <br />

换行标签

2.9.7. <hr />

水平线标签

2.9.8. 内联框架

能够向一个页面中引入其余的外部页面

<iframe></iframe>

属性

src

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

width和height

能够设置框架的宽度和高度

name

能够为内联框架指定一个名字

能够将该属性值设置为超连接的target属性的值

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

内联框架中的内容不会被搜索引擎所检索，因此开发中尽可能不要使用内联框架

2.9.9. 超连接

可使当前页面跳转到其余的页面

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

属性

href

指向连接跳转的目标地址，能够是一个相对路径

还能够是#id属性值，这样当点击超连接之后，将会跳转到当前页面的指定位置

可使用mailto:来建立一个发送电子邮件的超连接

target

指定在哪一个窗口中打开连接

可选值

_self

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

_blank

在新窗口中打开连接

内联框架的name属性值

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

2.10. 注释

2.10.1. 语法

2.10.2. 注释中的内容不会在页面中显示，可是会在源码中显示，咱们能够经过注释来讲明网页的代码

2.10.3. 也能够经过注释隐藏一些页面中不想显示的内容

2.11. 实体

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

2.11.2. 实体也能够称为转义字符

2.11.3. 实体的语法

&实体名;

2.11.4. 经常使用的实体

空格

<

>

版权符号

©

2.12. 图片标签

2.12.1. <img />

2.12.2. 使用图片标签能够向页面中引入一个外部图片

2.12.3. 属性

src

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

alt

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

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

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

width

设置图片的宽度

height

设置图片的高度

2.12.4. 图片的格式

JPEG

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

GIF

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

PNG

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

图片选择的原则

效果一致，用小的

效果不一致，用效果好的

2.13. 相对路径

2.13.1. 相对于当前资源所在的目录的路径

2.13.2. 可使用../返回一级目录，返回几级使用几个../

2.14. xHtml语法规范

2.14.1. 1.HTML中不区分大小写，可是尽可能使用小写

2.14.2. 2.HTML的注释不能嵌套

2.14.3. 3.标签必须结构完整

要么成对出现

要么自结束标签

2.14.4. 4.标签能够嵌套可是不能交叉嵌套

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

2.15. 文本标签

2.15.1. <em>

表示语气上的强调

2.15.2. <strong>

表示内容的重要性

2.15.3. <i>

表示单纯的斜体

2.15.4. <b>

表示单纯的加粗

2.15.5. <small>

表示细则一类的内容

2.15.6. <cite>

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

2.15.7. <q>

短引用，行内引用

2.15.8. <blockquote>

长引用，块级引用

2.15.9. <sup>

上标

2.15.10. <sub>

下标

2.15.11. <del>

删除的内容

2.15.12. <ins>

插入的内容

2.15.13. <pre>

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

2.15.14. <code>

表示程序代码

2.16. 列表

2.16.1. 无序列表

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

<ul>

</ul>

<ol>

</ol>

<dl>

<dd>景阳冈打虎英雄，战斗力99</dd>

<dd>后打死西门庆，投奔梁山</dd>

<dd>著名餐饮企业家，战斗力0</dd>

</dl>

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

2.16.2. 有序列表

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

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

2.16.3. 定义列表

2.16.4. 列表相关的元素都是块元素，他们之间能够互相嵌套

2.16.5. 去除项目符号

list-style:none

3. 布局

3.1. 浮动

3.1.1. 使用float来设置元素浮动

3.1.2. 可选值

none

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

left

元素向左浮动

right

元素向右浮动

3.1.3. 特色

1.元素浮动之后会彻底脱离文档流

2.浮动之后元素会一直向父元素的最上方移动

3.直到遇到父元素的边框或者其余的浮动元素，会中止移动

4.若是浮动元素的上边是一个块元素，则浮动元素不会覆盖块元素

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

6.浮动元素不会覆盖文字，文字会自动环绕在浮动元素的周围，能够经过浮动来实现文字环绕的效果

3.1.4. 浮动之后元素的特色

元素浮动之后，会使其彻底脱离文档流。

块元素

块元素脱离文档流之后

1.不会独占一行

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

内联元素

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

3.1.5. 高度塌陷

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

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

方法一

开启父元素的BFC或hasLayout

BFC

Block Formatting Context

块级格式化环境

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

能够经过一些特殊的样式，来开启BFC

开启BFC之后元素将会具备以下特性

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

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

三、开启BFC的元素能够包含浮动子元素

开启BFC的方式

1.设置元素浮动

2.设置元素绝对定位

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

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

通常都是使用overflow:hidden来开启BFC

hasLayout

在IE6中没有BFC，可是有一个和BFC相似的hasLayout

在IE6中能够经过开启hasLayout来解决高度塌陷的问题

反作用最小的开启方式

zoom:1

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

方法二

在塌陷的父元素的最后添加一个空白的div，而后对该div进行清除浮动

</div>

使用这种方式会在页面中添加多余的结构

方法三

使用after伪类，向父元素后添加一个块元素，并对其清除浮动

.clearfix:after{

content:"";

display:block;

clear:both;

}

.clearfix{

zoom:1;

}

该种方式的原理和方法二原理同样，可是不用向页面中添加对于的结构

3.2. 定位

3.2.1. 经过定位能够将页面中的元素，摆放到页面的任意位置

3.2.2. 使用position来设置元素的定位

3.2.3. 可选值

static

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

relative

开启元素的相对定位

absolute

开启元素的绝对定位

fixed

开启元素的固定定位

3.2.4. 相对定位

1.开启元素的相对定位后，若是不设置偏移量元素不会发生任何变化

2.相对定位元素相对于其自身在文档流中的位置来定位

3.相对定位的元素不会脱离文档流

4.相对定位不会改变元素的性质，块元素仍是块元素，内联元素仍是内联元素

5.相对定位的元素会提高一个层级

3.2.5. 绝对定位

1.元素设置绝对定位之后，若是不设置偏移量，元素的位置不会发生变化

2.绝对定位的元素是相对于距离他最近的开启了定位的祖先元素进行定位，若是全部的祖先元素都没开启定位，则相对于浏览器窗口进行定位。

3.绝对定位的元素会彻底脱离文档流

4.绝对定位会改变元素的性质。内联变块，块的高度和宽度都被内容撑开，而且不独占一行

5.绝对定位会使元素提高一个层级

3.2.6. 固定定位

固定定位是一种特殊的绝对定位，它的特色大部分都和绝对定位同样

不一样的是，固定定位的元素永远都是相对于浏览器窗口进行定位的。而且他不会随滚动条滚动

IE6不支持固定定位

3.2.7. 层级

定位元素 > 浮动元素 > 文档流中的元素

当元素开启了定位之后，能够经过z-index来设置元素的层级

z-index值越高元素越优先显示

若是z-index值同样，或者都没有z-index则优先显示下边的元素

父元素永远不会盖住子元素

3.2.8. 偏移量

当元素开启了定位之后，能够经过偏移量来设置元素的位置

left

元素距离定位位置的左侧距离

top

元素距离定位位置的上边距离

right

元素距离定位位置的右侧距离

bottom

元素距离定位位置的底部距离

通常状况下，只使用两个值便可定义一个元素的位置。

4. 课程简介

4.1. 软件的架构

4.1.1. C/S，客户端/服务器

1.通常咱们使用的软件都是C/S架构

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

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

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

特色

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

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

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

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

4.1.2. B/S，浏览器/服务器

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

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

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

特色

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

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

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

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

4.2. 进制

4.2.1. 几进制就是满几进一

4.2.2. 二进制

0 1

10 11 100 101 110 111

4.2.3. 十进制

0 1 2 3 4 5 6 7 8 9

10 11 12 13 14 。。。

4.2.4. 十六进制

满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

4.2.5. 八进制

满8进1

0 1 2 3 4 5 6 7

10 11 12 13 14 15 16 17 20 21 22

4.3. 乱码的问题

4.3.1. 乱码出现的缘由

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

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

好比：中国，在计算机底层，能够能须要转换为 1010001001010101011010

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

编码

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

解码

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

字符集

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

常见的字符集

ASCII

ISO-8859-1

GBK

GB2312

中文系统的默认编码

UTF-8

万国码，支持地球上全部的文字

ANSI

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

产生乱码的根本缘由是，编码和解码采用的字符集不一样

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

5. 盒子模型

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

5.2. 将全部的元素都设置为盒子，是为了方便页面的布局

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

5.4. 盒子模型

5.4.1.

5.5. 每一个盒子都由以下几部分构成

5.5.1. 内容区

内容区至关于盒子存放东西的空间

内容区在盒子的最里边

元素的全部的子元素都是放在父元素的内容区

内容区设置

width

内容区的宽度

height

内容区的高度

5.5.2. 内边距

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

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

padding-top

padding-right

padding-bottom

padding-left

padding

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

padding:上右下左

padding:上左右下

padding:上下左右

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

5.5.3. 边框

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

设置边框

设置边框须要同时设置三个样式，缺一不可

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

边框的样式

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

border-xxx-width

border-xxx-color

border-xxx-style

xxx能够是

top

right

bottom

left

经过这些样式能够单独指定四个边的颜色，宽度和样式

边框的简写属性

border

border-left

border-top

border-right

border-bottom

这个几个属性能够同时设置边框相关的的样式(border, border-left, border-top, border-right, border-bottom)

border能够同时设置四个边的颜色，宽度，样式

border-xxx能够单独设置某一个边

规则

使用这些样式能够同时设置border-width border-style border-color，不一样的属性使用空格隔开，而且没有顺序要求

5.5.4. 外边距

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

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

margin-top

margin-right

margin-bottom

margin-left

简写属性

margin

规则和padding一致

margin值

能够设置为auto

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

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

margin:0 auto

能够设置为负值

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

外边距的重叠

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

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

子元素的外边距会传递给父元素

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

5.6. 内联元素的盒子模型

5.6.1. width

5.6.2. height

5.6.3. padding

支持水平方向的padding

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

5.6.4. border

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

5.6.5. margin

支持水平方向外边距

不支持垂直方向的

不支持(width, height)

5.7. 盒模型相关的样式

5.7.1. display

设置元素的显示类型

可选值

none

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

block

元素会做为块元素显示

inline

元素会做为内联元素显示

inline-block

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

既具备内联元素的特色也具备块元素的特色

不独占一行

能够设置宽高

HTML、CSS基础知识

1. CSS

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

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

1.3. 编写的位置

1.3.1. 1.内联样式

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

<p style="color:red;"></p>

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

1.3.2. 2.内部样式表

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

<style type="text/css"></style>

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

1.3.3. 3.外部样式表

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

<link rel="stylesheet" type="text/css" href="文件的路径"/>

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

1.4. 基本语法

1.4.1. 选择器

经过选择器能够选中页面中的一组元素，而后为其设置样式

元素选择器

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

语法：标签名{ }

例子：

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{}

1.4.2. 声明块

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

声明

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

名和值之间使用:连接

:左边是样式的名字

:右边是样式的值

每个声明以;结尾

例子

color:red;

font-size:20px;

1.5. 元素之间的关系

1.5.1. 父元素

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

1.5.2. 子元素

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

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