最新日志

HTML中DTD里的一些事儿(二)

1.特殊的elements有:
"object | applet | img | map | iframe | br | span | bdo"


常用的如下:
img:(Images)属于空元素.
PS:alt属性是必须的(DTD的类型为#REQUIRED)。且alt是为不能显示图像、窗体或applets的用户代理(UA),alt属性用来指定替换文字。title是说明属性。页面中除HTML,title等一些标签外的大部分标签都有这属性

iframe:(inline frames),没有必须属性

这个标签可以嵌套内联和块级元素。不过好像没有意义;如下:
<iframe src="http://www.baidu.com/"><div>这样也可以呀!!</div></iframe>

br:(line break)属于空元素.它有一个clear属性.和CSS里的clear一样,唯一区别是css的clear:both;而br里的属性clear是clear="all"

span:最基本的内联元素.可以添加id或class增强相关语义

2.字体类型elements
"big | small | font | basefont | tt | i | b | u | s | strike "

3.词组短语类型elements
sub | sup | em | strong | dfn | code | q |samp | kbd | var | cite | abbr | acronym

sub:(subscript)下标
sup:(superscript) 上标
em:(emphasis) 强调
strong:(strong emphasis) 特别强调(重视)
dfn:(definitional) 明确的 标签可标记那些对特殊术语或短语的定义
code:(program code) 程序代码
q:(inlined quote) 内联引用
samp:(sample) 样本 标签表示一段用户应该对其没有什么其他解释的文本字符
kbd:(something user would type) 定义键盘文本
var:(variable) 变量
cite:(citation) 引用 引证 标签通常表示它所包含的文本对某个参考文献的引用,比如书籍或者杂志的标题。
abbr:(abbreviation) 缩写 表示一个缩写形式,比如 "Inc."、"etc."。通过对缩写词语进行标记,您就能够为浏览器、拼写检查程序、翻译系统以及搜索引擎分度器提供有用的信息
acronym:(acronym) 首字母简略词 素可定义只取首字母缩写

4.head类型elements
"h1 | h2 | h3 | h4 | h5 | h6"

5.列表类型elements
"ul | ol | dl | menu | dir"

ul:(Unordered list)无序号列表
ol:(Ordered list)有序列表
dl:(definition lists)定义列表
menu,dir 不赞成或不被支持

6.块级文本elements
"pre | hr | blockquote | address | center | noframes"

pre:(Preformatted)预格式化 可以嵌套除"img|object|applet|big|small|sub|sup|font|basefont"的内联元素
hr:(Horizontal Rule)水平线
blockquote:( Block-like Quotes)
address:(Address) 可以嵌套p标签

7.块级elements
p | head类型 | 列表类型 | 块级文本类型 |fieldset | table

8.表单elements
form | label | input | select | optgroup | option | textarea | fieldset | legend | button

form:必须属性action,默认get方法,enctype默认为"application/x-www-form-urlencoded"
label:标记
input:输入框,其name值是必须的(submit和reset除外)。默认type为text.
select:(option selector) 选择器
optgroup:(option组),属性中label是必须的。
option:选择器内容
textarea:多行文本域,其中rows(行),cols(列)必须
fieldset:表单区域
legend:表单区域标记
button:默认type为:submit

XHTML1.0的几个注意(一)

XHTML1.0是XHTML的第一个规范.它是将3种HTML4应用到XML1.0后重新形成的.意图是:作为一种语言,内容既符合XML,并且如果依照一些简单的指导方针,也能被HTML4用户代理程序识别.

XHTML的几个注意----------------------------------

1.属性必须用引号.
2.属性最小化.
XML不支持属性最小化,属性值必须写全.像compact,checked这样的属性名不能不指定属性值而在元素中出现。

3.Script and Style 元素
在XHTML中,script和style元素声明为#PCDATA内容形式,但在XML显示的元素得去#CDATA内容形式.(^^可以想像中JS在XML中的情景)

4.一些禁止元素
a 不能包含其它a元素。
pre 不能包含 img,object,big,small,sub,或 sup 元素
button 不能包含 input,select,textarea,label,button,form,fieldset,iframe 或 isindex 元素
label 不能包含其它label 元素
form 不能包含其它 form 元素

5.空元素
在空元素结束符 / 和 > 前加一个空格,如 <br />,<hr /> 和 <img src="karen.jpg" alt="Karen" />. 还有,使用最小化的标签语法,如<br />,因为另一种XML允许的语法 <br></br> 在很多现有用户代理程序会导致不可靠的结果。

6.属性值内部不要分行或有多个空格符号
7.lang 和 xml:lang 属性
在指定元素的语言时同时使用 lang 和 xml:lang 属性。xml:lang 属性在前

8.不赞成在 a,applet,form,frame,iframe,img,和 map 元素中使用name属性,在以后的XHTML版本中,它将被去除
9.布尔属性(看你懂几个?)
compact,nowrap,ismap,declare,noshade,checked,disabled,readonly,multiple,selected,noresize,defer

10.属性值中使用&
在属性值中含有&符号时,它必须用字符实体引用来表示 (即 "& amp;"). 例如,当一个元素的 href 属性指向一个接收参数的 CGI脚本时,它必须表示为http://my.site.dom/cgi-bin/myscript.pl?class=guest& amp;name=user,而不是 http://my.site.dom/cgi-bin/myscript.pl?class=guest&name=user.


参考:http://www.w3.org/TR/2000/REC-xhtml1-20000126/

HTML中DTD里的一些事儿

另存在http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd打开后会发现里面的代码全是HTML的规则.
看了一点.很有意思
第一:HTML标签的属性分类
分为四类:
<!--=================== Generic Attributes ===============================-->

<!-- core attributes common to most elements
id document-wide unique id
class space separated list of classes
style associated style info
title advisory title/amplification
-->
<!ENTITY % coreattrs
"id ID #IMPLIED
class CDATA #IMPLIED
style %StyleSheet; #IMPLIED
title %Text; #IMPLIED"
>

<!-- internationalization attributes
lang language code (backwards compatible)
xml:lang language code (as per XML 1.0 spec)
dir direction for weak/neutral text
-->
<!ENTITY % i18n
"lang %LanguageCode; #IMPLIED
xml:lang %LanguageCode; #IMPLIED
dir (ltr|rtl) #IMPLIED"
>

<!-- attributes for common UI events
onclick a pointer button was clicked
ondblclick a pointer button was double clicked
onmousedown a pointer button was pressed down
onmouseup a pointer button was released
onmousemove a pointer was moved onto the element
onmouseout a pointer was moved away from the element
onkeypress a key was pressed and released
onkeydown a key was pressed down
onkeyup a key was released
-->
<!ENTITY % events
"onclick %Script; #IMPLIED
ondblclick %Script; #IMPLIED
onmousedown %Script; #IMPLIED
onmouseup %Script; #IMPLIED
onmouseover %Script; #IMPLIED
onmousemove %Script; #IMPLIED
onmouseout %Script; #IMPLIED
onkeypress %Script; #IMPLIED
onkeydown %Script; #IMPLIED
onkeyup %Script; #IMPLIED"
>

<!-- attributes for elements that can get the focus
accesskey accessibility key character
tabindex position in tabbing order
onfocus the element got the focus
onblur the element lost the focus
-->
<!ENTITY % focus
"accesskey %Character; #IMPLIED
tabindex %Number; #IMPLIED
onfocus %Script; #IMPLIED
onblur %Script; #IMPLIED"
>

从上面可以看出分为四类:
1.核心属性(coreattrs);
2.国际化属性(internationalization attributes);
3.UI事件属性(attributes for common UI events);
4.焦点属性(attributes for elements that can get the focus)

关于核心属性
一般的标签都有这个属性(包括id,class,style,title)
国际化属性
这个对页面语言编码有影响
UI事件属性
从DTD后面的发现.link标签也可以有事件属性.不过.我试了.好像没法触发.= =!!
焦点属性
focus,blur,tab键,Alt+键

第二类:HTML标签的嵌套

DTD里原代码如下:
主要的一部分
<!-- text alignment for p, div, h1-h6. The default is
align="left" for ltr headings, "right" for rtl -->

<!ENTITY % TextAlign "align (left|center|right|justify) #IMPLIED">

<!--=================== Text Elements ====================================-->

<!ENTITY % special.extra
"object | applet | img | map | iframe">

<!ENTITY % special.basic
"br | span | bdo">

<!ENTITY % special
"%special.basic; | %special.extra;">

<!ENTITY % fontstyle.extra "big | small | font | basefont">

<!ENTITY % fontstyle.basic "tt | i | b | u | s | strike ">

<!ENTITY % fontstyle "%fontstyle.basic; | %fontstyle.extra;">

<!ENTITY % phrase.extra "sub | sup">
<!ENTITY % phrase.basic "em | strong | dfn | code | q |samp | kbd | var | cite | abbr | acronym">

<!ENTITY % phrase "%phrase.basic; | %phrase.extra;">

<!ENTITY % inline.forms "input | select | textarea | label | button">

<!-- these can occur at block or inline level -->
<!ENTITY % misc.inline "ins | del | script">

<!-- these can only occur at block level -->
<!ENTITY % misc "noscript | %misc.inline;">

<!ENTITY % inline "a | %special; | %fontstyle; | %phrase; | %inline.forms;">

<!-- %Inline; covers inline or "text-level" elements -->
<!ENTITY % Inline "(#PCDATA | %inline; | %misc.inline;)*">

<!--================== Block level elements ==============================-->

<!ENTITY % heading "h1|h2|h3|h4|h5|h6">
<!ENTITY % lists "ul | ol | dl | menu | dir">
<!ENTITY % blocktext "pre | hr | blockquote | address | center | noframes">

<!ENTITY % block
"p | %heading; | div | %lists; | %blocktext; | isindex |fieldset | table">

<!-- %Flow; mixes block and inline and is used for list items etc. -->
<!ENTITY % Flow "(#PCDATA | %block; | form | %inline; | %misc;)*">

<!--================== Content models for exclusions =====================-->

<!-- a elements use %Inline; excluding a -->

<!ENTITY % a.content
"(#PCDATA | %special; | %fontstyle; | %phrase; | %inline.forms; | %misc.inline;)*">

<!-- pre uses %Inline excluding img, object, applet, big, small,
font, or basefont -->

<!ENTITY % pre.content
"(#PCDATA | a | %special.basic; | %fontstyle.basic; | %phrase.basic; |
%inline.forms; | %misc.inline;)*">

<!-- form uses %Flow; excluding form -->

<!ENTITY % form.content "(#PCDATA | %block; | %inline; | %misc;)*">

<!-- button uses %Flow; but excludes a, form, form controls, iframe -->

<!ENTITY % button.content
"(#PCDATA | p | %heading; | div | %lists; | %blocktext; |
table | br | span | bdo | object | applet | img | map |
%fontstyle; | %phrase; | %misc;)*">


上面这些只是分类,inline元素和block元素.关于标签的嵌套有三种
1.单一的inline元素;
2.单一的block元素;
3.inline元素和block元素,DTD里叫Flow(混合);

具体可以参考下图.
按此在新窗口浏览图片
//先写这么多.看这个DTD能学到不少东西.以后有新发现,再写^^'

lang="gb2312"是错误的.

见到有页面这样写

<html xmlns="http://www.w3.org/1999/xhtml" lang="GB2312">


其实是错误的.具体看http://www.w3school.com.cn/tags/html_ref_language_codes.asp

再加一个测试(用firefox查看)



关于"字体"的一些事儿

才学疏浅.理解有限- -!!.
看过好多朋友写的页面的字体.大多数都用"宋体",或者为了兼容强一点.加个Arial(Arial在win平台上和Mac的都有)
会这样写
font-family:Simsun,Arial;

按W3c的某种意义上.上面这段CSS应该再加个通用字体放在尾部.一般会用sans-serif(无衬线字体)
font-family:Simsun,Arial,sans-serif;

关于serif与sans-serif.
大概上可以这样讲:前者适宜可内容字体.因为它的字形有衬线.长时间看并不感觉累(宋体就是serif字体).后者,适宜做页面突出,小字号时更明显点.
DEMO1



上面DEMO中第一段和第二段是宋体从段落长短上看:可知宋体的间距稍微大的.在大量文字上不会至于因太过于拥挤而感到记忆疲惫.
有些人喜欢雅黑.很美.可它却是化妆的凤姐,大小不一,且文字多的时候.眼神无法集中.而且一般的电脑上没有这个字体.....
[待续....]
先看几个demo
1.各浏览器下的默认字体测试
2.字体总结