“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标签设计的本意吗？ 把HTML标签用到该用的地方去的更多相关文章

  1. 你知道HTML标签设计的本意吗？

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

  2. Web前端设计:Html强制不换行<nobr>标签用法代码示例

    在网页排版布局中比如文章列表标题排版,无论多少文字均不希望换行显示,需要强制在一行显示完内容.这就可以nobr标签来实现.它起到的作用与word-break:keep-all 是一样的.nobr 是 ...

  3. noscript 标签，一个被忽视的重要标签

    打开 Drupal 的新后台,发现显示大面积空白 .本以为是 CSS 的问题,后来折腾好久才发现是我之前因为某些站的安全问题把浏览器的 Javascript 给禁用了.Javascript 的日益强大 ...

  4. [原创]java WEB学习笔记40：简单标签概述（背景，使用一个标签，标签库的API，SimpleTag接口，创建一个自定义的标签的步骤 和简单实践）

    本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...

  5. 什么是H标签？H1，H2，H3标签？以及和strong标签使用的方法及重要性

    大家都知道,seo的一个很重要的一点就是要把网站做的条理清晰,让搜索引擎很容易的读明白,这个条理清晰不仅体现在网站的物理路径,url等地 方.在<h1><h2><h3&g ...

  6. JSP标准标签库（JSTL）之核心标签（下）

      前面记录了核心标签的前几种,现在来接着记录. 七.<c:import>标签 使用<c:import>标签可以包含一个FTP服务器中不同的网页内容.语法格式: <c:i ...

  7. JSP标准标签库（JSTL）之核心标签（上）

    在myeclipse中新建web项目时,会自动为我们安装JSTL库,如下图: 核心标签是我们最常用的JSTL标签.在JSP页面中引用核心标签库的语法如下: <%@ taglib uri=&quo ...

  8. <q>标签，短文本引用；<blockquote>标签，长文本引用

    <q>标签,短文本引用 <q>引用文本</q>,默认显示双引号,不需要在文本中添加 <blockquote>标签,长文本引用 浏览器对<block ...

  9. JSTL标签,EL表达式,OGNL表达式，struts2标签 汇总

    一下纯属个人总结摘抄,总结一起方便查看,解决疑问,有遗漏或错误,还请指出.       1,JSTL标签总结: a).JSTL标签有什么用?          JSTL是由JCP(Java Commu ...

随机推荐

  1. BNUOJ 34985 Elegant String 2014北京邀请赛E题 矩阵快速幂

    题目链接:http://acm.bnu.edu.cn/bnuoj/problem_show.php?pid=34985 题目大意:问n长度的串用0~k的数字去填,有多少个串保证任意子串中不包含0~k的 ...

  2. 青蛙的约会 - poj 1061（扩展欧几里得）

    分析:这个东西在数论里面应该叫做不定方程式,可以搜一下,有很精彩的证明,先求出来方程式的一组特解,然后用这组特解来求通解,但是求出来特解之后怎么求这些解里面的最小非负x值?我们知道 x = x0 + ...

  3. poj3624背包问题（一维数组）

    Description Bessie has gone to the mall's jewelry store and spies a charm bracelet. Of course, she'd ...

  4. 设置UWP程序自启动（Automate launching Windows 10 UWP apps）

    在开发UWP程序的过程中,有时候需要设置程序的自启.本人实现的步骤如下: 1.在VS中激活Protocol (Package.appxmanifest --> Declarations --&g ...

  5. 使用FileSystemWatcher监视文件变化

    本文转载:http://www.cnblogs.com/zanxiaofeng/archive/2011/01/08/1930583.html FileSystemWatcher基础 属性: Path ...

  6. 【MongoDB】在windows平台下mongodb的分片集群（五）

    本篇接着上面的四篇继续讲述在window平台下mongodb的分片集群搭建. 在分片集群中也照样能够创建索引,创建索引的方式与在单独数据库中创建索引的方式一样.因此这不再多说.本篇主要聚焦在分片键的选 ...

  7. my.cnf已经存在，影响安装--mysql

    Found existing config file ./my.cnf on the system. Because this file might be in use, it was not rep ...

  8. Cstyle的UEFI导读：第18.0篇 NVRAM的工作原理(上)

        虽有句话说的好,实用的东西记在脑子里.没有的记在笔记本上. 可是如今的信息量越来越大,并且随着时间的推移记忆力会越来越不可靠,所以仅仅好把近期工作之余看的一些东西记录下来,避免被迅速忘记.这里 ...

  9. 关于text-align无法居中的问题

    昨天项目,一直出现一个无法居中的问题,最后发现竟然是text-align的问题,才发现自己对text-align的理解还是不够透彻,于是在此再举例分析下. css中的元素一共有三类:块元素.行内块和内 ...

  10. java io 流基础