前端基础知识总结(一)--html+css

目的：方便自己整体复习前端的基础知识。
资源：在鱼皮整理的前端学习路线的基础上结合自身对相关知识的掌握程度进行的总结。

HTML

HyperText Markup Language，超文本标记语言

（一）标签

HTML 标签不区分大小写

分区 div
标题 h1 ~ h6
段落 p
图像 img
列表 ul / ol
超链接 a
target="_blank"用于打开新的标签页
表单 form
表格 table
框架 iframe

（二）属性

1、基本属性：

id：为元素指定唯一的标识符。
class：为元素指定一个或多个类名，用于样式和选择器。
style：为元素添加内联样式，可以设置 CSS 属性。
title：提供额外的信息，当鼠标悬停在元素上时显示。

2、链接和超链接属性：

href：用于指定链接的目标 URL。

3、图像属性：

src：指定图像文件的路径。
alt：为图像指定替代文本，在图像无法加载时显示。

4、表单属性：

value：表单元素的值，如输入字段的默认值、复选框的选中状态等。
placeholder：在输入框中显示的提示文本。
required：标识表单元素是否为必填项。

5、列表和表格属性：

type：用于设置列表的类型，如圆点、数字等。

6、多媒体属性：

autoplay：视频或音频是否自动播放。
controls：是否显示多媒体控制条。
loop：视频或音频是否循环播放。

7、元数据属性：

http-equiv：定义与 HTTP 头部相对应的值的名称。
name 和 content：在<meta>标签中定义与页面关联的元数据。

（三）HTML5 特性

语义化标签：如<article>, <section>, <nav>, <header>, <footer>等，这些标签使得网页内容组织更加直观和有意义。有助于搜索引擎优化（SEO）和提高网站的可访问性。
增强型表单：HTML5 提供了多种新的表单输入类型，如<input type="date">, <input type="range">等；
媒体支持：HTML5 提供了播放音频和视频的标准。<audio>、<video>
Canvas 绘图：HTML5 引入了 Canvas API，允许开发者在网页上绘制图形、动画和图像。
SVG 绘图：SVG（可伸缩矢量图形）是一种使用 XML 描述 2D 图形的语言。
本地存储： Web 存储（Web Storage：localStorage、sessionStorage）和 IndexedDB。
Web Workers：它允许在后台线程中运行 JavaScript 代码，从而避免阻塞主线程并提高 Web 应用程序的响应性能。无法直接访问 DOM,更适合用于计算密集型的任务，例如数据处理、图像处理、加密解密等。

- 创建一个新的 JavaScript 文件，该文件将作为 Web Worker 线程的代码运行。

- 在 HTML 页面中使用 <script> 标签引入这个 JavaScript 文件。

- 在主线程的 JavaScript 中使用 new Worker() 创建一个新的 Web Worker 实例，并指定之前创建的 JavaScript 文件作为脚本。

CSS

层叠样式表，用于设计风格和布局

（一）css 引入方式

内联样式（Inline Styles）：通过在元素的 style 属性中设置 CSS 样式；
内部样式表（Internal Stylesheet）：在 HTML 文档的<head>部分使用<style>标签定义样式；
外部样式表（External Stylesheet）：在 HTML 文档的<head>部分使用<link>标签。
<link rel="stylesheet" type="text/css" href="styles.css">

（二）选择器

后代选择器
子元素选择器
相邻兄弟选择器
通用选择器
标签选择器
id 选择器
class 选择器
属性选择器
派生选择器
组合选择器
伪选择器
选择器优先级

1. 内联样式：直接在HTML元素中使用style属性定义的样式具有最高的优先级。

2. ID选择器：使用ID选择器定义的样式具有较高的优先级。ID选择器以#开头.

3. 类选择器、属性选择器和伪类：这些选择器具有中等的优先级。类选择器以.开头，属性选择器用于选择具有特定属性的元素，例如：input[type="text"]。伪类用于选择元素的特定状态，:hover。

4. 标签选择器和伪元素：这些选择器具有最低的优先级。标签选择器直接选择HTML元素，伪元素用于选择元素的特定部分，例如：::before 和 ::after。

当两个或多个选择器应用于同一个元素，并且具有相同的优先级时，CSS会遵循以下规则：

- 后者优先：如果两个样式规则具有相同的优先级，并且都适用于同一个元素，那么后出现的规则会覆盖先出现的规则。
- 选择器特异性（Specificity）：当多个选择器混合使用时，会计算它们的特异性。特异性是一个权重系统，用于确定哪个选择器应该优先应用。例如，ID选择器的特异性高于类选择器，类选择器的特异性高于标签选择器。
- !important规则：任何带有!important声明的样式规则都将具有最高的优先级，无论它们来自何处或具有何种特异性。但是，过度使用!important可能会导致样式表难以维护和调试，因此应谨慎使用。

（三）文档流

也被称为文档流布局或正常流，具体来说，块级元素从上到下排列，行内元素从左到右排列。文档流的底层原理基于盒模型和浮动定位。

盒模型

盒模型是指每个 HTML 元素都被看作是一个矩形盒子，包括元素的内容、内边距、边框和外边距。

content
padding
border
margin

浮动（Float）

浮动的元素脱离正常的文档流，向左或向右移动，其周围的元素会重新排列以填补其留下的空间。三个可能的值：left、right 和 none。浮动元素的特点包括：

脱离文档流：浮动元素不再占据其原始位置的空间，其他元素会填补其留下的空白。
环绕效果：文本或其他内联元素会环绕浮动元素显示。
宽度和高度：浮动元素可以设置宽度和高度，且默认情况下其宽度会尽可能小，高度由其内容决定。
影响布局：浮动元素会改变其周围元素的布局和位置。

浮动元素可能会引起一些问题，如父元素高度塌陷，可以使用清除浮动（Clearfix）的技巧，例如给父元素添加一个伪元素并设置 clear 属性，或者使用 BFC（Block Formatting Context）来包含浮动元素。

定位

static
absolute
fixed
relative
sticky

CSS 的层叠规则

来源：样式的来源决定了其优先级。样式表的来源分为五种：浏览器默认样式、用户自定义样式、外部样式表、内部样式表和内联样式。一般情况下，内联样式优先级最高，其次是内部样式表和外部样式表，最后是浏览器默认样式和用户自定义样式。
特殊性（Specificity）：特殊性是 CSS 用来确定哪个样式规则将应用于元素的一个权重系统。特殊性根据选择器类型来计算，
权重（!important）：在 CSS 中，可以使用!important 声明来覆盖其他样式规则。带有!important 的样式规则具有更高的权重，无论其来源或特殊性如何。
出现顺序：当两个样式规则具有相同的来源、特殊性和权重时，后出现的规则将覆盖先出现的规则。

BFC 和 IFC 机制

BFC（Block Formatting Context）块级元素格式化上下文和 IFC（Inline Formatting Context）内联元素的格式化上下文。形成 BFC 的条件包括

float 属性不为 none，
overflow 属性不为 visible，
display 属性为 table-cell、table-caption、inline-block、flex 或 inline-flex，
position 属性为 absolute 或 fixed，
元素为 fieldset。

（四）CSS3 新特性

选择器
边框和阴影
渐变效果
过渡和动画
2D / 3D 转换
Flex 布局
Grid 布局

flex 布局

弹性盒布局(Flexible Box Layout),使用display: flex或者display: inline-flex启用

1. flex-direction

此属性用于设置主轴的方向，即子元素的排列方向。其可能的值包括：

row：默认值，子元素从左到右水平排列。
row-reverse：子元素从右到左水平排列。
column：子元素从上到下垂直排列。
column-reverse：子元素从下到上垂直排列。

2. flex-wrap

此属性决定了子元素是否换行。其可能的值包括：

nowrap：默认值，子元素不换行，可能会缩小以适应容器。
wrap：子元素在需要时换行。
wrap-reverse：子元素在需要时换行，但换行的方向与 wrap 相反。

3. justify-content

此属性用于设置主轴上的子元素排列方式。可能的值有：

flex-start：默认值，子元素与主轴起点对齐。
flex-end：子元素与主轴终点对齐。
center：子元素在主轴上居中对齐。
space-around：子元素在主轴上均匀分布，每个子元素两侧的间隔相等。
space-between：子元素在主轴上均匀分布，首个元素与主轴起点对齐，最后一个元素与主轴终点对齐。

4. align-items

此属性用于设置交叉轴上子元素的排列方式。可能的值有：

flex-start：子元素与交叉轴起点对齐。
flex-end：子元素与交叉轴终点对齐。
center：子元素在交叉轴上居中对齐。
stretch：默认值，如果子元素未设置高度或设为 auto，将占满整个容器的高度。

5. align-content

此属性用于设置多行之间的空间分布方式。当子元素换行时，此属性才会生效。可能的值有：

flex-start：各行与交叉轴起点对齐。
flex-end：各行与交叉轴终点对齐。
center：各行在交叉轴上居中对齐。
space-around：各行在交叉轴上均匀分布，每行两侧的间隔相等。
space-between：各行在交叉轴上均匀分布，首行与交叉轴起点对齐，最后一行与交叉轴终点对齐。

6. order

此属性用于设置子元素的排列顺序。数值越小，排列越靠前；默认为 0。

7. align-self

此属性允许单个子元素有与其他子元素不同的对齐方式。其值基本与 align-items 相同，并可以覆盖 align-items 的属性值。

8. flex

flex 属性是 flex-grow 、flex-shrink、flex-basis，默认值 0 1 auto

flex-flow 属性是 flex-direction 和 flex-wrap 的简写。

flex:1;<=>1,1,auto 占据剩余空间

Grid 布局

网格布局，display: grid;,display: inline-grid;

1. 定义网格结构

grid-template-rows：定义网格的行及其大小。
grid-template-columns：定义网格的列及其大小。
repeat()：一个函数，用于简化创建重复的行或列的定义。
fr 单位：用于表示可用空间的一部分（即弹性单位），与网格容器的大小相关。

2. 网格间距

grid-row-gap：定义网格行之间的间距。
grid-column-gap：定义网格列之间的间距。
grid-gap：同时设置行和列的间距（grid-row-gap 和 grid-column-gap 的简写）。

3. 对齐:

justify-items：水平对齐网格项（网格单元格的内容）。
align-items：垂直对齐网格项（网格单元格的内容）。
justify-content：对齐整个网格的网格项（网格行或列）。
align-content：垂直对齐网格项（网格行或列）。
justify-self、align-self：用于单独控制单个网格项的对齐方式。

（五）常用 CSS

1、flex 布局居中

.flex {
  display: flex;
  align-items: center;
  justify-content: center;
}

2、将内容限制为指定的行数，超出显示...

.text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

3、禁止浏览器输入账号密码样式

4、阻止用户选中

user-select: none;

（六）其他

插件

Postcss
unocss

前端基础知识总结(一)--html+css

前端基础知识总结(一)--html+css

HTML

（一）标签

（二）属性

1、基本属性：

2、链接和超链接属性：

3、图像属性：

4、表单属性：

5、列表和表格属性：

6、多媒体属性：

7、元数据属性：

（三）HTML5 特性

CSS

（一）css 引入方式

（二）选择器

（三）文档流

盒模型

浮动（Float）

定位

CSS 的层叠规则

BFC 和 IFC 机制

（四）CSS3 新特性

flex 布局

1. flex-direction

2. flex-wrap

3. justify-content

4. align-items

5. align-content

6. order

7. align-self

8. flex

Grid 布局

1. 定义网格结构

2. 网格间距

3. 对齐:

（五） 常用 CSS

1、flex 布局居中

2、将内容限制为指定的行数，超出显示...

3、禁止浏览器输入账号密码样式

4、阻止用户选中

（六）其他

插件

（五）常用 CSS