網頁螢光筆效果.jpg

在 HTML5 中,預設有提供一個 <mark> 的標籤,可以幫重點文字做到螢光筆畫記的效果。

預設 MARK 樣式

預設 MARK 的樣式非常陽春,就只是單純的將文字的背景設為黃色 background: yellow; 僅此而已。

【範例】

所謂巨量資料(Big Data)指的是隨著電腦網路與行動裝置的發展,呈現爆炸性成長的多樣化資料。

【原始碼】

<p>所謂<mark>巨量資料(Big Data)</mark>指的是隨著電腦網路與行動裝置的發展,呈現爆炸性成長的多樣化資料。</p>

 

自訂 MARK 樣式

若要做到客製化的螢光筆或簽字筆等重點畫記效果,可以修改 MARK 的樣式(覆蓋掉預設的),或是多增加幾種 MARK 的類型來使用。

【範例】黃色粗螢光筆、綠色細螢光筆、紅色簽字筆

所謂巨量資料(Big Data)指的是隨著電腦網路與行動裝置的發展,呈現爆炸性成長的多樣化資料。

在這個凡走過必留下記錄的時代,例如我們在Google上搜尋了哪些關鍵字,點選了哪幾項搜尋結果,還有在博客來網路書店購買了哪些類型的書,或是在Facebook上發表了什麼心情狀態,對哪些人的狀態按讚等等,這些有形與無形之中被各種系統應用儲存的紀錄,累積數千、數萬人的結果,就是巨量資料。

透過資料探勘(Data Mining)的技術,可以分析與歸類巨量資料,挖掘大量瑣碎資料中隱含的意義,進一步根據使用者的習慣,提供與推薦使用者可能喜好的項目。巨量資料也被專家用來預測選舉、電影票房,甚至是掌握天然災害。

雖然分析大量相關資料的結果可能比較不準確,但是它卻能讓我們快速知道趨勢走向,幫助我們針對問題作進一步的深入調查。

【原始碼】CSS 部份

mark.yellow {
	background: linear-gradient(transparent 40%,rgba(255,255,255,0) 40%, #FFF176 90%,transparent 95%);	
    padding: 2px 1px;
}
mark.green {
	background:linear-gradient(transparent 40%,rgba(255,255,255,0) 40%, #CCFF90 50%,transparent 70%);	
    padding: 2px 1px;
}
mark.pink {
	border-bottom: 3px solid #EC407A;
	background: none;
	margin: 0 -2px;
	padding: 0 2px;
}

【原始碼】HTML 部份

<p>所謂<mark class="yellow">巨量資料(Big Data)</mark>指的是隨著電腦網路與行動裝置的發展,呈現爆炸性成長的多樣化資料。</p>

<p>在這個<mark class="pink">凡走過必留下記錄</mark>的時代,例如我們在Google上搜尋了哪些關鍵字,點選了哪幾項搜尋結果,還有在博客來網路書店購買了哪些類型的書,或是在Facebook上發表了什麼心情狀態,對哪些人的狀態按讚等等,這些有形與無形之中被各種系統應用儲存的紀錄,<mark class="green">累積數千、數萬人的結果,就是巨量資料</mark>。</p>

<p>透過<mark class="yellow">資料探勘(Data Mining)</mark>的技術,可以分析與歸類巨量資料,挖掘大量瑣碎資料中隱含的意義,進一步根據使用者的習慣,提供與推薦使用者可能喜好的項目。巨量資料也被專家用來<mark class="green">預測選舉、電影票房,甚至是掌握天然災害</mark>。</p>

<p>雖然分析大量相關資料的結果可能比較不準確,但是它卻能讓我們快速<mark class="pink">知道趨勢走向</mark>,幫助我們針對問題<mark class="pink">作進一步的深入調查</mark>。</p>

arrow
arrow
    全站熱搜

    騏騏 (Elfachiy) 發表在 痞客邦 留言(1) 人氣()