HTML5学习系列之主结构

HTML5学习系列之主结构

  • 前言
  • HTML5主结构
    • 定义页眉
    • 定义导航
    • 定义主要区域
    • 定义文章块
    • 定义区块
    • 定义附栏
    • 定义页脚
  • 具体使用
  • 总结


前言

学习记录


HTML5主结构

定义页眉

head表示页眉,用来表示标题栏,引导和导航作用的结构元素。

<header role="banner">
header>
  • 可以使用h1~h6
  • 不可以header中再嵌套footer或header

定义导航

nav表示导航条,可以使用多个nav,作为页面整体或不同部分的导航。

<nav draggable="true">
	<a href="index.html">首页a>
nav>

定义主要区域

main表示主要区域,用于标识网页的主要内容,并且唯一。

定义文章块

article表示文章块,用来标识页面中一块完整的、独立的、可以转发的内容。

定义区块

section表示区块,用于标识文档中的节,多用于对内容进行分区。标记的是页面中的特定区域。

<main role="main">
	<h1>主要标题h1>
	<section>
		<h2>xxh2>
	section>
main>

定义附栏

aside表示附栏,用来标识所处内容之外的内容。作为主体内容的附属信息部分,包含在article中。作为页面或站点辅助功能部分,在article之外使用。

定义页脚

footer表示脚注,用来标识文档或节的页脚。

具体使用

<header>
	<h1>[网页标题]h1>
	<h2>[次级标题]h2>
	<h3>[标题提示]h3>
header>
<main>
	<nav>
		<h3>[导航栏]h3>
		<a href="#">链接1a>
	nav>
	<section>
		<h2>[文章块]h2>
		<article>
			<header>
				<h1>[文章标题]h1>
			header>
			<p>[文章内容]p>
			<footer>
				<h2>[文章脚注]h2>
			footer>
		article>
	section>
	<aside>
		<h3>[辅助信息]h3>
	aside>
	<footer>
		<h2>[网页脚注]h2>
	footer>
main>

HTML5学习系列之主结构_第1张图片


总结

学习记录

你可能感兴趣的:(前端HTML,html5,学习,前端)