“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. ubuntu 100M 到 10M

    浅析ubuntu下如何修改网卡网速--将100M网卡改为10M网卡 公司的路由器可能比较陈旧,机器启动之后,默认网卡是100M的,但是登录QQ经常出现掉线现象,后来得知原来需要将100M网卡降频到10 ...

  2. zoj 2734 Exchange Cards【dfs+剪枝】

    Exchange Cards Time Limit: 2 Seconds      Memory Limit: 65536 KB As a basketball fan, Mike is also f ...

  3. cmd的copy命令合并多个文件

    1.1个a.jpg文件:1个b.php文件(一句话木马)

  4. PHP用ajia代码写三级联动下拉

    下面是我做三级联动下拉的步骤以及逻辑 第一步:先做一个省市区表格 第二步:建个PHP页面显示用我是在<body>里放<div>用来接收要显示的省市区表格信息,里面嵌入jquer ...

  5. DataGridView 列大写、列只能输入数字 分类： DataGridView 2014-12-07 08:40 332人阅读 评论(0) 收藏

    列大写: 说明:调用EditingControlShowing事件 private void dgvGoods_EditingControlShowing(object sender, DataGri ...

  6. 跨服务器修改数据 分类： SQL Server 2014-08-21 21:24 316人阅读 评论(0) 收藏

     说明: 两个服务器: 192.168.0.22   A 192.168.0.3     B 数据库备份在A上 数据库在B上 在A上写: exec sp_addlinkedserver   'ITSV ...

  7. javascript 匿名函数的理解，js括号中括function 如(function(){})

    代码如下: (function(){  //这里忽略jQuery所有实现  })();  (function(){ //这里忽略jQuery所有实现 })(); 半年前初次接触jQuery的时候,我也 ...

  8. Oracle 学习笔记 11 -- 视图 (VIEW)

    本次必须学习一个全新的概念-- 视图 (VIEW).在前面的笔记中曾提到过,数据对象包含:表.视图.序列.索引和同义词.前面的笔记都是对表的想剖析,那么本次笔记就对视图的世界进行深入的剖析. 视图是通 ...

  9. android 42 获取图片

    资源中获取图片:可以从工程assets文件夹.res/drawble文件夹.sd卡.服务端下载图片. 页面: <LinearLayout xmlns:android="http://s ...

  10. Charles --- Mac 抓包工具

    安装 官方网站Charles 是一款收费软件,可以免费体验30天.网上有破解版. 使用 infoq 上有一篇很棒的教程:iOS开发工具——网络封包分析工具Charles 注意事项 这是我使用过程中遇到 ...