“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容器之内,这个必须是我自己加的。我在其前面加了个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作推手把它们往前面赶,这样它们也会乖乖和其它元素挤在一行里。

需要作一些说明的地方:

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标签设计的本意吗? 把HTML标签用到该用的地方去

    "DIV+CSS"这个词汇不知道害了多少人,也许其提出者本意并没有错,但是跟风者从表现曲解了其意思,认为整个页面就应当是DIV+CSS文件的组合.这样做,对于视觉上并没有什么影响, ...

  2. Jx.Cms开发笔记(五)-文章编辑页面标签设计

    标签页的样子 设计思路 与其他输入框一样,存在一个Label标签,由于这里不像其他输入框一样可以直接使用Row标签,所以这里需要额外增加. 使用Tag组件显示所有的标签,我们在Blazor 组件库 B ...

  3. frameset标签设计页面

    重要事项:不能将 <frameset></frameset> 标签放在<body></body> 标签里.且 HTML5 已经不支持 frameset ...

  4. <ul>标签设计简单导航栏

    当我们刚开始学习html/css的时候,对于padding .float.行内元素.块级元素用起来可能会混淆,但是呢我们可以通过一个简单的nav案例来清楚各自具体作用. 1.首先我们创建一个大的容器, ...

  5. 网页设计:Meta标签详解

    很多人忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性,有兴趣吗,谁我来重新认识一下META标签吧! META标签是HTML语言HEAD区的一个辅 ...

  6. 数字IC设计工程师的知识结构

    刚毕业的时候,我年少轻狂,以为自己已经可以独当一面,庙堂之上所学已经足以应付业界需要.然而在后来的工作过程中,我认识了很多牛人,也从他们身上学到了很多,从中总结了一个IC设计工程师需要具备的知识架构, ...

  7. 完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法

    完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法   HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页 ...

  8. Meta标签详解(HTML JAVASCRIPT)

    Meta标签详解,在网上转的,希望对大家有用 您的个人网站即使做得再精彩,在“浩瀚如海”的网络空间中,也如一叶扁舟不易为人发现,如何推广 个人网站,人们首先想到的方法无外乎以下几种: ● 在搜索引擎中 ...

  9. 解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法

    方式一:Coding JavaScript <!--[if lt IE9]> <script> (function() { var e = "abbr, articl ...

随机推荐

  1. HDSF读写文件

    HDFS 读取文件 HDFS的文件读取原理,主要包括以下几个步骤: 1.首先调用FileSystem对象的open方法,其实获取的是一个DistributedFileSystem的   实例. 2.D ...

  2. 文件 I/O字节流

    输入字节流: import java.io.*; public class test_main { public static void main(String[] args) { int n=-1; ...

  3. (数据科学学习手札31)基于Python的网络数据采集(初级篇)

    一.简介 在实际的业务中,我们手头的数据往往难以满足需求,这时我们就需要利用互联网上的资源来获取更多的补充数据,但是很多情况下,有价值的数据往往是没有提供源文件的直接下载渠道的(即所谓的API),这时 ...

  4. Java——Random类随机整数---18.10.11

    一.Random类的定义 1.Random类位于java.util包中,主要用于生成 伪随机数 2.random类将 种子数 作为随机算法的起源数字,计算生成伪随机数,其与生成的随机数字的区间无关 3 ...

  5. kafka集群部署文档(转载)

    原文链接:http://www.cnblogs.com/luotianshuai/p/5206662.html Kafka初识 1.Kafka使用背景 在我们大量使用分布式数据库.分布式计算集群的时候 ...

  6. struts2官方 中文教程 系列九:Debugging Struts

    介绍 在Struts 2 web应用程序的开发过程中,您可能希望查看由Struts 2框架管理的信息.本教程将介绍两种工具,您可以使用它们来查看.一个工具是Struts 2的配置插件,另一个是调试拦截 ...

  7. Linux 服务器 监控命令

    1 top top类似于windows下面的资源管理器.不仅能够从服务器整体上展示服务器的大致情况,还可以看到具体进程 耗费资源的情况. 展示内存.cpu.交换分区等信息 如上图: 第一行主要描述系统 ...

  8. 云计算之路-阿里云上:奇怪的CPU 100%问题

    这篇博文记录一下6月1日在阿里云上遇到的奇怪的CPU 100%问题,希望多年以后能真相大白. 那天负载均衡(SLB)中只放了1台云服务器(平时都放2台),由于是节假日,虽然只放了一台,但这台服务器的负 ...

  9. Android Studio Gradle编译时『No resource found that matches the given name』解决方法(windows系统的坑)

    * 最近帮团队同事配置gradle时,发现一个非常奇怪的问题:> * 同样的gradle配置的项目,只是修改了一个项目的名称,竟然会出现以下奇怪问题: ## 现象1. 一个编译完全OK,另外一个 ...

  10. @property, @classmethod基本用法

    @property 废话少说,贴上代码(代码参考@廖雪峰教程) class Student(object): def __init__(self, score): self._score = scor ...