【HTML教程】HTML的main标签|html入门知识
时间: 2025-02-20 18:22:56 浏览次数：13
常用的html标签汇总、以及操作过程中的一些bug问题解决方法，以下龙腾飞网络科技-小吴在建站实操中笔记记录，一路走来，一步步学习、总结、整理的一些资料，不用死记硬背，保存使用非常方便，实操过程中遇到了就查询搜索一下，实践出真章，做多了自然就熟悉了：【定义和用法】main 标签规定文档的主要内容。main 元素中的内
常用的html标签汇总、以及操作过程中的一些bug问题解决方法，以下龙腾飞网络科技-小吴在建站实操中笔记记录，一路走来，一步步学习、总结、整理的一些资料，不用死记硬背，保存使用非常方便，实操过程中遇到了就查询搜索一下，实践出真章，做多了自然就熟悉了：
【定义和用法】
main 标签规定文档的主要内容。
main 元素中的内容对于文档应该是唯一的。不应包含在多个文档中重复出现的内容，例如侧边栏、导航链接、版权信息、网站标志和搜索表单等。
注意：文档中不能有多个 main 元素。 main 元素不能是 article、aside、footer、header 或 nav 元素的后代元素。
【实例】
例子 1
指定文档的主要内容：
<main> <h1>龙腾飞网络科技</h1> <p>龙腾飞网络科技致力于建立企业发展无缝对接的服务体系！</p> <article> <h2>高新技术企业评估系统</h2> <p>家高新技术企业认定预评测评估,高新技术企业认定评测系统模拟高企申报评分,帮助企业在申报高新技术企业认定前进行评估预测,分析建议......</p> </article> <article> <h2>微信小程序开发</h2> <p>,微信小程序商城开发微信小程序或百度小程序给企业的客户全新的体验、优质的用户界面与交互、打通企业销售渠道、留住公司客户群,选择龙腾飞……</p> </article> <article> <h2>app软件开发</h2> <p>为客户开发安卓版app、苹果app等软件系统，节省企业客户宣传费用，独立应用运行便捷操作，给企业的客户最佳的体验……</p> </article> </main>
例子 2
使用 CSS 设置 main 元素的样式：
<html>
<head>
<style>
main {
margin: 0;
padding: 5px;
background-color: lightgray;
}
main > h1, p, .browser {
margin: 10px;
padding: 5px;
}
.browser {
background: white;
}
.browser > h2, p {
margin: 4px;
font-size: 90%;
}
</style>
</head>
<body>
<main>
<h1>龙腾飞网络科技</h1>
<p>龙腾飞网络科技致力于建立企业发展无缝对接的服务体系！</p>
<article>
<h2>高新技术企业评估系统</h2>
<p>家高新技术企业认定预评测评估,高新技术企业认定评测系统模拟高企申报评分,帮助企业在申报高新技术企业认定前进行评估预测,分析建议......</p>
</article>
<article>
<h2>微信小程序开发</h2>
<p>,微信小程序商城开发微信小程序或百度小程序给企业的客户全新的体验、优质的用户界面与交互、打通企业销售渠道、留住公司客户群,选择龙腾飞……</p>
</article>
<article>
<h2>app软件开发</h2>
<p>为客户开发安卓版app、苹果app等软件系统，节省企业客户宣传费用，独立应用运行便捷操作，给企业的客户最佳的体验……</p>
</article>
</main>
</body>
</html>