整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
章學(xué)習(xí)目標(biāo)
第一章已經(jīng)介紹過(guò)HTML是一門(mén)超文本標(biāo)記語(yǔ)言，通過(guò)HTML標(biāo)記對(duì)網(wǎng)頁(yè)中的文本、圖片、聲音等信息進(jìn)行描述。但是具體如何使用HTML標(biāo)記對(duì)網(wǎng)頁(yè)中的信息進(jìn)行控制，沒(méi)有介紹，本章就將從HTML的歷史、語(yǔ)義化、常用標(biāo)簽三個(gè)方面詳細(xì)講解HTML。
2.1 HTML歷史
俗話說(shuō)“了解歷史，才能明白當(dāng)下，進(jìn)而展望未來(lái)”。所以了解HTML的歷史，有利于更好的掌握HTML這門(mén)語(yǔ)言。
2.1.1 HTML歷史版本
像大多數(shù)軟件、硬件一樣，HTML發(fā)展至今，經(jīng)歷了幾個(gè)版本，新增了許多HTML標(biāo)記，同時(shí)也淘汰了一些標(biāo)記，接下來(lái)介紹HTML在不同時(shí)期所對(duì)應(yīng)的一些重要版本，具體如下：
HTML沒(méi)有1.0版本，最早的HTML官方規(guī)范，是由IETF（Internet Engineering Task Force，因特網(wǎng)工程任務(wù)組）發(fā)布的HTML 2.0。之后W3C成為HTML語(yǔ)言標(biāo)準(zhǔn)的制定者，發(fā)布了3.2、4.0、4.01和5等多個(gè)后續(xù)重要版本。通常所說(shuō)的HTML5指的就是5這個(gè)最新的版本。
本教材涉及的所有規(guī)范及語(yǔ)法，都是嚴(yán)格按照HTML5標(biāo)準(zhǔn)進(jìn)行講解的，在后面的章節(jié)中還會(huì)詳細(xì)的介紹HTML5及相關(guān)內(nèi)容。
2.1.2 HTML與XHTML關(guān)系
在HTML語(yǔ)法上很寬松，如標(biāo)簽和屬性可以是大寫(xiě)、小寫(xiě)，或者任意大小寫(xiě)字母的組合，標(biāo)簽可以不閉合等。有些設(shè)備很難兼容這些松散的語(yǔ)法，如手機(jī)、打印機(jī)等，這并不符合標(biāo)準(zhǔn)的發(fā)展趨勢(shì)，因此1999年12月W3C推出了HTML4.01版本后解散了HTML工作組。轉(zhuǎn)而開(kāi)發(fā)XHTML，2000年1月26日發(fā)布XHTML1.0。
XHTML是更嚴(yán)謹(jǐn)純凈的HTML版本，XHTML比HTML語(yǔ)法更加規(guī)范和嚴(yán)謹(jǐn)，目的是為了實(shí)現(xiàn)HMTL向XML過(guò)渡，讓作者按照統(tǒng)一的風(fēng)格來(lái)編寫(xiě)標(biāo)簽，HTML中標(biāo)簽和屬性不區(qū)分大小寫(xiě)，而有效的XHTML 文檔則要求所有標(biāo)簽和屬性必須一律小寫(xiě)，當(dāng)然還有一些其他的規(guī)范和要求，這里不再贅述。XML雖然數(shù)據(jù)轉(zhuǎn)換能力強(qiáng)，完全可以替代HTML，但是面對(duì)互聯(lián)網(wǎng)上大量基于HTML編寫(xiě)的網(wǎng)站，直接采用XML還為時(shí)過(guò)早，因此在HTML4.0的基礎(chǔ)上，用XML的語(yǔ)法規(guī)則對(duì)其進(jìn)行擴(kuò)展，得到了XHTML。
注：XML指可擴(kuò)展標(biāo)記語(yǔ)言（EXtensible Markup Language），用來(lái)傳輸和存儲(chǔ)數(shù)據(jù)。XML語(yǔ)言也可以做為很多語(yǔ)言的基礎(chǔ)語(yǔ)言，例如：XHTML、SVG等。
HTML的不同版本對(duì)<!DOCTYPE>寫(xiě)法也有不同，具體如下：
HTML4.01中<!DOCTYPE>寫(xiě)法：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
XHTML1.01中<!DOCTYPE>寫(xiě)法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML5中<!DOCTYPE>寫(xiě)法
<!DOCTYPE HTML>
因?yàn)?HTML 4.01和XHTML1.0 基于 SGML，所以 DOCTYPE 需要對(duì) DTD 進(jìn)行引用。而 HTML 5 不基于 SGML，因此不需要對(duì) DTD 進(jìn)行引用，因此HTML5的DOCTYPE寫(xiě)法相當(dāng)簡(jiǎn)單。這里建議讀者都采用最新的HTML5版本<!DOCTYPE>寫(xiě)法，第一章已經(jīng)介紹過(guò)在DW工具中默認(rèn)設(shè)置不同類型的文檔聲明。
2.2 什么是HTML語(yǔ)義化
所謂HTML語(yǔ)義化指的是，根據(jù)網(wǎng)頁(yè)中內(nèi)容的結(jié)構(gòu)，選擇適合的HTML標(biāo)簽進(jìn)行編寫(xiě)。HTML語(yǔ)義化的意義主要有以下幾點(diǎn)：
HTML標(biāo)簽都具備語(yǔ)義化，根據(jù)網(wǎng)頁(yè)展示的內(nèi)容結(jié)構(gòu)，選擇正確的HTML標(biāo)簽進(jìn)行解析與編碼。
注： SEO是指在了解搜索引擎自然排名機(jī)制的基礎(chǔ)之上，對(duì)網(wǎng)站進(jìn)行內(nèi)部及外部的調(diào)整優(yōu)化，改進(jìn)網(wǎng)站在搜索引擎中關(guān)鍵詞的自然排名，獲得更多的展現(xiàn)量，吸引更多目標(biāo)客戶點(diǎn)擊訪問(wèn)網(wǎng)站，從而達(dá)到互聯(lián)網(wǎng)營(yíng)銷及品牌建設(shè)的目的。
2.3 HTML常用標(biāo)簽
HTML標(biāo)簽非常多，有些由于歷史問(wèn)題已經(jīng)廢棄，有些屬于HTML5中新添加的，這部分H5新標(biāo)簽會(huì)在H5章節(jié)中給讀者講解，本章主要講解一些HTML中常用標(biāo)簽的使用。
2.3.1 標(biāo)題標(biāo)簽
瀏覽新聞?lì)惥W(wǎng)頁(yè)時(shí)，經(jīng)常能看見(jiàn)文章的標(biāo)題，如圖2.1所示。
圖2.1 千鋒教育新聞標(biāo)題
圖2.1的標(biāo)題就是用HTML中的標(biāo)題標(biāo)簽來(lái)實(shí)現(xiàn)的，HTML中使用<h1>、<h2>、<h3>、<h4>、<h5>、<h6>等標(biāo)簽來(lái)定義標(biāo)題部分，其語(yǔ)法格式如下：
<hn 屬性=“屬性值”>標(biāo)題文本</hn>
接下來(lái)通過(guò)案例來(lái)演示標(biāo)題標(biāo)簽，如例2-1所示。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>定義標(biāo)題</title> 6 </head> 7 <body> 8 <h1>這是一級(jí)標(biāo)題</h1> 9 <h2>這是二級(jí)標(biāo)題</h2> 10 <h3>這是三級(jí)標(biāo)題</h3> 11 <h4>這是四級(jí)標(biāo)題</h4> 12 <h5>這是五級(jí)標(biāo)題</h5> 13 <h6>這是六級(jí)標(biāo)題</h6> 14 </body> 15 </html>
運(yùn)行結(jié)果如圖2.2所示。
圖2.2 標(biāo)題標(biāo)簽顯示效果
從上例運(yùn)行結(jié)果可以看出，默認(rèn)情況下標(biāo)題文字的顯示方式是加粗左對(duì)齊，并且從<h1>到<h6>字號(hào)遞減，如果想改變標(biāo)題的對(duì)齊方式，需要用到align屬性，其取值如表2.1。
接下來(lái)通過(guò)案例來(lái)演示標(biāo)題標(biāo)簽對(duì)齊方式的設(shè)置及效果，如例2-2所示。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>定義標(biāo)題對(duì)齊方式</title> 6 </head> 7 <body> 8 <h1>這是一級(jí)標(biāo)題</h1> 9 <h2 align="left">這是二級(jí)標(biāo)題</h2> 10 <h3 align="center">這是三級(jí)標(biāo)題</h3> 11 <h4 align="right">這是四級(jí)標(biāo)題</h4> 12 </body> 13 </html>
運(yùn)行結(jié)果如圖2.3所示。
圖2.3標(biāo)題對(duì)齊方式顯示效果
標(biāo)題很重要，它有利于網(wǎng)頁(yè)搜索引擎的優(yōu)化，其中<h1>標(biāo)題的重要性最高，<h6>標(biāo)題的重要性最低，一般一個(gè)頁(yè)面只能有一個(gè)<h1>，而<h2>~<h6>可以有多個(gè)。
2.3.2 段落標(biāo)簽
瀏覽新聞?lì)惥W(wǎng)頁(yè)時(shí)，經(jīng)常能看見(jiàn)文章的段落，如圖2.4所示。
圖2.4 千鋒教育新聞段落
圖2.4中的段落在HTML中使用<p>標(biāo)簽實(shí)現(xiàn)，用于在網(wǎng)頁(yè)中把文字有條理地顯示出來(lái)，其語(yǔ)法格式如下：
<p 屬性=“屬性值”>段落文本</p>
接下來(lái)通過(guò)案例來(lái)演示段落標(biāo)簽，如例2-3所示。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>段落標(biāo)簽</title> 6 </head> 7 <body> 8 <h1 align="center" >扣丁學(xué)堂</h1></h1> 9 <p align="left">扣丁學(xué)堂是中國(guó)IT培訓(xùn)教育品牌領(lǐng)導(dǎo)者,擁有最新最全的IT培訓(xùn)視頻課 10 程,專注于發(fā)布和更新iOS培訓(xùn)、Android培訓(xùn)、HTML5培訓(xùn)、UI培訓(xùn)、PHP培訓(xùn)視頻教程, 11 著力于培養(yǎng)移動(dòng)互聯(lián)網(wǎng)人才。</p> 12 <p align="ri">遇到IT技術(shù)難題，就上扣丁學(xué)堂學(xué)堂。</p> 13 </body> 14 </html>
運(yùn)行結(jié)果如圖2.5所示。
圖2.5 段落標(biāo)簽顯示效果
2.3.3 文本格式化標(biāo)簽
文本格式化標(biāo)簽就是針對(duì)文本進(jìn)行各種格式化的標(biāo)簽，例如加粗、斜體、上標(biāo)、下標(biāo)等。如表2.2所示。
表2.2中列出了對(duì)文本格式化的幾種標(biāo)簽，下面將詳細(xì)介紹這幾種標(biāo)簽的使用和效果。
1. <strong>標(biāo)簽
<strong>標(biāo)簽將文本定義為語(yǔ)氣更強(qiáng)的強(qiáng)調(diào)內(nèi)容，展示效果為加粗。接下來(lái)通過(guò)案例演示<strong>標(biāo)簽，如例2-4所示。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>文本格式化</title> 6 </head> 7 <body> 8 <strong>用良心做教育！</strong> 9 </body> 10 </html>
運(yùn)行結(jié)果如圖2.6所示。
圖2.6 strong標(biāo)簽顯示效果
注意：<b>標(biāo)簽的展示效果跟<strong>完全相同，但是<b>標(biāo)簽不具備語(yǔ)義化強(qiáng)調(diào)的作用，只是顯示加粗效果。
2. <em>標(biāo)簽
<em>標(biāo)簽也是將文本定義為強(qiáng)調(diào)的內(nèi)容，只不過(guò)比<strong>標(biāo)簽強(qiáng)調(diào)的稍弱些，展示效果為斜體，接下來(lái)通過(guò)案例來(lái)演示<em>標(biāo)簽，如例2-5所示。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>文本格式化</title> 6 </head> 7 <body> 8 <em>用良心做教育！</em> 9 </body> 10 </html>
運(yùn)行結(jié)果如圖2.7所示。
圖2.7 em標(biāo)簽顯示效果
注意：<i>標(biāo)簽的展示效果跟<em>完全相同，但是<i>標(biāo)簽不具備語(yǔ)義化強(qiáng)調(diào)的作用，只是顯示斜體效果。
3. <sup>和<sub>標(biāo)簽
<sup>標(biāo)簽用于將文本定義為上標(biāo)文本，<sub>標(biāo)簽用于將文本定義為下標(biāo)文本，接下來(lái)通過(guò)案例來(lái)演示<sup>和<sub>標(biāo)簽，如例2-6所示。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>文本格式化</title> 6 </head> 7 <body> 8 <p>a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup></p> 9 <p>H<sub>2</sub>O</p> 10 </body> 11 </html>
運(yùn)行結(jié)果如圖2.8所示。
圖2.8 sup、sub標(biāo)簽顯示效果
4. <del>和<ins>標(biāo)簽
<del>標(biāo)簽可用于定義已被刪除的文本， <ins>標(biāo)簽可用于定義已經(jīng)被插入的文本，<del>標(biāo)簽與<ins>標(biāo)簽配合使用，來(lái)描述文檔中的更新和修正。接下來(lái)通過(guò)案例來(lái)演示<del>和<ins>標(biāo)簽，如例2-7所示。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>文本格式化</title> 6 </head> 7 <body> 8 <p><del>刪除文本加刪除線</del></p> 9 <p><ins>插入文本加下畫(huà)線</ins></p> 10 </body> 11 </html>
運(yùn)行結(jié)果如圖2.9所示。
圖2.9 del、ins標(biāo)簽顯示效果
文本格式化標(biāo)簽，一定要根據(jù)它們的語(yǔ)義來(lái)記憶，至于它們的默認(rèn)樣式，后續(xù)可以通過(guò)CSS方式進(jìn)行修改。
2.3.4 引用標(biāo)簽
引用標(biāo)簽就是針對(duì)文本進(jìn)行各種引用的標(biāo)簽，例如縮略詞、短語(yǔ)解釋、著作、地址等。主要?jiǎng)澐殖蓭状箢悾绫?.3所示。
表2.3中列出了引用標(biāo)簽的幾種分類，下面進(jìn)行詳細(xì)介紹。
1. <blockquote>和<q>標(biāo)簽
<blockquote>和<q>標(biāo)簽都是對(duì)文本的解釋引用，<blockquote>標(biāo)簽引用是用大段的段落進(jìn)行解釋，而<q>標(biāo)簽引用是小段的短語(yǔ)進(jìn)行解釋，接下來(lái)通過(guò)案例來(lái)演示<blockquote>和<q>標(biāo)簽，如例2-8所示。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>文本格式化</title> 6 </head> 7 <body> 8 <p>"死而后已"一語(yǔ)出自諸葛亮《出師表》：<blockquote>“凡事如是，難可逆見(jiàn)， 9 臣鞠躬盡瘁，死而后已，至于成敗利鈍，非臣之明所能逆睹也。"</blockquote></p> 10 <p>WWF 的目標(biāo)是：<q>構(gòu)建人與自然和諧共存的世界。</q></p> 11 </body> 12 </html>
運(yùn)行結(jié)果如圖2.10所示。
圖2.10 <blockquote>、<q>標(biāo)簽顯示效果
由例2-8中可以看出，<blockquote>標(biāo)簽左右會(huì)空出一些距離，<q>標(biāo)簽會(huì)自動(dòng)加上引號(hào)。
2. <abbr>標(biāo)簽
<abbr>標(biāo)簽用來(lái)引用縮寫(xiě)或首字母縮略語(yǔ)，接下來(lái)通過(guò)案例來(lái)演示<abbr>標(biāo)簽，如例2-9所示。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>引用標(biāo)簽</title> 6 </head> 7 <body> 8 <p><abbr title="World Health Organization">WHO</abbr> 9 成立于 1948 年。</p> 10 </body> 11 </html>
運(yùn)行結(jié)果如圖2.11所示。
圖2.11 <abbr>標(biāo)簽顯示效果
例2-9中可以看到一個(gè)title屬性，當(dāng)鼠標(biāo)移入到設(shè)置title的區(qū)域時(shí)，就會(huì)顯示提示信息。
3. <address>和<cite>標(biāo)簽
<address>標(biāo)簽用來(lái)引用地址信息，<cite>標(biāo)簽用來(lái)引用著作的標(biāo)題，展示效果為斜體，接下來(lái)通過(guò)一個(gè)案例來(lái)演示<address>和<cite>標(biāo)簽，如例2-10所示。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>引用標(biāo)簽</title> 6 </head> 7 <body> 8 <address> 9 <p>網(wǎng)易北京公司</p> 10 <p>地址:北京市海淀區(qū)西北旺東路10號(hào)院</p> 11 <p>郵編:100084</p> 12 </address> 13 <p><cite>資治通鑒</cite>由北宋司馬光主編的一部多卷本編年體史書(shū)</p> 14 </body> 15 </html>
運(yùn)行結(jié)果如圖2.12所示。
圖2.12 <address>、<cite>標(biāo)簽顯示效果
2.3.5 水平線標(biāo)簽
有時(shí)為了使文檔結(jié)構(gòu)清晰、層次分明，常常需要在網(wǎng)頁(yè)中添加一些水平線將段落與段落之間分隔開(kāi)，HTML中使用<hr>標(biāo)簽來(lái)創(chuàng)建橫跨網(wǎng)頁(yè)的水平線。另外<hr>屬于單標(biāo)簽，在網(wǎng)頁(yè)中輸入一個(gè)<hr/>標(biāo)簽，就添加了一條默認(rèn)樣式的水平線，<hr>標(biāo)簽的常用屬性如表2.4所示。
接下來(lái)通過(guò)案例來(lái)演示水平線標(biāo)簽，如例2-11所示。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>水平線標(biāo)簽</title> 6 </head> 7 <body> 8 <p align="center">扣丁學(xué)堂</p> 9 <hr color="#003399" width="100" size="5">a 10 <p align="left">遇到IT難題，就上扣丁學(xué)堂。</p> 11 <hr> 12 <p>遇到問(wèn)題，在線解答。</p> 13 </body> 14 </html>
運(yùn)行結(jié)果如圖2.13所示。
圖2.13 <hr>標(biāo)簽顯示效果
例2-11中，第9行定義水平線標(biāo)簽，并設(shè)置了color、width、size屬性，并沒(méi)有設(shè)置align屬性，可以發(fā)現(xiàn)align屬性默認(rèn)居中對(duì)齊，第11行定義水平線標(biāo)簽，其屬性都是默認(rèn)值，可發(fā)現(xiàn)width屬性默認(rèn)的是瀏覽器窗口的100%。
2.3.6 特殊符號(hào)
在編寫(xiě)一些文本時(shí)，經(jīng)常會(huì)遇到輸入法無(wú)法輸入的字符，如?（注冊(cè)商標(biāo)）、?（版權(quán)符）等，還有往一段文字中加入多個(gè)空格時(shí)，頁(yè)面并不會(huì)解析出多個(gè)空格。這些無(wú)法輸入和空格字符都是特殊字符，在HTML中，為這些特殊字符準(zhǔn)備了專門(mén)的代碼，如表2.5。
接下來(lái)通過(guò)案例來(lái)演示這些特殊字符表示代碼，如例2-12所示。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>特殊符號(hào)</title> 6 </head> 7 <body> 8 <p>?注冊(cè)商標(biāo) ?版權(quán) 空格 < 小于號(hào) >大于號(hào)</p> 9 <p>&和號(hào) ￥人民幣 °攝氏度 ±正負(fù)號(hào) ×乘號(hào)</p> 10 <p> ÷除號(hào) 1上標(biāo)1 2上標(biāo)2 3上標(biāo)3</p> 11 </body> 12 </html>
運(yùn)行結(jié)果如圖2.14所示。
圖2.14 難輸入符號(hào)顯示效果
在DW中，只要輸入一個(gè)&符號(hào)，就可以看到相關(guān)特殊符號(hào)的提示信息。如圖2.15所示。
圖2.15 DW中特殊符號(hào)提示功能
2.3.7 圖像標(biāo)簽
每一張網(wǎng)頁(yè)都離不開(kāi)圖片元素，在網(wǎng)頁(yè)中添加圖片是非常重要的操作，如圖2.16所示。
圖2.16 圖片效果展示
HTML中使用<img>標(biāo)簽來(lái)添加圖片，<img>屬于單標(biāo)簽，其語(yǔ)法格式如下
<img src=”圖像URL”/>
其中src是用于指定圖像文件的路徑和文件名的屬性，是img標(biāo)簽的必需屬性。接下來(lái)用案例來(lái)簡(jiǎn)單演示img標(biāo)簽的使用。如例2-13所示。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>圖像標(biāo)簽</title> 6 </head> 7 <body> 8 <img src="qianfeng.jpg"/> 9 </body> 10 </html
運(yùn)行結(jié)果如圖2.17所示。
圖2.17 圖像標(biāo)簽顯示效果
src屬性引用的是當(dāng)前圖片的地址，圖片的名為qianfeng，圖片的格式為.png，接下來(lái)針對(duì)圖片的地址和圖片的格式進(jìn)行詳細(xì)講解。
1. 圖片的地址
src屬性引用的是當(dāng)前圖片的地址，所謂地址就是一個(gè)文件的路徑。讀者在網(wǎng)頁(yè)中通過(guò)地址來(lái)找到相應(yīng)位置的元素。那么地址分為相對(duì)地址與絕對(duì)地址，相對(duì)地址即被引入的文件相對(duì)與當(dāng)前頁(yè)面的地址。絕對(duì)地址即文件在網(wǎng)絡(luò)或本地的絕對(duì)位置。
相對(duì)地址有以下三種寫(xiě)法，具體如下。
<img src=”qianfeng.jpg”/> <img src=”img/qianfeng.jpg”/> <img src=”../img/qianfeng.jpg”/>
第一個(gè)相對(duì)地址說(shuō)明當(dāng)前頁(yè)面和圖片在同一個(gè)目錄下。第二個(gè)相對(duì)地址說(shuō)明圖片在頁(yè)面同級(jí)的img文件夾中。第三個(gè)相對(duì)地址說(shuō)明圖片在頁(yè)面上一級(jí)的img文件夾中。
絕對(duì)地址有以下兩種寫(xiě)法，具體如下。
<img src="http://www.jungjaehyung.com/uploadfile/2024/0806/20240806110412816.jpg"/> <img src=http://www.jungjaehyung.com/uploadfile/2024/0806/20240806110414327.jpg”/>
第一個(gè)絕對(duì)地址在本地D盤(pán)的相應(yīng)文件夾下。第二個(gè)絕對(duì)地址在網(wǎng)絡(luò)中的相應(yīng)文件夾下。
當(dāng)前網(wǎng)頁(yè)和圖片文件如果同時(shí)移動(dòng)到其他位置時(shí)，相對(duì)地址是不會(huì)出問(wèn)題的，因?yàn)閮蓚€(gè)文件的相對(duì)位置并沒(méi)有發(fā)生變化。而絕對(duì)地址則會(huì)有問(wèn)題，因?yàn)榈刂肥俏ㄒ坏穆窂健Ｋ栽陂_(kāi)發(fā)網(wǎng)頁(yè)的時(shí)候建議讀者盡量采用相對(duì)地址。
2. 圖片格式
網(wǎng)頁(yè)中加載圖像如果太大會(huì)造成網(wǎng)頁(yè)加載速度慢，太小圖片會(huì)顯示不清晰，在網(wǎng)頁(yè)中選擇合適的圖片格式加載顯得尤為重要，常用的圖片格式主要有jpg、png和gif三種格式，接下將分別進(jìn)行詳細(xì)講解。
（1）jpg格式
jpg格式的圖片是一種有損壓縮的圖像格式，即每次修改圖片都會(huì)造成一些圖像數(shù)據(jù)的丟失。jpg是特別為照片圖像設(shè)計(jì)的文件格式，可以很好地處理大面積色調(diào)的圖像，一般在網(wǎng)頁(yè)中用來(lái)展示色彩豐富的圖像。如圖2.18所示。
圖2.18 jpg格式圖片顯示效果
（2）png格式
png格式的圖片相對(duì)于jpg、gif格式最大的優(yōu)點(diǎn)是體積小，支持alpha透明（全透明、半透明、全不透明），可以很好地理透明方式的圖片，比如網(wǎng)頁(yè)中的logo圖片可以在不同的背景底色下完美展現(xiàn)。如圖2.19所示，但png不支持動(dòng)畫(huà)。另外需要注意，IE6,可以支持png-8，但是在處理png-24的透明時(shí)會(huì)顯示為灰色。通常，圖片保存為png-8會(huì)在同等質(zhì)量下獲得比gif更小的體積，而半透明的圖片只能使用png-24。
圖2.19 png格式圖片顯示效果
（3）gif格式
gif格式圖片最重要的特點(diǎn)是支持動(dòng)畫(huà)，可以很好地處理動(dòng)畫(huà)效果的圖片，如網(wǎng)頁(yè)中的廣告圖片。如圖2.20所示。同時(shí)gif是一種無(wú)損的圖像格式，修改圖片幾乎不會(huì)造成圖像數(shù)據(jù)的丟失。而且gif也支持透明（全透明和全不透明），因此很適合在網(wǎng)頁(yè)中使用。但gif只能處理256種顏色，在網(wǎng)頁(yè)制作中，常用于logo、小圖標(biāo)及其他色彩相對(duì)單一的圖像。
圖2.20 gif格式圖片顯示效果
<img>標(biāo)簽除了src屬性外，還包括一些其他屬性，如表2.6所示。
表2.6中簡(jiǎn)單描述了img標(biāo)簽中常用的屬性，為了使初學(xué)者更好地理解和應(yīng)用這些屬性，接下來(lái)進(jìn)行詳細(xì)講解。
1. alt屬性
alt屬性是圖片顯示不出來(lái)時(shí)的提示文字。當(dāng)設(shè)置了alt屬性后，如果圖片正常顯示的話，是看不到任何效果的，只有當(dāng)圖片地址出問(wèn)題導(dǎo)致圖片不顯示時(shí)，才可以看到alt的提示信息。接下來(lái)通過(guò)案例來(lái)演示alt屬性，如例2-14所示。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>圖像標(biāo)簽</title> 6 </head> 7 <body> 8 <img src="qianfeng.jpg"> 9 <img src="qianfengError.jpg" alt="千鋒教育"> 10 </body> 11 </html>
運(yùn)行結(jié)果如圖2.21所示。
圖2.21 alt屬性顯示效果
2. title屬性
title屬性是鼠標(biāo)移到圖片上的提示文字。當(dāng)設(shè)置了title屬性后，如果鼠標(biāo)移入到圖片上時(shí)，就會(huì)顯示title的提示信息。接下來(lái)通過(guò)案例來(lái)演示title屬性，如例2-15所示。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>圖像標(biāo)簽</title> 6 </head> 7 <body> 8 <img src="qianfeng.jpg" title="千鋒教育"> 9 </body> 10 </html>
運(yùn)行結(jié)果如圖2.22所示。
圖2.22 title屬性顯示效果
alt屬性和title屬性都是有利于SEO搜索引擎的優(yōu)化和用戶體驗(yàn)的提升，只是它們展示的方式不一樣。
2.3.8 鏈接標(biāo)簽
單個(gè)網(wǎng)頁(yè)不能容納網(wǎng)站需要的所有信息，需要多個(gè)網(wǎng)頁(yè)構(gòu)成，這時(shí)就點(diǎn)擊鏈接可以從一張網(wǎng)頁(yè)跳轉(zhuǎn)到另一張網(wǎng)頁(yè)，如圖2.23所示。
圖2.23鏈接效果展示
HTML中使用<a></a>標(biāo)簽來(lái)定義鏈接部分實(shí)現(xiàn)網(wǎng)頁(yè)的跳轉(zhuǎn)，其語(yǔ)法格式如下。
<a href=“鏈接頁(yè)面地址” target=“鏈接打開(kāi)的方式”>鏈接對(duì)象</a>
接下來(lái)通過(guò)案例來(lái)演示鏈接標(biāo)簽，如例2-16所示。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>鏈接標(biāo)簽</title> 6 </head> 7 <body> 8 <a href="2-15.html">打開(kāi)一個(gè)新的網(wǎng)頁(yè)</a> 9 <a >千鋒官網(wǎng)</a> 10 <a href="../照片.rar">下載壓縮包文件</a> 11 </body> 12 </html>
運(yùn)行結(jié)果如圖2.24所示。
圖2.24 鏈接標(biāo)簽顯示效果
鏈接和圖像一樣，地址可以是相對(duì)地址或絕對(duì)地址。鏈接除了可以鏈接地址外，還可以鏈接其他的元素（壓縮包，word文檔，PPT文檔等）。例2-16中第一個(gè)鏈接打開(kāi)的是一個(gè)本地中的相對(duì)地址，第二個(gè)鏈接打開(kāi)的是一個(gè)網(wǎng)絡(luò)上的絕對(duì)地址，第三個(gè)鏈接點(diǎn)擊后會(huì)下載一個(gè)壓縮包文件。
鏈接可以針對(duì)文字，也可以針對(duì)圖片，當(dāng)點(diǎn)擊圖片時(shí)會(huì)打開(kāi)一個(gè)新的網(wǎng)頁(yè)，接下來(lái)通過(guò)案例來(lái)演示，如例2-17所示。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>鏈接標(biāo)簽</title> 6 </head> 7 <body> 8 <a href="2-15.html"> 9 <img src="qianfeng.jpg"> 10 </a> 11 </body> 12 </html>
運(yùn)行結(jié)果如圖2.25所示。
圖2.25 鏈接圖片的顯示效果
例2-16、2-17中<a>標(biāo)簽只定義了href屬性，<a>標(biāo)簽除了href屬性外還包含target和name兩個(gè)重要屬性，下面就來(lái)分別介紹<a>標(biāo)簽的這三個(gè)屬性。
1. href屬性
herf屬性就是來(lái)指定鏈接目標(biāo)的url地址，為<a>標(biāo)簽定義herf屬性后，它就有了鏈接的功能。
2.name屬性
有些網(wǎng)頁(yè)的內(nèi)容較多，頁(yè)面過(guò)長(zhǎng)，如百度百科千鋒教育，只能不斷的拖動(dòng)滾動(dòng)條來(lái)瀏覽網(wǎng)頁(yè)，查看所需要的內(nèi)容，效率較低，而且很不方便，這時(shí)可以通過(guò)<a>標(biāo)簽的name屬性實(shí)現(xiàn)站內(nèi)跳轉(zhuǎn)，這種站內(nèi)的跳轉(zhuǎn)的方式也稱錨點(diǎn)操作，接下來(lái)通過(guò)案來(lái)演示name屬性的作用，如例2-18所示。
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>鏈接標(biāo)簽</title>
6 </head>
7 <body>
8 <a href="#h5Pos">HTML5</a>
9 <a href="#phpPos">PHP</a>
10 <p>點(diǎn)擊上面的鏈接可跳轉(zhuǎn)到指定的位置</p>
11 <a name="h5Pos">HTML5的內(nèi)容</a>
12 <p>HTML5</p>
13 <p>HTML5</p>
14 <p>HTML5</p>
15 <p>HTML5</p>
16 <p>HTML5</p>
17 <a name="phpPos">PHP的內(nèi)容</a>
18 <p>PHP</p>
19 <p>PHP</p>
20 <p>PHP</p>
21 <p>PHP</p>
22 <p>PHP</p>
23 </body>
24 </html>
運(yùn)行結(jié)果如圖2.26所示。
3.target屬性
target屬性用于指定鏈接頁(yè)面的打開(kāi)方式，其取值如表2.7所示
目前常用的取值有_self和_blank兩種，接下來(lái)通過(guò)案例來(lái)演示這兩種取值的功能，如例2-19所示。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>鏈接標(biāo)簽</title> 6 </head> 7 <body> 8 <a href="2-3.html" target="_self">當(dāng)前窗口打開(kāi)鏈接</a> 9 <a href="2-3.html" target="_blank">新窗口打開(kāi)鏈接</a> 10 </body> 11 </html>
運(yùn)行結(jié)果如圖2.27所示。
圖2.27 target屬性的顯示效果
一般情況下，target只用到“_self”和“_blank”這兩個(gè)屬性值，其他兩個(gè)不需要深究，因?yàn)閹缀跤貌坏健?/p>
2.3.9 列表標(biāo)簽
列表是網(wǎng)頁(yè)中一種常用的數(shù)據(jù)排列方式，在網(wǎng)頁(yè)中到處都可以看到列表的身影，如圖2.28、圖2.29，都是網(wǎng)頁(yè)中常見(jiàn)的列表。
HTML中列表分為有序列表、無(wú)序列表和定義列表三種，下面將分別介紹這三種列表。
1. 有序列表
在HTML中用<ol>標(biāo)簽表示有序列表，列表項(xiàng)目用<li>標(biāo)簽表示，列表項(xiàng)目有先后順序之分，因此稱為有序列表。接下來(lái)通過(guò)案例來(lái)了解有序列表，如例2-20所示。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>鏈接標(biāo)簽</title> 6 </head> 7 <body> 8 <ol> 9 <li>HTML</li> 10 <li>CSS</li> 11 <li>JavaScript</li> 12 <li>PHP</li> 13 <li>JAVA</li> 14 </ol> 15 </body></html>
運(yùn)行結(jié)果如題2.30所示。
圖2.30 有序列表展示效果
圖2.31中可以看到前面的阿拉伯?dāng)?shù)字是默認(rèn)效果，可以通過(guò)有序列表的type屬性來(lái)設(shè)置不同的顯示效果，其取值如表2.8所示。
接下來(lái)通過(guò)案例來(lái)演示type屬性的用法，如例2-21所示。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>列表標(biāo)簽</title> 6 </head> 7 <body> 8 <ol type="a"> 9 <li>HTML</li> 10 <li>CSS</li> 11 <li>JavaScript</li> 12 <li>PHP</li> 13 <li>Java</li> 14 </ol> 15 </body> 16 </html>
運(yùn)行結(jié)果如圖2.31所示。
圖2.31 有序列表展示效果
在有序列表中，除了type屬性之外，還可以為<ol>定義start屬性用于規(guī)定項(xiàng)目符號(hào)的起始值，為<li>定義value屬性用來(lái)規(guī)定項(xiàng)目符號(hào)的數(shù)字。
以上的效果都是HTML自帶效果，如果效果上有更多的需求，可以配合CSS來(lái)完成，例如圖2.32的效果，讀者可以在學(xué)習(xí)完CSS時(shí)再來(lái)實(shí)現(xiàn)。
圖2.32 CSS美化有序列表
2. 無(wú)序列表
在HTML中用<ul>標(biāo)簽表示無(wú)序列表，列表項(xiàng)目用<li>標(biāo)簽表示，列表項(xiàng)目沒(méi)有先后順序之分，因此稱為無(wú)序列表。接下來(lái)通過(guò)案例來(lái)演示無(wú)序列表，如例2-22所示。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset=”utf-8”> 5 <title>列表標(biāo)簽</title> 6 </head> 7 <body> 8 <ul> 9 <li>HTML</li> 10 <li>CSS</li> 11 <li>JavaScript</li> 12 <li>PHP</li> 13 <li>JAVA</li> 14 </ul> 15 </body> 16 </html>
運(yùn)行結(jié)果如圖2.33所示。
圖2.33 無(wú)序列表展示效果
跟有序列表類似，讀者可以看到默認(rèn)情況下無(wú)序列表前面會(huì)有一個(gè)黑色的小圓點(diǎn)，同樣可以通過(guò)type屬性修改其顯示效果，type屬性取值如表2.9。
接下來(lái)通過(guò)案例來(lái)演示無(wú)序列表type屬性取值，如例2-23所示。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset=”utf-8”> 5 <title>列表標(biāo)簽</title> 6 </head> 7 <body> 8 <ul type=”circle”> 9 <li>HTML</li> 10 <li>CSS</li> 11 <li>JavaScript</li> 12 <li>PHP</li> 13 <li>JAVA</li> 14 </ul> 15 </body> 16 </html>
運(yùn)行結(jié)果如圖2.34所示。
圖2.34 無(wú)序列表展示效果
<li></li>之間相當(dāng)于一個(gè)容器，可以容納所有的元素。但是<ul></ul>中只能嵌套<li></li>，不允許直接在<ul></ul>標(biāo)記中輸入文字。
3. 定義列表
定義列表通常用于對(duì)專業(yè)術(shù)語(yǔ)或名詞進(jìn)行解釋和描述，與有序列表和無(wú)序列表不同，定義列表項(xiàng)目前沒(méi)有任何項(xiàng)目符號(hào)。其語(yǔ)法如下。
<dl> <dt>定義名詞</dt> <dd>名詞解釋和描述</dd> …… </dl>
上面的語(yǔ)法中，<dl></dl>標(biāo)簽用于定義列表，<dt></dt>和<dd></dd>并列嵌套于<dl></dl>中，其中<dt></dt>標(biāo)簽用于定義專業(yè)術(shù)語(yǔ)或名詞，<dd></dd>標(biāo)簽用于對(duì)名詞進(jìn)行解釋和描述。一對(duì)<dt></dt>可以對(duì)應(yīng)多對(duì)<dd></dd>，即一個(gè)名詞可以有多個(gè)解釋和描述。接下來(lái)通過(guò)案例來(lái)演示定義列表，如例2-24所示。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>列表標(biāo)簽</title> 6 </head> 7 <body> 8 <dl> 9 <dt>HTML</dt> 10 <dd>超文本標(biāo)記語(yǔ)言</dd> 11 <dt>CSS</dt> 12 <dd>層疊樣式表</dd> 13 <dt>JavaScript</dt> 14 <dd>網(wǎng)頁(yè)腳本語(yǔ)言</dd> 15 </dl> 16 </body> 17 </html>
運(yùn)行結(jié)果如圖2.35所示。
圖2.35 定義列表展示效果
定義列表在實(shí)際開(kāi)發(fā)中不常用，大多數(shù)情況還是使用有序列表和無(wú)序列表，后面章節(jié)中還會(huì)詳細(xì)講解HTML標(biāo)簽使用規(guī)范。
2.3.10 <div>與<span>
div全稱為division，“分割、分區(qū)”的意思，<div>標(biāo)簽用來(lái)劃分一個(gè)區(qū)域，相當(dāng)于一塊區(qū)域容器，可以容納段落、標(biāo)題、表格、圖像等各種網(wǎng)頁(yè)元素。即HTML中大多數(shù)的標(biāo)簽都可以嵌套在<div>標(biāo)簽中，<div>中還可以嵌套多層<div>，用來(lái)將網(wǎng)頁(yè)分割成獨(dú)立的、不同的部分，來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)的規(guī)劃和布局。如圖2.36為阿里汽車和潮電影網(wǎng)站的布局。都是使用<div>標(biāo)簽來(lái)實(shí)現(xiàn)的。
圖2.36 淘寶網(wǎng)區(qū)塊展示效果
接下來(lái)通過(guò)案例來(lái)簡(jiǎn)單演示<div>標(biāo)簽的使用，如例2-25所示。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>div/span</title> 6 </head> 7 <body> 8 <div>區(qū)域1 9 <p>這是一個(gè)段落</p> 10 </div> 11 <div>區(qū)域2 12 <h6>這是一個(gè)段落</h6> 13 </div> 14 <div>區(qū)域3 15 <hr align="left" width="50" color="#00FF66"> 16 </div> 17 </body> 18 </html>
運(yùn)行結(jié)果如圖2.37所示。
圖2.37 div標(biāo)簽展示效果
<span>標(biāo)簽是用來(lái)修飾文字的，也叫做內(nèi)聯(lián)標(biāo)簽 ，如圖2.38。
圖2.38 千鋒教育文字修飾效果
接下來(lái)通過(guò)案例來(lái)演示<span>標(biāo)簽，如例2-26所示。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>div/span</title> 6 </head> 7 <body> 8 <span>文字修飾1</span> 9 <span>文字修飾2</span> 10 <span>文字修飾3</span> 11 </body> 12 </html>
運(yùn)行結(jié)果如圖2.39所示。
圖2.39 span標(biāo)簽展示效果
<div>標(biāo)簽和<span>標(biāo)簽，多數(shù)情況下需要配合CSS樣式，在后續(xù)的章節(jié)中，再詳細(xì)的講解<div>標(biāo)簽和<span>標(biāo)簽的用法。
2.4 本章小結(jié)
通過(guò)本章的學(xué)習(xí)，首先介紹HTML語(yǔ)法的發(fā)展歷史和HTML語(yǔ)義化的含義。然后對(duì)HTML常用標(biāo)簽進(jìn)行了講解，如標(biāo)題、段落、列表等。通過(guò)本章的學(xué)習(xí)，能掌握HTML常用標(biāo)簽，能初步編寫(xiě)基本的HTML網(wǎng)頁(yè)。
2.5 習(xí)題
1. 填空題
(1) 網(wǎng)頁(yè)加載時(shí)常用圖片的格式為 、 、 。
(2) 圖像標(biāo)簽的屬性src用于指定圖像 和 的屬性。
(3) 文件的路徑可以分為 和 兩種。
(4) <strong>標(biāo)簽強(qiáng)調(diào)文本 。
(5) 是為了實(shí)現(xiàn)HMTL向XML過(guò)渡，讓作者按照統(tǒng)一的風(fēng)格來(lái)編寫(xiě)標(biāo)簽。
2.選擇題
(1) 在一個(gè)網(wǎng)頁(yè)中，只能出現(xiàn)一次的標(biāo)題標(biāo)簽是（ ）。
A．<h1> B．<h2>
C．<h3> D．<h4>
(2) a標(biāo)簽的target屬性中哪一個(gè)值是在一個(gè)全新的空白窗口中打開(kāi)鏈接（ ）。
A．_self B．_blank
C．_top D．_parent
(3) 定義列表不包括下面哪個(gè)標(biāo)簽（ ）。
A．<dl> B．<dt>
C．<dd> D．<ol>
(4) 強(qiáng)調(diào)字體是斜體的標(biāo)簽是（ ）。
A．<sup> B．<del>
C．<em> D．<strong>
(5) 設(shè)置水平線對(duì)齊方式的屬性是（ ）。
A．size B．a(chǎn)lign
C．width D．color
3.思考題
(1) 請(qǐng)簡(jiǎn)述什么是HTML語(yǔ)義化？
(2) 請(qǐng)簡(jiǎn)述有序列表與無(wú)序列表之間的區(qū)別？
內(nèi)容來(lái)源書(shū)籍：《HTML5從入門(mén)到精通》，一本W(wǎng)eb前端實(shí)用性綜合技術(shù)圖書(shū)。
簡(jiǎn)介：《HTML5從入門(mén)到精通》倡導(dǎo)“快樂(lè)學(xué)習(xí)，實(shí)戰(zhàn)就業(yè)”的理念，作為初學(xué)者高品質(zhì)的入門(mén)教材之一，免費(fèi)提供一站式教學(xué)服務(wù)包，附贈(zèng)配套PPT、教學(xué)視頻、教學(xué)大綱、考試系統(tǒng)、測(cè)試題等資源。且書(shū)本內(nèi)容覆蓋全面、講解詳細(xì)，其中包括標(biāo)簽語(yǔ)義化、標(biāo)簽使用規(guī)范、選擇器類型、盒模型、標(biāo)簽分類、樣式重置、CSS優(yōu)化、Photoshop切圖處理、整頁(yè)制作、CSS3新樣式、HTML5新功能等。與此同時(shí)，本教材通過(guò)總結(jié)、歸納HTML、CSS、CSS3動(dòng)畫(huà)與3D及移動(dòng)端布局與響應(yīng)式開(kāi)發(fā)等核心知識(shí)點(diǎn)，并從項(xiàng)目開(kāi)發(fā)的實(shí)際需求入手，將理論知識(shí)與實(shí)際應(yīng)用相結(jié)合，以此幫助初學(xué)者全面、系統(tǒng)、深入、透徹地理解HTML5的基礎(chǔ)知識(shí)和技術(shù)，使他們快速地成長(zhǎng)為初級(jí)程序員，并擁有一定的項(xiàng)目開(kāi)發(fā)經(jīng)驗(yàn)，從而在職場(chǎng)中擁有一個(gè)較高的起點(diǎn)。
輯導(dǎo)讀：在線辦公在疫情期間成為企業(yè)辦公的主要形式，而隨著信息化的發(fā)展，在未來(lái)也將成為一種流行趨勢(shì)。而飛書(shū)作為在線辦公產(chǎn)品中的佼佼者，它的成功經(jīng)驗(yàn)值得其他產(chǎn)品學(xué)習(xí)。本文作者將以飛書(shū)為例，對(duì)其進(jìn)行深入的分析，希望對(duì)你有幫助。
本文會(huì)用到Seven Domains Model（圖1），把整個(gè)外部環(huán)境分為四層。
第一層是宏觀的市場(chǎng)現(xiàn)狀，第二層是宏觀行業(yè)狀況，第三層是微觀消費(fèi)者群體分析，第四層是則是微觀的公司產(chǎn)品分析。第一第二層將從宏觀視角上來(lái)觀察移動(dòng)辦公平臺(tái)的發(fā)展，第三第四層則會(huì)以飛書(shū)為主要視點(diǎn)進(jìn)行競(jìng)爭(zhēng)環(huán)境的分析。
在宏觀市場(chǎng)現(xiàn)狀分析上，會(huì)采用PEST分析；在宏觀行業(yè)分析上會(huì)采用波特五力模型；而在產(chǎn)品分析中，會(huì)從用戶體驗(yàn)要素理論和KANO模型的角度進(jìn)行分析。
圖表 1：Seven Domains’ Model (Mullins, 2013)
從圖2可以看到，政策對(duì)移動(dòng)辦公平臺(tái)一直持有正面態(tài)度。2015年，國(guó)務(wù)院出臺(tái)文件，鼓勵(lì)云計(jì)算降低信息化門(mén)檻，推動(dòng)產(chǎn)業(yè)信息化。隨后一直到2017年，每年都有強(qiáng)調(diào)推進(jìn)工業(yè)信息化。在2017年，工信部明確指出了要加快企業(yè)級(jí)SaaS服務(wù)的發(fā)展，推進(jìn)中小企業(yè)信息化進(jìn)程。
圖表 2：中國(guó)移動(dòng)辦公平臺(tái)相關(guān)政策（艾瑞網(wǎng), 2018）
我國(guó)的GDP增長(zhǎng)今年來(lái)持續(xù)放緩，從2010年10.6%逐步降至2019年6.1%。從GDP的貢獻(xiàn)率來(lái)看，投資對(duì)國(guó)內(nèi)GDP的增長(zhǎng)貢獻(xiàn)下滑，原因是以往的投資在傳統(tǒng)行業(yè)中導(dǎo)致產(chǎn)能過(guò)剩引起了資本效益降低。消費(fèi)支出對(duì)GDP的貢獻(xiàn)穩(wěn)定在60%左右，是經(jīng)濟(jì)發(fā)展的主要?jiǎng)恿Α?/p>
圖表 3：中國(guó)GDP增長(zhǎng)情況（艾瑞網(wǎng), 2020a）
圖表 4：GDP增長(zhǎng)貢獻(xiàn)率（艾瑞網(wǎng), 2020a）
盡管國(guó)內(nèi)GDP增速正在放緩，云服務(wù)市場(chǎng)卻是風(fēng)景獨(dú)好，欣欣向榮。云服務(wù)市場(chǎng)在2019年增速達(dá)到了57.1%，存量規(guī)模1612.4億元。其中IaaS市場(chǎng)增速70%；PaaS市場(chǎng)增速27%，并將持續(xù)提升其規(guī)模增長(zhǎng)速度（艾瑞網(wǎng), 2020）。SaaS市場(chǎng)也在持續(xù)穩(wěn)定增長(zhǎng)。SaaS市場(chǎng)規(guī)模在2018年為243.5億元，同比增長(zhǎng)47.9%（圖6）。
圖表 5：云服務(wù)整體市場(chǎng)規(guī)模（艾瑞網(wǎng), 2020c）
圖表 6：2013年至2018年SaaS市場(chǎng)規(guī)模及預(yù)期增長(zhǎng)（艾瑞網(wǎng), 2019b)
為了觀察社會(huì)大眾對(duì)移動(dòng)辦公軟件的態(tài)度，筆者在2020年9月22日通過(guò)“移動(dòng)辦公”這一關(guān)鍵詞在微博上進(jìn)行前10頁(yè)信息（共200條微博）的整合，得到如下表格。
圖表 7：微博用戶對(duì)移動(dòng)辦公的態(tài)度匯總
總體而言，微博上的用戶對(duì)移動(dòng)辦公總體呈正面肯定態(tài)度。首先，移動(dòng)辦公軟件能夠讓用戶做到“生活辦公兩手抓”。例如，在本次收集的數(shù)據(jù)中有7條微博展示了一種“上午度假，下午辦公”的生活方式。其次，移動(dòng)辦公軟件還滿足了用戶辦公場(chǎng)景個(gè)性化的需求，用戶表現(xiàn)出對(duì)于在不同場(chǎng)所（如咖啡廳、書(shū)店和家中辦公）進(jìn)行辦公的新鮮感。移動(dòng)辦公平臺(tái)也在推動(dòng)“clean desk”的無(wú)紙化辦公文化。
在情景方面，移動(dòng)辦公軟件能夠讓用戶的時(shí)間碎片化，進(jìn)而能夠把生活中的等待閑余用于辦公。例如，有4位用戶反映自己利用在地鐵、高鐵或飛機(jī)上的閑余時(shí)間進(jìn)行工作事務(wù)的處理。同時(shí)，這種碎片化也更方便用戶去處理生活中的人際關(guān)系，如照顧小孩或陪伴異性。
網(wǎng)絡(luò)上也有對(duì)于移動(dòng)辦公軟件的負(fù)面評(píng)價(jià)。最主流的負(fù)面評(píng)價(jià)認(rèn)為移動(dòng)辦公軟件模糊了工作與生活的界線，使得用戶就算是在周末或休假也要繼續(xù)工作。同時(shí)，電腦依舊是移動(dòng)辦公平臺(tái)的主要端口，硬件和網(wǎng)絡(luò)條件限制著移動(dòng)辦公軟件往下沉市場(chǎng)的發(fā)展。
由于硬件條件和網(wǎng)絡(luò)條件限制著移動(dòng)辦公平臺(tái)對(duì)中小企業(yè)的影響，對(duì)于這一些方面的技術(shù)探索，包括5G和云設(shè)備，將會(huì)作為這一節(jié)的要探討的內(nèi)容。
5G
5G，即第五代移動(dòng)通信技術(shù)，可能是當(dāng)下最熱門(mén)的，被談?wù)撟疃嗟募夹g(shù)了。艾瑞咨詢2020年關(guān)于5G的報(bào)告顯示，比較了解或非常了解5G的用戶占總用戶的57.2%，并且高達(dá)87.1%認(rèn)為5G會(huì)對(duì)生活產(chǎn)生巨大影響。
圖表 8：用戶對(duì)5G的認(rèn)知 (艾瑞網(wǎng), 2019a)
這種對(duì)5G的高度評(píng)價(jià)也導(dǎo)致了民眾對(duì)5G的向往與期待，大約有76.6%的用戶希望能夠在2021年之前就能夠用上5G（圖9）。可以預(yù)見(jiàn)的是，在接下來(lái)的幾年內(nèi)，5G用戶將會(huì)有巨大增長(zhǎng)。5G的大覆蓋、高速率、低時(shí)延等特點(diǎn)也能很好的推動(dòng)移動(dòng)辦公平臺(tái)向三四線城市的發(fā)展。而移動(dòng)辦公平臺(tái)在這種趨勢(shì)下，也需要對(duì)目前平臺(tái)上的既有應(yīng)用和第三方應(yīng)用作出改革，推出適應(yīng)5G時(shí)代的辦公方式。
圖表 9：用戶對(duì)5G的期待 (艾瑞網(wǎng), 2019a)
5G對(duì)于設(shè)備的輕量化也有明顯的推動(dòng)作用。例如，在2020年9月17日，阿里發(fā)布了第一臺(tái)云電腦“無(wú)影”，僅有一張名片的大小，單手可握。另外，在云VR的概念方面，5G可以把計(jì)算和圖像渲染放到云端，以降低VR設(shè)備的成本和性能要求，使得VR設(shè)備更加輕量。可以說(shuō)5G對(duì)于移動(dòng)辦公的硬件輕便化也有著舉足輕重的影響。
圖表 10：移動(dòng)辦公平臺(tái)的波特五力模型分析
在同業(yè)競(jìng)爭(zhēng)和新進(jìn)入者威脅方面，目前除了華為WeLink，飛書(shū)、釘釘、企業(yè)微信都通過(guò)免費(fèi)策略來(lái)?yè)寠Z市場(chǎng)份額，因此同業(yè)競(jìng)爭(zhēng)者的威脅性高。同時(shí)，由于市場(chǎng)競(jìng)爭(zhēng)激烈，新進(jìn)入者威脅偏小。
平臺(tái)擁有對(duì)供方的中等強(qiáng)度議價(jià)權(quán)。首先，平臺(tái)通過(guò)對(duì)第三方開(kāi)發(fā)者的應(yīng)用的整合，形成對(duì)其它企業(yè)級(jí)SaaS服務(wù)的相對(duì)優(yōu)勢(shì)，加上免費(fèi)策略，從而占據(jù)了相對(duì)較大的市場(chǎng)份額。如此一來(lái)，供方的議價(jià)權(quán)就會(huì)受到影響。其次，如圖11所示，市面上協(xié)同辦公、文檔管理和視頻會(huì)議三個(gè)方面的SaaS產(chǎn)品在功能上的交叉重疊較多，整體趨于同質(zhì)化，因此供方的議價(jià)權(quán)也會(huì)受到影響。除非第三方開(kāi)發(fā)者能夠開(kāi)發(fā)出差異性強(qiáng)的優(yōu)質(zhì)產(chǎn)品，否則隨著平臺(tái)的發(fā)展以及同質(zhì)化SaaS產(chǎn)品的豐富，供方的議價(jià)權(quán)會(huì)持續(xù)下降。
圖表 11：遠(yuǎn)程辦公應(yīng)用分類圖（易觀千帆，2020）
平臺(tái)對(duì)買方有中等強(qiáng)度議價(jià)權(quán)。釘釘、企業(yè)微信和飛書(shū)之間競(jìng)爭(zhēng)激烈，導(dǎo)致買方議價(jià)權(quán)上升，三家平臺(tái)對(duì)用戶的免費(fèi)政策也側(cè)面印證了這一點(diǎn)。同時(shí)，現(xiàn)有企業(yè)一般都有自己較成熟的一套的管理運(yùn)作模式，要讓他們使用移動(dòng)辦公平臺(tái)、適應(yīng)新的運(yùn)營(yíng)方式并不輕松，用戶有較高的學(xué)習(xí)成本。盡管從長(zhǎng)期來(lái)看，能夠打破信息孤島效應(yīng)的移動(dòng)信息平臺(tái)可以推動(dòng)企業(yè)進(jìn)一步提升競(jìng)爭(zhēng)力，然而近期的市場(chǎng)壓力可能會(huì)讓企業(yè)更加保守謹(jǐn)慎。以上這些原因?qū)е缕脚_(tái)對(duì)買方的議價(jià)權(quán)下降。
移動(dòng)辦公平臺(tái)面臨著中等偏低的替代品威脅。這在一方面是由于現(xiàn)有企業(yè)普遍都有使用ERP、CRM、HRM或者OA等類別的企業(yè)級(jí)SaaS產(chǎn)品，如金山旗下的WPS，金蝶的財(cái)務(wù)軟件等，能夠替代企業(yè)對(duì)移動(dòng)辦公平臺(tái)的需求，這形成了一部分移動(dòng)辦公平臺(tái)的替代品威脅。而另一方面，平臺(tái)整合了這些SaaS服務(wù)，并且把這些服務(wù)產(chǎn)生的信息集中起來(lái)，提升了企業(yè)信息周轉(zhuǎn)的效率，這使得企業(yè)在使用后對(duì)移動(dòng)辦公平臺(tái)會(huì)形成一定的忠誠(chéng)度和依賴性，移動(dòng)辦公平臺(tái)的替代品威脅也因此有所削弱。這一點(diǎn)可以通過(guò)圖12中2019年4月到2020年1月釘釘大約50%的用戶次月存留率可以得到一定的印證（沒(méi)有查到企業(yè)微信和飛書(shū)相關(guān)的信息）。
圖表 12：釘釘用戶的次月留存率
從整體上看，移動(dòng)辦公平臺(tái)的上升空間大，未來(lái)前景可期。由于今年受疫情影響，國(guó)內(nèi)移動(dòng)化的協(xié)同辦公軟件得到空前的關(guān)注，2020年預(yù)計(jì)移動(dòng)協(xié)同辦公軟件市場(chǎng)規(guī)模同比增長(zhǎng)43.5%，預(yù)計(jì)市場(chǎng)規(guī)模達(dá)440.2億元，預(yù)計(jì)2020年后增速也會(huì)維持在20%左右。
圖表 13：協(xié)同辦公軟件市場(chǎng)規(guī)模增長(zhǎng)（艾瑞網(wǎng)，2018）
目前企業(yè)微信、釘釘和飛書(shū)都以中小企業(yè)為目標(biāo)客戶，而對(duì)于別的一些潛在用戶，如設(shè)計(jì)師，科研人員等比較重視個(gè)體獨(dú)立工作的群體并沒(méi)有明顯的設(shè)計(jì)思考和宣傳偏好。但這一些群體也有可能出于對(duì)于材料收集、整理和引用，研究/設(shè)計(jì)成果保存以及項(xiàng)目進(jìn)度安排規(guī)劃的需求而使用這些平臺(tái)。對(duì)這些松散用戶體系的整合可能能夠帶來(lái)新的用戶流量。
細(xì)分領(lǐng)域的需求還沒(méi)有得到滿足。目前市場(chǎng)上的移動(dòng)辦公平臺(tái)大多數(shù)瞄準(zhǔn)通用性應(yīng)用，針對(duì)垂直細(xì)分領(lǐng)域的應(yīng)用數(shù)量相對(duì)較少。而在各個(gè)行業(yè)，整個(gè)供應(yīng)鏈，工作流程和工作需求都大不一樣。除了普遍適用的通用性服務(wù)，移動(dòng)辦公平臺(tái)的另一個(gè)核心競(jìng)爭(zhēng)力是去變革各個(gè)行業(yè)中中小企業(yè)落后的商業(yè)管理模式，并且提供能夠推動(dòng)行業(yè)進(jìn)步的工作方式。為此，移動(dòng)辦公軟件或許仍舊需要去了解各行業(yè)中的中小企業(yè)的痛點(diǎn)，以給出能夠適應(yīng)特定行業(yè)內(nèi)流程的解決方案。
出于對(duì)績(jī)效的追求，如何提升組織內(nèi)部員工協(xié)作能力成為了企業(yè)普遍關(guān)心的問(wèn)題。在企業(yè)的內(nèi)部協(xié)作中，有5類問(wèn)題是較為常見(jiàn)的，分別是：溝通協(xié)作，文檔管理，人力資源配置，行業(yè)個(gè)性化需求和跨部門(mén)協(xié)作。
圖表 14：企業(yè)辦公產(chǎn)生的需求
在另一方面，企業(yè)也對(duì)跨設(shè)備的移動(dòng)辦公軟件有著剛需。以往的單一設(shè)備上的SaaS服務(wù)軟件已不足以滿足公司需求。這種工作方式使得公司在軟件服務(wù)的成本增加，而由于硬件設(shè)備的限制，使用的效率逐漸減小。對(duì)于常常出差的員工而言，公司購(gòu)買的軟件常常不能滿足其辦公需求。由此，公司對(duì)于移動(dòng)辦公平臺(tái)的需求勢(shì)必會(huì)漸漸取代單一設(shè)備上的SaaS軟件。
飛書(shū)的目標(biāo)是提升公司用戶的內(nèi)部協(xié)作能力，并使得公司辦公泛在化和移動(dòng)化。飛書(shū)官網(wǎng)的slogan “在飛書(shū)，享高效” 也充分表現(xiàn)出飛書(shū)提升組織效率的產(chǎn)品目標(biāo)。
細(xì)分來(lái)看，飛書(shū)主要目標(biāo)有：
在本節(jié)中，根據(jù)4位身邊朋友的訪談?dòng)涗洠肒ANO模型對(duì)飛書(shū)的一些功能進(jìn)行分類，得到下圖。
圖表 15：對(duì)飛書(shū)App內(nèi)功能進(jìn)行分類
從圖15中可以看到，飛書(shū)在需求處理方面非常重視信息流動(dòng)、文檔管理和人力資源配置。這與飛書(shū)的自我定位是緊密相關(guān)的。
飛書(shū)為了提升組織的溝通協(xié)作能力，開(kāi)發(fā)了很多非常出色的細(xì)節(jié)。在信息降噪方面，通過(guò)Pin和表情回復(fù)，減少了無(wú)用信息，提升了溝通效率。在信息傳輸方面，語(yǔ)音自動(dòng)轉(zhuǎn)錄文字的功能可以提升信息輸入的效率。視頻會(huì)議中飛書(shū)還允許用戶對(duì)文檔進(jìn)行協(xié)同編輯和評(píng)論。不過(guò)其中一位受訪者提出了“一起編輯文件不會(huì)很吵嗎？“這樣的疑問(wèn)，這說(shuō)明”視頻會(huì)議+文檔協(xié)同編輯“的功能的使用方式還需要更多的宣傳才能被人理解和喜愛(ài)。
在文檔管理方面，飛書(shū)也有很多非常讓人驚喜的功能。比如說(shuō)在某一位受訪學(xué)生在知道了文檔評(píng)論功能和文件內(nèi)容搜索功能后，就眼睛一亮，提出想要用該軟件整理電子課件上的筆記，問(wèn)“那能不能上傳pdf文件呢？“不過(guò)筆者上傳手機(jī)本地的pdf和word文件都沒(méi)有成功，后來(lái)通過(guò)PC端才成功上傳了文件。在PC端可以對(duì)pdf的個(gè)別字句進(jìn)行評(píng)論，但在手機(jī)端就只能對(duì)整個(gè)文檔進(jìn)行評(píng)論。所以整體而言飛書(shū)對(duì)于pdf文件的編輯功能還比較簡(jiǎn)陋。
由于筆者訪問(wèn)的人群中沒(méi)有飛書(shū)的使用者，在采訪中沒(méi)有辦法作深入的了解，所以對(duì)于飛書(shū)的日歷和工作臺(tái)不好作出評(píng)價(jià)。
圖表 16：飛書(shū)App結(jié)構(gòu)圖
圖表 17：飛書(shū)App內(nèi)“消息頁(yè)”（左）和“云文檔頁(yè)”（右）的布局
飛書(shū)APP在設(shè)計(jì)上以組織效率為出發(fā)點(diǎn)。它在消息和文檔中用以盡可能小的空間容納常用聯(lián)系人和文件（圖17中綠色標(biāo)注），又在工作臺(tái)中用相對(duì)較大的空間放置常用應(yīng)用（圖18中綠色標(biāo)注）。同時(shí)，在文檔頁(yè)面和工作臺(tái)頁(yè)面，飛書(shū)提供了提前設(shè)定好的篩選條件，以加快搜索速度（圖17、18中黃色標(biāo)注）。
圖表 18：飛書(shū)App內(nèi)工作臺(tái)布局
5.4.1 個(gè)人認(rèn)為能夠改進(jìn)的地方
已讀未讀圖標(biāo)：
圖表 19：飛書(shū)App內(nèi)“群聊頁(yè)”（左圖）和“文檔評(píng)論”（右圖）的布局
在上面兩個(gè)圖中，可以看到左右兩圖被黃色黑邊框高亮的圖標(biāo)除了顏色之外沒(méi)有太多的差別（左圖中“?“為綠色，右圖中“?“為灰色），但是這兩個(gè)圖標(biāo)分別代表這不同的意思。左圖群聊頁(yè)中的“?“表示的是已讀未讀功能，右圖文檔評(píng)論框中“?“則表示的是解決評(píng)論功能。對(duì)于習(xí)慣了在群聊中用“?“確認(rèn)消息是否傳達(dá)的用戶來(lái)說(shuō)，右圖文檔評(píng)論框中的“?“會(huì)讓用戶下意識(shí)認(rèn)為這也是已讀未讀功能，進(jìn)而造成了用戶心理上的錯(cuò)覺(jué)。因此個(gè)人建議右圖里的“?“可以進(jìn)行修改。筆者認(rèn)為可以將之改為一個(gè)類似滑塊驗(yàn)證碼的設(shè)計(jì)，來(lái)讓用戶區(qū)別開(kāi)這兩個(gè)圖標(biāo)之間的區(qū)別。
圖表 20：飛書(shū)“文檔評(píng)論”布局修改意見(jiàn)
取消顏色和高亮：
圖表 21：飛書(shū)App內(nèi)“顏色與高亮頁(yè)”的原布局（左圖）與修改建議（右圖）
取消字體顏色和高亮的按鍵位置可以放在更方便的地方。在目前的設(shè)計(jì)中（左圖），在選擇字體顏色和高亮之后，用戶輸入的每個(gè)字體都會(huì)有顏色/高亮效果，而如果要取消該效果，用戶就需要在選項(xiàng)框的最下面找到“清除“按鈕。在尋找”清除“選項(xiàng)的時(shí)候，用戶需要稍微往下翻頁(yè)。由于清除選項(xiàng)恰好是在該選項(xiàng)框中唯一一個(gè)需要往下翻頁(yè)才能被看見(jiàn)的按鈕，用戶可能會(huì)找不著，進(jìn)而產(chǎn)生焦慮。因此，筆者認(rèn)為這個(gè)設(shè)計(jì)可以進(jìn)行一定的改進(jìn)（筆者使用設(shè)備為iphone 6，屏幕較小，可能在別的設(shè)備上顯示效果會(huì)不一樣）。筆者個(gè)人認(rèn)為可以把原文效果的選項(xiàng)放在顏色和高亮標(biāo)題上（右圖橙色箭頭指示處），提升用戶的使用體驗(yàn)。
飛書(shū)在整體上使用白色作為頁(yè)面底色，以顯示出簡(jiǎn)潔干練的風(fēng)格。為了突出重點(diǎn)信息，主要或重要信息用黑色字體，次要信息則使用小字號(hào)的灰色字體。圓形圖標(biāo)底色以藍(lán)色為主，搭配少量的暖色來(lái)活躍整個(gè)界面。圖標(biāo)內(nèi)嵌以白色的圖形進(jìn)行表意，在應(yīng)合圖標(biāo)對(duì)應(yīng)的標(biāo)題的同時(shí)，也在顏色上呼應(yīng)了頁(yè)面背景，使得整體要素和諧，不會(huì)有突兀的地方。
本文基于筆者對(duì)飛書(shū)app的體驗(yàn)，和他人的訪談以及在微博上收集到的一些用戶反饋?zhàn)鳛榻?jīng)驗(yàn)證據(jù)，對(duì)產(chǎn)品需求進(jìn)行了分類，并提出了一些需要改進(jìn)的地方以及筆者的建議。全文的主要結(jié)論如下：
Mullins, J. (2017). The new business road test: what entrepreneurs and investors should do before launching a lean start-up. Pearson UK.
PM大叔.(2020)《競(jìng)品分析報(bào)告：飛書(shū)VS釘釘VS企業(yè)微信，移動(dòng)辦公哪家強(qiáng)》. 人人都是產(chǎn)品經(jīng)理. http://www.woshipm.com/evaluating/3821740.html
艾瑞網(wǎng).(2020a)《2020年中國(guó)網(wǎng)絡(luò)經(jīng)濟(jì)年度洞察報(bào)告簡(jiǎn)報(bào)》. http://report.iresearch.cn/report_pdf.aspx?id=3611
艾瑞網(wǎng).(2020b)《湖光秋月兩相和-2020年5G+云VR研究報(bào)告》. http://report.iresearch.cn/report_pdf.aspx?id=3575
艾瑞網(wǎng).(2020c)《中國(guó)基礎(chǔ)云服務(wù)行業(yè)發(fā)展洞察》. http://report.iresearch.cn/report_pdf.aspx?id=3651
艾瑞網(wǎng).(2019a)《未來(lái)已來(lái)-2019年5G行業(yè)研究報(bào)告》. http://report.iresearch.cn/report_pdf.aspx?id=3512
艾瑞網(wǎng).(2019b)《中國(guó)企業(yè)級(jí)SaaS行業(yè)研究報(bào)告》. http://report.iresearch.cn/report_pdf.aspx?id=3374
艾瑞網(wǎng).(2018)《重新定義移動(dòng)辦公-2018年中國(guó)企業(yè)移動(dòng)辦公平臺(tái)發(fā)展洞察》. http://report.iresearch.cn/report_pdf.aspx?id=3130
忍者無(wú)疆.(2020)《字節(jié)跳動(dòng)下的飛書(shū)，有哪些優(yōu)勢(shì)與劣勢(shì)》. 人人都是產(chǎn)品經(jīng)理. http://www.woshipm.com/evaluating/3490887.html
是灰機(jī)吖.(2020)《從一個(gè)90后員工的角度，談?wù)勎覟槭裁聪矚g飛書(shū)》. 人人都是產(chǎn)品經(jīng)理. http://www.woshipm.com/zhichang/4144508.html
十里村.(2020)《被聯(lián)合國(guó)推薦的字節(jié)跳動(dòng)飛書(shū)，哪些產(chǎn)品亮點(diǎn)值得學(xué)習(xí)》. 人人都是產(chǎn)品經(jīng)理. http://www.woshipm.com/it/3512994.html
王海.(2020)《當(dāng)我們聊飛書(shū)時(shí)，我們應(yīng)該聊什么》. 人人都是產(chǎn)品經(jīng)理. http://www.woshipm.com/operate/4167689.html
小白不白.(2020)《企業(yè)辦公平臺(tái)的未來(lái)發(fā)展方向》. 人人都是產(chǎn)品經(jīng)理. http://www.woshipm.com/pd/3466012.html
易觀千帆.(2020)《在線辦公用戶行為分析2020》
田宇洲. (2020)《【產(chǎn)品復(fù)盤(pán)】字節(jié)跳動(dòng)-飛書(shū)團(tuán)隊(duì)工作1年收獲總結(jié)》. 人人都是產(chǎn)品經(jīng)理. http://www.woshipm.com/pd/4126729.html
本文由 @汪仔4496 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來(lái)自Unsplash，基于CC0協(xié)議
天我們將為大家介紹一個(gè)令網(wǎng)頁(yè)性能大幅提升的神奇技術(shù)——CSS硬件加速。隨著移動(dòng)互聯(lián)網(wǎng)的蓬勃發(fā)展和網(wǎng)頁(yè)設(shè)計(jì)越發(fā)復(fù)雜，如何優(yōu)化網(wǎng)頁(yè)性能成為了前端開(kāi)發(fā)者們亟待解決的問(wèn)題。在這篇文章中，我們將深入了解CSS硬件加速的原理，并通過(guò)一個(gè)生動(dòng)的案例來(lái)展示它如何幫助我們改善網(wǎng)頁(yè)的渲染性能。
一、什么是CSS硬件加速
在傳統(tǒng)的網(wǎng)頁(yè)渲染中，瀏覽器使用中央處理器（CPU）來(lái)處理CSS樣式和頁(yè)面渲染。然而，隨著網(wǎng)頁(yè)變得越來(lái)越復(fù)雜，例如包含大量動(dòng)畫(huà)、過(guò)渡效果或復(fù)雜的變換，CPU可能會(huì)承擔(dān)較重的負(fù)擔(dān)，導(dǎo)致頁(yè)面加載緩慢或卡頓。CSS硬件加速是一種解決方案，它充分利用了計(jì)算機(jī)的圖形處理單元（GPU）來(lái)加快CSS樣式的處理和渲染，從而提高頁(yè)面性能和流暢度。
1.1 CPU
CPU 即中央處理器。
CPU是計(jì)算機(jī)的大腦，它提供了一套指令集，我們寫(xiě)的程序最終會(huì)通過(guò) CPU 指令來(lái)控制的計(jì)算機(jī)的運(yùn)行。它會(huì)對(duì)指令進(jìn)行譯碼，然后通過(guò)邏輯電路執(zhí)行該指令。整個(gè)執(zhí)行的流程分為了多個(gè)階段，叫做流水線。指令流水線包括取指令、譯碼、執(zhí)行、取數(shù)、寫(xiě)回五步，這是一個(gè)指令周期。CPU會(huì)不斷的執(zhí)行指令周期來(lái)完成各種任務(wù)。
1.2 GPU
GPU 即圖形處理器。
GPU，是Graphics ProcessingUnit的簡(jiǎn)寫(xiě)，是現(xiàn)代顯卡中非常重要的一個(gè)部分，其地位與CPU在主板上的地位一致，主要負(fù)責(zé)的任務(wù)是加速圖形處理速度。GPU是顯卡的“大腦”，它決定了該顯卡的檔次和大部分性能，同時(shí)也是2D顯示卡和3D顯示卡的區(qū)別依據(jù)。2D顯示芯片在處理3D圖像和特效時(shí)主要依賴CPU的處理能力，稱為“軟加速”。3D顯示芯片是將三維圖像和特效處理功能集中在顯示芯片內(nèi)，也即所謂的“硬件加速”功能。
二、CSS硬件加速原理
CSS硬件加速的原理涉及到瀏覽器的渲染引擎、GPU以及優(yōu)化渲染的過(guò)程。
2.1 瀏覽器的渲染流程
一個(gè)完整的渲染步驟大致可總結(jié)為如下：
2.2 CSS硬件加速觸發(fā)
在傳統(tǒng)的渲染過(guò)程中，布局和繪制是由CPU來(lái)完成的，而在CSS硬件加速下，GPU參與了渲染的處理，從而提高了性能。
CSS 中的以下幾個(gè)屬性能觸發(fā)硬件加速：
1.transform屬性：該屬性用于應(yīng)用2D或3D變換效果，如旋轉(zhuǎn)、縮放、平移等。當(dāng)使用transform屬性時(shí)，瀏覽器會(huì)將變換任務(wù)交給GPU處理，從而實(shí)現(xiàn)硬件加速。
2.opacity屬性：該屬性用于設(shè)置元素的不透明度。雖然它主要用于控制透明度，但是一個(gè)不為1的值（例如0.99）也可以觸發(fā)硬件加速。
3.will-change屬性：will-change屬性用于提示瀏覽器一個(gè)元素將要發(fā)生的變化，以便瀏覽器在渲染過(guò)程中做出優(yōu)化。
一旦CSS硬件加速被觸發(fā)，相關(guān)的渲染任務(wù)將被GPU處理。GPU在處理圖形和動(dòng)畫(huà)方面通常比CPU更快和更高效。對(duì)于復(fù)雜的CSS動(dòng)畫(huà)和變換，GPU可以并行處理多個(gè)任務(wù)，從而提高性能和流暢度。
請(qǐng)注意，CSS硬件加速并不是適用于所有情況。雖然它在許多情況下可以帶來(lái)顯著的性能提升，但有時(shí)也可能導(dǎo)致額外的GPU資源占用，從而影響其他應(yīng)用程序的性能。因此，在使用CSS硬件加速時(shí)，我們應(yīng)該進(jìn)行性能測(cè)試和優(yōu)化，確保在特定情況下確實(shí)能獲得性能的提升。
三、CSS硬件加速案例
現(xiàn)在，我們來(lái)看一個(gè)實(shí)際的案例，通過(guò)啟用CSS硬件加速來(lái)改善網(wǎng)頁(yè)性能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.app {
position: relative;
width: 400px;
height: 400px;
}
.box {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
background-color: yellowgreen;
}
.box-run1 {
-webkit-animation: run1 4s infinite;
animation: run1 4s infinite;
}
.box-run2 {
-webkit-animation: run2 4s infinite;
animation: run2 4s infinite;
}
@keyframes run1 {
0% {
top: 0;
left: 0;
}
25% {
top: 0;
left: 200px;
}
50% {
top: 200px;
left: 200px;
}
75% {
top: 200px;
left: 0;
}
}
@keyframes run2 {
0% {
transform: translate(0, 0);
}
25% {
transform: translate(200px, 0);
}
50% {
transform: translate(200px, 200px);
}
75% {
transform: translate(0, 200px);
}
}
</style>
</head>
<body>
<div class="app">
<div class="box"></div>
</div>
<button class="btn1">循環(huán)轉(zhuǎn)換</button>
<button class="btn2">硬件加速</button>
<script>
let box = document.querySelector(".box");
let btn1 = document.querySelector(".btn1");
let btn2 = document.querySelector(".btn2");
btn1.addEventListener("click", function (e) {
box.classList.remove("box-run2");
box.classList.add("box-run1");
});
btn2.addEventListener("click", function (e) {
box.classList.remove("box-run1");
box.classList.add("box-run2");
});
</script>
</body>
</html>
此時(shí)我們可以運(yùn)行代碼，在頁(yè)面上可以看到，2個(gè)按鈕均能使box在app當(dāng)中循環(huán)移動(dòng)。但對(duì)于這兩種方式的移動(dòng)，他們的效率卻有著很大的差異。我們可以使用開(kāi)發(fā)者工具里的Performance去查看。
當(dāng)我們點(diǎn)擊btn1時(shí)，此時(shí)box盒子通過(guò)定位的left和top進(jìn)行循環(huán)移動(dòng)時(shí)。
此時(shí)我們可以看到細(xì)節(jié)模塊的記錄詳情。
藍(lán)色（Loading）：網(wǎng)絡(luò)通信和HTML解析
黃色（Scripting）:Javascript執(zhí)行
紫色（Rendering）:樣式計(jì)算和布局，即重排
綠色（Painting）:重繪
灰色（Other）：其他事件花費(fèi)的時(shí)間
白色（Idle）：空閑時(shí)間
細(xì)節(jié)模塊有4個(gè)面板，Summary面板每個(gè)事件都會(huì)有，其他三個(gè)只針對(duì)特定事件會(huì)有。
當(dāng)我們點(diǎn)擊btn2時(shí)，此時(shí)box盒子通過(guò)transform屬性進(jìn)行css硬件加速后進(jìn)行循環(huán)移動(dòng)時(shí)。
通過(guò)對(duì)比我們不難發(fā)現(xiàn)，當(dāng)啟用硬件加速時(shí)，方塊的變換會(huì)更加流暢，其樣式計(jì)算和布局、重繪的時(shí)間都會(huì)減少。因?yàn)镚PU參與了渲染過(guò)程。
總結(jié)
CSS硬件加速是一個(gè)強(qiáng)大的前端技術(shù)，可以顯著提高網(wǎng)頁(yè)的性能和流暢度。通過(guò)啟用硬件加速，我們可以將一些渲染任務(wù)交給GPU來(lái)處理，減輕CPU的負(fù)擔(dān)，從而優(yōu)化網(wǎng)頁(yè)的渲染性能。然而，我們需要注意不要濫用硬件加速，避免觸發(fā)不必要的GPU渲染，以確保真正獲得性能提升。在日常的網(wǎng)頁(yè)開(kāi)發(fā)中，我們可以靈活運(yùn)用CSS硬件加速，為用戶帶來(lái)更好的瀏覽體驗(yàn)。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
