HTML和CSS小知识点笔记

最新推荐文章于 2022-09-17 14:14:58 发布

jing_jing95

最新推荐文章于 2022-09-17 14:14:58 发布

阅读量633

点赞数

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/jing_jing95/article/details/106152971

版权

前端专栏收录该内容

19 篇文章

订阅专栏

这篇博客详细总结了HTML和CSS的基础知识点，包括DOCTYPE声明、元素的回流与重绘、DOM操作、CSS选择器、样式设置、事件处理等。文章探讨了导致回流的因素、CSS的布局模式、HTML5的新标签以及CSS3的新特性，如Flex布局。还涵盖了HTML5新增的多媒体元素、表单元素、存储机制如localStorage，以及浏览器的兼容性和性能优化策略。此外，博客还涉及了JavaScript中的数据类型、运算符、事件处理、DOM操作以及CSS单位如vw和vh的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.<!DOCTYPE html>:文档类型声明，表示该文件为 HTML5文件。<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前

1.<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。
2.严格模式的排版和 JS 运作模式是以该浏览器支持的最高标准运行。在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
3.DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

<!DOCTYPE html>

<html>

    <head>
        <meta charset="UTF-8">
        <title>认识html文件基本结构</title>
    </head>
    <body>
        <h1>在本小节中，你将学会认识html文件基本结构</h1>
    </body>

</html>

<head></head>标签对：标签包含有关HTML文档的信息，可以包含一些辅助性标签。如<title></title>，<link /><meta />，<style></style>，<script></script>等，但是浏览器除了会在标题栏显示<title>元素的内容外，不会向用户显示head元素内的其他任何内容

<body></body>标签对：它是HTML文档的主体部分

3.在<title>和</title>标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中

4.<meta charset="UTF-8">设置当前文件字符编码

5.在网页上要展示出来的页面内容一定要放在body标签中

6.注释：

7.switch语句用法

switch ( 变量表达式 )

{

case 常量1 :语句;break;

case 常量2 :语句;break;

case 常量3 :语句;break;

...

case 常量n:语句;break;

default :语句;break;

}

当变量表达式所表达的量与其中一个case语句中的常量相符时，就执行此case语句后面的语句，并依次下去执行后面所有case语句中的语句，除非遇到break;语句跳出switch语句为止。如果常量表达式的量与所有case语句的常量都不相符，就执行default语句中的语句。

只能针对基本数据类型中的整型类型使用switch，这些类型包括int、char等。对于其他类型，则必须使用if语句。

switch()的参数类型不能为实型。

case标签必须是常量表达式(constantExpression)，如42或者'4'。

case标签必须是惟一性的表达式；也就是说，不允许两个case具有相同的值

8.HTML标签

<ul> 标签定义无序列表

<ol>标签定义有序列表

<li> 标签定义列表项目。 <li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中

<dl> 标签定义了定义列表（definition list）。

<dl> 标签用于结合 <dt> （定义列表中的项目）和 <dd> （描述列表中的项目）。

html中关于有序列表、无序列表和自定义列表之间的区别

<table> 标签定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。

tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。

更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

9.DOM DOM树

https://www.jianshu.com/p/0ec77136ec48

DOM树知识点梳理

10.什么是回流：当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建render tree。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。

导致回流发生的因素

调整窗口大小，浏览器窗口尺寸改变——resize事件发生时
元素尺寸改变——边距、填充、边框、宽度和高度；改变字体大小
页面渲染初始化
元素位置改变
样式表变动
元素内容变化，尤其是输入控件
CSS伪类激活
DOM操作，添加或者删除可见的DOM元素
offsetWidth, width, clientWidth, scrollTop/scrollHeight的计算，会使浏览器将渐进回流队列Flush，立即执行回流。内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变

11.什么是重绘：当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。

12.回流与重绘的区别：

回流必将引起重绘，而重绘不一定会引起回流。比如：只有颜色改变的时候就只会发生重绘而不会引起回流
当页面布局和几何属性改变时就需要回流
比如：添加或者删除可见的DOM元素，元素位置改变，元素尺寸改变——边距、填充、边框、宽度和高度，内容改变

13.减少回流和重绘：

1. 比如改变样式的时候，不去改变他们每个的样式，而是直接改变className 就要用到cssText 但是要注意有一个问题，会把原有的cssText清掉，比如原来的style中有’display:none;’，那么执行完上面的JS后，display就被删掉了。
  为了解决这个问题，可以采用cssText累加的方法，但是IE不支持累加，前面添一个分号可以解决。
2.还有添加节点的时候比如要添加一个div里面有三个子元素p，如果添加div再在里面添加三次p，这样就触发很多次回流和重绘，我们可以用cloneNode(true or false) 来避免，一次把要添加的都克隆好再appened就好

css样式中，那些会引发重绘，那些会引发回流

14.

undefined == null; //true

undefined === null; //false，类型不相同

null == undefined ?详细解释

15.isNaN(value)

isNaN() 函数用于检查其参数是否是非数字值。

如果参数值为 NaN 或字符串、对象、undefined等非数字值则返回 true, 否则返回 false。

isNaN()函数用来判断一个数是否是NaN;
            // 只有一个值是NaN或者能被转换为NaN的时候才返回true
            console.log(isNaN('e'));//true,因为e可以被转换为NaN
            console.log(isNaN('11'));//false,因为字符串可以被转换为数字,不能被转为NaN
            console.log(isNaN(null));//false,因为null可以被转换为0,不能被转为NaN
            console.log(isNaN(NaN));// true,NaN返回true

16.parseInt()的用法

JavaScript parseInt() 函数

parseInt(string,raix)函数有两个参数

16.1注意:string字符串只会被解析从第一个字符开始直到不是数字的字符部分

console.log(parseInt('223'));//223

16.2 当字符串中间存在非数字,那么就只解析前面是数字的部分字符

console.log(parseInt('22e3'));//22

16.3 如果字符串中第一个字符就不是数字,那么返回NaN

console.log(parseInt('e21'));//NaN

对于parseInt()函数还有一个易考点,就是利用数组的下标,还记得parseInt()函数的第二个参数吗？

16.4 parseInt()函数的第二个参数指的就是进制,这个参数小于2或者大于36的时候,都会返回NaN

console.log(parseInt(1,1));//NaN ,因为第二个参数是1表示1进制<2,所以错误

console.log(parseInt(1,2));//1,因为表示二进制 =2,在范围内

16.5 我们一般都是省略这个参数的,这个时候就是默认为10进制

console.log(parseInt(99));//99

16.6 我们第二个参数使用0的时候也是使用十进制

console.log(parseInt(99,0));//99

16.7 如果第一个参数前缀使用0x/0X则表示使用16进制

console.log(parseInt(0x99));//153=16*9+9

console.log(parseInt(0x99,10));//如果第一个参数使用了0x表示十六进制,那么第二个参数设置了值也无效

17.

<script src="myScript.js">  √

<script href="myScript.js">  ×

href加载的是网络外部资源，src引入加载的资源会下载到本地进行编译执行，.如js文件要下载下来编译执行

18.｛"name":"xiaoming","age":"student"｝

键与值都需要用引号括起来 “键”

键值之间用冒号 “键”：“值”

键值对之间用逗号隔开 “键”：“值” ， “键”：“值”

？19.

JSON可以是对象：

也可以是数组：

JSON的值可以是一下几种形式：

JSON对字符串格式的要求：

JSON对数字格式的要求：

20.

(function(){
 
    var bar=”World”;
 
    alert(foo+bar);
 
})();
 
//此函数是一个匿名自执行函数，会先调用并执行一次，即alert (foo+bar)的字符串拼接；
 
// var bar=”World”是函数内部声明的局部变量，外部无法调用，所以外部的alert(foo+bar)会报错。

21.clear 属性定义了元素的哪边上不允许出现浮动元素。

clear : none | left | right | both.

对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。

22.

pop（）方法用于删除数组的最后一个元素，把数组长度减1，并返回被删除的最后一个元素，这样的话数组就被改变了。

splice()方法可以对数组中已经存在元素进行删除，然后返回被删除的项目，也可以添加元素到数组中。

sort()方法对数组中所有的元素都进行排序，如果没有提供比较函数compareFunction，则按照字符串的Unicode码的顺序进行排序。返回对数组的引用。请注意，数组在原数组上进行排序，不生成副本。

所以以上三种方法都改变了数组。

而 concat()方法用于连接两个或多个数组。该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本，返回一个新的数组。该数组是通过把所有的arrayX参数添加到arryaObject中生成的，如果要进行 concat()操作的参数是数组，那么添加的是数组中的元素，而不是数组。

23.

代码回收规则如下：

1.全局变量不会被回收。
2.局部变量会被回收，也就是函数一旦运行完以后，函数内部的东西都会被销毁。
3.只要被另外一个作用域所引用就不会被回收

24.

闭包函数：声明在一个函数中的函数，叫做闭包函数。

闭包：内部函数总是可以访问其所在的外部函数中声明的参数和变量，即使在其外部函数被返回（寿命终结）了之后。

闭包，看这一篇就够了——带你看透闭包的本质

25. h5新增的标签

新增元素说明

video 表示一段视频并提供播放的用户界面

audio 表示音频

canvas 表示位图区域

source 为video和audio提供数据源

track 为video和audio指定字母

svg 定义矢量图

code 代码段

figure 和文档有关的图例

figcaption 图例的说明

main

time 日期和时间值

mark 高亮的引用文字

datalist 提供给其他控件的预定义选项

keygen 秘钥对生成器控件

output 计算值

progress 进度条

menu 菜单

embed 嵌入的外部资源

menuitem 用户可点击的菜单项

menu 菜单

template

section

nav

aside

article

footer

header

26.html5新特性总结

html5总的来说比html4多了十个新特性，但其不支持ie8及ie8以下版本的浏览器

一、语义标签

二、增强型表单

三、视频和音频

四、Canvas绘图

五、SVG绘图

六、地理定位

七、拖放API

八、WebWorker

九、WebStorage

十、WebSocket

27.localStorage

在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同

https://www.cnblogs.com/st-leslie/p/5617130.html

28.CSS的inline、block与inline-block

行内元素一般是内容的容器，而块级元素一般是其他容器的容器，行内元素适合显示具体内容，而块级元素适合做布局。

块级元素(block)：独占一行，对宽高的属性值生效；如果不给宽度，块级元素就默认为浏览器的宽度，即就是100%宽。

行内元素(inline)：可以多个标签存在一行，对宽高属性值不生效，完全靠内容撑开宽高。

行内块元素(inline-block)：结合的行内和块级的优点，既可以设置长宽，可以让padding和margin生效，又可以和其他行内元素并排

1.常见的块级元素(自动换行， 可设置高宽 )有：【元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。】

div,h1-h6,p,pre,ul,ol,li,form,table,label等

设置display:block就是将元素显示为块级元素：

a{display:block;}

2.常见的行内元素（内联元素）（无法自动换行，无法设置宽高）有：

a,img,span，i（斜体）,em（强调）,sub(下标)，sup（上标）等。

块状元素也可以通过代码display:inline将元素设置为内联元素：

 display:inline;

3.常见的行块级元素（内联块状元素）(拥有内在尺寸，可设置高宽，不会自动换行 )有：

(button,input，textarea,select), img等

display:inline-block就是将元素设置为内联块状元素

4.label元素不会是浏览器默认的行块级元素，实践出真知

图1： input默认情况下可以设置可设置高宽，不会自动换行。但是label并没有变化（为了看的更加明显，所以给label加了边框）。

图2：手动设置label的display属性为inline-block，才能实现可设置高宽，不会自动换行的效果。

29.运算中，+号，数字隐式转换成字符串。其余的运算符号是字符串隐式转换成数字

30.AngularJS1中

ng-route 自带路由

ng-template 寄存方式

ng-model 指令绑定了 HTML 表单元素到 scope 变量中

ng-controller 指定控制器

31.正确的应该是<a href="#" οnmοuseοver="this.style.fontSize='30px'">注册</a>

fontSize的S要大写，30px用单引号单独引起

a 元素可以没有 href 属性，此时为超链接的一个占位符

a标签不可以嵌套块级元素。其实现在说法是

<a>的子元素是transparent(以它的父元素允许的子元素为准)，但不包括交互型元素.

父元素<p>只接受语句型元素。

a元素的target属性可以指向一个具名的窗口或iframe

target 属性可选有：_blank、_self、framename等值

a标签有的target属性，代表打开网页的方式。可选值为”_self和_blank”，默认值为_self，代表在当前页面打开链接，_blank代表在新窗口打开链接

iframe的name属性配合a标签的target属性实现页面局部刷新

a的rel 属性有多个值时，使用空格 " " 分隔

a的href 属性的可选有：

绝对路径（href = "https://www.baidu.com"）

相对路径（href = "index.html"）

锚（href = "#top"）

32.mouseover鼠标移入，mouseout鼠标移出

33.

（注：从网上找到了一个很详细的答案）

网上有一道美团外卖的面试题是这样的：  Function.prototype.a = 'a';
Object.prototype.b = 'b';
function Person(){};
var p = new Person();
console.log('p.a: '+ p.a); // p.a: undefined
console.log('p.b: '+ p.b); // p.b: b  问为什么？

有不少同学第一眼看上去就觉得很疑惑，p不是应该继承了Function原型里面的属性吗，为什么p.a返回值是undefined呢？
其实，只要仔细想一想就很容易明白了，Person函数才是Function对象的一个实例，所以通过Person.a可以访问到Function
原型里面的属性，但是new Person()返回来的是一个对象，它是Object的一个实例,是没有继承Function的，所以无法访问
Function原型里面的属性。但是,由于在js里面所有对象都是Object的实例，所以，Person函数可以访问到Object原型里面的
属性，Person.b => 'b'

34.嵌套规范设定了<dl><dt><th>，不可嵌套<header>，<footer>，区块型元素（定义标题及页脚范围的元素，<article>,<aside>,<nav>,<section>），标题型元素{H5将h1-h6设定为了标题型元素（定义一个区块/章节的标题）}

35.button是行内块元素，可以嵌套行内元素；子元素不可以嵌套交互性元素。a属于交互性元素

36.bootstrap的栅格系统

.col-xs-超小屏幕手机 (<768px),
.col-sm-小屏幕平板 (≥768px),
.col-md-中等屏幕
.col-lg-桌面显示器 (≥992px)(栅格参数)

37.Flex 布局语法教程

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

设置display: flex属性可以把块级元素在一排显示；
flex需要添加在父元素上，改变子元素的排列顺序；
默认为从左往右依次排列,且和父元素左边没有间隙

37.1 使用justify-content属性设置横轴排列方式

justify-content
`flex-start`	交叉轴的起点对齐
`flex-end`	右对齐
`center`	居中
`space-between`	两端对齐，项目之间的间隔都相等
`space-around`	每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍

37.2 使用align-items属性设置纵轴排列方式

align-items
`flex-start`	默认值，上对齐
`flex-end`	交叉轴的终点对齐
`center`	交叉轴的中点对齐
`baseline`	项目的第一行文字的基线对齐
`stretch（默认值）`	如果项目未设置高度或设为auto，将占满整个容器的高度。

baseline：

37.3 给子元素设置flex占比

给子元素设置flex属性,可以设置子元素相对于父元素的占比。
flex属性的值只能是正整数,表示占比多少。
给子元素设置了flex之后,其宽度属性会失效。

.box1 {
        flex: 1;
        background: red;
    }

.box2 {
    flex: 3;
    background: orange;
}

.box3 {
    flex: 2;
    background: green;
}

38.创建函数

function myFunction(){…...}

myfunction = function(){…….}

39.

if(x) 这里期望 x 是一个布尔类型的原始值，而 x 是一个对象，任何对象转为布尔值，都为得到 true（切记！在 JS 中，只有 0，-0，NaN，""，null，undefined 这六个值转布尔值时，结果为 false）。
题目的第二部分，一定要注意 y = Boolean(0)，而不是 y = new Boolean(0)。这两个有很大区别，用 new 调用构造函数会新建一个布尔对象，此处没有加 new，进行的是显示类型转换，正如上述第一条所说，0 转换布尔，结果为 false，所以此时 y 的值就是 false。如果加了 new，那么 y 就是一个 Boolean 类型的对象，执行 if(y) 时，对象转布尔，始终是 true，所以结果会与不加 new 的时候相反

40.

DHTML是Dynamic HTML的简称，就是动态的HTML(标准通用标记语言下的一个应用)，是相对传统的静态的html而言的一种制作网页的概念。
DHTML只是HTML、CSS和客户端脚本的一种集成，即一个页面中包括html+css+javascript(或其它客户端脚本)
html+css+javascript（或其他脚本）的优点：html确定页面框架，css和脚本决定页面样式、动态内容和动态定位。

41.bootstrap v3 沒有分 fluid 和 non-fluid ，所以移除了 .container-fluid 和 .row-fluid 兩個大框架容器，所有都是 fluid

42.

43.open() 方法可以查找一个已经存在或者新建的浏览器窗口。

语法：

window.open([URL], [窗口名称], [参数字符串])

参数说明:

URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。

窗口名称：可选参数，被打开窗口的名称。

    1.该名称由字母、数字和下划线字符组成。
    2."_top"、"_blank"、"_selft"具有特殊意义的名称。
       _blank：在新窗口显示目标网页
       _self：在当前窗口显示目标网页
       _top：框架网页中在上部窗口中显示目标网页
    3.相同 name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同。
    4.name 不能包含有空格。

参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。

44.

45.font-style 属性定义字体的风格。该属性设置使用斜体、倾斜或正常字体

值	描述
normal	默认值。浏览器显示一个标准的字体样式。
italic	浏览器会显示一个斜体的字体样式。
oblique	浏览器会显示一个倾斜的字体样式。
inherit	规定应该从父元素继承字体样式。

46.“+”是左关联

47.根据ES5规范11,6,1节，如果某个操作数是字符串或者能够通过以下步骤转换为字符串的话，+将进行拼接操作

48.css样式中，字体对颜色设置为：color; 背景颜色为：background-color

49.

for(var i=0;i<5;++i){
    setTimeout(function(){
        console.log(i+ ' ');
    },100);
}

每次循环进来之后，由于setTimeout()，内部的匿名函数并没有立即执行，而是等到100ms后，而此时i早已变为5。

1）可以利用匿名函数创建立即执行函数（或者叫模仿跨级作用域）来解决这个问题；

for(var i=0;i<5;++i){

(function(num){

setTimeout(function(){

console.log(num+ ' ');

},100);

})(i);

}

创建立即执行函数并传入参数i。因为函数的参数是按值传递的，所以i的当前值就赋值给了num，并传递给了setTimeout 中的闭包，在闭包中保存了i当前值的一个副本

2）也可以使用ES6中的 let命令


for(let i=0;i<5;++i){
    setTimeout(function(){
        console.log(i+'');
    },100);
}

50.下面这段JS程序的执行结果是：

var user = {
 count : 1,
 getCount: function(){
  return this.count;
 }
}
var func = user.getCount
console.log(func())

链接：https://www.nowcoder.com/questionTerminal/c076230d85f845078f82a427701d4e14
来源：牛客网

// 1.调用对象未声明的属性会undifned
    var user={};
    console.log(user.name);//undifned

    // 2.使用未赋值只声明的基本数据类型会undifned
    var one;
    console.log(one);//undifned

    // 3.使用未声明的变量会报错
    console.log(two);//new_file.html:15 Uncaught ReferenceError: two is not defined

在本题中，this指向的是window,window对象已经自动被浏览器声明了，只是还没有声明count属性，所以也是undifned

func=user.getCount只是保存了getCount函数，并没有执行，该函数是在console里面执行，func()就相当于user.getCount()，一看是像user调用，其实func()就相当于一个全局的函数，实际上是window.func() ,也就是window.user.getCount()

51.commonjs是用在服务器端的，同步的，如nodejs
amd, cmd是用在浏览器端的，异步的，如requirejs和seajs

CommonJs 是服务器端模块的规范，Node.js采用了这个规范。

根据CommonJS规范，一个单独的文件就是一个模块。加载模块使用require方法，该方法读取一个文件并执行，最后返回文件内部的exports对象。

CommonJS 加载模块是同步的，所以只有加载完成才能执行后面的操作。像Node.js主要用于服务器的编程，加载的模块文件一般都已经存在本地硬盘，所以加载起来比较快，不用考虑异步加载的方式，所以CommonJS规范比较适用。但如果是浏览器环境，要从服务器加载模块，这是就必须采用异步模式。所以就有了 AMD CMD 解决方案。

AMD((Asynchromous Module Definition)

AMD 是 RequireJS 在推广过程中对模块定义的规范化产出

AMD异步加载模块。它的模块支持对象函数构造器字符串 JSON等各种类型的模块。

适用AMD规范适用define方法定义模块。

//通过数组引入依赖，回调函数通过形参传入依赖

define(['someModule1', ‘someModule2’], function (someModule1, someModule2) {
 
  function foo() {
    /// someing
    someModule1.test();
  }
 
  return {
    foo: foo
  }
});

//AMD规范允许输出模块兼容CommonJS规范

CMD

CMD是SeaJS 在推广过程中对模块定义的规范化产出

CMD和AMD的区别有以下几点：

1.对于依赖的模块AMD是提前执行，CMD是延迟执行。不过RequireJS从2.0开始，也改成可以延迟执行（根据写法不同，处理方式不通过）。

2.CMD推崇依赖就近，AMD推崇依赖前置。

虽然 AMD也支持CMD写法，但依赖前置是官方文档的默认模块定义写法。

3.AMD的api默认是一个当多个用，CMD严格的区分推崇职责单一。例如：AMD里require分全局的和局部的。CMD里面没有全局的 require,提供 seajs.use()来实现模块系统的加载启动。CMD里每个API都简单纯粹。

https://www.nowcoder.com/test/question/done?tid=33572789&qid=501202#summary

52.常见的浏览器端的存储技术有哪些？

cookie 是靠谱的浏览器都支持；localStorge 比 cookie 存的更多，获取更方便，而且存储内容不会随请求发送给服务器；~~session 虽然需要 cookie 支持（通常存放加密过的 sessionId），但是不在浏览器端存放主要信息；~~IE 支持 userData 存储数据，但是基本很少使用到，除非有很强的浏览器兼容需求。

53.栅格系统的工作原理中有，为了创建列（colume）之间的间隔需要设置padding,而且需要设置margin为负值，消除第一个和最后一个之间padding的影响。而padding是自动设置的，margin需要手动修改；

bootstrap将全局的font-size设置为14px;

box-sizing初始为border-box

54.JSON https://www.jianshu.com/p/1970a209672f

55.为什么选择JSON而不是XML？

因为XML虽然可以作为跨平台的数据交换格式，但是在JS(JavaScript的简写)中处理XML非常不方便，同时XML标记比数据多，增加了交换产生的流量，而JSON没有附加的任何标记，在JS中可作为对象处理，所以我们更倾向于选择JSON来交换数据。

56.字符串，json字符串和json对象

字符串：这个很好解释，指使用“”双引号或’’单引号包括的字符。例如：var comStr = 'this is string';
json字符串：指的是符合json格式要求的js字符串。例如：var jsonStr = "{StudentID:'100',Name:'tmac',Hometown:'usa'}";
json对象：指符合json格式要求的js对象。例如：var jsonObj = { StudentID: "100", Name: "tmac", Hometown: "usa" };

57.JSON是JS的一个子集

58.读和写JSON都有两种方法，分别是利用”.”操作符和“[key]”的方式

https://www.cnblogs.com/mcgrady/archive/2013/06/08/3127781.html

59.function 与 => 的区别

在JS中，箭头函数并不是简单的function(){}匿名函数的简写语法糖，实际上，箭头函数和匿名函数有个明显的区别：箭头函数内部的this是词法作用域，在编写函数时就已经确定了。而匿名函数的this指向运行时实际调用该方法的对象，无法在编写函数时确定。

箭头函数和普通函数的区别

不可以当做构造函数，也就是说，不可以使用 new 命令，否则会抛出错误。
this、arguments、caller等对象在函数体内都不存在。
不可以使用 yield 命令，因此箭头函数不能用作 Generator 函数。

60.JS History对象

window.history属性指向History对象，它表示当前窗口的浏览历史。

History对象保存了当前窗口访问过的所有页面网址。

由于安全原因，浏览器不允许脚本读取这些地址，但是允许在地址之间导航

History 对象主要有两个属性。

History.length：当前窗口访问过的网址数量（包括当前网页）
History.state：History堆栈最上层的状态值

History 对象的方法

History.back()、History.forward()、History.go()

这三个方法用于在历史之中移动。

History.back()：移动到上一个网址，等同于点击浏览器的后退键。对于第一个访问的网址，该方法无效果。
History.forward()：移动到下一个网址，等同于点击浏览器的前进键。对于最后一个访问的网址，该方法无效果。
History.go()：接受一个整数作为参数，以当前网址为基准，移动到参数指定的网址，比如go(1)相当于forward()，go(-1)相当于back()。如果参数超过实际存在的网址范围，该方法无效果；如果不指定参数，默认参数为0，相当于刷新当前页面

移动到以前访问过的页面时，页面通常是从浏览器缓存之中加载，而不是重新要求服务器发送新的网页。

History.pushState()用于在历史中添加一条记录

window.history.pushState(state, title, url)

该方法接受三个参数，依次为：

state：一个与添加的记录相关联的状态对象，主要用于popstate事件。该事件触发时，该对象会传入回调函数。也就是说，浏览器会将这个对象序列化以后保留在本地，重新载入这个页面的时候，可以拿到这个对象。如果不需要这个对象，此处可以填null。
title：新页面的标题。但是，现在所有浏览器都忽视这个参数，所以这里可以填空字符串。
url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。

添加新纪录后，地址栏内的地址会变成新添加的网址，但并不会跳转到这个网址，也不会检查网址是否存在，它只是成为浏览历史中的最新记录。这时，在地址栏输入一个新的地址(比如访问google.com)，然后点击了倒退按钮，页面的 URL 将显示刚才添加的网址。

总之，pushState()方法不会触发页面刷新，只是导致History对象发生变化，地址栏会有反应。

如果pushState()方法设置了一个跨域网址，则会报错：

这样设计的目的是，防止恶意代码让用户以为他们是在另一个网站上，因为这个方法不会导致页面跳转。

History.replaceState()用来修改 History 对象的当前记录

其他都与pushState()方法一模一样。

61.div：划分逻辑块

span：设置单独样式

header、footer、section：相当于div而不是h1，只是为了告诉你它的作用是头部，便于理解，原则上还是一个div。

br：换行

xhtml1.0写法：<br />
html4.01写法：<br>

现在一般使用 xhtml1.0 的版本的写法（其它标签也是），这种版本比较规范。

空标签只需要写一个开始标签，这样的标签有<br />、<hr />(水平分割线)和<img />。

空格：“ ”

img：<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">

62. 表格

创建表格的四个元素：table、tr、th、td

<table>…</table>：整个表格以<table>标记开始、</table>标记结束。
<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。
<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。
<th>…</th>：表格的头部的一个单元格，表格表头。
表格中列的个数，取决于一行中数据单元格的个数。
border属性可以为表格添加边框，属性值为数字。//<table border="1">...</table>

注意：

table标签用来定义整个表格，为双标签，必须有结束标签。
table标签里面可以放caption标签和tr标签。
caption标签用来定义表格的标题。
tr标签用来设置表格的行，tr里面只能放th或者td标签，一组tr标签代表一行。
th用来设置表格的标题，会加粗居中显示。也就是th标签中的文本默认为粗体并且居中显示。
td同来设置表格的列，一组td标签代表一列。
table表格在没有添加border属性之前, 在浏览器中显示是没有表格线的。

<thead>标签定义表格头部,<tbody>标签来定义表格的内容,<tfoot>来定义表格的底部

表格第一行为表头数据,我们用<thead>标签包裹,中间的科目和分数为表格的主体内容,我们用<tbody>标签包裹,最后的总分我们用<tfoot>标签包裹。

<thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。
<tbody>…</tbody>：如果不加<thead><tbody><tfooter> , table表格加载完后才显示。加上这些表格结构， tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。（通俗理解table 可以按结构一块块的显示，不在等整个表格加载完后显示。）分块加载。
<tfoot> 元素用于对 HTML 表格中的表注（页脚）内容进行分组。
thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。便于行冻结。

想要单元格紧挨着应该怎么做呢？

应该在CSS中加入：

table {
	border-collapse:collapse;
	border-spacing:0;
}

63. <form method="传送方式" action="服务器文件">

<form>
   <input type="text/password" name="名称" value="文本" />
</form>

type：当type="text"时，输入框为文本输入框; 当type="password"时, 输入框为密码输入框。
name：为文本框命名，以备后台程序ASP 、PHP使用。
value：为文本输入框设置默认值。(一般起到提示作用)

64. input标签中占位符placeholder属性

placeholder属性为输入框占位符,里面可以放提示的输入信息
placeholder属性的值可以任意填写,当输入框输入内容时,占位符内容消失,输入框无内容时,占位符内容显示
占位符内容不是输入框真正的内容

65. input的type属性设置为number,则表示该输入框的类型为数字。

66.input的type属性设置为url,则表示该输入框的类型为网址

数字框的值需以http://或者https://开头,且后面必须有内容,否则表单提交的时候会报错误提示。

67. Input的type属性设置为email,则表示该输入框的类型为邮箱

数字框的值必须包含@。数字框的值@之后必须有内容,否则会报错误提示。

68. <textarea rows="行数" cols="列数">文本</textarea>

<textarea>标签是成对出现的，以<textarea>开始，以</textarea>结束。
cols ：多行输入域的列数。
rows ：多行输入域的行数。
在<textarea></textarea>标签之间可以输入默认值。

69.label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性

当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上

<label for="控件id名称">

<form
  <label for="email">输入你的邮箱地址</label>
  <input type="email" id="email" placeholder="Enter email">
</form>

70. 单选框和复选框

<input   type="radio/checkbox"   value="值"    name="名称"   checked="checked"/>

当 type="radio" 时，控件为单选框
当 type="checkbox" 时，控件为复选框

value：提交数据到服务器的值（后台程序PHP使用）

name：为控件命名，以备后台程序 ASP、PHP 使用

checked：当设置 checked="checked" 时，该选项被默认选中

同一组的单选按钮，name 取值一定要一致,这样同一组的单选按钮才可以起到单选的作用

<form action="save.php" method="post">
        <label>性别:</label>
        <label>男</label>
        <input type="radio" value="1" name="gender" />
        <label>女</label>
        <input type="radio" value="2" name="gender" /></form>

71. 使用select、option标签创建下拉菜单

    <form>
        <select>
            <option value="看书">看书</option>
            <option value="旅游">旅游</option>
            <option value="运动">运动</option>
            <option value="购物" selected="selected">购物</option>
        </select>
    </form>

select标签里面只能放option标签;option标签放选项内容，不放置其他标签。

selected="selected"：

设置selected="selected"属性，则该选项就被默认选中。

72.从CSS 样式代码插入的形式来看基本可以分为以下3种：内联式、嵌入式和外部式三种。

内联式：css样式代码要写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。

<p style="color:red;font-size:12px">这里文字是红色。</p>

嵌入式：把css样式代码写在<style type="text/css"></style>标签之间

<style type="text/css">
span{
color:red;
}
</style>

外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内，如下面代码：

<link href="base.css" rel="stylesheet" type="text/css" />

注意：

1、css样式文件名称以有意义的英文字母命名，如 main.css。

2、rel="stylesheet" type="text/css" 是固定写法不可修改。

3、<link>标签位置一般写在<head>标签之内。

73. CSS 样式优先级：内联式 > 嵌入式 > 外部式

嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。

总结来说，就是就近原则（离被设置元素越近优先级别越高）。

但注意上面所总结的优先级是有一个前提：内联式、嵌入式、外部式样式表中css样式是在的相同权值的情况下。

74. css样式声明（定义）由两部分组成，形式如下：

选择器{
    样式;
}

75. 类选择器

.类选器名称{css样式代码;}

使用class="类选择器名称"为标签设置一个类

<span class="stress">胆小如鼠</span>

设置类选器css样式

.stress{color:red;}/*类前面要加入一个英文圆点*/

76. 唯一标识 - ID选择器

使用ID选择器，必须给标签添加上id属性，为标签设置id="ID名称"，而不是class="类名称"。
ID选择符的前面是井号（#）号，而不是英文圆点（.）。
id属性的值既为当前标签的id，尽量见名思意，语义化。

77. 类和ID选择器的区别

相同点：可以应用于任何元素

不同点：

1、ID选择器只能在文档中使用一次。而类选择器可以使用多次。

2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）。

.stress{
    color:red;
}
.bigsize{
    font-size:25px;
}
<p>到了<span class="stress bigsize">三年级</span>下学期时，我们班上了一节公开课...</p>

78. 子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素

.food>li{border:1px solid red;}

79. 后代选择器

包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。

.first  span{color:red;}

与子选择器的区别，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。

80. 通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素

* {color:red;}

81. 伪类选择器

允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色:

a:hover{color:red;}

关于伪类选择符，到目前为止，可以兼容所有浏览器的“伪类选择符”就是 a 标签上使用 :hover 了（其实伪类选择符还有很多，尤其是 css3 中，但是因为不能兼容所有浏览器，本教程只是讲了这一种最常用的）。其实 :hover 可以放在任意的标签上，比如说 p:hover，但是它们的兼容性也是很不好的，所以现在比较常用的还是 a:hover 的组合。

82. 分组选择器

想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，）

h1,span{color:red;}

.first,#second span{
            color:green;
        }

83. CSS样式表继承详解

CSS样式表继承指的是，特定的CSS属性向下传递到子孙元素

也不是所有的css属性都会被子类继承

css样式表属性可以继承的有如下：

azimuth, border-collapse, border-spacing,
caption-side, color, cursor, direction, elevation,
empty-cells, font-family, font-size, font-style,
font-variant, font-weight, font, letter-spacing,
line-height, list-style-image, list-style-position,
list-style-type, list-style, orphans, pitch-range,
pitch, quotes, richness, speak-header, speaknumeral,
speak-punctuation, speak, speechrate,
stress, text-align, text-indent, texttransform,
visibility, voice-family, volume, whitespace,
widows, word-spacing

文本相关属性

列表相关属性

值得一说的是font-size。Font-size的子类继承的不是实际值，而是计算后的值。

84. 样式表中的特性值描述了不同规则的相对权重，它的基本规则是：

◆统计选择符中的ID属性个数。

◆统计选择符中的CLASS属性个数。

◆统计选择符中的HTML标记名格式。

最后，按正确的顺序写出三个数字，不要加空格或逗号，得到一个三位数。(注意，你需要将数字转换成一个以三个数字结尾的更大的数)。相应于选择符的最终数字列表可以很容易确定较高数字特性凌驾于较低数字的。

以下是一个按特性分类的选择符的列表：

p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/

从上表我们可以看出#footer具有更高的特殊性，因而它有更高的权重。当有多个规则都能应用于同一个元素时，权重越高的样式将被优先采用。而继承属性的特性值为0；也就是说，任何一条与css继承值冲突的属性值都会覆盖继承的属性值！

85. 选择器的优先级

选择器的优先级依次是: 内联样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器

有些特殊的情况需要为某些样式设置具有最高权值，可以使用!important来解决。

p{color:red!important;}
p{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

样式优先级为：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式

但记住!important优先级样式是个例外，权值高于用户自己设置的样式。

86. font-family设置字体

font-weight设置字体粗细：bold

font-style可以设置字体样式，并且有种3设置方式。

正常字体为normal,也是font-style的默认值。
italic为设置字体为斜体，用于字体本身就有倾斜的样式。
oblique为设置倾斜的字体，强制将字体倾斜。

font样式的简写方式:

body{
    font-style:italic;
    font-weight:bold; 
    font-size:12px; 
    line-height:1.5em; 
    font-family:"宋体",sans-serif;
}

body{
    font:italic  bold  12px/1.5em  "宋体",sans-serif;
}

至少要指定 font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-variant、line-height)如未指定将自动使用默认值。

在缩写时 font-size 与 line-height 中间要加入“/”斜扛。

87. color

英文命令颜色：color:red;
RGB颜色：color:rgb(133,45,200);
十六进制颜色：color:#00ffff;

88. text-decoration

underline为定义文本下的一条线。
overline为定义文本上的一条线。
line-through为定义穿过文本下的一条线，一般用于商品折扣价。

text-indent为文本添加首行缩进 p{text-indent:2em;} 2em的意思就是文字的2倍大小

line-height为文字设置行间间距 p{line-height:1.5em;}

内联元素即行内元素可以设置行高, 即可以设置 line-height .
网上说的应该是不能设置元素高度, 即不能设置 height. 如果要设置 height, 要先设置 display:inline-block 或者 display:block

89. 设置文字间隔或者字母间隔——letter-spacing。这个样式使用在英文单词时，是设置字母与字母之间的间距

设置英文单词之间的间距—— word-spacing

90. text-align设置文本对齐方式

为块状元素中的文本、图片设置居中样式

left center right

91. 长度值

像素
em：本元素给定字体的 font-size 值
- 当给 font-size 设置单位为 em 时，此时计算的标准以 p 的父元素的 font-size 为基础。
百分比

92. CSS 彻底理解margin与padding

块级标签都具备盒子模型的特征

一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界

高度同理

margin：外边距——指定的外边距允许为负数

4 上右下左

3 上左右下

2 上下左右

1 四个值

padding：内边距——该属性不能为负值

4 上右下左

3 上左右下

2 上下左右

1 四个值

93. display

值	描述
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。（CSS2.1 新增的值）

inherit

规定应该从父元素继承 display 属性的值。

list-item

此元素会作为列表显示。

display：none可以隐藏某个元素，且隐藏的元素不会占用任何空间。该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失

94. 为标签设置背景颜色可以使background-color:颜色值来实现

95. border——width\style\color[缩写按这个顺序]

style：dashed（虚线）| dotted（点线）| solid（实线）

color : 可设置为十六进制颜色

width : thin | medium | thick（但不是很常用），最常还是用像素（px）

95.1 指定方向边框设置：

div{border-bottom:1px solid red;}
border-top:1px solid red;
border-right:1px solid red; 
border-left:1px solid red;

95.2 设置圆角：使用border-radius属性来设置。圆角可分为左上、右上、右下、左下

 div{border-radius: 20px 10px 15px 30px;}

div{
   border-top-left-radius: 20px;
   border-top-right-radius: 10px;
   border-bottom-right-radius: 15px;
   border-bottom-left-radius: 30px;
}

1 四个角

2 左上右下右上左下

P.S. 特别注意的：一个正方形，当设置圆角效果值为元素宽度一半时，显示效果为圆形。

div {
        width: 200px;
        height: 200px;
        border: 5px solid red;
        border-radius: 100px;
    }

或也可以写为百分比50%

96. css布局模型

流动模型（Flow）
浮动模型 (Float)
层模型（Layer）

96.1 流动模型

默认的网页布局模式

特征：

块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。
内联元素都会在所处的包含元素内从左到右水平分布显示。

96.2 浮动模型——实现两个元素一行显示

如 div、p、table、img 等元素都可以被定义为浮动

float:left/right

96.3 层模型——让html元素在网页中精确定位

css默认的定位类型是static 定位

形式：

绝对定位(position: absolute)
相对定位(position: relative)
固定定位(position: fixed)

96.1 绝对定位

将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

96.2 相对定位

相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。

“偏移前的位置保留不动”：

虽然div元素相对于以前的位置产生了偏移，但是div元素以前的位置还是保留着，所以后面的span元素是显示在了div元素以前位置的后面。

96.3 固定定位

它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。

96.4 sticky 定位

sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。

position: sticky; 基于用户的滚动位置来定位。

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

96.5 Relative与Absolute组合使用

1、参照定位的元素必须是相对定位元素的前辈元素：

<div id="box1"><!--参照定位的元素-->
    <div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
</div>

2、参照定位的元素必须加入position:relative;

#box1{
    width:200px;
    height:200px;
    position:relative;        
}

3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了

#box2{
    position:absolute;
    top:20px;
    left:30px;         
}

97. 使用CSS3的优势

使用 CSS3 可以轻松完成动画或者过渡效果，远离脚本实现动画，节省开发时间；

CSS3 技术可以代替很多图片，减少标签的嵌套，这意味着页面的标签更少，静态资源请求数减少，这就意味着我们打开页面的时间更快更好；

CSS3 做到了向后兼容，在低版本浏览器中它不会打乱原有的布局，最多就是不起作用。

98. html canvas

规定元素的 id、宽度和高度：

<canvas id="myCanvas" width="200" height="100"></canvas>

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：

<script type="text/javascript">
var c=document.getElementById("myCanvas");//JavaScript 使用 id 来寻找 canvas 元素
var cxt=c.getContext("2d");/*然后，创建 context 对象;getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法*/
cxt.fillStyle="#FF0000";//fillStyle 方法将其染成红色
cxt.fillRect(0,0,150,75);//fillRect 方法规定了形状、位置和尺寸
</script>

理解坐标：

上面的 fillRect 方法拥有参数 (0,0,150,75)。

意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。

实例：线条、圆形、渐变、图像等

手动写动画最小时间间隔是：16.7ms

显示器的默认频率是60hz,即每秒刷新60次。所以理论上的最小间隔是1/60*1000ms=16.7ms

Canvas对象支持所有的JavaScript的鼠标事件，但绘制在其中的图形并不作为其子元素存在，所以需要通过获取Canvas对象上的鼠标坐标，来绑定事件。因此，并不能直接给canvas里面的图形绑定事件

WebGL (Web图形库) 是一种JavaScript API，用于在任何兼容的Web浏览器中呈现交互式3D和2D图形，而无需使用插件。WebGL通过引入一个与OpenGL ES 2.0紧密相符合的API，可以在HTML5 <canvas> 元素中使用。

SVG与canvas的比较

1.历史：

canvas是html5提供的新元素。

而svg存在的历史要比canvas久远，已经有十几年了。svg并不是html5专有的标签，最初svg是用xml技术（超文本扩展语言，可以自定义标签或属性）描述二维图形的语言。

2.功能：

canvas可以看做是一个画布，其绘制出来的图形为标量图。可以在canvas中引入jpg或png这类格式的图片。在实际开发中，大型的网络游戏都是用canvas画布做出来的，并且canvas的技术现在已经相当的成熟。另外，我们喜欢用canvas来做一些统计用的图表，如柱状图曲线图或饼状图等。

而svg，所绘制的图形为矢量图，不能引入普通的图片，因为矢量图的不会失真的特点，在项目中我们会用来做一些动态的小图标。这个特点也很适合被用来做地图，百度地图就是用svg技术做出来的。

3.技术：

canvas里面绘制的图形不能被引擎抓取，canvas中我们绘制图形通常是通过javascript来实现。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象

而svg里面的图形可以被引擎抓取，支持事件的绑定，svg更多的是通过标签来实现。我再来介绍一个svg的js库：TWO.JS。其中包含two.js和three.js前者用于绘制二维图形，后者用于绘制三维图形。TWO.JS可以支持三种格式，svg（默认）、canvas、和WEBGL。当然也可以在普通div中引入。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

99. 立即执行函数 https://www.jianshu.com/p/b10b6e93ddec

声明一个函数，并马上调用这个匿名函数就叫做立即执行函数；也可以说立即执行函数是一种语法，让你的函数在定义以后立即执行；

作用：

不必为函数命名，避免了污染全局变量
立即执行函数内部形成了一个单独的作用域，可以封装一些外部无法读取的私有变量
封装变量

立即执行函数会形成一个单独的作用域，我们可以封装一些临时变量或者局部变量，避免污染全局变量

立即执行函数使用的场景：

你的代码在页面加载完成之后，不得不执行一些设置工作，比如时间处理器，创建对象等等。
所有的这些工作只需要执行一次，比如只需要显示一个时间。
但是这些代码也需要一些临时的变量，但是初始化过程结束之后，就再也不会被用到，如果将这些变量作为全局变量，不是一个好的注意，我们可以用立即执行函数——去将我们所有的代码包裹在它的局部作用域中，不会让任何变量泄露成全局变量

立即执行函数的返回值：

像其他函数一样，立即执行函数也可以有返回值。除了可以返回基本类型值以外，立即执行函数也能返回任何类型的值，比如对象，函数。

上例中立即执行函数的返回值被赋值给了一个变量result，这个函数简单的返回了res的值，这个值事先被计算并被存储在立即执行行数的闭包中。

立即执行函数有哪些作用：

1、改变变量的作用域（创建一个独立的作用域）

改变变量i的作用域，把全局变量i以参数的形式传递到立即执行函数中，在立即执行函数中定义变量i的形参变量j，变量j就是在立即执行函数的作用域中。（给每个li创建了一个作用域块，点击的时候寻找自由变量j，在立即执行块中找到）

2、封装临时变量
封装临时变量，避免全局变量的污染。也可以返回一个在全局中需要的变量（用return）

100. <col> 标签

col 元素为表格中的三个列规定了不同的对齐方式

不属于<table>的子元素

属性	值	描述
align	right left center justify char	规定与 col 元素相关的内容的水平对齐方式。
char	character	规定根据哪个字符来对齐与 col 元素相关的内容。
charoff	number	规定第一个对齐字符的偏移量。
span	number	规定 col 元素应该横跨的列数。
valign	top middle bottom baseline	定义与 col 元素相关的内容的垂直对齐方式。
width	pixels % relative_length	规定 col 元素的宽度。

101. background-attachment

scroll是默认值，背景图像会随着页面其余部分的滚动而移动。
fixed当页面的其余部分滚动时，背景图像不会移动。
inherit规定应该从父元素继承 background-attachment 属性的设置。

background-origin

属性规定 background-position 属性相对于什么位置来定位。

background-clip

属性规定背景的绘制区域。

102. 主流浏览器内核私有属性css前缀：

mozilla内核 (firefox,flock等) -moz
webkit内核(safari,chrome等) -webkit
opera内核(opera浏览器) -o
trident内核(ie浏览器) -ms

浏览器解析渲染页面原理

浏览器最重要最核心的部分是“解释引擎”，也就是“浏览器内核”：负责对网页语法的解释（如HTML、JavaScript）并渲染（显示）网页。
网页的工作过程需要使用到两个引擎：渲染引擎和javascript引擎
什么是JavaScript引擎？简单来讲，就是能够提供执行JavaScript代码的运行环境
所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，排版引擎(Rendering Engine，也有称渲染引擎)，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同，这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。

103.jQuery中的选择器

text()是设置或获取元素文本内容
contains()是检测元素是否含有相应的文本
input()选择器，选取表单元素
attr(name,value)属性操作，设置或返回被选元素的属性和属性值

103. 浮动清除

104.

document.getElementById();

document.getElementsByTagName();

document.getElementsByName();

document.getElementsByClassName();

除了ById是Element，其余都是Elements

105. JavaScript Boolean（逻辑）对象

Boolean（逻辑）对象用于将非逻辑值转换为逻辑值（true 或者 false）。

如果逻辑对象无初始值或者其值为 0、-0、null、""、false、undefined 或者 NaN，那么对象的值为 false。否则，其值为 true（即使当自变量为字符串 "false" 时）！

106. array. sort(sortFunction)是按照sortFunction结果大小排序。

array.sort()方法及原理

107.关于Javascript中数字的部分知识总结：

Javascript中，由于其变量内容不同，变量被分为基本数据类型变量和引用数据类型变量。基本类型变量用八字节内存，存储基本数据类型(数值、布尔值、null和未定义)的值，引用类型变量则只保存对对象、数组和函数等引用类型的值的引用(即内存地址)。
JS中的数字是不分类型的，也就是没有byte/int/float/double等的差异。

108. Array 对象方法方法

concat() 连接两个或更多的数组，并返回结果。
join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
pop() 删除并返回数组的最后一个元素
push() 向数组的末尾添加一个或更多元素，并返回新的长度。
reverse() 颠倒数组中元素的顺序。
shift() 删除并返回数组的第一个元素
slice() 从某个已有的数组返回选定的元素
sort() 对数组的元素进行排序
splice() 删除元素，并向数组添加新元素。
toSource() 返回该对象的源代码。
toString() 把数组转换为字符串，并返回结果。
toLocaleString() 把数组转换为本地数组，并返回结果。
unshift() 向数组的开头添加一个或更多元素，并返回新的长度。
valueOf() 返回数组对象的原始值

109. typeof的用法

typeof是一个运算符，有2种使用方式：typeof(表达式)和typeof 变量名

typeof的返回值：

'undefined' --未定义的变量或值
'boolean' --布尔类型的变量或值
'string' --字符串类型的变量或值
'number' --数字类型的变量或值
'object' --对象类型的变量或值，或者null(这个是js历史遗留问题，将null作为object类型处理)
'function' --函数类型的变量或值

console.log(typeof NaN); //'number'

console.log(typeof null); //'object'

console.log(typeof(class c{})); //'function'

110. JS中的数据类型转换（1）

JS数据类型转换（2）

比较特殊的情况：undefined == null，（undefined > 0，undefined < 0，undefined = 0均为false），NaN == NaN为false

111. 验证是由服务器完成的而不是浏览器的活，服务器将“锁-钥匙”造出来，将图片形式的钥匙发送给浏览器，服务器本身留着文本形式的“锁”，最后需要钥匙传送回服务器才能解锁

112. <fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。

当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。

legend ：为 fieldset 元素定义标题（caption）

<form>
  <fieldset>
    <legend>健康信息</legend>
    身高：<input type="text" />
    体重：<input type="text" />
  </fieldset>
</form>

113. forEach()方法是对数组中的每一项运行给定函数。

114. p元素不能包含任何块级元素(包括自身)

a元素可以包含任何其他元素(除了自身)

document是文档(整个DOM树)的根节点

115. <em> 标签表示强调内容，显示为斜体，但不加粗文本

<th> 标签表示表格的表头，默认加粗文本

<caption> 标签表示表格标题，标题一般被居中表格之上，但不加粗文本

<h1> - <h6> 标签表示 HTML 标题，默认加粗

116. 网页最上层是 title

文章最上层是h1

117.

118. HTML5新的表单元素

datalist 元素规定输入域的选项列表，通过option创建
keygen 元素的作用是提供一种验证用户的可靠方法，密钥对生成器，私钥存于客户端，公钥发到服务器，用于之后验证客户端证书
output 元素用于不同类型的输出

119. nth-child

:nth-child(n),n从1开始计数

:nth-child(odd)和:nth-child(even),从1开始计数

:nth-child(an+b),n从0开始计数

120. 伪类和伪元素的区别

CSS3中伪类和伪元素的语法不同；伪类 :link :hover 伪元素 ::before ::after

可以同时使用多个伪类，而只能同时使用一个伪元素

其中伪类和伪元素的根本区别在于：它们是否创造了新的元素,, 这个新创造的元素就叫 "伪无素"

伪元素/伪对象：不存在在DOM文档中，是虚拟的元素，是创建新元素。这个新元素(伪元素) 是某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中.
伪类：存在DOM文档中，(无标签,找不到, 只有符合触发条件时才能看到 ), 逻辑上存在但在文档树中却无须标识的“幽灵”分类。

因为伪类是类似于添加类所以可以是多个，而伪元素在一个选择器中只能出现一次，并且只能出现在末尾

121. :after/::after和:before/::before的异同

相同点

都可以用来表示伪类对象，用来设置对象前的内容
:before和::before写法是等效的; :after和::after写法是等效的

不同点

:before/:after是Css2的写法，::before/::after是Css3的写法
所以css2的要比css3的兼容好 ,, :before/:after 的兼容性要比::before/::after好，

不过在H5开发中建议使用::before/::after比较好

注意：

伪对象要配合content属性一起使用
伪对象不会出现在DOM中，所以不能通过js来操作，仅仅是在 CSS 渲染层加入
伪对象的特效通常要使用:hover伪类样式来激活

eg:当鼠标移在span上时，span前插入”duang”

    <style>
     　　 span{
                    background: yellow;
               }
               span:hover::before{
                    content:"duang";
               }
      </style>
      
      <span>222</span>

122. CSS 选择器

123.关于link与@import的区别:

区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
区别4：link支持使用Javascript控制DOM去改变样式；而@import不支持。

124. this

在不改变this指向的前提下，this总是指向函数的直接调用
如果有new关键字，this指向new出来的那个对象
IE中attachEvent中的this总是指向全局对象Window
this不总是指向函数的非间接调用者，可以使用apply和call等改变this的指向

125. HTML5的标签只有<mark>而没有<highlight>，<mark>标签可用于突出显示部分文本。

<mark> 标签定义带有记号的文本。请在需要突出显示文本时使用 <m> 标签。 //高亮
<em> 把文本定义为强调的内容。 //斜体
<strong> 把文本定义为语气更强的强调的内容。 //加粗
<dfn> 定义一个定义项目。
<code> 定义计算机代码文本。
<samp> 定义样本文本。
<kbd> 定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。
<var> 定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。
<cite> 定义引用。可使用该标签对参考文献的引用进行定义，比如书籍或杂志的标题。

CSS字体加粗的方法：

font-weight 属性设置文本的粗细。
使用 bold 关键字可以将文本设置为粗体
highlight 该属性用来高亮显示指定的代码行。可以通过单个数字来高亮显示单行，或者传入一个类似 [1, 2, 3] 的数组来高亮显示指定的多行

126. call 方法

语法：call([thisObj[,arg1[, arg2[, [,.argN]]]]])

大概写法：call(Object,arg1,arg2,...);

定义：调用一个对象的一个方法，以另一个对象替换当前对象。

说明：
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。

this绑定的优先级是new>bind>call(apply)>obj.func()>默认绑定

127.hsl() 函数符被定义为色相-饱和度-明度（Hue-saturation-lightness）模式

HSL 相比 RGB 的优点是更加直观：你可以估算你想要的颜色，然后微调。它也更易于创建相称的颜色集合。（通过保持相同的色相并改变明度/暗度和饱和度）。

色相（Hue）表示色环（即代表彩虹的一个圆环）的一个角度。这个角度作为一个无单位的 <number> 被给出。定义 red=0=360，其它颜色分散于圆环，所以 green=120, blue=240，以此类推。作为一个角度，它隐含像 -120=240 和 480=120 这样的回环。

饱和度和明度由百分数来表示。
100% 是满饱和度，而 0% 是一种灰度。
100% 明度是白色， 0% 明度是黑色，而 50% 明度是“一般的”。

128. 深入理解iframe

iframe 用于在页面内显示页面，使用 <iframe> 会创建包含另外一个文档的内联框架（即行内框架）

<iframe src="URL"></iframe>

iframe 的局限

创建比一般的 DOM 元素慢了 1-2 个数量级：使用 iframe 的页面一般不会包含太多 iframe，所以创建 DOM 节点所花费的时间不会占很大的比重。但带来一些其它的问题：onload 事件以及连接池（connection pool）
阻塞页面加载：及时触发 window 的 onload 事件是非常重要的，当 onload 事件加载延迟后，它给用户的感觉就是这个网页非常慢。window 的 onload 事件需要在所有 iframe 加载完毕后（包含里面的元素）才会触发。在 Safari 和 Chrome 里，通过 JavaScript 动态设置 iframe 的 SRC 可以避免这种阻塞情况
唯一的连接池：浏览器只能开少量的连接到 web 服务器。绝大部分浏览器，主页面和其中的 iframe 是共享这些连接的。这意味着 iframe 在加载资源时可能用光了所有的可用连接，从而阻塞了主页面资源的加载。一种解决办法是，在主页面上重要的元素加载完毕后，再动态设置 iframe 的 SRC。
不利于 SEO：搜索引擎的检索程序无法解读 iframe。另外，iframe 本身不是动态语言，样式和脚本都需要额外导入

iframe使用场景：

典型系统结构，左侧是功能树，右侧就是一些常见的table或者表单之类的。为了每一个功能，单独分离出来，采用iframe。
ajax上传文件。
加载别的网站内容，例如google广告，网站流量分析。
在上传图片时，不用flash实现无刷新。
跨域访问的时候可以用到iframe，使用iframe请求不同域名下的资源。

129. 页面的性能指标详解：

白屏时间（first Paint Time）——用户从打开页面开始到页面开始有东西呈现为止

首屏时间——用户浏览器首屏内所有内容都呈现出来所花费的时间

用户可操作时间(dom Interactive)——用户可以进行正常的点击、输入等操作，默认可以统计domready时间，因为通常会在这时候绑定事件操作

总下载时间——页面所有资源都加载完成并呈现出来所花的时间，即页面 onload 的时间

130. innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML

131. 基于以下 HTML 结构，判断浏览器会发送多少个图片请求？

只要是img src引用的都会请求

background: url()所属样式如果挂靠在某个元素上，就一定会请求；单独写了这么一个样式并不请求。

所以这道题目中，只有#bg不请求。

132. getCurrentPosition（）获取用户当前位置放入一个值中保存

getLocation()地图定位

133. 一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放。

134. DOM事件流、DOM0级事件与DOM2级事件

134.1 DOM 事件模型

DOM 事件模型包括捕获和冒泡：

捕获是从上往下到达目标元素
冒泡是从当前元素，也就是目标元素往上到 window

134.2 流

流的具体概念，用术语说流是对输入输出设备的抽象。以程序的角度说，流是具有方向的数据。

134.3 事件流

事件流所描述的就是从页面中接受事件的顺序，事件流分为两种：事件冒泡（主流）和事件捕获

134.4 DOM事件流

DOM事件流包括三个阶段：

事件捕获阶段
处于目标阶段
事件冒泡阶段

134.5 阻止事件冒泡

事件冒泡过程，是可以被阻止的。防止事件冒泡而带来不必要的错误和困扰。

阻止方法是使用 stopPropagation()

134.6 DOM 0级事件

DOM0级事件，就是直接通过 onclick 等方式实现相应的事件

标签内写 onclick 事件
在 JS 中使用onclick = function(){}

这说明 DOM0 级添加事件时，后面的事件会覆盖前面的事件，而 DOM2级则不会，多个事件都会执行；

另外，DOM0级事件具有很好的跨浏览器优势，会以最快的速度绑定，但由于绑定速度太快，可能页面还未完全加载出来，以至于事件可能无法正常运行

134.7 DOM 2级事件

DOM2级事件的方法：主流浏览器 DOM2 级事件是通过以下两个方法用于处理指定和删除事件处理程序的操作：

addEvenetListener
removeEventListener

DOM2级事件的使用：所有的 DOM 节点都包含这两个方法，使用方法如下：

target.addEventListener(type, listener[, useCapture]);
target.removeEventListener(type, listener[, useCapture]);

并且它们都接受三个参数：

type：事件类型，如'click'、'mouseover'、'mouseout'，在事件名前不加'on'
listener：事件处理方法
useCapture：布尔参数，不传该参数时默认是 false，表示在事件冒泡阶段处理，如果是 true，则表示在捕获阶段调用事件处理程序

注意！只有 DOM2级事件包含以下三个阶段

事件捕获阶段
处于目标阶段
事件冒泡阶段

135.选择器的优先级（从上往下依次降低）是：

在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
作为style属性写在元素内的样式
id选择器
类选择器
标签选择器
通配符选择器

伪类选择器和类选择器的优先级是一样的，谁在后面谁起作用，因为我们知道后面的样式会覆盖前面的样式

136. html语言中加粗的标签有<b>和<strong>,或者使用css设置｛font-weight:bold｝

137. 块级元素block element 、行内元素 inline element、行内块元素 inline-block element

宽度默认是跟父级的一样，且占一行，不管前后是纯文本、行内元素或者块级元素

138. white-space: 属性设置如何处理元素内的空白

normal: 默认。空白会被浏览器忽略。
pre: 空白会被浏览器保留。其行为方式类似 HTML 中的 pre 标签。
nowrap: 文本不会换行，文本会在在同一行上继续，直到遇到 br 标签为止。
pre-wrap: 保留空白符序列，但是正常地进行换行。
pre-line: 合并空白符序列，但是保留换行符。
inherit: 规定应该从父元素继承 white-space 属性的值。

text-overflow: clip|ellipsis|string;

值	描述
clip	修剪文本。
ellipsis	显示省略符号来代表被修剪的文本。
string	使用给定的字符串来代表被修剪的文本。

overflow属性有以下值：

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

139.

1.效果

border-style:none;//无边框

border-width:0;//边框宽度为0px

2.区别

（1）性能差异

border:0;浏览器对border-width、border-color进行渲染，占用内存。

border:none;浏览器不进行渲染，不占用内存。

140. CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。

它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。
利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。
利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。所以C错误
解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。

141.

<div class="dropdown">
 <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
 Dropdown
 <span class="caret"></span>
 </button>
 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
 </ul>
</div>

通过向 .dropdown-menu 添加 .pull-right 类来向右对齐下拉菜单。

Bootstrap默认情况下，下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐。

142. HTML5 是作为Flash的替代技术出现

143. vw:基于视口的宽度 vh:基于视口的高度

pt ：印刷业上常使用的单位，磅的意思，一般用于页面打印排版。

144. animation-timing-function

属性	描述
linear	动画从头到尾的速度是相同的。
ease 默认	动画以低速开始，然后加快，在结束前变慢。
ease-in	动画以低速开始。
ease-out	动画以低速结束。
ease-in-out	动画以低速开始和结束。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。