数据结构
网络
关系型数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 HTML5 中显示文档的主要内容？
要显示文档中的主要内容，我们使用 <main> 标签。<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日
203 次浏览
广告