如何在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.com/authors/aayush-mohan-sinha" target="_blank" title="Aayush Mohan Sinha" class="mui--pull-left">
<img class="profile-img1" src="https://tutorialspoint.com/assets/profiles/629803/profile/60_1492836-1679998192.jfif" alt="Aayush Mohan Sinha">
</a>
<div class="qa_author">
<a href="https://tutorialspoint.com/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://127.0.0.1/sharer/sharer.php?u=https://tutorialspoint.com/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.com/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.com/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.com/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.com/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.com/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.com/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.com/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.com/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.com/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.com/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.com/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.com/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.com/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.com/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.com/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.com/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.com/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.com/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.com/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.com/static/images/logo-footer.svg" alt="tutorials point logo">
<div>
<a rel="nofollow" target="_blank" href="https://127.0.0.1/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.com/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.com/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://127.0.0.1/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.com/certification/complete-python-prime-pack/index.asp?utm_source=tutorialspoint&utm_medium=python_tutorial_3p&utm_campaign=internal",
"https://tutorialspoint.com/certification/javascript-prime-pack/index.asp?utm_source=tutorialspoint&utm_medium=javascript_tutorial_3p&utm_campaign=internal",
"https://tutorialspoint.com/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.com/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.com/certification/linux-system-administrator-certification/index.asp?utm_source=tutorialspoint&utm_medium=unix_tutorial_3p&utm_campaign=internal",
"https://tutorialspoint.com/certification/chash-and-net-prime-pack/index.asp?utm_source=tutorialspoint&utm_medium=csharp_tutorial_3p&utm_campaign=internal",
"https://tutorialspoint.com/certification/data-science-prime-pack/index.asp?utm_source=tutorialspoint&utm_medium=data_science_tutorial_3p&utm_campaign=internal",
"https://tutorialspoint.com/certification/mysql-technologies-pack/index.asp?utm_source=tutorialspoint&utm_medium=mysql_tutorial_3p&utm_campaign=internal",
"https://tutorialspoint.com/certification/artificial-intelligence-and-machine-learning-certification/index.asp?utm_source=tutorialspoint&utm_medium=artificial_intelligence_tutorial_3p&utm_campaign=internal",
"https://tutorialspoint.com/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.com/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.com/fontawesome/js/all.min.js?v2.9"></script>
<script src="https://127.0.0.1/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://127.0.0.1/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://127.0.0.1/en_US/fbevents.js');
fbq('init', '854536859149047');
fbq('track', 'PageView');
</script>
<!-- End facebook Pixel Code -->
<footer style="margin: 2em 2em 4em; font-size: small; text-align: center;">
© <script>document.write(new Date().getFullYear() + ' ' + location.host)</script>.
All rights reserved.
</footer></body></html>
数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会研究
服装研究
法律研究