html常见容器元素介绍与应用

html-css07

html常见容器元素介绍与应用,第1张

<div>可定义文档中的分区或节(division/section)。<div>标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。

<div>元素是块级元素,它是可用于组合其他 HTML 元素的容器。<div>元素没有特定的含义。 除此之外,由于它属于块级元素,浏览器会在其前后显示折行。如果与 CSS 一同使用,<div>元素可用于对大的内容块设置样式属性。

<div>元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。 使用 <table>元素进行文档布局不是表格的正确用法。<table>元素的作用是显示表格化的数据。

<span>标签被用来组合文档中的行内元素。

<span>元素是内联元素,可用作文本的容器。<span>元素也没有特定的含义。 当与 CSS 一同使用时,<span>元素可用于为部分文本设置样式属性。

HTML5 提供的新语义元素定义了网页的不同部分。

header元素:定义文档或节的页眉。

footer元素:定义文档或节的页脚。

nav元素:定义导航链接的容器。

section 元素:定义文档中的节。

article 元素:定义独立的自包含文章。

summary 元素:定义 details 元素的标题。

aside 元素:定义内容之外的内容(比如侧栏)。

示列:

<table>元素不是作为布局工具而设计的。<table>元素的作用是显示表格化的数据。 使用 <table>元素能够取得布局效果,因为能够通过 CSS 设置表格元素的样式。

优势:

劣势:

尽管div + css布局具有一定的优势,不过现阶段div + css网站建设存在的问题也比较明显,主要表现在:

优点:

缺点:

在自己尝试写一个网站的时候,前端页面的修改不可避免。无论用什么框架,都无法避免要用到container。一开始的时候这个container给我搞蒙了,不知道有什么用。有了容器,里面才能放水。

DIV标签和SPAN标签

①<div>(division)简单而言是一个区块容器标签,即<div></div>之间相当于一个容器,可以容纳段落、标题、表格、图片乃至章节、摘要和备注等各种HTML元素。

②<span>标签是专门针对样式表设计的标签。<span>标签与<div>标签一样,作为容器标签被广泛的应用在HTML语言中。在<span>和</span>中间同样可以容纳各种HTML元素,从而形成独立的对象。

注:<span>标签可以包含于<div>标签中,成为它的子元素,而反过来则不成立,即<span>标签不能包含<div>标签。