整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
然语言处理中，Transformers是一个非常重要的方法。它的主要想法是，计算词汇与词汇之间的相似分数（similarity score），以协助机器对句子的理解。
这篇文章将介绍两个升级版的Transformers，它们可以极大地减小对计算力和内存的消耗，因而，可以处理更长的句子、段落。
开始之前，先了解一下Transformers的基本想法。
这里用一个最典型的例子：I arrived at the bank after crossing the xxx（译：在穿过xxx之后，我到达了bank）。bank这里可以有两个意思，岸边或银行。
很明显，在理解这个句子的时候，xxx非常重要。如果xxx是河流，那么很可能bank意味着岸边。如果xxx是街道，bank很可能是银行。
在Transformer之前，机器一般会逐个输入词汇（从左到右、从右到左）到神经网络。这意味着，机器在读这句话的过程中，需要不断地尝试理解bank的意思，直到读到xxx的内容。
在Transformer中，机器会同时把整句话中的每个词汇输入到神经网络中， 使用自注意力机制（self-attention mechanism ）来计算词汇与词汇的关系，在此基础上，理解句子的内容。
相似分数（similarity score）用于量化词汇与词汇的关系，关系越强，分数越高。比如上述例子中，bank和xxx的关系会非常强，这个分数，也会协助机器对句子的理解。
然而，这么做有什么缺点呢？
这种方法，对计算力和内存的需求随词汇数量长度成二次增长。直观上来讲，自注意力机制需要计算每一对词汇对应的相似分数。如果有10个词汇，就会有100个分数。
为了介绍升级版Transformers，我们还可以把相似分数（上图左）看作是一个有向图（上图右）。节点是每个单词，中间的连线对应着相似分数。
自注意力机制可以看作是一个完全图，即每一对词之间都有连线。
升级版的目标：使计算力和内存的需求随词汇数量成线性增长，以处理大型段落。
主要想法：将完全图变为稀疏图（只有少量词之间有连线），连线的数量（即需要计算的相似分数）随句子长度线性增长。
为了实现这一想法，我们将引入全局-局部注意力机制（global-local attention mechanism）。
这里引入一个概念——语言符号（token），指的是输入神经网络的独立语言片段。一个单词是语言符号，完整的句子、段落也都是语言符号。
在全局-局部注意力机制中，语言符号将会被分成两个部分：
这样全局符号和长符号的设置，让我们可以完成线性增长的目标。
我们来看一个例子。考虑两个段落（如下图），第一个段落有两个句子，第二个段落有一个句子。蓝色标记段落，黄色是句子，灰色是词汇，它们都属于语言符号，会被独立输入到神经网络中训练，它们之间也可以建立连接，计算相似分数。
这里，每个段落都是全局符号，它会和段落中每一个语言符号（句子、单词）连接。每个句子也是全局符号，会和句子中的所有语言符号相连。单词是长符号，只能和全局符号以及相邻的语言符号相连。
按照这样的设定，在最终的相似分数表格中，很多语言符号之间是不需要计算相似分数的（如下图白色的位置），因而可以极大减小计算力与内存的需求。
上述Extended Transformer Construction方法，需要清楚地知道段落的结构，比如，有几个段落、句子。 在段落结构未知的情况下，怎么做呢？用BigBird。
BigBird模型，有三个主要的部分：
全局符号负责掌控整个信息流，与相邻符号的连接用于近距离词义的分析。随机连接是这个方法的核心，可以极大地减小所需连接的数量，这一点是可以被数学证明的。
BigBird，不需要语句结构，同时极大地提高可处理句子的长度。
如果只想记住一句话——想低损耗处理大规模数据，试试看添加一些随机性。
参考文献：
Avinava Dubey, "Constructing Transformers For Longer Sequences with Sparse Attention Methods", https://ai.googleblog.com/2021/03/constructing-transformers-for-longer.html, accessed on Mar. 27, 2021.
Jakob Uszkoreit, "Transformer: A Novel Neural Network Architecture for Language Understanding", https://ai.googleblog.com/2017/08/transformer-novel-neural-network.html, accessed on Mar. 27, 2021.
愿生活充满干货。一个认真科普的90后女博士，每周分享通信、计算机、网络及经济学最新最有趣的干货。喜欢的话，记得点赞、收藏和关注哟。欢迎留言及评论。
Web领域的一些基本概念。
Web（World Wide Web）叫全球广域网，俗称万维网（www）。
W3C（World Wide Web Consortium）叫万维网联盟，是国际最著名的标准化组织，制定了web标准。
一个网页包含了html元素 Css JavaScript，Html元素决定了网页结构，Css进行了修饰美化，JavaScript控制了交互行为和动态效果。
web标准包含了下面三个方面：
Html不是一种编程语言，而是描述性的标记语言，主要作用是定义内容的结构。
2014年10月万维网联盟（W3C）完成了HTML5标准制定，是目前最新的HTM版本。
HTML5的出世，标志着web进入一个富客户端（具有很强的交互性和体验的客户端程序）时代，像APP网页，小程序都是HTML5的应用场景。
Html5新特性：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <!--字符集-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="Author" content="">
<meta name="Keywords" content="关键词" />
<meta name="Description" content="页面描述" />
<title>页面标题</title>
</head>
<body>
</body>
</html>viewport用户网页的可视区域，一个针对移动网页优化的页面 viewport meta 标签如下：
<meta name="viewport" content="width=device-width, initial-scale=1.0">head区域元素：
meta title style link script base。
body区域元素：
块级元素：每个元素都是独占一行
行内元素：元素在同一行水平排列
inline-block：元素可以排列在同一行显示，并且可以设置一些块元素属性
通过Css：display:inline-block 改变元素。
很多元素都自带了默认样式，不同浏览器下默认样式表现不一致，为了统一或者满足一些需求我们需求将所有默认样式清空，这种处理方式又称为 Css Reset，比如：
*{
margin: 0;
padding: 0;
}另外一种方案使用normalize.css，它将不同浏览器下的默认样式进行了统一，
https://github.com/necolas/normalize.css
html中的单位是像素px
绝对单位
相对单位
属性：字体、行高、颜色、大小、背景、边框、滚动、换行、修饰属性（粗体、斜体、下划线）
p{
font-size: 20px; /*字体大小*/
line-height: 30px; /*行高*/
font-family: PingFang SC; /*字体类型：显示PingFang SC，没有就显示默认*/
font-style: italic ; /*italic表示斜体，normal表示不倾斜*/
font-weight: bold; /*粗体或写（400｜500｜600）*/
font-variant: small-caps; /*小写变大写*/
}行高（line-height）
一般约定行高、字号都是偶数，这样保证它们的差一定偶数除2得到整数，如下图所示：
line-height
文本垂直居中
对于单行文本可以设置行高=盒子高度。
对于多行元素的垂直对齐，我们可以使用vertical-align: middle属性，不过vertical-align 仅适用inline、inline-block 和 table-cell 元素。
vertical-align
vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;
/* 指定长度值 */
vertical-align: 10em;
vertical-align: 4px;
/* 使用百分比 */
vertical-align: 20%;
/* 全局值 */
vertical-align: inherit;
vertical-align: initial;
vertical-align: revert;
vertical-align: unset;内容溢出处理
filter:gray()理解优先级很重要，有助于我们排查一些问题。浏览器将优先级分为两部分：HTML的行内样式和选择器的样式。
行内样式
行内样式是直接作用在元素，它的优先级高于选择器样式，使用！important可以提高样式表的优先级。
<div style="font-size:16px">
</div>选择器样式
<style type="text/css">
p{
font-size: 16px;
}
</style>
<link rel="stylesheet" href="style/app.css">优先级规则如下：
优先级
我们通过下图这种标记方式，就可以判断出选择器的优先级。
优先级
两条经验法则
由多个基础选择器组合成的复杂选择器。
多个基础选择器连起来（中间没有空格）组成一个复合选择器（如：ul.nav）。复合选择器选中的元素将匹配其全部基础选择器，.box.nav 可以选中 class="box nav" ，但是不能选中 class="box"。
用于选中某种特定状态的元素，优先级（0，1，0）。
:nth-child(an+b)
更多参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS
伪元素选择器可以向HTML标记中未定义的地方插入内容，优先级（0，0，1）。
属性选择器用于根据HTML属性进行匹配元素，优先级（0，1，0）。
本文要点回顾，欢迎留言交流。
WEB标准是网页制作的标准，它不是一个标准，它是根据网页的不同组成部分生成的一系列标准。这些标准大部分由W3C起草发布，也有部分标准由ECMA起草发布
（1）W3C( World Wide Web Consortium )万维网联盟，创建于1994年是Web技术领域最具权威和影响力的国际中立性技术标准机构；是专门负责网络标准制定的非赢利组织。制定了结构标准和样式标准； （2）ECMA：欧洲电脑网商联合会（厂商协会），制定了行为标准；
HTML 指的是超文本标记语言 (Hyper Text Markup Language) www万维网的描述性语言。 XHTML指可扩展超文本标记语言（标识语言）（EXtensible HyperText Markup Language）是一种置标语言，表现方式与超文本标记语言（HTML）类似，不过语法上更加严格。 HTML5指的是HTML的第五次重大修改（第5个版本）
规划网站的所有内容和代码
整合资源<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
有三种：Strict（严格型)、
Trasitional（过渡型）、
Frameset（框架型）
（1）标签
txt 写在尖角号<>里的第一个单词，叫做标记，也叫做标签，也称作元素；
（2）属性
标记和属性用空格隔开，属性和属性值用等号连接，属性值必须放在双引号内 一个标记可以有多个属性，属性和属性之间用空格隔开，属性不分先后顺序
（1）常规标记(双标记)： <标记名称 属性1名="属性1值" 属性2名="属性2值" ………… >
（2）空标记（单标记）：<标记名 属性1名="属性1值" />
文本标题共有6个（h1-h6）
<h1>一级标题</h1>(唯一性,放网站LOGO)
<h2>二级标题</h2>
...
<h6>六级标题</h6>文本倾斜:
<i></i>
<em></em>
文本加粗：
<b></b>
<strong></strong><u></u><br>
<hr><sup></sup>
<sub></sub><p></p><span></span><ul>
<li>列表项内容</li>
<li>列表项内容</li>
<li>列表项内容</li>
........
</ul>? （2）有序列表
<ol>
<li>列表项内容</li>
<li>列表项内容</li>
<li>列表项内容</li>
........
</ol>type:规定列表中的列表项目的项目符号的类型 语法：<ol type=“ a"></ol> 1 数字顺序的有序列表（默认值）（1, 2, 3, 4）。 a 字母顺序的有序列表，小写（a, b, c, d）。 A 字母顺序的有序列表，大写（A,B,C,D) i 罗马数字，小写（i, ii, iii, iv）。 I 罗马数字，大写（i, ii, iii, iv）。 start 属性规定有序列表的开始点。(start的属性值必须是数字) 语法：<ol start="5"></ol>
? （3）自定义列表
<dl>
dt></dt>
<dd></dd>
</dl><a></a>
属性：
href='url'
target="_blank / _self";
title='文本提示'
拓展：
rel='nofollow';<img>
属性：
src='url';
alt=' 标签 实例 带有指定替代文本的图像'
title='文本提示'
width=''
height=''
border=''alt:
1、alt属性是考虑到不支持图像显示或者图像显示被关闭的浏览器的用户，
以及视觉障碍的用户和使用屏幕阅读器的用户。当图片不显示的时候，图片的替换文字。
2、alt属性值的长度必须少于100个英文字符
3、alt属性是img标签的必须属性，如果没有特别意义的图片，可以写alt=""
4、alt属性是搜索引擎判断图片与文字是否相关的重要依据， alt属性添加到img主要的目的才是为了SEO
title:
1、title属性并不是必须的。
2、title属性规定元素的额外信息，有视觉效果， 当鼠标放到文字或是图片上时有文字显示。
3、title属性并不作为搜索引擎抓取图片的参考， 更多倾向于用户体验的考虑。
（同级）
1)当当前文件与目标文件在同一目录下， 直接书写目标文件的文件名+扩展名；
（上级找下级）
2)当当前文件与目标文件所处的文件夹在同一目录下，写法如下：
文件夹名/目标文件全称+扩展名；
（下级找上级）
3)当当前文件所处的文件夹和目标文件在同一目录下，写法如下：
../目标文件文件名+扩展名；
<!-- 注释 --><table>
<tr>
<td></td>
<td></td>
</tr>
</table>
<!--
table 为表格
tr 行
td 列（每一个单元格）
-->1）width="表格的宽度"
2）height="表格的高度"
3）border="表格的边框"
4）bordercolor="边框色"
5）cellspacing="单元格与单元格之间的间距"
6）cellpadding=“单元格与内容之间的距离"
7）align="表格水平对齐方式"
取值：left、right、center、
valign=“垂直对齐” top\bottom\middle
8）合并单元格属性：(td)
合并列： colspan=“所要合并的单元格的列数"
合并行： rowspan=“所要合并单元格的行数”<thead></thead>
<tbody></tbody>
<tfoot></tfoot><colgroup span="value"></colgroup>
<!--span属性为把几列分为一组--><th></th><caption></caption>1、单元格间距：border-spacing:value; 说明：单元格间距(该属性必须给table添加) 表示单元格边框之间的距离， 不可取负值 2、合并相邻单元格边框：border-collapse:separate/collapse; 说明：合并相邻单元格边框 (该属性必须给table添加) separate(边框分开)默认值； collapse(边框合并) 3、无内容时单元格的设置：empty-cells:show/hide; 说明：定义当单元格无内容时，是否显示该单元格的边框区域；show：显示 ；hide：隐藏； 4、显示单元格行和列的算法(加快运行的速度)： table-layout:auto/fixed;
本文转自知乎号：千锋HTML5学院
*请认真填写需求信息，我们会在24小时内与您取得联系。
