前端寒假计划

最新推荐文章于 2019-01-21 21:28:24 发布

zz-hello

最新推荐文章于 2019-01-21 21:28:24 发布

阅读量550

点赞数 1

文章标签：前端学习计划

本文链接：https://blog.csdn.net/weixin_41143293/article/details/79841271

版权

<center>元月一号至元月三十一号</center>

1、HTML

1.1块级元素的特点：

独占一行
支持所有样式
不设置宽度时宽度为父元素宽度
换行符不解析
可以容纳内联元素和其他块元素

常见的块元素有：div、ul、ol、li、h1~h6、p、table、address、form、center、dl、dt、dd、menu、hr、

内联元素的特点：

可以在一行显示
不支持宽高，上下margin和padding等样式会有问题
宽度由内容撑开
换行符会被解析成空格

常见的内联元素有：span、a、input、img、textarea、abbr、b、br、big、i、sub、sup、strong、select

内联块元素的特点：

内联块元素同时具备块级元素和内联元素的特点

空元素：<br> <hr> <img> <link> <meta>

内嵌元素：

img-----在html文档里面嵌入图像；

a元素里使用img-----创建基于图形的超链接；

将img或object与map和area结合使用------创建客户端分区响应图；

audio、video、source/track----不通过插件嵌入音频和视频（html5）

iframe----嵌入另一张html文档；

emnbed或object-----通过插件嵌入内容；

使用object元素，用他的name属性定义浏览器上下文的名称----创建浏览上下文；

canvas-----在html文档里嵌入图形（html5）

常见的元素的特点属性：

href：用于a标签里的链接方式或链接css文件；并行加载

src：用于链接js文件或图片；不是并行加载

alt：用来指定替换文字，只能用在img、area和input元素中，用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息 alt是替代图像作用而不是提供额外说明文字

title：作为属性时用来为元素提供额外的说明信息；作为标签时里面写入网页标题，主要是文字说明

1.1.2、页面导入样式时，使用link和@import有什么区别？
答案解析：
1）link属于XHTML标签，而@import是css提供的；
2）页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载；
3）@import只在IE5以上才能识别，而link是XHTML标签，无兼容问题；
4）link方式的样式的权重高于@import的权重。

1.2.1.html语义化：

what：根据内容的结构化，选择合适的语义化标签，便于开发者阅读和代码美观

why：

为了在没有css的情况下，页面也可以很好的体现内容结构代码结构
有利于用户体验
有利于搜索引擎根据标签的语义确定上下文和权重问题
便于团队开发和维护，语义化更具有可读性

1.2.2、SEO的原理：

SEO一共包括三个过程：网页搜索、预处理信息、建立索引。细化分为：爬行—抓取—处理抓取信息—建立索引—呈现排名

一、爬行

爬行的目的：建立待抓取列表

爬虫：谷歌爬虫（ddos）百度爬虫（spider）

1.发现：

对于一个网站来说，分为被动等待和主动引爬虫

被动等待：设置好Robots.txt文件，放在服务器等待爬虫自己过来爬取

主动引爬虫：写带有链接的软文花钱放在高质量高权重的网站中、利用权重高的博客、在质量高的论坛里发外链

2.内容：

争取权重高的位置放

Banner不如幻灯片，幻灯片不如文字，文字优先，图片写alt属性

二、抓取

网页本身需要符合W3C标准，编码建议使用“utf-8”，“title”尽量靠前，我们想让爬虫进入到某个页面就看到我们的主旨内容，内容尽量原创

正文：关键词出现的次数要合适，位置要靠前

“h1标签”：唯一性，整个页面最重要，含关键字，尽量靠前

“h2标签”：可以添加其他属性

“alt属性”：只能用于“img”，意在告诉蜘蛛图片的解释

“title属性”：为链接添加描述性文字，可为用户提供更清楚表达的意思

“锚文本”：锚文本得有相关的关键词，且面面相关

三、处理抓取结果

爬虫抓取后压缩成数据包返回数据库

相关性：因为百度算法语境分析+语义分析的原因，所以网站不要出现不相关的内容出现，否则搜索引擎也会撇掉你的网站权威性（网络拼比，信任度等）

**注：**不权威造成的影响：同一篇文章，由于信任度高低，有可能自己被转载发布的文章自己的反倒在别人网站后面

去重：一个链接不能有多个页面、同一个关键词不能指向不同链接、同一页面下不要出现不同链接相同的关键词

四、建立索引

搜索引擎的索引是反向建立的（一个关键词对应许多文件[网站/网页]）

什么是爬虫？

爬虫一般指网络爬虫，是一种按照一定的规则，自动的抓取万维网信息的程序或脚本

如何去写一个爬虫？

1.3!DOCTYPE的作用:

Doctype是document type的简写，声明叫做文件类型定义（DTD），声明的作用是为了告诉浏览器该文件的类型，让浏览器解析器知道用哪个规范来解析文档，!Doctype必须放在HTML文档的第一行，它不是一个HTML标签。

严格模式和混杂模式的区别以及如何触发两种模式

严格模式：又称为标准模式，是指浏览器按照W3C标准解析代码

混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码

区别：浏览器解析时到底使用严格模式还是混杂模式，与网页中的DTD相关

1.如果文档包含严格的DOCTYPE，那么它一般以严格模式呈现。（严格DTD——严格模式）

2.包含URL的过渡DTD的DOCTYPE，也以严格模式呈现，但有过渡DTD而没有URL（统一资源标识符，就是声明最后的地址）会导致页面以混杂模式呈现。（有URL的过渡DTD——严格模式；没有URL的过渡DTD——混杂模式）

3.DOCTYPE不存在或形式不正确会导致文档以混杂模式呈现。（DTD不存在或者格式不正确——混杂模式）

4.HTML5没有DTD，因此也就没有严格模式与混杂模式的区别，HTML5有相对宽松得语法，实现时，已经尽可能大的实现了向后兼容。（HTML没有严格与混杂之分）

H5只需要写一个<!DOCTYPE HTML>的原因:

HTML5不基于SGML，因此不需要对DTD进行引用，但是需要DOCTYPE来规范浏览器的行为（让浏览器按照他们应该的方式来运行）HTML4.01基于SGML，所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

1.4.DOM:

什么是DOM?

DOM是Document Object Model（文档对象模型）的缩写，是W3C的标准，它定义了访问HTML和XML文档的标准：“W3C文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”

W3C DOM标准被分为3个不同的部分：

核心 DOM - 针对任何结构化文档的标准模型
XML DOM - 针对XML文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型

什么是HTML DOM？

HTML DOM 是：

HTML 的标准对象模型
HTML 的标准编程接口
W3C 标准

HTML DOM定义了所有HTML元素的对象和属性，以及访问它们的方法。

换言之，HTML DOM是关于如何获取、修改、添加或删除HTML元素的标准

如何去优化DOM结构？

把DOM和Javascript各自想象成一个岛屿，它们之间用收费桥梁连接

因此要避免去操作DOM，还要减少去访问DOM的次数。

为什么：利用冒泡事件，把一个元素响应事件（ click、keydown......）的函数委托到另一个元素，比如 ul里面有很多li，给li添加点击事件，可以委托给ul

文本对象模型；事件触发以后执行三个阶段：捕获阶段，目标阶段，冒泡阶段

1.4.1、 DOM0级

没有事件流。事件发生，立即处理。它是通过指定元素的属性值来绑定监听器。

<input id=”btn” οnclick=”func()” />
document.getElementsById(‘btn’).onclick

1.4.2、IE事件模型

IE的事件模型没有捕获阶段的，先执行元素的监听函数，然后事件的目标元素上升一直到document。只有IE浏览器能使用。

捕获：

标准： addEventListener(事件名称，事件函数，是否捕获) true捕获，事件名称没on，顺序执行，this指向对象

IE: attachEvent(事件名称，事件函数) 没有捕获，事件名称有on，事件是倒序执行，this指向window

解除绑定：

标准： removeEventListener （事件名称，事件函数，是否捕获）

IE： detachEvent (事件名称，事件函数 )；

1.4.3、DOM2级事件模型：

现代浏览器(IE9以下不算)都遵循了这个规范。

W3C制定的事件模型中，一次事件的发生包含三个过程：
a、事件捕获阶段。事件被从document一直向下传播到目标元素,在这过程中依次检查经过的节点是否注册了该事件的监听函数，若有就执行。
b、事件处理阶段。事件到达目标元素,执行目标元素的事件处理函数.
c、事件冒泡阶段。事件从目标元素上升一直到达document，同样依次检查经过的节点是否注册了该事件的监听函数，有则执行。

注意：所有的事件类型都会经历事件捕获阶段，但是只有部分事件会经历事件冒泡阶段,例如 submit事件就不会被冒泡。为了最大程度兼容各种浏览器，一般都是将事件处理函程序添加到事件流的冒泡阶段。

1、事件委托

利用冒泡事件，把一个元素响应事件（click、keydown......）的函数委托到另一个元素，比如ul里面有很多li，给li添加点击事件，可以委托给ul

委托的优点

1. 减少内存消耗

2. 动态绑定事件：因为事件是绑定在父层的。

2、阻止冒泡：

event是事件对象，但是只有IE支持，var oEvent=ev||event，不能反过来，因为var oEvent=ev||event中的||是遇真返回，返回第一个Boolean类型为true的值

在IE中执行var oEvent = ev || event;时，ev为undefined，即为false，而event为true。所以返回的是它所支持的event。在其他浏览器中，第一个ev为true，直接返回，不用理会后面的event。

而反过来写，var oEvent = event || ev;
IE下不会报错，直接返回第一个为true的event
但在其他浏览器中，event没有被定义，直接报错。

ev.cancelBubble = true阻止冒泡,只支持IE浏览器

event.stopPropagation( )阻止冒泡,W3C标准

evevt.preventDefault() :取消事件的默认行为，比如点击a标签默认跳转链接，点击button默认提交

event.target存着发生事件的目标元素

currentTarget:事件处理程序当前正在处理的事件的那个元素

1.4.4、DOM常见操作：

DOM操作(文档对象模型，标准化组织W3C)DOM学习

1、DOM创建

document.createElement(‘div1’)

document.createTextNode(‘div2’)

2、DOM查询

// 返回当前文档中第一个类名为 "myclass" 的元素

document.querySelector(‘.myclass’)

// 返回一个文档中所有的class为"note"

document.querySelectorAll(‘div.note’)

3、获取元素

var A = document.getElementById('x');

var A = document.getElementsByClassName('x');

var A = document.getElementsByTagName('x');

兼容的获取第一个子元素节点方法：

var first=ele.firstElementChild||ele.children[0];

3、DOM添加、删除、替换、插入、克隆

a.appendChild(e);// 添加子元素

a.removeChild(e);// 删除子元素

ele.replaceChild(el1, el2);// 替换子元素

parentElement.insertBefore(newElement, referenceElement);// 插入子元素

//克隆元素

ele.cloneNode(true) //该参数指示被复制的节点是否包括原节点的所有属性和子节点

4、属性操作

// 获取一个{name, value}的数组

var attrs = el.attributes;

// 获取、设置属性

var c = el.getAttribute('class');

el.setAttribute('class', 'highlight');

// 判断、移除属性

el.hasAttribute('class');

el.removeAttribute('class');

// 是否有属性设置

el.hasAttributes();

比如对于这样一个HTML元素：<div>content<br/></div>。

· innerHTML：内部HTML，content<br/>；

· outerHTML：外部HTML，<div>content<br/></div>；

· innerText：内部文本，content；

· outerText：内部文本，content；

上述四个属性不仅可以读取，还可以赋值。outerText和innerText的区别在于outerText赋值时会把标签一起赋值掉，另外xxText赋值时HTML特殊字符会被转义。

jQuery的.html()会调用.innerHTML来操作，但同时也会catch异常，然后用.empty(), .append()来重新操作。这是因为IE8中有些元素(比如input等)的.innerHTML是只读的

1.5标签嵌套规则及HTML转义

标签嵌套：1. 块元素可以嵌套块元素、也可以嵌套内联元素；

2. 特殊块元素只能嵌套内联元素（p h dt定义列表）；

3. 块元素不可以放在p中；

4. li可以嵌套div。

HTML转义：一些字符在html中具有特殊含义，比如‘<’标签，所以要插入字符实体。

字符实体分为三种：1.&一个和号

2.一个实体名称

3.一个实体编号以及分号

1.6HTML5

canvas svg localstorage sessionstorage session postMessage

2、CSS

1.清除浮动：

1.overflow:hidden;

2.clear:both;
3.　.clearfix:before,.clearfix:after {
content: "";
display: block;
clear: both;
}
.clearfix {
zoom: 1;
}
4、父元素设置高度

2.2.position:

relative：相对定位，相对于自身原来的位置定位.
absolute：绝对定位，相对于第一个父级有定位（不是static）的元素进行定位否则为相对于浏览器窗口。
1.盒子的绝对定位以最近的一个已定位的父级元素为基准；如果父级元素没有定位或没有父级元素，则以浏览器窗口为基准。
2.绝对定位的盒子会脱离标准文档流，不影响同一级的盒子元素位置。
fixed：固定定位，相对于浏览器窗口定位。

static：是position属性的默认值，表示块状元素保持在标准文档流中原有的位置，不做任何移动。就是按正常的布局流从上到下从左到右布局。

inherit：继承父元素的position属性

sticky：粘性定位，一个结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位，适用于一些特殊场景。
1.元素先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。而后，元素表现为在跨越特定阈值前为相对定位，之后为固定定位。

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

Z-index规定页面重叠次序，仅能在有定位的时候有效（即不是static都可以）

元素可以拥有负的Z-index值，z-index是在同级中比较的（同级中z-index小的元素，无论内部的子元素z-index有多大，都会处在父级元素中z-index较大的元素的底层）

2.3.优先级：

1.!important优先级最高

2.行内样式，权重为1000

3.id选择器，权重为0100

4.类选择器或者伪类，权重为0010

5.元素和伪元素，权重为0001

6.通配符，0000

伪类与伪元素：

伪类：用于向某些选择器添加特殊的效果。使用两个冒号：:first-line