• 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

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

本文主要包含HTML5 ,语义化,main等相关知识,匿名希望在学习及工作中可以帮助到您
 早在 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.

  细节

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

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

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

  使用

  就像其它的 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 样式。

  总结

  正如你所见的,使用 <main> 元素是超级简单的,只需要话费几分钟的时间,所以现在真的到了将 <main>带入到网站开发的过程中了。

以上就是HTML5 语义化 - main的内容,更多相关内容请关注微课江湖()!

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

  • HTML5的本地存储
  • Define charset for HTML5 Doctype
  • HTML5 canvas如何绘制动态径向渐变
  • 如何使用HTML5 Canvas绘制动态线性渐变
  • HTML5 canvas如何实现马赛克的淡入淡出效果(代码)
  • HTML5 canvas中如何绘制图像
  • 如何使用HTML5 canvas实现图像的马赛克
  • html5 canvas实现简单的双缓冲
  • HTML5 Canvas 图形组合是如何实现的?附代码
  • HTML5 figure标签是什么意思?HTML5 figure标签的使用方法详解

相关文章

  • 2018-12-03HTML5各引擎显示效率比较
  • 2018-12-03HTML5 移动开发未来可否取代 iOS 和安卓?
  • 2018-12-03MUI顶部选项卡的用法
  • 2018-12-03W3C公布最新的HTML5标准草案_html5教程技巧
  • 2018-12-03canvas游戏开发学习之八:组合
  • 2018-12-03详解html5 canvas常用api总结(二)--绘图API
  • 2018-12-03HTML5标准学习-文档结构详解
  • 2017-08-06HTML5的文档结构和新增标签完全解析
  • 2018-12-03H5+C3实现旋转木马相册
  • 2018-12-03使用HTML5 canvas实现一个简单的粒子引擎代码实例

文章分类

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

最近更新的内容

    • mui的页面跳转方式
    • HTML5 DragEvent接口的实例讲解
    • 关于移动端H5页面中1px边框的解决方法
    • html5 worker 实例(二) 图片变换效果
    • 关于8个超炫酷仿苹果应用的HTML5动画的图文详解
    • 初学者可以跳过 HTML 直接学习 HTML5 吗?
    • 详解html5 Canvas drawing的示例代码(三)
    • H5页面在iOS网页中的数字被识别为电话号码数字颜色自动被改变成蓝色
    • 使用 HTML5 Canvas 制作水波纹效果点击图片就会触发_html5教程技巧
    • 通过手机浏览器打开APP或者跳转到下载页面的实现

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

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