Web网页设计·HTML篇（5）·布局标签

最新推荐文章于 2024-09-12 18:02:32 发布

李二。

最新推荐文章于 2024-09-12 18:02:32 发布

阅读量510

点赞数 9

文章标签： html 前端

本文链接：https://blog.csdn.net/s1316339343/article/details/137610270

版权

本文介绍了HTML的div和span标签的基本用法，强调了它们在布局中的容器角色。同时，提到了HTML5引入的有语义的布局标签，如header、footer、nav、article和section，以及它们对SEO和内容结构化的益处。

摘要由CSDN通过智能技术生成

这章我们学习布局标签，

HTML 提供了＜ div ＞与＜ span ＞两个比较特殊的标签，这两个标签没有语义，它们类似于一个盒子，用来装内容。当我们访问某些购物网站时，通常会采用格子布局来展示对应的商品。这类似于一个一个的盒子，每个盒子中装有对应的图片、文字等内容。

1.div 标签

<body>
    <div>csdn博主:李二</div>
</body>

当我们看演示图时，会发现与直接打入没什么区别

但是当我采用一些颜色来修饰盒子底纹时，会发现真的有格子

div 标签没有特定的含义,只是作为组合其他 HIIML 元素的容器,在默认情况 div 标签将占满一行,当存在在多个 div 标签时,将按照从从上到下的方式排列。

<body>
    <span>csdn博主:李二</span>
</body>

演示图与div标签没什么区别

span 标签也没有特定的含义，可作为文本的容器。 span 标签与 div 标签不同，在默认情况下，多个 span 标签可以存在于同一行，将按照从左到右的方式进行排列。< span ＞标签是没有语义的，它的作用就是设置单独的样式。

以前布局，基本用 div 来做。 div 对于搜索引擎来说，是没有语义的。HTML5推出了一些有语义的布局标签供开发者使用。

标签名	语义	单/双标签
header	整个页面，或部分区域的头部	双
footer	整个页面，或部分区域的底部	双
nav	导航	双
article	文章、帖子、杂志、新闻、博客、评论等	双
section	页面中的某段文字，或文章中的某段文字(里面文字通常会包含标题)	双
aside	侧边栏	双
maln	文档的主要内容(WHATWG没有语义，不支持)，几乎不用	双