数据结构
网络
关系型数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学如何在HTML5中显示文档的主体内容？
为了显示文档中的主要内容，我们使用<main>标签。<main>标签包含开始和结束标签，其间的内容对于文档是唯一的，它不包含在多个文档中重复的内容，例如导航链接、网站徽标、侧边栏和搜索表单。
在一个文档中，应该只有一个<main>元素。<main>元素不能是<aside>、<footer>、<article>或<nav>元素的子元素。
<main>标签几乎所有浏览器都支持，也支持全局和事件属性。
语法
以下是HTML中<main>标签的用法：
<main> …….. </main>
示例
以下示例演示如何显示文档的主要内容。
<!DOCTYPE html>
<html>
<body>
<main>
<h1>Learning</h1>
<p>Learn to gain experience and try to share your knowledge with others.</p>
<article>
<h3>Web Development Tutorials</h3>
<p>Consist of CSS, HTML, and PHP tutorials for 2nd Semester exams.</p>
</article>
<article>
<h3>Academic Tutorials</h3>
<p>Consist of Computer Fundamental, Computer Network tutorials for 1st Semester exams.</p>
</article>
</main>
</body>
</html>
HTML5中的<article>标签
在上面的示例中，我们使用了<article>标签，它位于<main>标签的开始和结束标签之间。<article>标签用于表示一篇文章；它是HTML5中新的分节元素。
<article>标签中的内容与网站的其他内容相比是独立的，或者它表示页面、网站或文档中包含自包含构成的页面组件。
示例
以下示例解释了HTML5中<article>标签的用法：
<!DOCTYPE html>
<html>
<head>
<title> Display the main content of a document using HTML5 </title>
</head>
<body>
<h2>TutorialsPoint</h2>
<article style="width: 300px; border: 2px solid gray; padding: 10px; border-radius: 10px; margin: 5px;">
<img src="https://tutorialspoint.com/images/logo.png?v2" alt="tutorials" width="300" height="50" class="alignnone size-medium wp-image-560930" />
<h1>TutorialsPoint</h1>
<p>Tutorials Point is a leading Ed Tech company striving to provide the best learning material on technical and non-technical subjects.</p>
</article>
</body>
</html>
示例
让我们看看另一个使用<main>和<article>标签显示文档主要内容的示例：
<!DOCTYPE html>
<html>
<head>
<style>
main {
margin: 0;
padding: 5px;
background-color: lightgreen;
}
main>h1,
p,
.browser {
margin: 10px;
padding: 5px;
}
.web {
background: white;
}
.web>h2,
p {
margin: 4px;
font-size: 90%;
}
</style>
</head>
<body>
<h1>Displaying main content in document by applying CSS</h1>
<main>
<h1>Popular Web Development Languages</h1>
<p>HTML, JavaScript, and Angular are the most used Web Development Language</p>
<article class="web">
<h2>HTML</h2>
<p>HTML stands for Hyper Text Markup Language, which is the most widely used language on Web to develop web pages. HTML was created by Berners-Lee in late 1991 but "HTML 2.0" was the first standard HTML specification which was published in 1995. </p>
</article>
<article class="web">
<h2>JavaScript</h2>
<p>JavaScript is a lightweight, interpreted programming language. It is designed for creating network-centric applications. It is complimentary to and integrated with Java. JavaScript is very easy to implement because it is integrated with HTML. It is open and cross-platform.</p>
</article>
<article class="web">
<h2>Angular</h2>
<p>Angular 8 is an open source, TypeScript based frontend web application framework. Angular 8 has been released by Google’s Angular community.</p>
</article>
</main>
</body>
</html>
更新于：2023年10月10日
205 次浏览
广告