HTML網(wǎng)頁頭部代碼實例詳解
來源:易賢網(wǎng) 閱讀:2365 次 日期:2016-06-16 14:40:19
溫馨提示:易賢網(wǎng)小編為您整理了“HTML網(wǎng)頁頭部代碼實例詳解”,方便廣大網(wǎng)友查閱!

知識點一:頭部信息里設(shè)置網(wǎng)頁的基底網(wǎng)址

基底網(wǎng)址的實質(zhì)是統(tǒng)一設(shè)置超級鏈接的屬性,基底網(wǎng)址標(biāo)簽是</base>,它有兩個屬性,href和_target。href用于設(shè)置基底網(wǎng)址的路徑,_target用于設(shè)置超級鏈接的打開方式。

通過基底網(wǎng)址的添加,頁面中所有的相對網(wǎng)站根目錄地址可轉(zhuǎn)換成絕對地址。當(dāng)瀏覽器瀏覽頁面時,通過<base>標(biāo)記將相對網(wǎng)站跟目錄地址附加在基底網(wǎng)址路徑的后面,從而轉(zhuǎn)化成絕對地址。我們首先創(chuàng)建一個base.htm,編寫HTML代碼如下:

代碼如下:

<html>

<head>

<title>基底網(wǎng)址的設(shè)置</title>

<base href="<a _target="_blank" />

</head>

<body>

</body>

</html>

通過以上代碼對基底網(wǎng)址的設(shè)置。Base.htm頁面中的任何超級鏈接的地址,都將在其前面加上"http://www.jb51.net",即轉(zhuǎn)換為絕對地址。并且,頁面中的超級鏈接打開方式都是打開新窗口。

知識點二:頭部信息的元信息標(biāo)簽

元信息標(biāo)簽是頭部信息的基本標(biāo)簽,專業(yè)網(wǎng)頁代碼中都對元信息有詳細(xì)設(shè)置。元信息標(biāo)簽為</meta>,為單標(biāo)簽。Meta元素提供的信息對于瀏覽用戶是不可見的,一般用于定義頁面信息的名稱,關(guān)鍵字,作者等。在HTML頁面中,一個meta標(biāo)簽內(nèi)就是一個meta內(nèi)容,而在一個HTML頭頁面中可以有多個meta元素。

meta標(biāo)簽屬性分兩種:頁面描述屬性(name)和http標(biāo)題信息(http-equiv)。

name屬性

name屬性主要用于描述網(wǎng)頁的內(nèi)容,用于對搜索引擎的優(yōu)化,必須重點掌握。正確地設(shè)置name屬性,以便搜索引擎(比如google,baidu)的搜索機器人查找,分類,搜索引擎一般都會自動查找meta值來給網(wǎng)頁分類。name的取值如下:

<1>keywords。即關(guān)鍵字,用于說明網(wǎng)頁所包含的關(guān)鍵字等信息,從而提高被搜索引擎搜索到的概率。編寫格式為<meta name="keywords" content =“關(guān)鍵字”/>,content屬性的值為用戶所設(shè)置的具體關(guān)鍵字。(一般可設(shè)置多個關(guān)鍵字,他們之間用英文半角的逗號分開,搜索引擎都限制關(guān)鍵字的數(shù)量,所以關(guān)鍵字內(nèi)容要簡潔精練)

<2>description。中文意思為"描述",用于描述網(wǎng)頁的主要內(nèi)容、主題等,合理設(shè)置也可以提高被搜索引擎搜索到的概率。格式為<meta name="description" content =“對頁面的描述”/>,content屬性值為用戶所設(shè)置的頁面具體描述的內(nèi)容,最多容納1024個字符,但搜索引擎一邊只顯示約前175個字符。

<3>author。作者,用于設(shè)置網(wǎng)站作者的名稱,比較專業(yè)的網(wǎng)站經(jīng)常用到。格式為<meta name="author" content =“作者名稱”/>

<4>generator。生成器,用于設(shè)置網(wǎng)站編輯工具的名稱,比較專業(yè)的網(wǎng)站頁面上經(jīng)常用到。格式<meta name="generator" content =“網(wǎng)站編輯工具名稱”/>

<5>robots。機器人,用于限制頁面搜索方式。搜索引擎的搜索機器人,沿著網(wǎng)頁上的鏈接(如http和src鏈接),不斷地檢索資料建立自己的數(shù)據(jù)庫。通過這種meta標(biāo)簽可以限制部分內(nèi)容不被搜索引擎檢測到,降低部分信息公開性。編寫格式為<meta name=“robots” content="指令組合">。該屬性的值包含4個命令,分別是index、noindex、follow、nofollow,根據(jù)排列組合,有4種組合。Index和follow組合也可稱為all,noindex和nofollow也可稱為none。

http-equiv屬性

http-equiv屬性的取值具體如下:

<1>content-type,內(nèi)容類別,用于設(shè)置頁面的類別和語言字符集。編寫格式<meta http-equiv=“content-type” context=“text/html”;charset=“gb2312”/>,content屬性的值代表頁面采用HTML代碼輸出,字符集為gb2312(簡體中文),國際化網(wǎng)站開發(fā)的話,為了字符統(tǒng)一,建議charset采用utf-8.

<2>refresh。刷新,用于設(shè)置多長時間內(nèi)網(wǎng)頁自己刷新一次,或者用一段時間自動跳轉(zhuǎn)到其他頁面,第一種編寫格式<meta http-equiv=“refresh” context=“30”/>表示隔30秒刷新一次,第二種編寫格式<meta http-equiv=“refresh” context=“30;url=www.google.com”/>,表示30秒后頁面自動跳轉(zhuǎn)到www.google.com網(wǎng)站

<3>expires,中文意思為“到期”,用于設(shè)置頁面到期時間。一旦網(wǎng)頁過期,必須到服務(wù)器上重新調(diào)用網(wǎng)頁。第一種編寫格式為<meta http-equiv=“expires” context=“Wed,10 Mar 2011 12:00:00 GMT”/>,content值代表網(wǎng)頁過期的時間,必須使用GMT時間格式。第二種編寫格式為<meta http-equiv=“expires” context=“30”/>,表示多少秒后過期。

<4>cache-control,緩存控制。用于禁止在緩存中調(diào)用網(wǎng)頁,編寫格式為<meta http-equiv=“cache-control” context=“no-cache”/>,no-cache代表不允許緩存。

<5>set-cookie,設(shè)置cookie,用于設(shè)置本頁面cookie多久過期,編寫格式為<meta http-equiv=“set-cookie” context=“Wed,10 Mar 2011 12:00:00 GMT”/>,代表到這個時間,cookie將被刪除。

知識點三:頭部信息實現(xiàn)與CSS及JavaScript混編

CSS負(fù)責(zé)HTML網(wǎng)頁的樣式,JaveScript負(fù)責(zé)HTML網(wǎng)頁的動態(tài)行為。CSS和JaveScript最常用的融合方式是寫入頭部信息部分。

<1>加入CSS只需在頭部信息中加入<style type=“text/css”></style>標(biāo)簽對。范例代碼如下

代碼如下:

<html>

<head>

<title>CSS的設(shè)置</title>

<style type=“text/css”>

CSS具體內(nèi)容

</style>

</head>

<body>

</body>

</html>

<2>加入JavaScript只需要在頭部信息中加入<script type=“text/javascript”></script>標(biāo)簽對。范例代碼如下:

代碼如下:

<html>

<head>

<title>CSS的設(shè)置</title>

<style type=“text/css”>

CSS具體內(nèi)容

</style>

<script type=“text/javascript”>

JavaScript具體內(nèi)容

</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屬性的值代表特效的種類,這種特效也叫動態(tài)濾鏡。濾鏡種類很多,比如blendtrans就是很常見得一種,效果為淡入淡出,duration值表示效果持續(xù)的時間(單位為秒)。

另一種濾鏡特效編寫格式如下:

代碼如下:

<meta http-equiv=“page-enter” content=“revealTrans(duration=6)”/>

動態(tài)濾鏡revealTrans也可用于頁面進入與退出效果。Duration表示濾鏡特效持續(xù)時間(單位為秒),Transition是濾鏡類型,表示想使用哪種特效,取值為0~23。

<2>強制頁面在當(dāng)前窗口以獨立頁面顯示,可以防止網(wǎng)頁被其他網(wǎng)站框架,編寫格式如下:

代碼如下:

<meta http-equiv="window-target" content=“_top">

<3>頁面圖標(biāo)設(shè)置,編寫格式如下:

代碼如下:

<link rel="Shortcut Icon" href="/myicon.ico">

href屬性的值是ico圖標(biāo)文件的路徑,這里采用的是相對根目錄路徑

更多信息請查看網(wǎng)頁制作
易賢網(wǎng)手機網(wǎng)站地址:HTML網(wǎng)頁頭部代碼實例詳解
由于各方面情況的不斷調(diào)整與變化,易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考,敬請考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇?zhǔn)!

2025國考·省考課程試聽報名

  • 報班類型
  • 姓名
  • 手機號
  • 驗證碼
關(guān)于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 加入群交流 | 手機站點 | 投訴建議
工業(yè)和信息化部備案號:滇ICP備2023014141號-1 云南省教育廳備案號:云教ICP備0901021 滇公網(wǎng)安備53010202001879號 人力資源服務(wù)許可證:(云)人服證字(2023)第0102001523號
云南網(wǎng)警備案專用圖標(biāo)
聯(lián)系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關(guān)注公眾號:hfpxwx
咨詢QQ:526150442(9:00—18:00)版權(quán)所有:易賢網(wǎng)
云南網(wǎng)警報警專用圖標(biāo)