如何在HTML5中定義``元素的可視標題？
在網頁程式設計領域，使用``和``元素越來越流行，因為它們可以增強使用者體驗。但是，為了在HTML5中更好地理解和使用這些元素，需要一個清晰可見的標題。對於不熟悉HTML5標記的人來說，這可能是一項艱鉅的任務。在本文中，我們將逐步探討如何在HTML5中為``元素定義可見標題，包括使用各種屬性和特性。透過理解HTML5的底層結構並使用可用的工具，Web開發者可以建立具有清晰簡潔標題的``元素，從而增強使用者體驗。
<summary> 標籤
<summary>標記是現代HTML5的一個組成部分，用於指定``元素內容的摘要或標題。``標記用於建立一個展開/摺疊的小工具或互動式部件，允許使用者顯示或隱藏頁面上的附加內容。``標籤位於``元素內，用於提供簡短的描述或標題，這些內容可以展開或摺疊。當用戶點選摘要時，``元素內的內容會根據其當前狀態顯示或隱藏。
語法
<details>
<summary>Summary or heading text goes here</summary>
<!-- Additional content goes here -->
</details>
方法
在HTML5中定義``元素的可視標題需要使用一些特定的屬性和標籤。要完成此任務，首先必須使用``標籤建立一個``元素。在這個元素中，必須使用``標籤新增一個``元素。``元素中的文字將作為``元素的可視標題。
要設定可視標題的樣式，可以使用CSS修改``元素。可以使用`::before`和`::after`偽元素在``元素之前或之後新增內容。可以使用`content`屬性向這些偽元素新增文字或符號。
可以使用JavaScript處理``元素的方面。例如，可以使用`open`屬性來設定``元素的初始狀態（開啟或關閉）。此外，可以使用事件偵聽器在顯示或隱藏``元素時觸發特定行為。
示例
以下HTML5示例定義了``元素的可視標題，允許使用者透過點選``元素來顯示或隱藏附加資訊。程式碼以DOCTYPE宣告開頭，該宣告指定了正在使用的HTML版本。HTML程式碼包含一個``元素，其中包含一個``元素，該元素為頁面提供標題。此外，還有一個`<style>`元素，該元素指定`<summary>`元素的外觀，包括其字型粗細、背景顏色、填充和游標型別。</p>
<p>在HTML程式碼的`<body>`部分中，存在一個`<h4>`元素，為頁面提供一個介紹性標題。之後，添加了一個`<details>`型別的元素，當用戶點選該元素時，它將觸發附加資料的可見性。包含在`<details>`元素中的`<summary>`元素已使用上述CSS屬性進行修飾，以確保其作為使用者可點選標題的可見性。最後，`<details>`元素包含一個段落元素，該元素在點選`<summary>`元素之前保持隱藏狀態，用於向用戶呈現更多資訊。</p>
<pre class="demo-code notranslate language-html" data-lang="html"><!DOCTYPE html>
<html>
<head>
<title>How to define a visible heading for details element in HTML5?</title>
<style>
summary {
font-weight: bold;
background-color: #f7f7f7;
padding: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<h4>How to define a visible heading for details element in HTML5?</h4>
<details>
<summary>Click me for more information</summary>
<p>Here is some more information that will be displayed when the user clicks the summary above.</p>
</details>
</body>
</html>
</pre>
<h2>結論</h2>
<p>總而言之，很明顯，在HTML5中為`<details>`元素解釋一個清晰的標題可以顯著增強網站的使用者體驗。透過使用鮮為人知的HTML標籤和屬性，例如</p><summary>和“open”屬性，Web開發者可以以美觀的方式向用戶提供清晰簡潔的資訊。執行這些方法可能需要一些努力和對HTML語言的瞭解，但結果非常有益。透過學習這些很少使用的標籤，Web開發者可以建立一個更精緻、更優雅的使用者介面，最終形成一個更吸引人、更有啟發性的網站。<p></p></summary><p></p>
<div class="clear"></div>
<div class="qa_widget mui-panel prof-view-artcle">
<div class="">
<a href="https://tutorialspoint.tw/authors/aayush-mohan-sinha" target="_blank" title="Aayush Mohan Sinha" class="mui--pull-left">
<img class="profile-img1" src="https://tutorialspoint.tw/assets/profiles/629803/profile/60_1492836-1679998192.jfif" alt="Aayush Mohan Sinha">
</a>
<div class="qa_author">
<a href="https://tutorialspoint.tw/authors/aayush-mohan-sinha" target="_blank"><span>Aayush Mohan Sinha</span></a>
<p class="prof-desigtn mb-0"><b></b></p>
</div>
</div>
<div class="clear"></div>
<div class="library-page-bottom-nav" id="divStats" data-qid="115172" data-quid="629803" style="margin-block: 1rem !important;padding-top: 18px;align-items: center; border-top: 1px dashed #ccc;font-size: 14px;">
<div><span class="date">更新於：</span>2023年5月5日</div>
<div class="flex-group">
<div class="uthor-prof-social-icon mt-2">
<span class="share-options">
<a onclick="copyToClipboard();" title="Copy To Clipboard" class=""><svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M301.148 394.702l-79.2 79.19c-50.778 50.799-133.037 50.824-183.84 0-50.799-50.778-50.824-133.037 0-183.84l79.19-79.2a132.833 132.833 0 0 1 3.532-3.403c7.55-7.005 19.795-2.004 20.208 8.286.193 4.807.598 9.607 1.216 14.384.481 3.717-.746 7.447-3.397 10.096-16.48 16.469-75.142 75.128-75.3 75.286-36.738 36.759-36.731 96.188 0 132.94 36.759 36.738 96.188 36.731 132.94 0l79.2-79.2.36-.36c36.301-36.672 36.14-96.07-.37-132.58-8.214-8.214-17.577-14.58-27.585-19.109-4.566-2.066-7.426-6.667-7.134-11.67a62.197 62.197 0 0 1 2.826-15.259c2.103-6.601 9.531-9.961 15.919-7.28 15.073 6.324 29.187 15.62 41.435 27.868 50.688 50.689 50.679 133.17 0 183.851zm-90.296-93.554c12.248 12.248 26.362 21.544 41.435 27.868 6.388 2.68 13.816-.68 15.919-7.28a62.197 62.197 0 0 0 2.826-15.259c.292-5.003-2.569-9.604-7.134-11.67-10.008-4.528-19.371-10.894-27.585-19.109-36.51-36.51-36.671-95.908-.37-132.58l.36-.36 79.2-79.2c36.752-36.731 96.181-36.738 132.94 0 36.731 36.752 36.738 96.181 0 132.94-.157.157-58.819 58.817-75.3 75.286-2.651 2.65-3.878 6.379-3.397 10.096a163.156 163.156 0 0 1 1.216 14.384c.413 10.291 12.659 15.291 20.208 8.286a131.324 131.324 0 0 0 3.532-3.403l79.19-79.2c50.824-50.803 50.799-133.062 0-183.84-50.802-50.824-133.062-50.799-183.84 0l-79.2 79.19c-50.679 50.682-50.688 133.163 0 183.851z"></path></svg></a>
<a id="ancFBShare" onclick="window.open('https://#/sharer/sharer.php?u=https://tutorialspoint.tw/how-to-define-a-visible-heading-for-details-element-in-html5&t=How to define a visible heading for details element in HTML5?&description=How to define a visible heading for details element in HTML5 - Within the realm of web programming, the utilization of and components has gained traction owing to their propensity to amplify the user's gratification. Notwithstanding their usefulness, these components require a distinct and conspicuous title for enhanced comprehensibility and','sharer','toolbar=0,status=0,width=580,height=325');" href="javascript: void(0)" title="Share on Facebook"><svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 320 512"><path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"></path></svg></a>
<a onclick="window.open('https://www.linkedin.com/shareArticle?url=https://tutorialspoint.tw/how-to-define-a-visible-heading-for-details-element-in-html5&title=How to define a visible heading for details element in HTML5?&summary=How to define a visible heading for details element in HTML5 - Within the realm of web programming, the utilization of and components has gained traction owing to their propensity to amplify the user's gratification. Notwithstanding their usefulness, these components require a distinct and conspicuous title for enhanced comprehensibility and','sharer','toolbar=0,status=0,width=580,height=325');" href="javascript: void(0)" title="Share on LinkedIn"><svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"></path></svg></a>
<a onclick="window.open('https://www.twitter.com/intent/tweet?url=https://tutorialspoint.tw/how-to-define-a-visible-heading-for-details-element-in-html5&text=How to define a visible heading for details element in HTML5 - Within the realm of web programming, the utilization of and components has gained traction owing to their propensity to amplify the user's gratification. Notwithstanding their usefulness, these components require a distinct and conspicuous title for enhanced comprehensibility and','sharer','toolbar=0,status=0,width=580,height=325');" href="javascript: void(0)" title="Share on Twitter"><svg fill="black" xmlns="http://www.w3.org/2000/svg" height="1.2em" viewBox="0 0 512 512"><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"></path></svg></a>
</span>
</div>
<div>
<p class="views-count" title="Article Views"><svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512"><path d="M288 288a64 64 0 0 0 0-128c-1 0-1.88.24-2.85.29a47.5 47.5 0 0 1-60.86 60.86c0 1-.29 1.88-.29 2.85a64 64 0 0 0 64 64zm284.52-46.6C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 96a128 128 0 1 1-128 128A128.14 128.14 0 0 1 288 96zm0 320c-107.36 0-205.46-61.31-256-160a294.78 294.78 0 0 1 129.78-129.33C140.91 153.69 128 187.17 128 224a160 160 0 0 0 320 0c0-36.83-12.91-70.31-33.78-97.33A294.78 294.78 0 0 1 544 256c-50.53 98.69-148.64 160-256 160z"></path></svg> <span id="spanViews">瀏覽量：228</span></p>
</div>
</div>
</div>
</div>
<div class="related-articles">
<ul class="toc chapters">
<li class="heading big-font" <i="">相關文章</li><li><a href="https://tutorialspoint.tw/how-to-define-a-caption-for-a-fieldset-element-in-html5"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M218.101 38.101L198.302 57.9c-4.686 4.686-4.686 12.284 0 16.971L353.432 230H12c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h341.432l-155.13 155.13c-4.686 4.686-4.686 12.284 0 16.971l19.799 19.799c4.686 4.686 12.284 4.686 16.971 0l209.414-209.414c4.686-4.686 4.686-12.284 0-16.971L235.071 38.101c-4.686-4.687-12.284-4.687-16.97 0z"></path></svg><span>如何在HTML5中為`<fieldset>`元素定義標題？</span></a></li>
<li><a href="https://tutorialspoint.tw/how-to-define-a-label-for-an-input-element-using-html5"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M218.101 38.101L198.302 57.9c-4.686 4.686-4.686 12.284 0 16.971L353.432 230H12c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h341.432l-155.13 155.13c-4.686 4.686-4.686 12.284 0 16.971l19.799 19.799c4.686 4.686 12.284 4.686 16.971 0l209.414-209.414c4.686-4.686 4.686-12.284 0-16.971L235.071 38.101c-4.686-4.687-12.284-4.687-16.97 0z"></path></svg><span>如何在HTML5中使用標籤為輸入元素定義標籤？</span></a></li>
<li><a href="https://tutorialspoint.tw/How-to-display-a-summary-for-a-given-details-in-HTML5"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M218.101 38.101L198.302 57.9c-4.686 4.686-4.686 12.284 0 16.971L353.432 230H12c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h341.432l-155.13 155.13c-4.686 4.686-4.686 12.284 0 16.971l19.799 19.799c4.686 4.686 12.284 4.686 16.971 0l209.414-209.414c4.686-4.686 4.686-12.284 0-16.971L235.071 38.101c-4.686-4.687-12.284-4.687-16.97 0z"></path></svg><span>如何在HTML5中顯示給定`<details>`的摘要？</span></a></li>
<li><a href="https://tutorialspoint.tw/how-to-define-a-title-for-a-document-using-html5"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M218.101 38.101L198.302 57.9c-4.686 4.686-4.686 12.284 0 16.971L353.432 230H12c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h341.432l-155.13 155.13c-4.686 4.686-4.686 12.284 0 16.971l19.799 19.799c4.686 4.686 12.284 4.686 16.971 0l209.414-209.414c4.686-4.686 4.686-12.284 0-16.971L235.071 38.101c-4.686-4.687-12.284-4.687-16.97 0z"></path></svg><span>如何在HTML5中為文件定義標題？</span></a></li>
<li><a href="https://tutorialspoint.tw/how-to-define-a-text-element-that-is-inserted-into-a-document-in-html5"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M218.101 38.101L198.302 57.9c-4.686 4.686-4.686 12.284 0 16.971L353.432 230H12c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h341.432l-155.13 155.13c-4.686 4.686-4.686 12.284 0 16.971l19.799 19.799c4.686 4.686 12.284 4.686 16.971 0l209.414-209.414c4.686-4.686 4.686-12.284 0-16.971L235.071 38.101c-4.686-4.687-12.284-4.687-16.97 0z"></path></svg><span>如何在HTML5中定義插入到文件中的文字元素？</span></a></li>
<li><a href="https://tutorialspoint.tw/how-to-define-a-form-for-user-input-using-html5"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M218.101 38.101L198.302 57.9c-4.686 4.686-4.686 12.284 0 16.971L353.432 230H12c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h341.432l-155.13 155.13c-4.686 4.686-4.686 12.284 0 16.971l19.799 19.799c4.686 4.686 12.284 4.686 16.971 0l209.414-209.414c4.686-4.686 4.686-12.284 0-16.971L235.071 38.101c-4.686-4.687-12.284-4.687-16.97 0z"></path></svg><span>如何在HTML5中定義用於使用者輸入的表單？</span></a></li>
<li><a href="https://tutorialspoint.tw/how-to-define-a-variable-in-html5"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M218.101 38.101L198.302 57.9c-4.686 4.686-4.686 12.284 0 16.971L353.432 230H12c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h341.432l-155.13 155.13c-4.686 4.686-4.686 12.284 0 16.971l19.799 19.799c4.686 4.686 12.284 4.686 16.971 0l209.414-209.414c4.686-4.686 4.686-12.284 0-16.971L235.071 38.101c-4.686-4.687-12.284-4.687-16.97 0z"></path></svg><span>如何在HTML5中定義變數？</span></a></li>
<li><a href="https://tutorialspoint.tw/how-to-create-a-javascript-executor-for-making-an-element-visible-in-selenium-webdriver"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M218.101 38.101L198.302 57.9c-4.686 4.686-4.686 12.284 0 16.971L353.432 230H12c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h341.432l-155.13 155.13c-4.686 4.686-4.686 12.284 0 16.971l19.799 19.799c4.686 4.686 12.284 4.686 16.971 0l209.414-209.414c4.686-4.686 4.686-12.284 0-16.971L235.071 38.101c-4.686-4.687-12.284-4.687-16.97 0z"></path></svg><span>如何在Selenium Webdriver中建立一個使元素可見的Javascript執行器？</span></a></li>
<li><a href="https://tutorialspoint.tw/How-to-specify-that-the-details-should-be-visible-to-the-user-in-HTML"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M218.101 38.101L198.302 57.9c-4.686 4.686-4.686 12.284 0 16.971L353.432 230H12c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h341.432l-155.13 155.13c-4.686 4.686-4.686 12.284 0 16.971l19.799 19.799c4.686 4.686 12.284 4.686 16.971 0l209.414-209.414c4.686-4.686 4.686-12.284 0-16.971L235.071 38.101c-4.686-4.687-12.284-4.687-16.97 0z"></path></svg><span>如何在HTML中指定`<details>`應對使用者可見？</span></a></li>
<li><a href="https://tutorialspoint.tw/How-to-create-a-context-menu-for-an-element-in-HTML5"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M218.101 38.101L198.302 57.9c-4.686 4.686-4.686 12.284 0 16.971L353.432 230H12c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h341.432l-155.13 155.13c-4.686 4.686-4.686 12.284 0 16.971l19.799 19.799c4.686 4.686 12.284 4.686 16.971 0l209.414-209.414c4.686-4.686 4.686-12.284 0-16.971L235.071 38.101c-4.686-4.687-12.284-4.687-16.97 0z"></path></svg><span>如何在HTML5中為元素建立上下文選單？</span></a></li>
<li><a href="https://tutorialspoint.tw/how-to-define-a-section-in-a-document-in-html5"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M218.101 38.101L198.302 57.9c-4.686 4.686-4.686 12.284 0 16.971L353.432 230H12c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h341.432l-155.13 155.13c-4.686 4.686-4.686 12.284 0 16.971l19.799 19.799c4.686 4.686 12.284 4.686 16.971 0l209.414-209.414c4.686-4.686 4.686-12.284 0-16.971L235.071 38.101c-4.686-4.687-12.284-4.687-16.97 0z"></path></svg><span>如何在HTML5中定義文件中的節？</span></a></li>
<li><a href="https://tutorialspoint.tw/how-to-define-a-drop-down-list-in-html5"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M218.101 38.101L198.302 57.9c-4.686 4.686-4.686 12.284 0 16.971L353.432 230H12c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h341.432l-155.13 155.13c-4.686 4.686-4.686 12.284 0 16.971l19.799 19.799c4.686 4.686 12.284 4.686 16.971 0l209.414-209.414c4.686-4.686 4.686-12.284 0-16.971L235.071 38.101c-4.686-4.687-12.284-4.687-16.97 0z"></path></svg><span>如何在HTML5中定義下拉列表？</span></a></li>
<li><a href="https://tutorialspoint.tw/how-to-define-keyboard-input-in-html5"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M218.101 38.101L198.302 57.9c-4.686 4.686-4.686 12.284 0 16.971L353.432 230H12c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h341.432l-155.13 155.13c-4.686 4.686-4.686 12.284 0 16.971l19.799 19.799c4.686 4.686 12.284 4.686 16.971 0l209.414-209.414c4.686-4.686 4.686-12.284 0-16.971L235.071 38.101c-4.686-4.687-12.284-4.687-16.97 0z"></path></svg><span>如何在HTML5中定義鍵盤輸入？</span></a></li>
<li><a href="https://tutorialspoint.tw/How-to-define-multiple-style-rules-for-a-single-element-in-CSS"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M218.101 38.101L198.302 57.9c-4.686 4.686-4.686 12.284 0 16.971L353.432 230H12c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h341.432l-155.13 155.13c-4.686 4.686-4.686 12.284 0 16.971l19.799 19.799c4.686 4.686 12.284 4.686 16.971 0l209.414-209.414c4.686-4.686 4.686-12.284 0-16.971L235.071 38.101c-4.686-4.687-12.284-4.687-16.97 0z"></path></svg><span>如何在CSS中為單個元素定義多個樣式規則？</span></a></li>
<li><a href="https://tutorialspoint.tw/how-to-define-a-key-pair-generator-field-in-html5"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M218.101 38.101L198.302 57.9c-4.686 4.686-4.686 12.284 0 16.971L353.432 230H12c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h341.432l-155.13 155.13c-4.686 4.686-4.686 12.284 0 16.971l19.799 19.799c4.686 4.686 12.284 4.686 16.971 0l209.414-209.414c4.686-4.686 4.686-12.284 0-16.971L235.071 38.101c-4.686-4.687-12.284-4.687-16.97 0z"></path></svg><span>如何在HTML5中定義金鑰對生成器欄位？</span></a></li>
</ul></div>
<div class="library-cta">
<div>
<h5 class="library-cta__title">開啟你的<span class="text-yellow-400">職業生涯</span></h5>
<p>完成課程獲得認證</p>
<a target="_blank" href="https://tutorialspoint.tw/latest/certifications" class="library-cta__button button button--yellow">開始學習</a>
</div>
<img src="/static/images/library-cta.svg" alt="">
</div>
<div class="library-page-bottom-nav ">
<button class="button button--blue" id="print-page">
<svg fill="white" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M112 160V64c0-8.8 7.2-16 16-16H357.5c4.2 0 8.3 1.7 11.3 4.7l26.5 26.5c3 3 4.7 7.1 4.7 11.3V160h48V90.5c0-17-6.7-33.3-18.7-45.3L402.7 18.7C390.7 6.7 374.5 0 357.5 0H128C92.7 0 64 28.7 64 64v96h48zm16 208H384v96H128V368zm-16-48c-17.7 0-32 14.3-32 32H48V256c0-8.8 7.2-16 16-16H448c8.8 0 16 7.2 16 16v96H432c0-17.7-14.3-32-32-32H112zm320 80h48c17.7 0 32-14.3 32-32V256c0-35.3-28.7-64-64-64H64c-35.3 0-64 28.7-64 64V368c0 17.7 14.3 32 32 32H80v80c0 17.7 14.3 32 32 32H400c17.7 0 32-14.3 32-32V400z"></path></svg>列印頁面</button>
<div class="flex-group">
<a href="/articles/index.php"> <button class="button button--neutral"> <svg xmlns="http://www.w3.org/2000/svg" width="10" height="16" viewBox="0 0 10 16" fill="none"><path d="M1.03117 8.48836C0.64065 8.09783 0.64065 7.46467 1.03117 7.07414L7.39514 0.710183C7.78566 0.319658 8.41883 0.319658 8.80935 0.710183C9.19987 1.10071 9.19987 1.73387 8.80935 2.1244L3.15249 7.78125L8.80935 13.4381C9.19987 13.8286 9.19987 14.4618 8.80935 14.8523C8.41882 15.2428 7.78566 15.2428 7.39513 14.8523L1.03117 8.48836ZM3.12109 8.78125L1.73828 8.78125L1.73828 6.78125L3.12109 6.78125L3.12109 8.78125Z" fill="black"></path></svg> 上一篇 </button> </a> <a href="https://tutorialspoint.tw/how-to-define-a-text-element-that-is-inserted-into-a-document-in-html5"> <button class="button ">下一篇 <svg xmlns="http://www.w3.org/2000/svg" width="10" height="16" viewBox="0 0 10 16" fill="none"><path d="M8.87117 8.48836C9.26169 8.09783 9.26169 7.46467 8.87117 7.07414L2.50721 0.710183C2.11668 0.319658 1.48352 0.319658 1.09299 0.710183C0.70247 1.10071 0.70247 1.73387 1.09299 2.1244L6.74985 7.78125L1.093 13.4381C0.702471 13.8286 0.702471 14.4618 1.093 14.8523C1.48352 15.2428 2.11668 15.2428 2.50721 14.8523L8.87117 8.48836ZM6.78125 8.78125L8.16406 8.78125L8.16406 6.78125L6.78125 6.78125L6.78125 8.78125Z" fill="white"></path></svg> </button> </a></div>
</div>
<div class="error-success" id="error-success" style="display: none;"></div>
<div class="error-warning" id="error-warning"></div>
<script src="/articles/js/article.js?v=2.6"> </script>
<div class="bottom-library-ads mt" style="margin:5px;">
<div class="google-bottom-ads" id="google-bottom-ads" style="height:450px;">
<div>廣告</div>
<div>
<div id="ezoic-pub-ad-placeholder-131"></div>
<div id="ezoic-pub-ad-placeholder-135"></div>
<script>
ezstandalone.cmd.push(function() {
var width = window.innerWidth;
if( width <= 768 ){
ezstandalone.showAds(135);
document.getElementById("ezoic-pub-ad-placeholder-131").remove();
document.getElementById("google-right-ads").remove();
}else{
ezstandalone.showAds(131);
document.getElementById("ezoic-pub-ad-placeholder-135").remove();
}
});
</script>
</div>
</div>
</div>
</div>
<div>
<div class="data-sticky" id="google-right-ads">
<div class="google-right-ad" style="margin: 0px auto !important;margin-top:5px;min-height:280px!important">
<div id="ezoic-pub-ad-placeholder-127"></div>
<script>
ezstandalone.cmd.push(function() {
ezstandalone.showAds(127);
});
</script>
</div>
<div class="google-right-ad" style="margin-top:16px;min-height:280px!important">
<div id="ezoic-pub-ad-placeholder-128"></div>
<script>
ezstandalone.cmd.push(function() {
ezstandalone.showAds(128);
});
</script>
</div>
<div class="google-right-ad" style="margin-top:16px;margin-bottom:15px;min-height:600px!important">
<div id="ezoic-pub-ad-placeholder-129"></div>
<script>
ezstandalone.cmd.push(function() {
ezstandalone.showAds(129);
});
</script>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="footer bg-neutral-800">
<div class="container">
<div>
<h5>TOP TUTORIALS</h5>
<ul>
<li><a href="/python/index.htm" title="Python Tutorial">Python Tutorial</a></li>
<li><a href="/java/index.htm" title="Java Tutorial">Java Tutorial</a></li>
<li><a href="/cplusplus/index.htm" title="C++ Tutorial">C++ Tutorial</a></li>
<li><a href="/cprogramming/index.htm" title="C Programming Tutorial">C Programming Tutorial</a></li>
<li><a href="/csharp/index.htm" title="C# Tutorial">C# Tutorial</a></li>
<li><a href="/php/index.htm" title="PHP Tutorial">PHP Tutorial</a></li>
<li><a href="/r/index.htm" title="R Tutorial">R Tutorial</a></li>
<li><a href="/html/index.htm" title="HTML Tutorial">HTML Tutorial</a></li>
<li><a href="/css/index.htm" title="CSS Tutorial">CSS Tutorial</a></li>
<li><a href="/javascript/index.htm" title="JavaScript Tutorial">JavaScript Tutorial</a></li>
<li><a href="/sql/index.htm" title="SQL Tutorial">SQL Tutorial</a></li>
</ul>
</div>
<div>
<h5>TRENDING TECHNOLOGIES</h5>
<ul>
<li><a href="/cloud_computing/index.htm" title="Cloud Computing Tutorial">Cloud Computing Tutorial</a></li>
<li><a href="/amazon_web_services/index.htm" title="Amazon Web Services Tutorial">Amazon Web Services Tutorial</a></li>
<li><a href="/microsoft_azure/index.htm" title="Microsoft Azure Tutorial">Microsoft Azure Tutorial</a></li>
<li><a href="/git/index.htm" title="Git Tutorial">Git Tutorial</a></li>
<li> <a href="/ethical_hacking/index.htm" title="Ethical Hacking Tutorial">Ethical Hacking Tutorial</a></li>
<li><a href="/docker/index.htm" title="Docker Tutorial">Docker Tutorial</a></li>
<li><a href="/kubernetes/index.htm" title="Kubernetes Tutorial">Kubernetes Tutorial</a></li>
<li><a href="/data_structures_algorithms/index.htm" title="DSA Tutorial">DSA Tutorial</a></li>
<li><a href="/spring_boot/index.htm" title="Spring Boot Tutorial">Spring Boot Tutorial</a></li>
<li><a href="/sdlc/index.htm" title="SDLC Tutorial">SDLC Tutorial</a></li>
<li><a href="/unix/index.htm" title="Unix Tutorial">Unix Tutorial</a></li>
</ul>
</div>
<div>
<h5>CERTIFICATIONS</h5>
<ul>
<li><a href="/certification/business-analytics-certification-2023/index.asp" title="Business Analytics Certification">Business Analytics Certification</a></li>
<li><a href="/certification/java-prime-pack/index.asp" title="Java & Spring Boot Advanced Certification">Java & Spring Boot Advanced Certification</a></li>
<li><a href="/certification/data-science-advanced-certification/index.asp" title="Data Science Advanced Certification">Data Science Advanced Certification</a></li>
<li><a href="/certification/cloud-computing-and-devops-advanced-certification/index.asp" title="Cloud Computing And DevOps">Cloud Computing And DevOps</a></li>
<li><a href="/certification/advanced-certification-in-business-analytics/index.asp" title="Advanced Certification In Business Analytics">Advanced Certification In Business Analytics</a></li>
<li><a href="/certification/artificial-intelligence-and-machine-learning-certification/index.asp" title="Artificial Intelligence And Machine Learning">Artificial Intelligence And Machine Learning</a></li>
<li><a href="/certification/devops-certification/index.asp" title="DevOps Certification">DevOps Certification</a></li>
<li><a href="/certification/game-development-prime-pack/index.asp" title="Game Development Certification">Game Development Certification</a></li>
<li><a href="/certification/frontend-developer-certification/index.asp" title="Front-End Developer Certification">Front-End Developer Certification</a></li>
<li><a href="/certification/aws-prime-pack/index.asp" title="AWS Certification Training">AWS Certification Training</a></li>
<li><a href="/certification/complete-python-prime-pack/index.asp" title="Python Programming Certification">Python Programming Certification</a></li>
</ul>
</div>
<div>
<h5>COMPILERS & EDITORS</h5>
<ul>
<li><a href="/online_java_compiler.php" title="Online Java Compiler">Online Java Compiler</a></li>
<li><a href="/online_python_compiler.php" title="Online Python Compiler">Online Python Compiler</a></li>
<li><a href="/execute_golang_online.php" title="Online Go Compiler">Online Go Compiler</a></li>
<li><a href="/compile_c_online.php" title="Online C Compiler">Online C Compiler</a></li>
<li><a href="/compile_cpp_online.php" title="Online C++ Compiler">Online C++ Compiler</a></li>
<li><a href="/online_csharp_compiler.php" title="Online C# Compiler">Online C# Compiler</a></li>
<li><a href="/execute_php_online.php" title="Online PHP Compiler">Online PHP Compiler</a></li>
<li><a href="/execute_matlab_online.php" title="Online MATLAB Compiler">Online MATLAB Compiler</a></li>
<li><a href="/execute_bash_online.php" title="Online Bash Compiler">Online Bash Compiler</a></li>
<li><a href="/execute_sql_online.php" title="Online SQL Compiler">Online SQL Compiler</a></li>
<li><a href="/online_html_editor.php" title="Online Html Editor">Online Html Editor</a></li>
</ul>
</div>
</div>
<ul class="footer__list container">
<li><a href="/about/index.htm" title="ABOUT US">ABOUT US</a> | </li>
<li><a href="/about/about_team.htm" title="OUR TEAM">OUR TEAM</a> | </li>
<li><a href="/about/about_careers.htm" title="CAREERS">CAREERS</a> | </li>
<li><a href="/job_search.php" title="JOBS">JOBS</a> | </li>
<li><a href="/about/contact_us.htm" title="CONTACT US">CONTACT US</a> | </li>
<li><a href="/about/about_terms_of_use.htm" title="TERMS OF USE">TERMS OF USE</a> | </li>
<li><a href="/about/about_privacy.htm" title="PRIVACY POLICY">PRIVACY POLICY</a> | </li>
<li><a href="/about/return_refund_policy.htm" title="REFUND POLICY">REFUND POLICY</a> | </li>
<li><a href="/about/about_cookies.htm" title="COOKIES POLICY">COOKIES POLICY</a> | </li>
<li><a href="/about/faq.htm" title="FAQ'S">FAQ'S</a></li>
</ul>
<div class="footer__socials container">
<img class="footer__logo" src="https://tutorialspoint.tw/static/images/logo-footer.svg" alt="tutorials point logo">
<div>
<a rel="nofollow" target="_blank" href="https://#/tutorialspointindia" title="Follow us on Facebook"><i class="fab fa-2x fa-facebook"></i></a>
<a target="_blank" href="https://twitter.com/tutorialspoint" rel="nofollow" title="Follow us on Twitter"><i class="fab fa-2x fa-x-twitter"></i></a>
<a target="_blank" href="https://www.youtube.com/channel/UCVLbzhxVTiTLiVKeGV7WEBg" rel="nofollow" title="Follow us on Youtube"><i class="fab fa-2x fa-youtube"></i></a>
<a target="_blank" href="https://www.linkedin.com/company/tutorialspoint/" rel="nofollow" title="Follow us on LinkedIn"><i class="fab fa-2x fa-linkedin"></i></a>
<a target="_blank" href="https://www.instagram.com/tutorialspoint_/" rel="nofollow" title="Follow us on Instagram"><i class="fab fa-2x fa-instagram"></i></a>
</div>
<div class="flex-group">
<button class="button-reset"><a href="https://play.google.com/store/apps/details?id=com.tutorialspoint.onlineviewer" target="_blank" title="Download Android App" rel="nofollow"><img src="https://tutorialspoint.tw/static/images/googleplay.svg" alt="Download Android App"></a></button>
<button class="button-reset"><a href="https://itunes.apple.com/us/app/tutorials-point/id914891263?ls=1&mt=8" target="_blank" title="Download IOS App" rel="nofollow"><img src="https://tutorialspoint.tw/static/images/appstore.svg" alt="Download IOS App"></a></button>
</div>
</div>
<div class="footer__legal-wrapper">
<div class="footer__legal ff-nunito">
<p>
</p><p class="">Tutorials Point is a leading Ed Tech company striving to provide the best learning material on technical and non-technical subjects.</p>
<p></p>
<p class="footer__copyright ">© Copyright 2024. All Rights Reserved.</p>
</div>
</div>
</footer>
<script src="/static/js/lib-script.js?v12.49"></script>
<script src="https://#/gsi/client" async="" defer=""></script>
<script>
function addParagraphs(ind) {
let techLinks =[["Python","JavaScript","Spring Boot","Java","Linux/Unix","C#","Data Science","MySQL","Artificial Intelligence","SQL"],
["https://tutorialspoint.tw/certification/complete-python-prime-pack/index.asp?utm_source=tutorialspoint&utm_medium=python_tutorial_3p&utm_campaign=internal",
"https://tutorialspoint.tw/certification/javascript-prime-pack/index.asp?utm_source=tutorialspoint&utm_medium=javascript_tutorial_3p&utm_campaign=internal",
"https://tutorialspoint.tw/certification/ultimate-guide-to-java-and-spring-boot-for-2022/index.asp?utm_source=tutorialspoint&utm_medium=java_tutorial_3p&utm_campaign=internal",
"https://tutorialspoint.tw/certification/ultimate-guide-to-java-and-spring-boot-for-2022/index.asp?utm_source=tutorialspoint&utm_medium=spring_boot_tutorial_3p&utm_campaign=internal",
"https://tutorialspoint.tw/certification/linux-system-administrator-certification/index.asp?utm_source=tutorialspoint&utm_medium=unix_tutorial_3p&utm_campaign=internal",
"https://tutorialspoint.tw/certification/chash-and-net-prime-pack/index.asp?utm_source=tutorialspoint&utm_medium=csharp_tutorial_3p&utm_campaign=internal",
"https://tutorialspoint.tw/certification/data-science-prime-pack/index.asp?utm_source=tutorialspoint&utm_medium=data_science_tutorial_3p&utm_campaign=internal",
"https://tutorialspoint.tw/certification/mysql-technologies-pack/index.asp?utm_source=tutorialspoint&utm_medium=mysql_tutorial_3p&utm_campaign=internal",
"https://tutorialspoint.tw/certification/artificial-intelligence-and-machine-learning-certification/index.asp?utm_source=tutorialspoint&utm_medium=artificial_intelligence_tutorial_3p&utm_campaign=internal",
"https://tutorialspoint.tw/certification/mysql-technologies-pack/index.asp?utm_source=tutorialspoint&utm_medium=sql_tutorial_3p&utm_campaign=internal"]]
var p2 = '';
if(ind>=0){
p2 = p2 + '<a style="text-decoration:none;" href="' + techLinks[1][ind] +'" target="_blank" ><p class="prmt_ad">Learn <strong>'+ techLinks[0][ind] + '</strong> in-depth with real-world projects through our <strong>' + techLinks[0][ind] + ' certification course</strong>. Enroll and become a certified expert to boost your career.</p></a>';
}
else{
p2 = p2 + '<a href="https://tutorialspoint.tw/latest/courses?utm_source=tutorialspoint&utm_medium=tutorials_3p&utm_campaign=internal" style="text-decoration:none;" target="_blank"><p class="prmt_ad">Explore our <strong>latest online courses</strong> and learn new skills at your own pace. Enroll and become a certified expert to boost your career.</p></a>';
}
$(p2).insertBefore($('.tutorial-content h2').eq(2));
}
$(document).ready(function() {
var url= window.location.href.toLowerCase();
if(url.indexOf('python') > -1){
addParagraphs(0);
}
else if(url.indexOf('javascript') > -1){
addParagraphs(1);
}
else if(url.indexOf('spring_boot') > -1){
addParagraphs(2);
}
else if(url.indexOf('java') > -1){
addParagraphs(3);
}
else if((url.indexOf('unix') > -1)||(url.indexOf('linux') > -1)){
addParagraphs(4);
}
else if((url.indexOf('csharp') > -1)||(url.indexOf('chash') > -1)){
addParagraphs(5);
}
else if(url.indexOf('data_science') > -1){
addParagraphs(6);
}
else if(url.indexOf('mysql') > -1){
addParagraphs(7);
}
else if((url.indexOf('artificial_intelligence') > -1)||(url.indexOf('artificial-intelligence') > -1)){
addParagraphs(8);
}
else if(url.indexOf('sql') > -1){
addParagraphs(9);
}
else{
addParagraphs(-1);
}
});
</script>
<script>
if(getCookie('user_id') == '' || getCookie('user_id') == null){
window.onload = function() {
initializeGoogleOneTap();
};
}
</script>
<script src="https://tutorialspoint.tw/fontawesome/js/all.min.js?v2.9"></script>
<script src="https://#/cmp.min.js" data-cfasync="false"></script>
<script async="" src="/static/js/ezoic-ad-inserter.js?v4.2"></script>
<!-- Google tag (gtag.js) -->
<script async="" src="https://#/gtag/js?id=G-E4SW76VCNP"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-E4SW76VCNP');
</script>
<!-- New Facebook Pixel Code -->
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window,document,'script',
'https://#/en_US/fbevents.js');
fbq('init', '854536859149047');
fbq('track', 'PageView');
</script>
<!-- End facebook Pixel Code -->
<div style="padding: 5em 1em; font-size: smaller; text-align: center; background-color: var(--clr-neutral-150);">
© <script>document.write(new Date().getFullYear())</script> <em><script>document.write(location.host)</script></em>.
All rights reserved.
</div></body></html>
資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會研究
服裝研究
法律研究