資料結構
網路
關係型資料庫管理系統 (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.tw/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 次瀏覽
廣告