HTML - main 标签

HTML <main> 标签用于表示HTML正文元素的主要内容。它指定了文档的主要或重要内容。

它每个页面只能使用一次，并且不能用作文章、旁白、页脚、页眉和导航元素的后代。

<main>标签的内容对于文档应该是唯一的。<main>标签不会影响 DOM 的页面结构概念。

语法


<main> ..... </main>

属性

<main>标签支持 HTML 的全局属性和事件属性。

<main>标签的示例

下面的示例将说明 main 标签的用法。在哪里、何时以及如何使用主标签来创建网站的主要元素。

创建文档的主要内容

以下示例代码显示了 <main> 标签的用法。当我们运行上述代码时，它将生成一个由网页上显示的文本组成的输出。


<!DOCTYPE html>
<html lang="en">

<head>
	 <title>HTML main Tag</title>
</head>

<body>
	 <!--create a main element-->
	 <p>Example of the HTML 'main' element(tag).</p>
	 <main>
			<article>
				 <h1>HTML</h1>
				 <p>Hyper Text Markup Language</p>
				 <p>
						The HyperText Markup Language or HTML is the 
						standard markup language for documents designed
						to be displayed in a web browser.
				 </p>
				 <h1>CSS</h1>
				 <p>Cascading Style Sheet</p>
			</article>
	 </main>
</body>

</html>

设置页面主要内容的样式

考虑以下示例，我们将使用 <main> 标签并应用 CSS 属性来设置主要元素的样式。


<!DOCTYPE html>
<html lang="en">

<head>
	 <title>HTML main Tag</title>
	 <style>
			header {
				 font-size: 10px;
			}

			main {
				 background-color: green;
				 color: white;
				 padding: 10px;
			}

			main p {
				 margin: 10px 10px;
			}
	 </style>
</head>

<body>
	 <header>Frontend Development</header>
	 <!--create a main element-->
	 <main>
			<p>
				 Front-end web development is the development
				 of the graphical user interface of a website.
			</p>
			<p>
				 Through the use of HTML, CSS, and JavaScript,
				 so that users can view and interact with that 
				 website.
			</p>
	 </main>
</body>

</html>

导航到主要内容

在此示例中，我们将创建一个锚链接，其中包含 source（destination）作为 “main” 元素的 “id”。当用户点击锚链接时，它将跳过导航链接（即链接和主要元素之间）。


<!DOCTYPE html>
<html lang="en">

<head>
	 <title>HTML main Tag</title>
	 <style>
			ul {
				 list-style: none;
				 height: 1600px;
			}

			ul li {
				 width: 100px;
				 background-color: lightgreen;
				 padding: 10px;
				 border-bottom: 1px solid black;
			}

			ul li a {
				 text-decoration: none;
				 margin: 10px;
			}

			main {
				 padding: 10px;
			}
	 </style>
</head>

<body>
	 <p>Example of the HTML 'main' element</p>
	 <a href="#maincontent">Skip to main content</a>
	 <nav>
			<ul>
				 <li>
						<a href="">Home</a>
				 </li>
				 <li>
						<a href="">About</a>
				 </li>
				 <li>
						<a href="">Blog</a>
				 </li>
				 <li>
						<a href="">Contact Us</a>
				 </li>
			</ul>
	 </nav>
	 <main id="maincontent"> 
			<p>
				 It can be used only once per page and can’t use 
				 as a descendent of the article, aside, footer, header, 
				 and nav elements.

				 The content of the <main> tag should be unique to
				 the document. The <main> tag does not affect the 
				 DOM’s concept of the structure of the page.
			</p> 
	 </main>
</body>

</html>

支持的浏览器

浏览器
是否支持	26.0	12.0	21.0	7.0	16.0

打印本页