第三期WEB标准化交流会(页面重构合理化讨论)

今天整了个网站源码看,导入工程后一大推红色...,其中包括

<param name="allowFullScreen" value="true" />缺少了/等等
决定了解下相关的编码格式

From:第三期WEB标准化交流会(页面重构合理化讨论)

 

第三期WEB标准化交流会(页面重构合理化讨论)之二

a) 统一的DTD声明 html4.01 xhtml1.0 html5
b) 通过W3C验证
c) 语义化的html 标记应用
d) 语义扩展 microformats或RDFa
e) Class id命名规则一致性,借鉴html5新标记名称和microformats。
f) SEO

统一的DTD声明 html4.01 xhtml1.0 html5
现阶段最常用的还是Transitional(过渡)模式

通过W3C验证


说来爆布汗中~~~~~~~~~~做了几年前端,写了无数页面,但是从来做过W3C验证!
那天小组内的讨论也说不一定要做W3C验证,只要写代码时严格要求就可以了
好像在日常写代码的时候,我也很注意以下几点:
1.所有标签必须成对出现,有开始,就必须有关闭,类似img这样的“空元素”,必须在属性之后空格再加上斜杠"/"。
2.所有a链接要有title属性; 所有img属性要有alt属性。
3.所有标签属性之间有空格,属性值也必须用""包含住。
4.标签之间不能随意乱用,行内元素不能包含行元素,行元素不能包含块元素。
5."<","&"类似这样的符号也必须转换成相应的实体。

在网上找到一些别人不能通过W3C验证一些原因:

1 未闭合的标签
页面布局不能通过验证的最为常见的原因。特别是未闭合的div标签是布局错误中最最经常出现、也是最难发现的一个错误。验证器并不总能准确地指出错误出现的位置,因此发现这个错误有时候也无异于大海捞针。

2 可恶的embed标签
90年代初,微软和网景浏览器开始意识到单纯地文本标签根本不能完全实现标准化。但是不幸的是,虽然我们现在广泛地使用embed这类的标签,W3C并没有意识到他们的重要性。如果你确实想通过strict DOCTYPE验证,你必须放弃使用embed标签。

插入flash用object标签。完整代码如下:
<object type="application/x-shockwave-flash" data="flash文件路径" width="" height="" id="file" >
<param name="movie" value="flash文件路径"/>
<param name="allowFullScreen" value="true" />
<param name="FlashVars" value="xml=file.xml" />
</object>

3 不恰当的DOCTYPE声明
一个错误是文档中要么没有声明DOCTYPE,要么声明DOCTYPE错误。

4 尾部的斜杠问题
类似img这样的“空元素”,必须在属性之后空格再加上斜杠"/"。

5 对齐方式
TYPE为Transitional的文档中使用对齐标签align没有任何问题,但是如果你在更加严格的模式Strict下验证,那么你将会看到一个错误提示。align标签是标签语言又一个不能使用的标签。替代他的是在样式表中使用float或者text-align。

6 JavaScript
声明了Strict DOCTYPE,那么你需要把你的JS代码包含一对可换行CDATA标签中。这方面很多开发者已经在使用了,比如一些广告和跟踪功能的 JavaScript代码需要必须写在一行里。如果你的页面中包含JavaScript代码,只需在其前后加上如下代码:
<script language="javascript" type="text/javascript">
// <![CDATA[
js内容
// ]]>
</script>

7 所有的图片都需要有alt属性
没有意识这点,那么图片因素可能是妨碍你通过验证的一个因素。除了需要上面说到的斜杠外,还要加上alt来描述图片,并通来这个alt标签来识别页面中的图片,所以为图片添加alt属性是一个好习惯。

8 未知印刷符号
也是妨碍验证的一个重要因素。例如,使用相应编码来替代&符号。

9 错误的嵌套
元素中包含其他元素的情况,如<div><strong>Sweet!</strong></div>
很容易出现把他们的顺序弄乱的情况。例如strong标签在div的前面,但是结束标签却是div在前面。有时候这可能并不影响页面效果,但是他会影响你的代码通过验证。

10 没有title标签
起来像个显而易见的错误,但是很多开发者经常在head标记中缺少title标签。如果你看到missing a required sub-element of HEAD这样的错误提示,你就首先想到你丢失了title标签。


语义化的html 标记应用

该是什么就用什么:标题就用H系列,段落用P,按钮用botton,表格用table~~~~~~~~~~~~~~~~~~~~~

语义扩展 microformats或RDFa

以前从来不知道哎~~~~~~~~~~~~汗
一些相关资料:
什么是Microformats?:http://www.lunaticsun.com/article/microformats-concept
使用 microformats 分离数据与格式:http://www.ibm.com/developerworks/cn/xml/x-microformats/
microformats 微格式:http://www.aoao.org.cn/blog/2006/11/microformats/
RDFa入门:http://iws.seu.edu.cn/resource/Translations/RDFa-Primer-Simplified-Chinese.htm
RDFa介绍——构建更友好的web页面 :http://www.blueidea.com/tech/web/2009/7015.asp

Class id命名规则一致性,借鉴html5新标记名称和microformats

我现在一般是先按照结构化方式来对类以及id名称命名,如下面是最常用id名称:
header
content
nav
sidebar
footer
最常用的类名称:
mod
hd
hd_m
bd
fd
more
list

然后再以描述所含内容的标准来对各内容块来命名

SEO
略过

 

第三期WEB标准化交流会(页面重构合理化讨论)之一(网络找的资料)

统一的DTD声明 html4.01 xhtml1.0 html5

有过那么几回
我做好的静态页交到程序员手里
等嵌好代码调试,人家告诉我,样式出错了
怎么也不弄不出静态页时的样子
我也左看右看上看下看,代码一样啊,只是该动态的地方换了代码而已
通常到最后,我一个激灵,看一下第一行
才发现被他们在<!DOCTYPE>前面加了东西

………………………………………俺是华丽丽的分割线………………………………………………………

什么是DOCTYPE

DOCTYPE,原意Document Type , 即文档类型。这个标签的作用声明文档类型,让浏览器知道你使用哪个版本的HTML(XHTML)。如果你没用指定或者指定了一个错误的文档类型,则浏览器会假设你并不知道自己在干什 么,并且自动切换到“怪异模式(quirks mode)”,结果会有一些元素不能被正确地渲染。显然这样做显得很“宽容”,但事实上却带来很多混乱和不确定的因素。

<!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

该标签可声明三种 DTD 类型,分别表示严格版本、过渡版本以及基于框架的 HTML 文档。

以下面这个 <!DOCTYPE> 标签为例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

在上面的声明中,声明了文档的根元素是 html,它在公共标识符被定义为 "-//W3C//DTD XHTML 1.0 Strict//EN" 的 DTD 中进行了定义。浏览器将明白如何寻找匹配此公共标识符的 DTD。如果找不到,浏览器将使用公共标识符后面的 URL 作为寻找 DTD 的位置。

现阶段常用的三种类型:

Transitional类型:是指一种过渡类型,使用这种类型浏览器对XHTML的解析比较宽松,允许使用HTML4.01中的标签,但必须符合XHTML的语法。这种是现在通用的方法,用dreamweaver创建网页时默认就是这种类型。

Strict类型:严格类型,使用时浏览器将相对严格,不允许使用任何表现形式的标识和属性,如在元素中直接使用bgcolor背景色属性等。

Frameset类型:框架页类型,如果网页使用了框架结构,就有必要使用这样的文档声明。

HTML 4.01
HTML Strict DTD

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd">

HTML Transitional DTD

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">

Frameset DTD

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "
http://www.w3.org/TR/html4/frameset.dtd">


XHTML 1.0

XHTML Strict DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML Transitional DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML Frameset DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

如需检查是否编写了带有正确 DTD 的合法 XHTML 文档,可以把 XHTML 页面链接到一个 XHTML 验证器。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值