理解<meta>元素

什么是Metadata

Metadata，又称元数据、诠释资料、中介资料、中继资料、后设资料等，**为描述其他资料资讯的资料**。有三种不同类型的元资料，分别是记叙性元资料、结构性元资料和管理性元资料。「[元数据 - 维基百科](https://zh.wikipedia.org/wiki/%E5%85%83%E6%95%B0%E6%8D%AE)」
我个人理解就是就像是照片的`exif` 信息一样，对于普通用户来说没什么意义，但是对于描述这张照片却有很重要的意义，它在多个维度对照片进行了描述。

html中的metadata

html中的元数据向用户提供了页面和网站的语义化的信息。
包括 title address meta !DOCTYPE link

<meta>元素？

旨在帮助搜索引擎索引文档的配置文件可能会定义诸如“作者”，“版权”，“关键字”等属性。

元素的属性：
meta
meta标签由key/value组成，name属性定义了属性名 content 属性定义了属性值，例如：
<META name="Author" content="Arnaud Le Hors"> 这个meta定义了告诉我们author 是 Arnaud Le Hors。
更多关于meta的信息参考 The global structure of an HTML document

<meta>的作用

1. 搜索引擎优化（seo）;
2. 定义页面使用语言;
3. 自动刷新并指向新的页面;  _这个功能已经不建议使用了_[Use standard redirects - don’t break the back button!](https://www.w3.org/QA/Tips/reback)
4. 实现网页转换时的动态效果;
5. 控制页面缓冲;
6. 网页定级评价;
7. 控制网页显示的窗口等

具体的一些情参阅网友整理的metaHTML meta标签总结,HTML5 head meta属性整理-前端开发博客

利用一些浏览器自定义的属性能够为网页提供更好的兼容性，最明显的例子就是360浏览器切换内核的meta 和IE浏览器优先选用最高版本渲染的meta标签

关于IE浏览器的<meta>

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
— IE=edge means IE should use the latest (edge) version of its rendering engine
— chrome=1means IE should use the Chrome rendering engine if installed
关于IE=edge没什么好说的，就是使用指定的版本渲染网页，
但是chrome=1 已经是2014年就被终止了的技术了

背景知识：为了不受IE的气，Google在2009年推出了chrome浏览器，为了抢占市场，提升用户体验，减轻前端开发人员的工作量，Google 推出了一款用于 IE 的插件 Google Frame，中文名字叫“Google 浏览器内嵌框架”。它的功能是将 IE 的浏览器内核替换为 Chrome 自己的webkit和js引擎。

要使chrome=1 生效的话至少要同时满足两个条件：

1. 电脑里安装了Chrome浏览器；
2. IE浏览器安装了 `GCF` 插件[Chrome Frame - The Chromium Projects](http://www.chromium.org/developers/how-tos/chrome-frame-getting-started)；

由于历史的原因（Chrome的市场份额越来越大）Google 在2014.02.25 终止了这个服务，不再需要维护这个插件了，也不再建议用户使用这个插件了。
所以，这个meta标签可以改为：
<meta http-equiv="X-UA-Compatible" content="IE=edge">
更多关于IE浏览器标签的详细信息参考Specifying legacy document modes (Internet Explorer) | Microsoft Docs

关于360浏览器的<meta>

浏览器默认内核的指定只需在head标签中添加一行代码即可：
若页面需默认用极速核，增加标签：<meta name="renderer" content="webkit">
若页面需默认用ie兼容内核，增加标签：<meta name="renderer" content="ie-comp">
若页面需默认用ie标准内核，增加标签：<meta name="renderer" content="ie-stand">
content的取值为webkit,ie-comp,ie-stand之一，区分大小写，分别代表用webkit内核，IE兼容内核，IE标准内核。
更多信息参考360浏览器的帮组文档 360安全浏览器_帮助
注意：在360浏览器中可以在高级设置中针对不同网站设置不同的内核使用规则（通过切换浏览器的模式其实也是在设置规则），而且这个优先级要高于标签

参考资料

The global structure of an HTML document
HTML Techniques for Web Content Accessibility Guidelines 1.0

Chrome Frame - The Chromium Projects
Chromium Blog: Retiring Chrome Frame
Chrome Frame 将停止支持，历史使命已完成
Rendering HTML5 in older browsers with Google Chrome Frame - HTML5 Rocks

out of date
使用Chrome Frame，彻底解决浏览器兼容问题

JavaScript—Map vs. ForEach

原文链接 有删节
javascript中的 map 和 forEach 方法有什么共同点和区别呢？

也许你在工作中已经接触到了 Array.prototype.map() 和 Array.prototype.forEach() 那么他们有什么不同呢？

Map & ForEach 的定义

首先，我们开一下 MDN上的定义

  • forEach()) 方法对数组的每个元素执行一次提供的函数。
  • map()方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
    具体是什么意思呢？
    forEach() 方法不会返回任何有用的值，他的返回值是 undefined。forEach 方法按升序为数组中含有效值的每一项执行一次callback 函数，在这个回调函数中允许你去改变原来的数组。
    map() 方法会给原数组中的每个元素都按顺序调用一次 callback 函数。不同点是callback 每次执行后的返回值（包括 undefined）组合起来形成一个新数组。

    示例

    考虑下面的一个数组，如果我们想让数组的每一项的值变成原来的两倍，我们可以用 map 和 forEach
    1
    let arr = [1, 2, 3, 4, 5];

forEach
注意：你不能从 forEach 通过 return 返回你想要的值，return 的值会被自动忽略。
code

1
2
3
arr.forEach((num, index) => {
    return arr[index] = num * 2;
});

result

1
// arr = [2, 4, 6, 8, 10]

map
code

1
2
3
let doubled = arr.map(num => {
    return num * 2;
});

result

1
// doubled = [2, 4, 6, 8, 10]

性能

下面的图片展示了测试性能


真如你所看到的，在我的电脑上 forEach() 比 map() 慢了70%，根据电脑配置和浏览器不同，这个测试结果会有差异，你可以在jsPerf上运行这个测试用例。

函数式编程的考虑

函数式编程是一件非常有意思的事情。
如果你喜欢函数式编程，那么理解 map() 方法是很重要的。因为 forEach() 方法很可能会改变原来的数组，map() 则会返回一个新的数组 ，保证原数组不会被修改。

谁才是更好的选择呢？

这就要看你的需求了。

对于 ForEach()，如果你不想更改数组中的数据，而是想用它做一些事情，比如将其保存到数据库或在控制台输出，那么他是一个不错的选择。

1
2
3
4
5
6
7
8
let arr = ['a', 'b', 'c', 'd'];
arr.forEach((letter) => {
    console.log(letter);
});
// a
// b
// c
// d

在需要更改数据时，map（） 可能更可取。 它不仅速度更快，而且返回一个新的数组。 这意味着我们可以和其他方法（map（），filter（），reduce（）等）一起实现链式调用。

1
2
3
let arr = [1, 2, 3, 4, 5];
let arr2 = arr.map(num => num * 2).filter(num => num > 5);
// arr2 = [6, 8, 10]

上面的方法，我们先 把 arr 的每一项变成原来的两倍，然后再过滤出 大于5的元素，最后得到一个新的数组 arr2

总结

  • map() 会分配内存并存储返回的值， forEach()返回的值永远是 undefined
  • forEach()允许你再回调函数中改变原来的数组， map() 则会返回一个新的数组。

参考链接

JavaScript — Map vs. ForEach – codeburst

SVN导出历史版本-macOS-cornerstone

svn导出某一个特定的历史版本，有时候需要拷贝出项目某个版本的代码，但是又不希望覆盖现在的代码或者回退历史版本，这时候就需要用到导出历史版本。
以下方法的实现是针对Mac平台下的 cornerstone 来实现的，如果使用Windows系统请访问参考链接

具体步骤

  1. 选中需要导出的项目，右键你会看到如下的界面

  2. 点击 export 你会看到如下的导出选项界面

    1. 依此填写文件夹的名字
    2. 选择文件存放路径
    3. 在 Revision 选择你需要导出的版本就可以了

在第三步中你可以根据版本号、日期甚至从log中选择一个版本。
tip: 记得勾选在文件夹哦～～

到此为止，你可以导出任意版本的项目了，而且不会破坏现有的项目。

多说一句： 如果你用的是小乌龟（Windows）你可以访问参考链接里面的文章。

参考连接

svn导出历史版本 - CSDN博客

网格布局 Grid-layout

原文链接有删减

是么是grid layout

This CSS module defines a two-dimensional grid-based layout system, optimized for user interface design. In the grid layout model, the children of a grid container can be positioned into arbitrary slots in a predefined flexible or fixed-size layout grid. CSS Grid Layout Module Level 1

发展

从2012年的第一版草案到2017年的正式标准经历了5年的发展。

EC14B40B-C22D-43C1-A4F2-EFC19212290E

基本名词解释

  • 网格容器(Grid Containers)
  • 网格单元格(Grid Cell) A grid cell is the intersection of a grid row and a grid column
  • 网格轨道(Grid Track) it is the space between two adjacent grid lines
  • 网格线(Grid Lines) Grid lines are the horizontal and vertical dividing lines of the grid
  • 网格区域(Grid area) A grid area is the logical space used to lay out one or more grid items

代码示例

一段基本的布局：

1
2
3
4
5
6
7
8
<div class="wrapper">
  <div class='item1'>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

把wrapper设置为 grid 对应的css:

1
2
3
.wrapper {
    display: grid;
}

我们将会看到，对布局并没有什么影响

要产生二维布局空间，我们需要定义行和列，我们将会用到. grid-template-row 和 grid-template-column 属性。

1
2
3
4
5
6
.wrapper {
    display: grid;
    grid-template-columns: 100px 100px 100px; /*设置三个宽度我哦100px的列*/
    grid-template-rows: 50px 50px; /*设置两个高度为50px 的行*/
    grid-gap: 10px; /*设置网格间距*/
}

我们就会得到一个两行三列的布局如下图：

注意：部分CSS样式没有和布局无关没有体现

为了确保完全理解值和实际布局的对应关系，我们修改一下css代码

1
2
3
4
5
.wrapper {
    display: grid;
    grid-template-columns: 200px 50px 100px;
    grid-template-rows: 100px 30px;
}

你看到的是修改过列和行的宽高的布局

接下来我们创建一个3*3的网格

1
2
3
4
5
.wrapper {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
}

你将看到如下的布局，为什么没有三行呢？因为 html 里只有6个div。

类似合并单元格的效果（通过网格线定位）

1
2
3
4
.item1 {
    grid-column-start: 1; /*从第一列开始*/
    grid-column-end: 4; /*到第四列结束*/
}

1
2
3
4
/*简写上面的代码*/
.item1 {
    grid-column： 1/4；
}

布局将会变成如下的样子，第一个单元格占据了三列的宽度

网格线(Grid Lines) 可以明确的看到网格线的编号

结合行的网格线来调整布局

1
2
3
4
5
6
7
8
9
10
11
12
.item1 {
    grid-column-start: 1;
    grid-column-end: 3;
}
.item3 {
    grid-row-start: 2;
    grid-row-end: 4;
}
.item4 {
    grid-column-start: 2;
    grid-column-end: 4;
}

看到最新的布局如下图

浏览器兼容性

76.92% 的浏览器支持这个属性

注意事项

  1. 不会脱离文档流
    证明：脱离文档流会开启新的BFC，如果父元素不做任何处理会出现高度塌陷的问题，通过实验父元素高度没有塌陷。
  2. 不支持的属性，由于不是 box container 而是 grid container 所以部分属性不再支持
    CSS Grid Layout Module Level 1
    多列布局模块中的所有 column-* 属性运用在网格容器上将失效
    float 和 clear 使用在网格项目（网格单元格Grid Cell）上将失效
    vertical-align 使用在网格单元格上将失效
    ::first-line和 ::first-letter 这样的伪元素不能应用在网格容器上

参考资料

CSS Grid Layout Module Level 1
Learn CSS Grid in 5 Minutes – freeCodeCamp
How to prototype websites quickly with CSS Grid – freeCodeCamp
How to make your HTML responsive by adding a single line of CSS