web网页技术学习第一阶段知识总结
时间：2022-09-14 10:30:00
在蒋先生的指导下，这10天的学习html和css一些相关内容。
第一天，我学会了介绍编写代码的软件以及如何生成html解释模板，然后学习一些html分类标签、属性和元素。
从第二天到第九天，我学习了各种重要的标签和标签CSS各种用法和风格。
在学习的后半段，我写了一个静态网页，仿照1688。具体比较如下图所示
原版：
仿写：
总体布局如下
在学习过程中，最有趣的部分是老师提供了一个关于选择器练习的网站CSS Diner - Where we feast on CSS Selectors!
用弹性盒子做骰子的四面
知识总结如下
目录
1.标签
2.属性
3.常见的语义标签
4.元素分类
5.文件路径
6.一些重要而常见的标签
6.1列表标签
6.2 a标签(超链接)
属性
跳转方式
6.3 img标签
6.4 div标签和span标签
6.5 如何查询更多标签和详细介绍？
1.CSS简介
如何使用css样式（3种）
2.CSS基础语法
注释语句
CSS基础语法
3.各种选择器
3.1基础选择器
3.2符合选择器
3.3关系选择器
3.4属性选择器
3.5伪类选择器
3.6伪元素选择器
4.伪类
5.单位
5.1长度单位
5.2比例单位 百分比%
5.3 颜色单位
6.CSS三大特性
层叠性
优先级(权重)
继承性
7.文档流
文档流概念
溢出
8.盒模型
盒模的含义
盒模型的分类
9.默认风格的处理和布局技巧
小技巧
其他常用的css属性
10.元素的转换
11.元素的浮动
浮动的简介
浮动元素的特点
12.元素的溢出
如何解决溢出
13.高度塌陷问题和外边距折叠问题
13.1浮动带来的问题——高度塌陷
13.2外边距折叠问题
13.3最终解决方案
14.定位
relative（相对定位）
absolute（绝对定位）
固定定位
粘滞定位
15.Z-index
16.target伪元素
17.元素的背景属性
1、backgroud-color 设置背景颜色
2、backgroud-image 设置背景图片
3、backgroud-repeat用于设置背景的重复方式
4、background-position 用来设置背景图片的位置
5、background-clip 设置背景的范围
6、background-size 设置背景图片的大小
18.表格和表单
表格
表单
19.弹性盒子
弹性容器的css属性
20.过渡和动画
过渡（transition）
动画animation
1.标签
标签具体在html中的变现形式 由 < > 括起来的对象 比如: html head body，通常是成对出现的。成对出现的叫做双标签，单个出现的标签（即没有结束标签的）称为单标签或者空标签。
<开始标签>内容部分
标签允许嵌套，同时每一个标签都具备其对应含义，我们也会将标签称作为元素。
2.属性
属性的含义：属性是额外的对标签进行描述的信息。
属性的格式：key=value 键值对的形式，少部分情况下格式只有key没有value值 它的值是逻辑值 true 或者 false。
一个标签是可以拥有多个属性的, 多个属性之间通过空格分隔，属性是写在开始标签的<>中。
属性的分类：全局属性、局部属性
常见的全局属性: id class style hidden等
3.常见的语义化标签
标题标签: h1-h6
标题有6个等级,通常是使用前三个就足够了
便于搜索引擎检索,以及爬虫搜索
段落标签: p标签：表示文档内容部分
斜体标签: i标签：表示内容重要,不同
em标签：表示语义强调: 语调加重 斜体
b标签：表示粗体
strong标签：粗体，强调重要内容
blockquote 长引用
表示引用的标签:q标签
段引用 通常浏览器会自动高加上引号
下标标签: sub
上标标签: sup
删除线: del
插入线: ins
空标签:
br 换行标签
hr 水平线
Document
标题标签h1
标题标签h3
这里是p标签显示的内容
i标签:斜体标签
em标签:语调加重斜体
b标签:表示粗体
strong标签:粗体，强调重要内容
blockquote长引用:表示引用
q标签:段引用
下标标签
上标标签
删除线
下面这个是水平线
4.元素的分类
块元素：独占父元素一行、可以嵌套任何类型元素、可以设置宽高（默认父元素宽度）；
行内元素：行内元素会在一行排不下时进行换行，不能设置宽高，宽高由内容决定，不会嵌套块级元素，大多为文本或者其他行内元素；
行内块元素：不会独占一行，可以设置宽高
容易出现的问题：写了块元素但是不显示这个内容
解决：块元素高度为0，没有内容
5.文件路径
分为绝对路径和相对路径
绝对路径：
与当前的文件没有联系，不是根据当前该文件所处的位置去访问对应的资源。
/ 根目录下去寻找资源，该方式是绝对路径
相对路径：
从当前文件触发去寻找其他的资源，当前的位置为中心
./ 在当前目录下的资源，如果访问同级目录资源，可以省略
../ 在上级目录下的资源
../../上两级目录下的资源
6.一些重要且常见的标签
6.1列表标签
列表的种类：有序列表，无序列表，定义列表
（以下演示图片中的颜色框线只是为了展示不同标签的所属区域）
有序列表：使用ol标签来创建的，列表中的每一项是通过li标签来代表。默认是自带序号12345等
- 内容1
- 内容2
- 内容3
- 内容4
- 内容5
- 内容6
无序列表：使用ul标签来创建的，它是无序的，没有顺序标号；无序列表中的每一项也是通过li标签来代表的。
- 内容1
- 内容2
- 内容3
- 内容4
- 内容5
- 内容6
定义列表：使用dl标签来创建，使用dt来表示定义的内容，即小标题；用dd标签来解释小标题的内容。
- 内容内容
- 解释解释介绍介绍
列表标签总结：
ul和ol都是块级元素，通常作为布局容器使用；
ul和ol的子项应该都是li元素；
li元素是块级元素，可以嵌套任何其他元素。
6.2 a标签（超链接）
超链接就是让我们从一个页面跳转到其他页面，将各个单独的网页连接起来（进行关联）。
html中使用a标签来定义超链接，a标签是一个行内元素。
注意：a标签较为特殊，a标签中可以嵌套除了自身以外的任何元素。
作用：可以访问到外部网络的资源；可以访问本地网页资源；可以作为锚点，在当前页面中指定定位。
属性
href 指定跳转的目标资源路径
- 值可以是外部网站地址 - 值可以是内部网页的地址
target 定义新网页的打开方式
-
_blank 在一个新窗口中打开页面
-
_self（默认值） 在当前页面中打开该页面
跳转方式
①通过href属性跳转到外部网络资源
②通过href属性跳转到内部，本地的网络资源
③锚点跳转：通过超链接跳转到当前页面的指定位置
配合ID属性，进行跳转，在指定元素的位置设置id值，通过href属性定位到该id值所在的元素
- 定义列表
- 这是定义列表的定义
④特殊情况：a标签占位，防止重刷页面
6.3 img标签
img标签的含义：用于渲染图片资源的标签，img元素是行内块元素（替换元素），空标签（没有结束标记）。
img标签的属性
src：指定外部的图片资源路径，或者本地图片资源路径
alt：对图片额外信息的描述，方便seo检索到该图片；当图片无法加载时，显示alt后信息，提示用于该图片的大致内容。
width：设置图片的宽度，单位px
hight：设置图片的高度，单位px
面试时比较容易提出的相关问题：href和src的区别
相同点：href和src都是指向外部资源地址或者本地资源地址
不同点：
href属性
①通过该属性去关联另一份外部资源文件；
②如果被关联的资源文件，在页面渲染时需要用到该资源中的内容时，它会下载该资源
③如果需要下载资源文件内容时，并行下载的方式，不会阻塞页面的渲染
src属性
①通过该属性去访问到对应的外部资源，并替换掉该标签的内容。
②src属性肯定会下载对应路径的资源；
③src的下载不是采用并行下载的，在页面渲染时如果遇到src，那么它会将该资源全部下载完毕且解析后才会继续渲染页面后续的内容。
src会阻塞页面的渲染
6.4 div标签和span标签
含义/特点
div标签是（典型的）块级元素，可以嵌套任何元素，具备块级元素的特征，div没有任何的语义，通常作为页面布局的容器使用。
span标签是（典型的）行内元素，具备行内元素的特征，通常用于存放文本，其他的行内元素，span没有任何语义，也可以作为页面的行内容器使用。
6.5 如何查询更多的标签以及详细介绍的内容
国内www.w3schools.cn
国外www.w3schools.com/default.asp
css相关的内容
1.CSS简介
CSS（层叠样式表）：主要用于设置网页整体的布局，以及元素的样式设置，负责网页的美观。
如何使用css样式（3种）
行内样式
通过每一个元素都具备style属性，通过该属性可以设置元素的相关样式。
缺点：复用性不高、样式更新麻烦；不符合网页的标准（因为html是属于结构文件，负责的网页的结构）
内联样式
通过style标签，在html中设置当前网页所需要的css样式内容，style标签不是用户所见的内容，通常放在head标签中。
Document
缺点：复用性不高，还是存在模块没有分离，相互耦合，并不独立。
外部样式/外联样式
将css的内容保存为一份独立的文件，该文件可以被任何的页面进行引用。在html中通过link标签去引入外部样式文件。
Document
2.CSS基础语法
注释语句
不会影响代码的执行，只是为了阅读或者调试，不支持注释嵌套
CSS基础语法
css主要是2部分组成：选择器 声明块
选择器{
声明块
key:value;
}
选择器：通过选择器可以选中页面的制定元素
声明块：通过声明块来制定要为元素设置样式
3.各种选择器
3.1基础选择器
-
元素选择器 通过元素的名字去选择对应的元素，如div span p ul等等
-
id选择器 语法#id值，每一个元素都具备id属性，id值是唯一的
-
类选择器 语法.类名，每一个元素都具备class属性，类名是可以重复使用的
-
通配符选择器 语法：* 选中页面中所有的元素
3.2符合选择器
是由两个或多个基础选择器组成的
复合选择器分为两种类型：
交集选择器：选择器1选择器2选择器3（顺序不能更改）
- 被选中的元素需要满足所有的选择器条件，才会被选中
并集选择器：选择器1，选择器2，选择器3
-
被选中的元素只需要满足其中一个选择器条件，就会被选中
3.3关系选择器
子代选择器
选择器1（父）＞选择器2（子）{声明块}
后代选择器
选择器1（祖先） 选择器2（后代）
span1
span2
p元素
兄弟选择器
选择器1+选择器2 选中某个元素后的第一个兄弟元素
选择器1~选择器2 选中某个元素后的所有的兄弟元素
3.4属性选择器
通过元素的属性值来选择对应的元素
title属性 全局属性 额外对该元素的描述信息
[属性名] 只要拥有该属性的元素都会被选中
[属性名=值] 只要拥有该属性，并且值是一样的
[属性名^=值] 拥有该属性，并且值是以某些字符开头的
[属性名$=值] 拥有该属性，并且值是以某些字符结尾的
[属性名*=值] 拥有该属性，并且值里面包含特定的字符
1111
22222
3333
加粗加粗
3.5伪类选择器
伪类：不存在的类，假的
在css中可以将伪类分为两种：
- 结构型伪类 （html元素结构有关）
- 动态伪类（用户交互有关）
伪类选择器的语法： :伪类名
注意：通常情况下，伪类选择器不会单独使用会和其他选择器配合使用，因为这样没意义
常见的结构伪类：
- first-child 父元素下的第一个子元素
- last-child 父元素下的最后一个子元素
- nth-child 父元素下任意的顺序子元素
注意:以上三个伪类，顺序的排列不是某个类型之间的排列，是将父元素下的所有不同类型的子元素进行排列的
:first-of-type
:last-of-type
:nth-of-type()
这三个伪类就是在同类型之间进行排序
3.6伪元素选择器
表示页面中一些特殊的元素，这些元素并不是常规的标签元素，或者元素中特别的位置等。
伪元素通常使用 ：：开头
::first-letter 表示第一个字母(可以用来设置首字变大小颜色)
::first-line 表示第一行文字
::selection 表示被选中的内容信息
::before 元素最开始的位置
::after 元素结束的位置
注意：以上两个伪元素，单独使用没有任何效果
必须配合content属性使用
4.伪类
伪类，是不存在的类别，在css中可以将伪类分为两个方向
结构伪类（html元素结构有关）
动态伪类（用户交互有关）
动态伪类（常用）：
link 表示未被访问过的超链接（只能用于a标签）
visited 表示已经被访问过的超链接（只能用于a标签）
active 表示被用户点击的元素（用于任何元素）
hover 鼠标移入到某个元素（用于任何元素）
百度
随便啥 没连接只有颜色
这里是一个div
这是div2号
5.单位
css中的单位，是针对不同的css属性去设置对应的值。
css单位有几个比较重要的单位：
5.1长度单位
-
px
-
px是网页构建使用最频繁的单位，也是一个绝对单位
-
屏幕（显示器）实际上就是由一个一个的小店（像素点）构成的；
-
不同屏幕的像素大小是不同的，有微小的差异，像素越小的屏幕显示越清晰。
-
同样的200px在不同的设备下显示的效果可能会有微小的差异
-
-
em
-
em是相对单位，是相对于其父元素，在font-size中设置的字体大小为基准
-
如果父元素的font-size值设置的是16px，那么1em=16px；
-
-
rem
-
rem是相对单位，相对于根元素font-size中设置的字体大小为基准
-
根元素 font-size 20px 那么1rem=20px
-
-
vh和vm
-
vh和vm都是相对单位，相对于视口大小，屏幕设备可视区域，
-
比如：视口宽度高度为 1024*700，则1vm表示视扣宽度的1%，1vh表示视口高度的1%。
-