HTML中我們一般都稱部分為網頁的頭部。頭部部分的內容雖然不會在頁面中顯示,但它能影響到搜尋引擎對網頁的收錄和排序,以及網頁的各種全局設置,可以說是至關重要
##知識點一:頭部資訊裡設定網頁的基底網址
基底網址的實質是統一設定超級連結的屬性,基底網址標籤是,它有兩個屬性, href和_target。 href用於設定基底網址的路徑,_target用於設定超級連結的開啟方式。 透過基底網址的添加,頁面中所有的相對網站根目錄位址可轉換成絕對位址。當瀏覽器瀏覽頁面時,透過<html> <head> <title>基底网址的设置</title> <base href="<a href="http://www.php.cn">http://www.php.cn/;/a>" _target="_blank" /> </head> <body> </body> </html>
知識點二:頭部資訊的元資訊標籤
元資訊標籤是頭部資訊的基本標籤,專業網頁程式碼中都對元資訊有詳細設定.元資訊標籤為,為單一標籤。 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中文網其他相關文章!