HTML 常用頭部標簽（meta）

來看下常用的標簽列表，后文會一一介紹：

<!DOCTYPE html>

<head>

</head>

基本標簽

使用 HTML5 doctype，不區分大小寫。

<!DOCTYPE html>

聲明文檔使用的字符編碼

更加標準的 lang 屬性寫法 http://zhi.hu/XyIa

簡體中文
<html lang="zh-cmn-Hans">
繁體中文
<html lang="zh-cmn-Hant">

很少情況才需要加地區代碼，通常是為了強調不同地區漢語使用差異，例如：

<strong lang="zh-cmn-Hans-CN">菠蘿</strong>和<strong lang="zh-cmn-Hant-TW">鳳梨</strong>其實是同一種水果。只是大陸和臺灣稱謂不同，且新加坡、馬來西亞一帶的稱謂也是不同的，稱之為<strong lang="zh-cmn-Hans-SG">黃梨</strong>。

</p>

優先使用 IE 最新版本和 Chrome

SEO 優化

頁面描述

每個網頁都應有一個不超過 150 個字符且能準確反映網頁內容的描述標簽。文檔

頁面關鍵詞

定義頁面標題

定義網頁作者

定義網頁搜索引擎索引方式，robotterms是一組使用英文逗號「,」分割的值，通常有如下幾種取值：none，noindex，nofollow，all，index和follow。文檔

可選標簽

為移動設備添加 viewport

content 參數：

width viewport 寬度(數值/device-width)
height viewport 高度(數值/device-height)
initial-scale 初始縮放比例
maximum-scale 最大縮放比例
minimum-scale 最小縮放比例
user-scalable 是否允許用戶縮放(yes/no)
minimal-ui iOS 7.1 beta 2 中新增屬性（注意：iOS8 中已經刪除），可以在頁面加載時最小化上下狀態欄。這是一個布爾值，可以直接這樣寫：<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">

iOS 設備

添加到主屏后的標題（iOS 6 新增）

是否啟用 WebApp 全屏模式

設置狀態欄的背景顏色

content 參數：

default 默認值。
black 狀態欄背景是黑色。
black-translucent 狀態欄背景是黑色半透明。

如果設置為 default 或 black ,網頁內容從狀態欄底部開始。

如果設置為 black-translucent ,網頁內容充滿整個屏幕，頂部會被狀態欄遮擋。

禁止數字識自動別為電話號碼

iOS 圖標

rel 參數：

apple-touch-icon 圖片自動處理成圓角和高光等效果。

apple-touch-icon-precomposed 禁止系統自動添加效果，直接顯示設計原圖。

iPhone 和 iTouch，默認 57x57 像素，必須有

iPad，72x72 像素，可以沒有，但推薦有

Retina iPhone 和 Retina iTouch，114x114 像素，可以沒有，但推薦有

Retina iPad，144x144 像素，可以沒有，但推薦有

iOS 啟動畫面

官方文檔：https://developer.apple.com/library/ios/qa/qa1686/_index.html

參考文章：http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/

iPad 的啟動畫面是不包括狀態欄區域的。

iPad 豎屏 768 x 1004（標準分辨率）

iPad 豎屏 1536x2008（Retina）

iPad 橫屏 1024x748（標準分辨率）

iPad 橫屏 2048x1496（Retina）

iPhone 和 iPod touch 的啟動畫面是包含狀態欄區域的。

iPhone/iPod Touch 豎屏 320x480 (標準分辨率)

iPhone/iPod Touch 豎屏 640x960 (Retina)

iPhone 5/iPod Touch 5 豎屏 640x1136 (Retina)

添加智能 App 廣告條 Smart App Banner（iOS 6+ Safari）文檔

Android

Android Lollipop 中的 Chrome 39 增加 theme-color meta 標簽，用來控制選項卡顏色。

http://updates.html5rocks.com/2014/11/Support-for-theme-color-in-Chrome-39-for-Android

Windows 8

Windows 8 磁貼顏色

Windows 8 磁貼圖標

其他

添加 RSS 訂閱

添加 favicon icon

禁止 Chrome 瀏覽器中自動提示翻譯

高雙手??！！

作為一個在線設計平臺，稿定設計實名自薦！

另外，稿叔也從俺家設計師們手上要來了超多高逼格素材網站，希望能幫到你們！

話不多說，先上個匯總圖：

一、PNG素材類

1、FreePNGs——海量免費PNG素材資源

FreePNGs有超過17w張免費的 PNG 透明圖片可供下載，所有的圖像的都是可免費下載使用的。

圖片分類豐富多樣，在這里你可以輕松找到你喜歡的人物、植物、建筑、交通工具等PNG圖片資源，是一個值得你收藏的 PNG 海量圖庫網站。

P.S.可供個人自由使用，但是商業用途可能需要注意

2、Pngtree——免費PNG圖片資源平臺

Pngtree提供數百萬個PNG圖形資源可供所有人免費下載，專業設計師都在用的圖片資源平臺！

它擁有豐富的免版稅 PNG 圖像、矢量圖、背景圖、模板、文本效果等圖形資源，只要注冊就可以獲得每天 2 次免費下載的機會。

3、pngimg——海量 PNG 免摳圖素材庫

PngImg 是一個非營利性的 PNG 透明背景圖片素材庫，該網站提供了海量的高質量 PNG 圖片，專門為設計師搜索和分享優質的無背景圖和剪貼畫，用戶無需注冊即可免費下載使用！

4、Cleanpng——數百萬張PNG透明圖片素材資源庫

傳送門：https://www.cleanpng.com/

Cleanpng里擁有超過三百萬張 PNG 透明圖片素材，且每張PNG 圖片質量都很高，如果你正在尋找最大最全的PNG 圖片資源，Cleanpng絕對不容錯過！

這里的所有PNG 圖都可以免費下載，下載數量不受限制，并且不需要注冊登錄就能直接下載！

二、圖片靈感素材類

5、Gratisography——高質量攝影圖片集散地

Gratisography是一個提供免費高品質攝影圖片的集散地，優勢在于所有的圖片都可以用于個人用途或商業用途！

每周都會更新免費高清圖片資源，在這里有很多時尚流行的照片，只需點擊即可快速下載為你所用~

6、Unsplash——無版權高清圖片資源庫

Unsplash也是一款非常值得推薦和受歡迎的高清圖片庫，同樣擁有免費、無版權的圖片資源，全都是由全世界的攝影師提供的精美照片供設計師下載、獲取靈感。

它的優勢在于圖片分類廣，幾十種分類可以滿足各種圖片需求。

7、FOCA Stock——國外小眾免費素材圖庫

FOCAStock是一個由熱愛攝影的小伙伴創建的免費圖庫網，照片風格十分貼近我們的生活。

這里不止提供海量照片素材，還有視頻模板可供你下載，網站的照片分類十分齊全，包含了特色的照片自然、城市、日落、食物、風景、城市場景，工作空間等分類，找到符合我們需求的圖片，不用注冊帳號就能直接下載！

8、稿定設計——在線設計神器&在線素材庫

對于沒有設計基礎或不會PS的菜鳥同學來說，稿定設計簡直太好用了！

涵蓋了新媒體配圖、電商、生活娛樂、辦公商務等上百種場景，20W+原創版權素材模板，

光是海報就有手機海報、動態海報、長圖海報、電商橫版海報、廣告banner、全屏海報、張貼海報、營銷海報......超多不同類型的模板可供你挑選！

簡單拖拉拽，替換圖文內容就能在線生成精美圖片，可以解決你生活工作所有作圖需求！

除此之外，稿定設計還是專門的設計素材庫，點擊左側工具欄的“設計素材”，就能進入稿定素材站：

海量圖區：優質圖片全球合作，版權來源清晰可溯，全類型覆蓋您的作圖需要。

平面模板：品質模板源文件每日更新，圖層井然有序提高作圖效率從此不加班。

品質視頻：持續更新的視頻素材，緊隨熱點，助力視頻營銷，提升轉化效率。

高端免摳：高端原創免摳素材，源文件下載更靈活；本土化獨家設計，為設計賦能。

150W+正版圖片素材、8000W+圖片資源、200正版字體，就在稿定素材！

三、配色采集類

9、WebGradients——漸變色在線工具

在WebGradients你可以輕松調出漂亮的漸變色~

它提供180 個線性漸變的搭配方式，可以將其用作網站任何部分的內容背景。

亮點在于，它可輕松復制 CSS3 代碼，直接使用在作品中！并且免費提供給商業或個人使用，說一句設計師的色彩百寶箱也不為過！

10、Culrs——設計師必備優質調色板

Culrs是一個專業的設計師在線調色板，免費提供豐富的設計配色方案。有了它你不用再費腦筋尋找合適的顏色組合，輕松得到專業的設計用色！

同時Culrs還提供超人性化配色分類，可以說是設計師配色必備收藏調色板！

11、ColorLeap——復古配色方案在線工具

ColorLeap有個別名叫色彩時光機，它可以查詢每個年代輝煌的的流行配色

最早從公元前 2000 年開始一直到現代，都有相關的作品色彩記錄

可以幫助設計師獲取靈感，讓設計師盡情感受色彩的靈魂

四、icon圖標類

12、Iconfinder——免費圖標網站

Iconfinder是一款超實用的免費圖標網站，為用戶提供海量免費圖標+矢量素材，在這里可以輕松找到各種設計配色的圖案。

對于設計師而言是一款非常值得收藏的免費資源網站！

13、IconBlender——免費網頁 SVG 圖標素材庫

如果你在為找到的圖標素材過大而煩惱，可以試試IconBlender！這里提供了 80000 多個免費開源的圖標資源可供你下載使用，也可以直接復制到網頁代碼使用。

使用過程可以選擇圖標大小和粗細，圖標顏色，以及圖標類型，簡直太友好了！

14、iconfont——阿里巴巴矢量圖標庫

阿里巴巴旗下國內功能最為強大且圖標內容很豐富的矢量圖標庫之一，為用戶提供矢量圖標下載、在線存儲、格式轉換等功能。

支持AI/SVG/PNG/代碼格式下載，并且支持按路徑在線編輯icon顏色，設計師人手必備的圖標網站！

五、插圖插畫類

15、Skribbl——創意手繪插圖插畫站

手繪插圖是設計師管用的設計方式之一，如果你喜歡手繪插圖，或是想要分享自己的有意思的手繪作品，那么Skribbl就是一個不錯的選擇！

這里提供了來自全球優秀設計師分享的免費手繪插圖，都是一些簡單的手繪插畫，但帶來的視覺沖擊力一點也不弱，想要獲取到免費的插圖資源，可以訂閱，之后就能發送到你的郵箱！

16、50 Watts——插圖插畫視覺藝術站

50 Watts收集了來至世界各地怪異和讓人驚訝的視覺圖形，你看到的每一個素材，都能讓你記憶猶新。

這些創新是十足的設計手法，可以激發你的創作靈感。

17、Soazi Good——日本風格插圖插畫素材站

與其他插畫素材站不同，Soazi Good是一個非常精致可愛的插圖素材網站，小小的配飾非常有創意！

提供了背景類、各種主題的小插圖，甚至是動態圖，可以下載的格式有很多，比如 JPG、PNG、AI，部份圖文件也有提供 EPS 或 PSD 格式下載~

先匯總這么多，感興趣的小伙伴可以關注一波，之后還會再來更新！

信息爆炸的互聯網時代，網絡爬蟲如同一把神奇的鑰匙，幫助我們打開海量網頁內容的大門。然而，在實際操作過程中，不規范的網頁格式、紛繁復雜的干擾元素，特別是那些占據屏幕空間、影響閱讀體驗的廣告，往往成為獲取高質量數據的一大阻礙。因此，一款專為網絡爬蟲設計的HTML廣告移除神器顯得尤為重要。這款工具利用強大的HtmlAgilityPack庫，能夠迅速而精準地識別并剔除帶有class='ad'屬性的廣告標簽，讓抓取到的頁面內容回歸其最純粹的本質。

代碼執行效果如圖：

調用代碼：

// 假設這是從某個網頁上抓取的包含廣告的“混亂”HTML文本

string clutteredHtml = @"<html><head><title>網頁標題</title></head><body><div class='header'><h1>網站標題</h1></div><div class='nav'><ul><li><a href='#'>首頁</a></li><li><a href='#'>關于我們</a></li><li><a href='#'>聯系我們</a></li></ul></div><div class='content'><p>正文內容1...</p><p>正文內容2...</p><p>正文內容3...</p></div><div class='ad'>廣告1...</div><div class='ad'>廣告2...</div><div class='ad'>廣告3...</div><div class='footer'><p>© 2023 版權所有</p></div></body></html>";

// 使用廣告移除功能對抓取的“臟亂差”HTML進行深度清理

string polishedHtml = ScrubAndRemoveAds(clutteredHtml);

// 廣告移除及HTML內容凈化的具體實現方法

public static string ScrubAndRemoveAds(string messyHtmlContent)

{

// 創建一個可以解析和理解HTML結構的對象，并載入抓取的HTML文本

var htmlParser = new HtmlDocument();

htmlParser.LoadHtml(messyHtmlContent);

// 掃描整個HTML文檔，找到所有標記為廣告（class屬性值為"ad"）的部分并刪除

foreach (var adElement in htmlParser.DocumentNode.SelectNodes("//div[@class='ad']"))

{

adElement.Remove(); // 刪除廣告區域

}

// 返回已經清除廣告后的清爽HTML文本

return htmlParser.DocumentNode.OuterHtml;

}

這個代碼有效地解決了網絡爬蟲在抓取數據時遇到的廣告難題。無論對于追求極致閱讀體驗的個人用戶，還是力求優化數據質量、節省資源成本的企業級用戶，這個小工具都展現出了卓越的價值。無需繁瑣的操作流程，一鍵即可輕松擺脫廣告干擾，讓你獲得高質量、純凈的網頁內容。無論是單獨處理單個網頁，還是批量清洗大量的抓取數據，此工具都能得心應手，為您提供高效便捷的網絡數據整理解決方案。朋友們，喜歡就拿去吧，別忘記關注我：代碼領域的詩人XY，我是一個樂于分享的人。樂于將自己的知識和經驗分享給朋友們，幫助你們解決問題，啟發你們的思考。我相信，只有通過分享和交流，我們才能不斷進步，才能不斷創新。

在線咨詢

上一篇：Dom-to-image截圖將html生成圖片
下一篇：中醫院網站搭建

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML 常用頭部標簽（meta）

一、PNG素材類

二、圖片靈感素材類

三、配色采集類

四、icon圖標類

五、插圖插畫類

您的項目需求

二、圖片靈感素材類

三、配色采集類

四、icon圖標類

五、插圖插畫類