存档

‘HTML/CSS’ 分类的存档

Flash中<object>的标签属性

2011年12月7日 没有评论

索引

一、介绍

OBJECT标签是用于windows IE3.0及以后浏览器或者其它支持Activex控件的浏览器。

“classid”和“codebase”属性必须要精确地按上例所示的写法写,它们告诉浏览器自动下载flash player的地址。如果你没有安装过flash player,浏览器会跳出一个提示框访问是否要自动安装flash player。当然,如果你不想让那些没有安装flash player的用户自动下载播放器,或许你可以省略掉这些代码。

EMBED标签是用于Netscape Navigator2.0及以后的浏览器或其它支持Netscape插件的浏览器。“pluginspage”属性告诉浏览器下载flash player的地址,如果还没有安装flash player的话,用户安装完后需要重启浏览器才能正常使用。

为了确保大多数浏览器能正常显示flash,你需要把EMBED标签嵌套放在OBJECT标签内,就如上面代码例子一样。支持Activex控件的浏览器将会忽略OBJECT标签内的EMBED标签。Netscape和使用插件的IE浏览器将只读取EMBED标签而不会识别OBJECT标签。也就是说,如果你省略了EMBED标签,那firefox就不能识别你的flash了。

二、必需属性

width:以百分比或象素指定flash影片的宽度。
height:以百分比或象素指定flash影片的高度。
classid:设置浏览器的Activex控件,仅用于OBJECT标签。
codebase:设置flash Activex控件的位置,因而如果浏览器如果没有安装的话,可以自动下载安装。仅用于OBJECT标签。
movie:指定影片的下载地址。仅用于OBJECT标签。
src:指定影片的下载地址。仅用于EMBED标签。。
pluginspage:设置flash 插件的位置,因而如果浏览器如果没有安装的话,可以自动下载安装。仅用于EMBED标签。

三、可选属性

id:设定变量名,用于脚本代码的引用。仅用于OBJECT
name:设定变量名,用于脚本代码(如javascript)的引用。仅用于EMBED。
play:[true或false]指定flash影片是否在下载完成后就自动播放,如果省略此属性,则默认为true。
loop:[true或false]指定影片播放完最后一帧后是停止还是继续循环播放,如果省略此属性,则默认为true。
menu:[true或false] True 显示全部的菜单,允许用户放大,缩小等控制影片播放等操作;False 显示只包含设置选项和关于flash的菜单。
quality:[low, high, autolow, autohigh, best ]。

  • low:速度优于美观,而且不应用反锯齿;
  • high:美观优于播放速度,而且一直应用反锯齿。如果影片不包含动画,位图会被平滑化;而如果影片包含动画,位图将不变平滑;
  • autolow:刚开始着重于速度,但当需要时随时提升美观;
  • autohigh:同时着重播放速度和美观,但需要时则牺牲美观来保证播放速度;
  • best:提供最好的显示质量而不考虑播放速度。所有输出都应用反锯齿及所有位图都被平滑化。
scale:[showall, noborder, exactfit]

  • showall:默认。影片在指定的区域内显示,但保持原始的比例。影片两侧将会出现边框。
  • noborder:收缩影片以适合指定的区域,保持影片不失真,但部分影片将可能将裁切。然而保持影片的原始比例。
  • exactfit:使整个影片在指定的区域内显示,影片有可能变形失真,而且不保持原始的比例。
align: [l, t, r, b]默认为居中,当浏览器窗口小于影片时,边缘会被裁切。Left,Right,Top,Bottom按照相应的设置沿浏览器的边缘对齐。如果需要,另外三边将被裁切。
salign:[l, t, r, b, tl, tr, bl, br]L,R,T,B 左,右,上,下
TL,TR,BL,BR 左上,右上,左下,右下
wmode:[window, opaque, transparent] 设置flash影片的window mode属性,指定flash在浏览器中的透明,层叠及位置。

  • window:影片在浏览器中自己的矩形窗口内播放
  • opaque:影片隐藏了所有在它后面的内容
  • transparent:使flash影片透明,显示透明影片后面的网页内容。这将会降低动画的性能。而且这个属性不是在所有浏览器中都可用的。
bgcolor:[#RRGGBB, 十六进制RGB值]。指定影片的背景颜色。使用这个属性覆盖flash中设定的背景颜色。
base:设定基准目录或URL,用来解决所以flash中的相对路径。类似网页中的<base>标签。

allowFullScreen

allowFullScreen:[true或false],是否允许用户开启全屏模式,默认为true,开启。
flashVars:传递变量到flash player,需要flash player6及以后的版本。传递root级变量到影片。字符串的格式是用“& ”分隔的name=value集。浏览器支持64kB大小的字符串长度。

四、参考

http://kb2.adobe.com/cps/127/tn_12701.html

【学习笔记】关于CSS3的transform、transition、animation

2011年7月5日 1 条评论

三个属性的解释如下:

transform{transform-function}

{transform-function}:有scale(缩放)、rotate(旋转)、skew(倾斜)、translate(移动)等方法。每个方法都有两个参数,分别是当时2D空间的X和Y坐标。

transform-origin{和background-position的属性值一样}是指变形的基准点。

transition{property duration timing-function}

{transition-property}:要进行动画的属性;
{transition-duration}:要进行动画的时间(单位:s(秒))
{transition-timing-function}:要进行的动画效果;有linear(均速)、ease-in(慢到快)、ease-out(快到慢)、ease(慢快慢)

animation{name duration timing-function}

{name}:#关键帧#的名称;
{duration}:要进行动画的时间(单位:s)
{timing-function}:要进行的动画效果;有linear(均速)、ease-in(慢到快)、ease-out(快到慢)、ease(慢快慢)

关键帧:@keyframes name
其格式如下:

1
2
3
4
5
6
7
8
9
10
@-webkit-keyframes facebook{
   0%{ 
     }
 
   50%{
     }
 
   100%{
      }
}

facebook是此关键帧的name(详看Demo1)

以下Demo演示环境:Chrome 8+

Demo 1:

提示:你可以先修改部分代码再运行。

Demo 2

提示:你可以先修改部分代码再运行。

五个星期五,五个星期六,和五个星期日真的823年才出现一次?

2011年7月4日 3 条评论

老早之前看过这样的微博。当时写了个JS验证了它的错误。不过,今天又看到有人转,于是翻到那时写的JS,小批一下= =||。

运行下面代码看2009年到2099年发生“五个星期五,五个星期六,五个星期日”的月份

提示:你可以先修改部分代码再运行。

HTML5的几个有意思语义标签

2011年5月24日 10 条评论

终于可以安静下来去看书了。昨晚小翻《HTML5与CSS3权威指南》。喜欢HTML5的语义化标签,喜欢没得说。有意义的很。嘎嘎~~有小感如下:

主体结构标签

主要包括article,section,nav,aside四个标签,也可以加以原来万能的div标签。按照其抽象程度可以这样分:

article >(aside || nav) > section > div

当然在HTML4中时,万能的Div可以代替其它。但是在HTML5中,语义化的结构要求我们不要这样做。

article:页面中可以独立的,完整的,可以独自被外部引用的内容。可以理解为这部分拿到一个新页面,仍然可以做一个新页面不影响使用。所以,一个article包括,页头(header),页脚(footer).

section:页面中内容中可以独立的一个模块。这个模块通常含有标题及内容。按我的理解,就是此section是一个独立与其它模块互不影响(CSS方面)的一部分。页面呈现也就是单独的一块内容。所以不要把section当做容器来用。

aside:当前页面的附属信息。例如,一些名词解释,广告等。有时候也会比section抽象的程度高些。

nav:这个最好理解,页面中导航的链接组,一般只有一个。

div:这是万能的。如果能用以上的几个标签就要它们。

非主体结构标签

主要有header,footer,hgroup,footer,address.

header:可以抽象为一块的引导性标,就是这一块大致抽象的标题导航之类的东西。所以里面一般都会有HX标签。

footer:从header可以得到一块也需要一个此块的相关注解,也及为这一块的附加信息。

hgroup:Hx组

address:和它的意思一样,用来呈现相关联系信息。

待续。。。。。

分类: HTML/CSS, 读书笔记 标签:

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

2011年4月13日 没有评论

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

分类: HTML/CSS 标签:

利用content清除浮动的一个问题

2011年3月9日 没有评论

常用的清除浮动方式:

.clear{
	zoom:1;
	list-style:none;
}
.clear:after {
	height:0;
	clear:both;
	content:".";
	visibility:hidden;
	display:block;
}

PS:极不喜欢用overflow,弱弱地觉得overflow是对页面布局可扩展的阻碍。

这个大部分用的时候还行,很爽。不过有时候却发现了问题,在Chrome中。

 

 

  • 姓名:
  • 年龄:21
  • 电话:1383855004520
  • 邮箱:sun1988.vip@gmail.com

在Chrome中的情况如图:

会发现出行了换行问题。如果把CSS中:after的content去掉,会正常。这是为什么呢?

仔细想了想,应该是content在Chrome有点特殊,另外content是利用after加到当前一个文本,这样在渲染的时候,Chrome对利用after的content加的文字和原来的文字发生了冲突。

分类: HTML/CSS 标签:

一个tab键切换问题

2010年9月7日 没有评论

最近做注册时,用focus和blur事件出现些问题.
Chrome和Safari在单击表单标签radio上不支持blur(不过用tab切换却支持);
但单击radio后再按tab键.Chrome和safari又不理想了.

如下bug-demo

提示:你可以先修改部分代码再运行。

分类: HTML/CSS, JavaScript 标签:

XHTML1.0的几个注意(一)

2010年7月13日 1 条评论

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.

分类: HTML/CSS, 读书笔记 标签:

HTML中DTD里的一些事儿

2010年7月1日 没有评论

另存在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 -->
<!--TITY % 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 -->
<!--TITY % 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 -->
<!--TITY % 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 -->
<!--TITY % 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 -->
 
<!--TITY % TextAlign "align (left|center|right|justify) #IMPLIE-->
 
<!--=================== Text Elements ====================================-->
 
<!--TITY % special.extra "object | applet | img | map | ifram-->
 
<!--TITY % special.basic "br | span | bd-->
 
<!--TITY % special "%special.basic; | %special.extra-->
 
<!--TITY % fontstyle.extra "big | small | font | basefon-->
 
<!--TITY % fontstyle.basic "tt | i | b | u | s | strike-->
 
<!--TITY % fontstyle "%fontstyle.basic; | %fontstyle.extra-->
 
<!--TITY % phrase.extra "sub | su-->
<!--TITY % phrase.basic "em | strong | dfn | code | q |samp | kbd | var | cite | abbr | acrony-->
 
<!--TITY % phrase "%phrase.basic; | %phrase.extra-->
 
<!--TITY % inline.forms "input | select | textarea | label | butto-->
 
<!-- these can occur at block or inline level -->
<!--TITY % misc.inline "ins | del | scrip-->
 
<!-- these can only occur at block level -->
<!--TITY % misc "noscript | %misc.inline-->
 
<!--TITY % inline "a | %special; | %fontstyle; | %phrase; | %inline.forms-->
 
<!-- %Inline; covers inline or "text-level" elements -->
<!--TITY % Inline "(#PCDATA | %inline; | %misc.inline;)-->
 
<!--================== Block level elements ==============================-->
 
<!--TITY % heading "h1|h2|h3|h4|h5|h-->
<!--TITY % lists "ul | ol | dl | menu | di-->
<!--TITY % blocktext "pre | hr | blockquote | address | center | noframe-->
 
<!--TITY % block "p | %heading; | div | %lists; | %blocktext; | isindex |fieldset | tabl-->
 
<!-- %Flow; mixes block and inline and is used for list items etc. -->
<!--TITY % Flow "(#PCDATA | %block; | form | %inline; | %misc;)-->
 
<!--================== Content models for exclusions =====================-->
 
<!-- a elements use %Inline; excluding a -->
 
<!--TITY % a.content "(#PCDATA | %special; | %fontstyle; | %phrase; | %inline.forms; | %misc.inline;)-->
 
<!-- pre uses %Inline excluding img, object, applet, big, small, font, or basefont -->
 
<!--TITY % pre.content "(#PCDATA | a | %special.basic; | %fontstyle.basic; | %phrase.basic; | %inline.forms; | %misc.inline;)-->
 
<!-- form uses %Flow; excluding form -->
 
<!--TITY % form.content "(#PCDATA | %block; | %inline; | %misc;)-->
 
<!-- button uses %Flow; but excludes a, form, form controls, iframe -->
 
<!--TITY % 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(混合);

分类: HTML/CSS, 读书笔记 标签:

lang=”gb2312″是错误的.

2010年6月25日 没有评论

见到有页面这样写

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

其实是错误的.具体看http://www.w3school.com.cn/tags/html_ref_language_codes.asp
再加一个测试(用firefox查看)

提示:你可以先修改部分代码再运行。

分类: HTML/CSS 标签: