HTML语义化
定义
语义化的HTML元素指的是那些使用最恰当的HTML进行标记的内容，在标记构成中并不关心内容显示。语义化的HTML是构建有效网站的基石。
用最恰当的标签来标记内容
例如在页面中需要加入一个标题h1，我们有很多种方式去实现，例如一个p标签用css来规定其样式，使这个p标签看起来像一个h1标签。但是对于浏览器而言，这个标题依旧是文本，而不是标题。
也就是说：语义化的html不会关心渲染样式，去掉css之后结构依然存在。
作用
- 即使在没有CSS样式的条件下，也能很好地呈现出内容结构、代码结构
- 使HTML结构变的清晰，有利于维护代码和添加样式
- 提升搜索引擎优化(SEO)的效果。和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
- 通常语义化HTML会使代码变的更少，使页面加载更快
搜索引擎优化SEO
定义
搜索引擎优化（search engine optimization）简称SEO，是一种透过了解搜索引擎的运作规则来调整网站，以提高目的网站在有关搜索引擎内排名的方式
- 简化代码结构，更利于搜索引擎分析抓取有用内容
- 每个页面只能出现一次H1标签，H2标签可以多次：H1权重很高，普遍认为仅次于title，一般资讯详情页的标题、商品详情页的标题，都放在H1里。
- 图片一定要添加alt属性，title属性可选，爬虫不认识图片上的内容，只能通过alt属性来判断
- 做好404页面，一般会加首页链接及错误提示，并测试其返回状态码为404：
- 用户体验友好，可以留住用户，不至于直接关闭页面；
- 有利于爬虫抓取，可以返回抓取其他页面。
- 网站结构呈扁平状树型，目录结构不宜过深，每个页面离首页最多点击不超过3次，过深不利于搜索引擎的抓取。
- 结构元素语义化
- 利用meta标签 keywords属性
减少页面加载时间的方法
- 尽量减少页面中重复的HTTP请求数量
- css样式的定义放置在文件头部
- Javascript脚本放在文件末尾
- 压缩合并Javascript、CSS代码
- 使用浏览器缓存，设置e-tag和control-cache，last-modified-date
- 使用事件委托，减少DOM操作
SVG和Canvas的优缺点
SVG
- 优点
-
矢量图，不依赖于像素，无限放大后不会失真。
-
以dom的形式表示，事件绑定由浏览器直接分发到节点上。
- 缺点
- dom形式，涉及到动画时候需要更新dom，性能较低。
Canvas
- 优点
-
定制型更强，可以绘制绘制自己想要的东西。
-
非dom结构形式，用JavaScript进行绘制，涉及到动画性能较高。
- 缺点
-
事件分发由canvas处理，绘制的内容的事件需要自己做处理。
-
依赖于像素，无法高效保真，画布较大时候性能较低。
src和href的区别
src是source的缩写，指向外部资源的位置，表示引用资源，替换当前元素，用在img，script，iframe上。在请求src资源的时候，会将其指向的资源下载并应用到当前文档。
href是指超文本引用，用在link和a标签上，href是引用，和页面相关联，在当前元素和引用资源之间建立联系。
DOM 事件有哪些阶段？
- 事件捕获阶段
事件从文档的根节点触发，随着dom树的结构向事件目标节点流去。途中经过各个层次的dom节点，并在各节点上触发捕获事件，直到到达目标节点。捕获阶段的任务就是建立这个事件传递路线（以便后面冒泡阶段顺着这条路线返回 Window） - 处于目标阶段
当事件不断的传递到目标节点的时候，最终在目标节点上触发这个事件，就是目标阶段 - 事件冒泡阶段
事件从发生事件所在节点，逐级传播到较为不具体的节点。
总的来说就是事件一开始从文档的根节点流向目标对象，然后在目标对象上被触发，之后再回溯到文档的根节点。
阻止冒泡：防止事件冒泡带来的不必要的错误和困扰，使用 stopPropagation()
优雅降级和渐进增强
优雅降级是指刚开始就构建完整的功能，然后再针对低版本浏览器进行兼容；
渐进增强是指针对低版本浏览器构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能，以达到更好的用户体验。
严格模式 use strict
use strict是一种ECMAscript 5 添加的（严格）运行模式,这种模式使得 Javascript 在更严格的条件下运行,使JS编码更加规范化的模式,消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为。
全局变量的显示声明,函数必须声明在顶层，不允许在非函数代码块内声明函数,arguments.callee也不允许使用；
消除代码运行的一些不安全之处，保证代码运行的安全,限制函数中的arguments修改，严格模式下的eval函数的行为和非严格模式的也不相同;
提高编译器效率，增加运行速度；
为未来新版本的Javascript标准化做铺垫。
JS数组方法
- join()
将数组的元素组起一个字符串，以separator为分隔符，省略的话则用默认用逗号为分隔符，该方法只接收一个参数：即分隔符。
- push()和pop()
push():可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度。
pop()：数组末尾移除最后一项，减少数组的 length 值，然后返回移除的项。
- shift() 和 unshift()
shift()：删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined 。
unshift():将参数添加到原数组开头，并返回数组的长度 。 - sort()
按升序排列数组项——即最小的值位于最前面，最大的值排在最后面。 - reverse()
反转数组项的顺序 - concat()
将参数添加到原数组中。这个方法会先创建当前数组一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组。在没有给 concat()方法传递参数的情况下，它只是复制当前数组并返回副本 - slice()
返回从原数组中指定开始下标到结束下标之间的项组成的新数组。 - splice()
可以实现删除、插入和替换 - indexOf()和 lastIndexOf() （ES5新增）
indexOf()：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中， 从数组的开头（位置 0）开始向后查找。
lastIndexOf：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中， 从数组的末尾开始向前查找。 - forEach() （ES5新增）
forEach()：对数组进行遍历循环，对数组中的每一项运行给定函数。 - map() （ES5新增）
指“映射”，对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。 - filter() （ES5新增）
filter()：“过滤”功能，数组中的每一项运行给定函数，返回满足过滤条件组成的数组。 - every() （ES5新增）
判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回true
- some() （ES5新增）
判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true。 - reduce()和 reduceRight() （ES5新增）
两者都会迭代数组的所有项，然后构建一个最终返回的值
reduce()方法从数组的第一项开始，逐个遍历到最后。而 reduceRight()则从数组的最后一项开始，向前遍历到第一项。接收两个参数：函数和基础的初始值。函数接收 4 个参数：前一个值、当前值、项的索引和数组对象。
js 字符串方法
-
toLowerCase(): 把字符串转为小写，返回新的字符串。
-
toUpperCase(): 把字符串转为大写，返回新的字符串。
-
charAt(): 返回指定下标位置的字符。如果index不在0-str.length(不包含str.length)之间，返回空字符串。
-
charCodeAt(): 返回指定下标位置的字符的unicode编码,这个返回值是 0 - 65535 之间的整数。如果index不在0-str.length(不包含str.length)之间，返回NaN。
-
indexOf(): 返回某个指定的子字符串在字符串中第一次出现的位置
-
lastIndexOf(): 返回某个指定的子字符串在字符串中最后出现的位置。
-
slice(): 返回字符串中提取的子字符串。
-
substring(): 提取字符串中介于两个指定下标之间的字符
-
substr(): 返回从指定下标开始指定长度的的子字符串
-
split(): 把字符串分割成字符串数组。
-
replace(): 在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
-
match(): 返回所有查找的关键字内容的数组。
js对象方法
- Object.assign()
将所有可枚举的自身属性的值从一个或多个源对象复制到目标对象。 - Object.create()
用指定的原型对象和属性创建一个新对象。
- Object.defineProperty()
将给定描述符描述的命名属性添加到对象。
- Object.defineProperties()
将给定描述符描述的命名属性添加到对象。
- Object.values()
返回一个数组，该数组包含与给定对象自己的所有可枚举字符串属性相对应的值。
- Object.setPrototypeOf()
设置对象的原型（其内部[[Prototype]]属性）
- Object.keys()
返回一个数组，其中包含给定对象自己的所有可枚举字符串属性的名称。
- Object.is()
判断两个值是否是相同的值
Object.is(0, -0); // false
Object.is(-0, -0); // true
Object.is(NaN, 0/0); // true
扫一扫
3196
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
