<li id="nbqzw"><legend id="nbqzw"></legend></li>

\n

Page Title<\/h1>\n \n<\/body>\n<\/html><\/pre>\n
如果您將上面的代碼粘貼到一個.html文件中，您將擁有一個網(wǎng)頁！這個基本的HTML5模板包含下一節(jié)中列出的一些元素，以及一個將在您的網(wǎng)絡瀏覽器中顯示的簡單標題元素。 <\/p>\n
讓我們更詳細地了解一下它的結構。 <\/p>\n
HTML5模板的結構<\/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圖標<\/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只是告訴瀏覽器或任何其他解析器它正在查看什麼類型的文檔的一種方式。對於HTML文件，這意味著HTML的特定版本和類型。 doctype應該始終是任何HTML文件頂部的第一項。許多年前，doctype聲明是一個難看且難以記住的混亂，通常指定為“XHTML Strict”或“HTML Transitional”。 <\/p>\n<p>隨著HTML5的出現(xiàn)，那些難以理解的令人討厭的東西消失了，現(xiàn)在您只需要這個：<\/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://miracleart.cn/">国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂</a></h1>\n <h1>Page Title<\/h1>\n <??>\n<\/body>\n<\/html><\/pre>\n<p>簡單明了。 “5”從聲明中明顯消失了。儘管當前版本的Web標記被稱為“HTML5”，但它實際上只是先前HTML標準的演變——未來的規(guī)範將只是我們今天所擁有的發(fā)展。永遠不會有“HTML6”，因此通常將當前狀態(tài)的Web標記簡單地稱為“HTML”。 <\/p>\n<p>因為瀏覽器需要支持Web上的舊內(nèi)容，所以不依賴doctype來告訴瀏覽器在給定文檔中應支持哪些功能。換句話說，僅僅是doctype並不會使您的頁面符合現(xiàn)代HTML功能。實際上，無論使用哪種doctype，瀏覽器都將逐個案例確定功能支持。事實上，您可以將舊的doctype與頁面上的新HTML5元素一起使用，並且頁面的呈現(xiàn)方式與使用新doctype時相同。 <\/p>\n<p><strong><code><html><\/code>元素<\/strong><\/p>\n<p><code><html><\/code>元素是HTML文件中的頂級元素——這意味著它包含文檔中除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中使用標籤<\/strong><\/p>\n<p><code><head><\/code>部分包含有關文檔的重要信息，這些信息不會顯示給最終用戶——例如字符編碼以及CSS文件的鏈接，可能還有JavaScript文件。這些信息由瀏覽器、搜索引擎和屏幕閱讀器等機器使用：<\/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>標籤之間包含的所有元素都很重要，但最終用戶看不到——除了<code><title><\/code>文本，它將出現(xiàn)在在線搜索和瀏覽器標籤中。 <\/p><p><strong>如何在HTML中使用標籤<\/strong><\/p>\n<p><code><body><\/code>部分包含在瀏覽器中顯示的所有內(nèi)容——例如文本、圖像等等。如果您想向最終用戶展示某些內(nèi)容，請確保將其放在打開和關閉<code><body><\/code>…<code><\/body><\/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><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>元素理想情況下應包含<code>lang<\/code>屬性，如上面的代碼所示（<code><html lang=\"en\"><\/code>）。其主要目的是告訴屏幕閱讀器等輔助技術在朗讀時如何發(fā)音。（此屬性對於頁面驗證不是必需的，但如果您不包含它，大多數(shù)驗證器會發(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>部分的第一行是定義文檔字符編碼的行。我們在網(wǎng)頁上閱讀的字母和符號被定義為一系列數(shù)字，有些字符（如字母）以多種方式編碼。因此，告訴您的計算機您的網(wǎng)頁應該參考哪個編碼很有用。指示字符編碼是一個可選功能，不會在驗證器中導致任何警告，但對於大多數(shù)HTML頁面來說，它是推薦的：<\/p>\n<pre class='brush:php;toolbar:false;'><!DOCTYPE html><\/pre>\n<p><em>注意：為了確保某些舊版瀏覽器正確讀取字符編碼，整個字符編碼聲明必須包含在文檔的前512個字符中的某處。它也應該出現(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>都是您應該在文檔中使用的值。此編碼涵蓋了其他編碼中未包含的各種字符。您可能在Web上遇到過奇怪的字符——例如?——這顯然是一個錯誤。這通常是因為瀏覽器無法在文檔中指定的字符集中找到預期的字符。 <\/p>\n<p>UTF-8涵蓋了各種字符，包括全球各種語言的許多字符，以及許多有用的符號。正如萬維網(wǎng)聯(lián)盟所解釋的那樣：<\/p>\n<blockquote>\n<p>基於Unicode的編碼（如UTF-8）可以支持多種語言，並且可以適應任何語言混合的頁面和表單。它的使用還可以消除服務器端邏輯，從而單獨確定為每個服務頁面或每個傳入表單提交的字符編碼。這大大降低了處理多語言網(wǎng)站或應用程序的複雜性。 <\/p><\/blockquote>\n<p>字符編碼的完整解釋超出了本文的範圍，但如果您想更深入地研究，您可以閱讀HTML規(guī)範中的字符編碼。 <\/p>\n<p><strong><code>X-UA-Compatible<\/code>是什麼意思？ <\/strong><\/p>\n<p>您有時會在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>此元標記允許Web作者選擇應呈現(xiàn)頁面的Internet Explorer版本?，F(xiàn)在Internet Explorer在很大程度上只是一個糟糕的回憶，您可以安全地將此行從代碼中刪除。（我們已將其從HTML5模板中刪除。）如果您確定您的網(wǎng)頁可能會在舊版本的IE中查看，那麼可能值得包含它。您可以在Microsoft網(wǎng)站上閱讀更多關於此元標記的信息。 <\/p>\n<p><strong>視口元元素<\/strong><\/p>\n<p>視口元元素是您幾乎在每個HTML5模板中都會看到的特性。它對於響應式Web設計和移動優(yōu)先設計非常重要：<\/p>\n<pre class='brush:php;toolbar:false;'><!DOCTYPE html><\/pre>\n<p>此<code><meta><\/code>元素包含兩個作為名稱\/值集一起工作的屬性。在這種情況下，名稱設置為<code>viewport<\/code>，值為<code>width=device-width, initial-scale=1<\/code>。這僅供移動設備使用。您會注意到該值有兩個部分：<\/p>\n<ul>\n<li><code>width=device-width<\/code>：您希望網(wǎng)站呈現(xiàn)的視口的像素寬度。 <\/li>\n<li><code>initial-scale<\/code>：這應該是一個介於0.0和10.0之間的正數(shù)。 “1”的值表示設備寬度和視口大小之間存在1:1的比率。 <\/li>\n<\/ul>\n<p>您可以在MDN上閱讀更多關於這些元元素特性的信息，但現(xiàn)在只要知道，在大多數(shù)情況下，此元元素及其設置最適合移動優(yōu)先的響應式網(wǎng)站。 <\/p>\n<p><strong><code><title><\/code>、描述和作者<\/strong><\/p>\n<p>HTML基礎模板的下一部分包含以下三行：<\/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>是在瀏覽器標題欄中顯示的內(nèi)容（例如，當您將鼠標懸停在瀏覽器選項卡上時），它也顯示在搜索結果中。此元素是<code><head><\/code>部分中唯一必需的元素。描述和作者元元素是可選的，但它們確實為搜索引擎提供了重要信息。在搜索結果中，上面代碼示例中的標題和描述將如下所示。 <\/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>如上所述，所有元元素都是可選的，但許多元元素對SEO和社交媒體營銷都有好處。 HTML5模板的下一部分包含其中一些元元素選項：<\/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元選項的完整列表。 <\/p><p>這裡包含的那些元素將在鏈接到社交媒體帖子時增強網(wǎng)頁的外觀。例如，這裡包含的五個<code><meta><\/code>元素將出現(xiàn)在嵌入以下數(shù)據(jù)的社交卡片中：<\/p>\n<ul>\n<li>內(nèi)容的標題<\/li>\n<li>提供的內(nèi)容類型<\/li>\n<li>內(nèi)容的規(guī)範URL<\/li>\n<li>內(nèi)容的描述<\/li>\n<li>與內(nèi)容關聯(lián)的圖像<\/li>\n<\/ul>\n<p>當您看到在社交媒體上共享的帖子時，您通常會看到這些數(shù)據(jù)位會自動添加到社交媒體帖子中。例如，如果您包含指向GitHub主頁的鏈接，則會在推文中顯示以下內(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圖標<\/strong><\/p>\n<p>HTML5模板的下一部分包含<code><link><\/code>元素，這些元素指示要包含為favicon和Apple touch圖標的資源：<\/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>當有人查看您的網(wǎng)站時，favicon將出現(xiàn)在瀏覽器選項卡中。 <code>favicon.ico<\/code>文件用於舊版瀏覽器，不必包含在代碼中。只要您的<code>favicon.ico<\/code>文件包含在項目的根目錄中，瀏覽器就會自動找到它。 <code>favicon.svg<\/code>文件用於支持SVG圖標的現(xiàn)代瀏覽器。您也可以使用.png文件代替。 <\/p>\n<p>最後一個元素引用在將頁面添加到用戶的家庭屏幕時在Apple設備上使用的圖標。 <\/p>\n<p>您可以在這裡包含其他選項，包括引用其他圖標的Web應用程序清單文件。有關完整的討論，我們建議您閱讀Andrey Sitnik關於此主題的文章。但是這裡包含的那些對於簡單的HTML入門模板就足夠了。 <\/p>\n<p><strong>包含CSS樣式表和JavaScript文件<\/strong><\/p>\n<p>HTML入門模板的最後兩個重要部分是對一個或多個樣式表以及可能還有JavaScript文件的引用。當然，兩者都是可選的，儘管很少有網(wǎng)站沒有至少一些CSS樣式。 <\/p>\n<h3>在HTML模板中包含CSS樣式表<\/h3>\n<p>樣式表可以包含在文檔中的任何位置，但您通常會在<code><head><\/code>部分看到它：<\/p>\n<pre class='brush:php;toolbar:false;'><!DOCTYPE html><\/pre>\n<p><code><link><\/code>元素將Web瀏覽器指向外部樣式表，以便它可以將這些CSS樣式應用於頁面。 <code><link><\/code>元素需要<code>rel<\/code>屬性為<code>stylesheet<\/code>。過去，通常還會包含<code>type<\/code>屬性，但實際上它從未真正需要，因此如果您在Web上找到包含它的舊代碼，只需將其刪除即可。 <\/p>\n<p>請注意，我們在CSS鏈接的末尾添加了<code>?v=1.0<\/code>查詢字符串。這是完全可選的。當您更新樣式表以更新此查詢字符串（例如，更新為1.1或2.0）時，這是一個方便的技巧，因為這樣做可以確保瀏覽器會丟棄任何舊的、緩存的CSS文件副本並加載新的版本。 <\/p><p>值得注意的是，您不必使用<code><link><\/code>元素來在網(wǎng)頁上包含CSS，因為您可以改為將所有樣式放在頁面本身的<code><style><\/code>…<code><\/style><\/code>標籤內(nèi)，位於<code><head><\/code>部分。這在試驗佈局時非常方便，但通常不建議在活動站點上這樣做，因為這些樣式在其他頁面上將不可訪問，從而導致低效和\/或重複的代碼。 <\/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>標籤內(nèi)來嵌入腳本：<strong>\n<\/strong>\n<\/p><p>關於舊版瀏覽器和新元素的說明<code><article><\/code><code><aside><\/code>\n<code><recipe><\/code>當HTML5引入時，它包含許多新元素，例如<code><ziggy><\/code>和<\/aside>。您可能會認為對未識別元素的支持對於舊版瀏覽器來說是一個主要問題——但事實並非如此！大多數(shù)瀏覽器實際上並不關心您使用什麼標籤。如果您有一個HTML文檔，其中包含<\/article>元素（甚至<\/ziggy>元素），並且您的CSS將某些樣式附加到該元素，幾乎每個瀏覽器都會像這完全正常一樣進行處理，而不會抱怨地應用您的樣式。 <\/recipe><\/p><p><\/p><p>\n<\/p>當然，這樣的假設文檔將無法驗證，並且可能存在可訪問性問題，但它會在幾乎所有瀏覽器中正確呈現(xiàn)——例外情況是舊版本的Internet Explorer (IE)。在第9版之前，IE阻止未識別的元素接收樣式。渲染引擎將這些神秘元素視為“未知元素”，因此您無法更改它們的外觀或行為。這不僅包括我們想像的元素，還包括在開發(fā)這些瀏覽器版本時尚未定義的任何元素，包括新的HTML5元素。 <p>\n<em>幸運的是，不支持新元素樣式的舊版瀏覽器如今幾乎不存在，因此您幾乎可以在任何項目中安全地使用任何新HTML元素而無需擔心。 <\/em>\n<\/p>也就是說，如果您<p>確實<strong>需要支持古老的瀏覽器，您仍然可以使用可靠的HTML5 Shiv，這是一個最初由John Resig開發(fā)的簡單的JavaScript片段。它受到Sjoerd Visscher作品的啟發(fā)，它使新HTML5元素在舊版本的IE中可設置樣式。不過，實際上，今天不需要這樣做。正如caniuse.com所示，HTML5元素在所有正在使用的瀏覽器中都受支持。 <\/strong>\n<\/p><p>完整的HTML5模板<\/p><pre class='brush:php;toolbar:false;'><!DOCTYPE html><\/pre>\n<p>這是我們最終的HTML5模板——一個您可以用於任何項目的簡單模板：<code><body><\/code>\n<code><\/body><\/code>\n<\/p>您可以將這個簡單易用的HTML5模板代碼放到今天的任何項目中！在此基礎上，您可以在<p>和<strong>標籤之間添加任何您想要的內(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="377j5v51b" class="head"> <div id="377j5v51b" class="haed_left"> <div id="377j5v51b" class="haed_logo"> <a href="http://miracleart.cn/zh-tw/" title="" class="haed_logo_a"> <img src="/static/imghw/logo.png" alt="" class="haed_logoimg"> </a> </div> <div id="377j5v51b" class="head_nav"> <div id="377j5v51b" class="head_navs"> <a href="javascript:;" title="社群" class="head_nava head_nava-template1">社群</a> <div class="377j5v51b" id="dropdown-template1" style="display: none;"> <div id="377j5v51b" class="languagechoose"> <a href="http://miracleart.cn/zh-tw/article.html" title="文章" class="languagechoosea on">文章</a> <a href="http://miracleart.cn/zh-tw/faq/zt" title="合集" class="languagechoosea">合集</a> <a href="http://miracleart.cn/zh-tw/wenda.html" title="問答" class="languagechoosea">問答</a> </div> </div> </div> <div id="377j5v51b" class="head_navs"> <a href="javascript:;" title="學習" class="head_nava head_nava-template1_1">學習</a> <div class="377j5v51b" id="dropdown-template1_1" style="display: none;"> <div id="377j5v51b" class="languagechoose"> <a href="http://miracleart.cn/zh-tw/course.html" title="課程" class="languagechoosea on">課程</a> <a href="http://miracleart.cn/zh-tw/dic/" title="程式設計字典" class="languagechoosea">程式設計字典</a> </div> </div> </div> <div id="377j5v51b" class="head_navs"> <a href="javascript:;" title="工具庫" class="head_nava head_nava-template1_2">工具庫</a> <div class="377j5v51b" id="dropdown-template1_2" style="display: none;"> <div id="377j5v51b" class="languagechoose"> <a href="http://miracleart.cn/zh-tw/toolset/development-tools" title="開發(fā)工具" class="languagechoosea on">開發(fā)工具</a> <a href="http://miracleart.cn/zh-tw/toolset/website-source-code" title="網(wǎng)站源碼" class="languagechoosea">網(wǎng)站源碼</a> <a href="http://miracleart.cn/zh-tw/toolset/php-libraries" title="PHP 函式庫" class="languagechoosea">PHP 函式庫</a> <a href="http://miracleart.cn/zh-tw/toolset/js-special-effects" title="JS特效" class="languagechoosea on">JS特效</a> <a href="http://miracleart.cn/zh-tw/toolset/website-materials" title="網(wǎng)站素材" class="languagechoosea on">網(wǎng)站素材</a> <a href="http://miracleart.cn/zh-tw/toolset/extension-plug-ins" title="擴充插件" class="languagechoosea on">擴充插件</a> </div> </div> </div> <div id="377j5v51b" class="head_navs"> <a href="http://miracleart.cn/zh-tw/ai" title="AI工具" class="head_nava head_nava-template1_3">AI工具</a> </div> <div id="377j5v51b" class="head_navs"> <a href="javascript:;" title="休閒" class="head_nava head_nava-template1_3">休閒</a> <div class="377j5v51b" id="dropdown-template1_3" style="display: none;"> <div id="377j5v51b" class="languagechoose"> <a href="http://miracleart.cn/zh-tw/game" title="遊戲下載" class="languagechoosea on">遊戲下載</a> <a href="http://miracleart.cn/zh-tw/mobile-game-tutorial/" title="遊戲教程" class="languagechoosea">遊戲教程</a> </div> </div> </div> </div> </div> <div id="377j5v51b" 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="377j5v51b" class="head_right"> <div id="377j5v51b" class="haed_language"> <a href="javascript:;" class="layui-btn haed_language_btn">繁體中文<i class="layui-icon layui-icon-triangle-d"></i></a> <div class="377j5v51b" id="dropdown-template" style="display: none;"> <div id="377j5v51b" class="languagechoose"> <a href="javascript:setlang('zh-cn');" title="簡體中文" class="languagechoosea">簡體中文</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="377j5v51b" 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="377j5v51b" class="Article_Details_main"> <div id="377j5v51b" class="Article_Details_main1"> <div id="377j5v51b" class="Article_Details_main1L"> <div id="377j5v51b" class="Article_Details_main1Lmain" id="Article_Details_main1Lmain"> <div id="377j5v51b" class="Article_Details_main1L1">目錄</div> <div id="377j5v51b" class="Article_Details_main1L2" id="Article_Details_main1L2">  <div id="377j5v51b" class="Article_Details_main1L2s "> <a href="#為什麼在HTML-模板中使用UTF-字符編碼" title="為什麼在HTML5模板中使用UTF-8字符編碼？ " >為什麼在HTML5模板中使用UTF-8字符編碼？ </a> </div> <div id="377j5v51b" class="Article_Details_main1L2s "> <a href="#在HTML模板中包含CSS樣式表" title="在HTML模板中包含CSS樣式表" >在HTML模板中包含CSS樣式表</a> </div> <div id="377j5v51b" class="Article_Details_main1L2s "> <a href="#在HTML模板中包含JavaScript文件" title="在HTML模板中包含JavaScript文件" >在HTML模板中包含JavaScript文件</a> </div> <div id="377j5v51b" class="Article_Details_main1L2s "> <a href="#什麼是HTML中的模板" title="什麼是HTML中的模板？ " >什麼是HTML中的模板？ </a> </div> <div id="377j5v51b" class="Article_Details_main1L2s "> <a href="#模板是模板嗎" title="模板是模板嗎？ " >模板是模板嗎？ </a> </div> <div id="377j5v51b" class="Article_Details_main1L2s "> <a href="#如何在HTML中創(chuàng)建模板" title="如何在HTML中創(chuàng)建模板？ " >如何在HTML中創(chuàng)建模板？ </a> </div> <div id="377j5v51b" class="Article_Details_main1L2s "> <a href="#HTML-模板用於什麼" title="HTML5模板用於什麼？ " >HTML5模板用於什麼？ </a> </div> <div id="377j5v51b" class="Article_Details_main1L2s "> <a href="#模板示例是什麼" title="模板示例是什麼？ " >模板示例是什麼？ </a> </div> <div id="377j5v51b" class="Article_Details_main1L2s "> <a href="#HTML的起始代碼是什麼" title="HTML的起始代碼是什麼？ " >HTML的起始代碼是什麼？ </a> </div> <div id="377j5v51b" class="Article_Details_main1L2s "> <a href="#每個HTML文件都需要模板嗎" title="每個HTML文件都需要模板嗎？ " >每個HTML文件都需要模板嗎？ </a> </div> </div> </div> </div> <div id="377j5v51b" class="Article_Details_main1M"> <div id="377j5v51b" class="phpgenera_Details_mainL1"> <a href="http://miracleart.cn/zh-tw/" title="首頁" class="phpgenera_Details_mainL1a">首頁</a> <img src="/static/imghw/top_right.png" alt="" /> <a href="http://miracleart.cn/zh-tw/web-designer.html" class="phpgenera_Details_mainL1a">web前端</a> <img src="/static/imghw/top_right.png" alt="" /> <a href="http://miracleart.cn/zh-tw/css-tutorial.html" class="phpgenera_Details_mainL1a">css教學</a> <img src="/static/imghw/top_right.png" alt="" /> <span>HTML5模板：任何項目的基本入門HTML樣板</span> </div> <div id="377j5v51b" class="Articlelist_txts"> <div id="377j5v51b" class="Articlelist_txts_info"> <h1 class="Articlelist_txts_title">HTML5模板：任何項目的基本入門HTML樣板</h1> <div id="377j5v51b" class="Articlelist_txts_info_head"> <div id="377j5v51b" class="author_info"> <a href="http://miracleart.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="377j5v51b" class="author_detail"> <a href="http://miracleart.cn/zh-tw/member/1468495.html" class="author_name">Joseph Gordon-Levitt</a> </div> </div> </div> <span id="377j5v51b" class="Articlelist_txts_time">Feb 08, 2025 am 08:50 AM</span> </div> </div> <hr /> <div id="377j5v51b" class="article_main php-article"> <div id="377j5v51b" 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>構建你自己的HTML5模板：一份簡明指南</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>本文將指導您如何創(chuàng)建自己的HTML5模板。我們將逐步講解HTML基礎模板的關鍵要素，最終提供一個您可以拿來使用並進一步構建的簡單模板。 </p> <p>閱讀完本文後，您將擁有自己的HTML5模板。如果您想現(xiàn)在就獲取HTML模板代碼，稍後再閱讀本文，這裡提供我們最終完成的HTML5模板。 </p> <p><strong>關鍵要點</strong></p> <ul> <li>HTML5模板作為可重用的模板，包含必要的HTML元素，有助於避免在每個項目開始時重複編寫代碼。 </li> <li>一個基本的HTML5模板應包含文檔類型聲明、帶有語言屬性的<code></code>元素、通過<code><meta charset="utf-8"></code>的字符編碼以及用於響應式設計的視口設置。 </li> <li>HTML5模板<code></code>部分的關鍵元素通常包含用於SEO的元數(shù)據(jù)、CSS樣式表的鏈接以及可選的JavaScript文件。 </li> <li>為了進行社交媒體優(yōu)化，加入Open Graph元標記可以增強內(nèi)容在社交平臺上共享時的顯示效果。 </li> <li>在模板中包含favicon和Apple touch圖標有助於建立品牌標識並改善跨設備的用戶體驗。 </li> <li>將JavaScript文件放在閉合的<code></code>標籤之前可以提高頁面加載速度，因為它允許瀏覽器通過延遲加載腳本更快地呈現(xiàn)頁面。 </li> </ul> <p><strong>什麼是HTML模板？ </strong></p> <p>每個網(wǎng)站都不同，但從一個網(wǎng)站到另一個網(wǎng)站，許多東西基本上是相同的。與其一遍遍地編寫相同的代碼，不如創(chuàng)建一個自己的“模板”。模板是一個每次啟動項目時都會用到的模板，可以避免您從頭開始。 </p> <p>維基百科將模板描述為：</p> <blockquote> <p>代碼片段在多個地方重複出現(xiàn)，幾乎沒有變化。 </p> </blockquote> <p>隨著您學習HTML5並將新技術添加到您的工具箱中，您可能希望為自己構建一個HTML模板來啟動所有未來的項目。這絕對值得去做，並且網(wǎng)上有很多起點可以幫助您構建自己的HTML5模板。 </p> <p><strong>一個非常簡單的HTML5模板示例</strong></p> <p>本文末尾提供的完整模板包含很多內(nèi)容。但是，您不必做得那麼花哨——尤其是在您剛開始學習的時候。這是一個非常簡單的“入門”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>如果您將上面的代碼粘貼到一個.html文件中，您將擁有一個網(wǎng)頁！這個基本的HTML5模板包含下一節(jié)中列出的一些元素，以及一個將在您的網(wǎng)絡瀏覽器中顯示的簡單標題元素。 </p> <p>讓我們更詳細地了解一下它的結構。 </p> <p><strong>HTML5模板的結構</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圖標</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只是告訴瀏覽器或任何其他解析器它正在查看什麼類型的文檔的一種方式。對於HTML文件，這意味著HTML的特定版本和類型。 doctype應該始終是任何HTML文件頂部的第一項。許多年前，doctype聲明是一個難看且難以記住的混亂，通常指定為“XHTML Strict”或“HTML Transitional”。 </p> <p>隨著HTML5的出現(xiàn)，那些難以理解的令人討厭的東西消失了，現(xiàn)在您只需要這個：</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>簡單明了。 “5”從聲明中明顯消失了。儘管當前版本的Web標記被稱為“HTML5”，但它實際上只是先前HTML標準的演變——未來的規(guī)範將只是我們今天所擁有的發(fā)展。永遠不會有“HTML6”，因此通常將當前狀態(tài)的Web標記簡單地稱為“HTML”。 </p> <p>因為瀏覽器需要支持Web上的舊內(nèi)容，所以不依賴doctype來告訴瀏覽器在給定文檔中應支持哪些功能。換句話說，僅僅是doctype並不會使您的頁面符合現(xiàn)代HTML功能。實際上，無論使用哪種doctype，瀏覽器都將逐個案例確定功能支持。事實上，您可以將舊的doctype與頁面上的新HTML5元素一起使用，並且頁面的呈現(xiàn)方式與使用新doctype時相同。 </p> <p><strong><code><html></code>元素</strong></p> <p><code><html></code>元素是HTML文件中的頂級元素——這意味著它包含文檔中除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中使用標籤</strong></p> <p><code><head></code>部分包含有關文檔的重要信息，這些信息不會顯示給最終用戶——例如字符編碼以及CSS文件的鏈接，可能還有JavaScript文件。這些信息由瀏覽器、搜索引擎和屏幕閱讀器等機器使用：</p> <pre class='brush:php;toolbar:false;'><html lang="en"> <head> </head> <body> </body> </html></pre> <p>上面<code><head></code>…<code></head></code>標籤之間包含的所有元素都很重要，但最終用戶看不到——除了<code><title></code>文本，它將出現(xiàn)在在線搜索和瀏覽器標籤中。 </p><p><strong>如何在HTML中使用標籤</strong></p> <p><code><body></code>部分包含在瀏覽器中顯示的所有內(nèi)容——例如文本、圖像等等。如果您想向最終用戶展示某些內(nèi)容，請確保將其放在打開和關閉<code><body></code>…<code></body></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><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>元素理想情況下應包含<code>lang</code>屬性，如上面的代碼所示（<code><html lang="en"></code>）。其主要目的是告訴屏幕閱讀器等輔助技術在朗讀時如何發(fā)音。（此屬性對於頁面驗證不是必需的，但如果您不包含它，大多數(shù)驗證器會發(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>部分的第一行是定義文檔字符編碼的行。我們在網(wǎng)頁上閱讀的字母和符號被定義為一系列數(shù)字，有些字符（如字母）以多種方式編碼。因此，告訴您的計算機您的網(wǎng)頁應該參考哪個編碼很有用。指示字符編碼是一個可選功能，不會在驗證器中導致任何警告，但對於大多數(shù)HTML頁面來說，它是推薦的：</p> <pre class='brush:php;toolbar:false;'><!DOCTYPE html></pre> <p><em>注意：為了確保某些舊版瀏覽器正確讀取字符編碼，整個字符編碼聲明必須包含在文檔的前512個字符中的某處。它也應該出現(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>都是您應該在文檔中使用的值。此編碼涵蓋了其他編碼中未包含的各種字符。您可能在Web上遇到過奇怪的字符——例如?——這顯然是一個錯誤。這通常是因為瀏覽器無法在文檔中指定的字符集中找到預期的字符。 </p> <p>UTF-8涵蓋了各種字符，包括全球各種語言的許多字符，以及許多有用的符號。正如萬維網(wǎng)聯(lián)盟所解釋的那樣：</p> <blockquote> <p>基於Unicode的編碼（如UTF-8）可以支持多種語言，並且可以適應任何語言混合的頁面和表單。它的使用還可以消除服務器端邏輯，從而單獨確定為每個服務頁面或每個傳入表單提交的字符編碼。這大大降低了處理多語言網(wǎng)站或應用程序的複雜性。 </p></blockquote> <p>字符編碼的完整解釋超出了本文的範圍，但如果您想更深入地研究，您可以閱讀HTML規(guī)範中的字符編碼。 </p> <p><strong><code>X-UA-Compatible</code>是什麼意思？ </strong></p> <p>您有時會在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>此元標記允許Web作者選擇應呈現(xiàn)頁面的Internet Explorer版本?，F(xiàn)在Internet Explorer在很大程度上只是一個糟糕的回憶，您可以安全地將此行從代碼中刪除。（我們已將其從HTML5模板中刪除。）如果您確定您的網(wǎng)頁可能會在舊版本的IE中查看，那麼可能值得包含它。您可以在Microsoft網(wǎng)站上閱讀更多關於此元標記的信息。 </p> <p><strong>視口元元素</strong></p> <p>視口元元素是您幾乎在每個HTML5模板中都會看到的特性。它對於響應式Web設計和移動優(yōu)先設計非常重要：</p> <pre class='brush:php;toolbar:false;'><!DOCTYPE html></pre> <p>此<code><meta></code>元素包含兩個作為名稱/值集一起工作的屬性。在這種情況下，名稱設置為<code>viewport</code>，值為<code>width=device-width, initial-scale=1</code>。這僅供移動設備使用。您會注意到該值有兩個部分：</p> <ul> <li><code>width=device-width</code>：您希望網(wǎng)站呈現(xiàn)的視口的像素寬度。 </li> <li><code>initial-scale</code>：這應該是一個介於0.0和10.0之間的正數(shù)。 “1”的值表示設備寬度和視口大小之間存在1:1的比率。 </li> </ul> <p>您可以在MDN上閱讀更多關於這些元元素特性的信息，但現(xiàn)在只要知道，在大多數(shù)情況下，此元元素及其設置最適合移動優(yōu)先的響應式網(wǎng)站。 </p> <p><strong><code><title></code>、描述和作者</strong></p> <p>HTML基礎模板的下一部分包含以下三行：</p> <pre class='brush:php;toolbar:false;'><html lang="en"> <head> </head> <body> </body> </html></pre> <p><code><title></code>是在瀏覽器標題欄中顯示的內(nèi)容（例如，當您將鼠標懸停在瀏覽器選項卡上時），它也顯示在搜索結果中。此元素是<code><head></code>部分中唯一必需的元素。描述和作者元元素是可選的，但它們確實為搜索引擎提供了重要信息。在搜索結果中，上面代碼示例中的標題和描述將如下所示。 </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>如上所述，所有元元素都是可選的，但許多元元素對SEO和社交媒體營銷都有好處。 HTML5模板的下一部分包含其中一些元元素選項：</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元選項的完整列表。 </p><p>這裡包含的那些元素將在鏈接到社交媒體帖子時增強網(wǎng)頁的外觀。例如，這裡包含的五個<code><meta></code>元素將出現(xiàn)在嵌入以下數(shù)據(jù)的社交卡片中：</p> <ul> <li>內(nèi)容的標題</li> <li>提供的內(nèi)容類型</li> <li>內(nèi)容的規(guī)範URL</li> <li>內(nèi)容的描述</li> <li>與內(nèi)容關聯(lián)的圖像</li> </ul> <p>當您看到在社交媒體上共享的帖子時，您通常會看到這些數(shù)據(jù)位會自動添加到社交媒體帖子中。例如，如果您包含指向GitHub主頁的鏈接，則會在推文中顯示以下內(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圖標</strong></p> <p>HTML5模板的下一部分包含<code><link></code>元素，這些元素指示要包含為favicon和Apple touch圖標的資源：</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>當有人查看您的網(wǎng)站時，favicon將出現(xiàn)在瀏覽器選項卡中。 <code>favicon.ico</code>文件用於舊版瀏覽器，不必包含在代碼中。只要您的<code>favicon.ico</code>文件包含在項目的根目錄中，瀏覽器就會自動找到它。 <code>favicon.svg</code>文件用於支持SVG圖標的現(xiàn)代瀏覽器。您也可以使用.png文件代替。 </p> <p>最後一個元素引用在將頁面添加到用戶的家庭屏幕時在Apple設備上使用的圖標。 </p> <p>您可以在這裡包含其他選項，包括引用其他圖標的Web應用程序清單文件。有關完整的討論，我們建議您閱讀Andrey Sitnik關於此主題的文章。但是這裡包含的那些對於簡單的HTML入門模板就足夠了。 </p> <p><strong>包含CSS樣式表和JavaScript文件</strong></p> <p>HTML入門模板的最後兩個重要部分是對一個或多個樣式表以及可能還有JavaScript文件的引用。當然，兩者都是可選的，儘管很少有網(wǎng)站沒有至少一些CSS樣式。 </p> <h3 id="在HTML模板中包含CSS樣式表">在HTML模板中包含CSS樣式表</h3> <p>樣式表可以包含在文檔中的任何位置，但您通常會在<code><head></code>部分看到它：</p> <pre class='brush:php;toolbar:false;'><!DOCTYPE html></pre> <p><code><link></code>元素將Web瀏覽器指向外部樣式表，以便它可以將這些CSS樣式應用於頁面。 <code><link></code>元素需要<code>rel</code>屬性為<code>stylesheet</code>。過去，通常還會包含<code>type</code>屬性，但實際上它從未真正需要，因此如果您在Web上找到包含它的舊代碼，只需將其刪除即可。 </p> <p>請注意，我們在CSS鏈接的末尾添加了<code>?v=1.0</code>查詢字符串。這是完全可選的。當您更新樣式表以更新此查詢字符串（例如，更新為1.1或2.0）時，這是一個方便的技巧，因為這樣做可以確保瀏覽器會丟棄任何舊的、緩存的CSS文件副本並加載新的版本。 </p><p>值得注意的是，您不必使用<code><link></code>元素來在網(wǎng)頁上包含CSS，因為您可以改為將所有樣式放在頁面本身的<code><style></code>…<code></style></code>標籤內(nèi)，位於<code><head></code>部分。這在試驗佈局時非常方便，但通常不建議在活動站點上這樣做，因為這些樣式在其他頁面上將不可訪問，從而導致低效和/或重複的代碼。 </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>標籤內(nèi)來嵌入腳本：<strong> </strong> </p><p>關於舊版瀏覽器和新元素的說明<code><article></code><code><aside></code> <code><recipe></code>當HTML5引入時，它包含許多新元素，例如<code><ziggy></code>和</aside>。您可能會認為對未識別元素的支持對於舊版瀏覽器來說是一個主要問題——但事實並非如此！大多數(shù)瀏覽器實際上並不關心您使用什麼標籤。如果您有一個HTML文檔，其中包含</article>元素（甚至</ziggy>元素），並且您的CSS將某些樣式附加到該元素，幾乎每個瀏覽器都會像這完全正常一樣進行處理，而不會抱怨地應用您的樣式。 </recipe></p><p></p><p> </p>當然，這樣的假設文檔將無法驗證，並且可能存在可訪問性問題，但它會在幾乎所有瀏覽器中正確呈現(xiàn)——例外情況是舊版本的Internet Explorer (IE)。在第9版之前，IE阻止未識別的元素接收樣式。渲染引擎將這些神秘元素視為“未知元素”，因此您無法更改它們的外觀或行為。這不僅包括我們想像的元素，還包括在開發(fā)這些瀏覽器版本時尚未定義的任何元素，包括新的HTML5元素。 <p> <em>幸運的是，不支持新元素樣式的舊版瀏覽器如今幾乎不存在，因此您幾乎可以在任何項目中安全地使用任何新HTML元素而無需擔心。 </em> </p>也就是說，如果您<p>確實<strong>需要支持古老的瀏覽器，您仍然可以使用可靠的HTML5 Shiv，這是一個最初由John Resig開發(fā)的簡單的JavaScript片段。它受到Sjoerd Visscher作品的啟發(fā)，它使新HTML5元素在舊版本的IE中可設置樣式。不過，實際上，今天不需要這樣做。正如caniuse.com所示，HTML5元素在所有正在使用的瀏覽器中都受支持。 </strong> </p><p>完整的HTML5模板</p><pre class='brush:php;toolbar:false;'><!DOCTYPE html></pre> <p>這是我們最終的HTML5模板——一個您可以用於任何項目的簡單模板：<code><body></code> <code></body></code> </p>您可以將這個簡單易用的HTML5模板代碼放到今天的任何項目中！在此基礎上，您可以在<p>和<strong>標籤之間添加任何您想要的內(nèi)容。 </strong> </p>結論<script></code>元素添加到HTML頁面。此元素的<code>src</code>屬性提供指向JavaScript文件的鏈接。您可以從HTML模板中的任何位置鏈接到JavaScript文件。您經(jīng)常會在<code><head></code>部分看到它們，但作為一般規(guī)則，最好將它們放在文檔的底部，就在閉合的<code></body></code>標簽之前：</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文件以及許多您可以隨意使用和修改的預寫內(nèi)容。這不是我們的目標。我們在這裡提供的基本模板包含設計任何網(wǎng)頁時可能需要的所有內(nèi)容，這樣您就不必每次都從頭開始。 </p> <p>隨意複製我們在開頭顯示的基本HTML頁面模板，或上面顯示的完整模板，並在您的項目中使用它們。隨著時間的推移，您可能會發(fā)現(xiàn)有些內(nèi)容您並不經(jīng)常需要，而我們這裡沒有提到的一些內(nèi)容您經(jīng)常使用，因此您可以更新您的模板以適應您的工作流程。 </p> <p><strong>後續(xù)步驟</strong></p> <p>將您的網(wǎng)頁佈局提升到一個新水平的一個好方法是使用《美麗的網(wǎng)頁設計原則，第四版》。本書將教您設計原則<em>以及</em>向您展示如何在Web上實現(xiàn)它們。它在2020年9月進行了完全改寫，並包含您在其他任何地方都未曾讀到的尖端技術。 </p> <p>為了磨練您的CSS知識，我們的現(xiàn)代CSS項目課程將幫助您掌握CSS3的最新高級版本。 </p> <p>除此之外，您可以通過交互性和程序化、反應式UI將您的網(wǎng)站或Web應用程序開發(fā)提升到一個新的水平。例如，查看SitePoint關於JavaScript和React的大量資源。並了解如何使用我們關於最佳腳手架Web工具和庫的指南來更快地啟動新項目?；蛘?，如果您想在不學習編碼的情況下構建Web體驗，請閱讀我們關於無代碼運動的入門指南。最新的無代碼工具改變了遊戲規(guī)則。他們第一次擁有足夠的強大功能，可以在許多情況下為編碼提供一個強大的替代方案。 </p> <p><strong>HTML5模板常見問題解答</strong></p> <p>最後，我們將回答關於HTML5模板代碼的常見問題。 </p> <h3 id="什麼是HTML中的模板">什麼是HTML中的模板？ </h3> <p>模板是一個HTML頁面模板，每次啟動項目時都會使用它，從而避免從頭開始。它包括常見的元素，例如文檔類型聲明和出現(xiàn)在每個網(wǎng)頁上的基本HTML元素。 </p> <h3 id="模板是模板嗎">模板是模板嗎？ </h3> <p>是的。模板是一個非常簡單的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)在每個網(wǎng)頁上的最基本元素之外的所有內(nèi)容?；蛘吣梢垣@取我們現(xiàn)成的HTML5模板並將其粘貼到.html文件中，然後您就可以開始了！ </p><h3 id="HTML-模板用於什麼">HTML5模板用於什麼？ </h3> <p>在設計網(wǎng)頁時，沒有什麼比從空白的.html頁面開始並不得不從頭開始編寫所有枯燥的代碼更糟糕的了。我們的HTML5模板為您提供了開始運行所需的所有HTML模板代碼，以便您可以立即開始處理您的獨特設計和內(nèi)容。 </p> <h3 id="模板示例是什麼">模板示例是什麼？ </h3> <p>網(wǎng)上有很多HTML5模板示例。隨著時間的推移，您可能會根據(jù)自己編寫HTML的方式創(chuàng)建自己的模板。我們的HTML5模板示例提供了大多數(shù)網(wǎng)頁上所需的所有基本元素。 </p> <p>作為一個非常簡單的開始，您可以只使用這個：</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>標籤，其中包含網(wǎng)頁上的所有其他內(nèi)容。 <code></code>的兩個子元素是<code></code>和<code></code>元素。我們的HTML5模板包含任何網(wǎng)頁所需的所有基本起始代碼。 </p> <h3 id="每個HTML文件都需要模板嗎">每個HTML文件都需要模板嗎？ </h3> <p>理想情況下，是的。 HTML模板提供了HTML頁面在Web瀏覽器中執(zhí)行任何有用操作的最小代碼量。您可以在網(wǎng)站的每個頁面上使用HTML模板代碼。通常，模板的公共元素將從單個源（例如框架或包含文件）注入您的頁面，以便您可以一次更新所有頁面的模板。我們的HTML5模板提供了開始所需的所有HTML模板代碼。 </p><p>以上是HTML5模板：任何項目的基本入門HTML樣板的詳細內(nèi)容。更多資訊請關注PHP中文網(wǎng)其他相關文章！</p> </div> </div> <div id="377j5v51b" class="wzconShengming_sp"> <div id="377j5v51b" class="bzsmdiv_sp">本網(wǎng)站聲明</div> <div>本文內(nèi)容由網(wǎng)友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發(fā)現(xiàn)涉嫌抄襲或侵權的內(nèi)容，請聯(lián)絡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="377j5v51b" 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="377j5v51b" class="phpgenera_Details_mainR3"> <div id="377j5v51b" class="phpmain1_4R_readrank"> <div id="377j5v51b" 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="377j5v51b" class="phpgenera_Details_mainR3_bottom"> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://miracleart.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="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://miracleart.cn/zh-tw/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title"> <h3>Undress AI Tool</h3> </a> <p>免費脫衣圖片</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://miracleart.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="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://miracleart.cn/zh-tw/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title"> <h3>Undresser.AI Undress</h3> </a> <p>人工智慧驅(qū)動的應用程序，用於創(chuàng)建逼真的裸體照片</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://miracleart.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="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://miracleart.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="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://miracleart.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="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://miracleart.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="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://miracleart.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="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://miracleart.cn/zh-tw/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title"> <h3>Video Face Swap</h3> </a> <p>使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！</p> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_more"> <a href="http://miracleart.cn/zh-tw/ai">顯示更多</a> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4"> <div id="377j5v51b" class="phpmain1_4R_readrank"> <div id="377j5v51b" 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="377j5v51b" class="phpgenera_Details_mainR4_bottom"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://miracleart.cn/zh-tw/faq/1796819578.html" title="如何修復KB5060533無法在Windows 10中安裝？" class="phpgenera_Details_mainR4_bottom_title">如何修復KB5060533無法在Windows 10中安裝？</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>4 週前</span> <span>By DDD</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://miracleart.cn/zh-tw/faq/1796819730.html" title="沙丘：覺醒 - 在哪裡獲得絕緣織物" class="phpgenera_Details_mainR4_bottom_title">沙丘：覺醒 - 在哪裡獲得絕緣織物</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>3 週前</span> <span>By Jack chen</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://miracleart.cn/zh-tw/faq/1796819016.html" title="Gmail登錄：如何註冊，登錄或登錄Gmail -Minitool" class="phpgenera_Details_mainR4_bottom_title">Gmail登錄：如何註冊，登錄或登錄Gmail -Minitool</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>1 個月前</span> <span>By Jack chen</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://miracleart.cn/zh-tw/faq/1796819994.html" title="如何修復KB5060999無法在Windows 11中安裝？" class="phpgenera_Details_mainR4_bottom_title">如何修復KB5060999無法在Windows 11中安裝？</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>3 週前</span> <span>By DDD</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://miracleart.cn/zh-tw/faq/1796819536.html" title="污染的公會指南：阿瓦隆的淪陷" class="phpgenera_Details_mainR4_bottom_title">污染的公會指南：阿瓦隆的淪陷</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>4 週前</span> <span>By Jack chen</span> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_more"> <a href="http://miracleart.cn/zh-tw/article.html">顯示更多</a> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3"> <div id="377j5v51b" class="phpmain1_4R_readrank"> <div id="377j5v51b" 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="377j5v51b" class="phpgenera_Details_mainR3_bottom"> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://miracleart.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="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://miracleart.cn/zh-tw/toolset/development-tools/92" title="記事本++7.3.1" class="phpmain_tab2_mids_title"> <h3>記事本++7.3.1</h3> </a> <p>好用且免費的程式碼編輯器</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://miracleart.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="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://miracleart.cn/zh-tw/toolset/development-tools/93" title="SublimeText3漢化版" class="phpmain_tab2_mids_title"> <h3>SublimeText3漢化版</h3> </a> <p>中文版，非常好用</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://miracleart.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="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://miracleart.cn/zh-tw/toolset/development-tools/121" title="禪工作室 13.0.1" class="phpmain_tab2_mids_title"> <h3>禪工作室 13.0.1</h3> </a> <p>強大的PHP整合開發(fā)環(huán)境</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://miracleart.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="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://miracleart.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="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://miracleart.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="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://miracleart.cn/zh-tw/toolset/development-tools/500" title="SublimeText3 Mac版" class="phpmain_tab2_mids_title"> <h3>SublimeText3 Mac版</h3> </a> <p>神級程式碼編輯軟體(SublimeText3)</p> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_more"> <a href="http://miracleart.cn/zh-tw/ai">顯示更多</a> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4"> <div id="377j5v51b" class="phpmain1_4R_readrank"> <div id="377j5v51b" 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="377j5v51b" class="phpgenera_Details_mainR4_bottom"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://miracleart.cn/zh-tw/faq/gmailyxdlrkzn" title="gmail信箱登陸入口在哪裡" class="phpgenera_Details_mainR4_bottom_title">gmail信箱登陸入口在哪裡</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>8517</span> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>17</span> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://miracleart.cn/zh-tw/faq/java-tutorial" title="Java教學" class="phpgenera_Details_mainR4_bottom_title">Java教學</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1744</span> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>16</span> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://miracleart.cn/zh-tw/faq/cakephp-tutor" title="CakePHP 教程" class="phpgenera_Details_mainR4_bottom_title">CakePHP 教程</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1596</span> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>56</span> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://miracleart.cn/zh-tw/faq/laravel-tutori" title="Laravel 教程" class="phpgenera_Details_mainR4_bottom_title">Laravel 教程</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1537</span> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>28</span> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://miracleart.cn/zh-tw/faq/php-tutorial" title="PHP教程" class="phpgenera_Details_mainR4_bottom_title">PHP教程</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1396</span> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>31</span> </div> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_more"> <a href="http://miracleart.cn/zh-tw/faq/zt">顯示更多</a> </div> </div> </div> </div> </div> <div id="377j5v51b" class="Article_Details_main2"> <div id="377j5v51b" class="phpgenera_Details_mainL4"> <div id="377j5v51b" 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="377j5v51b" class="phpgenera_Details_mainL4_info"> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://miracleart.cn/zh-tw/faq/1796819239.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/174957130281670.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="如何僅在某些頁面上包括CSS？" /> </a> <a href="http://miracleart.cn/zh-tw/faq/1796819239.html" title="如何僅在某些頁面上包括CSS？" class="phphistorical_Version2_mids_title">如何僅在某些頁面上包括CSS？</a> <span id="377j5v51b" class="Articlelist_txts_time">Jun 11, 2025 am 12:01 AM</span> <p class="Articlelist_txts_p">選擇性包含CSS在特定頁面上的方法有三種：1.內(nèi)聯(lián)CSS，適用於不常訪問或需要獨特樣式的頁面；2.使用JavaScript條件加載外部CSS文件，適合需要靈活性的情況；3.服務器端包含，適用於使用服務器端語言的場景。這種方法可以優(yōu)化網(wǎng)站性能和可維護性，但需平衡模塊化與性能。</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://miracleart.cn/zh-tw/faq/1796819001.html" title="Flexbox與網(wǎng)格：了解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/174948499050663.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Flexbox與網(wǎng)格：了解CSS佈局的關鍵差異" /> </a> <a href="http://miracleart.cn/zh-tw/faq/1796819001.html" title="Flexbox與網(wǎng)格：了解CSS佈局的關鍵差異" class="phphistorical_Version2_mids_title">Flexbox與網(wǎng)格：了解CSS佈局的關鍵差異</a> <span id="377j5v51b" class="Articlelist_txts_time">Jun 10, 2025 am 12:03 AM</span> <p class="Articlelist_txts_p">flexboxisidealforone-dimensionAllayouts，while gridsuitStwo，complex layouts.useflexboxforaligningItemsinasingLeaxisAndGridForRidForPreciseconcontroloverroverroverroverroverroverroverrowsandsininintricatientricatedesigns。</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://miracleart.cn/zh-tw/faq/1796819129.html" title="使用HTML彈出案創(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/242/473/174951991745342.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="使用HTML彈出案創(chuàng)建自動關閉通知" /> </a> <a href="http://miracleart.cn/zh-tw/faq/1796819129.html" title="使用HTML彈出案創(chuàng)建自動關閉通知" class="phphistorical_Version2_mids_title">使用HTML彈出案創(chuàng)建自動關閉通知</a> <span id="377j5v51b" class="Articlelist_txts_time">Jun 10, 2025 am 09:45 AM</span> <p class="Articlelist_txts_p">HTML彈出屬性將元素轉換為頂層元素，可以使用按鈕或JavaScript打開和關閉?？梢詫棾霭格g回多種方式，但是沒有選擇自動關閉它們。 preethi有一種技術，你可以</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://miracleart.cn/zh-tw/faq/1796823628.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/175069693197174.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="什麼是'渲染障礙CSS”？" /> </a> <a href="http://miracleart.cn/zh-tw/faq/1796823628.html" title="什麼是'渲染障礙CSS”？" class="phphistorical_Version2_mids_title">什麼是'渲染障礙CSS”？</a> <span id="377j5v51b" class="Articlelist_txts_time">Jun 24, 2025 am 12:42 AM</span> <p class="Articlelist_txts_p">CSS會阻塞頁面渲染是因為瀏覽器默認將內(nèi)聯(lián)和外部CSS視為關鍵資源，尤其是使用引入的樣式表、頭部大量內(nèi)聯(lián)CSS以及未優(yōu)化的媒體查詢樣式。 1.提取關鍵CSS並內(nèi)嵌至HTML；2.延遲加載非關鍵CSS通過JavaScript；3.使用media屬性優(yōu)化加載如打印樣式；4.壓縮合併CSS減少請求。建議使用工具提取關鍵CSS，結合rel="preload"異步加載，合理使用media延遲加載，避免過度拆分與復雜腳本控制。</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://miracleart.cn/zh-tw/faq/1796820543.html" title="如何在無花果中使用Lotties" 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/242/473/174986743677204.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="如何在無花果中使用Lotties" /> </a> <a href="http://miracleart.cn/zh-tw/faq/1796820543.html" title="如何在無花果中使用Lotties" class="phphistorical_Version2_mids_title">如何在無花果中使用Lotties</a> <span id="377j5v51b" class="Articlelist_txts_time">Jun 14, 2025 am 10:17 AM</span> <p class="Articlelist_txts_p">在接下來的教程中，我將向您展示如何在無花果中創(chuàng)建Lottie動畫。我們將使用兩種彩色設計來超越如何在無花果上進行動畫，然後向您展示如何從Figma到Lottie動畫。您只需要免費無花果</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://miracleart.cn/zh-tw/faq/1796820287.html" title="打破邊界：用（s）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/242/473/174978559468682.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="打破邊界：用（s）CSS構建湯姆拼圖" /> </a> <a href="http://miracleart.cn/zh-tw/faq/1796820287.html" title="打破邊界：用（s）CSS構建湯姆拼圖" class="phphistorical_Version2_mids_title">打破邊界：用（s）CSS構建湯姆拼圖</a> <span id="377j5v51b" class="Articlelist_txts_time">Jun 13, 2025 am 11:33 AM</span> <p class="Articlelist_txts_p">我們對其進行了測試，事實證明，至少在低級邏輯和拼圖行為時，Sass可以替換JavaScript。除了地圖，混音，功能和大量數(shù)學外，我們都設法使我們的Tangram難題栩栩如生，沒有J</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://miracleart.cn/zh-tw/faq/1796822133.html" title="外部與內(nèi)部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/175035152168797.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="外部與內(nèi)部CSS：最好的方法是什麼？" /> </a> <a href="http://miracleart.cn/zh-tw/faq/1796822133.html" title="外部與內(nèi)部CSS：最好的方法是什麼？" class="phphistorical_Version2_mids_title">外部與內(nèi)部CSS：最好的方法是什麼？</a> <span id="377j5v51b" class="Articlelist_txts_time">Jun 20, 2025 am 12:45 AM</span> <p class="Articlelist_txts_p">thebestapphachforcssdepprodsontheproject'sspefificneeds.forlargerprojects，externalcsSissBetterDuoSmaintoMaintainability andReusability; forsMallerProjectsorsingle-pageApplications，InternaltCsmightBemoresobleable.InternalCsmightBemorese.it.it'sclucialtobalancepopryseceneceenceprodrenceprodrenceNeed</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://miracleart.cn/zh-tw/faq/1796821588.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/175026415047262.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="我的CSS必須在較低的情況下嗎？" /> </a> <a href="http://miracleart.cn/zh-tw/faq/1796821588.html" title="我的CSS必須在較低的情況下嗎？" class="phphistorical_Version2_mids_title">我的CSS必須在較低的情況下嗎？</a> <span id="377j5v51b" class="Articlelist_txts_time">Jun 19, 2025 am 12:29 AM</span> <p class="Articlelist_txts_p">否，CSSDOESNOTHAVETOBEINLOWERCASE.CHOMENDENS，使用flowercaseisrecommondendendending：1）一致性和可讀性，2）避免使用促進性技術，3）潛在的Performent FormanceBenefits，以及4）RightCollaboraboraboraboraboraboraboraboraboraboraboraboraboraboraboraboraborationWithInteams。</p> </div> </div> <a href="http://miracleart.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="377j5v51b" class="footer"> <div id="377j5v51b" class="footertop"> <img src="/static/imghw/logo.png" alt=""> <p>公益線上PHP培訓，幫助PHP學習者快速成長！</p> </div> <div id="377j5v51b" class="footermid"> <a href="http://miracleart.cn/zh-tw/about/us.html">關於我們</a> <a href="http://miracleart.cn/zh-tw/about/disclaimer.html">免責聲明</a> <a href="http://miracleart.cn/zh-tw/update/article_0_1.html">Sitemap</a> </div> <div id="377j5v51b" 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://miracleart.cn/" title="国产av日韩一区二区三区精品">国产av日韩一区二区三区精品</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="j5zcm" class="pl_css_ganrao" style="display: none;"><cite id="j5zcm"><ruby id="j5zcm"><dl id="j5zcm"></dl></ruby></cite><samp id="j5zcm"><tbody id="j5zcm"><dfn id="j5zcm"></dfn></tbody></samp><strong id="j5zcm"><address id="j5zcm"></address></strong><nobr id="j5zcm"></nobr><table id="j5zcm"></table><kbd id="j5zcm"><p id="j5zcm"><mark id="j5zcm"></mark></p></kbd><samp id="j5zcm"><strong id="j5zcm"><output id="j5zcm"></output></strong></samp><table id="j5zcm"></table><strong id="j5zcm"></strong><font id="j5zcm"><object id="j5zcm"></object></font><strike id="j5zcm"><th id="j5zcm"><tbody id="j5zcm"></tbody></th></strike><thead id="j5zcm"><optgroup id="j5zcm"><samp id="j5zcm"></samp></optgroup></thead><dfn id="j5zcm"><menu id="j5zcm"><font id="j5zcm"><menu id="j5zcm"></menu></font></menu></dfn><tr id="j5zcm"><dfn id="j5zcm"></dfn></tr><sup id="j5zcm"></sup><ul id="j5zcm"><code id="j5zcm"><ins id="j5zcm"></ins></code></ul><nav id="j5zcm"></nav><strong id="j5zcm"><div id="j5zcm"><center id="j5zcm"></center></div></strong><tr id="j5zcm"><strike id="j5zcm"><th id="j5zcm"></th></strike></tr><label id="j5zcm"><center id="j5zcm"><optgroup id="j5zcm"><blockquote id="j5zcm"></blockquote></optgroup></center></label><em id="j5zcm"><pre id="j5zcm"></pre></em><th id="j5zcm"></th><noframes id="j5zcm"><rt id="j5zcm"><delect id="j5zcm"></delect></rt></noframes><rt id="j5zcm"></rt><tr id="j5zcm"></tr><rt id="j5zcm"></rt><pre id="j5zcm"><ol id="j5zcm"></ol></pre><strong id="j5zcm"></strong><span id="j5zcm"></span><dfn id="j5zcm"><optgroup id="j5zcm"><pre id="j5zcm"></pre></optgroup></dfn><sup id="j5zcm"></sup><blockquote id="j5zcm"></blockquote><xmp id="j5zcm"><li id="j5zcm"><tbody id="j5zcm"></tbody></li></xmp><strong id="j5zcm"></strong><tfoot id="j5zcm"><option id="j5zcm"><wbr id="j5zcm"></wbr></option></tfoot><u id="j5zcm"></u><input id="j5zcm"><wbr id="j5zcm"><label id="j5zcm"></label></wbr></input><xmp id="j5zcm"><label id="j5zcm"><xmp id="j5zcm"><bdo id="j5zcm"></bdo></xmp></label></xmp><code id="j5zcm"><ins id="j5zcm"><noframes id="j5zcm"></noframes></ins></code><delect id="j5zcm"></delect><tr id="j5zcm"></tr><tr id="j5zcm"></tr><tt id="j5zcm"></tt><wbr id="j5zcm"><ul id="j5zcm"><dl id="j5zcm"></dl></ul></wbr><dfn id="j5zcm"><optgroup id="j5zcm"><td id="j5zcm"></td></optgroup></dfn><fieldset id="j5zcm"></fieldset><center id="j5zcm"><optgroup id="j5zcm"><sub id="j5zcm"></sub></optgroup></center><xmp id="j5zcm"></xmp><delect id="j5zcm"></delect><dfn id="j5zcm"></dfn></div> </html>