无语义容器元素
div 元素
<div> 可定义文档中的分区或节（division/section）。<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
<div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。
<div>
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>
div元素
span 元素
<span> 标签被用来组合文档中的行内元素。
<span> 元素是内联元素，可用作文本的容器。<span> 元素也没有特定的含义。当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。
<p><span>some text.</span>some other text.</p>
span元素
语义化容器元素（html5的新元素）
HTML5 提供的新语义元素定义了网页的不同部分。
header 元素
header元素：定义文档或节的页眉。
footer 元素
footer元素：定义文档或节的页脚。
nav 元素
nav元素：定义导航链接的容器。
section 元素
section 元素：定义文档中的节。
article 元素
article 元素：定义独立的自包含文章。
summary 元素
summary 元素：定义 details 元素的标题。
aside 元素
aside 元素：定义内容之外的内容（比如侧栏）。
示列：
<header>
<h1>定义文档或节的页眉</h1>
</header>
<nav>定义导航链接的容器
London<br>
Paris<br>
Tokyo<br>
</nav>
<section>定义文档中的节
<h1>London</h1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</section>
<section>
<article>
<summary>定义 details 元素的标题</summary>
定义独立的自包含文章定义独立的自包含文章定义独立的自包含文章定义独立的自包含文章定义独立的自包含文章定义独立的自包含文章定义独立的自包含文章定义独立的自包含文
</article>
</section>
<footer>
定义文档或节的页脚
</footer>
<style>
header {
background-color: black;
color: white;
text-align: center;
padding: 5px;
}
nav {
line-height: 30px;
background-color: #eeeeee;
height: 300px;
width: 100px;
float: left;
padding: 5px;
}
section {
width: 350px;
float: left;
padding: 10px;
}
footer {
background-color: black;
color: white;
clear: both;
text-align: center;
padding: 5px;
}
</style>
示列
表格的 HTML 布局
<table> 元素不是作为布局工具而设计的。<table> 元素的作用是显示表格化的数据。使用 <table> 元素能够取得布局效果，因为能够通过 CSS 设置表格元素的样式。
<table class="lamp">
<tr>
<th>
th
</th>
<td>
The table element was not designed to be a layout tool.
</td>
</tr>
</table>
<style>
table.lamp {
width: 100%;
border: 1px solid #d4d4d4;
}
table.lamp th,
td {
padding: 10px;
}
table.lamp td {
width: 40px;
}
</style>
表格元素
面试题：
1. div + css布局的好处。
优势：
- 1.符合w3c标准。可以保证网站不会因为将来网络应用的升级而淘汰。
- 2.对浏览者和浏览器更具亲和力。由于css富含丰富的样式，使页面更具灵活性，可以根据不同的浏览器，而达到显示效果的统一和不变形。这样就支持浏览器向后兼容。
- 3.使页面载入更快。页面体积小，浏览器速度变快，由于将大部分页面代码写在了css当中，使得页面体积容量变得更小。相对于表格（table）嵌套方式，div + css将页面独立成更多的区域，在打开页面时，逐层加载。而不像表格嵌套那样将整个页面圈在一个大表格里，使得加载速度很慢。
- 4.保持视觉的一致性。表格（table）嵌套的方式，会使得页面与页面、或者区域与区域之间的显示效果会有偏差。而使用div + css的方式，将所有页面、或所有区域统一用css文件控制，就避免了不同区域或不同页面体现出的效果偏差。
- 5.修改设置样式时更有效率。由于使用div + css布局方式，使得内容结构和样式分离，在修改页面内容结构和样式的时候更加容易和省时。根据区域内容标记，到css里找到相应的样式，使得修改页面样式时更加方便快捷，也不会破坏页面其他部分的样式布局，这在团队开发中更容易实现分工合作，使得分工合作更有效率。
- 6.对搜索引擎更加友好。相对于传统的table布局，采用div + css布局，由于将大部分的html代码和内容样式写入了css文件中，这就使得网页中代码更加简洁，便于搜索引擎采集收录。
劣势：
尽管div + css布局具有一定的优势，不过现阶段div + css网站建设存在的问题也比较明显，主要表现在：
- 1.对于css的高度依赖使得网页设计变得复杂。相对于table布局复杂的多。
- 2.css文件加载异常将影响整个页面的正常浏览。css网站制作的样式设置通常放在一个或几个外部文件中，这些文件有可能相当复杂，甚至比较庞大，如果css调用出现异常，那么整个网站就不能正常浏览。
- 3.对于css网站设计的浏览器兼容性问题比较突出。虽然说div + css解决了大部分浏览器兼容问题，但是在部分浏览器调用css时也会出现异常情况。
- 4.div + css对搜索引擎优化与否取决于网页设计的专业水平而不是取决于div + css布局本身。div + css网页设计并不能保证网页对搜索引擎的优化，因为对于搜索引擎而言，网站结构、内容、相关网站链接等因素始终是网站优化最重要的指标。
2.table的优缺点？
优点：
- 某些场合使用table是非常合适、恰当和正确的。比如，用table做表格是完全正确的。
缺点：
- 1.table会延迟下载时间，占用服务器更多的流量资源。table要比其它html元素占用更多的字节。
- 2.table会延迟页面的生成速度，让用户等待更久的时间。table会阻挡浏览器渲染引擎的渲染顺序。
- 3.table会增加页面加载时间，增加http会话数、增加设计复杂度。
- 4.在某些浏览器中table里文字的拷贝会出现问题。影响用户的体验感。
- 5.table会限制页面的自由性。table会影响其内部的某些布局属性的生效。
- 6.table布局比div + css布局更麻烦。
- 7.table相对于页面布局来说，从语义上是不正确的。table描述的是表现，而不是内容。
- 8.table布局不能利用css样式。
- 9.table很难通过css来改变页面样式。
3.很多网站不常用table元素的原因。
- table的内容会等内部的所有内容加载完成才会显示，比基于div + css实现的表格布局加载速度慢。
- table会导致网页语义发生错误，不利于无障碍功能。
改动table内部内容会造成整个table重绘，消耗更多资源。 - table前期广泛应用于后台管理系统布局，由于普通的后台管理系统大多是表格布局，基于table编程难度低，且面向内网的管理系统对性能要求不高。
