`

HTML 5中又新增加main标签

阅读更多
HTML 5新增加的标签元素已经够多的了,在2013年2月份,又增加了<main>标签,参考:
http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-main-element

  其中定义如下:
The main element represents the main content of the body of a document or application. The main content area consists of content that is directly related to or expands upon the central topic of a document or central functionality of an application.

Authors must not include more than one main element in a document.

Authors must not include the main element as a child of an article, aside, footer, header or nav element

   也就是说,它是表达了document中的body的主要内容,但不能在一个document中有多个main,不能在article,aside,footer,header或者nav中包含main.下面是个例子:
 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Using main</title>
</head>
<body>
	<header>My page</header>
	<nav>
		[url=#]Home[/url]
	</nav>
	<main>
		<article>
			<h1>My article</h1>
			Content

		</article>
		<aside>
			More information

		</aside>
	</main>
	<footer>Copyright 2013</footer>
</body>
</html>



    标准中的又一个例子:

<main>

  <h1>Skateboards</h1>
  The skateboard is the way cool kids get around

  
  <article>
  <h2>Longboards</h2>
  Longboards are a type of skateboard with a longer 
  wheelbase and larger, softer wheels.

  ... 

  ... 

  </article>

  <article>
  <h2>Electric Skateboards</h2>
  These no longer require the propelling of the skateboard
  by means of the feet; rather an electric motor propels the board, 
  fed by an electric battery.

  ... 

  ... 

  </article>

</main>

  <!-- other content -->

  
2
0
分享到:
评论

相关推荐

    详细的HTML5标签介绍

    除了基础标签,HTML5还引入了许多新的标签和功能,比如用于定义导航菜单的、用于定义独立内容区域的、用于定义侧边栏内容的、用于定义页面主要内容的&lt;main&gt;等等。这些新标签帮助开发者更好地构建网页结构,提高了...

    html5简单的选择题提交答案代码.zip

    5. **事件处理**:HTML5中的事件处理更加强大,可以利用`addEventListener`绑定事件监听器,实现点击按钮提交答案的功能。此外,还可以使用`form`的`submit`事件来捕获并处理表单提交。 6. **CSS3**:虽然不是HTML5...

    HTML5入门与新增标签学习总结.docx

    HTML5 中删除了一些过时的标签,例如`&lt;frame&gt;`和`&lt;frameset&gt;`,这些标签在网页布局中不再使用,因为它们不利于现代网页的响应式设计和语义化。同时,引入了一些新的标签,以更好地表达文档结构和内容。 1. `...

    HTML5入门ppt

    - **废弃旧标签**:HTML5去除了HTML4中的部分标签,比如`&lt;acronym&gt;`、`&lt;applet&gt;`等。 - **全新的表单设计**:HTML5引入了新的表单控件和属性,如`&lt;input type="date"&gt;`、`&lt;input type="range"&gt;`等。 - **绘图功能**...

    标准html5贷款页面

    在贷款首页中,HTML5的语义化标签如、、&lt;main&gt;、和被用于构建页面结构,使内容更加清晰易懂,同时利于搜索引擎优化(SEO)。 接着,列表页通常包含多个贷款产品,HTML5的标签可以用来组织各个产品块,而和标签则...

    网站模板html5秀气清爽个人博客html源码模板.zip

    HTML5技术是现代网页开发的重要基础,它引入了许多新的元素和功能,旨在提高网页的可读性、可访问性和互动性。"网站模板html5秀气清爽个人博客html源码模板.zip"是一个专为个人博客设计的HTML5模板,旨在为用户提供...

    HTML标签语法变化和使用概念.docx

    在浏览器支持方面,现代浏览器如Safari、Chrome、Firefox和Opera已广泛支持HTML5特性,而Internet Explorer 9及以上版本也逐步增加了对HTML5的支持。随着HTML5的发展,许多旧的、过时的标签被废弃,同时引入了更多...

    HTML5使用文档

    此外,HTML5 还增加了如`&lt;article&gt;`、`&lt;aside&gt;`、`&lt;main&gt;`等语义化标签,这些标签有助于改善网页的结构和可读性,使搜索引擎优化(SEO)更加友好。 HTML5 增加的新特性包括: 1. 语义特性:如`&lt;header&gt;`、`&lt;footer&gt;...

    Html5精通中文教程

    HTML5中的`&lt;audio&gt;`标签允许开发者直接在网页中播放音频文件,类似于视频标签。 - **基本用法**: - `&lt;audio&gt;`标签可以包含一个或多个`&lt;source&gt;`子标签,用于指定不同格式的音频文件。 - `controls`属性用来显示...

    html5标题下载以及和HTML4的区别

    在HTML5中,开发者可以更方便地创建结构化内容和交互式的网页。 ### 新增标签 HTML5引入了许多新的标签,这些标签更加具有语义性,帮助开发者更好地表达网页内容的结构和意义。例如: 1. `&lt;article&gt;`:用于定义一...

    HTML5实现烟花效果

    HTML5是一种强大的网页开发语言,它为创建动态、交互式的网页内容提供了许多新的元素和功能。在本案例中,我们将探讨如何使用HTML5来实现炫丽的烟花效果。这一效果通常通过结合HTML、CSS(级联样式表)和JavaScript...

    H5实现的点餐页面

    在描述中的“点餐页面”,我们可能会看到`&lt;header&gt;`、`&lt;nav&gt;`、`&lt;main&gt;`、`&lt;section&gt;`等语义化标签,这些标签有助于提高页面的可读性和可访问性。 接着,HTML5的表单控件是实现点餐功能的关键。开发者可能使用了`...

    html5迷宫网页游戏代码.zip

    在HTML5中,`&lt;header&gt;`、`&lt;nav&gt;`、`&lt;main&gt;`、`&lt;article&gt;`和`&lt;footer&gt;`等语义化标签被广泛使用,以增强页面的可读性和可访问性。此外,游戏的界面元素,如游戏区、控制按钮、得分显示等,可能通过`&lt;div&gt;`、`&lt;span&gt;`等...

    html5网络科技公司模板 整站模板

    首页作为网站的门户,通常包含公司简介、特色服务、最新动态等关键信息,利用HTML5的语义化标签如、、&lt;main&gt;、、等,可以更好地组织内容,提高搜索引擎优化(SEO)的效果。此外,HTML5的多媒体支持如、标签使得在...

    520表白html5爱心代码

    HTML5的核心在于其增强了的语义化标签,如`&lt;header&gt;`, `&lt;footer&gt;`, `&lt;section&gt;`, `&lt;article&gt;`等,这些标签帮助我们构建结构清晰、易于理解的网页。在表白页面中,可能使用`&lt;header&gt;`来设置页面头部,包含标题或者...

    [HTML5.Hacks(2012.11)].Jesse.Cravens.文字版.pdf

    HTML5中的`&lt;progress&gt;`、`&lt;meter&gt;`、`&lt;details&gt;`等新标签为创建动态和响应式的表单提供了更多可能性,它们可以用来显示进度条、计量器或可折叠的详情区域,使得表单更加直观且易于使用。 ### Hack07:通过新的DOM...

    在Android XML布局中支持HTML标签-Android开发

    使用覆盖LayoutInflater以在布局中启用HTML标签(请参阅./example项目):import wtf.g4s8.htmllayout.HtmlInflater; 公共类MainActivity扩展了AppCompatActivity {@Override protected void onCre Use Override ...

    简洁大图幻灯线条式html5网站模板_灰色html5_html网站模响应式源码.rar

    HTML5是超文本标记语言的最新版本,它在HTML4的基础上进行了许多改进和扩展,增加了新的标签、API和多媒体支持。例如,`&lt;video&gt;`和`&lt;audio&gt;`标签使得网页可以直接内嵌视频和音频内容,无需依赖Flash等第三方插件。...

    HTML5从入门到精通

    HTML5不仅继承了HTML4的所有特性,还增加了许多新的功能和元素,使其更加适应现代互联网的需求。 #### 二、HTML5的新特性 1. **语义化标签**:如`&lt;header&gt;`、`&lt;footer&gt;`、`&lt;nav&gt;`、`&lt;article&gt;`等,这些新标签不仅...

Global site tag (gtag.js) - Google Analytics