網(wǎng)站HTML文檔結(jié)構(gòu)
2021-09-24 分類： 網(wǎng)站建設(shè)
結(jié)構(gòu)良好的HTML(或者XHTML)文檔可能包含如下元素:
HTML文檔結(jié)構(gòu)(<head>、<body>、<div>、<span>)。
文字內(nèi)容。
傳達含義和內(nèi)容結(jié)構(gòu)的語義標注(標題、段落文字、列表和引用)。
讓內(nèi)容以一種特定的方式來顯示的可視化展示(CSS)。
與視昕內(nèi)容相連的鏈接(gifjpeg或png圖形，QuickTime或者其他媒介文件)。
交互行為(JavaScript、ajax元素，或者其他編輯技法)。
1.文檔結(jié)構(gòu)
在結(jié)構(gòu)嚴格的HTML中，所有的Web頁面代碼都要放在以下這兩個基礎(chǔ)元素之中:
Head(<head>...</head>)
Body(<body...</body>)
在過去，頁面代碼結(jié)構(gòu)的這些基本要求是良好結(jié)構(gòu)的基礎(chǔ):完全正確但是功能可選，且對于用戶是可見的。在今天的更為復(fù)雜和更具挑戰(zhàn)性的萬維網(wǎng)中，復(fù)雜的頁面代碼、很多不同的顯示可能、復(fù)雜的樣式表以及交互腳本已經(jīng)非常常見，因此正確地構(gòu)建分割元素十分重要。
<head>區(qū)域是Web頁向顯示設(shè)備(Web瀏覽器、手機、iPodTouch)聲明代碼標準和文檔類型的區(qū)域，它也是所有重要的頁面標題放置的地方。頁面標題區(qū)域也可以包含那些與網(wǎng)站很多頁共享的外部樣式表和JavaScript代碼相連的鏈接。
<body>區(qū)域包含所有頁面內(nèi)容，也是重要的對可視樣式、編程和語義內(nèi)容標注的CSS控制。通常，位于頁面body內(nèi)的區(qū)域使用分區(qū)(<div>)或范圍(<span>)標簽來進行功能分割。例如，絕大多數(shù)Web頁都有頁眉、頁腳、內(nèi)容和導(dǎo)航區(qū)域，它們?nèi)渴褂每梢员粚ぶ泛褪褂胏ss進行可視樣式化處理的已命名的<div>標簽來指定。
HTML文檔類型聲明了HTML文檔采用的是哪個版本和標準，文檔類型對于估算HTML標注和CSS的品質(zhì)和技術(shù)有效性至關(guān)重要。Web開發(fā)技術(shù)團隊應(yīng)該告訴你將在頁面編碼中使用什么版本的HTML(例如，HTML4和XHTMLI)，以及會在網(wǎng)站中使用哪種文檔類型聲明。HTML是Web頁面標注的通用基本標準。XhTML與HTML非常相似，但是XHTML是XML的子集，并且有更為嚴格的要求。盡管HTML是使用最廣的Web標注標準，將XHTML用做頁面標注有以下更為強大的優(yōu)勢:
與XML技術(shù)、XML內(nèi)容以及諸如ajax之類的混合JavaScript/XML技術(shù)兼容。
與非HTMLWeb標注標準兼容，諸如用于科學(xué)文檔Mathml、用于交互視聽內(nèi)容的同步化多媒體整合語言(SynchronizedMultimediaIntegrationLanguage，SMIL)以及可伸縮矢量圖形(ScalableVectorGraphics，SVG)。
與更新的XML內(nèi)容技術(shù)、內(nèi)容管理體系和其他正在發(fā)展之中的Web技術(shù)的未來兼容性，這些Web技術(shù)可以從XHTML標注標準更好的一致性和更大的結(jié)構(gòu)中獲益。
2.內(nèi)容標注
語義標注是常見HTML使用的一種優(yōu)質(zhì)界標:如果你編寫了一個標題，可以使用標題標簽(<h1>，<h2>)來標注；如果你編寫的是基本的段落文字，可以將該文字放在段落標簽之中(<>...</p>)；如果你希望強調(diào)某個重要短語，可以使用加粗強調(diào)(<strong...</strong>)來標注它:如果你引用了另一個作者的內(nèi)容可以使用<blockquote>標簽來標識該文本是引用的。永遠不要根據(jù)Web瀏覽器中的顯示方式來選擇HTML標簽。你可以在稍后使用CSS來調(diào)整內(nèi)容的可視化效果以制作理想的標題、引用、強調(diào)文字以及其他排版效果的外觀。
因為個別可能需要某些視覺效果的原因，例如，用斜體顯示某個科學(xué)名稱，如Homosapiens(智人)，HTML中還保留了少許諸如<b>(粗體)和<i>(斜體)的專用可視HTML標簽。如果你使用類似<b>或<i>的語義含義的標簽，不妨思考一下適當(dāng)?shù)臉邮綇娬{(diào)(<em>)或者加粗強調(diào)(strong>)能否表示出更多的含義。HTML也包含不為瀏覽者所見的語義元素，但是它對于網(wǎng)站開發(fā)團隊的幕后工作非常有用。諸如lassID、division.span和met標簽等元素都可以讓團隊成員更方便地理解、使用、可視化樣式和從程序上控制頁面元素。很多樣式表和編程技術(shù)都要求對頁面元素進行細致的語義命名，以便讓內(nèi)容的訪問性和靈話性更為通用。
3.層疊樣式表
層疊樣式表(CsS)允許Web發(fā)布者在給予圖形設(shè)計師對每個HTML元素可視化顯，示細節(jié)完全控制權(quán)的同時，保留使用語義htML傳遞邏輯文檔結(jié)構(gòu)和含義的巨大優(yōu)勢。CSS的作用就像是諸如MicrosoftWord之類的文檔處理程序中的樣式表。換而言之，就是你可以使用分級的標題和其他樣式來構(gòu)造文檔，接著只通過更改樣式便可全局更改所有的樣式。css的工作方式相同，尤其是當(dāng)你使用網(wǎng)站所有頁面共享的外部樣式表時。例如，如果所有頁面都鏈接了同--主CSS文件，那么你只需更改主樣式表中的<h1>樣式即可更改所有<h1>標題的字體、字號和顏色。
4.視昕內(nèi)容
Web頁面文件不直接包含圖形和視聽素材，但是使用圖像和其他指示鏈接在瀏覽器中將圖形和媒介合并到最終的Web頁面組合中。它們包含的這些鏈接以及替代文字(“alt”文本)或者長描述性(longdesc)鏈接對于通用可用性和搜索引擎可視性而言非常重要。Web用戶不只會搜索文字。搜索引擎會使用帶關(guān)鍵字的標簽圖像所對應(yīng)的替代文字描述，存在視障的用戶會基于替代文字來描述圖像內(nèi)容。適當(dāng)?shù)恼Z義標往能確保你的視聽媒介為瀏覽者中的每個人以及搜索引擎大范圍地使用。
5.交互腳本
JavaScript是通常用來創(chuàng)建交互行為的語言。JavaScript也是諸如ajax之類原Web頁面內(nèi)容交付策略中的關(guān)鍵技術(shù)。所有的JavaScript代碼都應(yīng)歸于Web頁面的“頭部”(head)區(qū)域，但是如果你的代碼很復(fù)雜并且非常長，“真實的”頁面內(nèi)容就被擠到了幾十行代碼的下方，無法被搜索引擎找到。如果你使用頁面級別的JavaScript腳本(也被稱為客戶端腳本)，則應(yīng)該將所有的代碼以最短的字節(jié)數(shù)放在某個鏈接文件中。應(yīng)用此種方式，當(dāng)使用長而復(fù)雜的JavaScript時就不會錯失搜索頁面排名。
6.其他文檔格式
除了HTML外，Web還支持很多文檔格式。PDF、Flash和Shockwave是經(jīng)常用來提供基礎(chǔ)HTML無法提供的功能的格式。PDF文件深受那些使用文字處理和頁面市同程序制作的文檔的喜愛，它能保持源文檔的外見，F(xiàn)lash和Shockwave提供了使用標準HTML無法提供的交互性。通常，最好的方式是以無格式的HTML形式提供文檔，這是因為標注可以提供更大的靈活性，井且被設(shè)計為支持通用可用性，然而有時，在必質(zhì)果用其他格式提供的附加特色和功能之時，要確保能m到軟件的可訪問性功能，adobe花了大力氣通過支持語義標注、文本等價和關(guān)鍵宇川訪問性，專門將可訪問性功能合并到它的Web格式之中。
注意瀏覽器的不同
用于表格、表單、定位和排列的HTML及CSS有時在針對不同品牌和版本的Web瀏覽器時，其使用會稍有區(qū)別。這些細微的不同通常不會被注意到，但是在更為精準和復(fù)雜的Web頁面布局中，也有可能會造成意想不到的結(jié)果。不要過于相信HTML、CSS、JavaScript、Java或任何插件的效果，除非你使用每個主流Web瀏覽器并且跨平臺查看過你的Web頁面的顯示。
查看Web日志，或者使用諸如Googleanalytics之類的服務(wù)，來了解在讀者群中最普遍使用的是什么瀏覽器品牌、瀏覽器版本以及操作系統(tǒng)(Mac、Windows和移動)。并非每個瀏覽器都支持CSS的所有的功能，尤其是如果那個功能很少使用或者近期才添加到CSS代碼的官方標準中。例如，盡管帶陰影的文字是有效的CSS選項，但是所有的瀏覽器都不支持它。
關(guān)于語義標注的小結(jié)
HTML文檔結(jié)構(gòu)(<head>、<body>、<div>、<span>)。
文字內(nèi)容。
傳達含義和內(nèi)容結(jié)構(gòu)的語義標注(標題、段落文字、列表和引用)。
讓內(nèi)容以一種特定的方式來顯示的可視化展示(CSS)。
與視昕內(nèi)容相連的鏈接(gifjpeg或png圖形，QuickTime或者其他媒介文件)。
交互行為(JavaScript、ajax元素，或者其他編輯技法)。
1.文檔結(jié)構(gòu)
在結(jié)構(gòu)嚴格的HTML中，所有的Web頁面代碼都要放在以下這兩個基礎(chǔ)元素之中:
Head(<head>...</head>)
Body(<body...</body>)
在過去，頁面代碼結(jié)構(gòu)的這些基本要求是良好結(jié)構(gòu)的基礎(chǔ):完全正確但是功能可選，且對于用戶是可見的。在今天的更為復(fù)雜和更具挑戰(zhàn)性的萬維網(wǎng)中，復(fù)雜的頁面代碼、很多不同的顯示可能、復(fù)雜的樣式表以及交互腳本已經(jīng)非常常見，因此正確地構(gòu)建分割元素十分重要。
<head>區(qū)域是Web頁向顯示設(shè)備(Web瀏覽器、手機、iPodTouch)聲明代碼標準和文檔類型的區(qū)域，它也是所有重要的頁面標題放置的地方。頁面標題區(qū)域也可以包含那些與網(wǎng)站很多頁共享的外部樣式表和JavaScript代碼相連的鏈接。
<body>區(qū)域包含所有頁面內(nèi)容，也是重要的對可視樣式、編程和語義內(nèi)容標注的CSS控制。通常，位于頁面body內(nèi)的區(qū)域使用分區(qū)(<div>)或范圍(<span>)標簽來進行功能分割。例如，絕大多數(shù)Web頁都有頁眉、頁腳、內(nèi)容和導(dǎo)航區(qū)域，它們?nèi)渴褂每梢员粚ぶ泛褪褂胏ss進行可視樣式化處理的已命名的<div>標簽來指定。
HTML文檔類型聲明了HTML文檔采用的是哪個版本和標準，文檔類型對于估算HTML標注和CSS的品質(zhì)和技術(shù)有效性至關(guān)重要。Web開發(fā)技術(shù)團隊應(yīng)該告訴你將在頁面編碼中使用什么版本的HTML(例如，HTML4和XHTMLI)，以及會在網(wǎng)站中使用哪種文檔類型聲明。HTML是Web頁面標注的通用基本標準。XhTML與HTML非常相似，但是XHTML是XML的子集，并且有更為嚴格的要求。盡管HTML是使用最廣的Web標注標準，將XHTML用做頁面標注有以下更為強大的優(yōu)勢:
與XML技術(shù)、XML內(nèi)容以及諸如ajax之類的混合JavaScript/XML技術(shù)兼容。
與非HTMLWeb標注標準兼容，諸如用于科學(xué)文檔Mathml、用于交互視聽內(nèi)容的同步化多媒體整合語言(SynchronizedMultimediaIntegrationLanguage，SMIL)以及可伸縮矢量圖形(ScalableVectorGraphics，SVG)。
與更新的XML內(nèi)容技術(shù)、內(nèi)容管理體系和其他正在發(fā)展之中的Web技術(shù)的未來兼容性，這些Web技術(shù)可以從XHTML標注標準更好的一致性和更大的結(jié)構(gòu)中獲益。
2.內(nèi)容標注
語義標注是常見HTML使用的一種優(yōu)質(zhì)界標:如果你編寫了一個標題，可以使用標題標簽(<h1>，<h2>)來標注；如果你編寫的是基本的段落文字，可以將該文字放在段落標簽之中(<>...</p>)；如果你希望強調(diào)某個重要短語，可以使用加粗強調(diào)(<strong...</strong>)來標注它:如果你引用了另一個作者的內(nèi)容可以使用<blockquote>標簽來標識該文本是引用的。永遠不要根據(jù)Web瀏覽器中的顯示方式來選擇HTML標簽。你可以在稍后使用CSS來調(diào)整內(nèi)容的可視化效果以制作理想的標題、引用、強調(diào)文字以及其他排版效果的外觀。
因為個別可能需要某些視覺效果的原因，例如，用斜體顯示某個科學(xué)名稱，如Homosapiens(智人)，HTML中還保留了少許諸如<b>(粗體)和<i>(斜體)的專用可視HTML標簽。如果你使用類似<b>或<i>的語義含義的標簽，不妨思考一下適當(dāng)?shù)臉邮綇娬{(diào)(<em>)或者加粗強調(diào)(strong>)能否表示出更多的含義。HTML也包含不為瀏覽者所見的語義元素，但是它對于網(wǎng)站開發(fā)團隊的幕后工作非常有用。諸如lassID、division.span和met標簽等元素都可以讓團隊成員更方便地理解、使用、可視化樣式和從程序上控制頁面元素。很多樣式表和編程技術(shù)都要求對頁面元素進行細致的語義命名，以便讓內(nèi)容的訪問性和靈話性更為通用。
3.層疊樣式表
層疊樣式表(CsS)允許Web發(fā)布者在給予圖形設(shè)計師對每個HTML元素可視化顯，示細節(jié)完全控制權(quán)的同時，保留使用語義htML傳遞邏輯文檔結(jié)構(gòu)和含義的巨大優(yōu)勢。CSS的作用就像是諸如MicrosoftWord之類的文檔處理程序中的樣式表。換而言之，就是你可以使用分級的標題和其他樣式來構(gòu)造文檔，接著只通過更改樣式便可全局更改所有的樣式。css的工作方式相同，尤其是當(dāng)你使用網(wǎng)站所有頁面共享的外部樣式表時。例如，如果所有頁面都鏈接了同--主CSS文件，那么你只需更改主樣式表中的<h1>樣式即可更改所有<h1>標題的字體、字號和顏色。
4.視昕內(nèi)容
Web頁面文件不直接包含圖形和視聽素材，但是使用圖像和其他指示鏈接在瀏覽器中將圖形和媒介合并到最終的Web頁面組合中。它們包含的這些鏈接以及替代文字(“alt”文本)或者長描述性(longdesc)鏈接對于通用可用性和搜索引擎可視性而言非常重要。Web用戶不只會搜索文字。搜索引擎會使用帶關(guān)鍵字的標簽圖像所對應(yīng)的替代文字描述，存在視障的用戶會基于替代文字來描述圖像內(nèi)容。適當(dāng)?shù)恼Z義標往能確保你的視聽媒介為瀏覽者中的每個人以及搜索引擎大范圍地使用。
5.交互腳本
JavaScript是通常用來創(chuàng)建交互行為的語言。JavaScript也是諸如ajax之類原Web頁面內(nèi)容交付策略中的關(guān)鍵技術(shù)。所有的JavaScript代碼都應(yīng)歸于Web頁面的“頭部”(head)區(qū)域，但是如果你的代碼很復(fù)雜并且非常長，“真實的”頁面內(nèi)容就被擠到了幾十行代碼的下方，無法被搜索引擎找到。如果你使用頁面級別的JavaScript腳本(也被稱為客戶端腳本)，則應(yīng)該將所有的代碼以最短的字節(jié)數(shù)放在某個鏈接文件中。應(yīng)用此種方式，當(dāng)使用長而復(fù)雜的JavaScript時就不會錯失搜索頁面排名。
6.其他文檔格式
除了HTML外，Web還支持很多文檔格式。PDF、Flash和Shockwave是經(jīng)常用來提供基礎(chǔ)HTML無法提供的功能的格式。PDF文件深受那些使用文字處理和頁面市同程序制作的文檔的喜愛，它能保持源文檔的外見，F(xiàn)lash和Shockwave提供了使用標準HTML無法提供的交互性。通常，最好的方式是以無格式的HTML形式提供文檔，這是因為標注可以提供更大的靈活性，井且被設(shè)計為支持通用可用性，然而有時，在必質(zhì)果用其他格式提供的附加特色和功能之時，要確保能m到軟件的可訪問性功能，adobe花了大力氣通過支持語義標注、文本等價和關(guān)鍵宇川訪問性，專門將可訪問性功能合并到它的Web格式之中。
注意瀏覽器的不同
用于表格、表單、定位和排列的HTML及CSS有時在針對不同品牌和版本的Web瀏覽器時，其使用會稍有區(qū)別。這些細微的不同通常不會被注意到，但是在更為精準和復(fù)雜的Web頁面布局中，也有可能會造成意想不到的結(jié)果。不要過于相信HTML、CSS、JavaScript、Java或任何插件的效果，除非你使用每個主流Web瀏覽器并且跨平臺查看過你的Web頁面的顯示。
查看Web日志，或者使用諸如Googleanalytics之類的服務(wù)，來了解在讀者群中最普遍使用的是什么瀏覽器品牌、瀏覽器版本以及操作系統(tǒng)(Mac、Windows和移動)。并非每個瀏覽器都支持CSS的所有的功能，尤其是如果那個功能很少使用或者近期才添加到CSS代碼的官方標準中。例如，盡管帶陰影的文字是有效的CSS選項，但是所有的瀏覽器都不支持它。
關(guān)于語義標注的小結(jié)
基于語義標注技術(shù)和標準的網(wǎng)站制作HTML文檔類型仔細設(shè)置標注和編輯標準，井且在整個開發(fā)過程中堅持使用這些標準。當(dāng)今的Web環(huán)境遠不止桌面計算機上的InternetExplorer或者Firefox-成百上千的移動計算機設(shè)備在為人們使用，每天都有很多查看和使用Web內(nèi)容的全新方式出現(xiàn)。基本上，遵循語言Web標注的慣例做法和審慎使用已經(jīng)驗證的頁面代碼和樣式表的做法，是確保Web內(nèi)容最好策略，它們能確保你的Web內(nèi)容在未來使用性最廣、可見性更強。
本文名稱：網(wǎng)站HTML文檔結(jié)構(gòu)
網(wǎng)頁URL：http://www.rwnh.cn/news2/128202.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護、建站公司、網(wǎng)站排名、微信小程序、服務(wù)器托管、虛擬主機
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容
- 怎么讓你的網(wǎng)站瀏覽量更高有更多的流量 2021-09-24
- 企業(yè)網(wǎng)站優(yōu)化關(guān)鍵詞排名一般多久能優(yōu)化到百度首頁 2021-09-24
- 網(wǎng)站標題的設(shè)計技巧 2021-09-24
- 新聞動態(tài)搜索引擎競價排名 2021-09-24
- 制作企業(yè)網(wǎng)站一定要掌握的小技巧 2021-09-24
- 企業(yè)網(wǎng)站有排名沒有流量的原因 2021-09-24
- 新站長更要靜下心來建設(shè)自己的網(wǎng)站 2021-09-24
- 淺析如何更好地推廣你的網(wǎng)站 2021-09-24
- 優(yōu)秀的網(wǎng)站應(yīng)該具備些什么 2021-09-24
- 為什么網(wǎng)站優(yōu)化一定要做SEO優(yōu)化關(guān)鍵詞 2021-09-24
- 不同的網(wǎng)站，不同的策略 2021-09-24
- 【網(wǎng)站優(yōu)化】如何利用百度的搜索結(jié)果頁來做排名? 2021-09-24
- 如何達到收錄暴漲 2021-09-24
- 建站之前需要做什么 2021-09-24
- 深圳網(wǎng)站建設(shè)過程有哪些準則需要考慮呢 2021-09-24
- 網(wǎng)站優(yōu)化：分析競爭對手網(wǎng)站的10個SEO策略 2021-09-24
- 購買前的準備工作 2021-09-24
- 如何獲取高質(zhì)量的外鏈 2021-09-24
- 網(wǎng)站內(nèi)容怎樣保持延續(xù)性？ 2021-09-24