Web基础总结
前言
HTML 定义网页的内容
CSS 规定网页的布局
JavaScript 实现网页的逻辑
底层的HTTP、TCP/IP等
HTML
元素和属性
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
HTML 元素语法
- HTML 元素以开始标签起始
- HTML 元素以结束标签终止
- 元素的内容是开始标签与结束标签之间的内容
- 某些 HTML 元素具有空内容（empty content）
- 空元素在开始标签中进行关闭（以开始标签的结束而结束）
- 大多数 HTML 元素可拥有属性
HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
属性总是以名称/值对的形式出现，比如：name=“value”。
属性总是在 HTML 元素的开始标签中规定。
内容元素
<!-- 使用 HTML5 doctype，不区分大小写 -->
<!DOCTYPE html>
<!-- HTML 的 lang 属性可用于网页或部分网页的语言。根据 W3C 推荐标准，应该通过 <html> 标签中的 lang 属性对每张页面中的主要语言进行声明 -->
<html lang="en">
<!-- “en”即表示english，如果是中文页面，可将其改为"zh" -->
head
包含了所有的头部标签元素。在 元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
meta
meta标签描述了一些基本的元数据。元数据不显示在页面上，但会被浏览器解析。meta 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。
声明文档使用的字符编码
<meta charset='utf-8'>
Charset选项：ISO-8859-1（英文）、BIG5、UTF-8、SHIFT-Jis、Euc、Koi8-2、us-ascii， x-mac-roman， iso-8859-2， x-mac-ce， iso-2022-jp， x-sjis， x-euc-jp，euc-kr， iso-2022-kr， gb2312， gb_2312-80， x-euc-tw， x-cns11643-1，x-cns11643-2等字符集；Content-Language的Content还可以是：EN、FR等语言代码。
定义搜索引擎的关键词
每个网页应具有描述该网页内容的一组唯一的关键字。使用人们可能会搜索，并准确描述网页上所提供信息的描述性和代表性关键字及短语。标记内容太短，则搜索引擎可能不会认为这些内容相关。另外标记不应超过 874 个字符。
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
页面描述
描述标签不应该超过150个字符，且能准确反映网页内容
<meta name="description" content="150 words"/>
刷新和重定向
让网页多长时间（秒）刷新自己，或在多长时间后让网页自动链接到其它网页。
如果加url,则会重定向到指定网页（搜索引擎能够自动检测，也很容易被引擎视作误导而受到惩罚）。
<!-- 每30秒钟刷新当前页面 -->
<meta http-equiv="refresh" content="30">
<meta http-equiv="refresh" content="0;url=" />
网页作者
<meta name="author" content="name, email@gmail.com"/>
搜索引擎索引方式
robotterms是一组使用逗号(,)分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。确保正确使用nofollow和noindex属性值。
<meta name="robots" content="index,follow" />
all：文件将被检索，且页面上的链接可以被查询；
none：文件将不被检索，且页面上的链接不可以被查询；
index：文件将被检索；
follow：页面上的链接可以被查询；
noindex：文件将不被检索；
nofollow：页面上的链接不可以被查询。
移动设备
viewport：能优化移动浏览器的显示。如果不是响应式网站，不要使用initial-scale或者禁用缩放。
大部分4.7-5寸设备的viewport宽设为360px；5.5寸设备设为400px；iphone6设为375px；ipone6 plus设为414px。
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 -->
width：宽度（数值 / device-width）（范围从200 到10,000，默认为980 像素）
height：高度（数值 / device-height）（范围从223 到10,000）
initial-scale：初始的缩放比例 （范围从>0 到10）
minimum-scale：允许用户缩放到的最小比例
maximum-scale：允许用户缩放到的最大比例
user-scalable：用户是否可以手动缩 (no,yes)
minimal-ui：可以在页面加载时最小化上下状态栏。（已弃用）
注：很多人使用initial-scale=1到非响应式网站上，这会让网站以100%宽度渲染，用户需要手动移动页面或者缩放。如果和initial-scale=1同时使用user-scalable=no或maximum-scale=1，则用户将不能放大/缩小网页来看到全部的内容。
title
标题
base
标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接
<head>
<base href="http://www.runoob.com/images/" target="_blank">
</head>
在一个文档中，最多能使用一个 元素。 标签必须位于 元素内部。
link
link标签定义文档与外部资源的关系。
link元素时空元素，它仅包含属性。此元素只能存在于head部分，不过它可出现任何次数。
link标签中的rel属性定义了当前文档与被链接文档之间的关系。常见的stylesheet指的是定义一个外部加载样式表(css)。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
注： link 元素是空元素，它仅包含属性。此元素只能存在于 head 部分，不过它可出现任何次数。
body
结构性元素：主要负责web上下文结构的定义
section:在web页面应用中，该元素也可以用于区域的章节描述。
header:页面主题上的头部，header元素往往在一对body元素中。
footer:页面的底部(页脚)，通常会标出网站的相关信息。
nav:专门用于菜单导航，链接导航的元素，是navigator的缩写。
article:用于表现一片文章的主体内容，一般为文字集中显示的区域。
块级性元素：主要完成web页面区域的划分，确保内容的有效分割
aside:用于表达注记、贴士、侧边栏、摘要、插入的引用等作为补充主体的内容。
figure:对多个元素进行组合并展示的元素，通常与ficaption联合使用。
code:表示一段代码。
dialog:用于表达人与人之间的对话，该元素包含dt和dd这两个组合元素，dt用于表示说话者,而dd用来表示说话内容。
行内语义性元素：主要完成web页面具体内容的引用和描述，是丰富内容展示的基础。
meter:表示特定范围内的数值，可用于工资、数量、百分比等。
time:表示时间值。
progress:用来表示进度条，可通过对其max、min、step等属性进行控制，完成对进度的表示和监听。
video:视频元素，用于支持和实现视频文件的直接播放，支持缓冲预载和多种视频媒体格式。
audio:音频元素，用于支持和实现音频文件的直接播放，支持缓冲预载和多种音频媒体格式。
交互性元素：功能性的内容表达，会有一定的内容和数据的关联，是各种事件的基础。
details:用来表示一段具体的内容，但是内容默认可能不显示，通过某种手段(如单击)与legend交互才会显示出来。
datagrid:用来控制客户端数据与显示，可以由动态脚本及时更新。
menu:主要用于交互菜单(曾被废弃又被重新启用的元素)。
command:用来处理命令按钮。
标题
hgroup 标签用于对网页或区段（section）的标题进行组合。
标题字标签，标题字根据字号分为6级，分别用h1~h6来表示，字号的大小默认随数字增大而递减，标题字的大小可以使用CSS修改。
n取值为1~6，默认情况下，标题字相对其父窗口居左对齐，要修改水平对齐方式，可以通过align属性(但HTML5已经不再支持改属性了)，另外一种是使用CSS，建议使用CSS样式。
<hn>标题字</hn>
<hgroup>
<h1>标题1</h1>
<h2>标题2</h2>
</hgroup>
段落与换行标签
将标签对之间的内容创建为一个段落。生成的段落默认与上下文有一空行的间隔，这是段落的默认样式决定的，默认情况下，段落存在16px的上外边距和下外边距，可以通过margin:0样式代码来重置这个默认外边距，默认情况下段落相对于其父窗口居左对齐，要修改水平对齐样式，有两种方法，一种是使用标签的align属性(但HTML5已经不再支持改属性了)，另外一种是使用CSS，建议使用CSS样式。<p>段落内容</p>
trong标签，过预期的加重来强调文本
<strong>文本</strong>
em标签，也是具有强调意义的标签，同时在样式上会显示倾斜效果
<em>文本</em>
span标签，是一个装饰性标签，通常用于设置文本的视觉差异，例如某些关键字需要区别对待时，或者搜索关键字标红，都可以使用，设置语法如下：
<span>文本内容</span>
空格和特殊字符的输入，在浏览器中多个空格只会保留一个，所以如果想要输入多个空格，可以输入代码：
需要注意的是，默认情况下  ；在不同浏览器中显示的宽度是不一样的，比如在IE浏览器中4个空格等于1个汉字，而在chrome中有的是两个等于一个汉字，在实际应用中，最好用CSS样式来生成空格，比如段首的缩进空格，最好使用text-indent样式属性来设置。
特殊字符的输入，在HTML有一些特殊字符需要使用
&实体名称;
超链接
<a href="这里写链接地址" title="1">1</a>
表单元素
功能元素
figure元素
<figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。
figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。
figcaption元素为figure元素组添加标题。
<figure>
<figcaption>标题</figcaption>
<p>内容
</figure>
video元素
<video> 标签定义视频，比如电影片段或其他视频流。
<video src="movie.ogg" controls="controls">
您的浏览器不支持 video 标签。
</video>
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出现该属性，则视频在就绪后马上播放。 |
| controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮。 |
| height | pixels | 设置视频播放器的高度。 |
| loop | loop | 如果出现该属性，则当媒介文件完成播放后再次开始播放。 |
| muted | muted | 规定视频的音频输出应该被静音。 |
| poster | URL | 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。 |
| preload | preload | 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。 |
| src | url | 要播放的视频的 URL。 |
| width | pixels | 设置视频播放器的宽度。 |
audio元素
<audio> 标签定义声音，比如音乐或其他音频流。
<audio src="someaudio.wav">
您的浏览器不支持 audio 标签。
</audio>
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出现该属性，则音频在就绪后马上播放。 |
| controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮。 |
| loop | loop | 如果出现该属性，则每当音频结束时重新开始播放。 |
| muted | muted | 规定视频输出应该被静音。 |
| preload | preload | 如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。 |
| src | url | 要播放的音频的 URL。 |
source元素
<source> 标签为媒介元素（比如 和 ）定义媒介资源。<source> 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
embed元素
用来插入各种多媒体，格式可以是wav、mp3等、
canvas元素
表示图形，如图表和其他图像。这个元素本身没有行为，仅提供一块画布，但它把一个绘图API展现给客户端JavaScript，以使脚本能够把想绘制的东西绘制到这块画布上。
progress元素
progress 标签定义运行中的进度（进程）。
可以使用 progress 标签来显示 JavaScript 中耗费时间的函数的进度。
<progress value="68" max="100"></progress>
<br/>
<progress></progress>
mark元素
高亮显示文本
<mark>1</mark>！
ruby、rt、rp元素
ruby 标签定义 ruby 注释（中文注音或字符）。 ruby标签与rt标签一同使用。ruby 元素由一个或多个字符（需要一个解释/发音）和一个提供该信息的 rt 元素组成，还包括可选的 rp 元素，定义当浏览器不支持 “ruby” 元素时显示的内容。
<ruby>中<rt>zhong</rt></ruby>
details、summary元素
details用于描述文档或文档某个部分的细节。
summary可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details。
<details open="open">
<summary>Copyright 2011.</summary>
<p>All pages and graphics on this web site are the property of W3School.</p>
</details>
datalist元素
datalist标签定义选项列表。常与 input 元素配合使用，来定义 input 可能的值。
datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。可以使用 input 元素的 list 属性来绑定 datalist。
<datalist id="cars">
<option value="BMW"/>
<option value="Ford"/>
<option value="Volvo"/>
</datalist>
其他元素
分组元素
<p>的实际作用就是将内部包含的文本形成一个段落；而段落和段落之间保持一定量的空隙。 前文段落与换行
<blockquote>引用大段他出内容
<blockquote>这是一个大段引自他出内容</blockquote>
<blockquote>这是另一个大段引自他出内容</blockquote>
<blockquote>元素实际作用除了和<p>元素一样，有段落空隙的功能，还包含了首尾缩进的功能。语义上表示，大段的引用他出的内容。
<pre>展现格式化内容，实际作用就是编辑器怎么排版的，原封不动的展现出来。当然，这种只适合简单的排版，复杂的排版就无法满足要求了。
<hr>添加分隔，<hr>元素实际作用就是添加一条分割线，意图呈现上下文主题的分割。
<ul><li>添加无序列表
<ul>
<li></li>
</ul>
<ul>元素表示无序列表，而<li>元素则是内部的列表项。
<ol><li> 添加有序列表
<ol>
<li></li>
</ol>
<ol>元素表示有序列表，而<li>元素则是内部的列表项。<ol>元素目前支持三种属性。
<dl><dt><dd> 生成说明列表
<dl>
<dt>这是一份文件</dt>
<dd>这里是这份文件的详细内容 1</dd>
<dd>这里是这份文件的详细内容 2</dd>
</dl>
<dt>或<dd>并非都必须出现。
<figure>和<figcaption>元素插入图片和图注
<figure>
<img src="img.png" alt="#">
<figcaption>图片1</figcaption>
</figure>
建议加上alt属性，figure之外的img元素必须有alt属性，但如果只是展示图片而不需要被辅助技术识别时可以使用空的alt属性。
hgroup元素用于将多个标题（主标题和副标题或子标题）组成一个标题组。
<header>
<hgroup>
<h1></h1>
<h2></h2>
</hgroup>
</header>
页面交互元素
details元素提供一种代替JavaScript的方法，它主要是提供一个快捷、简化的方法， 将页面上的部分区域进行展示或收缩。即details元素用来描述文档或文档某个部分的细节 。
details元素经常与 summary元素配合使用可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details。
当单击summary元素中的内容文字时，details元素中的其他从属元素将会展开或收缩。如果没有找到summary元素，浏览器将会提供自己默认的用来定义带有记号的文本，默认情况下,mark标签的背景颜色是黄色，可以通过修改mark的背景属性来修改高亮显示的背景色。
<details>
<summary></summary>
<ul>
<li></li>
</ul>
</details>
语义元素
time元素，用来定义公里的时间(24小时制)或日期，该标签能够以机器可读的方式对日期和时间进行编码，比如用户代理能够把生日提醒或排定的事件添加到用户日程表中。该标签有两个属性：
datetime属性：定义标签的日期和时间，如果未定义该属性，则必须在标签的内容中规定日期或时间
pubdate属性：指示time元素中的日期/时间是文档的发布日期，可选值为pubdate
**注意：**time元素中如果没有设置datetime属性，则必须在标签的内容中规定日期或时间。
mark元素的主要功能是在文本中高亮某些字符。
<mark>文本</mark>
cite元素可以创建一个引用标记。
全局属性
全局属性指在任何元素中都可以使用的属性，HTML5常用的全局属性有：draggable，hidden，spellcheck，contenteditable。
style 属性
style 属性提供了一种改变所有 HTML 元素的样式的通用方法。
样式是 HTML 4 引入的，它是一种新的首选的改变 HTML 元素样式的方式。通过 HTML 样式，能够通过使用 style 属性直接将样式添加到 HTML 元素，或者间接地在独立的样式表中（CSS 文件）进行定义。
SVG
SVG 意为可缩放矢量图形（Scalable Vector Graphics）。
SVG 使用 XML 格式定义图像。
SVG的代码可以直接嵌入到HTML页面中，或直接链接到SVG文件。
SVG 文件可通过以下标签嵌入 HTML 文档：、 或者 。
<object data="circle1.svg" type="image/svg+xml"></object>
<iframe src="circle1.svg"></iframe>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<!-- cx，cy是圆心坐标，r是半径 -->
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" />
</svg>
</body>
</html>
矩形 <rect>
圆形 <circle>
椭圆 <ellipse>
线 <line>
折线 <polyline>
多边形 <polygon>
路径 <path>
CSS
CSS选择器
CSS单位与颜色值
单位
相对单位
字体相对长度根据当前在元素或其父元素中有效的字体中的特定字符或字体属性的大小来定义长度值。
https://www.w3school.com.cn/css/css_units.asp
- em : (相对于 当前元素本身的 )字体大小 font-size 的倍数
- rem : (根元素 html 标签的) 字体大小 font-size 的倍数
- ex : x 的高度 (随 font-family , font-size 改变)
- ch : 数字 0 的宽度 (随 font-family , font-size 改变)
视窗的相对长度
- vh : 视窗高度 的 1% (百分之一)
- vw :视窗宽度 的 1%(百分之一)
- vmin : vw 和 vh 中的 较小值 (宽/高较小值的 百分之一)
- vmax : vw 和 vh 中的 较大值 (宽/高较大值的 百分之一)
百分比
绝对单位
- px : 像素
- cm : 厘米 ( 1/2.54 in , 38px)
- mm : 毫米 (1/25.4 in, 3.8px)
- in : 英寸 ( 1in = 96px ,2.54cm)
- pc : 派卡 ( 1/6 in ,12pt, 16px)
- pt : 点 (显示器上 一个个的点,1/72 in,1.3px)
1in = 96px
1in = 2.54cm
1in = 25.4mm
1in = 72pt
1in = 6pc
1pc = 12pt
角度单位
角度: deg
百分度：grads
弧度：rad
颜色
仅有 16 种颜色名被 W3C 的 HTML 4.0 标准支持，它们是：aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、yellow。
如果使用其它颜色的话，就应该使用十六进制的颜色值。
RGB 值
在 CSS 中，可以使用下面的公式将颜色指定为 RGB 值：
rgb(red, green, blue)
每个参数 (red、green 以及 blue) 定义了 0 到 255 之间的颜色强度。
HEX 值
在 CSS 中，可以使用以下格式的十六进制值指定颜色：
#rrggbb：其中 rr（红色）、gg（绿色）和 bb（蓝色）是介于 00 和 ff 之间的十六进制值（与十进制 0-255 相同）。
HSL 值
在 CSS 中，可以使用色相、饱和度和明度（HSL）来指定颜色，格式如下：
hsla(hue, saturation, lightness)
- 色相（hue）是色轮上从 0 到 360 的度数。0 是红色，120 是绿色，240 是蓝色。
- 饱和度（saturation）是一个百分比值，0％ 表示灰色阴影，而 100％ 是全色。
- 亮度（lightness）也是百分比，0％ 是黑色，50％ 是既不明也不暗，100％是白色。
CSS字体与文本、段落样式控制
字体
<style type="text/css">
/* 简写 */
.f1{
font: italic bold 36px "楷体";
/* 简写不能乱序 */
/* font-size: 100px;
font-family: 'Times New Roman', Times, serif; */
}
@font-face {
font-family: "方正舒体";/*服务器字体名称*/
src: url(../字体/FZSTK.TTF);/*调用服务器的字体*/
}
.f2{
font-family: "方正舒体";/* 设置字体样式 */
font-size: xx-large;
text-shadow: 100px 100px 1px #00FF00; #文本阴影 距x 距y 阴影厚度 颜色
}
</style>
必须写 size family
顺序 weight style size family
color 设置文本颜色
direction 设置文本方向。
letter-spacing 设置字符间距
line-height 设置行高
text-align 对齐元素中的文本
text-decoration 向文本添加修饰
text-indent 缩进元素中文本的首行
text-shadow 设置文本阴影
text-transform 控制元素中的字母
unicode-bidi
vertical-align 设置元素的垂直对齐
white-space 设置元素中空白的处理方式
word-spacing 设置字间距
line-hight： 行高
一行文字实际占有的高度。
表示方式：px，百分比，em。
百分比：参照字体大小。
em：字体的倍数。
设置行高，字号时，一般设置为偶数。这样可以保证，他们的差一定是偶数，方便计算与居中。
文本
文本溢出
overflow: hidden;
超出文本宽度溢出的隐藏。
white-space: nowrap;
不可以换行，使形成一行。
text-overflow: ellipsis;
使溢出文本隐藏的显示省略。
text-indent 文本缩进
单位：px em 百分比。
百分比是按照盒子的宽度。
px可以是负数，负数向前（左）缩进，正数为向后（右）缩进。
text-decoration 文本修饰
四个常见的样式
none 正常
下划线 underline
上划线 overline
中划线：line-through
vertical-align 对齐
top 顶部对齐
middle 中间对齐
sub 底部对齐
基线对齐 相当于四线格中的第三条线。 默认的对齐方式为基线对齐。
一般用于图片与文字的对齐。
text-shadow 属性
为文本添加阴影。
最简单的用法是只指定水平阴影（2px）和垂直阴影（2px）：
段落
段落对齐方式
text-align： 设置段落的对齐方式。
属性：
left 左对齐 默认值
center 居中对齐
right 右对齐。
设置样式与文本的行数没有关系。
背景颜色与背景图
CSS 背景属性用于定义元素的背景效果。
有如下 CSS 背景属性：
- background-color属性指定元素的背景色。
- background-image属性指定用作元素背景的图像。
默认情况下，图像会重复，以覆盖整个元素。 - background-repeat
默认情况下，background-image 属性在水平和垂直方向上都重复图像。
background-repeat: repeat-x;图像仅在水平方向重复
background-repeat: repeat-y;图像仅在垂直方向重复
background-repeat: no-repeat;背景图像只显示一次 - background-attachment属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）
- background-position定位背景图像
如需缩短代码，也可以在一个属性中指定所有背景属性。它被称为简写属性。
body {
background-color: #ffffff;
background-image: url("tree.png");
background-repeat: no-repeat;
background-position: right top;
}
body {
background: #ffffff url("tree.png") no-repeat right top;
}
边框与轮廓
边框
border 属性用于指定元素边框的样式、宽度和颜色。
border-style 属性指定要显示的边框类型。
border-style 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。
dotted - 定义点线边框
dashed - 定义虚线边框
solid - 定义实线边框
double - 定义双边框
groove - 定义 3D 坡口边框。效果取决于 border-color 值
ridge - 定义 3D 脊线边框。效果取决于 border-color 值
inset - 定义 3D inset 边框。效果取决于 border-color 值
outset - 定义 3D outset 边框。效果取决于 border-color 值
none - 定义无边框
hidden - 定义隐藏边框
border-width 属性指定四个边框的宽度。
border-color 属性用于设置四个边框的颜色。
border-radius 属性用于向元素添加圆角边框：
简写属性，width、style、color必须写
p {
border: 5px solid red;
}
轮廓
轮廓是在元素周围绘制的一条线，在边框之外，以凸显元素。
outline-style 属性指定轮廓的样式，并可设置如下值：
dotted - 定义点状的轮廓。
dashed - 定义虚线的轮廓。
solid - 定义实线的轮廓。
double - 定义双线的轮廓。
groove - 定义 3D 凹槽轮廓。
ridge - 定义 3D 凸槽轮廓。
inset - 定义 3D 凹边轮廓。
outset - 定义 3D 凸边轮廓。
none - 定义无轮廓。
hidden - 定义隐藏的轮廓。
outline-width 属性指定轮廓的宽度
outline-color 属性用于设置轮廓的颜色。
outline-offset 属性在元素的轮廓与边框之间添加空间。元素及其轮廓之间的空间是透明的。
简写属性，width、style、color必须写
p {
outline: 5px solid red;
}
定位与盒子模型
弹性盒子
渐变过渡与动画
渐变
CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。
CSS3 定义了两种类型的渐变（gradients）：
- 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
- 径向渐变（Radial Gradients）- 由它们的中心定义
线性渐变
类似Photoshop，为了创建一个线性渐变，至少需要定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，也可以设置一个起点和一个方向（或一个角度）。
方向：默认从上到下，to right、to bottom right等等
角度：xxxdeg
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
CSS 渐变还支持透明度，也可用于创建渐变效果。
如需添加透明度，我们使用 rgba() 函数来定义色标。 rgba() 函数中的最后一个参数可以是 0 到 1 的值，它定义颜色的透明度：0 表示全透明，1 表示全彩色（无透明）。
径向渐变
径向渐变由它的中心定义。为了创建一个径向渐变，必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
默认地，shape 为椭圆形，size 为最远角，position 为中心。
shape 参数定义形状。它可接受 circle 或 ellipse 值。默认值为 ellipse（椭圆）。
size 参数定义渐变的大小。它可接受四个值：
closest-side
farthest-side
closest-corner
farthest-corner
过渡
为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript，CSS 过渡允许在给定的时间内平滑地改变属性值。
过渡效果一般是由浏览器直接改变元素的CSS属性实现的。例如，如果使用:hover选择器，一旦用户将鼠标悬停在元素之上，浏览器就会应用跟选择器关联的属性。
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
div:hover {
width: 300px;
}
transition指定过渡时间，默认值为0。要添加多个样式的变换效果，添加的属性由逗号分隔。
transition-timing-function 属性规定过渡效果的速度曲线。可接受以下值：
ease - 规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）
linear - 规定从开始到结束具有相同速度的过渡效果
ease-in -规定缓慢开始的过渡效果
ease-out - 规定缓慢结束的过渡效果
ease-in-out - 规定开始和结束较慢的过渡效果
cubic-bezier(n,n,n,n) - 允许您在三次贝塞尔函数中定义自己的值
transition-delay 属性规定过渡效果的延迟（以秒计）。
动画
CSS动画本质上是增强的过渡。在如何从一种样式过渡到另一种样式的过程中，具有了更多选择、更多控制，以及更多灵活性。
通常我们会通过频繁的操作 DOM的CSS来实现视觉上的动画效果，导致js效率低的两个因素都包括在内了在频繁的操作DOM和CSS时，浏览器会不停的执行重排和重绘。用CSS3动画替代JS模拟动画的好处：
- 不占用JS主线程；
- 可以利用硬件加速；
- 浏览器可对动画做优化（元素不可见时不动画减少对FPS影响）
CSS3动画提供了2D和3D以及常规动画属性接口，它可以工作在页面的任何一个元素的任意一个属性，CSS3的动画是利用C语言编写的，它是系统层面的动画。
采用js动画还是css3动画，需要开发者根据不同的需求做出不同的抉择，但应该遵循一个基本的原则是：如果你需要做2D动画，请勿必使用CSS3的transition或animation
CSS3动画与javascript模拟动画有以下区别：
- CSS 3D动画在js中无法实现
CSS3的3D动画是CSS3中非常强大的功能，因为它的工作原理是在一个三维的空间里，因此js是无法模拟出像CSS3那样的3D动画 - CSS 2D矩阵动画效率高于js利用margin和left,top模拟的矩阵动画
CSS3的2D动画是指是2D矩阵Transform变化，js当然是不能做变形动画的。就拿坐标动画来说，使用CSS3的transform做translateXY动画比js中的position left，position right快了近700mm!而且视觉上也比js动画流畅很多。 - CSS3其它常规动画属性的效率均低于js模拟的动画
常规动画属性在这里是指：height，width,opacity,border-width,color
动画使元素逐渐从一种样式变为另一种样式。可以随意更改任意数量的 CSS 属性。如需使用 CSS 动画，您必须首先为动画指定一些关键帧。关键帧包含元素在特定时间所拥有的样式。
@keyframes 规则
如果在 @keyframes 规则中指定了 CSS 样式，动画将在特定时间逐渐从当前样式更改为新样式。要使动画生效，必须将动画绑定到某个元素。
/* 动画代码 */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* 向此元素应用动画效果 */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
animation-duration 属性定义需要多长时间才能完成动画。如果未指定 animation-duration 属性，则动画不会发生，因为默认值是 0s（0秒）。
可以用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。
@keyframes 规定动画。
animation 所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name 规定 @keyframes 动画的名称。
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function 规定动画的速度曲线。默认是 "ease"。
animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-delay 规定动画何时开始。默认是 0。
animation-iteration-count 规定动画被播放的次数。默认是 1。
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。
Java Script
原型链，面向对象，算法
DOM&BOM
网络层
http协议，通信，安全
361
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
