HTML網頁頭部程式碼實例詳細說明
- 高洛峰原創
- 2017-03-09 16:15:033221瀏覽
HTML中我們一般都稱部分為網頁的頭部。頭部部分的內容雖然不會在頁面中顯示，但它能影響到搜尋引擎對網頁的收錄和排序，以及網頁的各種全局設置，可以說是至關重要
##知識點一：頭部資訊裡設定網頁的基底網址
基底網址的實質是統一設定超級連結的屬性，基底網址標籤是6f6cb83b34cb7f2d6a4aed109317b73a，它有兩個屬性， href和_target。 href用於設定基底網址的路徑，_target用於設定超級連結的開啟方式。 透過基底網址的添加，頁面中所有的相對網站根目錄位址可轉換成絕對位址。當瀏覽器瀏覽頁面時，透過dde6fb694e6711ae5e6f381704c04ae4標記將相對網站跟目錄位址附加在基底網址路徑的後面，從而轉換成絕對位址。我們先建立一個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",即轉換為絕對位址。並且，頁面中的超級連結開啟方式都是開啟新視窗。
知識點二：頭部資訊的元資訊標籤
元資訊標籤是頭部資訊的基本標籤，專業網頁程式碼中都對元資訊有詳細設定.元資訊標籤為03d0e15baf5b7c9d224e5281b47a68fe，為單一標籤。 Meta元素提供的資訊對於瀏覽使用者是不可見的，一般用於定義頁面資訊的名稱，關鍵字，作者等。在HTML頁面中，一個meta標籤內就是一個meta內容，而在一個HTML頭頁中可以有多個meta元素。 meta標籤屬性分為兩種：頁面描述屬性（name）和http標題資訊（http-equiv）。name屬性
name屬性主要用於描述網頁的內容，用於對搜尋引擎的最佳化，必須專注於掌握。正確設定name屬性，以便搜尋引擎（例如google，baidu）的搜尋機器人查找，分類，搜尋引擎一般都會自動查找meta值來給網頁分類。 name的取值如下：f35d6e602fd7d0f0edfa6f7d103c1b57keywords。即關鍵字，用於說明網頁所包含的關鍵字等信息，從而提高被搜尋引擎搜尋到的機率。編寫格式為a43ece1fec877b2d38de661e8dd5ad33，content屬性的值為使用者設定的具體關鍵字。 （一般可設定多個關鍵字，他們之間用英文半角的逗號分開，搜尋引擎都限制關鍵字的數量，所以關鍵字內容要簡潔精練）2cc198a1d5eb0d3eb508d858c9f5cbdbdescription。中文意思是"描述"，用來描述網頁的主要內容、主題等，合理設定也可以提高被搜尋引擎搜尋到的機率。格式為92638c261b898e68b29f3b116b1d0d20，content屬性值為使用者所設定的頁面具體描述的內容，最多容納1024個字符，但搜尋引擎一邊只顯示約前175個字元。 5bdf4c78156c7953567bb5a0aef2fc53author。作者，用來設定網站作者的名稱，比較專業的網站常用到。格式為faac502551a479a3f2375429a43fef4e#23889872c2e8594e0f446a471a78ec4cgenerator。生成器，用於設定網站編輯工具的名稱，比較專業的網站頁面上常用到。格式5124e0eb0c02777d4dd5b56fad15db9d43ad812d3a971134e40facaca816c822robots。機器人，用於限制頁面搜尋方式。搜尋引擎的搜尋機器人，沿著網頁上的連結（如http和src連結），不斷檢索資料建立自己的資料庫。透過這種meta標籤可以限制部分內容不被搜尋引擎偵測到，降低部分資訊公開性。寫格式為6da19edd81fecc7533a22eebd2214408。此屬性的值包含4個指令，分別是index、noindex、follow、nofollow，根據排列組合，有4種組合。 Index和follow組合也可稱為all，noindex和nofollow也可稱為none。http-equiv屬性
http-equiv屬性的值如下：f35d6e602fd7d0f0edfa6f7d103c1b57content-type，內容類別，用於設定頁面的類別和語言字元集。寫格式456f2eb6b7470c9992d346477344dc6b，content屬性的值代表頁面採用HTML程式碼輸出，字元集為gb2312（簡體中文） ，國際化網站開發的話，為了字符統一，建議charset採用utf-8.2cc198a1d5eb0d3eb508d858c9f5cbdbrefresh。刷新，用於設定多長時間內網頁自己刷新一次，或用一段時間自動跳到其他頁面，第一種編寫格式cd9f60bc39aeaafb9a85075bb660e204表示隔30秒刷新一次，第二種寫格式269e2412e3ca0f42c6a8b03b8a29849b，表示30秒後頁面自動跳到www.google. com網站5bdf4c78156c7953567bb5a0aef2fc53expires，中文意思为“到期”，用于设置页面到期时间。一旦网页过期，必须到服务器上重新调用网页。第一种编写格式为67eda0067fee50e170a651aa33e1d252，content值代表网页过期的时间，必须使用GMT时间格式。第二种编写格式为773dc1f8cd63bc6f1079cf90f36c788e，表示多少秒后过期。
23889872c2e8594e0f446a471a78ec4ccache-control，缓存控制。用于禁止在缓存中调用网页，编写格式为6556fc60f75d8651a43a242f406d2590，no-cache代表不允许缓存。
43ad812d3a971134e40facaca816c822set-cookie，设置cookie，用于设置本页面cookie多久过期，编写格式为2d3649584c0d2a047839fd197370b05c，代表到这个时间，cookie将被删除。
知识点三：头部信息实现与CSS及JavaScript混编
CSS负责HTML网页的样式，JaveScript负责HTML网页的动态行为。CSS和JaveScript最常用的融合方式是写入头部信息部分。
f35d6e602fd7d0f0edfa6f7d103c1b57加入CSS只需在头部信息中加入5d116c75ef5ab3f65ecf7feff639cac6531ac245ce3e4fe3d50054a55f265927标签对。范例代码如下
代码如下:
<html> <head> <title>CSS的设置</title> <style type=“text/css”> CSS具体内容 </style> </head> <body> </body> </html>
2cc198a1d5eb0d3eb508d858c9f5cbdb加入JavaScript只需要在头部信息中加入9a116d82a87b65437c19d45bbc7d3a3e2cacc6d41bbb37262a98f745aa00fbf0标签对。范例代码如下：
代码如下:
<html> <head> <title>CSS的设置</title> <style type=“text/css”> CSS具体内容 </style> <script type=“text/javascript”> JavaScript具体内容 </script> </head> <body> </body> </html>
知识点四：常用头部信息功能推荐
f35d6e602fd7d0f0edfa6f7d103c1b57页面切换特效，其中一种特效的编写格式如下：
代码如下:
<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。
2cc198a1d5eb0d3eb508d858c9f5cbdb强制页面在当前窗口以独立页面显示，可以防止网页被其他网站框架，编写格式如下：
代码如下:
<meta http-equiv="window-target" content=“_top">
5bdf4c78156c7953567bb5a0aef2fc53页面图标设置，编写格式如下：
代码如下:
<link rel="Shortcut Icon" href="/myicon.ico">
href属性的值是ico图标文件的路径，这里采用的是相对根目录路径
以上是HTML網頁頭部程式碼實例詳細說明的詳細內容。更多資訊請關注PHP中文網其他相關文章！