整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
然語言處理中，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小時內與您取得聯系。
