# HTML+CSS总结

**Repository Path**: weiaigewang/static-summary

## Basic Information

- **Project Name**: HTML+CSS总结
- **Description**: 静态页面布局和样式总结以及静态网站页面的收集
- **Primary Language**: HTML/CSS
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-04-05
- **Last Updated**: 2022-06-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# LoginPage

## 一、HTML基础

### 1、meta标签种类
meta标签的属性：`name`和`http-equiv`
```html
<!-- 移动端显示网页-->
<meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
<!-- 用以说明生成工具（如Microsoft FrontPage 4.0）等； -->
<meta name="generator" content=""/>
<!-- 向搜索引擎说明你的网页的关键词； -->
<meta name="keywords" content="">
<!-- 告诉搜索引擎你的站点的主要内容； -->
<meta name="description" content=""/>
<!-- 告诉搜索引擎你的站点的制作的作者； -->
<meta name="author" content="你的姓名"/>

<meta name="robots" content="all|none|index|noindex|follow|nofollow">
<!-- 主页制作所使用的文字以及语言 -->
<meta http-equiv="Content-Type" content="text/html;charset=gb_2312-80"/>
<meta http-equiv="Content-Language" content="zh-CN"/>
```
## 2、dns缓存
```html
<!-- 用meta信息来告知浏览器, 当前页面要做DNS预解析 -->
<meta http-equiv="x-dns-pretech-control" content="on"/>
<!-- 禁止隐式的 DNS Prefetch，可以使用以下的标签： -->
<meta http-equiv="x-dns-pretech-control" content="off" />
<title>html基础</title>
<!-- 提示浏览器进行dns预解析 -->
<link rel="dns-pretch" href="www.baidu.com"/>
```
## 3、prefetch和preload,prerender
- 1、`preload`:通常在页面中，我们需要加载一些脚本和样式，而使用 preload 可以对当前页面所需的脚本、样式等资源进行预加载，而无需等到解析到 script 和 link 标签时才进行加载。
- 2、`preload`: prefetch 不会像 preload 一样，在页面渲染的时候加载资源，而是利用浏览器空闲时间来下载。
```html
<link rel="prefetch" href="http://www.example.com/"/>
<!-- 是一个重量级的选项，它可以让浏览器提前加载指定页面的所有资源。 -->
<link rel="prerender" href="http://www.example.com/">
```
- 3、`subresource` 可以用来指定资源是最高优先级的。
  比如，在Chrome和Opera中我们可以加上下面的代码：
```html
<link rel="subresource" href="styles.css"/>
```

##

##

##

##