HTML、CSS基础知识

时间：2019-09-28 23:27:16 阅读：269 评论：0 收藏：0 [点我收藏+]

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.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.1. 长度单位 19

1.15.2. 颜色单位 19

1.15.3. 文本样式 21

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.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.1. 成对出现 27

2.5.2. 自结束标签 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.1. 语法 32

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

2.10.3. 也可以通过注释隐藏一些页面中不想显示的内容 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.1. 无序列表 37

2.16.2. 有序列表 37

2.16.3. 定义列表 38

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

2.16.5. 去除项目符号 38

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

3.1.2. 可选值 38

3.1.3. 特点 38

3.1.4. 浮动以后元素的特点 39

3.1.5. 高度塌陷 39

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.1. 软件的架构 44

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

4.1.2. B/S，浏览器/服务器 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.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.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.4. 基本语法

1.5. 元素之间的关系

1.6. 块元素和内联元素

1.7. 伪类和伪元素

1.8. 属性选择器

1.9. 兄弟元素选择器

1.10. 子元素的伪类

1.11. 否定伪类

1.12. 样式的继承

1.13. 选择器的优先级

1.14. 选择器的性能

1.15. 单位

rgb(50,200,30)

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

rgb(100%,0%,0%)

比如 #aabbcc 可以写成 #abc

比如 #bbffaa 可以写成 #bfa

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

1.16. 背景

2. HTML

2.1. 网页的结构

2.2. HTML，超文本标记语言

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

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

2.5. 标签

2.6. 属性

2.7. HTML页面的基本结构

<!doctype html>

2.8. 文档声明

2.9. 常用标签

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

内联框架的name属性值

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

2.10. 注释

2.11. 实体

2.12. 图片标签

2.13. 相对路径

2.14. xHtml语法规范

2.15. 文本标签

2.16. 列表

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

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

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

3. 布局

3.1. 浮动

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

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

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

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

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

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

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

.clearfix:after{

display:block;

3.2. 定位

4. 课程简介

4.1. 软件的架构

4.2. 进制

4.3. 乱码的问题

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

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

5. 盒子模型

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

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

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

5.4. 盒子模型

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

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-width border-style border-color，不同的属性使用空格隔开，并且没有顺序要求

5.6. 内联元素的盒子模型

5.7. 盒模型相关的样式

5.8. 文档流

原文：https://www.cnblogs.com/Jiang-jiang936098227/p/11605440.html

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. 子元素

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

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