html常用的结构元素是什么

导读 html常用的结构元素有:1、div,可定义文档中的分区或节,用于为HTML文档内大块(block-.....

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>

1.jpg

说明: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中文网其他相关文章!

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。2022-09-15 18:00:30

猜你喜欢

最新文章