转自http://www.cnblogs.com/CoreCaiNiao/archive/2011/06/19/2084651.html
说句实话，“DIV+CSS”这个词汇不知道害了多少人，也许其提出者本意并没有错，但是跟风者从表现曲解了其意思，认为整个页面就应当是DIV+CSS文件的组合。这样做，对于视觉上并没有什么影响，因为还原了之前设计的页面效果图，但如果这种HTML文档交给机器（例如蜘蛛）去分析，它可能根本找不到重点，你整个页面对它来说，就如同一个白蚁窝，它第一件要做的事情可能就是把这些相同的东西给去掉，然后再做内容的筛选。
搜索引擎的的发展让互联网业诞生了一个职业“SEO”，因为要做“关键字”，所以几乎所有的“SEO”都把“技术核心”放在研究关键字上，除了让标题，keywords,description及整个文档布满可能被搜索引擎感兴趣的关键字外。甚至于图片的alt属性，文字容器的title属性都是“关键字”，这样看似完美的“SEO技术”往往忽略了2个重要的地方：1、HTML标签的定义。2、页面的精简。前者让搜索引擎对整个页面各处的“含义”有所“了解”，后者提高了访问速度，降低了服务器负载。可惜的是“SEO”们往往不懂HTML及负载为何物，写代码的人往往又不懂“SEO技术”，这可能造成了相当大的职业瓶颈，而急功近利的心态驱使又使得这两种职业互不学习、各行其是。
我的开发经历中，曾经遇到过通篇HTML标签全DIV的，貌似除了<head>之上及<body>之外，其它全是<div>（我的理解是：整个HTML是一万个毫不相干的内容拼装起来）;也曾遇到过通篇是<div><ul><li>结构的（我的理解是：这个页面所有元素全是列表）。事实上这两种情况还相当普遍，因为曲解了“DIV+CSS”的真实含义，也许根本就不应该有这个说法，因为一个完整页面几乎不可能仅仅DIV+CSS就能完成；这个名词的本义可能是“以DIV进行分割的HTML + CSS呈现”，我相信如果说“HTML+CSS”更加靠谱，但这样说又不能体现“流布局”的“普及程度”...真是伤透脑筋。
HTML标签有50多种，详见http://www.w3.org/TR/html5/spec.html#contents第4章节，我们常用的HTML标签（除了表单标签）主要有以下一些：
div,ul,ol,li,dl,dt,dd,p,span,h1-h6,label,em,strong,img,a,u,b,i,s...
我觉得有必要说出它们的定义，之后给它们分分组，w3c的分组比我这科学，但没我这好懂：
div：division(分开, 分割, 区分,分配, 分界线),标签可以把文档分割为独立的、不同的部分。作为块级元素的代表，因为没有固定的格式表现，目前滥用情况最严重。
ul:Unordered List（无序列表）与li元素组合成团体。
ol:ordered list （有序列表）与li元素组合成团体。
li:list item（列表的项目）"必须"在父级ul或ol容器之内，这个必须是我自己加的。w3c只是这样说：
Contexts in which this element can be used:
Inside ol elements.
Inside ul elements.
Inside menu elements.
我在其前面加了个must，以表示此问题的严峻性^^
dl:definition list（定义列表）与dt（definition term定义的项目）及dd（definition description定义的描述）组合成一个团体。
p:paragraph（段落）用于存放文章的一段。
span：Span（范围）标签是被用来组合文档中的小节内容。作为内联元素，也因其没有固定的格式表现，目前滥用也比较多。
h1-h6：Head（标题1到标题6），请注意这里的Head表示其含义，不同于<head>标签，也不要认为与<title>有任何关系。这里仅仅是突出文档内容的标题。
注意，搜索引擎如果发现页面中存在h标签，会认为其中的内容比较重要，重要程度从1到6逐渐降低。
label:Label（针对表单控件的标签），它的名字就叫标签，只不过在这里，w3c给的定义是，用作表单的描述，例如我们喜欢在input标签前或后加上它。
em:Emphasized（加重，强调），为强调其包含的文本。默认样式是斜体。其展示效果与<i>标签相似，但搜索引擎不认为它们是相同的，因为搜索引擎往往尊重w3c给出的定义，而忽略你的展示效果。
strong:Strong（加强加重，重点强调），为重点强调其包含的文本。默认样式是粗体。其强调效果比em还要强一点。虽然<b>标签也能起到加粗的展示效果，但搜索引擎同样不认为它们是相同的，理由同上。
img:Image（图片，图像）；
a:Anchor（锚）创造超级链接中的基本的链。
u：UnderLine（文本下划线），即将淘汰。
s/strike：Strikethrough（删除线），在文字上拦腰划一条线。
按显示样式分：
块级元素或块状元素，（默认样式为block）的标签有：
div,ul,ol,li,p,dl,dt,dd，h1-h6...
它们在默认情况下，会独占一行。除非你用样式改变它们。
内联元素，（默认样式为inline，不过我觉得称之为“行内元素”更易于理解）的标签有：
span,label,em,strong,img,a,u,b,i,s...
它们在默认情况下，会老老实实和其它元素并存于一行，当给它们加上一些特定的样式，例如：display:block，它们也会霸道地占用一行。但这里要提前说明的是，并非所有display:block就一定占一行，如果有宽度，又有float作推手把它们往前面赶，这样它们也会乖乖和其它元素挤在一行里。
按组合方式分：
固定的团体：
ul--li
ol--li
dl--dt--dd
分散的个体：
其它...
需要作一些说明的地方：
1、内联元素，它们本身没有被“框”起来，也就是它们本身的大小受其内容控制，在它没有变成块级元素之前，你对它的width和height进行控制都是徒劳的。变成块级元素的途径：一、display:block（直接霸占整行）二、float不会霸占整行，但是你可以控制其width或height了。
2、一些不能包含或嵌套的元素（从w3c抄来的）：
a：不能包含其它a标签。
must not contain other a elements.
pre：（Preformatted 预定义格式（文本 ））不能包含img, object, big, small, sub, 或 sup 元素
must not contain the img, object, big, small, sub, or sup elements.
button 按钮，不能包含input, select, textarea, label, button, form, fieldset, iframe 或 isindex 元素.
must not contain the input, select, textarea, label, button, form, fieldset, iframe or isindex elements.
label 不能包含其它的label元素
must not contain other label elements.
form 不能包含其它的form元素
must not contain other form elements.
分享到：
相关推荐
在IT行业中，UI（User Interface，用户界面）设计是一项至关重要的任务，特别是在开发应用程序时，如我们这里讨论的“计算器”项目。一个优秀的计算器UI不仅要美观，还要易于理解和操作，以便用户能快速、准确地执行...
本示例利用了Jquery-UI实现Web桌面系统jWebOS，左侧菜单和桌面菜单的链接都是动态设置。整体效果非常棒。大家可以用于自己的网站建设。 建议开发童鞋使用跨平台开发工具——统一开发环境UDE来进行查看、调试、开发...
3. **模块化开发**：在WebUI中，插件通常以模块的形式存在，可以独立开发和测试。打包功能使得这些模块能够被正确地组合在一起，确保它们在实际应用中的正确运行，同时也方便了模块的独立升级和维护。 4. **性能...
unity的UI插件，支持树状结构，列表结构，下拉菜单等多种实用UI，可修改扩展
微信小程序UI模板——网络课程预约，是为初学者设计的一款实践项目，旨在帮助他们了解和掌握微信小程序在构建网络课程预约系统中的应用。这个模板涵盖了网校介绍、课程展示、预约功能等多个关键模块，提供了丰富的...
微信小程序UI模板——文章阅读器是一款专为新手开发者设计的学习资源，它提供了基本的文章浏览功能，可以帮助初学者理解和掌握微信小程序的界面设计和交互实现。在这个模板中，文章内容是内置于小程序内的，用户可以...
《WebUI-4.23.zip：WebUI与Unreal Engine 4的深度整合》 在数字内容制作和游戏开发领域，Unreal Engine 4（UE4）以其强大的图形渲染和实时交互能力闻名。WebUI-4.23.zip是一个针对UE4的专用插件，旨在实现Web界面与...
本篇文章将详细讲解如何在UE5中实现与Web的通讯，利用WEBUI插件来搭建桥梁，使得游戏或应用能够与网页进行数据交换，提升用户体验和互动性。 首先，我们需要理解虚幻引擎UE5中的通信机制。UE5支持多种通信方式，...
《手机Web UI框架详解——以layer.mobile-v1.2为例》 在当今互联网技术日新月异的时代，手机Web UI框架扮演着至关重要的角色。它们为开发者提供了构建响应式、高性能且用户友好的手机网站的工具，大大提升了开发...
【扩展WTP2.0图形化Web编辑器——转换器】这一主题主要涉及Eclipse的Web工具平台（WTP）2.0版本中的WebPageEditor，这是一个强大的图形化Web页面编辑器，允许开发者以可视化的方式设计和编辑Web应用。本文将深入探讨...
———————————————— 版权声明：本文为CSDN博主「LiuPig刘皮哥」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：...
AI绘图，Stable-Diffusion WEBUI，本地化（简体中文）语言文件。 原始文件来自翻译插件，根据自己实际使用情况，增加和修改了一些翻译。 配合【双语插件】看上去要自然一点，内容还在继续完善中。 本次增加了一些...
本篇将深入探讨UE4如何与Web网页进行UI交互，帮助开发者实现更丰富的用户体验。 一、UE4简介 UE4是由Epic Games开发的一款开源游戏引擎，它支持实时3D内容创作，提供了一整套包括物理模拟、光照计算、材质系统、...
“UE5 WebUI 鼠标穿透”这一标签揭示了WebUI在UE5中的一个关键特性——鼠标事件处理。在UE5中，WebUI可以实现鼠标穿透，意味着玩家的鼠标操作不仅能作用于游戏环境，也能穿透至Web界面执行相关交互，如点击按钮、...
【Python+Selenium构建WebUI自动化测试框架】 在软件开发过程中，测试是不可或缺的一环，而自动化测试能够极大地提高测试效率，降低人工出错的概率。本文将深入探讨如何使用Python结合Selenium库构建一个WebUI自动...
综上所述，这份附赠电子资料不仅介绍了多种Java Web开发技术框架的基本概念，而且还提供了实用的示例代码和案例研究，对于初学者来说是非常宝贵的资源。通过学习这些内容，开发者可以更好地掌握Java Web开发的核心...
Shield UI Lite 是一组纯 JavaScript 实现的 Web UI 组件，主要用于移动设备上，支持 Android 和 iOS 系统。包含的部件有：...
app-UI 是一个免费开源的可重用 UI 组件容器的集合，对开发移动的 Web 应用非常有用，可使用 HTML JavaScript 开发交互式的移动 Web 应用。app-UI 可很好的跟 PhoneGap 集成。 标签：AppUI
**Delphi Web前端开发教程——基于TMS WEB Core框架** Delphi Web前端开发教程是针对想要使用TMS WEB Core框架创建Web应用程序的开发者，无论你是初学者还是高级开发者，本教程都提供了丰富的学习资源。TMS WEB ...
本篇文章将深入探讨如何在Android中使用PopupWindow，并通过一个具体的实例来讲解其用法。 PopupWindow是Android SDK提供的一种可以弹出窗口的类，它能够显示一个浮动视图并具有多种自定义特性，如背景透明度、动画...