<code id="tblfl"><source id="tblfl"></source></code>

<samp id="tblfl"></samp>

\n

Page Title<\/h1>\n \n<\/body>\n<\/html><\/pre>\n
如果您將上面的代碼粘貼到一個(gè).html文件中，您將擁有一個(gè)網(wǎng)頁！這個(gè)基本的HTML5模板包含下一節(jié)中列出的一些元素，以及一個(gè)將在您的網(wǎng)絡(luò)瀏覽器中顯示的簡(jiǎn)單標(biāo)題元素。 <\/p>\n
讓我們更詳細(xì)地了解一下它的結(jié)構(gòu)。 <\/p>\n
HTML5模板的結(jié)構(gòu)<\/strong><\/p>\n
HTML模板通常包含以下部分：<\/p>
\n
文檔類型聲明（或doctype）<\/li>\n
`<\/code>元素<\/li>\n`
`字符編碼<\/li>\n`
`視口元元素<\/li>\n`
<\/code>、描述和作者<\/li>\n<li>用於社交卡片的Open Graph元元素<\/li>\n<li>Favicon和touch圖標(biāo)<\/li>\n<li>CSS樣式錶鍊接<\/li>\n<li>JavaScript文件鏈接<\/li>\n<\/ol>\n<p>除了文檔類型聲明和<code><html><\/code>元素外，上面列出的元素大多位於HTML模板的<code><head><\/code>部分中。 <\/p>\n<p><strong>HTML5文檔類型聲明<\/strong><\/p>\n<p>您的HTML5模板需要以文檔類型聲明或<em>doctype<\/em>開頭。 doctype只是告訴瀏覽器或任何其他解析器它正在查看什麼類型的文檔的一種方式。對(duì)於HTML文件，這意味著HTML的特定版本和類型。 doctype應(yīng)該始終是任何HTML文件頂部的第一項(xiàng)。許多年前，doctype聲明是一個(gè)難看且難以記住的混亂，通常指定為“XHTML Strict”或“HTML Transitional”。 <\/p>\n<p>隨著HTML5的出現(xiàn)，那些難以理解的令人討厭的東西消失了，現(xiàn)在您只需要這個(gè)：<\/p>\n<pre class='brush:php;toolbar:false;'><!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n <title>HTML5 Boilerplate<\/title>\n <link rel=\"stylesheet\" href=\"styles.css\">\n<\/head>\n<body> <h1><a href="http://ipnx.cn/">亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱</a></h1>\n <h1>Page Title<\/h1>\n <??>\n<\/body>\n<\/html><\/pre>\n<p>簡(jiǎn)單明了。 “5”從聲明中明顯消失了。儘管當(dāng)前版本的Web標(biāo)記被稱為“HTML5”，但它實(shí)際上只是先前HTML標(biāo)準(zhǔn)的演變——未來的規(guī)範(fàn)將只是我們今天所擁有的發(fā)展。永遠(yuǎn)不會(huì)有“HTML6”，因此通常將當(dāng)前狀態(tài)的Web標(biāo)記簡(jiǎn)單地稱為“HTML”。 <\/p>\n<p>因?yàn)闉g覽器需要支持Web上的舊內(nèi)容，所以不依賴doctype來告訴瀏覽器在給定文檔中應(yīng)支持哪些功能。換句話說，僅僅是doctype並不會(huì)使您的頁面符合現(xiàn)代HTML功能。實(shí)際上，無論使用哪種doctype，瀏覽器都將逐個(gè)案例確定功能支持。事實(shí)上，您可以將舊的doctype與頁面上的新HTML5元素一起使用，並且頁面的呈現(xiàn)方式與使用新doctype時(shí)相同。 <\/p>\n<p><strong><code><html><\/code>元素<\/strong><\/p>\n<p><code><html><\/code>元素是HTML文件中的頂級(jí)元素——這意味著它包含文檔中除doctype之外的所有內(nèi)容。 <code><html><\/code>元素分為兩部分——<code><head><\/code>和<code><body><\/code>部分。網(wǎng)頁文件中的所有其他內(nèi)容都將放置在<code><html><\/code>元素中或<code><html><\/code>元素內(nèi)部。下面的代碼顯示了<code><html><\/code>元素，它位於doctype聲明之後，並包含<code><head><\/code>和<code><body><\/code>元素：<\/p>\n<pre class='brush:php;toolbar:false;'><!DOCTYPE html><\/pre>\n<p><strong>如何在HTML中使用標(biāo)籤<\/strong><\/p>\n<p><code><head><\/code>部分包含有關(guān)文檔的重要信息，這些信息不會(huì)顯示給最終用戶——例如字符編碼以及CSS文件的鏈接，可能還有JavaScript文件。這些信息由瀏覽器、搜索引擎和屏幕閱讀器等機(jī)器使用：<\/p>\n<pre class='brush:php;toolbar:false;'><html lang=\"en\">\n <head>\n <\/head>\n <body>\n <\/body>\n<\/html><\/pre>\n<p>上面<code><head><\/code>…<code><\/head><\/code>標(biāo)籤之間包含的所有元素都很重要，但最終用戶看不到——除了<code><title><\/code>文本，它將出現(xiàn)在在線搜索和瀏覽器標(biāo)籤中。 <\/p><p><strong>如何在HTML中使用標(biāo)籤<\/strong><\/p>\n<p><code><body><\/code>部分包含在瀏覽器中顯示的所有內(nèi)容——例如文本、圖像等等。如果您想向最終用戶展示某些內(nèi)容，請(qǐng)確保將其放在打開和關(guān)閉<code><body><\/code>…<code><\/body><\/code>標(biāo)籤之間：<\/p>\n<pre class='brush:php;toolbar:false;'><!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n <title>HTML5 Boilerplate<\/title>\n <link rel=\"stylesheet\" href=\"styles.css\">\n<\/head>\n<body>\n <h1>Page Title<\/h1>\n <??>\n<\/body>\n<\/html><\/pre>\n<p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/173897581228837.jpg\" alt=\"HTML5 Template: A Base Starter HTML Boilerplate for Any Project \" \/><\/p>\n<p><strong><code>lang<\/code>屬性是什麼？ <\/strong><\/p>\n<p><code><html><\/code>元素理想情況下應(yīng)包含<code>lang<\/code>屬性，如上面的代碼所示（<code><html lang=\"en\"><\/code>）。其主要目的是告訴屏幕閱讀器等輔助技術(shù)在朗讀時(shí)如何發(fā)音。（此屬性對(duì)於頁面驗(yàn)證不是必需的，但如果您不包含它，大多數(shù)驗(yàn)證器會(huì)發(fā)出警告。）<\/p>\n<p>上面顯示的<code>lang<\/code>屬性的值為<code>en<\/code>，這指定文檔是用英語編寫的。所有其他口語都有值，例如法語的<code>fr<\/code>、德語的<code>de<\/code>、印地語的<code>hi<\/code>等等。（您可以在維基百科上找到語言代碼的完整列表。）<\/p>\n<p><strong>HTML文檔字符編碼<\/strong><\/p>\n<p>HTML文檔<code><head><\/code>部分的第一行是定義文檔字符編碼的行。我們?cè)诰W(wǎng)頁上閱讀的字母和符號(hào)被定義為一系列數(shù)字，有些字符（如字母）以多種方式編碼。因此，告訴您的計(jì)算機(jī)您的網(wǎng)頁應(yīng)該參考哪個(gè)編碼很有用。指示字符編碼是一個(gè)可選功能，不會(huì)在驗(yàn)證器中導(dǎo)致任何警告，但對(duì)於大多數(shù)HTML頁面來說，它是推薦的：<\/p>\n<pre class='brush:php;toolbar:false;'><!DOCTYPE html><\/pre>\n<p><em>注意：為了確保某些舊版瀏覽器正確讀取字符編碼，整個(gè)字符編碼聲明必須包含在文檔的前512個(gè)字符中的某處。它也應(yīng)該出現(xiàn)在任何基於內(nèi)容的元素（如我們示例中稍後出現(xiàn)的<code><title><\/code>元素）之前。 <\/em><\/p>\n<h3>為什麼在HTML5模板中使用UTF-8字符編碼？ <\/h3>\n<p>上面的字符編碼示例使用UTF-8字符集。在幾乎所有情況下，<code>utf-8<\/code>都是您應(yīng)該在文檔中使用的值。此編碼涵蓋了其他編碼中未包含的各種字符。您可能在Web上遇到過奇怪的字符——例如?——這顯然是一個(gè)錯(cuò)誤。這通常是因?yàn)闉g覽器無法在文檔中指定的字符集中找到預(yù)期的字符。 <\/p>\n<p>UTF-8涵蓋了各種字符，包括全球各種語言的許多字符，以及許多有用的符號(hào)。正如萬維網(wǎng)聯(lián)盟所解釋的那樣：<\/p>\n<blockquote>\n<p>基於Unicode的編碼（如UTF-8）可以支持多種語言，並且可以適應(yīng)任何語言混合的頁面和表單。它的使用還可以消除服務(wù)器端邏輯，從而單獨(dú)確定為每個(gè)服務(wù)頁面或每個(gè)傳入表單提交的字符編碼。這大大降低了處理多語言網(wǎng)站或應(yīng)用程序的複雜性。 <\/p><\/blockquote>\n<p>字符編碼的完整解釋超出了本文的範(fàn)圍，但如果您想更深入地研究，您可以閱讀HTML規(guī)範(fàn)中的字符編碼。 <\/p>\n<p><strong><code>X-UA-Compatible<\/code>是什麼意思？ <\/strong><\/p>\n<p>您有時(shí)會(huì)在HTML文檔的<code><head><\/code>中看到這一行：<\/p>\n<pre class='brush:php;toolbar:false;'><!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n <title>HTML5 Boilerplate<\/title>\n <link rel=\"stylesheet\" href=\"styles.css\">\n<\/head>\n<body>\n <h1>Page Title<\/h1>\n <??>\n<\/body>\n<\/html><\/pre>\n<p>此元標(biāo)記允許Web作者選擇應(yīng)呈現(xiàn)頁面的Internet Explorer版本?，F(xiàn)在Internet Explorer在很大程度上只是一個(gè)糟糕的回憶，您可以安全地將此行從代碼中刪除。（我們已將其從HTML5模板中刪除。）如果您確定您的網(wǎng)頁可能會(huì)在舊版本的IE中查看，那麼可能值得包含它。您可以在Microsoft網(wǎng)站上閱讀更多關(guān)於此元標(biāo)記的信息。 <\/p>\n<p><strong>視口元元素<\/strong><\/p>\n<p>視口元元素是您幾乎在每個(gè)HTML5模板中都會(huì)看到的特性。它對(duì)於響應(yīng)式Web設(shè)計(jì)和移動(dòng)優(yōu)先設(shè)計(jì)非常重要：<\/p>\n<pre class='brush:php;toolbar:false;'><!DOCTYPE html><\/pre>\n<p>此<code><meta><\/code>元素包含兩個(gè)作為名稱\/值集一起工作的屬性。在這種情況下，名稱設(shè)置為<code>viewport<\/code>，值為<code>width=device-width, initial-scale=1<\/code>。這僅供移動(dòng)設(shè)備使用。您會(huì)注意到該值有兩個(gè)部分：<\/p>\n<ul>\n<li><code>width=device-width<\/code>：您希望網(wǎng)站呈現(xiàn)的視口的像素寬度。 <\/li>\n<li><code>initial-scale<\/code>：這應(yīng)該是一個(gè)介於0.0和10.0之間的正數(shù)。 “1”的值表示設(shè)備寬度和視口大小之間存在1:1的比率。 <\/li>\n<\/ul>\n<p>您可以在MDN上閱讀更多關(guān)於這些元元素特性的信息，但現(xiàn)在只要知道，在大多數(shù)情況下，此元元素及其設(shè)置最適合移動(dòng)優(yōu)先的響應(yīng)式網(wǎng)站。 <\/p>\n<p><strong><code><title><\/code>、描述和作者<\/strong><\/p>\n<p>HTML基礎(chǔ)模板的下一部分包含以下三行：<\/p>\n<pre class='brush:php;toolbar:false;'><html lang=\"en\">\n <head>\n <\/head>\n <body>\n <\/body>\n<\/html><\/pre>\n<p><code><title><\/code>是在瀏覽器標(biāo)題欄中顯示的內(nèi)容（例如，當(dāng)您將鼠標(biāo)懸停在瀏覽器選項(xiàng)卡上時(shí)），它也顯示在搜索結(jié)果中。此元素是<code><head><\/code>部分中唯一必需的元素。描述和作者元元素是可選的，但它們確實(shí)為搜索引擎提供了重要信息。在搜索結(jié)果中，上面代碼示例中的標(biāo)題和描述將如下所示。 <\/p>\n<p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/173897581334276.jpg\" alt=\"HTML5 Template: A Base Starter HTML Boilerplate for Any Project \" \/><\/p>\n<p>您可以在<code><head><\/code>中放置任意數(shù)量的有效元元素。 <\/p>\n<p><strong>用於社交卡片的Open Graph元元素<\/strong><\/p>\n<p>如上所述，所有元元素都是可選的，但許多元元素對(duì)SEO和社交媒體營(yíng)銷都有好處。 HTML5模板的下一部分包含其中一些元元素選項(xiàng)：<\/p>\n<pre class='brush:php;toolbar:false;'><head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n <title>HTML5 Boilerplate<\/title>\n <link rel=\"stylesheet\" href=\"styles.css\">\n <??> \n<\/head><\/pre>\n<p>這些<code><meta><\/code>元素利用了所謂的Open Graph協(xié)議，還有許多其他您可以使用的元素。這些是您最常使用的元素。您可以在Open Graph網(wǎng)站上查看可用Open Graph元選項(xiàng)的完整列表。 <\/p><p>這裡包含的那些元素將在鏈接到社交媒體帖子時(shí)增強(qiáng)網(wǎng)頁的外觀。例如，這裡包含的五個(gè)<code><meta><\/code>元素將出現(xiàn)在嵌入以下數(shù)據(jù)的社交卡片中：<\/p>\n<ul>\n<li>內(nèi)容的標(biāo)題<\/li>\n<li>提供的內(nèi)容類型<\/li>\n<li>內(nèi)容的規(guī)範(fàn)URL<\/li>\n<li>內(nèi)容的描述<\/li>\n<li>與內(nèi)容關(guān)聯(lián)的圖像<\/li>\n<\/ul>\n<p>當(dāng)您看到在社交媒體上共享的帖子時(shí)，您通常會(huì)看到這些數(shù)據(jù)位會(huì)自動(dòng)添加到社交媒體帖子中。例如，如果您包含指向GitHub主頁的鏈接，則會(huì)在推文中顯示以下內(nèi)容。 <\/p>\n<p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/173897581532472.jpg\" alt=\"HTML5 Template: A Base Starter HTML Boilerplate for Any Project \" \/><\/p>\n<p><strong>Favicon和Touch圖標(biāo)<\/strong><\/p>\n<p>HTML5模板的下一部分包含<code><link><\/code>元素，這些元素指示要包含為favicon和Apple touch圖標(biāo)的資源：<\/p>\n<pre class='brush:php;toolbar:false;'><!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n <title>HTML5 Boilerplate<\/title>\n <link rel=\"stylesheet\" href=\"styles.css\">\n<\/head>\n<body>\n <h1>Page Title<\/h1>\n <??>\n<\/body>\n<\/html><\/pre>\n<p>當(dāng)有人查看您的網(wǎng)站時(shí)，favicon將出現(xiàn)在瀏覽器選項(xiàng)卡中。 <code>favicon.ico<\/code>文件用於舊版瀏覽器，不必包含在代碼中。只要您的<code>favicon.ico<\/code>文件包含在項(xiàng)目的根目錄中，瀏覽器就會(huì)自動(dòng)找到它。 <code>favicon.svg<\/code>文件用於支持SVG圖標(biāo)的現(xiàn)代瀏覽器。您也可以使用.png文件代替。 <\/p>\n<p>最後一個(gè)元素引用在將頁面添加到用戶的家庭屏幕時(shí)在Apple設(shè)備上使用的圖標(biāo)。 <\/p>\n<p>您可以在這裡包含其他選項(xiàng)，包括引用其他圖標(biāo)的Web應(yīng)用程序清單文件。有關(guān)完整的討論，我們建議您閱讀Andrey Sitnik關(guān)於此主題的文章。但是這裡包含的那些對(duì)於簡(jiǎn)單的HTML入門模板就足夠了。 <\/p>\n<p><strong>包含CSS樣式表和JavaScript文件<\/strong><\/p>\n<p>HTML入門模板的最後兩個(gè)重要部分是對(duì)一個(gè)或多個(gè)樣式表以及可能還有JavaScript文件的引用。當(dāng)然，兩者都是可選的，儘管很少有網(wǎng)站沒有至少一些CSS樣式。 <\/p>\n<h3>在HTML模板中包含CSS樣式表<\/h3>\n<p>樣式表可以包含在文檔中的任何位置，但您通常會(huì)在<code><head><\/code>部分看到它：<\/p>\n<pre class='brush:php;toolbar:false;'><!DOCTYPE html><\/pre>\n<p><code><link><\/code>元素將Web瀏覽器指向外部樣式表，以便它可以將這些CSS樣式應(yīng)用於頁面。 <code><link><\/code>元素需要<code>rel<\/code>屬性為<code>stylesheet<\/code>。過去，通常還會(huì)包含<code>type<\/code>屬性，但實(shí)際上它從未真正需要，因此如果您在Web上找到包含它的舊代碼，只需將其刪除即可。 <\/p>\n<p>請(qǐng)注意，我們?cè)贑SS鏈接的末尾添加了<code>?v=1.0<\/code>查詢字符串。這是完全可選的。當(dāng)您更新樣式表以更新此查詢字符串（例如，更新為1.1或2.0）時(shí)，這是一個(gè)方便的技巧，因?yàn)檫@樣做可以確保瀏覽器會(huì)丟棄任何舊的、緩存的CSS文件副本並加載新的版本。 <\/p><p>值得注意的是，您不必使用<code><link><\/code>元素來在網(wǎng)頁上包含CSS，因?yàn)槟梢愿臑閷⑺袠邮椒旁陧撁姹旧淼?code><style><\/code>…<code><\/style><\/code>標(biāo)籤內(nèi)，位於<code><head><\/code>部分。這在試驗(yàn)佈局時(shí)非常方便，但通常不建議在活動(dòng)站點(diǎn)上這樣做，因?yàn)檫@些樣式在其他頁面上將不可訪問，從而導(dǎo)致低效和\/或重複的代碼。 <\/p>\n<h3>在HTML模板中包含JavaScript文件<\/h3>\n<p>JavaScript代碼通常通過<code><\/pre>\n ?\n <p> \n<\/body><\/code><code><\/p><\/code>\n<pre class='brush:php;toolbar:false;'><!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n <title>HTML5 Boilerplate<\/title>\n <link rel=\"stylesheet\" href=\"styles.css\">\n<\/head>\n<body>\n <h1>Page Title<\/h1>\n <??>\n<\/body>\n<\/html><\/pre>將<p>標(biāo)籤內(nèi)來嵌入腳本：<strong>\n<\/strong>\n<\/p><p>關(guān)於舊版瀏覽器和新元素的說明<code><article><\/code><code><aside><\/code>\n<code><recipe><\/code>當(dāng)HTML5引入時(shí)，它包含許多新元素，例如<code><ziggy><\/code>和<\/aside>。您可能會(huì)認(rèn)為對(duì)未識(shí)別元素的支持對(duì)於舊版瀏覽器來說是一個(gè)主要問題——但事實(shí)並非如此！大多數(shù)瀏覽器實(shí)際上並不關(guān)心您使用什麼標(biāo)籤。如果您有一個(gè)HTML文檔，其中包含<\/article>元素（甚至<\/ziggy>元素），並且您的CSS將某些樣式附加到該元素，幾乎每個(gè)瀏覽器都會(huì)像這完全正常一樣進(jìn)行處理，而不會(huì)抱怨地應(yīng)用您的樣式。 <\/recipe><\/p><p><\/p><p>\n<\/p>當(dāng)然，這樣的假設(shè)文檔將無法驗(yàn)證，並且可能存在可訪問性問題，但它會(huì)在幾乎所有瀏覽器中正確呈現(xiàn)——例外情況是舊版本的Internet Explorer (IE)。在第9版之前，IE阻止未識(shí)別的元素接收樣式。渲染引擎將這些神秘元素視為“未知元素”，因此您無法更改它們的外觀或行為。這不僅包括我們想像的元素，還包括在開發(fā)這些瀏覽器版本時(shí)尚未定義的任何元素，包括新的HTML5元素。 <p>\n<em>幸運(yùn)的是，不支持新元素樣式的舊版瀏覽器如今幾乎不存在，因此您幾乎可以在任何項(xiàng)目中安全地使用任何新HTML元素而無需擔(dān)心。 <\/em>\n<\/p>也就是說，如果您<p>確實(shí)<strong>需要支持古老的瀏覽器，您仍然可以使用可靠的HTML5 Shiv，這是一個(gè)最初由John Resig開發(fā)的簡(jiǎn)單的JavaScript片段。它受到Sjoerd Visscher作品的啟發(fā)，它使新HTML5元素在舊版本的IE中可設(shè)置樣式。不過，實(shí)際上，今天不需要這樣做。正如caniuse.com所示，HTML5元素在所有正在使用的瀏覽器中都受支持。 <\/strong>\n<\/p><p>完整的HTML5模板<\/p><pre class='brush:php;toolbar:false;'><!DOCTYPE html><\/pre>\n<p>這是我們最終的HTML5模板——一個(gè)您可以用於任何項(xiàng)目的簡(jiǎn)單模板：<code><body><\/code>\n<code><\/body><\/code>\n<\/p>您可以將這個(gè)簡(jiǎn)單易用的HTML5模板代碼放到今天的任何項(xiàng)目中！在此基礎(chǔ)上，您可以在<p>和<strong>標(biāo)籤之間添加任何您想要的內(nèi)容。 <\/strong>\n<\/p> <meta http-equiv="Cache-Control" content="no-transform" /> <meta http-equiv="Cache-Control" content="no-siteapp" /> <script>var V_PATH="/";window.onerror=function(){ return true; };</script> </head> <body data-commit-time="2023-12-28T14:50:12+08:00" class="editor_body body2_2"> <link rel="stylesheet" type="text/css" href="/static/csshw/stylehw.css"> <header> <div id="wjcelcm34c" class="head"> <div id="wjcelcm34c" class="haed_left"> <div id="wjcelcm34c" class="haed_logo"> <a href="http://ipnx.cn/zh-tw/" title="" class="haed_logo_a"> <img src="/static/imghw/logo.png" alt="" class="haed_logoimg"> </a> </div> <div id="wjcelcm34c" class="head_nav"> <div id="wjcelcm34c" class="head_navs"> <a href="javascript:;" title="社群" class="head_nava head_nava-template1">社群</a> <div class="wjcelcm34c" id="dropdown-template1" style="display: none;"> <div id="wjcelcm34c" class="languagechoose"> <a href="http://ipnx.cn/zh-tw/article.html" title="文章" class="languagechoosea on">文章</a> <a href="http://ipnx.cn/zh-tw/faq/zt" title="合集" class="languagechoosea">合集</a> <a href="http://ipnx.cn/zh-tw/wenda.html" title="問答" class="languagechoosea">問答</a> </div> </div> </div> <div id="wjcelcm34c" class="head_navs"> <a href="javascript:;" title="學(xué)習(xí)" class="head_nava head_nava-template1_1">學(xué)習(xí)</a> <div class="wjcelcm34c" id="dropdown-template1_1" style="display: none;"> <div id="wjcelcm34c" class="languagechoose"> <a href="http://ipnx.cn/zh-tw/course.html" title="課程" class="languagechoosea on">課程</a> <a href="http://ipnx.cn/zh-tw/dic/" title="程式設(shè)計(jì)字典" class="languagechoosea">程式設(shè)計(jì)字典</a> </div> </div> </div> <div id="wjcelcm34c" class="head_navs"> <a href="javascript:;" title="工具庫(kù)" class="head_nava head_nava-template1_2">工具庫(kù)</a> <div class="wjcelcm34c" id="dropdown-template1_2" style="display: none;"> <div id="wjcelcm34c" class="languagechoose"> <a href="http://ipnx.cn/zh-tw/toolset/development-tools" title="開發(fā)工具" class="languagechoosea on">開發(fā)工具</a> <a href="http://ipnx.cn/zh-tw/toolset/website-source-code" title="網(wǎng)站源碼" class="languagechoosea">網(wǎng)站源碼</a> <a href="http://ipnx.cn/zh-tw/toolset/php-libraries" title="PHP 函式庫(kù)" class="languagechoosea">PHP 函式庫(kù)</a> <a href="http://ipnx.cn/zh-tw/toolset/js-special-effects" title="JS特效" class="languagechoosea on">JS特效</a> <a href="http://ipnx.cn/zh-tw/toolset/website-materials" title="網(wǎng)站素材" class="languagechoosea on">網(wǎng)站素材</a> <a href="http://ipnx.cn/zh-tw/toolset/extension-plug-ins" title="擴(kuò)充插件" class="languagechoosea on">擴(kuò)充插件</a> </div> </div> </div> <div id="wjcelcm34c" class="head_navs"> <a href="http://ipnx.cn/zh-tw/ai" title="AI工具" class="head_nava head_nava-template1_3">AI工具</a> </div> <div id="wjcelcm34c" class="head_navs"> <a href="javascript:;" title="休閒" class="head_nava head_nava-template1_3">休閒</a> <div class="wjcelcm34c" id="dropdown-template1_3" style="display: none;"> <div id="wjcelcm34c" class="languagechoose"> <a href="http://ipnx.cn/zh-tw/game" title="遊戲下載" class="languagechoosea on">遊戲下載</a> <a href="http://ipnx.cn/zh-tw/mobile-game-tutorial/" title="遊戲教程" class="languagechoosea">遊戲教程</a> </div> </div> </div> </div> </div> <div id="wjcelcm34c" class="head_search"> <input id="key_words" onkeydown="if (event.keyCode == 13) searchs('zh-tw')" class="search-input" type="text" autocomplete="off" name="keywords" required="required" placeholder="Block,address,transaction,news" value=""> <a href="javascript:;" title="搜尋" onclick="searchs('zh-tw')"><img src="/static/imghw/find.png" alt="搜尋"></a> </div> <div id="wjcelcm34c" class="head_right"> <div id="wjcelcm34c" class="haed_language"> <a href="javascript:;" class="layui-btn haed_language_btn">繁體中文<i class="layui-icon layui-icon-triangle-d"></i></a> <div class="wjcelcm34c" id="dropdown-template" style="display: none;"> <div id="wjcelcm34c" class="languagechoose"> <a href="javascript:setlang('zh-cn');" title="簡(jiǎn)體中文" class="languagechoosea">簡(jiǎn)體中文</a> <a href="javascript:setlang('en');" title="English" class="languagechoosea">English</a> <a href="javascript:;" title="繁體中文" class="languagechoosea">繁體中文</a> <a href="javascript:setlang('ja');" title="日本語" class="languagechoosea">日本語</a> <a href="javascript:setlang('ko');" title="???" class="languagechoosea">???</a> <a href="javascript:setlang('ms');" title="Melayu" class="languagechoosea">Melayu</a> <a href="javascript:setlang('fr');" title="Fran?ais" class="languagechoosea">Fran?ais</a> <a href="javascript:setlang('de');" title="Deutsch" class="languagechoosea">Deutsch</a> </div> </div> </div> <span id="wjcelcm34c" class="head_right_line"></span> <div style="display: block;" id="login" class="haed_login "> <a href="javascript:;" title="Login" class="haed_logina ">Login</a> </div> <div style="display: block;" id="reg" class="head_signup login"> <a href="javascript:;" title="singup" class="head_signupa">singup</a> </div> </div> </div> </header> <main> <div id="wjcelcm34c" class="Article_Details_main"> <div id="wjcelcm34c" class="Article_Details_main1"> <div id="wjcelcm34c" class="Article_Details_main1L"> <div id="wjcelcm34c" class="Article_Details_main1Lmain" id="Article_Details_main1Lmain"> <div id="wjcelcm34c" class="Article_Details_main1L1">目錄</div> <div id="wjcelcm34c" class="Article_Details_main1L2" id="Article_Details_main1L2">  <div id="wjcelcm34c" class="Article_Details_main1L2s "> <a href="#為什麼在HTML-模板中使用UTF-字符編碼" title="為什麼在HTML5模板中使用UTF-8字符編碼？ " >為什麼在HTML5模板中使用UTF-8字符編碼？ </a> </div> <div id="wjcelcm34c" class="Article_Details_main1L2s "> <a href="#在HTML模板中包含CSS樣式表" title="在HTML模板中包含CSS樣式表" >在HTML模板中包含CSS樣式表</a> </div> <div id="wjcelcm34c" class="Article_Details_main1L2s "> <a href="#在HTML模板中包含JavaScript文件" title="在HTML模板中包含JavaScript文件" >在HTML模板中包含JavaScript文件</a> </div> <div id="wjcelcm34c" class="Article_Details_main1L2s "> <a href="#什麼是HTML中的模板" title="什麼是HTML中的模板？ " >什麼是HTML中的模板？ </a> </div> <div id="wjcelcm34c" class="Article_Details_main1L2s "> <a href="#模板是模板嗎" title="模板是模板嗎？ " >模板是模板嗎？ </a> </div> <div id="wjcelcm34c" class="Article_Details_main1L2s "> <a href="#如何在HTML中創(chuàng)建模板" title="如何在HTML中創(chuàng)建模板？ " >如何在HTML中創(chuàng)建模板？ </a> </div> <div id="wjcelcm34c" class="Article_Details_main1L2s "> <a href="#HTML-模板用於什麼" title="HTML5模板用於什麼？ " >HTML5模板用於什麼？ </a> </div> <div id="wjcelcm34c" class="Article_Details_main1L2s "> <a href="#模板示例是什麼" title="模板示例是什麼？ " >模板示例是什麼？ </a> </div> <div id="wjcelcm34c" class="Article_Details_main1L2s "> <a href="#HTML的起始代碼是什麼" title="HTML的起始代碼是什麼？ " >HTML的起始代碼是什麼？ </a> </div> <div id="wjcelcm34c" class="Article_Details_main1L2s "> <a href="#每個(gè)HTML文件都需要模板嗎" title="每個(gè)HTML文件都需要模板嗎？ " >每個(gè)HTML文件都需要模板嗎？ </a> </div> </div> </div> </div> <div id="wjcelcm34c" class="Article_Details_main1M"> <div id="wjcelcm34c" class="phpgenera_Details_mainL1"> <a href="http://ipnx.cn/zh-tw/" title="首頁" class="phpgenera_Details_mainL1a">首頁</a> <img src="/static/imghw/top_right.png" alt="" /> <a href="http://ipnx.cn/zh-tw/web-designer.html" class="phpgenera_Details_mainL1a">web前端</a> <img src="/static/imghw/top_right.png" alt="" /> <a href="http://ipnx.cn/zh-tw/css-tutorial.html" class="phpgenera_Details_mainL1a">css教學(xué)</a> <img src="/static/imghw/top_right.png" alt="" /> <span>HTML5模板：任何項(xiàng)目的基本入門HTML樣板</span> </div> <div id="wjcelcm34c" class="Articlelist_txts"> <div id="wjcelcm34c" class="Articlelist_txts_info"> <h1 class="Articlelist_txts_title">HTML5模板：任何項(xiàng)目的基本入門HTML樣板</h1> <div id="wjcelcm34c" class="Articlelist_txts_info_head"> <div id="wjcelcm34c" class="author_info"> <a href="http://ipnx.cn/zh-tw/member/1468495.html" class="author_avatar"> <img class="lazy" data-src="https://img.php.cn/upload/avatar/000/000/001/66ea810373f2f131.png" src="/static/imghw/default1.png" alt="Joseph Gordon-Levitt"> </a> <div id="wjcelcm34c" class="author_detail"> <a href="http://ipnx.cn/zh-tw/member/1468495.html" class="author_name">Joseph Gordon-Levitt</a> </div> </div> </div> <span id="wjcelcm34c" class="Articlelist_txts_time">Feb 08, 2025 am 08:50 AM</span> </div> </div> <hr /> <div id="wjcelcm34c" class="article_main php-article"> <div id="wjcelcm34c" class="article-list-left detail-content-wrap content"> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-5902227090019525" data-ad-slot="3461856641"> </ins> <p>構(gòu)建你自己的HTML5模板：一份簡(jiǎn)明指南</p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173897581160448.jpg" class="lazy" alt="HTML5 Template: A Base Starter HTML Boilerplate for Any Project "></p> <p>本文將指導(dǎo)您如何創(chuàng)建自己的HTML5模板。我們將逐步講解HTML基礎(chǔ)模板的關(guān)鍵要素，最終提供一個(gè)您可以拿來使用並進(jìn)一步構(gòu)建的簡(jiǎn)單模板。 </p> <p>閱讀完本文後，您將擁有自己的HTML5模板。如果您想現(xiàn)在就獲取HTML模板代碼，稍後再閱讀本文，這裡提供我們最終完成的HTML5模板。 </p> <p><strong>關(guān)鍵要點(diǎn)</strong></p> <ul> <li>HTML5模板作為可重用的模板，包含必要的HTML元素，有助於避免在每個(gè)項(xiàng)目開始時(shí)重複編寫代碼。 </li> <li>一個(gè)基本的HTML5模板應(yīng)包含文檔類型聲明、帶有語言屬性的<code></code>元素、通過<code><meta charset="utf-8"></code>的字符編碼以及用於響應(yīng)式設(shè)計(jì)的視口設(shè)置。 </li> <li>HTML5模板<code></code>部分的關(guān)鍵元素通常包含用於SEO的元數(shù)據(jù)、CSS樣式表的鏈接以及可選的JavaScript文件。 </li> <li>為了進(jìn)行社交媒體優(yōu)化，加入Open Graph元標(biāo)記可以增強(qiáng)內(nèi)容在社交平臺(tái)上共享時(shí)的顯示效果。 </li> <li>在模板中包含favicon和Apple touch圖標(biāo)有助於建立品牌標(biāo)識(shí)並改善跨設(shè)備的用戶體驗(yàn)。 </li> <li>將JavaScript文件放在閉合的<code></code>標(biāo)籤之前可以提高頁面加載速度，因?yàn)樗试S瀏覽器通過延遲加載腳本更快地呈現(xiàn)頁面。 </li> </ul> <p><strong>什麼是HTML模板？ </strong></p> <p>每個(gè)網(wǎng)站都不同，但從一個(gè)網(wǎng)站到另一個(gè)網(wǎng)站，許多東西基本上是相同的。與其一遍遍地編寫相同的代碼，不如創(chuàng)建一個(gè)自己的“模板”。模板是一個(gè)每次啟動(dòng)項(xiàng)目時(shí)都會(huì)用到的模板，可以避免您從頭開始。 </p> <p>維基百科將模板描述為：</p> <blockquote> <p>代碼片段在多個(gè)地方重複出現(xiàn)，幾乎沒有變化。 </p> </blockquote> <p>隨著您學(xué)習(xí)HTML5並將新技術(shù)添加到您的工具箱中，您可能希望為自己構(gòu)建一個(gè)HTML模板來啟動(dòng)所有未來的項(xiàng)目。這絕對(duì)值得去做，並且網(wǎng)上有很多起點(diǎn)可以幫助您構(gòu)建自己的HTML5模板。 </p> <p><strong>一個(gè)非常簡(jiǎn)單的HTML5模板示例</strong></p> <p>本文末尾提供的完整模板包含很多內(nèi)容。但是，您不必做得那麼花哨——尤其是在您剛開始學(xué)習(xí)的時(shí)候。這是一個(gè)非常簡(jiǎn)單的“入門”HTML5模板，這可能是您唯一需要的：</p> <pre class='brush:php;toolbar:false;'><!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>HTML5 Boilerplate</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Page Title</h1> <??> </body> </html></pre> <p>如果您將上面的代碼粘貼到一個(gè).html文件中，您將擁有一個(gè)網(wǎng)頁！這個(gè)基本的HTML5模板包含下一節(jié)中列出的一些元素，以及一個(gè)將在您的網(wǎng)絡(luò)瀏覽器中顯示的簡(jiǎn)單標(biāo)題元素。 </p> <p>讓我們更詳細(xì)地了解一下它的結(jié)構(gòu)。 </p> <p><strong>HTML5模板的結(jié)構(gòu)</strong></p> <p>HTML模板通常包含以下部分：</p><ol> <li>文檔類型聲明（或doctype）</li> <li><code><html></code>元素</li> <li>字符編碼</li> <li>視口元元素</li> <li><code><title></code>、描述和作者</li> <li>用於社交卡片的Open Graph元元素</li> <li>Favicon和touch圖標(biāo)</li> <li>CSS樣式錶鍊接</li> <li>JavaScript文件鏈接</li> </ol> <p>除了文檔類型聲明和<code><html></code>元素外，上面列出的元素大多位於HTML模板的<code><head></code>部分中。 </p> <p><strong>HTML5文檔類型聲明</strong></p> <p>您的HTML5模板需要以文檔類型聲明或<em>doctype</em>開頭。 doctype只是告訴瀏覽器或任何其他解析器它正在查看什麼類型的文檔的一種方式。對(duì)於HTML文件，這意味著HTML的特定版本和類型。 doctype應(yīng)該始終是任何HTML文件頂部的第一項(xiàng)。許多年前，doctype聲明是一個(gè)難看且難以記住的混亂，通常指定為“XHTML Strict”或“HTML Transitional”。 </p> <p>隨著HTML5的出現(xiàn)，那些難以理解的令人討厭的東西消失了，現(xiàn)在您只需要這個(gè)：</p> <pre class='brush:php;toolbar:false;'><!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>HTML5 Boilerplate</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Page Title</h1> <??> </body> </html></pre> <p>簡(jiǎn)單明了。 “5”從聲明中明顯消失了。儘管當(dāng)前版本的Web標(biāo)記被稱為“HTML5”，但它實(shí)際上只是先前HTML標(biāo)準(zhǔn)的演變——未來的規(guī)範(fàn)將只是我們今天所擁有的發(fā)展。永遠(yuǎn)不會(huì)有“HTML6”，因此通常將當(dāng)前狀態(tài)的Web標(biāo)記簡(jiǎn)單地稱為“HTML”。 </p> <p>因?yàn)闉g覽器需要支持Web上的舊內(nèi)容，所以不依賴doctype來告訴瀏覽器在給定文檔中應(yīng)支持哪些功能。換句話說，僅僅是doctype並不會(huì)使您的頁面符合現(xiàn)代HTML功能。實(shí)際上，無論使用哪種doctype，瀏覽器都將逐個(gè)案例確定功能支持。事實(shí)上，您可以將舊的doctype與頁面上的新HTML5元素一起使用，並且頁面的呈現(xiàn)方式與使用新doctype時(shí)相同。 </p> <p><strong><code><html></code>元素</strong></p> <p><code><html></code>元素是HTML文件中的頂級(jí)元素——這意味著它包含文檔中除doctype之外的所有內(nèi)容。 <code><html></code>元素分為兩部分——<code><head></code>和<code><body></code>部分。網(wǎng)頁文件中的所有其他內(nèi)容都將放置在<code><html></code>元素中或<code><html></code>元素內(nèi)部。下面的代碼顯示了<code><html></code>元素，它位於doctype聲明之後，並包含<code><head></code>和<code><body></code>元素：</p> <pre class='brush:php;toolbar:false;'><!DOCTYPE html></pre> <p><strong>如何在HTML中使用標(biāo)籤</strong></p> <p><code><head></code>部分包含有關(guān)文檔的重要信息，這些信息不會(huì)顯示給最終用戶——例如字符編碼以及CSS文件的鏈接，可能還有JavaScript文件。這些信息由瀏覽器、搜索引擎和屏幕閱讀器等機(jī)器使用：</p> <pre class='brush:php;toolbar:false;'><html lang="en"> <head> </head> <body> </body> </html></pre> <p>上面<code><head></code>…<code></head></code>標(biāo)籤之間包含的所有元素都很重要，但最終用戶看不到——除了<code><title></code>文本，它將出現(xiàn)在在線搜索和瀏覽器標(biāo)籤中。 </p><p><strong>如何在HTML中使用標(biāo)籤</strong></p> <p><code><body></code>部分包含在瀏覽器中顯示的所有內(nèi)容——例如文本、圖像等等。如果您想向最終用戶展示某些內(nèi)容，請(qǐng)確保將其放在打開和關(guān)閉<code><body></code>…<code></body></code>標(biāo)籤之間：</p> <pre class='brush:php;toolbar:false;'><!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>HTML5 Boilerplate</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Page Title</h1> <??> </body> </html></pre> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173897581228837.jpg" class="lazy" alt="HTML5 Template: A Base Starter HTML Boilerplate for Any Project " /></p> <p><strong><code>lang</code>屬性是什麼？ </strong></p> <p><code><html></code>元素理想情況下應(yīng)包含<code>lang</code>屬性，如上面的代碼所示（<code><html lang="en"></code>）。其主要目的是告訴屏幕閱讀器等輔助技術(shù)在朗讀時(shí)如何發(fā)音。（此屬性對(duì)於頁面驗(yàn)證不是必需的，但如果您不包含它，大多數(shù)驗(yàn)證器會(huì)發(fā)出警告。）</p> <p>上面顯示的<code>lang</code>屬性的值為<code>en</code>，這指定文檔是用英語編寫的。所有其他口語都有值，例如法語的<code>fr</code>、德語的<code>de</code>、印地語的<code>hi</code>等等。（您可以在維基百科上找到語言代碼的完整列表。）</p> <p><strong>HTML文檔字符編碼</strong></p> <p>HTML文檔<code><head></code>部分的第一行是定義文檔字符編碼的行。我們?cè)诰W(wǎng)頁上閱讀的字母和符號(hào)被定義為一系列數(shù)字，有些字符（如字母）以多種方式編碼。因此，告訴您的計(jì)算機(jī)您的網(wǎng)頁應(yīng)該參考哪個(gè)編碼很有用。指示字符編碼是一個(gè)可選功能，不會(huì)在驗(yàn)證器中導(dǎo)致任何警告，但對(duì)於大多數(shù)HTML頁面來說，它是推薦的：</p> <pre class='brush:php;toolbar:false;'><!DOCTYPE html></pre> <p><em>注意：為了確保某些舊版瀏覽器正確讀取字符編碼，整個(gè)字符編碼聲明必須包含在文檔的前512個(gè)字符中的某處。它也應(yīng)該出現(xiàn)在任何基於內(nèi)容的元素（如我們示例中稍後出現(xiàn)的<code><title></code>元素）之前。 </em></p> <h3 id="為什麼在HTML-模板中使用UTF-字符編碼">為什麼在HTML5模板中使用UTF-8字符編碼？ </h3> <p>上面的字符編碼示例使用UTF-8字符集。在幾乎所有情況下，<code>utf-8</code>都是您應(yīng)該在文檔中使用的值。此編碼涵蓋了其他編碼中未包含的各種字符。您可能在Web上遇到過奇怪的字符——例如?——這顯然是一個(gè)錯(cuò)誤。這通常是因?yàn)闉g覽器無法在文檔中指定的字符集中找到預(yù)期的字符。 </p> <p>UTF-8涵蓋了各種字符，包括全球各種語言的許多字符，以及許多有用的符號(hào)。正如萬維網(wǎng)聯(lián)盟所解釋的那樣：</p> <blockquote> <p>基於Unicode的編碼（如UTF-8）可以支持多種語言，並且可以適應(yīng)任何語言混合的頁面和表單。它的使用還可以消除服務(wù)器端邏輯，從而單獨(dú)確定為每個(gè)服務(wù)頁面或每個(gè)傳入表單提交的字符編碼。這大大降低了處理多語言網(wǎng)站或應(yīng)用程序的複雜性。 </p></blockquote> <p>字符編碼的完整解釋超出了本文的範(fàn)圍，但如果您想更深入地研究，您可以閱讀HTML規(guī)範(fàn)中的字符編碼。 </p> <p><strong><code>X-UA-Compatible</code>是什麼意思？ </strong></p> <p>您有時(shí)會(huì)在HTML文檔的<code><head></code>中看到這一行：</p> <pre class='brush:php;toolbar:false;'><!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>HTML5 Boilerplate</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Page Title</h1> <??> </body> </html></pre> <p>此元標(biāo)記允許Web作者選擇應(yīng)呈現(xiàn)頁面的Internet Explorer版本?，F(xiàn)在Internet Explorer在很大程度上只是一個(gè)糟糕的回憶，您可以安全地將此行從代碼中刪除。（我們已將其從HTML5模板中刪除。）如果您確定您的網(wǎng)頁可能會(huì)在舊版本的IE中查看，那麼可能值得包含它。您可以在Microsoft網(wǎng)站上閱讀更多關(guān)於此元標(biāo)記的信息。 </p> <p><strong>視口元元素</strong></p> <p>視口元元素是您幾乎在每個(gè)HTML5模板中都會(huì)看到的特性。它對(duì)於響應(yīng)式Web設(shè)計(jì)和移動(dòng)優(yōu)先設(shè)計(jì)非常重要：</p> <pre class='brush:php;toolbar:false;'><!DOCTYPE html></pre> <p>此<code><meta></code>元素包含兩個(gè)作為名稱/值集一起工作的屬性。在這種情況下，名稱設(shè)置為<code>viewport</code>，值為<code>width=device-width, initial-scale=1</code>。這僅供移動(dòng)設(shè)備使用。您會(huì)注意到該值有兩個(gè)部分：</p> <ul> <li><code>width=device-width</code>：您希望網(wǎng)站呈現(xiàn)的視口的像素寬度。 </li> <li><code>initial-scale</code>：這應(yīng)該是一個(gè)介於0.0和10.0之間的正數(shù)。 “1”的值表示設(shè)備寬度和視口大小之間存在1:1的比率。 </li> </ul> <p>您可以在MDN上閱讀更多關(guān)於這些元元素特性的信息，但現(xiàn)在只要知道，在大多數(shù)情況下，此元元素及其設(shè)置最適合移動(dòng)優(yōu)先的響應(yīng)式網(wǎng)站。 </p> <p><strong><code><title></code>、描述和作者</strong></p> <p>HTML基礎(chǔ)模板的下一部分包含以下三行：</p> <pre class='brush:php;toolbar:false;'><html lang="en"> <head> </head> <body> </body> </html></pre> <p><code><title></code>是在瀏覽器標(biāo)題欄中顯示的內(nèi)容（例如，當(dāng)您將鼠標(biāo)懸停在瀏覽器選項(xiàng)卡上時(shí)），它也顯示在搜索結(jié)果中。此元素是<code><head></code>部分中唯一必需的元素。描述和作者元元素是可選的，但它們確實(shí)為搜索引擎提供了重要信息。在搜索結(jié)果中，上面代碼示例中的標(biāo)題和描述將如下所示。 </p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173897581334276.jpg" class="lazy" alt="HTML5 Template: A Base Starter HTML Boilerplate for Any Project " /></p> <p>您可以在<code><head></code>中放置任意數(shù)量的有效元元素。 </p> <p><strong>用於社交卡片的Open Graph元元素</strong></p> <p>如上所述，所有元元素都是可選的，但許多元元素對(duì)SEO和社交媒體營(yíng)銷都有好處。 HTML5模板的下一部分包含其中一些元元素選項(xiàng)：</p> <pre class='brush:php;toolbar:false;'><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>HTML5 Boilerplate</title> <link rel="stylesheet" href="styles.css"> <??> </head></pre> <p>這些<code><meta></code>元素利用了所謂的Open Graph協(xié)議，還有許多其他您可以使用的元素。這些是您最常使用的元素。您可以在Open Graph網(wǎng)站上查看可用Open Graph元選項(xiàng)的完整列表。 </p><p>這裡包含的那些元素將在鏈接到社交媒體帖子時(shí)增強(qiáng)網(wǎng)頁的外觀。例如，這裡包含的五個(gè)<code><meta></code>元素將出現(xiàn)在嵌入以下數(shù)據(jù)的社交卡片中：</p> <ul> <li>內(nèi)容的標(biāo)題</li> <li>提供的內(nèi)容類型</li> <li>內(nèi)容的規(guī)範(fàn)URL</li> <li>內(nèi)容的描述</li> <li>與內(nèi)容關(guān)聯(lián)的圖像</li> </ul> <p>當(dāng)您看到在社交媒體上共享的帖子時(shí)，您通常會(huì)看到這些數(shù)據(jù)位會(huì)自動(dòng)添加到社交媒體帖子中。例如，如果您包含指向GitHub主頁的鏈接，則會(huì)在推文中顯示以下內(nèi)容。 </p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173897581532472.jpg" class="lazy" alt="HTML5 Template: A Base Starter HTML Boilerplate for Any Project " /></p> <p><strong>Favicon和Touch圖標(biāo)</strong></p> <p>HTML5模板的下一部分包含<code><link></code>元素，這些元素指示要包含為favicon和Apple touch圖標(biāo)的資源：</p> <pre class='brush:php;toolbar:false;'><!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>HTML5 Boilerplate</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Page Title</h1> <??> </body> </html></pre> <p>當(dāng)有人查看您的網(wǎng)站時(shí)，favicon將出現(xiàn)在瀏覽器選項(xiàng)卡中。 <code>favicon.ico</code>文件用於舊版瀏覽器，不必包含在代碼中。只要您的<code>favicon.ico</code>文件包含在項(xiàng)目的根目錄中，瀏覽器就會(huì)自動(dòng)找到它。 <code>favicon.svg</code>文件用於支持SVG圖標(biāo)的現(xiàn)代瀏覽器。您也可以使用.png文件代替。 </p> <p>最後一個(gè)元素引用在將頁面添加到用戶的家庭屏幕時(shí)在Apple設(shè)備上使用的圖標(biāo)。 </p> <p>您可以在這裡包含其他選項(xiàng)，包括引用其他圖標(biāo)的Web應(yīng)用程序清單文件。有關(guān)完整的討論，我們建議您閱讀Andrey Sitnik關(guān)於此主題的文章。但是這裡包含的那些對(duì)於簡(jiǎn)單的HTML入門模板就足夠了。 </p> <p><strong>包含CSS樣式表和JavaScript文件</strong></p> <p>HTML入門模板的最後兩個(gè)重要部分是對(duì)一個(gè)或多個(gè)樣式表以及可能還有JavaScript文件的引用。當(dāng)然，兩者都是可選的，儘管很少有網(wǎng)站沒有至少一些CSS樣式。 </p> <h3 id="在HTML模板中包含CSS樣式表">在HTML模板中包含CSS樣式表</h3> <p>樣式表可以包含在文檔中的任何位置，但您通常會(huì)在<code><head></code>部分看到它：</p> <pre class='brush:php;toolbar:false;'><!DOCTYPE html></pre> <p><code><link></code>元素將Web瀏覽器指向外部樣式表，以便它可以將這些CSS樣式應(yīng)用於頁面。 <code><link></code>元素需要<code>rel</code>屬性為<code>stylesheet</code>。過去，通常還會(huì)包含<code>type</code>屬性，但實(shí)際上它從未真正需要，因此如果您在Web上找到包含它的舊代碼，只需將其刪除即可。 </p> <p>請(qǐng)注意，我們?cè)贑SS鏈接的末尾添加了<code>?v=1.0</code>查詢字符串。這是完全可選的。當(dāng)您更新樣式表以更新此查詢字符串（例如，更新為1.1或2.0）時(shí)，這是一個(gè)方便的技巧，因?yàn)檫@樣做可以確保瀏覽器會(huì)丟棄任何舊的、緩存的CSS文件副本並加載新的版本。 </p><p>值得注意的是，您不必使用<code><link></code>元素來在網(wǎng)頁上包含CSS，因?yàn)槟梢愿臑閷⑺袠邮椒旁陧撁姹旧淼?code><style></code>…<code></style></code>標(biāo)籤內(nèi)，位於<code><head></code>部分。這在試驗(yàn)佈局時(shí)非常方便，但通常不建議在活動(dòng)站點(diǎn)上這樣做，因?yàn)檫@些樣式在其他頁面上將不可訪問，從而導(dǎo)致低效和/或重複的代碼。 </p> <h3 id="在HTML模板中包含JavaScript文件">在HTML模板中包含JavaScript文件</h3> <p>JavaScript代碼通常通過<code></pre> ? <p> </body></code><code></p></code> <pre class='brush:php;toolbar:false;'><!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>HTML5 Boilerplate</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Page Title</h1> <??> </body> </html></pre>將<p>標(biāo)籤內(nèi)來嵌入腳本：<strong> </strong> </p><p>關(guān)於舊版瀏覽器和新元素的說明<code><article></code><code><aside></code> <code><recipe></code>當(dāng)HTML5引入時(shí)，它包含許多新元素，例如<code><ziggy></code>和</aside>。您可能會(huì)認(rèn)為對(duì)未識(shí)別元素的支持對(duì)於舊版瀏覽器來說是一個(gè)主要問題——但事實(shí)並非如此！大多數(shù)瀏覽器實(shí)際上並不關(guān)心您使用什麼標(biāo)籤。如果您有一個(gè)HTML文檔，其中包含</article>元素（甚至</ziggy>元素），並且您的CSS將某些樣式附加到該元素，幾乎每個(gè)瀏覽器都會(huì)像這完全正常一樣進(jìn)行處理，而不會(huì)抱怨地應(yīng)用您的樣式。 </recipe></p><p></p><p> </p>當(dāng)然，這樣的假設(shè)文檔將無法驗(yàn)證，並且可能存在可訪問性問題，但它會(huì)在幾乎所有瀏覽器中正確呈現(xiàn)——例外情況是舊版本的Internet Explorer (IE)。在第9版之前，IE阻止未識(shí)別的元素接收樣式。渲染引擎將這些神秘元素視為“未知元素”，因此您無法更改它們的外觀或行為。這不僅包括我們想像的元素，還包括在開發(fā)這些瀏覽器版本時(shí)尚未定義的任何元素，包括新的HTML5元素。 <p> <em>幸運(yùn)的是，不支持新元素樣式的舊版瀏覽器如今幾乎不存在，因此您幾乎可以在任何項(xiàng)目中安全地使用任何新HTML元素而無需擔(dān)心。 </em> </p>也就是說，如果您<p>確實(shí)<strong>需要支持古老的瀏覽器，您仍然可以使用可靠的HTML5 Shiv，這是一個(gè)最初由John Resig開發(fā)的簡(jiǎn)單的JavaScript片段。它受到Sjoerd Visscher作品的啟發(fā)，它使新HTML5元素在舊版本的IE中可設(shè)置樣式。不過，實(shí)際上，今天不需要這樣做。正如caniuse.com所示，HTML5元素在所有正在使用的瀏覽器中都受支持。 </strong> </p><p>完整的HTML5模板</p><pre class='brush:php;toolbar:false;'><!DOCTYPE html></pre> <p>這是我們最終的HTML5模板——一個(gè)您可以用於任何項(xiàng)目的簡(jiǎn)單模板：<code><body></code> <code></body></code> </p>您可以將這個(gè)簡(jiǎn)單易用的HTML5模板代碼放到今天的任何項(xiàng)目中！在此基礎(chǔ)上，您可以在<p>和<strong>標(biāo)籤之間添加任何您想要的內(nèi)容。 </strong> </p>結(jié)論<script></code>元素添加到HTML頁面。此元素的<code>src</code>屬性提供指向JavaScript文件的鏈接。您可以從HTML模板中的任何位置鏈接到JavaScript文件。您經(jīng)常會(huì)在<code><head></code>部分看到它們，但作為一般規(guī)則，最好將它們放在文檔的底部，就在閉合的<code></body></code>標(biāo)簽之前：</p> <pre class="brush:php;toolbar:false"><code class="html"><head> ? </head> <body> ? <script src="js/script1.js"></script><p>網(wǎng)上有很多HTML入門模板和框架，它們帶有現(xiàn)成的CSS和JavaScript文件以及許多您可以隨意使用和修改的預(yù)寫內(nèi)容。這不是我們的目標(biāo)。我們?cè)谶@裡提供的基本模板包含設(shè)計(jì)任何網(wǎng)頁時(shí)可能需要的所有內(nèi)容，這樣您就不必每次都從頭開始。 </p> <p>隨意複製我們?cè)陂_頭顯示的基本HTML頁面模板，或上面顯示的完整模板，並在您的項(xiàng)目中使用它們。隨著時(shí)間的推移，您可能會(huì)發(fā)現(xiàn)有些內(nèi)容您並不經(jīng)常需要，而我們這裡沒有提到的一些內(nèi)容您經(jīng)常使用，因此您可以更新您的模板以適應(yīng)您的工作流程。 </p> <p><strong>後續(xù)步驟</strong></p> <p>將您的網(wǎng)頁佈局提升到一個(gè)新水平的一個(gè)好方法是使用《美麗的網(wǎng)頁設(shè)計(jì)原則，第四版》。本書將教您設(shè)計(jì)原則<em>以及</em>向您展示如何在Web上實(shí)現(xiàn)它們。它在2020年9月進(jìn)行了完全改寫，並包含您在其他任何地方都未曾讀到的尖端技術(shù)。 </p> <p>為了磨練您的CSS知識(shí)，我們的現(xiàn)代CSS項(xiàng)目課程將幫助您掌握CSS3的最新高級(jí)版本。 </p> <p>除此之外，您可以通過交互性和程序化、反應(yīng)式UI將您的網(wǎng)站或Web應(yīng)用程序開發(fā)提升到一個(gè)新的水平。例如，查看SitePoint關(guān)於JavaScript和React的大量資源。並了解如何使用我們關(guān)於最佳腳手架Web工具和庫(kù)的指南來更快地啟動(dòng)新項(xiàng)目?；蛘撸绻朐诓粚W(xué)習(xí)編碼的情況下構(gòu)建Web體驗(yàn)，請(qǐng)閱讀我們關(guān)於無代碼運(yùn)動(dòng)的入門指南。最新的無代碼工具改變了遊戲規(guī)則。他們第一次擁有足夠的強(qiáng)大功能，可以在許多情況下為編碼提供一個(gè)強(qiáng)大的替代方案。 </p> <p><strong>HTML5模板常見問題解答</strong></p> <p>最後，我們將回答關(guān)於HTML5模板代碼的常見問題。 </p> <h3 id="什麼是HTML中的模板">什麼是HTML中的模板？ </h3> <p>模板是一個(gè)HTML頁面模板，每次啟動(dòng)項(xiàng)目時(shí)都會(huì)使用它，從而避免從頭開始。它包括常見的元素，例如文檔類型聲明和出現(xiàn)在每個(gè)網(wǎng)頁上的基本HTML元素。 </p> <h3 id="模板是模板嗎">模板是模板嗎？ </h3> <p>是的。模板是一個(gè)非常簡(jiǎn)單的HTML入門模板，它包含出現(xiàn)在任何網(wǎng)頁上的基本元素，例如字符編碼、<code><head></code>和<code><body></code>元素以及CSS和JavaScript文件的鏈接。 </p> <h3 id="如何在HTML中創(chuàng)建模板">如何在HTML中創(chuàng)建模板？ </h3> <p>創(chuàng)建您自己的HTML模板的一種方法是獲取任何網(wǎng)頁，複製其源代碼，然後刪除除出現(xiàn)在每個(gè)網(wǎng)頁上的最基本元素之外的所有內(nèi)容?；蛘吣梢垣@取我們現(xiàn)成的HTML5模板並將其粘貼到.html文件中，然後您就可以開始了！ </p><h3 id="HTML-模板用於什麼">HTML5模板用於什麼？ </h3> <p>在設(shè)計(jì)網(wǎng)頁時(shí)，沒有什麼比從空白的.html頁面開始並不得不從頭開始編寫所有枯燥的代碼更糟糕的了。我們的HTML5模板為您提供了開始運(yùn)行所需的所有HTML模板代碼，以便您可以立即開始處理您的獨(dú)特設(shè)計(jì)和內(nèi)容。 </p> <h3 id="模板示例是什麼">模板示例是什麼？ </h3> <p>網(wǎng)上有很多HTML5模板示例。隨著時(shí)間的推移，您可能會(huì)根據(jù)自己編寫HTML的方式創(chuàng)建自己的模板。我們的HTML5模板示例提供了大多數(shù)網(wǎng)頁上所需的所有基本元素。 </p> <p>作為一個(gè)非常簡(jiǎn)單的開始，您可以只使用這個(gè)：</p> <pre class='brush:php;toolbar:false;'><!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>HTML5 Boilerplate</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Page Title</h1> <??> </body> </html></pre> <h3 id="HTML的起始代碼是什麼">HTML的起始代碼是什麼？ </h3> <p>HTML文檔總是以文檔類型聲明開頭：<code><!DOCTYPE html></code>。之後是<code></code>標(biāo)籤，其中包含網(wǎng)頁上的所有其他內(nèi)容。 <code></code>的兩個(gè)子元素是<code></code>和<code></code>元素。我們的HTML5模板包含任何網(wǎng)頁所需的所有基本起始代碼。 </p> <h3 id="每個(gè)HTML文件都需要模板嗎">每個(gè)HTML文件都需要模板嗎？ </h3> <p>理想情況下，是的。 HTML模板提供了HTML頁面在Web瀏覽器中執(zhí)行任何有用操作的最小代碼量。您可以在網(wǎng)站的每個(gè)頁面上使用HTML模板代碼。通常，模板的公共元素將從單個(gè)源（例如框架或包含文件）注入您的頁面，以便您可以一次更新所有頁面的模板。我們的HTML5模板提供了開始所需的所有HTML模板代碼。 </p><p>以上是HTML5模板：任何項(xiàng)目的基本入門HTML樣板的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！</p> </div> </div> <div id="wjcelcm34c" class="wzconShengming_sp"> <div id="wjcelcm34c" class="bzsmdiv_sp">本網(wǎng)站聲明</div> <div>本文內(nèi)容由網(wǎng)友自願(yuàn)投稿，版權(quán)歸原作者所有。本站不承擔(dān)相應(yīng)的法律責(zé)任。如發(fā)現(xiàn)涉嫌抄襲或侵權(quán)的內(nèi)容，請(qǐng)聯(lián)絡(luò)admin@php.cn</div> </div> </div> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="2507867629"></ins> <div id="wjcelcm34c" class="AI_ToolDetails_main4sR"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5902227090019525" data-ad-slot="3653428331" data-ad-format="auto" data-full-width-responsive="true"></ins>  <div id="wjcelcm34c" class="phpgenera_Details_mainR3"> <div id="wjcelcm34c" class="phpmain1_4R_readrank"> <div id="wjcelcm34c" class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hottools2.png" alt="" /> <h2>熱AI工具</h2> </div> <div id="wjcelcm34c" class="phpgenera_Details_mainR3_bottom"> <div id="wjcelcm34c" class="phpmain_tab2_mids_top"> <a href="http://ipnx.cn/zh-tw/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" /> </a> <div id="wjcelcm34c" class="phpmain_tab2_mids_info"> <a href="http://ipnx.cn/zh-tw/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title"> <h3>Undress AI Tool</h3> </a> <p>免費(fèi)脫衣圖片</p> </div> </div> <div id="wjcelcm34c" class="phpmain_tab2_mids_top"> <a href="http://ipnx.cn/zh-tw/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" /> </a> <div id="wjcelcm34c" class="phpmain_tab2_mids_info"> <a href="http://ipnx.cn/zh-tw/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title"> <h3>Undresser.AI Undress</h3> </a> <p>人工智慧驅(qū)動(dòng)的應(yīng)用程序，用於創(chuàng)建逼真的裸體照片</p> </div> </div> <div id="wjcelcm34c" class="phpmain_tab2_mids_top"> <a href="http://ipnx.cn/zh-tw/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" /> </a> <div id="wjcelcm34c" class="phpmain_tab2_mids_info"> <a href="http://ipnx.cn/zh-tw/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title"> <h3>AI Clothes Remover</h3> </a> <p>用於從照片中去除衣服的線上人工智慧工具。</p> </div> </div> <div id="wjcelcm34c" class="phpmain_tab2_mids_top"> <a href="http://ipnx.cn/zh-tw/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" /> </a> <div id="wjcelcm34c" class="phpmain_tab2_mids_info"> <a href="http://ipnx.cn/zh-tw/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title"> <h3>Clothoff.io</h3> </a> <p>AI脫衣器</p> </div> </div> <div id="wjcelcm34c" class="phpmain_tab2_mids_top"> <a href="http://ipnx.cn/zh-tw/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Video Face Swap" /> </a> <div id="wjcelcm34c" class="phpmain_tab2_mids_info"> <a href="http://ipnx.cn/zh-tw/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title"> <h3>Video Face Swap</h3> </a> <p>使用我們完全免費(fèi)的人工智慧換臉工具，輕鬆在任何影片中換臉！</p> </div> </div> </div> <div id="wjcelcm34c" class="phpgenera_Details_mainR3_more"> <a href="http://ipnx.cn/zh-tw/ai">顯示更多</a> </div> </div> </div> <div id="wjcelcm34c" class="phpgenera_Details_mainR4"> <div id="wjcelcm34c" class="phpmain1_4R_readrank"> <div id="wjcelcm34c" class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>熱門文章</h2> </div> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottom"> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms"> <a href="http://ipnx.cn/zh-tw/faq/1796832397.html" title="Grass Wonder Build Guide |烏瑪媽媽漂亮的德比" class="phpgenera_Details_mainR4_bottom_title">Grass Wonder Build Guide |烏瑪媽媽漂亮的德比</a> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info"> <span>4 週前</span> <span>By Jack chen</span> </div> </div> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms"> <a href="http://ipnx.cn/zh-tw/faq/1796833110.html" title="<??>：在森林裡99夜 - 所有徽章以及如何解鎖" class="phpgenera_Details_mainR4_bottom_title"><??>：在森林裡99夜 - 所有徽章以及如何解鎖</a> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info"> <span>3 週前</span> <span>By DDD</span> </div> </div> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms"> <a href="http://ipnx.cn/zh-tw/faq/1796831605.html" title="烏瑪?shù)姆劢z漂亮的德比橫幅日程（2025年7月）" class="phpgenera_Details_mainR4_bottom_title">烏瑪?shù)姆劢z漂亮的德比橫幅日程（2025年7月）</a> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info"> <span>4 週前</span> <span>By Jack chen</span> </div> </div> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms"> <a href="http://ipnx.cn/zh-tw/faq/1796831905.html" title="Windows安全是空白或不顯示選項(xiàng)" class="phpgenera_Details_mainR4_bottom_title">Windows安全是空白或不顯示選項(xiàng)</a> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info"> <span>4 週前</span> <span>By 下次還敢</span> </div> </div> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms"> <a href="http://ipnx.cn/zh-tw/faq/1796836699.html" title="Rimworld Odyssey溫度指南和Gravtech" class="phpgenera_Details_mainR4_bottom_title">Rimworld Odyssey溫度指南和Gravtech</a> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info"> <span>3 週前</span> <span>By Jack chen</span> </div> </div> </div> <div id="wjcelcm34c" class="phpgenera_Details_mainR3_more"> <a href="http://ipnx.cn/zh-tw/article.html">顯示更多</a> </div> </div> </div> <div id="wjcelcm34c" class="phpgenera_Details_mainR3"> <div id="wjcelcm34c" class="phpmain1_4R_readrank"> <div id="wjcelcm34c" class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hottools2.png" alt="" /> <h2>熱工具</h2> </div> <div id="wjcelcm34c" class="phpgenera_Details_mainR3_bottom"> <div id="wjcelcm34c" class="phpmain_tab2_mids_top"> <a href="http://ipnx.cn/zh-tw/toolset/development-tools/92" title="記事本++7.3.1" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="記事本++7.3.1" /> </a> <div id="wjcelcm34c" class="phpmain_tab2_mids_info"> <a href="http://ipnx.cn/zh-tw/toolset/development-tools/92" title="記事本++7.3.1" class="phpmain_tab2_mids_title"> <h3>記事本++7.3.1</h3> </a> <p>好用且免費(fèi)的程式碼編輯器</p> </div> </div> <div id="wjcelcm34c" class="phpmain_tab2_mids_top"> <a href="http://ipnx.cn/zh-tw/toolset/development-tools/93" title="SublimeText3漢化版" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3漢化版" /> </a> <div id="wjcelcm34c" class="phpmain_tab2_mids_info"> <a href="http://ipnx.cn/zh-tw/toolset/development-tools/93" title="SublimeText3漢化版" class="phpmain_tab2_mids_title"> <h3>SublimeText3漢化版</h3> </a> <p>中文版，非常好用</p> </div> </div> <div id="wjcelcm34c" class="phpmain_tab2_mids_top"> <a href="http://ipnx.cn/zh-tw/toolset/development-tools/121" title="禪工作室 13.0.1" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="禪工作室 13.0.1" /> </a> <div id="wjcelcm34c" class="phpmain_tab2_mids_info"> <a href="http://ipnx.cn/zh-tw/toolset/development-tools/121" title="禪工作室 13.0.1" class="phpmain_tab2_mids_title"> <h3>禪工作室 13.0.1</h3> </a> <p>強(qiáng)大的PHP整合開發(fā)環(huán)境</p> </div> </div> <div id="wjcelcm34c" class="phpmain_tab2_mids_top"> <a href="http://ipnx.cn/zh-tw/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Dreamweaver CS6" /> </a> <div id="wjcelcm34c" class="phpmain_tab2_mids_info"> <a href="http://ipnx.cn/zh-tw/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title"> <h3>Dreamweaver CS6</h3> </a> <p>視覺化網(wǎng)頁開發(fā)工具</p> </div> </div> <div id="wjcelcm34c" class="phpmain_tab2_mids_top"> <a href="http://ipnx.cn/zh-tw/toolset/development-tools/500" title="SublimeText3 Mac版" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Mac版" /> </a> <div id="wjcelcm34c" class="phpmain_tab2_mids_info"> <a href="http://ipnx.cn/zh-tw/toolset/development-tools/500" title="SublimeText3 Mac版" class="phpmain_tab2_mids_title"> <h3>SublimeText3 Mac版</h3> </a> <p>神級(jí)程式碼編輯軟體(SublimeText3)</p> </div> </div> </div> <div id="wjcelcm34c" class="phpgenera_Details_mainR3_more"> <a href="http://ipnx.cn/zh-tw/ai">顯示更多</a> </div> </div> </div> <div id="wjcelcm34c" class="phpgenera_Details_mainR4"> <div id="wjcelcm34c" class="phpmain1_4R_readrank"> <div id="wjcelcm34c" class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>熱門話題</h2> </div> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottom"> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms"> <a href="http://ipnx.cn/zh-tw/faq/laravel-tutori" title="Laravel 教程" class="phpgenera_Details_mainR4_bottom_title">Laravel 教程</a> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info"> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1597</span> </div> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>29</span> </div> </div> </div> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms"> <a href="http://ipnx.cn/zh-tw/faq/php-tutorial" title="PHP教程" class="phpgenera_Details_mainR4_bottom_title">PHP教程</a> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info"> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1488</span> </div> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>72</span> </div> </div> </div> </div> <div id="wjcelcm34c" class="phpgenera_Details_mainR3_more"> <a href="http://ipnx.cn/zh-tw/faq/zt">顯示更多</a> </div> </div> </div> </div> </div> <div id="wjcelcm34c" class="Article_Details_main2"> <div id="wjcelcm34c" class="phpgenera_Details_mainL4"> <div id="wjcelcm34c" class="phpmain1_2_top"> <a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img src="/static/imghw/index2_title2.png" alt="" /></a> </div> <div id="wjcelcm34c" class="phpgenera_Details_mainL4_info"> <div id="wjcelcm34c" class="phphistorical_Version2_mids"> <a href="http://ipnx.cn/zh-tw/faq/1796831408.html" title="CSS教程，用於創(chuàng)建加載旋轉(zhuǎn)器和動(dòng)畫" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/431/639/175181807052041.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="CSS教程，用於創(chuàng)建加載旋轉(zhuǎn)器和動(dòng)畫" /> </a> <a href="http://ipnx.cn/zh-tw/faq/1796831408.html" title="CSS教程，用於創(chuàng)建加載旋轉(zhuǎn)器和動(dòng)畫" class="phphistorical_Version2_mids_title">CSS教程，用於創(chuàng)建加載旋轉(zhuǎn)器和動(dòng)畫</a> <span id="wjcelcm34c" class="Articlelist_txts_time">Jul 07, 2025 am 12:07 AM</span> <p class="Articlelist_txts_p">創(chuàng)建CSS加載旋轉(zhuǎn)器的方法有三種：1.使用邊框的基本旋轉(zhuǎn)器，通過HTML和CSS實(shí)現(xiàn)簡(jiǎn)單動(dòng)畫；2.使用多個(gè)點(diǎn)的自定義旋轉(zhuǎn)器，通過不同延遲時(shí)間實(shí)現(xiàn)跳動(dòng)效果；3.在按鈕中添加旋轉(zhuǎn)器，通過JavaScript切換類來顯示加載狀態(tài)。每種方法都強(qiáng)調(diào)了設(shè)計(jì)細(xì)節(jié)如顏色、大小、可訪問性和性能優(yōu)化的重要性，以提升用戶體驗(yàn)。</p> </div> <div id="wjcelcm34c" class="phphistorical_Version2_mids"> <a href="http://ipnx.cn/zh-tw/faq/1796831743.html" title="解決CSS瀏覽器兼容性問題和前綴" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175182386183257.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="解決CSS瀏覽器兼容性問題和前綴" /> </a> <a href="http://ipnx.cn/zh-tw/faq/1796831743.html" title="解決CSS瀏覽器兼容性問題和前綴" class="phphistorical_Version2_mids_title">解決CSS瀏覽器兼容性問題和前綴</a> <span id="wjcelcm34c" class="Articlelist_txts_time">Jul 07, 2025 am 01:44 AM</span> <p class="Articlelist_txts_p">處理CSS瀏覽器兼容性和前綴問題需理解瀏覽器支持差異並合理使用廠商前綴。 1.了解常見問題如Flexbox、Grid支持不一，position:sticky失效，動(dòng)畫表現(xiàn)不同；2.查閱CanIuse確認(rèn)特性支持情況；3.正確使用-webkit-、-moz-、-ms-、-o-等廠商前綴；4.推薦使用Autoprefixer自動(dòng)添加前綴；5.安裝PostCSS並配置browserslist指定目標(biāo)瀏覽器；6.構(gòu)建時(shí)自動(dòng)處理兼容性；7.老項(xiàng)目可用Modernizr檢測(cè)特性；8.不必追求所有瀏覽器一致，確</p> </div> <div id="wjcelcm34c" class="phphistorical_Version2_mids"> <a href="http://ipnx.cn/zh-tw/faq/1796833145.html" title="使用CSS剪輯路徑創(chuàng)建自定義形狀" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175199577133591.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="使用CSS剪輯路徑創(chuàng)建自定義形狀" /> </a> <a href="http://ipnx.cn/zh-tw/faq/1796833145.html" title="使用CSS剪輯路徑創(chuàng)建自定義形狀" class="phphistorical_Version2_mids_title">使用CSS剪輯路徑創(chuàng)建自定義形狀</a> <span id="wjcelcm34c" class="Articlelist_txts_time">Jul 09, 2025 am 01:29 AM</span> <p class="Articlelist_txts_p">使用CSS的clip-path屬性可以裁剪元素為自定義形狀，如三角形、圓形缺口、多邊形等，無需依賴圖片或SVG。其優(yōu)勢(shì)包括：1.支持circle、ellipse、polygon等多種基本形狀；2.可響應(yīng)式調(diào)整，適配移動(dòng)端；3.易於動(dòng)畫化，可結(jié)合hover或JavaScript實(shí)現(xiàn)動(dòng)態(tài)效果；4.不影響佈局流，僅裁剪顯示區(qū)域。常見用法如圓形裁剪clip-path:circle(50pxatcenter)和三角形裁剪clip-path:polygon(50%0%,1000%,00%)。注意</p> </div> <div id="wjcelcm34c" class="phphistorical_Version2_mids"> <a href="http://ipnx.cn/zh-tw/faq/1796834914.html" title="顯示：內(nèi)聯(lián)，顯示：塊和顯示：內(nèi)聯(lián)塊之間有什麼區(qū)別？" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175217550090568.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="顯示：內(nèi)聯(lián)，顯示：塊和顯示：內(nèi)聯(lián)塊之間有什麼區(qū)別？" /> </a> <a href="http://ipnx.cn/zh-tw/faq/1796834914.html" title="顯示：內(nèi)聯(lián)，顯示：塊和顯示：內(nèi)聯(lián)塊之間有什麼區(qū)別？" class="phphistorical_Version2_mids_title">顯示：內(nèi)聯(lián)，顯示：塊和顯示：內(nèi)聯(lián)塊之間有什麼區(qū)別？</a> <span id="wjcelcm34c" class="Articlelist_txts_time">Jul 11, 2025 am 03:25 AM</span> <p class="Articlelist_txts_p">Themaindifferencesbetweendisplay:inline,block,andinline-blockinHTML/CSSarelayoutbehavior,spaceusage,andstylingcontrol.1.Inlineelementsflowwithtext,don’tstartonnewlines,ignorewidth/height,andonlyapplyhorizo????ntalpadding/margins—idealforinlinetextstyling</p> </div> <div id="wjcelcm34c" class="phphistorical_Version2_mids"> <a href="http://ipnx.cn/zh-tw/faq/1796834918.html" title="造型與CSS不同訪問的鏈接" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175217558128323.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="造型與CSS不同訪問的鏈接" /> </a> <a href="http://ipnx.cn/zh-tw/faq/1796834918.html" title="造型與CSS不同訪問的鏈接" class="phphistorical_Version2_mids_title">造型與CSS不同訪問的鏈接</a> <span id="wjcelcm34c" class="Articlelist_txts_time">Jul 11, 2025 am 03:26 AM</span> <p class="Articlelist_txts_p">設(shè)置訪問過鏈接的樣式能提升用戶體驗(yàn)，尤其在內(nèi)容密集型網(wǎng)站中幫助用戶更好導(dǎo)航。 1.使用CSS的:visited偽類可定義已訪問鏈接樣式，如顏色變化；2.注意瀏覽器出於隱私限制僅允許修改部分屬性；3.顏色選擇應(yīng)與整體風(fēng)格協(xié)調(diào)，避免突兀；4.移動(dòng)端可能不顯示該效果，建議結(jié)合其他視覺提示如icon輔助標(biāo)識(shí)。</p> </div> <div id="wjcelcm34c" class="phphistorical_Version2_mids"> <a href="http://ipnx.cn/zh-tw/faq/1796837251.html" title="如何使用CSS創(chuàng)建響應(yīng)式圖像？" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175251305059116.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="如何使用CSS創(chuàng)建響應(yīng)式圖像？" /> </a> <a href="http://ipnx.cn/zh-tw/faq/1796837251.html" title="如何使用CSS創(chuàng)建響應(yīng)式圖像？" class="phphistorical_Version2_mids_title">如何使用CSS創(chuàng)建響應(yīng)式圖像？</a> <span id="wjcelcm34c" class="Articlelist_txts_time">Jul 15, 2025 am 01:10 AM</span> <p class="Articlelist_txts_p">要使用CSS創(chuàng)建響應(yīng)式圖片，主要可通過以下方法實(shí)現(xiàn)：1.使用max-width:100%和height:auto讓圖片在保持比例的同時(shí)自適應(yīng)容器寬度；2.結(jié)合HTML的srcset和sizes屬性智能加載適配不同屏幕的圖片源；3.利用object-fit和object-position控製圖片裁剪與焦點(diǎn)展示。這些方法共同確保圖片在不同設(shè)備上清晰、美觀地呈現(xiàn)。</p> </div> <div id="wjcelcm34c" class="phphistorical_Version2_mids"> <a href="http://ipnx.cn/zh-tw/faq/1796832540.html" title="揭開CSS單元的神秘面紗：PX，EM，REM，VW，VH比較" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175191219061804.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="揭開CSS單元的神秘面紗：PX，EM，REM，VW，VH比較" /> </a> <a href="http://ipnx.cn/zh-tw/faq/1796832540.html" title="揭開CSS單元的神秘面紗：PX，EM，REM，VW，VH比較" class="phphistorical_Version2_mids_title">揭開CSS單元的神秘面紗：PX，EM，REM，VW，VH比較</a> <span id="wjcelcm34c" class="Articlelist_txts_time">Jul 08, 2025 am 02:16 AM</span> <p class="Articlelist_txts_p">CSS單位的選擇取決於設(shè)計(jì)需求和響應(yīng)式要求。 1.px用於固定尺寸，適合精確控制但缺乏彈性；2.em是相對(duì)單位，受父元素影響易導(dǎo)致級(jí)聯(lián)問題，rem則基於根元素更穩(wěn)定，適合全局縮放；3.vw/vh基於視口大小，適合響應(yīng)式設(shè)計(jì)，但需注意極端屏幕下的表現(xiàn)；4.選擇時(shí)應(yīng)根據(jù)是否需要響應(yīng)式調(diào)整、元素層級(jí)關(guān)係及視口依賴程度來決定，合理搭配使用可提升佈局靈活性與維護(hù)性。</p> </div> <div id="wjcelcm34c" class="phphistorical_Version2_mids"> <a href="http://ipnx.cn/zh-tw/faq/1796847484.html" title="什麼是常見的CSS瀏覽器不一致？" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175348469118409.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="什麼是常見的CSS瀏覽器不一致？" /> </a> <a href="http://ipnx.cn/zh-tw/faq/1796847484.html" title="什麼是常見的CSS瀏覽器不一致？" class="phphistorical_Version2_mids_title">什麼是常見的CSS瀏覽器不一致？</a> <span id="wjcelcm34c" class="Articlelist_txts_time">Jul 26, 2025 am 07:04 AM</span> <p class="Articlelist_txts_p">不同瀏覽器對(duì)CSS解析存在差異，導(dǎo)致顯示效果不一致，主要包括默認(rèn)樣式差異、盒模型計(jì)算方式、Flexbox和Grid佈局支持程度及某些CSS屬性行為不一致。 1.默認(rèn)樣式處理不一致，解決方法是使用CSSReset或Normalize.css統(tǒng)一初始樣式；2.舊版IE的盒模型計(jì)算方式不同，建議統(tǒng)一使用box-sizing:border-box；3.Flexbox和Grid在邊緣情況或舊版本中表現(xiàn)有差異，應(yīng)多測(cè)試並使用Autoprefixer；4.某些CSS屬性行為不一致，需查閱CanIuse並提供降級(jí)</p> </div> </div> <a href="http://ipnx.cn/zh-tw/web-designer.html" class="phpgenera_Details_mainL4_botton"> <span>See all articles</span> <img src="/static/imghw/down_right.png" alt="" /> </a> </div> </div> </div> </main> <footer> <div id="wjcelcm34c" class="footer"> <div id="wjcelcm34c" class="footertop"> <img src="/static/imghw/logo.png" alt=""> <p>公益線上PHP培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長(zhǎng)！</p> </div> <div id="wjcelcm34c" class="footermid"> <a href="http://ipnx.cn/zh-tw/about/us.html">關(guān)於我們</a> <a href="http://ipnx.cn/zh-tw/about/disclaimer.html">免責(zé)聲明</a> <a href="http://ipnx.cn/zh-tw/update/article_0_1.html">Sitemap</a> </div> <div id="wjcelcm34c" class="footerbottom"> <p> ? php.cn All rights reserved </p> </div> </div> </footer> <input type="hidden" id="verifycode" value="/captcha.html"> <link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' /> <footer> <div class="friendship-link"> <p>感谢您访问我们的网站，您可能还对以下资源感兴趣：</p> <a href="http://ipnx.cn/" title="亚洲国产日韩欧美一区二区三区">亚洲国产日韩欧美一区二区三区</a> <div class="friend-links"> </div> </div> </footer> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </body><div id="ctmyp" class="pl_css_ganrao" style="display: none;"><p id="ctmyp"></p><dd id="ctmyp"><acronym id="ctmyp"><button id="ctmyp"></button></acronym></dd><pre id="ctmyp"></pre><ruby id="ctmyp"></ruby><menu id="ctmyp"></menu><dfn id="ctmyp"><pre id="ctmyp"><dl id="ctmyp"></dl></pre></dfn><ul id="ctmyp"></ul><mark id="ctmyp"><tr id="ctmyp"><optgroup id="ctmyp"></optgroup></tr></mark><bdo id="ctmyp"><rt id="ctmyp"><wbr id="ctmyp"><dfn id="ctmyp"></dfn></wbr></rt></bdo><table id="ctmyp"></table><font id="ctmyp"></font><dfn id="ctmyp"></dfn><optgroup id="ctmyp"><var id="ctmyp"><ol id="ctmyp"></ol></var></optgroup><abbr id="ctmyp"></abbr><sup id="ctmyp"></sup><wbr id="ctmyp"><sub id="ctmyp"><ins id="ctmyp"><abbr id="ctmyp"></abbr></ins></sub></wbr><track id="ctmyp"></track><label id="ctmyp"></label><tr id="ctmyp"><menuitem id="ctmyp"></menuitem></tr><label id="ctmyp"><sup id="ctmyp"><ol id="ctmyp"></ol></sup></label><blockquote id="ctmyp"><mark id="ctmyp"><center id="ctmyp"></center></mark></blockquote><abbr id="ctmyp"><table id="ctmyp"></table></abbr><acronym id="ctmyp"><address id="ctmyp"><sup id="ctmyp"></sup></address></acronym><optgroup id="ctmyp"></optgroup><p id="ctmyp"></p><legend id="ctmyp"></legend><acronym id="ctmyp"><span id="ctmyp"><mark id="ctmyp"><output id="ctmyp"></output></mark></span></acronym><small id="ctmyp"><abbr id="ctmyp"></abbr></small><form id="ctmyp"><optgroup id="ctmyp"><nav id="ctmyp"><s id="ctmyp"></s></nav></optgroup></form><sub id="ctmyp"></sub><th id="ctmyp"></th><bdo id="ctmyp"><fieldset id="ctmyp"><dl id="ctmyp"><div id="ctmyp"></div></dl></fieldset></bdo><fieldset id="ctmyp"></fieldset><dl id="ctmyp"><strike id="ctmyp"></strike></dl><xmp id="ctmyp"><del id="ctmyp"><b id="ctmyp"></b></del></xmp><big id="ctmyp"><mark id="ctmyp"></mark></big><nav id="ctmyp"><menu id="ctmyp"></menu></nav><acronym id="ctmyp"></acronym><center id="ctmyp"></center><meter id="ctmyp"></meter><tbody id="ctmyp"><tr id="ctmyp"><output id="ctmyp"><ruby id="ctmyp"></ruby></output></tr></tbody><th id="ctmyp"></th><em id="ctmyp"><listing id="ctmyp"><bdo id="ctmyp"><strong id="ctmyp"></strong></bdo></listing></em><u id="ctmyp"></u><p id="ctmyp"></p><dd id="ctmyp"><font id="ctmyp"><tt id="ctmyp"></tt></font></dd><label id="ctmyp"><object id="ctmyp"><strike id="ctmyp"></strike></object></label><delect id="ctmyp"></delect><abbr id="ctmyp"></abbr><rt id="ctmyp"></rt></div> </html>