隨便打開一個網頁,右擊查看網頁源代碼,總能看到<head>…</head>封閉標簽,在里面通常會包含5類標簽:title、link、script、meta、style。這5類標簽看着都挺熟悉的哈,那么在web前端技術中具體要怎么使用,規則是什么,在我學習的時侯,我做了筆記整理,希望有幫助。
1. title 標簽
title是一個封閉標簽,在head中是成對出現。也就是<title>…</title>。在打開一個網頁時,網頁上方的文字就是title部分。
Title是對整個頁面的核心思想的總結,也是seo非常重要的設置部分。Title部分盡量要多次出現關鍵詞:核心關鍵詞和長尾關鍵詞。具體怎么寫title部分,根據需求而定。這個沒有標准。
2. link 標簽
Link標簽放置在<head>…</head>中,作用是鏈接外部css文件和收藏夾圖標。最常用的用法是鏈接外部樣式表,也就是css文件。link寫法是“<link … />”
例如:
引入外部css樣式:<link rel=”stylesheet” type=”text/css” href=”http://www....... /style.css” />
設置網站小圖標(收藏圖標):<link rel=”shortcut icon” type=”image/x-icon” href="http://....../favicon.ico" />
Rel:定義的是該文檔與被鏈接文檔之間是什么關系“這里是外部css樣式表,即stylesheet。”
type:規定外部鏈接文檔是什么打開類型,link中的css 這樣寫法“type=”text/css”。”link中的網站小圖標寫法“ type=”image/x-icon” 。”
href:是外部css地址。
3. script標簽
用在頭部head標簽內,作用是調用外部js文件。該標簽是一個封閉標簽,寫法和div標簽一樣。另外,該標簽不僅僅可以在頭部head標簽內使用,在body標簽內部任何位置都可以使用。最終實現的效果都是一樣的,通常是用在head標簽內。
例如:<script src=”http://www...../index.js” type=”text/javascript”></script>
Src中是調用js文件地址。Type規定調用js文件的打開方式。
4. meta標簽
Meta標簽的作用通常是用作網頁關鍵詞、網頁描述、作者、網頁編碼、robots、自動跳轉等說明性標簽。這樣寫法隨處可見,任何一個網頁中都有meta標簽的使用。
4.1 網頁顯示字符集網頁編碼
中文:<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
繁體中文:<meta http-equiv="Content-Type" content="text/html; charset=BIG5" />
英 語:<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
4.2 網頁制作者信息
<meta name="author" content="Evance" />
4.3網頁關鍵字
<meta name="keywords" content="Michael,Blog" />
4.4 網頁描述
<meta name="description" content="Michael,Blog" />
4.5 防止別人在框架里調用你的頁面<meta http-equiv="Window-target" content="_top" />
4.6 自動跳轉(此標簽用法可以讓網頁在多少秒后自動從當前頁面跳轉到另外一個網頁頁面或網站)<meta http-equiv="Refresh" content="5;URL=http://www.域名.com" />(有用!)
Content后跟值為當前頁面在多少時間跳轉
Url值為跳轉到具體網頁網站
4.7. 網頁告訴搜索機器人向導對此網頁操作(用來告訴搜索機器人哪些頁面需要索引,哪些頁面不需要索引)<meta name="robots" content="all" />
content的參數有all,none,index,noindex,follow,nofollow。默認是all。如果在一個頁面不加入此標簽默認情況下content="all"意思是搜索並收錄抓取爬行此網頁及此網頁指向頁面。
None:搜索引擎將忽略此網頁,等價於noindex,nofollow。
Noindex:搜索引擎不索引此網頁。
Nofollow:搜索引擎不繼續通過此網頁的鏈接索引搜索其它的網頁。
All:搜索引擎將索引此網頁與繼續通過此網頁的鏈接索引,等價於index,follow。
Index:搜索引擎索引此網頁。
Follow:搜索引擎繼續通過此網頁的鏈接索引搜索其它的網頁。
5. style標簽
常見Style標簽作為放置CSS樣式與放置javascript(js)代碼標簽。
首先<style></style>是一對有開始與結束的閉合標簽。
5.1 放置CSS樣式
<style type="text/css">…</style>中間用於放CSS樣式代碼。
在HTML中CSS代碼只有放置在其<style type="text/css">標簽內才能生效。
5.2 放置JS代碼
<style type="text/javascript">…</style>
在HTML中JS代碼一般放入<style type="text/javascript">標簽內。