<meta>标签详解

2008-03-26 09:38:06 发表评论»

定义和用法

HTML 与 XHTML 之间的差异

在 HTML 中，<meta> 标签没有结束标签。在 XHTML 中，<meta> 标签必须被正确地关闭。

提示和注释：

注释：<meta> 标签永远位于 head 元素内部。

注释：元数据总是以名称/值的形式被成对传递的。

必需的属性 DTD 指示此属性允许在哪种 DTD 中使用。S=Strict, T=Transitional, F=Frameset.

属性	值	描述	DTD
content	some_text	定义与 http-equiv 或 name 属性相关的元信息	STF

可选的属性 DTD 指示此属性允许在哪种 DTD 中使用。S=Strict, T=Transitional, F=Frameset.

属性	值	描述	DTD
http-equiv	content-type expires refresh set-cookie	把 content 属性关联到 HTTP头部。	STF
name	author description keywords generator revised others	把 content 属性关联到一个名称。	STF
scheme	some_text	定义一种用来翻译 content 属性值的格式。	STF

name 属性

name 属性提供了名称/值对中的名称。HTML 和 XHTML 标签都没有指定任何预先定义的 <meta> 名称。通常情况下，您可以自由使用对自己和源文档的读者来说富有意义的名称。 “keywords” 是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。类似这样的 meta 标签可能对于进入搜索引擎的索引有帮助：

<meta name="keywords" content="HTML,ASP,PHP,SQL">

如果没有提供 name 属性，那么名称/值对中的名称会采用 http-equiv 属性的值。

http-equiv 属性

http-equiv 属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。当服务器向浏览器发送文档时，会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。使用带有 http-equiv 属性的 <meta> 标签时，服务器将把名称/值对添加到发送给浏览器的内容头部。例如，添加：

<meta http-equiv="charset" content="iso-8859-1">
<meta http-equiv="expires" content="31 Dec 2008">

这样发送到浏览器的头部就应该包含：

content-type: text/html
charset:iso-8859-1
expires:31 Dec 2007

当然，只有浏览器可以接受这些附加的头部字段，并能以适当的方式使用它们时，这些字段才有意义。

<meta http-equiv=”Content-Type” content=”text/html”;charset=gb_2312″>和<meta http-equiv=”Content-Language” content=”zh-CN”>用以说明主页制作所使用的文字以及语言；
<meta http-equiv=”Refresh” content=”n;url=http://yourlink”>定时让网页在指定的时间n内，跳转到页面http://yourlink；
<meta http-equiv=”Expires” content=”Mon,12 May 2001 00:20:00 GMT”>可以用于设定网页的到期时间，一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式；
<meta http-equiv=”set-cookie” content=”Mon,12 May 2001 00:20:00 GMT”>cookie设定，如果网页过期，存盘的cookie将被删除。需要注意的也是必须使用GMT时间格式；

content 属性

content 属性提供了名称/值对中的值。该值可以是任何有效的字符串。 content 属性始终要和 name 属性或 http-equiv 属性一起使用。

scheme 属性

scheme 属性用于指定要用来翻译属性值的方案。此方案应该在由 <head> 标签的 profile 属性指定的概况文件中进行了定义。

标准属性 dir, lang, xml:lang

HTML4默认样式

2008-03-05 14:18:58 1条评论»

html,address,blockquote,body,dd,div,dl,dt,fieldset,form,frame,frameset,
h1,h2,h3,h4,h5,h6,noframes,ol,p,ul,center,dir,hr,menu,pre{display:block;}
li{display:list-item;}
head{display:none;}
table{display:table;}
tr{display:table-row;}
thead{display:table-header-group;}
tbody{display:table-row-group;}
tfoot{display:table-footer-group;}
col{display:table-column;}
colgroup{display:table-column-group;}
td,th{display:table-cell;}
caption{display:table-caption;}
th{font-weight:bolder; text-align:center;}
caption{text-align:center;}
body{margin:8px; line-height:1.12;}
h1{font-size:2em; margin:.67em 0;}
h2{font-size:1.5em; margin:.75em 0;}
h3{font-size:1.17em; margin:.83em 0;}
h4,p,blockquote,ul,fieldset,form,ol,dl,dir,menu{margin:1.12em 0;}
h5{font-size:.83em; margin:1.5em 0;}
h6{font-size:.75em; margin:1.67em 0;}
h1,h2,h3,h4,h5,h6,b,strong{font-weight:bolder;}
blockquote{margin-left:40px; margin-right:40px;}
i,cite,em,var,address{font-style:italic;}
pre,tt,code,kbd,samp{font-family:monospace;}
pre{white-space:pre;}
button,textarea,input,object,select{display:inline-block;}
big{font-size:1.17em;}
small,sub,sup{font-size:.83em;}
sub{vertical-align:sub;}
sup{vertical-align:super;}
table{border-spacing:2px;}
thead,tbody,tfoot{vertical-align:middle;}
td,th{vertical-align:inherit;}
s,strike,del{text-decoration:line-through;}
hr{border:1px inset;}
ol,ul,dir,menu,dd{margin-left:40px;}
ol{list-style-type:decimal;}
ol ul,ul ol,ul ul,ol ol{margin-top:0; margin-bottom:0;}
u,ins{text-decoration:underline;}
br:before{content:"\A";}
:before,:after{white-space:pre-line;}
center{text-align:center;}
abbr,acronym{font-variant:small-caps; letter-spacing:0.1em;}
:link,:visited{ text-decoration:underline;}
:focus{outline: thin dotted invert;}
/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"]{direction:ltr; unicode-bidi:bidi-override;}
BDO[DIR="rtl"]{direction:rtl; unicode-bidi:bidi-override;}
*[DIR="ltr"]{direction:ltr; unicode-bidi:embed;}
*[DIR="rtl"]{direction:rtl; unicode-bidi:embed;}
@media print{
h1{ page-break-before: always;}
h1,h2,h3,h4,h5,h6{page-break-after:avoid;}
　　ul,ol,dl{page-break-before:avoid;}
}

你记得多少HTML标签？

2007-12-06 23:35:13 2条评论»

极度汗颜～···用了五分钟，抓破脑袋也只写出了51个，还有40没想出来。看结果，没想出来的，要么是用的最多的，比如我都没想出来，要么就是我根本不知道的。51个，算算～···[redface]，原来还没有及格呀～···看来我对HTML还是一无所知～

标记一下

我写出来的:

A, B, BODY, CAPTION, CENTER, CODE, COL, DD, DIV, DL, DT, EM, FONT, FORM, H1, H2, H3, H4, H5, H6, HR, HTML, I, IMG, INPUT, LABEL, LI, MAP, MENU, META, OBJECT, OL, P, PRE, S, SCRIPT, Select, SPAN, STRONG, STYLE, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TITLE, TR, U, UL。

这是我没写出来的:(似乎有十多个从来没见过)

ABBR, ACRONYM, ADDRESS, APPLET, AREA, BASE, BASEFONT, BDO, BIG, BLOCKQUOTE, BR, BUTTON, CITE, COLGROUP, DEL, DFN, DIR, FIELDSET, FRAME, FRAMESET, HEAD, IFRAME, INS, ISINDEX, KBD, LEGEND, LINK, NOFRAMES, NOSCRIPT, OPTGROUP, OPTION, PARAM, Q, SAMP, SMALL, STRIKE, SUB, SUP, TT, VAR。

看看你能写出多少个：http://www.justsayhi.com/bb/html_quiz

标准化你的表格

2007-11-23 21:44:34 3条评论»

“div+css”极度盛行的今天，很多人已经忘了在HTML里还有table呃～，也有很多人记得只是不愿再想起。单纯为了div而完全抛弃table的做法绝对是不可取的。table没什么错，初衷就是用来显示数据的，错在很多人在那个年代把它用在了布局上，而且用滥了。

在table广泛用于布局的时代，或许很多人眼中table就是，其实不然，即使早在HTML4之前，至少就有了，标签，HTML4开始引入<thead>,<tbody>,<tfoot>,<col>,<colgroup>标签。微软更是为table完美的数据表现添加了大量的扩展属性。当然了，如果表格单纯用于页面布局，这些标签或者属性基本是一无是处。但是当table回归它本来地位时，这一切变得重要。

<caption>：用于指定可选的表格外加标题，内容通常显示在表格上方或者下方以表明表格的内容，默认居中显示。

<th>：设置表格的标题，浏览器以不同的样式显示标题，一般将标题居中，并以黑体显示。

<thead>：其内容组成表格的标题，它可以包含<tr>,<th>
、和<td> 。除了便于组织和应用样式外，为这些内容分组的优点在于这样可能在多个页面中重复某些元素，主要体现在打印表格中。

<tfoot>：与<thead>标签类似，其用于在表格中创建一个页脚，亦可在多页上出现。

<tbody>：指定表格正文，并可以出现多次（<thead> 、<tfoot>只可在表格中出现一次）。熟悉各标签相应功能后，那么构建一个合理的用于呈现数据的表格，就变得很简单了。各尽其用，最大限度地表示出数据间的关系，这才是table真正用途之所在。那么我们可以构建如下完美数据表格。

wondger’s blog
Category ID	Category Name	Description
1	简单生活	我的简单生活
2	web相关	web应用，业界新闻
3	设计制作	web标准，web设计

查看代码效果

合理的数据表格呈现，远不止构建一个合理的代码结构，更要在数据的视觉表现上做一定的设计。比如标题与正文内容的区分，数据的显示方式，对齐原则等，设计者大可自由发挥。

BTW:啥是标准啊？我相信很多人回答不上来。尽管很多人都自称是css高手，div+css高手，在一个web标准的群里问，没人吭声，都是潜水王，都忘了这个世界除了70%的水，还有30%的空气。我也不知道啥是标准，绝大多数用户也不知道。但是我知道大谈标准化的今天，标准化并不是都是为了用户而标准化，相反更多地是在为计算机标准化。计算机笨，只认识代码，管他什么结构，表现，seo，大部分是为计算机做的。国外用人工搜索引擎工作时，不会去查看源代码。个人对标准化在HTML这部分的理解是，用最合理的标签和结构去呈现最适合的内容，纯属个人观点！意见相左者就当我在YY～···

omiga

简单就好

<meta>标签详解

HTML4默认样式

你记得多少HTML标签？

标准化你的表格