目录
一、HTML、CSS基本知识
网页构成：
-
网页：构成网站的基本元素
-
结构：对网页元素整理和分类，写入HTML文件
-
表现：设置网页板式、颜色、大小等外观样式，写入CSS文件中
-
行为：网页模型定义及交互编写，主要为JavaScript文件
HTML（骨架）：
HTML 是用来描述网页的一种语言
-
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
-
HTML 不是一种编程语言，而是一种标记语言 (markup language)
-
标记语言是一套标记标签 (markup tag)
-
HTML 使用标记标签来描述网页
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
-
HTML 标签是由尖括号包围的关键词，比如 <html>
-
HTML 标签通常是成对出现的，比如 和
-
标签对中的第一个标签是开始标签，第二个标签是结束标签
-
开始和结束标签也被称为开放标签和闭合标签
HTML 文档 = 网页
-
HTML 文档描述网页
-
HTML 文档包含 HTML 标签和纯文本
-
HTML 文档也被称为网页
-
Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：
-
例：
<html> <body> <h1>我的第一个标题</h1> <p>我的第一个段落。</p> </body> </html>
-
<html>与</html>之间的文本描述网页 -
<body>与</body>之间的文本是可见的页面内容 -
<h1>与</h1>之间的文本被显示为标题 -
<p>与</p>之间的文本被显示为段落
标签与段落：
-
<h1>一级标题</h1> <p>我是一个段落标签</p> <h2>文字加粗一行显</h2> <br/>换行标签 <h3>字号依次减</h3> <hr/>分割线标签 <h4>加粗随之变</h4> <h5>语法规范后</h5> <h6>效果刷新见</h6>
语义 文本格式化标签 加粗 <strong></strong>或<b></b>倾斜 <em></em>或<i></i>删除线 <del></del>或<s></s>下划线 <u></u>（不建议使用，使用style样式代替）大号字 <big>小号字 <small>下标字 <sub>上标字 <sup>插入字 <ins>
引用和术语定义：
-
标签 描述 <abbr>缩写 <acronym>首字母缩写 <address>地址 <bdo>文字方向 <blockquote>长的引用 <q>短的引用 <cite>引用、引证 <dfn>定义一个定义项目 -
内联元素：内联元素在显示时通常不会以新行开始，例：
<b>, <td>, <a>, <img>
分区与跨度：
-
<div>元素是块级元素，浏览器会在其前后显示拆行;<span>是内联元素,可用作文本的容器。 -
<div> </div>和<span></span>是没有语义的，它们就是一个盒子，用来装内容（图片，文字）的。如果与 CSS 一同使用，<div>元素可用于对大的内容块设置样式属性，<span>元素可用于为部分文本设置样式属性 -
div是大盒子,独占一行，定义文档中的分区或节；span是小盒子,多行显示，用来组合文档中的行内元
-
<div>元素的另一个常见的用途是文档布局，它取代了使用表格定义布局的老式方法。使用<table>元素进行文档布局不是表格的正确用法，<table>元素的作用是显示表格化的数据。 -
注释：
<!--“开头，结束”-->。（ctrl +/） -
颜色：十六进制符号：最小值：#00，最大值：#FF
列表和表单标签：
-
无序列表：无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
-
无序列表始于
<ul>标签，每个列表项始于<li>。每个列表项为并列关系。 -
有序列表也是一列项目，列表项目使用数字进行标记。
-
有序列表始于
<ol>标签。每个列表项始于<li>标签。 -
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
-
自定义列表以
<dl>标签开始。每个自定义列表项以<dt>开始。每个自定义列表项的定义以<dd>开始。<dt>与<dd>为并列关系。 -
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
链接：<a></a>
-
通过使用 href 属性 ——创建指向另一个文档的链接
-
通过使用 name 属性 —— 创建文档内的书签
-
例如：
<a href="http://www.w3school.com.cn/">Visit W3School</a>
结果显示为：Visit W3School
-
"链接文本" 不必一定是文本，图片或其他 HTML 元素都可以成为链接
-
target属性：定义被链接的文档在何处显示
例：target="_blank" 在新窗口打开文档
-
name属性：name 属性规定锚（anchor）的名称。可以使用 name 属性创建 HTML 页面中的书签。书签不会以任何特殊方式显示，它对读者是不可见的。当使用命名锚时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。
-
注：创建邮箱链接时，应用 %20 来替换单词之间的空格
图像标签<img>和源属性src：
-
<img>只包含属性，没有闭合标签 -
要在页面上显示图像，你需要使用源属性src。src 指 "source"。源属性的值是图像的 URL 地址
-
定义图像的语法是：<img src="url" />
例如：<p> 一幅图像： <img src="/i/eg_mouse.jpg" width="128" height="128" /> </p>
-
替换文本属性alt:alt 属性用来为图像定义一串预备的可替换的文本。当浏览器无法载入图像时，替换文本属性可告诉读者他们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。
-
页面背景图片：写在
<body>中，<body background="url"> -
设置图像对齐方式：align="..." top/middle/bottom,bottom是默认对齐方式
表单标签：
-
<form></form>:form标签可以把浏览器中浏览者输入的数据传给服务端，这样服务器就可以处理浏览器输入的数据，form标签常用的属性有三个，分别是method、action、name。method指浏览器提交到服务器的方式，常用的方式有post、get两种，action表示数据被传送到的地方，可以理解为后台处理这些数据的地方，name指定表单的名称，由程序员自行定义其值。 -
input标签：包含在
<form></form>中,<input type="属性值"/>type属性值设置不同的属性值用来指定不同控件类型。 -
select标签：下拉列表。属性multiple：可以在下拉列表中选择多个选项。option表示下拉列表中的每一项，value属性表示向服务器提交的值，而标签之间的内容表示在页面显示的值。selected属性：当其值为selected时候表示默认选中
类：
-
分类块级元素：HTML
<div>元素是块级元素,它能够用作其他 HTML 元素的容器。设置<div>元素的类，使我们能够为相同的<div>元素设置相同的类 -
分类行内元素：HTML
<span>元素是行内元素，能够用作文本的容器。设置
<span>元素的类，能够为相同的<span>元素设置相同的样式 -
语法：.后跟类名，{}中定义元素样式
id属性：
-
id属性指定 HTML 元素的唯一 ID。id属性的值在 HTML 文档中必须是唯一的。 -
id属性用于指向样式表中的特定样式声明。JavaScript 也可使用它来访问和操作拥有特定 ID 的元素。 -
id 的语法是：写一个井号 (#)，后跟一个 id 名称。然后，在花括号 {} 中定义 CSS 属性
-
id 名称对大小写敏感，且id 必须包含至少一个字符，不能包含空白字符（空格、制表符等）。
-
class与id的差异：同一个类名可以由多个 HTML 元素使用，而一个 id 名称只能由页面中的一个 HTML 元素使用
内联框架:iframe
-
iframe 用于在网页内显示网页
-
语法：<iframe src="URL"></iframe>
URL指向隔离页面的位置
-
height 和 width 属性用于规定 iframe 的高度和宽度，frameborder 属性规定是否显示 iframe 周围的边框。
-
iframe 可用作链接的目标（target），链接的 target 属性必须引用 iframe 的 name 属性
CSS
-
定义：CSS 指的是层叠样式表，描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素，渲染网页，可以同时控制多张网页的布局。外部样式表存储在 CSS 文件中。
-
构成：选择器和属性（属性名，属性值）
-
选择器分类：简单选择器（根据名称、id、类）、组合器选择器（根据之间的特定关系）、伪类选择器（根据特定状态）、伪元素选择器（选取元素的一部分并设置其样式）、属性选择器（根据属性或属性值）
元素选择器：根据元素的名称
id选择器：元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素。语法：一个井号（＃）后跟该元素的 id。
类选择器：类选择器选择有特定 class 属性的 HTML 元素。语法：一个句点（.）字符，后面跟类名。、
通用选择器*选择所有元素
分组选择器选取所有具有相同样式定义的 HTML 元素。
-
常见属性：字体
属性 表示 注意 font-style 样式 倾斜：italic 不倾斜：normal font-weight 粗细 加粗700(bold) 不加粗400(normal) font-size 字号 一定有单位px font-family 字体 font 多个属性结合 连写有顺序（st,we,si,fa)，不能随意换位 文本
属性 表示 注意 color 文本颜色 值为颜色，reg十六进制 text-align 对齐方式 默认center，可换为left,right text-decoration 装饰文本 值为none,line-through,underline text-indent 文本缩进 单位一般为em(1em=1个字) line-height 行间距 单位为px，改变文字上下间距 背景
属性 作用 值 background-color 背景颜色 预定颜色值/十六进制/RGB代码 background-image 背景图片 url（图片路径） background-repeat 是否平铺 repeat/no-repeat/repeat-x/repeat-y background-position 背景位置 length/position 分别是x和y坐标 background-attachment 背景附着 scroll(背景滚动)/fixed(背景固定) 背景简写 书写简单 背景颜色 图片地址 平铺 滚动 位置 背景色半透明 背景色半透明 background:rgba(0,0,0,.3,)后面必须是4个值
-
CSS三种引入方式：行内、标签、外标 优先引用行内
二、Web标准：
-
由万维网联盟（W3C）制定并维护
-
最佳体验方案：结构，样式，行为相分离
三、浏览器内核：
-
常见浏览器:ie ，edge，firefox ，chrome，safari，opera
-
浏览器内核分成两部分：渲染引擎和JS引擎
-
渲染引擎:对HTML文档进行解析并将其显示在页面上的工具
-
由于js引擎越来越独立，内核就倾向于只指渲染引擎
浏览器 内核 渲染引擎 JS引擎 IE Trident Trident Chakra(查克拉) Safari Webkit weccore JScore Chrome Webkit Blink(webkit) V8 Opera presto Blink(webkit) Carakan Firefox Gecko Gecko Monkey
-
四、HTML:
-
盒子分类:
-
块元素：
-
eg:div，h1-h6，p，table，ul，section，footer，content......
-
特点
-
可以设置宽高
-
margin（外边距）和padding（内边距）的上下左右均对其有效
-
可以自动换行,多个块元素默认排列方式为从上至下
-
网页有默认内边距
-
-
-
行内元素：
-
eg:a,span,select,button
-
特点:
-
不自动换行
-
设置宽高无效
-
默认排列方式为从左到右
-
对margin仅设置左右有效，上下无效；padding设置上下左右都有效
-
-
-
行内块元素
-
eg:image，input
-
-
转化：
-
块级标签转换为行内标签：
display:inline;行内标签转换为块级标签:
display:block;转换为行内块标签:
display：inline-block;
-
-
表格：
-
表格由
<table>标签来定义。每个表格均有若干行（由<tr>标签定义），每行被分割为若干单元格（由<td>标签定义）。字母 td 指表格数据，即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等. -
表格的表头使用
<th>标签进行定义，大多数浏览器会把表头显示为粗体居中的文本。 -
如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。在空单元格中添加一个空格占位符 ；，就可以将边框显示出来
-
横跨两格：colspan="2" 横跨两行：rowspan="2"(放在
<th>中) -
cellpadding:文字与框间距 cellspacing:边框与边框间距
-
不仅可以对宽高属性值生效，还可以多个标签存在一行显示
-
-
页面结构：
-
标题头部区域内容(用于页面或页面中的一块区域):
<header></header> -
标题脚部区域内容(用于页面或页面中的一块区域) :
<footer></footer> -
web页面中一块独立区域:
<section></section> -
独立文章内容:
<article></article> -
侧边栏(相关内容和应用):
<aside></aside> -
导航类辅助内容:
<nav></nav>
-
五、CSS:
盒模型：
-
border-box: content-box和box-sizing
-
content-box:（默认）
-
-
Content : 这个区域是用来显示内容。(width, height, 仅限在content-box模式下)
-
Padding : 包围在内容区域外部的空白区域 。(padding)
-
Border : 边框盒包裹内容和内边距。(border)
-
Margin : 这是最外面的区域，是盒子和其他元素之间的空白区域。(margin)
-
-
content-box下的盒子模型大小计算
标准盒模型：宽度=width+padding(左右)+border（左右）
高度=height+padding(上下)+border（上下）
-
box-sizing: 替代盒模型：宽度=width
高度=height
-
注：margin 不计入盒子的长宽计算，margin影响的是盒子外部空间，盒子的范围从里到外至border为止
-
抽象的盒子模型在现实中的体现：
1.完整的 CSS 盒模型应用于块级盒子，内联盒子只使用盒模型中定义的部分内容
2.块状元素 block
-
每个盒子都会换行
-
width height有效。
-
内边距（padding）, 外边距（margin） 和 边框（border） 有效。
3.行内元素 inline
-
盒子不会产生换行。
-
width height失效，宽高由所装内容撑开。
-
垂直方向的内边距、外边距以及边框无效。
-
水平方向的内边距、外边距以及边框有效
-
浮动：
-
网页布局：
-
文档流："文档流"或"流式布局"是在对布局进行任何更改之前，在页面上显示"块"和"内联"元素的方式。
当一个元素浮动之后，它会被移出文档流，即地上的位置可以被占用。然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。
演示：浮动元素是如何定位的—— 浮动的元素没有间隙
注意：判断是否脱离文档流，看元素起飞到天上后，它原先地上的位置是否还保留，而不是看该元素是否起飞。起飞是指该元素可以遮挡住标准流中元素。
一浮全浮：否则当前浮动元素会影响后面的标准流（父元素所有的孩子一个浮动，则全部浮动）
-
float(浮动)、absolute（绝对定位）、fixed（固定定位）的情况下：
-
block（块状元素）：未设置width和height，宽高由内容决定
-
inline(内联元素):可以给宽高
-
定位position:
-
相对定位 relative：
以自己原来的位置为原点，起飞后在xoy面移动（可以覆盖标准流中的元素），但地面上的位置谁也不许占用（不脱离文档流）。
-
绝对定位 absolute：
从里到外找第一个有定位（可以是相对定位，绝对定位，固定定位，一般是子绝父相）的外层元素作为为原点，起飞后在xoy面移动，原来的位置不保留（脱离文档流）
注意：绝对定位的block（块状元素）不能再用margin: 0 auto;实现水平居中，而是用定位居中。
-
固定定位 fixed：
相对于浏览器窗口进行定位，起飞后在xoy面移动，固定定位会固定在浏览器的某个位置，不会随滚动条滚动。（脱标）
子绝父定：子元素设置绝对定位，父元素设置固定定位
六、JavaScript：
语句
-
JavaScript 程序的执行单位为行，也就是一行一行地执行。一般情况下，每一行就是一个语句。
例如：var a = 1 + 3;
这条语句先用
var命令，声明了变量a，然后将1 + 3的运算结果赋值给变量a。 -
语句以分号结尾，一个分号就表示一个语句结束。多个语句可以写在一行内。分号前面没有任何内容视为空语句。
变量
-
静态类型： 用于存放指定类型的值。
-
弱类型/动态类型：允许在任意时刻存放任意类型的值。
JavaScript 标识符
-
所有 JavaScript 变量必须以唯一的名称的标识,这些唯一的名称称为标识符。
-
构造变量名称（唯一标识符）的通用规则是：
-
名称可包含字母、数字、下划线和美元符号
-
名称也可以 以字母，$ 和 _ 开头
-
名称对大小写敏感（y 和 Y 是不同的变量）
-
保留字无法用作变量名称
-
声明（创建） JavaScript 变量
在 JavaScript 中创建变量被称为“声明”变量。
var 关键词:声明 JavaScript 变量,例如：
var carName; var person = "Bill Gates", carName = "porsche", price = 15000;
声明之后，变量是没有值的。（技术上，它的值是 undefined。）
变量提升
我们习惯将var a = 2;看做是一个声明，而实际上javascript引擎并不这么认为。它将var a和a = 2看做是两个单独的声明，第一个是编译阶段的任务，而第二个则是执行阶段的任务。
这意味着无论作用域中的声明出现在什么地方，都将在代码本身被执行前首先进行处理，可以将这个过程形象地想象成所有的声明（变量和函数）都会被“移动”到各自作用域的最顶端，这个过程被称为提升。
function test () {
var a；
console.log(a);
a = 123;
}
数据类型：
-
基本类型（单类型）：除Object。 String、Number、boolean、null、undefined。
-
引用类型：object。里面包含的 function、Array、Date。
-
Undefined 类型
只有一个值。在使用var 声明变量但未对其加初始化时，这个变量就是undefined。
2.Null 类型
只有一个值。null是表示一个空对象指针。
3.Boolean 类型
使用最多的一个类型，有两个字面值，分别是true、false。true不一定等于1,false不一定等于0。
4.Number 类型
数字类型，表示数据的整数和浮点数。某些语言中也称为“双精度值”。
5.String 类型
字符串可以有单引号、双引号表示。字符串是不可变的，一旦创建，值就不能改变。要改变某个 变量保存的字符串，首先要销毁原来的字符串，然后于用另一个包含的字符串填充该变量。
运算符
等值检测运算符说明==（相等）比较两个操作数的值是否相等!=（不相等）比较两个操作数的值是否不相等===（全等）比较两个操作数的值是否相等，同时检测它们的类型是否相同!==（不全等）比较两个操作数的值是否不相等，同时检测它们的类型是否不相同
在相等运算中，应注意以下几个问题：
-
如果操作数是布尔值，则先转换为数值，其中 false 转为 0，true 转换为 1。
-
如果一个操作数是字符串，另一个操作数是数字，则先尝试把字符串转换为数字。
-
如果一个操作数是字符串，另一个操作数是对象，则先尝试把对象转换为字符串。
-
如果一个操作数是数字，另一个操作数是对象，则先尝试把对象转换为数字。
-
如果两个操作数都是对象，则比较引用地址。如果引用地址相同，则相等；否则不等。
NaN与任何值都不相等，包括它自己。null 和 undefined 值相等，但是它们是不同类型的数据。在相等比较中，null 和 undefined 不允许被转换为其他类型的值。
var a = 42; var b = "42"; a === b; a == b; var c = true; a == c ;
DOM
简介
-
DOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个 JavaScript 对象，从而可以用脚本进行各种操作（比如增删内容）。
-
严格地说，DOM 不是 JavaScript 语法的一部分，但 DOM 操作是 JavaScript 最常见的任务，离开了 DOM，JavaScript 就无法控制网页。JavaScript 是最常用于 DOM 操作的语言。
节点
DOM 的最小组成单位叫做节点（node）。文档的树形结构（DOM 树），就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子。
节点的类型有七种。
-
Document：整个文档树的顶层节点 -
DocumentType：doctype标签（比如<!DOCTYPE html>） -
Element：网页的各种HTML标签（比如<body>、<a>等） -
Attr：网页元素的属性（比如class="right"） -
Text：标签之间或标签包含的文本 -
Comment：注释 -
DocumentFragment：文档的片段
浏览器提供一个原生的节点对象Node，上面这七种节点都继承了Node，因此具有一些共同的属性和方法。
节点树
-
一个文档的所有节点，按照所在的层级，可以抽象成一种树状结构。这种树状结构就是 DOM 树。它有一个顶层节点，下一层都是顶层节点的子节点，然后子节点又有自己的子节点，就这样层层衍生出一个金字塔结构，又像一棵树。
-
浏览器原生提供
document节点，代表整个文档。
-
文档的第一层有两个节点，第一个是文档类型节点（
<!doctype html>），第二个是 HTML 网页的顶层容器标签<html>。后者构成了树结构的根节点（root node），其他 HTML 标签节点都是它的下级节点。 -
除了根节点，其他节点都有三种层级关系。
-
父节点关系（parentNode）：直接的那个上级节点
-
子节点关系（childNodes）：直接的下级节点
-
同级节点关系（sibling）：拥有同一个父节点的节点
-
-
DOM 提供操作接口，用来获取这三种关系的节点。比如，子节点接口包括
firstChild（第一个子节点）和lastChild（最后一个子节点）等属性，同级节点接口包括nextSibling（紧邻在后的那个同级节点）和previousSibling（紧邻在前的那个同级节点）属性。
441
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
