# markdown

**Repository Path**: webchenming/markdown

## Basic Information

- **Project Name**: markdown
- **Description**: 随手记录（H5、CSS3、JS、ES6、axios、node、vue ...）
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-04-10
- **Last Updated**: 2025-11-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# HTML

## 语义化标签作用

- 标签本身直观的表达出包含的内容是什么意识
- 代码结构得到优化，方面阅读理解，提高团队协作能力
- 有利于seo引擎优化，爬虫依赖标签确定关键字的权重
- 方便其他设备解析以语义化标签来渲染页面，如：屏幕阅读器、盲人阅读器、移动设备

## defer和async区别

defer和async使用与不使用的区别

- 不使用 defer 或 async 属性的 script 标签，浏览器会**立即加载**并执行相应的脚本。它不会等待后续 HTML 文档的解析，若读取到 script 标签就会直接加载和执行 JS 代码，这样就阻塞了后续 HTML 文档的解析。
- 使用 defer 或 async 属性的 script 标签，都会造成在浏览器解决 HTML 的同时进行 JS  脚本的**异步加载**。它不会阻塞 HTML 文档的解析。

defer和async属性的区别

- 使用 async 属性会在加载完 JS 脚本之后**立即执行 JS 代码**，有可能会阻塞文档的解析。并且多个标记 async 属性的 script 标签，会造成 JS 脚本**不会按照顺序执行**。
- 使用 defer 属性会在 HTML 解析完成**之后执行 JS 代码**，并且标记多个 defer 属性的 script 标签**会按照顺序执行**。



# CSS

## CSS3新特性有哪些

新增属性选择器、结构选择器、伪元素选择器

`transform` 变形，`translate` 位移、`scale` 缩放、`rorate` 旋转、`skew` 斜切

`perspective` 透视，人眼睛看屏幕的距离，值越大越近反之越小，单位px。

`transform-style` 3D呈现，`flat` 2D空间（默认）、`preserve-3d` 3D空间

`@keyframes` 定义动画

`transition` 过渡

`linear-gradient` 渐变

`filter` 过滤

`calc` 计算函数

`border-radius` 圆角

`text-shadow` 文字阴影

...

## display的属性值及其作用

`none` 元素不显示，并且会从文档流中移除。

`block` 块级元素，默认为父元素的宽高，可以设置宽高，独占一行显示。

`inline` 行内元素，默认为内容宽度，不可设置宽高，同行显示。

`flex` 块级元素，弹性盒模型。

`grid` 块级元素，网格盒模型。

`inline-block` 行内块级元素，默认为内容宽高，可以设置宽高，同行显示有间隙。

`inline-flex` 行内跨级元素，弹性盒模型。

`inline-grid` 行内块级元素，网格盒模型。

`list-item` 块级元素，默认自带列表样式，独占一行显示。

`table` 块级元素，作为表格来显示。

`inherit` 从父级元素继承 display 属性的值。

## 隐藏元素的方法有哪些

`display` 设置该属性为`none`，渲染树不会包含该渲染对象，因此该元素不存在于文档流中。

`visibility` 设置该属性为`hidden`，元素隐藏，元素占据空间。

`opacity` 设置该属性为`0`，元素的透明的为0，因此元素隐藏，元素占据空间。

`z-index` 设置该属性为**负数**需要与定位属性配合使用，将元素层级降低，因此元素隐藏是否占据空间受定位影响。

`position` 设置该属性为`absolute`将元素定位到可视区外，因此元素隐藏，元素不占据空间。

`clip/clip-oath` 使用元素剪裁的方法实现元素的隐藏，元素占据空间。

`transform` 设置该属性为`scale(0,0)`将元素缩放为0的方法实现元素的隐藏，元素占据空间。

## display: none与visibility: hidden区别

在渲染树中的区别

- `display: none` 会让元素完全从树中消失，渲染时不会占据任何空间。
- `visibility: hidden` 不会让元素在树中消失，渲染时一直占据空间。

是否是继承属性

- `display: none` 不是继承属性，子节点会随着父节点从渲染树中消失，不可以通过修改子节点的属性显示子节点。
- `visibility: hidden` 是继承属性，子节点消失是由于继承了父节点的 `visibility: hidden` 属性，可以通过修改子节点的 `visibility: visible` 属性让子节点显示。

其他区别

- 修改常规文档流中元素的`display`属性，通常会造成文档的重排，但是修改 `visibility` 的属性只会造成文本元素的重绘。
- 若干个使用读屏器，设置 `display: none` 的内容不会被读取，设置 `visibility: hidden` 的内容会被读取。

## position属性与区别

- `static` 默认值没有定位，元素正常存在文档流中，会忽略 `top`、`bottom`、`left`、`right` 与 `z-index` 的声明，块级元素从上到小排列，行内元素从左向右排列。
- `relative` 相对定位，永远相对于自身的位置进行偏移，不会影响其他元素，元素不脱离文档流。
- `absolute` 绝对定位，相对于除 `static` 之外有定位的父级进行偏移，若父级都没有定位，则相对于文档定位，元素脱离文档流。 
- `fixed` 固定定位，指定元素相对于屏幕视口（viewport）的位置进行偏移，元素的位置在屏幕滚动时不会改变。
- `sticky` 粘性定位，基于滚动位置进行偏移，元素在滚动时跨越特定阈值前为相对定位，之后为固定定位，这个特定的阈值指得时 `top`、`right` 或 `bottom`、`left` 两个组合之一，该定位才会生效，否则其行为与相对定位相同。
- `inherit` 从父元素继承 `position` 属性的值。

##