说句实话，“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多种，详见第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 elements. inside elements. inside 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.

【转】还html标签以本来意义的更多相关文章

  1. Html页面head标签元素的意义和应用场景

    相信在html5之前,很少人会关注html页面上head里标签元素的定义和应用场景,可能记得住的只有"title"."keyword"和"descri ...

  2. 详解HTML<head> 头标签元素的意义以及使用场景

    HTML<head>头部分的标签.元素有很多,涉及到浏览器对网页的渲染,SEO 等等,而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多差异性.移动互联网时代,he ...

  3. Html学习总结（2）——Html页面head标签元素的意义和应用场景

    相信在html5之前,很少人会关注html页面上head里标签元素的定义和应用场景,可能记得住的只有"title"."keyword"和"descri ...

  4. 【初探HTML本相】道之真谛不过自然，html标签脱俗还真

    前言 须弥般若有无空,阴阳道化真虚同:洗尽前恩本非相,还吾面目下九重. 咳咳,其实老夫对佛教文化有点点研究啦,说以我们这里来了一点很有哲理的东西,因为我这里准备干一件很戳的事情,我准备来看看我们的ht ...

  5. 前端之常用标签和CSS初识

    外层div的宽度是100%,就是视口的大小,当视口被拉窄到小于内层div的宽度980px时,比如800px,此时 外层div宽度为800px,内层div宽度依然为980px,而css中只设置了外层di ...

  6. html5 Doctor——教你规范使用html5标签

    学习地址(英文资料):http://html5doctor.com/ http://www.w3.org/html/wg/drafts/html/master/text-level-semantics ...

  7. HTML|CSS之HTML常用标签

    知识内容: 1.标签 2.head内标签 3.body内常用标签 注:本人使用的HTML为HTML5 一.标签 1.标签格式 标签的语法: <标签名 属性1=“属性值1” 属性2=“属性值2”… ...

  8. HTML基础之常用标签

    Meta 标签介绍 Meta的属性有两种:name和http-equiv name属性用于描述网页,对应于content <meta name="Generator" con ...

  9. java-自定义标签&&JSTL标签库详解

    自定义标签是Jav aWeb的一部分非常重要的核心功能,我们之前就说过,JSP规范说的很清楚,就是Jsp页面中禁止编写一行Java代码,就是最好不要有Java脚本片段,下面就来看一下自定义标签的简介: ...

随机推荐

  1. raw_input 和input的区别

    input它会根据用户输入变换相应的类型, raw_input则是不管用户输入什么类型的都会转变成字符型.

  2. stl 初步的使用

    1.sort 和  lower_bound 例如     marble      https://uva.onlinejudge.org/index.php?option=com_onlinejudg ...

  3. 什么是JavaEE

    Java技术不仅是一门编程语言而且是一个平台.同时Java语言是一门有着特定语法和风格的高级的面向对象的语言,Java平台是Java语言编写的特定应用程序运行的环境.Java平台有很多种,很多的Jav ...

  4. 线段树(segment tree)

    线段树在一些acm题目中经常见到,这种数据结构主要应用在计算几何和地理信息系统中.下图就为一个线段树: (PS:可能你见过线段树的不同表示方式,但是都大同小异,根据自己的需要来建就行.) 1.线段树基 ...

  5. python 字典操作

    字典的常用操作: clear 功能:清空字典 dict_li = {'users':'swht','age':'18',} dict_li.clear() 返回结果:dict_li {} copy 功 ...

  6. 配置recovery_min_apply_delay后重启standby节点报错：psql: FATAL: the database system is starting up

    环境: pg版本:PostgreSQL 9.4.4 on x86_64 系统版本:CentOS release 6.6 linux内核版本:2.6.32-504.8.1.el6.x86_64 今天测试 ...

  7. GridView与CheckBox完美结合

    版本一:单纯地实现全选和全取消,http://www.cnblogs.com/insus/archive/2009/03/14/1411613.html 版本二:修改选中行的背景颜色,http://w ...

  8. div的显示和隐藏

    本文从学习角度出发,仅当做笔记.高手可以忽略本文. 借助div的display属性可以实现div的显示或隐藏,而且在隐藏后不占用原来显示的空间. js控制显示和隐藏的代码: <script ty ...

  9. 【原】CSS3的3D动画 ——3D旋转之骰子样式的钟表（2）下.md

    之前看到智能社主页的那个骰子样式的钟表,最近研究了一下,虽然没有仔细看他是怎么做的,但是学了css3的动画之后想自己尝试着写一下,用到的原理可能和智能社网站的不太一样,我自己主要用到了css3和js. ...

  10. Hbase预分区种子生成

    提前生成Hbase预分区种子,在创建Hbase表时也进行相应的预分区,同时设置预分区的个数,预分区的范围对应Hbase监控页面的Region Server的start key与End key,从而使数 ...