WEB前端开发经验总结 Ⅰ（3）
作者：海啸 来源：海啸的地盘 发布时间：2008-06-12 12:23:00
什么叫结构化？
由于个人认为这个知识点是十分重要的，所以请允许我在这里多罗嗦几句，我们采用WEB标准的方法制作页面的优势就体现在页面结构清晰。我们以前用table布局的时候，我们的表现（数据）和形式（布局样式）是混在一起的，有很多冗余的数据混杂在一起，而大家再看看我上面给大家展示的代码，很明显，结构十分清晰。
呵呵，说了半天，还是没有说什么是结构化，什么才是结构清晰啊？不要急。还记得我刚才提到的那几个标签吗？
h1~h6--如果你要显示的数据是作为标题显示的时候，就用这些标签，因为这个标签的意思就是说，这个是一个标题，不仅我们的用户很容易理解h-head的英文字母缩写，我们的另外一个用户搜索引擎也可以很容易理解它。呵呵，看到了吧，一个充分结构化的页面，对用户是十分友好的。
p--Paragraph（段落）
ul--unorglized list(无序的列表)
ol--orglized list(有序的列表)
li--list item(列表项)
form--表单
div--division(区域)
我这么一写，大家估计开始明白了，原来XHTML标签是有着自己的意义的（至于其他的标签的语意义，大家可以自己到W3C看看它的解释，也可以查看语义化你的HTML标签和属性），所以我们讲要语意化的意思，就是用合理的标签来显示数据，比如前面提到的，是标题，就应该用h1~h6标签，如果是一个段落的介绍文字，那么就应该使用p标签，如果是显示的一个没有顺序的列表，就应该用ul标签，如此...
所以看这个例子里
<h2>Ajax标签导航实例详解</h2>
这么写就是很合理的，h2标签就说明这里是个标题。而这么写：
复制内容到剪贴板代码:
.title{
font-size:18px;
...
}
<div class="title"><strong>Ajax标签导航实例详解</strong></div>
虽然你用了strong来强调说明这部分文字，但是还是没有h2标签来的直接明了。
还有这么写
<div class="ariticle-title"><h2>Ajax标签导航实例详解</h2></div>
也不是我们推荐的，可以不用嵌套层的地方，我们尽量不要去过多的嵌套层，减少嵌套会让我们的浏览器解析起来会更容易，速度更快。
所我们使用WEB标准开发页面，绝对不是单纯的把以前的table换成DIV就OK了。而采用标准制作页面，也不意味着我们就不使用table。只要把握我刚才说的原则，使用合理的标签显示相应特征的数据。
其实我们的table标签是一个很好的用来显示二维数据的标签，而table标签也确实是设计出来用来显示数据的，而不是用来布局的，只是我们当时的设计师们都用table标签来布局了。关于table标签的使用，大家也可以去看看上面提供那篇参考文章《语义化你的HTML标签和属性》。
0
投稿猜你喜欢
- 通过valuelist的queryMap传递过来的参数默认都为string类型，在valuelist配置文件的hql中，如果直接将该值赋给整
- 在知乎上看到这样一个问题：MySQL 查询 select * from table where id in (几百或几千个 id) 如何提高
- 如下所示：import pandas as pddef my_min(a, b): return min(abs(a),abs(
是否也像拥有自己的机器人呢？不挨个展示了。比如说你想实现一个夸人的功能："""作者：川川时间：2021/4/6- 1.奇偶校验我们约定一串编码里1的个数是偶数个，那么这串编码里携带的信息就是对的，否则就是错的。我们可以在开头对这串编码加一位校验码实现奇偶
- 前言我是栗子——专为小白准备《Python从入门到实战》内容。这不是上一期刚讲完循环判断，还给大家出了很多新手的题目，边学边练习才有效果嘛。
- blob对象介绍一个 Blob对象表示一个不可变的, 原始数据的类似文件对象。Blob表示的数据不一定是一个JavaScript原生格式 b
- declare @str varchar(100) set @str='8f8el3l' declare @s varcha
- 看了OReilly.JavaScript.The.Definitive.Guide.5th.Edition.Aug.2006里的cookie
- Selenium简介与安装 Selenium是什么？ Selenium也是一个用于Web应用程序测试的工具。Selenium测试直接运行在浏
- 4. 生成器(generator)4.1. 生成器简介首先请确信，生成器就是一种迭代器。生成器拥有next方法并且行为与迭代器完全相同，这意
- 本文实例讲述了PHP登录验证功能。分享给大家供大家参考，具体如下：登录界面具体实现方法如下：login.html<!DOCTYPE h
- Python 实现使用 dict 创建二维数据dict 的 keys、values 分别作为二维数据的两列In [16]: d = {1:&
- 深入理解 Python 虚拟机：集合（set）的实现原理及源码剖析在本篇文章当中主要给大家介绍在 cpython 虚拟机当中的集合 set
- 本文实例为大家分享了python手写均值滤波的具体代码，供大家参考，具体内容如下原理与卷积类似，设置一个n*n的滤波模板，滤波模板内的值累加
- 简单类型内置到 Python 编程语言中的简单数据类型包括： bool
- python实现银行管理系统，供大家参考，具体内容如下有的地方用的方法的比较复杂，主要是为回顾更多的知识test1用来存类和函数#test1
- 最近，找到了一种新的pycharm激活方法，支持Jetbrains全家桶，比如 idea、pychram、WebStorm等等，没得zhil
- JavaScript获取Select当前值写法：var value = document.getElementById("sele
- Notepad++ 是一款非常有特色的编辑器，软件小巧高效，支持27种编程语言，通吃C,C++ ,Java ,C#, XML, HTML,
