【转】还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多种,详见第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.

时间: 2024-09-15 09:50:40

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

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

相信在html5之前,很少人会关注html页面上head里标签元素的定义和应用场景,可能记得住的只有"title"."keyword"和"description"这些meta在逐渐了解使用html新标准后,特别是移动页面的开发普及,可以看到html中这一块内容越来越重要为大家所认识,初次见到这些标签基本是摸不着头脑,今天就来梳理这些标签的定义(以html5标准展开): 先来一个页面概括,head标签不分排序先后: <!DOCTYPE htm

详解HTML&lt;head&gt; 头标签元素的意义以及使用场景

HTML<head>头部分的标签.元素有很多,涉及到浏览器对网页的渲染,SEO 等等,而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多差异性.移动互联网时代,head 头部结构,移动端的 meta 元素,显得更为重要.了解每个标签的意义,写出满足自己需求的 head 头标签,是本文的目的.本篇以一丝的文章为基础,进行扩展总结介绍常用的 head 中各个标签.元素的意义以及使用场景. DOCTYPE DOCTYPE(Document Type),该声明位于文档中最前面的

语义化标签的实战意义

我收集到一些观点,大家姑且先听上一听,有人说:“没必要考虑语义化,只要我写的代码浏览器运行后没问题就行,反正领导根本不关心这些”“语义化是w3c推广的,我是很想语义化我的代码,但总是用不明白”“这个不好说,语义化再好有啥用,关键是有好的项目,客户才是金主!”“除了专业人士,谁会去看我们的代码是不是语义化的” 不仅仅有页面重构人员的声音,也听一听工程师.设计师.还有项目管理人员,他们是怎么看“语义化”这件事的 Php工程师:“无所谓什么语义化,只要逻辑正确,不影响我循环数据”项目管理人员:“我更看

JSTL标准标签库详解

JSTL标签库的使用是为类弥补html表的不足,规范自定义标签的使用而诞生的.在告别modle1模式开发应用程序后,人们开始注重软件的分层设计,不希望在jsp页面中出现java逻辑代码,同时也由于自定义标签的开发难度较大和不利于技术标准化产生了自定义标签库.JSTL标签库可分为5类: q        核心标签库 q        I18N格式化标签库 q        SQL标签库 q        XML标签库 q        函数标签库 本章将对这些内容一一讲述. 9.1 核心标签库 J

html标签认识的一些查漏补缺

观看了几组介绍html标签的视频,虽然很基础但认真瞧下去发现以往对这些标签的认识还是有许多不到位的地方,现总结: 对于h1-h6标签,由于默认样式的原因每次使用都要特别的重新设置样式,所以在写网页的时候我都是习惯使用span或层取代之,但其实这样做是不对的,因为h1-h6设计的初衷是有其语义的,它是SEO重要的衡量指标. 文本突出从强到弱有三个标签,分别是: <mark>标签:mark标签存在的意义就是为了标示标识,如匹配搜索项以及提示拼写错误等,例如我们页面ctrl+f进行关键字搜索时关键字

JSTL标签库(转)

原文地址:http://www.blogjava.net/maverick1003/articles/236575.html JSTL标签库 JSTL标签库的使用是为类弥补html表的不足,规范自定义标签的使用而诞生的.在告别modle1模式开发应用程序后,人们开始注重软件的分层设计,不希望在jsp页面中出现java逻辑代码,同时也由于自定义标签的开发难度较大和不利于技术标准化产生了自定义标签库. JSTL标签库可分为5类: 1      核心标签库 2        I18N格式化标签库 3 

HTML标签详解

HTML标签 1.<!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前.此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范. <!DOCTYPEhtml PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2.<a> 标签可定义锚 属性 取值 描

标签库

ThinkPHP 模版中的标签库,我们使用的很多内置标签就是通过标签库声明而来的,当然还可以自定义扩展标签. 一.内置标签 模版中的这些内置标签是是在  ThinkPHP/Library/Think/Template/TagLib  下 在完整版中提供了两个类文件: Cx.class.php (内置标签核心类). Html.class.php (html 扩展标签) 观察  Cx.class.php  源码,我们发现其实就是内置标签的核心类.比如: 1 /** 2 * volist标签解析 循环

01-HTML5标签变化

<!DOCTYPE html> 结构标签(有意义的div) <header>标记定义一个页面或一个区域的头部</header> <nav>标记定义导航链接</nav> <section>标记定义一个区域</section> <article>标记定义一篇文章</article> <aside>标记定义页面内容部分的侧边栏</aside> <hgroup>标记定义文