5分鐘了解谷歌最新算法-超長(zhǎng)的文字段落，機(jī)器是如何讀

5分鐘了解谷歌最新算法-超長(zhǎng)的文字段落，機(jī)器是如何讀懂的？

然語言處理中，Transformers是一個(gè)非常重要的方法。它的主要想法是，計(jì)算詞匯與詞匯之間的相似分?jǐn)?shù)（similarity score），以協(xié)助機(jī)器對(duì)句子的理解。

這篇文章將介紹兩個(gè)升級(jí)版的Transformers，它們可以極大地減小對(duì)計(jì)算力和內(nèi)存的消耗，因而，可以處理更長(zhǎng)的句子、段落。

開始之前，先了解一下Transformers的基本想法。

Transformers的基本想法

這里用一個(gè)最典型的例子：I arrived at the bank after crossing the xxx（譯：在穿過xxx之后，我到達(dá)了bank）。bank這里可以有兩個(gè)意思，岸邊或銀行。

很明顯，在理解這個(gè)句子的時(shí)候，xxx非常重要。如果xxx是河流，那么很可能bank意味著岸邊。如果xxx是街道，bank很可能是銀行。

在Transformer之前，機(jī)器一般會(huì)逐個(gè)輸入詞匯（從左到右、從右到左）到神經(jīng)網(wǎng)絡(luò)。這意味著，機(jī)器在讀這句話的過程中，需要不斷地嘗試?yán)斫鈈ank的意思，直到讀到xxx的內(nèi)容。

在Transformer中，機(jī)器會(huì)同時(shí)把整句話中的每個(gè)詞匯輸入到神經(jīng)網(wǎng)絡(luò)中，使用自注意力機(jī)制（self-attention mechanism ）來計(jì)算詞匯與詞匯的關(guān)系，在此基礎(chǔ)上，理解句子的內(nèi)容。

相似分?jǐn)?shù)（similarity score）用于量化詞匯與詞匯的關(guān)系，關(guān)系越強(qiáng)，分?jǐn)?shù)越高。比如上述例子中，bank和xxx的關(guān)系會(huì)非常強(qiáng)，這個(gè)分?jǐn)?shù)，也會(huì)協(xié)助機(jī)器對(duì)句子的理解。

然而，這么做有什么缺點(diǎn)呢？

這種方法，對(duì)計(jì)算力和內(nèi)存的需求隨詞匯數(shù)量長(zhǎng)度成二次增長(zhǎng)。直觀上來講，自注意力機(jī)制需要計(jì)算每一對(duì)詞匯對(duì)應(yīng)的相似分?jǐn)?shù)。如果有10個(gè)詞匯，就會(huì)有100個(gè)分?jǐn)?shù)。

為了介紹升級(jí)版Transformers，我們還可以把相似分?jǐn)?shù)（上圖左）看作是一個(gè)有向圖（上圖右）。節(jié)點(diǎn)是每個(gè)單詞，中間的連線對(duì)應(yīng)著相似分?jǐn)?shù)。

自注意力機(jī)制可以看作是一個(gè)完全圖，即每一對(duì)詞之間都有連線。

升級(jí)版： Extended Transformer Construction

升級(jí)版的目標(biāo)：使計(jì)算力和內(nèi)存的需求隨詞匯數(shù)量成線性增長(zhǎng)，以處理大型段落。

主要想法：將完全圖變?yōu)橄∈鑸D（只有少量詞之間有連線），連線的數(shù)量（即需要計(jì)算的相似分?jǐn)?shù)）隨句子長(zhǎng)度線性增長(zhǎng)。

為了實(shí)現(xiàn)這一想法，我們將引入全局-局部注意力機(jī)制（global-local attention mechanism）。

這里引入一個(gè)概念——語言符號(hào)（token），指的是輸入神經(jīng)網(wǎng)絡(luò)的獨(dú)立語言片段。一個(gè)單詞是語言符號(hào)，完整的句子、段落也都是語言符號(hào)。

在全局-局部注意力機(jī)制中，語言符號(hào)將會(huì)被分成兩個(gè)部分：

全局符號(hào)（global token），它們可以與任何語言符號(hào)連接
長(zhǎng)符號(hào)（long token），它們只可以與全局符號(hào)、相鄰的語言符號(hào)連接

這樣全局符號(hào)和長(zhǎng)符號(hào)的設(shè)置，讓我們可以完成線性增長(zhǎng)的目標(biāo)。

我們來看一個(gè)例子。考慮兩個(gè)段落（如下圖），第一個(gè)段落有兩個(gè)句子，第二個(gè)段落有一個(gè)句子。藍(lán)色標(biāo)記段落，黃色是句子，灰色是詞匯，它們都屬于語言符號(hào)，會(huì)被獨(dú)立輸入到神經(jīng)網(wǎng)絡(luò)中訓(xùn)練，它們之間也可以建立連接，計(jì)算相似分?jǐn)?shù)。

這里，每個(gè)段落都是全局符號(hào)，它會(huì)和段落中每一個(gè)語言符號(hào)（句子、單詞）連接。每個(gè)句子也是全局符號(hào)，會(huì)和句子中的所有語言符號(hào)相連。單詞是長(zhǎng)符號(hào)，只能和全局符號(hào)以及相鄰的語言符號(hào)相連。

按照這樣的設(shè)定，在最終的相似分?jǐn)?shù)表格中，很多語言符號(hào)之間是不需要計(jì)算相似分?jǐn)?shù)的（如下圖白色的位置），因而可以極大減小計(jì)算力與內(nèi)存的需求。

進(jìn)一步升級(jí)：BigBird

上述Extended Transformer Construction方法，需要清楚地知道段落的結(jié)構(gòu)，比如，有幾個(gè)段落、句子。在段落結(jié)構(gòu)未知的情況下，怎么做呢？用BigBird。

BigBird模型，有三個(gè)主要的部分：

一系列全局符號(hào)，和每一個(gè)語言符號(hào)相連（圖左一）
所有的語言符號(hào)和臨近的符號(hào)相連（圖左二）
所有的語言符號(hào)和隨機(jī)的其他符號(hào)相連（圖左三）

全局符號(hào)負(fù)責(zé)掌控整個(gè)信息流，與相鄰符號(hào)的連接用于近距離詞義的分析。隨機(jī)連接是這個(gè)方法的核心，可以極大地減小所需連接的數(shù)量，這一點(diǎn)是可以被數(shù)學(xué)證明的。

BigBird，不需要語句結(jié)構(gòu)，同時(shí)極大地提高可處理句子的長(zhǎng)度。

如果只想記住一句話——想低損耗處理大規(guī)模數(shù)據(jù)，試試看添加一些隨機(jī)性。

參考文獻(xiàn)：

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.

愿生活充滿干貨。一個(gè)認(rèn)真科普的90后女博士，每周分享通信、計(jì)算機(jī)、網(wǎng)絡(luò)及經(jīng)濟(jì)學(xué)最新最有趣的干貨。喜歡的話，記得點(diǎn)贊、收藏和關(guān)注喲。歡迎留言及評(píng)論。

TML（網(wǎng)頁）

Web領(lǐng)域的一些基本概念。

WEB

Web（World Wide Web）叫全球廣域網(wǎng)，俗稱萬維網(wǎng)（www）。

W3C

W3C（World Wide Web Consortium）叫萬維網(wǎng)聯(lián)盟，是國(guó)際最著名的標(biāo)準(zhǔn)化組織，制定了web標(biāo)準(zhǔn)。

WEB標(biāo)準(zhǔn)

一個(gè)網(wǎng)頁包含了html元素 Css JavaScript，Html元素決定了網(wǎng)頁結(jié)構(gòu)，Css進(jìn)行了修飾美化，JavaScript控制了交互行為和動(dòng)態(tài)效果。

web標(biāo)準(zhǔn)包含了下面三個(gè)方面：

結(jié)構(gòu)標(biāo)準(zhǔn)（HTML）：用于對(duì)網(wǎng)頁元素進(jìn)行整理和分類。
表現(xiàn)標(biāo)準(zhǔn)（CSS）：用于設(shè)置網(wǎng)頁元素的版式、顏色、大小等外觀樣式。
行為標(biāo)準(zhǔn)（JavaScript）：用于定義網(wǎng)頁的交互和行為。

HTML定義

Html不是一種編程語言，而是描述性的標(biāo)記語言，主要作用是定義內(nèi)容的結(jié)構(gòu)。

2014年10月萬維網(wǎng)聯(lián)盟（W3C）完成了HTML5標(biāo)準(zhǔn)制定，是目前最新的HTM版本。

HTML5的出世，標(biāo)志著web進(jìn)入一個(gè)富客戶端（具有很強(qiáng)的交互性和體驗(yàn)的客戶端程序）時(shí)代，像APP網(wǎng)頁，小程序都是HTML5的應(yīng)用場(chǎng)景。

Html5新特性：

用于繪畫的 canvas 元素。
用于媒介回放的 video 和 audio 元素。
對(duì)本地離線存儲(chǔ)的更好的支持。
新的特殊內(nèi)容元素，比如 article、footer、header、nav、section。
新的表單控件，比如 calendar、date、time、email、url、search。

頁面基本結(jié)構(gòu)

<!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="關(guān)鍵詞" />
    <meta name="Description" content="頁面描述" />
    <title>頁面標(biāo)題</title>
</head>
<body>

</body>
</html>

關(guān)于viewport

viewport用戶網(wǎng)頁的可視區(qū)域，一個(gè)針對(duì)移動(dòng)網(wǎng)頁優(yōu)化的頁面 viewport meta 標(biāo)簽如下：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width：控制 viewport 的大小，可以指定的一個(gè)值，如 600，或者特殊的值，如 device-width 為設(shè)備的寬度（單位為縮放為 100% 時(shí)的 CSS 的像素）。
height：和 width 相對(duì)應(yīng)，指定高度。
initial-scale：初始縮放比例，也即是當(dāng)頁面第一次 load 的時(shí)候縮放比例。
maximum-scale：允許用戶縮放到的最大比例。
minimum-scale：允許用戶縮放到的最小比例。
user-scalable：用戶是否可以手動(dòng)縮放。

常見元素

head區(qū)域元素：

meta title style link script base。

body區(qū)域元素：

div、section、article、aside、header、footer
p
span、em、strong
table、thead、tbody、tr、td
ul、ol、dl、dt、dd
a
form、input、select、textarea、button

元素分類

塊級(jí)元素：每個(gè)元素都是獨(dú)占一行

address – 地址
blockquote – 塊引用
center – 舉中對(duì)齊塊
dir – 目錄列表
div – 常用塊級(jí)容易，也是css layout的主要標(biāo)簽
dl – 定義列表
fieldset – form控制組
form – 交互表單
h1-h6 – 標(biāo)題
hr – 水平分隔線
isindex – input prompt
menu – 菜單列表
noframes – frames可選內(nèi)容，（對(duì)于不支持frame的瀏覽器顯示此區(qū)塊內(nèi)容）
noscript – ）可選腳本內(nèi)容（對(duì)于不支持script的瀏覽器顯示此內(nèi)容）
ol – 排序表單
p – 段落
pre – 格式化文本
table – 表格
ul – 非排序列表

行內(nèi)元素：元素在同一行水平排列

a – 錨點(diǎn)
abbr – 縮寫
acronym – 首字
b – 粗體
big – 大字體
br – 換行
em – 強(qiáng)調(diào)
font – 字體設(shè)定(不推薦)
i – 斜體
img – 圖片
input – 輸入框
label – 表格標(biāo)簽
s – 中劃線(不推薦)
select – 項(xiàng)目選擇
small – 小字體文本
span – 常用內(nèi)聯(lián)容器，定義文本內(nèi)區(qū)塊
strike – 中劃線
strong – 粗體強(qiáng)調(diào)
sub – 下標(biāo)
sup – 上標(biāo)
textarea – 多行文本輸入框
tt – 電傳文本
u – 下劃線
var – 定義變量

inline-block：元素可以排列在同一行顯示，并且可以設(shè)置一些塊元素屬性

通過Css：display:inline-block 改變?cè)亍?/span>

元素默認(rèn)樣式

很多元素都自帶了默認(rèn)樣式，不同瀏覽器下默認(rèn)樣式表現(xiàn)不一致，為了統(tǒng)一或者滿足一些需求我們需求將所有默認(rèn)樣式清空，這種處理方式又稱為 Css Reset，比如：

*{
    margin: 0;
    padding: 0;
}

另外一種方案使用normalize.css，它將不同瀏覽器下的默認(rèn)樣式進(jìn)行了統(tǒng)一，

https://github.com/necolas/normalize.css

CSS（層疊樣式表）

Css的單位

html中的單位是像素px

絕對(duì)單位

in：英寸，1in=2.54cm=96px
pc：皮卡，1皮卡=1/16英寸
pt：點(diǎn)，1點(diǎn)=1/72英寸
px：像素，1點(diǎn)=1/96英寸

相對(duì)單位

em：font-size中相對(duì)于父元素的字體大小，在元素屬性中使用是相對(duì)于自身字體大小
rem：根元素的字體大小，在元素屬性中使用是相對(duì)于根元素字體大小
1h：元素的line-height
vw：視窗寬度的1%
vh：視窗高度的1%
vmin：視窗較小尺寸的1%
vmax：視圖大尺寸的1%

字體屬性

屬性：字體、行高、顏色、大小、背景、邊框、滾動(dòng)、換行、修飾屬性（粗體、斜體、下劃線）

p{
    font-size: 20px;        /*字體大小*/
    line-height: 30px;      /*行高*/
    font-family: PingFang SC;   /*字體類型：顯示PingFang SC，沒有就顯示默認(rèn)*/
    font-style: italic ;        /*italic表示斜體，normal表示不傾斜*/
    font-weight: bold;  /*粗體或?qū)懀?00｜500｜600）*/
    font-variant: small-caps;  /*小寫變大寫*/
}

行高（line-height）

一般約定行高、字號(hào)都是偶數(shù)，這樣保證它們的差一定偶數(shù)除2得到整數(shù)，如下圖所示：

line-height

文本垂直居中

對(duì)于單行文本可以設(shè)置行高=盒子高度。

對(duì)于多行元素的垂直對(duì)齊，我們可以使用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;
/* 指定長(zhǎng)度值 */
vertical-align: 10em;
vertical-align: 4px;
/* 使用百分比 */
vertical-align: 20%;
/* 全局值 */
vertical-align: inherit;
vertical-align: initial;
vertical-align: revert;
vertical-align: unset;

文本屬性

letter-spacing: 0.5em ; 單個(gè)字母之間的間距。
word-spacing: 1em; 單詞之間的間距。
text-decoration: none; none 去掉下劃線、underline 下劃線、line-through 中劃線、overline 上劃線。
color:red; 字體顏色。
text-align: center; 文字對(duì)齊方式，屬性值可以是：left、right、center、justify。
text-transform: lowercase; uppercase（大寫）、lowercase（小寫）capitalize（首字母大寫）。
text-indent:10px; 文本首行縮進(jìn)。
text-shadow:2px 2px #ff0000; 文字陰影效果。
white-space: normal; 設(shè)置元素空白處理，normal，nowrap，break-spaces。

Overflow屬性

內(nèi)容溢出處理

visible：默認(rèn)值，多余的內(nèi)容會(huì)全部顯示出來。
hidden：超過元素的內(nèi)容隱藏。
auto：內(nèi)容超出顯示滾動(dòng)條。
scroll：Windows總是顯示滾動(dòng)條。Mac和auto 屬性相同。

濾鏡

filter:gray()

背景屬性

background-color:#fff; 設(shè)置背景顏色。
background-image:url(img.png); 設(shè)置圖像為背景。
background-repeat: no-repeat; no-repeat不要平鋪，repeat-x橫向平鋪；repeat-y縱向平鋪。
background-position:center top; 設(shè)置背景圖片在容器的位置，top，bottom，left，right，center。
background-attachment:scroll; 設(shè)置背景圖片隨滾動(dòng)條移動(dòng)，scroll（跟隨滾動(dòng)），fixed（固定）。
background-origin:border-box; css3，border-box（背景相對(duì)于邊框框定位），padding-box（背景相對(duì)于填充框定位），content-box（背景相對(duì)于內(nèi)容框定位）。
background-clip:border-box; css3，背景裁切。
background-size:cover; css3，調(diào)整尺寸，contain（在不裁剪或拉伸圖像的情況下，在其容器內(nèi)盡可能大地縮放圖像），cover（盡可能大地縮放圖像以填充容器，必要時(shí)拉伸圖像。），auto（在相應(yīng)的方向上縮放背景圖像，以保持其固有比例。）。

優(yōu)先級(jí)

理解優(yōu)先級(jí)很重要，有助于我們排查一些問題。瀏覽器將優(yōu)先級(jí)分為兩部分：HTML的行內(nèi)樣式和選擇器的樣式。

行內(nèi)樣式

行內(nèi)樣式是直接作用在元素，它的優(yōu)先級(jí)高于選擇器樣式，使用！important可以提高樣式表的優(yōu)先級(jí)。

<div style="font-size:16px">
</div>

選擇器樣式

<style type="text/css">
    p{
      font-size: 16px;
    }
</style>
<link rel="stylesheet" href="style/app.css">

優(yōu)先級(jí)規(guī)則如下：

如果選擇器的ID數(shù)量最多的勝出。
如果ID數(shù)量一致，那么擁有最多類的選擇器勝出。
如果以上兩次比較都一致，那么擁有最多標(biāo)簽名的選擇器勝出。

優(yōu)先級(jí)

我們通過下圖這種標(biāo)記方式，就可以判斷出選擇器的優(yōu)先級(jí)。

優(yōu)先級(jí)

兩條經(jīng)驗(yàn)法則

盡量不要使用ID選擇器，因?yàn)樗鼤?huì)大幅提升優(yōu)先級(jí)。當(dāng)需要覆蓋這個(gè)選擇器時(shí)，通常找不到另一個(gè)有意義的ID，于是就需要復(fù)制原來的選擇器加上另一個(gè)類來讓它區(qū)別于想要覆蓋的選擇器。
不要使用！important。它比ID更難覆蓋，一旦用了它，想要覆蓋原先的聲明，就需要再加上一個(gè)！important，而且依然要處理優(yōu)先級(jí)的問題。

基礎(chǔ)選擇器

類型或標(biāo)簽選擇器，匹配目標(biāo)元素的標(biāo)簽名，如：p，input[type=text]，優(yōu)先級(jí)（0，0，1）。
類選擇器，匹配class屬性中有指定類名的元素，如：.box，優(yōu)先級(jí)（0，1，0）。
ID選擇器，匹配擁有指定ID屬性的元素，如：#id，優(yōu)先級(jí)（1，0，0）。
通用選擇器（*），匹配所有元素，優(yōu)先級(jí)（0，0，0）。

組合選擇器

由多個(gè)基礎(chǔ)選擇器組合成的復(fù)雜選擇器。

后代組合器（單個(gè)空格（）表示），比如 .nav li，表示li是一個(gè)擁有nav類的元素的后代。
子組合器（>），匹配的元素是直接后代，.parent > .child。
相鄰兄弟組合器（+），匹配的元素緊跟在后面其它元素后面，div + p。
通用兄弟組合器（~），匹配所有跟隨在指定元素之后的兄弟元素，它不會(huì)選中目標(biāo)元素之前的兄弟元素，li.active ~ li。

復(fù)合選擇器

多個(gè)基礎(chǔ)選擇器連起來（中間沒有空格）組成一個(gè)復(fù)合選擇器（如：ul.nav）。復(fù)合選擇器選中的元素將匹配其全部基礎(chǔ)選擇器，.box.nav 可以選中 class="box nav" ，但是不能選中 class="box"。

偽類選擇器

用于選中某種特定狀態(tài)的元素，優(yōu)先級(jí)（0，1，0）。

:first-child——匹配的元素是其父元素的第一個(gè)子元素。
:last-child——匹配的元素是其父元素的最后一個(gè)子元素。
:only-child——匹配的元素是其父元素的唯一一個(gè)子元素（沒有兄弟元素）。
:nth-child(an+b)——匹配的元素在兄弟元素中間有特定的位置。公式an+b里面的a和b是整數(shù)，該公式指定要選中哪個(gè)元素。要了解一個(gè)公式的工作原理，請(qǐng)從0開始代入n的所有整數(shù)值。公式的計(jì)算結(jié)果指定了目標(biāo)元素的位置。下表給出了一些例子。

:nth-child(an+b)

:nth-last-child(an+b)——類似于：nth-child()，但不是從第一個(gè)元素往后數(shù)，而是從最后一個(gè)元素往前數(shù)。括號(hào)內(nèi)的公式與：nth-child()里的公式的規(guī)則相同。
:first-of-type——類似于：first-child，但不是根據(jù)在全部子元素中的位置查找元素，而是根據(jù)擁有相同標(biāo)簽名的子元素中的數(shù)字順序查找第一個(gè)元素。
:last-of-type——匹配每種類型的最后一個(gè)子元素。
:only-of-type——該選擇器匹配的元素是滿足該類型的唯一一個(gè)子元素。
:nth-of-type(an+b)——根據(jù)目標(biāo)元素在特定類型下的數(shù)字順序以及特定公式選擇元素，類似于：nth-child。
:nth-last-of-type(an+b)——根據(jù)元素類型以及特定公式選擇元素，從其中最后一個(gè)元素往前算，類似于：nth-last-child。
:not(<selector>)——匹配的元素不匹配括號(hào)內(nèi)的選擇器。括號(hào)內(nèi)的選擇器必須是基礎(chǔ)選擇器，它只能指定元素本身，無法用于排除祖先元素，同時(shí)不允許包含另一個(gè)排除選擇器。
:focus——匹配通過鼠標(biāo)點(diǎn)擊、觸摸屏幕或者按Tab鍵導(dǎo)航而獲得焦點(diǎn)的元素。
:hover——匹配鼠標(biāo)指針正懸停在其上方的元素。
:root——匹配文檔根元素。對(duì)HTML來說，這是html元素，但是CSS還可以應(yīng)用到XML或者類似于XML的文檔上，比如SVG。在這些情況下，該選擇器的選擇范圍更廣。還有一些表單域相關(guān)的偽類選擇器。
:disabled——匹配已禁用的元素，包括input、select以及button元素。
:enabled——匹配已啟用的元素，即那些能夠被激活或者接受焦點(diǎn)的元素。
:checked——匹配已經(jīng)針對(duì)選定的復(fù)選框、單選按鈕或選擇框選項(xiàng)。
:invalid——根據(jù)輸入類型中的定義，匹配有非法輸入值的元素。例如，當(dāng)<inputtype="email">的值不是一個(gè)合法的郵箱地址時(shí)，該元素會(huì)被匹配。

更多參考：https://developer.mozilla.org/zh-CN/docs/Web/CSS

偽元素選擇器

偽元素選擇器可以向HTML標(biāo)記中未定義的地方插入內(nèi)容，優(yōu)先級(jí)（0，0，1）。

::before——?jiǎng)?chuàng)建一個(gè)偽元素，使其成為匹配元素的第一個(gè)子元素。該元素默認(rèn)是行內(nèi)元素，可用于插入文字、圖片或其他形狀。必須指定content屬性才能讓元素出現(xiàn)，如：.nav::before。
::after——?jiǎng)?chuàng)建一個(gè)偽元素，使其成為匹配元素的最后一個(gè)子元素。該元素默認(rèn)是行內(nèi)元素，可用于插入文字、圖片或其他形狀。必須指定content屬性才能讓元素出現(xiàn)，如：.nav::after。
::first-letter——用于指定匹配元素的第一個(gè)文本字符的樣式，如：h1::first-letter。
::first-line——用于指定匹配元素的第一行文本的樣式。
::selection——用于指定用戶使用鼠標(biāo)高亮選擇的任意文本的樣式。通常用于改變選中文本的background-color。只有少數(shù)屬性可以使用，包括color、background-color、cursor、text-decoration。

屬性選擇器

屬性選擇器用于根據(jù)HTML屬性進(jìn)行匹配元素，優(yōu)先級(jí)（0，1，0）。

[attr]——匹配的元素?fù)碛兄付▽傩詀ttr，無論屬性值是什么，如：input[disabled]。
[attr="value"]——匹配的元素?fù)碛兄付▽傩詀ttr，且屬性值等于指定的字符串值，如：input[type="radio"]。
[attr^="value"] ——“開頭”屬性選擇器。該選擇器匹配的元素?fù)碛兄付▽傩詀ttr，且屬性值的開頭是指定的字符串值，例如：a[href^="https"]。
[attr＊="value"]——“包含”屬性選擇器。該選擇器匹配的元素?fù)碛兄付▽傩詀ttr，且屬性值包含指定的字符串值，如：[class＊="sprite-"]。
[attr~="value"]——“空格分隔的列表”屬性選擇器。該選擇器匹配的元素?fù)碛兄付▽傩詀ttr，且屬性值是一個(gè)空格分隔的值列表，列表中的某個(gè)值等于指定的字符串值，如：a[rel="author"]。
[attr|="value"]——匹配的元素?fù)碛兄付▽傩詀ttr，且屬性值要么等于指定的字符串值，要么以該字符串開頭且緊跟著一個(gè)連字符（-）。

小結(jié)

本文要點(diǎn)回顧，歡迎留言交流。

Web中的一些基本概念介紹。
Html頁面結(jié)構(gòu)，元素分類。
Css優(yōu)先級(jí)。
Css選擇器，（基礎(chǔ)選擇器，組合選擇器，復(fù)合選擇器，偽類選擇器，偽元素選擇器，屬性選擇器）。

站的建站流程

頁面圖例

網(wǎng)頁的結(jié)構(gòu)

WEB標(biāo)準(zhǔn)

WEB標(biāo)準(zhǔn)是網(wǎng)頁制作的標(biāo)準(zhǔn)，它不是一個(gè)標(biāo)準(zhǔn)，它是根據(jù)網(wǎng)頁的不同組成部分生成的一系列標(biāo)準(zhǔn)。這些標(biāo)準(zhǔn)大部分由W3C起草發(fā)布，也有部分標(biāo)準(zhǔn)由ECMA起草發(fā)布

（1）W3C( World Wide Web Consortium )萬維網(wǎng)聯(lián)盟，創(chuàng)建于1994年是Web技術(shù)領(lǐng)域最具權(quán)威和影響力的國(guó)際中立性技術(shù)標(biāo)準(zhǔn)機(jī)構(gòu)；是專門負(fù)責(zé)網(wǎng)絡(luò)標(biāo)準(zhǔn)制定的非贏利組織。制定了結(jié)構(gòu)標(biāo)準(zhǔn)和樣式標(biāo)準(zhǔn)；（2）ECMA：歐洲電腦網(wǎng)商聯(lián)合會(huì)（廠商協(xié)會(huì)），制定了行為標(biāo)準(zhǔn)；

計(jì)算機(jī)語言

HTML

HTML 指的是超文本標(biāo)記語言 (Hyper Text Markup Language) www萬維網(wǎng)的描述性語言。 XHTML指可擴(kuò)展超文本標(biāo)記語言（標(biāo)識(shí)語言）（EXtensible HyperText Markup Language）是一種置標(biāo)語言，表現(xiàn)方式與超文本標(biāo)記語言（HTML）類似，不過語法上更加嚴(yán)格。 HTML5指的是HTML的第五次重大修改（第5個(gè)版本）

HTML發(fā)展

編輯器

建立站點(diǎn)

規(guī)劃網(wǎng)站的所有內(nèi)容和代碼
整合資源

文件的命名規(guī)范

小寫英文字母、數(shù)字、下劃線的組合，
其中不得包含漢字、空格和特殊字符；
必須以英文字母開頭。

HTML開始

1：HTML架構(gòu)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
有三種：Strict（嚴(yán)格型)、
Trasitional（過渡型）、
Frameset（框架型）

2：HTML5基本結(jié)構(gòu)

3:HTML語言

HTML語言組成

（1）標(biāo)簽

txt 寫在尖角號(hào)<>里的第一個(gè)單詞，叫做標(biāo)記，也叫做標(biāo)簽，也稱作元素；

（2）屬性

標(biāo)記和屬性用空格隔開，屬性和屬性值用等號(hào)連接，屬性值必須放在雙引號(hào)內(nèi) 一個(gè)標(biāo)記可以有多個(gè)屬性，屬性和屬性之間用空格隔開，屬性不分先后順序

HTML語法

（1）常規(guī)標(biāo)記(雙標(biāo)記)： <標(biāo)記名稱屬性1名="屬性1值" 屬性2名="屬性2值" ………… >

（2）空標(biāo)記（單標(biāo)記）：<標(biāo)記名屬性1名="屬性1值" />

常用標(biāo)簽

1 ：文本標(biāo)題標(biāo)簽

文本標(biāo)題共有6個(gè)（h1-h6）
<h1>一級(jí)標(biāo)題</h1>(唯一性,放網(wǎng)站LOGO)
<h2>二級(jí)標(biāo)題</h2>
...
<h6>六級(jí)標(biāo)題</h6>

2:字體傾斜&加粗標(biāo)記

文本傾斜:
    <i></i>
    <em></em>

文本加粗：
    <b></b>
    <strong></strong>

3：下劃線

<u></u>

4 : 換行&水平線

<br>
<hr>

5：上標(biāo)&下標(biāo)

<sup></sup>
<sub></sub>

6 : 段落標(biāo)記

<p></p>

7 : 字符（小段文本）

<span></span>

8 : （1）無序列表

<ul>
     <li>列表項(xiàng)內(nèi)容</li>
     <li>列表項(xiàng)內(nèi)容</li>
     <li>列表項(xiàng)內(nèi)容</li>
       ........   
</ul>

? （2）有序列表

<ol>
    <li>列表項(xiàng)內(nèi)容</li>
    <li>列表項(xiàng)內(nèi)容</li>
    <li>列表項(xiàng)內(nèi)容</li>
    ........   
</ol>

type:規(guī)定列表中的列表項(xiàng)目的項(xiàng)目符號(hào)的類型語法：<ol type=“ a"></ol> 1 數(shù)字順序的有序列表（默認(rèn)值）（1, 2, 3, 4）。 a 字母順序的有序列表，小寫（a, b, c, d）。 A 字母順序的有序列表，大寫（A,B,C,D) i 羅馬數(shù)字，小寫（i, ii, iii, iv）。 I 羅馬數(shù)字，大寫（i, ii, iii, iv）。 start 屬性規(guī)定有序列表的開始點(diǎn)。(start的屬性值必須是數(shù)字) 語法：<ol start="5"></ol>

? （3）自定義列表

<dl>
     dt></dt>
     <dd></dd>
</dl>

9 : 超鏈接

<a></a>
    屬性：
        href='url'
        target="_blank  /  _self";
        title='文本提示'

    拓展：
        rel='nofollow';

10 : 圖片

<img>
    屬性：
        src='url';
        alt=' 標(biāo)簽 實(shí)例 帶有指定替代文本的圖像'  
        title='文本提示'
        width=''
        height=''
        border=''

圖片 title 和 alt區(qū)別：

alt:
1、alt屬性是考慮到不支持圖像顯示或者圖像顯示被關(guān)閉的瀏覽器的用戶，
以及視覺障礙的用戶和使用屏幕閱讀器的用戶。當(dāng)圖片不顯示的時(shí)候，圖片的替換文字。
2、alt屬性值的長(zhǎng)度必須少于100個(gè)英文字符
3、alt屬性是img標(biāo)簽的必須屬性，如果沒有特別意義的圖片，可以寫alt=""
4、alt屬性是搜索引擎判斷圖片與文字是否相關(guān)的重要依據(jù)， alt屬性添加到img主要的目的才是為了SEO
title:
1、title屬性并不是必須的。
2、title屬性規(guī)定元素的額外信息，有視覺效果，當(dāng)鼠標(biāo)放到文字或是圖片上時(shí)有文字顯示。
3、title屬性并不作為搜索引擎抓取圖片的參考，更多傾向于用戶體驗(yàn)的考慮。

11 : 相對(duì)路徑

（同級(jí)）
1)當(dāng)當(dāng)前文件與目標(biāo)文件在同一目錄下，直接書寫目標(biāo)文件的文件名+擴(kuò)展名；
（上級(jí)找下級(jí)）
2)當(dāng)當(dāng)前文件與目標(biāo)文件所處的文件夾在同一目錄下，寫法如下：
文件夾名/目標(biāo)文件全稱+擴(kuò)展名；
（下級(jí)找上級(jí)）
3)當(dāng)當(dāng)前文件所處的文件夾和目標(biāo)文件在同一目錄下，寫法如下：
../目標(biāo)文件文件名+擴(kuò)展名；

12 ： DIV

13 : HTML注釋

<!-- 注釋 -->

表格

1 : 表格基本結(jié)構(gòu)

<table>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

<!-- 
    table 為表格
    tr 行
    td 列（每一個(gè)單元格）
-->

2：表格的html屬性

1）width="表格的寬度"
2）height="表格的高度"
3）border="表格的邊框"
4）bordercolor="邊框色"
5）cellspacing="單元格與單元格之間的間距"
6）cellpadding=“單元格與內(nèi)容之間的距離"
7）align="表格水平對(duì)齊方式"
   取值：left、right、center、
   valign=“垂直對(duì)齊” top\bottom\middle
8）合并單元格屬性：(td)
  合并列： colspan=“所要合并的單元格的列數(shù)"
  合并行： rowspan=“所要合并單元格的行數(shù)”

3 ：數(shù)據(jù)行分組

<thead></thead>
<tbody></tbody>
<tfoot></tfoot>

4 ：數(shù)據(jù)列分組

<colgroup span="value"></colgroup>
<!--span屬性為把幾列分為一組-->

5 ：列標(biāo)題

<th></th>

6: 表格標(biāo)題

<caption></caption>

7：表格屬性

1、單元格間距：border-spacing:value; 說明：?jiǎn)卧耖g距(該屬性必須給table添加) 表示單元格邊框之間的距離，不可取負(fù)值 2、合并相鄰單元格邊框：border-collapse:separate/collapse; 說明：合并相鄰單元格邊框 (該屬性必須給table添加) separate(邊框分開)默認(rèn)值； collapse(邊框合并) 3、無內(nèi)容時(shí)單元格的設(shè)置：empty-cells:show/hide; 說明：定義當(dāng)單元格無內(nèi)容時(shí)，是否顯示該單元格的邊框區(qū)域；show：顯示；hide：隱藏； 4、顯示單元格行和列的算法(加快運(yùn)行的速度)： table-layout:auto/fixed;

本文轉(zhuǎn)自知乎號(hào)：千鋒HTML5學(xué)院

在線咨詢

上一篇：CSS之燈光照射動(dòng)態(tài)顯示文字效果詳解
下一篇：計(jì)算機(jī)十六進(jìn)制與顏色

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

5分鐘了解谷歌最新算法-超長(zhǎng)的文字段落，機(jī)器是如何讀

Transformers的基本想法

升級(jí)版： Extended Transformer Construction

進(jìn)一步升級(jí)：BigBird

TML（網(wǎng)頁）

WEB

W3C

WEB標(biāo)準(zhǔn)

HTML定義

頁面基本結(jié)構(gòu)

關(guān)于viewport

常見元素

元素分類

元素默認(rèn)樣式

CSS（層疊樣式表）

Css的單位

字體屬性

文本屬性

Overflow屬性

濾鏡

背景屬性

優(yōu)先級(jí)

基礎(chǔ)選擇器

組合選擇器

復(fù)合選擇器

偽類選擇器

偽元素選擇器

屬性選擇器

小結(jié)

站的建站流程

頁面圖例

網(wǎng)頁的結(jié)構(gòu)

WEB標(biāo)準(zhǔn)

計(jì)算機(jī)語言

HTML

HTML發(fā)展

編輯器

建立站點(diǎn)

文件的命名規(guī)范

HTML開始

1：HTML架構(gòu)

2：HTML5基本結(jié)構(gòu)

3:HTML語言

常用標(biāo)簽

1 ： 文本標(biāo)題標(biāo)簽

2:字體傾斜&加粗標(biāo)記

3：下劃線

4 : 換行&水平線

5：上標(biāo)&下標(biāo)

6 : 段落標(biāo)記

7 : 字符 （ 小段文本 ）

8 : （1） 無序列表

9 : 超鏈接

10 : 圖片

圖片 title 和 alt區(qū)別：

11 : 相對(duì)路徑

12 ： DIV

13 : HTML注釋

表格

1 : 表格基本結(jié)構(gòu)

2：表格的html屬性

3 ： 數(shù)據(jù)行分組

4 ： 數(shù)據(jù)列分組

5 ： 列標(biāo)題

6: 表格標(biāo)題

7： 表格屬性

您的項(xiàng)目需求

1 ：文本標(biāo)題標(biāo)簽

7 : 字符（小段文本）

8 : （1）無序列表

3 ：數(shù)據(jù)行分組

4 ：數(shù)據(jù)列分組

5 ：列標(biāo)題

7：表格屬性