`
long_yu2
  • 浏览: 313564 次
社区版块
存档分类
最新评论

Java程序员从笨鸟到菜鸟之(十五)Html基础积累总结(下) .

 
阅读更多

本文来自:曹胜欢博客专栏。转载请注明出处:http://blog.csdn.net/csh624366188

一:表格

1.表格的基本语法

<table>...</table>-定义表格
<tr>-定义表行
<th>-定义表头
<td>-定义表元(表格的具体数据)

带边框的表格:

<tableborder>

<tr><th>Food</th><th>Drink</th><th>Sweet</th>

<tr><td>A</td><td>B</td><td>C</td>

</table>

不带边框的表格:

<table>

<tr><th>Food</th><th>Drink</th><th>Sweet</th>

<tr><td>A</td><td>B</td><td>C</td>

</table>

2.跨多行、多列的表元(TableSpan)

跨多列的表元<thcolspan=#>

<tableborder>

<tr><thcolspan=3>MorningMenu</th>

<tr><th>Food</th><th>Drink</th><th>Sweet</th>

<tr><td>A</td><td>B</td><td>C</td>

</table>

跨多行的表元<throwspan=#>

<tableborder>

<tr><throwspan=3>MorningMenu</th>

<th>Food</th><td>A</td></tr>

<tr><th>Drink</th><td>B</td></tr>

<tr><th>Sweet</th><td>C</td></tr>

</table>

3.表格尺寸设置

边框尺寸设置:

<tableborder=#>

表格尺寸设置:

<tableborderwidth=#height=#>

表元间隙设置:

<tablebordercellspacing=#>

表元内部空白设置:

<tablebordercellpadding=#>

4.表格内文字的对齐/布局

<tralign=#>

<thalign=#>#=left,center,right

<tdalign=#>

<trvalign=#>

<thvalign=#>#=top,middle,bottom,baseline

<tdvalign=#>

5.表格在页面中的对齐/布局(FloatingTable)

<tablealign=left>表格在页面靠左

<tablealign=right>

<tablevspace=#hspace=#>#=spacevalue

<captionalign=#>...</caption>#=left,center,right

6.表格的标题

<tableborder>

<captionalign=center>Lunch</caption>

<tr><th>Food</th><th>Drink</th><th>Sweet</th>

<tr><td>A</td><td>B</td><td>C</td>

</table>此表格的标题在页面中间

<captionvalign=#>...</caption>#=top,bottom

7.表格的色彩

表元的背景色彩和背景图象
<thbgcolor=#>
<thbackground="URL">

#=rrggbb16进制RGB数码,或者是下列预定义色彩名称:
Black,Olive,Teal,Red,Blue,Maroon,Navy,Gray,Lime,
Fuchsia,White,Green,Purple,Silver,Yellow,Aqua

表格边框的色彩
<tablebordercolor=#>

表格边框色彩的亮度控制
<tablebordercolorlight=#>
<tablebordercolordark=#>

<tablecellspacing=5border=5bordercolorlight=Whitebordercolordark=Maroon>

<tr><th>Food</th><th>Drink</th><th>Sweet</th>

<tr><td>A</td><td>B</td><td>C</td>

</table>

8.表格的分组显示(StructuredTable)

按行分组
<thead>...</thead>-表的题头(Header)
<tbody>...</tbody>-表的正文(Body)
<tfoot>...</tfoot>-表的脚注(Footer)

<tableborder>

<thead>

<tr><th>Food</th><th>Drink</th><th>Sweet</th>

</thead>

<tbody>

<tr><td>A</td><td>B</td><td>C</td>

<tr><td>D</td><td>E</td><td>F</td>

</tbody>

</table>

按列分组
<colgroupalign=#>#=left,right,center

列的属性控制
<colspan=#>#=从左数起,具有指定属性的列的列数
<colalign=#>#=left,right,center

9.表格中边框的显示

显示所有4个边框<tableframe=box>

只显示上边框<tableframe=above>

只显示下边框<tableframe=below>

只显示上、下边框<tableframe=hsides>

只显示左、右边框<tableframe=vsides>

只显示左边框<tableframe=lhs>

只显示右边框<tableframe=rhs>

不显示任何边框<tableframe=void>

10.表格中分隔线(Rules)的显示

显示所有分隔线<tablerules=all>

只显示组(Groups)与组之间的分隔线<tablerules=groups>

只显示行与行之间的分隔线<tablerules=rows>

只显示列与列之间的分隔线<tablerules=cols>

不显示任何分隔线<tablerules=none>

二:多窗口页面

1.基本语法

<frameset>...</frameset>
<framesrc="url">
<noframes>...</noframes>

<noframes>标记后的文字将只出现在不支持FRAMES的浏览器中。

<HTML>

<HEAD>

</HEAD>

<FRAMESET>

<FRAMESRC="url">

<NOFRAMES>...</NOFRAMES>

</FRAMESET>

</HTML>

2.各窗口的尺寸设置

<framesetcols=#>

纵向排列多个窗口:

<framesetcols=30%,20%,50%>

<framesrc="A.html">

<framesrc="B.html">

<framesrc="C.html">

</frameset>

<framesetrows=#>

横向排列多个窗口:

<framesetrows=25%,25%,50%>

<framesrc="A.html">

<framesrc="B.html">

<framesrc="C.html">

</frameset>

COLS&ROWS

纵横排列多个窗口:

<framesetcols=20%,*>

<framesrc="A.html">

<framesetrows=40%,*>

<framesrc="B.html">

<framesrc="C.html">

</frameset>

</frameset>

不允许各窗口改变大小<framenoresize>

缺省设置是允许各窗口改变大小的。

3.各窗口间相互操作(FrameTarget)

窗口标识(FrameName)
<framename=#>
<ahref=urltarget=#>

<framesetcols=50%,50%>

<framesrc="A.html">

<framesrc="B.html"name="HELLO">

</frameset>

特殊的4类操作(很有用喔)

<ahref=urltarget=_blank>新窗口
<ahref=urltarget=_self>本窗口
<ahref=urltarget=_parent>父窗口
<ahref=urltarget=_top>整个浏览器窗口

4.Frame的外观(Appearance)

各窗口边框的设置<frameframeborder=#>#=yes,no/1,0

<framesetrows=30%,*>

<framesrc="Acol.html"frameborder=1>

<framesetcols=30%,*>

<framesrc="Bcol.html"frameborder=0>

<framesrc="Ccol.html"frameborder=0>

</frameset>

</frameset>

各窗口间空白区域的设置
<framesetframespacing=#>#=空白区域的大小

边框色彩<framesetbordercolor=#>

页面空白(Margin)<framemarginwidth=#marginheight=#>

卷滚条设置<framescrolling=#>#=yes,no,auto

浮动窗口(FloatingFrame)

<iframesrc=#name=##>...</iframe>
#=初始页面的URL
##=
窗口标识(FrameName)(之后可对此标识进行各窗口间相互操作)
...=此处文字将只出现在不支持FRAMES的浏览器中。

三:会移动的文字

1.基本语法

<marquee>...</marquee>

<marquee>啦啦啦,我会移动耶!</marquee

2.文字移动属性的设置

方向<direction=#>#=left,right

<marqueedirection=left>啦啦啦,我从右向左移!</marquee><P>
<marqueedirection=right>啦啦啦,我从左向右移!</marquee>

方式<behavior=#>#=scroll,slide,alternate

<marqueebehavior=scroll>啦啦啦,我一圈一圈绕着走!</marquee><P>
循环<loop=#>#=次数;若未指定则循环不止(infinite)

<marqueeloop=3width=50%behavior=scroll>啦啦啦,我只走3趟哟!</marquee><P>
速度<scrollamount=#>

<marqueescrollamount=20>啦啦啦,我走得好快哟!</marquee>

延时<scrolldelay=#>

<marqueescrolldelay=500scrollamount=100>啦啦啦,我走一步,停一停!</marquee>

3.外观(Layout)设置

对齐方式(Align)<align=#>#=top,middle,bottom

<fontsize=6>
<marqueealign=#width=400>啦啦啦,我会移动耶!</marquee>
</font>
对齐上沿、中间、下沿。

底色<bgcolor=#>

<marqueebgcolor=aaaaee>啦啦啦,我会移动耶!</marquee>

面积<height=#width=#>

<marqueeheight=40width=50%bgcolor=aaeeaa>
啦啦啦,我会移动耶!
</marquee>

四:多媒体的嵌入

1.嵌入多媒体文本(EMBED)

基本语法<embedsrc=#>#=URL

本标记可以用来在主页中嵌入多媒体文本,如:
电影(movie),声音(sound),虚拟现实语言(vrml)......
体会<embed>标记,您需要把plugin安装完备。
请注意:embedattributesaredifferentbetweeneachplugins

2.背景音乐

<bgsoundsrc=#>#=WAV文件的URL
<bgsoundloop=#>#=循环数

<bgsoundsrc="sound.wav"loop=3>

3.插入视频剪辑

<imgsrc="url.gif"dynsrc="url.avi">

url.avi这一AVI(VideoforMSWINDOWS)文件来播放视频;
url.gif这一GIF图象作为视频的封面,即:在浏览器
尚未完全读入AVI文件时,先在AVI播放区域显示该图象。

<imgsrc="SAMPLE-S.GIF"dynsrc="SAMPLE-S.AVI">

何时开始播放AVI<imgstart=#>#=fileopen,mouseover

缺省值是#=fileopen,即在链接到含本标记的页面(如本页)时开始播放AVI

mouseover是指您把鼠标移到AVI播放区域之上时才开始播放AVI

也可以两者同时设置:<imgstart=fileopen,mouseover>

另外,用鼠标在AVI播放区域点击一下,也将令浏览器开始播放该AVI

<imgsrc="SAMPLE-S.GIF"dynsrc="SAMPLE-S.AVI"start=mouseover>

控制条<imgcontrols>

用来在视频窗口下附加MSWINDOWSAVI播放控制条。

<imgsrc="SAMPLE-S.GIF"dynsrc="SAMPLE-S.AVI"controls>

循环播放<imgloop=#>

<loop=infinite>将循环播放不止。

<imgsrc="SAMPLE-S.GIF"dynsrc="SAMPLE-S.AVI"loop=3>

延时<imgloopdelay=#>#=毫秒数

<imgsrc="SAMPLE-S.GIF"dynsrc="SAMPLE-S.AVI"

loop=3loopdelay=250>

本文来自:曹胜欢博客专栏。转载请注明出处:http://blog.csdn.net/csh624366188

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics