Go - Hello World

![dqCXJX](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/dqCXJX.jpg)

## `loading=lazy`属性

> 这是一个性能优化的措施，图片懒加载

```html
<img src="image.jpg" loading="lazy" alt="Alternative Text" />
```

## Email、tel、sms

```html
<a href="mailto:{email}?subject={subject}&body={content}"> Send us an email </a>

<a href="tel:{phone}"> Call us </a>

<a href="sms:{phone}?body={content}"> Send us a message </a>
```

## 列表`start`属性

> 使用`start`属性改变列表的初始序号

![XNg0zd](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/XNg0zd.jpg)

## meter Element

> 无需 js、css 写出 progress bar

```html
<label for="value1">Low</label>
<meter
  id="value1"
  min="0"
  max="100"
  low="30"
  high="75"
  optimum="80"
  value="25"
></meter>

<label for="value2">Medium</label>
<meter
  id="value2"
  min="0"
  max="100"
  low="30"
  high="75"
  optimum="80"
  value="50"
></meter>

<label for="value3">High</label>
<meter
  id="value3"
  min="0"
  max="100"
  low="30"
  high="75"
  optimum="80"
  value="80"
></meter>
```

![xAOKxW](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/xAOKxW.jpg)

## html 原生搜索

```html
<div class="wrapper">
  <h1>Native HTML Search</h1>

  <input list="items" />

  <datalist id="items">
    <option value="Marko Denic"></option>
    <option value="FreeCodeCamp"></option>
    <option value="FreeCodeTools"></option>
    <option value="Web Development"></option>
    <option value="Web Developer"></option>
  </datalist>
</div>
```

![KIOpYV](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/KIOpYV.jpg)

## Fieldset Element

```html
<form>
  <fieldset>
    <legend>Choose your favorite language</legend>

    <input type="radio" id="javascript" name="language" />
    <label for="javascript">JavaScript</label><br />

    <input type="radio" id="python" name="language" />
    <label for="python">Python</label><br />

    <input type="radio" id="java" name="language" />
    <label for="java">Java</label>
  </fieldset>
</form>
```

![6gS5fT](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/6gS5fT.jpg)

## Window.opener

> 用`target = "_ blank"`打开的页面允许新页面访问原始页面的`window.opener`。这可能具有安全性和性能影响。包括`rel = "noopener"或者`rel = "noreferer"`来防止这种情况。

```html
<a href="https://markodenic.com/" target="_blank" rel="noopener">
  Marko's website
</a>
```

## Base Element

> 如果需要在新标签打开所有的链接，使用`base`

```html
<head>
  <base target="_blank" />
</head>

<div class="wrapper">
  This link will be opened in a new tab: &nbsp;
  <a href="https://freecodetools.org/"> Free Code Tools </a>

  <p>
    Read more: <br /><a
      href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base"
    >
      MDN Documentation
    </a>
  </p>
</div>
```

## 去除 favicon 缓存

> 使用时间戳或者其他版本信息去除缓存，这样每次获取的 favicon 都是新的

```html
<link rel="icon" href="/favicon.ico?v=2" />
```

## 原生 sliders

```html
<label for="volume">Volume: </label>
<input type="range" id="volume" name="volume" min="0" max="20" />

<label for="result">Your choice: </label>
<input type="number" id="result" name="result" />
```

![8tZXxw](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/8tZXxw.jpg)

## html Accordion

```html
<div class="wrapper">
  <details>
    <summary>Click me to see more details</summary>

    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut eum
      perferendis eius. Adipisci velit et similique earum quas illo odio rerum
      optio, quis, expedita assumenda enim dicta aliquam porro maxime minima sed
      a ullam, aspernatur corporis.
    </p>
  </details>
</div>
```

![gqU6rS](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/gqU6rS.jpg)

## mark 标签

> 使用`mark`标签高亮文字

![USVaFH](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/USVaFH.jpg)

## `download`属性

```html
<a href="path/to/file" download> Download </a>
```

## picture 标签

```html
<picture>
  
  <source srcset="logo.webp" type="image/webp" />

  
  <img src="logo.png" alt="logo" />
</picture>
```

![XwNY7B](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/XwNY7B.jpg)

## fancy text

![FYjzyB](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/FYjzyB.png)

```html
<h1>CSS IS AWESOME</h1>

<style>
  h1 {
    background: blue url('https://picsum.photos/id/1015/200/300');
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    margin-top: 20px;
    font-size: 120px;
  }
</style>
```

## caret-color

> 改变光标颜色

![xgF4Hf](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/xgF4Hf.jpg)

## CSS only tooltips

![HoUV0U](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/HoUV0U.png)

```html
<h1>HTML/CSS tooltip</h1>

<p>
  Hover <span class="tooltip" data-tooltip="Tooltip Content">Here</span> to see
  the tooltip.
</p>

<p>
  You can also hover
  <span class="tooltip" data-tooltip="This is another Tooltip Content"
    >here</span
  >
  to see another example.
</p>

<style>
  .tooltip {
    position: relative;
    border-bottom: 1px dotted black;
  }

  /* Tooltip box */
  .tooltip:before {
    content: attr(data-tooltip);
    position: absolute;
    width: 100px;
    background-color: #062b45;
    color: #fff;
    text-align: center;
    padding: 10px;
    line-height: 1.2;
    border-radius: 6px;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.6s;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    font-size: 0.75em;
  }

  /* Tooltip arrow */
  .tooltip:after {
    content: '';
    position: absolute;
    bottom: 75%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    opacity: 0;
    transition: opacity 0.6s;
    border-color: #062b45 transparent transparent transparent;
  }

  .tooltip:hover:before,
  .tooltip:hover:after {
    opacity: 1;
  }
</style>
```

一些有用的Html&&css&&javascript Tips


CSS Filters 是一种 CSS3 功能，它允许您在 HTML 元素上应用图像效果，例如模糊、灰度、反转颜色和对比度调整等。它们类似于 Photoshop 中的滤镜，可以改变图像的外观和感觉。

CSS Filters 可以使用以下函数来定义：

-blur()：使图像变模糊，可以指定模糊的半径，值越大，图像越模糊。
-brightness()：调整图像的亮度，值越大，图像越亮。
-contrast()：调整图像的对比度，值越大，图像的对比度越高。
-drop-shadow()：在图像周围创建一个阴影效果。
-grayscale()：将图像转换为灰度图像，值为 100% 时完全转换。
-hue-rotate()：旋转图像的色相，可以指定旋转的角度。
-invert()：反转图像的颜色。
-opacity()：设置图像的不透明度，值为 0 时完全透明，值为 1 时完全不透明。
-saturate()：调整图像的饱和度，值越大，图像的颜色越鲜艳。
-sepia()：将图像转换为棕褐色色调。

CSS Filters 可以应用于任何支持 CSS 样式的 HTML 元素，例如图像、文字和背景。例如，以下 CSS 代码将在图像上应用模糊和灰度效果：

```css
img {
  filter: blur(5px) grayscale(100%);
}
```

需要注意的是，CSS Filters 是一项实验性的功能，可能不被所有浏览器完全支持。在使用 CSS Filters 时，最好测试您的代码以确保其在不同浏览器和设备上的兼容性。


css - Filters


内存安全是编程语言中的一个重要概念，它指的是在程序执行过程中，确保所有内存访问都是合法的、有效的，不会导致内存泄漏、访问未初始化的内存或非法访问其他应用程序的内存等问题。Swift 是一种内存安全的语言，它通过一系列的机制来确保内存访问的安全性。

Swift 中的内存安全机制主要包括以下几个方面：

- ARC（Automatic Reference Counting，自动引用计数）：ARC 是一种自动内存管理机制，它通过对对象引用计数的跟踪来管理内存。当一个对象没有任何引用时，ARC 会自动释放这个对象所占用的内存。
- 可选类型：Swift 中的可选类型可以表示一个值存在或者不存在的状态，它可以避免空指针异常等问题。在 Swift 中，如果一个可选类型没有明确赋值，那么它的值默认为 nil。
- 访问控制：Swift 提供了访问控制机制，可以限制对某些代码的访问权限，从而防止未经授权的访问。
- 内存访问检查：Swift 对数组、字典、字符串等常用类型的访问进行了检查，避免了越界访问等问题。
- copy-on-write 语义：Swift 中的某些类型，比如数组和字典，采用了 copy-on-write 语义。当这些类型的值被复制时，实际上并不会立即进行复制，而是共享同一块内存空间。只有在其中一个值被修改时，才会进行实际的复制操作，从而避免了不必要的内存开销。

通过以上这些机制，Swift 可以保证程序在运行过程中不会出现内存泄漏、空指针异常等问题，从而提高了程序的可靠性和稳定性。


内存安全是编程语言中的一个重要概念，它指的是在程序执行过程中，确保所有内存访问都是合法的、有效的，不会导致内存泄漏、访问未初始化的内存或非法访问其他应用程序的内存等问题。Swift 是一种内存安全的语言，它通过一系列的机制来确保内存访问的安全性。

Swift - 内存安全


## 什么是 BFC

Block Formatting Context（块级格式化上下文）

> Web 页面的可视 CSS 渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域

## 布局规则

- 内部的 Box 会在垂直方向一个接一个地放置
- Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠
- 每个盒子（块盒与行盒）的 margin box 的左边，与包含块 border box 的左边相接触，即使存在浮动也是如此
- BFC 的区域不会与 float box 重叠
- BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响外面的元素。反之也是如此
- 计算 BFC 的高度时，浮动元素也参与计算

## 如何创建 BFC

- 根元素或其他包含他的元素
- 浮动元素（元素的 float 不是 none）
- 绝对定位元素（元素具有 position 为 absolute 或 fixed）
- 内联块（元素具有 display: inline-block）
- 表格单元格（元素具有 display: table-cell ，HTML 表格单元格默认属性）
- 表格标题（元素具有 display: table-caption，HTML 表格标题默认属性）
- 具有 overflow 且值不是 visible 的块元素
- 弹性盒子（flex 或 inline-flex）
- ` css display: flow-root`
- `css column-span: all`

## BFC 作用

- 利用 BFC 避免 margin 重叠
- 自适应两栏布局
- 清除浮动


css-BFC


## 通过 nvm 安装 nodejs

## 安装 nvm

```bash
curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash
```

或者

```bash
wget -qO- https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash
```

然后：

```bash
source ~/.bashrc
```

## 安装 nodejs

```bash
nvm install stable
```


安装nvm和nodejs


CSS 的 box-shadow 属性可以为元素添加一个或多个阴影效果。这个属性的值包括：

- 阴影的水平偏移量（必须指定）。
- 阴影的垂直偏移量（必须指定）。
- 阴影的模糊半径（可选）。
- 阴影的扩散半径（可选）。
- 阴影的颜色（可选）。

## 示例代码：

```css
box-shadow: 2px 2px 4px #888888;
```

这个属性指定了一个偏移量为 2px 的水平阴影，一个偏移量为 2px 的垂直阴影，一个模糊半径为 4px 的阴影，阴影的颜色为 #888888。

如果要为元素添加多个阴影，可以使用逗号分隔它们。示例代码：

```css
box-shadow: 2px 2px 4px #888888, -2px -2px 4px #333333;
```

这个属性指定了两个阴影，一个是偏移量为 2px 的水平阴影和偏移量为 2px 的垂直阴影，模糊半径为 4px，颜色为 #888888，另一个阴影是偏移量为 -2px 的水平阴影和偏移量为 -2px 的垂直阴影，模糊半径为 4px，颜色为 #333333。

还可以使用 inset 关键字指定内阴影，示例代码：

```css
box-shadow: inset 2px 2px 4px #888888;
```

这个属性指定了一个偏移量为 2px 的水平内阴影和偏移量为 2px 的垂直内阴影，模糊半径为 4px，颜色为 #888888。

除了 box-shadow，CSS 还有 text-shadow 属性，它可以为文本添加阴影效果。text-shadow 的用法和 box-shadow 很相似，只是它只能为文本添加阴影，而不能为元素添加阴影。

使用 box-shadow 属性的简单案例，实现了一个卡片效果：

![cl6sOW](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/cl6sOW.png)

HTML 代码：

```html
<div class="card">
  <h2>Card Title</h2>
  <p>Card Content</p>
</div>
```

CSS 代码：

```css
.card {
  width: 300px;
  height: 200px;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.card h2 {
  margin-top: 20px;
  text-align: center;
}

.card p {
  margin-top: 40px;
  text-align: center;
}
```

解释：

这个案例中，我们首先创建了一个 div 元素，并给它添加了一个类名为 "card"。然后，我们为这个 div 元素设置了宽度和高度，背景色和圆角属性。接着，我们使用 box-shadow 属性为这个 div 元素添加了一个阴影效果，它的偏移量为 0px 的水平阴影和偏移量为 4px 的垂直阴影，模糊半径为 10px，颜色为 rgba(0, 0, 0, 0.1)。
