WEB UI设计之HTML标签以本来意义

开发 前端
说句实话,“DIV+CSS”这个词汇不知道害了多少人,也许其提出者本意并没有错,但是跟风者从表现曲解了其意思,认为整个页面就应当是DIV+CSS文件的组合。

说句实话,“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作推手把它们往前面赶,这样它们也会乖乖和其它元素挤在一行里。

原文链接:http://www.cnblogs.com/CoreCaiNiao/archive/2011/06/19/2084651.html

【编辑推荐】

  1. 微软发布Web标准更新 增加VS 2010中的HTML5支持
  2. 每个Web设计师背后都有一群指点江山的神(20P)
  3. HTML 5来袭:Web前端开发面临十字路口
  4. 最受Web前端开发者欢迎的五大开发工具
  5. 高性能WEB开发应用指南
责任编辑:陈贻新 来源: 活跃的毛虫
相关推荐

2009-09-22 18:26:48

2014-10-27 09:51:19

Web设计HTML

2011-06-07 15:14:09

HTML 5

2016-01-25 10:08:54

前端HTMLUI

2011-05-06 09:49:22

视觉设计移动终端UI设计

2011-08-03 11:08:27

HTML 5

2015-08-10 20:31:52

Amaze UIHTML 5

2021-05-11 09:07:18

Chrome浏览器HTML标签

2009-06-05 10:12:36

Struts标签库HTML标签

2010-09-25 13:09:39

UISymbian

2013-09-04 11:02:52

手机web网页设计

2011-04-27 10:57:29

高性能web开发

2023-12-12 07:16:34

HTML标签开发

2011-05-28 12:19:33

设计技巧UIAndroid

2011-07-18 14:54:55

HTML 5

2011-04-15 14:22:20

图片操作UIBlackBerry

2019-03-23 21:20:30

Android 谷歌架构

2011-05-28 15:14:06

设计技巧UIAndroid

2019-01-24 10:23:58

Web前端密码加密

2010-09-13 09:35:28

DIVCSS
点赞
收藏

51CTO技术栈公众号