• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > html5 main标签是什么意思?html5 main标签作用的详细介绍

html5 main标签是什么意思?html5 main标签作用的详细介绍

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含html5 main标签,html5 main标签使用说明等相关知识,匿名希望在学习及工作中可以帮助到您
html5 main标签是什么意思?html5 main标签作用又有哪些?本篇文章主要讲了html5 main标签的定义及其具体的作用,还有关于html5 main标签的使用详细说明。

首先,我们来了解一下html main是什么意思:

html5 main标签的定义和作用:

<main> 标签规定文档的主要内容。

<main> 元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容,比如侧栏、导航栏、版权信息、站点标志或搜索表单。

注释:在一个文档中,不能出现一个以上的 <main> 元素。<main> 元素不能是以下元素的后代:<article>、<aside>、<footer>、<header> 或 <nav>。

<main> 标签是 HTML 5 中的新标签。

早在 2013 年,<main> 元素就被正式添加到 W3C HTML 规范中,到目前为止,关于该元素的定义已经很完善了,所以现在是时候深入了解什么时候适合使用 <main> 元素了。那么,下面就开始吧。

W3C 规范

<main> 的主要目的是将 ARIA 的地标性作用 main 映射到 HTML 中的元素。这可以帮助那些屏幕阅读设备和辅助设备知道页面的主要内容是从哪里开始的。

W3C 规范将 <main> 描述为 :

文档或应用程序的主要内容。主内容区域由与文档的中心主题或应用的核心功能的直接相关或扩展的内容组成。

自从 <main> 元素包含在 HTML 规定里之后,<body> 元素就还原成了它在 HTML4 中的定义。

The body element represents the content of the document.

html5 main标签具体使用的作用:

使用 <main> 元素值得注意的一点是,它在每个页面中只能使用一次。为什么要规定一个页面只能使用一次呢?虽然我对具体的细节并不感兴趣,但是有些观点看起来还是比较有意义的。

按照规格,如果你在一个文档中试图使用多个 <main> 标签,那么 W3C validator 会抛出错误。

<main> 元素的另外一个规定是,它不能作为 <article>, <header>, <aside>, <footer>, <nav> 的子元素节点。

html5 main标签的具体使用:

就像其它的 HTML5 新元素一样,并不是所有的浏览器都能够识别出 <main> ,并且给它加上预设的样式,你可能需要在自己的 CSS 文件中将它设置为块级元素。

main {display:block;}

有的时候,为了支持一些较低版本的 IE 浏览器,你可能还需要使用 JavaScript 创建该元素。

<script type="text/javascript">document.createElement('main');</script>

当然了,你还可以使用 html5shiv.

使用 <main> 元素最简单的方式就是去替换那些 ID 或者 Class 值为 main 或者 content 之类的 <div> 元素。

所以,在实践中它应该是什么样子呢?下面是使用 <main> 元素之前的文档结构。

<header>Header</header>
<div id="content">Main Content</div>
<footer>Footer</footer>

下面使用 <main> 元素改写文档。

<header>Header</header>
<main id="content">Main Content</main>
<footer>Footer</footer>

好了,这是如此的简单,以至于一分钟不到我们就可以将文档改写成新潮的 HTML5 样式。

【相关推荐】

HTML5<progress>标签是什么意思?HTML5<progress>标签的基本用法详解

html textarea是什么意思?如何获取textarea标签中的换行符和空格?

以上就是html5 main标签是什么意思?html5 main标签作用的详细介绍的详细内容,更多请关注微课江湖其它相关文章!

您可能想查找下面的文章:

  • html5 main标签是什么意思?html5 main标签作用的详细介绍

相关文章

  • 2018-12-03HTML5的结构和语义(1):前言_html5教程技巧
  • 2018-12-03Html5 中的 WebSocket通信
  • 2018-12-03SVG基础|SVG PATH 元素
  • 2018-12-03几个解决兼容IE678不支持html5标签的几个方法_html5教程技巧
  • 2018-12-03HTML5画渐变背景图片并自动下载实现步骤_html5教程技巧
  • 2018-12-03为什么人人网把 iOS 客户端从原生写成 HTML5,Facebook 却将半 HTML5 重写成原生?
  • 2018-12-03还要多少年, 前端开发才能像客户端开发那样轻松?
  • 2018-12-03用HTML5中的Canvas结合公式绘制粒子运动的教程_html5教程技巧
  • 2018-12-03HTML5中缩略词标记的重要作用
  • 2018-12-03关于H5的pushState和replaceState的用法分析

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • html5是什么意思
    • 小强的HTML5移动开发之路(47)——jquery mobile基本的页面框架
    • 介绍HTML5+Canvas调用手机拍照功能实现图片上传(下篇)
    • 网页中的电话号码如何实现一键直呼效果_附示例
    • HTML5实践-使用css3如何完成google涂鸦动画的详解
    • html5的自定义data-*属性与jquery的data()方法的使用
    • 关于7 个顶级的 HTML5 Canvas 动画图文赏析
    • HTML5新特性之多线程(Worker SharedWorker)的代码详解
    • HTML5 Canvas API中drawImage()方法的使用实例
    • html5 canvas里绘制椭圆并保持线条粗细均匀的技巧_html5教程技巧

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有