html常用的结构元素有:1、div,文档中的分区或节可以定义为HTML文档内大块(block-level)2.section,表示文档中的一个区域;3.article,表示文档、页面、应用或网站中的独立结构,其意在成为可独立分配的或可复用的结构;4、aside,表示几乎与其他页面内容无关的部分;5.header,表示页面头或块头。
前端(vue)入门精通课程:入学
本教程的操作环境:windows7系统、HTML5版、Dell G3电脑。
结构元素,又称区块元素,是定义区块内容范围的元素。在此之前,只有区块元素<div>一个,HTML新增了7个语义结构元素,包括<article>、<aside>、<nav>、<section>、<header>、<footer>、<main>
html常用的结构元素
div元素
div元素是用来做的HTML(标准通用标记语言下的一个应用)文档内大块(block-level)提供结构和背景元素的内容。
<div> 可定义文档中的分区或节(division/section)。
<div> 标签可以将文档分为独立和不同的部分。它可以用作严格的组织工具,不使用任何格式。
如果用 id 或 class 来标记 <div>,然后标签会变得更有效。
注释:<div> 也就是说,浏览器通常是一个块级元素 div 元素前后放置换行符。
提示:请使用 <div> 元素结合块级元素,使其格式化。
section元素
Section元素(<section>)表示文档中的区域(或节)是区块级的通用元素。例如,内容中的专题组通常包含标题(heading)。一般通过是否包含一个标题(<h1>-<h6> element)识别每个子节点作为子节点<section>
[注]如果元素内容可以分为几个部分,则应使用<article>而不是<section>;还有,不要把<section>元素被用作普通容器,应该是<div>的用法。 一般来说,一个<section>应出现在文档大纲中
article元素
<article>元素是指文档、页面、应用程序或网站中的独立结构,旨在成为独立分配或重用的结构。可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、互动组件或其他独立内容项目。当<article>元素嵌套使用时,代表与外部元素相关的文章。例如,代表博客评论<article>元素可嵌套在代表博客文章的<article>元素中
<article>元素的作者信息可以通过<address>元素提供,但不适合嵌套<article>元素;<article>元素的发布日期和时间可以通过<time>元素的pubdate属性表示
[注意]对<article>和<section>一定要加标题
aside元素
<aside>元素表示一个几乎与其他页面内容无关的部分,被认为是独立于内容的一部分,可以单独拆分而不影响整体。侧边栏一般用于表示不直接相关内容,<aside>内容与相关内容相互独立,缺少谁不影响对文本意义的理解。如广告、相关背景、文章引用内容等
nav元素
HTML导航栏(<nav>)描述一个包含多个超链接的区域,包括转移到其他页面或页面内其他部分的链接列表
并非所有的链接都必须使用<nav>元素,用于在导航栏中放置一些流行的链接,如<footer>元素常用于在页面底部包含一个不常用的元素,不需要添加<nav>的链接列表
一个网页也可能包含多个网页<nav>例如,一个是网站上的导航列表,另一个是页面上的导航列表
header元素
<header>元素表示页面头或块头,用于将介绍内容与块的辅助导航分组在一起,因此它可能包含块的标题元素和其他介绍内容(目录,logo等)
因为<header>和<footer>元素不是分节内容,所以不会在大纲中引入新的分节
footer元素
<footer>元素表示最新章节或根节点的内容(sectioning root)元素的页脚。页脚通常包含作者、版权数据或与文档相关的链接
[注意]<footer>元素中的作者信息应包含在元素中<address>元素中
案例说明:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>苹果首页</title> </head> <body> <nav> <ul> <li><a href="#">Apple</a></li> <li><a href="#">Mac</a></li> <li><a href="#">iPad</a></li> <li><a href="#">iPhone</a></li> <li><a href="#">Watch</a></li> <li><a href="#">Music</a></li> <li><a href="#">技术支持</a></li> <li><a href="#">搜索</a></li> <li><a href="#">购物袋</a></li> </ul> </nav> <article> <section>展示1</section> <section>展示2</section> <section>展示3</section> <section>展示4</section> <nav> <ul> <li>按钮1</li> <li>按钮2</li> <li>按钮3</li> <li>按钮4</li> </ul> </nav> </article> <aside> <ul> <li><a href="#">Watch</a></li> <li><a href="#">Pencil</a></li> <li><a href="#">iPad</a></li> <li><a href="#">MacBook</a></li> </ul> </aside> <footer> <nav> <div>选购及了解</div> <div>商店</div> <div>应用</div> <div>账户</div> <div>关于</div> </nav> <section> <div>其他杂项</div> </section> </footer> </body> </html>
说明:main
<main>不常用的主要原因是IE不支持浏览器
main元素(<main>)呈现了文档<body>或应用程序的主要部分。主要部分由与文档直接相关的内容组成,或扩展到文档的中心主题和应用程序的主要功能部分。这部分应该是文档中独一无二的,不包括在一系列文档中重复的任何内容
<main>标签不能继承以下元素,包括<article>、<aside>、<footer>、<header>、或<nav>。 一个以上不能出现在一个文档中 <main>标签
因此,正常的最外层布局应如下
<header></header> <main> <section></section> <section></section> <section></section> </main> <footer></footer>
但现在,一般布局如下
<header></header> <section></section> <section></section> <section></section> <footer></footer>
(学习视频分享:web前端入门)
以上就是html常用的结构元素是什么?请多注意php中文网其他相关文章!