HTML網頁頭部程式碼實例詳細說明

高洛峰
發布: 2017-03-09 16:15:03
原創
3263 人瀏覽過

HTML中我們一般都稱部分為網頁的頭部。頭部部分的內容雖然不會在頁面中顯示,但它能影響到搜尋引擎對網頁的收錄和排序,以及網頁的各種全局設置,可以說是至關重要

##知識點一:頭部資訊裡設定網頁的基底網址

基底網址的實質是統一設定超級連結的屬性,基底網址標籤是,它有兩個屬性, href和_target。 href用於設定基底網址的路徑,_target用於設定超級連結的開啟方式。

透過基底網址的添加,頁面中所有的相對網站根目錄位址可轉換成絕對位址。當瀏覽器瀏覽頁面時,透過標記將相對網站跟目錄位址附加在基底網址路徑的後面,從而轉換成絕對位址。我們先建立一個base.htm,寫HTML程式碼如下:

程式碼如下:

<html> 
<head> 
<title>基底网址的设置</title> 
<base href="<a href="http://www.php.cn">http://www.php.cn/;/a>" _target="_blank" /> 
</head> 
<body> 
</body> 
</html>
登入後複製

透過上述程式碼對基底網址的設定。 Base.htm頁面中的任何超級連結的位址,都會在其前面加上"http://www.jb51.net",即轉換為絕對位址。並且,頁面中的超級連結開啟方式都是開啟新視窗。

知識點二:頭部資訊的元資訊標籤

元資訊標籤是頭部資訊的基本標籤,專業網頁程式碼中都對元資訊有詳細設定.元資訊標籤為,為單一標籤。 Meta元素提供的資訊對於瀏覽使用者是不可見的,一般用於定義頁面資訊的名稱,關鍵字,作者等。在HTML頁面中,一個meta標籤內就是一個meta內容,而在一個HTML頭頁中可以有多個meta元素。

meta標籤屬性分為兩種:頁面描述屬性(name)和http標題資訊(http-equiv)。

name屬性

name屬性主要用於描述網頁的內容,用於對搜尋引擎的最佳化,必須專注於掌握。正確設定name屬性,以便搜尋引擎(例如google,baidu)的搜尋機器人查找,分類,搜尋引擎一般都會自動查找meta值來給網頁分類。 name的取值如下:

<1>keywords。即關鍵字,用於說明網頁所包含的關鍵字等信息,從而提高被搜尋引擎搜尋到的機率。編寫格式為,content屬性的值為使用者設定的具體關鍵字。 (一般可設定多個關鍵字,他們之間用英文半角的逗號分開,搜尋引擎都限制關鍵字的數量,所以關鍵字內容要簡潔精練)

<2>description。中文意思是"描述",用來描述網頁的主要內容、主題等,合理設定也可以提高被搜尋引擎搜尋到的機率。格式為,content屬性值為使用者所設定的頁面具體描述的內容,最多容納1024個字符,但搜尋引擎一邊只顯示約前175個字元。

<3>author。作者,用來設定網站作者的名稱,比較專業的網站常用到。格式為

#<4>generator。生成器,用於設定網站編輯工具的名稱,比較專業的網站頁面上常用到。格式

<5>robots。機器人,用於限制頁面搜尋方式。搜尋引擎的搜尋機器人,沿著網頁上的連結(如http和src連結),不斷檢索資料建立自己的資料庫。透過這種meta標籤可以限制部分內容不被搜尋引擎偵測到,降低部分資訊公開性。寫格式為。此屬性的值包含4個指令,分別是index、noindex、follow、nofollow,根據排列組合,有4種組合。 Index和follow組合也可稱為all,noindex和nofollow也可稱為none。

http-equiv屬性

http-equiv屬性的值如下:

<1>content-type,內容類別,用於設定頁面的類別和語言字元集。寫格式,content屬性的值代表頁面採用HTML程式碼輸出,字元集為gb2312(簡體中文) ,國際化網站開發的話,為了字符統一,建議charset採用utf-8.

<2>refresh。刷新,用於設定多長時間內網頁自己刷新一次,或用一段時間自動跳到其他頁面,第一種編寫格式表示隔30秒刷新一次,第二種寫格式,表示30秒後頁面自動跳到www.google. com網站

<3>expires,中文意思为“到期”,用于设置页面到期时间。一旦网页过期,必须到服务器上重新调用网页。第一种编写格式为,content值代表网页过期的时间,必须使用GMT时间格式。第二种编写格式为,表示多少秒后过期。

<4>cache-control,缓存控制。用于禁止在缓存中调用网页,编写格式为,no-cache代表不允许缓存。

<5>set-cookie,设置cookie,用于设置本页面cookie多久过期,编写格式为,代表到这个时间,cookie将被删除。


知识点三:头部信息实现与CSS及JavaScript混编

CSS负责HTML网页的样式,JaveScript负责HTML网页的动态行为。CSS和JaveScript最常用的融合方式是写入头部信息部分。
<1>加入CSS只需在头部信息中加入标签对。范例代码如下

代码如下:

<html> 
<head> 
<title>CSS的设置</title> 
<style type=“text/css”> 
CSS具体内容 
</style> 
</head> 
<body> 
</body> 
</html>
登入後複製

<2>加入JavaScript只需要在头部信息中加入标签对。范例代码如下:

代码如下:

<html> 
<head> 
<title>CSS的设置</title> 
<style type=“text/css”> 
CSS具体内容 
</style> 
<script type=“text/javascript”> 
JavaScript具体内容 
</script> 
</head> 
<body> 
</body> 
</html>
登入後複製

知识点四:常用头部信息功能推荐

<1>页面切换特效,其中一种特效的编写格式如下:

代码如下:

<meta http-equiv=“page-enter” content=“blendtrans(duration=0.5)”/>
登入後複製

http-equiv属性的值为page-enter时表进入该页面时启用特效,http-equiv属性的值为page-exit时代表退出(离开)该页面时启用特效。

Content属性的值代表特效的种类,这种特效也叫动态滤镜。滤镜种类很多,比如blendtrans就是很常见得一种,效果为淡入淡出,duration值表示效果持续的时间(单位为秒)。

另一种滤镜特效编写格式如下:

代码如下:

<meta http-equiv=“page-enter” content=“revealTrans(duration=6)”/>
登入後複製

动态滤镜revealTrans也可用于页面进入与退出效果。Duration表示滤镜特效持续时间(单位为秒),Transition是滤镜类型,表示想使用哪种特效,取值为0~23。

<2>强制页面在当前窗口以独立页面显示,可以防止网页被其他网站框架,编写格式如下:

代码如下:

<meta http-equiv="window-target" content=“_top">
登入後複製

<3>页面图标设置,编写格式如下:

代码如下:

<link rel="Shortcut Icon" href="/myicon.ico">
登入後複製

href属性的值是ico图标文件的路径,这里采用的是相对根目录路径

以上是HTML網頁頭部程式碼實例詳細說明的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!