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

<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网站建设存在的问题也比较明显，主要表现在：

优点：

缺点：

常见命名

.wrap或.wrapper--用于外侧包裹

.container或.ct--包裹容器

.header--用于头部

.body--页面 body

.footer--页面尾部

.aside、sidebar--用于侧边栏

.content--和header footer对应，用于主要内容

.navigation--导航元素

.pagination--分页

.tabs >.tab--tab切换

.breadcrumbs--导航列表、面包屑

.dropdown--下拉菜单

.article--文章

.main--用于主体

.thumbnail--头像、小图像

.media--媒体资源

.panel--面板

.tooltip--鼠标放置上去的提示

.popup--鼠标点击d出的提示

.button、btn--按钮

.ad--广告

.subnav--二级导航

.menu--菜单

.tag--标签

.message或.notice--提示消息

.summary--摘要

.logo--logo

.search--搜索框

.login--登录

.register--注册

.username--用户名

.passwprd--密码

.banne --广告条

.copyright--版权

.modal或.dialog--d窗

状态:

inverse--相反的

toggled--切换

switched--转换

original--起初的

initial--最初的

identified--识别

disabled--禁用

loading--加载

pending--等待

syncing--同步

default--默认

修饰:

dark--黑暗的

light--浅色的

shaded--深色阴影的

flat--平滑的

ghost--精灵

maroon--褐红色的

pale--白

intense--强烈的

twisted--扭曲的

narrow--狭窄的

wide--宽的

smooth--光滑的

separate--分离

clean--清洁的

sharp--锋利的

aligned--对齐的

元素:

pagination--分页

modal--情态动词

popup--d出

article--文章

story--故事

flash--闪光

status--现状

state--州立

media--媒体

block--快

card-卡

teaser--挑逗

badge--徽章

label--标签

sheet--片材

poster--海报

notice--通知

record--记录

entry--入门

item--项目

figure--图

square--广场

module--模块

bar--酒吧

button--按钮

action--行动

knob--旋钮

布局:

navigation--航行

wrapper--包装器

inner--内部的

header--页眉

footer--页脚

aside--在一边

section--部分

divider--除法器

content--内容

container--容器

panel--面板

pane--窗格

construct--建造

composition--作文

spacing--间距

frame--框架

---