HTML使用WEB标准

原创 2007年10月11日 10:00:00
正确使用WEB标准建立html文档基本模板如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<meta http-equiv="Content-Language" content="gb2312" />
<meta content="all" name="robots" />
<meta name="author" content="网站作者,可以添加网址或者邮箱" />
<meta name="Copyright" content="网站地址,版权说明" />
<meta name="descrīption" content="网站性质描述" />
<meta name="keywords"content="关键字列表,用逗号分割" />
<link rel="icon" href="ico图片文件url" type="image/x-icon" />
<link rel="shortcut icon" href="ico图片文件url" type="image/x-icon" />
<link rel="stylesheet" rev="stylesheet" href="css文件url" type="text/css" media="all" />
<title>模板</title>
</head>
<body>
HHHHHHHHHHHHH
</body>
</html>

上面的关键点有下面几个方面:

1.DOCTYPE:document type的缩写,用来说明你用的XHTML或者HTML是什么版本
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">中XHTML修改为HTML则为声明HTML版本类型,当然,我以后用的一般都是XHMTL来构建,因为HTML只是XHTML的一个过渡

对于后面的Strict//EN以及后面的dtd表明的是XHTML 1.0版本由Strict的EN版本的dtd来解析(当然也可以指定语言为ZH-CN)
XHTML的DOCTYPE还有下面的写法(上面是最严格的标准)
过 渡版本:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
框架版本:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">


它们之间的区别就如它们的名字:
严格版本:不能使用任何表现层的标识和属性
过渡版本:要求非常宽松的DTD,它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)
框架版本:专门针对框架页面设计使用的DTD,如果你的页面中包含有框架,需要采用这种DTD


理 想情况当然是严格的DTD,但对于我们大多数刚接触web标准的设计师来说,过渡的DTD(XHTML 1.0 Transitional)是目前理想选择(包括本站,使用的也是过渡型DTD)。因为这种DTD还允许我们使用表现层的标识、元素和属性,也比较容易通 过W3C的代码校验。

过渡版本的模板这样书写:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<meta http-equiv="Content-Language" content="gb2312" />
<meta content="all" name="robots" />
<meta name="author" content="网站作者,可以添加网址或者邮箱" />
<meta name="Copyright" content="网站地址,版权说明" />
<meta name="descrīption" content="网站性质描述" />
<meta name="keywords"content="关键字列表,用逗号分割" />
<link rel="icon" href="ico图片文件url" type="image/x-icon" />
<link rel="shortcut icon" href="ico图片文件url" type="image/x-icon" />
<link rel="stylesheet" rev="stylesheet" href="css文件url" type="text/css" media="all" />
<title>模板</title>
</head>
<body>

</body>
</html>

2.命名空间:<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
XHTML是HTML向XML过渡的标识语言,它需要符合XML文档规则,因此也需要定义名字空间。又因为XHTML1.0不能自定义标识,所以它的名字空间都相同,就是"http://www.w3.org/1999/xhtml"
后面的lang="gb2312",指定你的文档用简体中文

3.meta的使用
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />定义网站的语言编码
<meta http-equiv="Content-Language" content="gb2312" />这一句只是为了兼容老实浏览器,作用也是定义语言编码为简体中文
下面meta都是为搜索引擎服务的,有助于提高搜索引擎的排名(SEO在网站建设中是必须考虑的重要环节,这也是AJAX受排斥的一个原因,因为javascrīpt对搜索引擎的不友好或者说搜索引擎对javascipt的不友好)
<meta content="all" name="robots" />:允许搜索机器人搜索站内所有链接.当然如果你有不爽的地方不想让搜索引擎抓取,可以采用robots.txt方法,具体操作如下(不过估计没有几个人愿意这样吧):
首先,在网站根目录下建立robots.txt文件
然后,robots.txt中的文件书写格式为:
文件包含一条或更多的记录,这些记录通过空行分开每一条记录
一个例子:(禁止所有搜索机器人抓取网站内容)
User-agent: *
Disallow: /
说明:User-agent: *表示针对所有的搜索机器人,当然你也可以针对某个机器人,比如百度baiduspider
Disallow:表示禁止搜索的内容,/表示网站根目录,就是禁止搜索机器人抓取.如果你不想/admin目录被抓取,可以写成Disallow:/admin/
<meta name="author" content="网站作者,可以添加网址或者邮箱" />:网站的作者声明
<meta name="Copyright" content="网站地址,版权说明" />:网站的版权声明
<meta name="descrīption" content="网站性质描述" />:网站的性质声明,比如网站的主要目的等
<meta name="keywords"content="关键字列表,用逗号分割" />:网站的关键字声明
上面的descrīption和keywords对搜索引擎排名有作用,但是搜索引擎排名主要是网站的内容(权重大)

meta在其他方面常用的应用有:
定时刷新或重定位:<meta http-equiv="Refresh" content="时间间隔(单位:秒); [url=可选部分,重定位的url地址,不写的话是刷新本页面]">
缓存过期时间:<meta http-equiv="Expires" content="0或GMT时间格式">
指定网页在缓存中的过期时间,一旦网页过期,必须到服务器上重新调阅.0表示下次访问从服务器上重新调阅.GWT时间格式如:Wed, 26 Feb 1997 08:21:57 GMT
禁止缓存:<meta http-equiv="Pragma" content="No-cach">
禁止浏览器从本地机的缓存中调阅页面内容,网页不保存在缓存中,每次访问都刷新页面。这样设定,访问者将无法脱机浏览
cookie设定:<meta http-equiv="Set-Cookie" content="cookievalue=xxx; expires=;GWT时间格式 path=路径,比如/
">
进入与退出时特效(firefox不支持):<meta http-equiv="Page-Enter或Page-Exit" content="特效函数">
特效函数有两类:
blendTrans(Duration=0到1之间的数):产生渐隐效果
revealTrans(duration=滤镜特效的持续时间,单位:秒,transition=0到23之间整数)
0到23效果为:
0 矩形缩小
1 矩形扩大
2 圆形缩小
3 圆形扩大
4 下到上刷新
5 上到下刷新
6 左到右刷新
7 右到左刷新
8 竖百叶窗
9 横百叶窗
10 错位横百叶窗
11 错位竖百叶窗
12 点扩散
13 左右到中间刷新
14 中间到左右刷新
15 中间到上下
16 上下到中间
17 右下到左上
18 右上到左下
19 左上到右下
20 左下到右上
21 横条
22 竖条
23 以上22种随机选择一种

4.link的使用
<link rel="stylesheet" rev="stylesheet" href="css/style.css" type="text/css" media="all" />
其参数说明如下:
charset:定义目标URL的字符编码。默认值为"ISO-8859-1"
href:资源地址
hreflang:定义目标URL的基本语言
media:指定文档可在什么设备上显示(all,braille,print,projection,screen)
rel: 定义目标文档和当前文档间的关系(alternate,appendix,bookmark,chapter,contents,copyright, glossary,help,home,index,next,prev,section,start,stylesheet,subsection)
rev: 定义目标文档和当前文档间的关系(alternate,appendix,bookmark,chapter,contents,copyright, glossary,help,home,index,next,prev,section,start,stylesheet,subsection)
target:以什么方式打开目标URL(_blank,_self,_top,_parent)
type:指定目标URL的MIME类型(text/css,text/javascrīpt,image/gif)

一般地,我们在调用css或javascriopt时用到这个标签,另外建立网站图标会用到,比如上面的这两行
<link rel="icon" href="ico图片文件url" type="image/x-icon" />
<link rel="shortcut icon" href="ico图片文件url" type="image/x-icon" />
就自定义了网站的图标

 

Web标准结构语言—HTML

l  标准结构语言 结构语言是按照页面的内容主要包括那些部分从而提炼出来的语言。我们所见的一个页面通常包括标题、文字、段落、图片、链接、表格及表单等组成部件。 Web标准结构语言包括:HTML、X...
  • u010955843
  • u010955843
  • 2014年11月23日 16:31
  • 930

WEB标准系列-HTML元素嵌套

这些天一直在忙于TGuide(腾讯互娱重构编码规范)的编写,博客也因此停止更新了一段时间。当然在TGuide的编写过程中也会遇到各种各样的问题,就比如今天要讲的“元素嵌套”,这个问题在WEB标准群里得...
  • lzm18064126848
  • lzm18064126848
  • 2016年11月25日 15:05
  • 437

HTML 4.01的标准和规范以及如何使用中文

还是在阅读HeadFirst的html css教科书,今天看到的是如何让你编写的html代码符合标准,这样你的网页在不同的浏览器里都可以顺利显示,在和css合作的时候也能够更有效率,减少错误。这是这本...
  • Clifnich
  • Clifnich
  • 2016年09月27日 20:36
  • 446

【网页制作】——WEB标准三要素:html,css,javascrip

网页主要是由三部分组成的:结构,表现和行为。如果用一本书来表现,一本书分为了章,篇,节和段落,这就构成了一本书的”结构“,而这个组成部分用什么字体,什么字号,什么颜色,就称为了这本书的”表现“。由于传...
  • changyinling520
  • changyinling520
  • 2016年04月30日 23:28
  • 1831

HTML 标准模板

一般一份标准的、空白的 HTML 模板如下所示。 悦TV 2013 你的浏览器当前不支持 JavaScript。如要享受本网站服...
  • zhangxin09
  • zhangxin09
  • 2013年12月09日 17:57
  • 11680

HTML规范文档

html中的一些规范
  • kydkong
  • kydkong
  • 2016年08月01日 15:48
  • 1014

Html书写规范,基本标签使用

一、html简介 1、html是什么 Html是用来描述网页的一种语言。 (1)HTML 指的是超文本标记语言 (Hyper Text Markup Language) (2)HTML 不是一种编程语...
  • relicemxd
  • relicemxd
  • 2016年10月11日 19:28
  • 2445

Web标准结构语言—HTML

l  标准结构语言     结构语言是按照页面的内容主要包括那些部分从而提炼出来的语言。我们所见的一个页面通常包括标题、文字、段落、图片、链接、表格及表单等组成部件。 Web标准结构语言包...
  • ppw001
  • ppw001
  • 2015年04月06日 21:41
  • 211

[Web前端技术教学]《基于Web标准的网页设计与制作》试题及答案

复习重点,千万别错过.
  • vinglemar
  • vinglemar
  • 2016年12月15日 09:10
  • 1602

web标准与HTML语义化

Web标准-结构、样式和行为的分离  Web标准是由一系列的标准组合而成,其核心思想就是将网页的结构、样式和行为分离开来,它可以分为三大类:结构部分、样式部分和行为部分。结构部分主要包括XML标准、X...
  • hui1845
  • hui1845
  • 2017年02月09日 20:20
  • 165
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML使用WEB标准
举报原因:
原因补充:

(最多只允许输入30个字)