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

Love The Way You Lie 2022-07-13 03:43 155阅读 0赞

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

**一：表格**

**1.表格的基本语法**

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

带边框的表格：

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

</table>

不带边框的表格：

<table>

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

</table>

**2.跨多行、多列的表元(Table Span)**

跨多列的表元 <th colspan=\#>

<tr><th colspan=3> Morning Menu</th>

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

</table>

跨多行的表元 <th rowspan=\#>

<tr><th rowspan=3> Morning Menu</th>

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

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

</table>

**3.表格尺寸设置**

边框尺寸设置：

表格尺寸设置：

表元间隙设置：

表元内部空白设置：

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

<th align=\#> \#=left, center, right

<th valign=\#> \#=top, middle, bottom, baseline

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

<table align=left>表格在页面靠左

<table vspace=\# hspace=\#> \#=space value

<caption align=\#> ... </caption> \#=left, center, right

**6.表格的标题**

<caption align=center>Lunch</caption>

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

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

<caption valign=\#> ... </caption> \#=top, bottom

**7.表格的色彩**

表元的背景色彩和背景图象  
<th bgcolor=\#>  
<th background="URL">

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

表格边框的色彩  
<table bordercolor=\#>

表格边框色彩的亮度控制  
<table bordercolorlight=\#>  
<table bordercolordark=\#>

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

</table>

**8.表格的分组显示(Structured Table)**

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

<thead>

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

</thead>

<tbody>

</tbody>

</table>

按列分组  
<colgroup align=\#> \#=left, right, center

列的属性控制  
<col span=\#> \#=从左数起，具有指定属性的列的列数  
<col align=\#> \#=left, right, center

**9.表格中边框的显示**

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

只显示上边框 <table frame=above>

只显示下边框 <table frame=below>

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

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

只显示左边框 <table frame=lhs>

只显示右边框 <table frame=rhs>

不显示任何边框 <table frame=void>

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

显示所有分隔线 <table rules=all>

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

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

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

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

**二：多窗口页面**

**1.基本语法**

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

<HTML>

<HEAD>

</HEAD>

</FRAMESET>

</HTML>

**2.各窗口的尺寸设置**

纵向排列多个窗口：

</frameset>

横向排列多个窗口：

</frameset>

COLS & ROWS

纵横排列多个窗口：

</frameset>

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

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

**3.各窗口间相互操作(Frame Target)**

窗口标识(Frame Name)  
<frame name=\#>  
<a href=url target=\#>

</frameset>

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

<a href=url target=\_blank> 新窗口  
<a href=url target=\_self> 本窗口  
<a href=url target=\_parent> 父窗口  
<a href=url target=\_top> 整个浏览器窗口

**4.Frame 的外观(Appearance)**

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

</frameset>

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

边框色彩 <frameset bordercolor=\#>

页面空白(Margin) <frame marginwidth=\# marginheight=\#>

卷滚条设置 <frame scrolling=\#> \#=yes, no, auto

浮动窗口(Floating Frame)

**三：会移动的文字**

**1.基本语法**

<marquee>啦啦啦，我会移动耶！</marquee

**2.文字移动属性的设置**

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

<marquee direction=left>啦啦啦，我从右向左移！</marquee> <P>  
<marquee direction=right>啦啦啦，我从左向右移！</marquee>

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

<marquee behavior=scroll>啦啦啦，我一圈一圈绕着走！</marquee> <P>  
循环 <loop=\#> \#=次数；若未指定则循环不止(infinite)

<marquee scrollamount=20>啦啦啦，我走得好快哟！</marquee>

延时 <scrolldelay=\#>

**3.外观(Layout)设置**

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

<font size=6>  
<marquee align=\# width=400>啦啦啦，我会移动耶！</marquee>  
</font>  
对齐上沿、中间、下沿。

底色 <bgcolor=\#>

<marquee bgcolor=aaaaee>啦啦啦，我会移动耶！</marquee>

面积 <height=\# width=\#>

<marquee height=40 width=50% bgcolor=aaeeaa>  
啦啦啦，我会移动耶！  
</marquee>

**四：多媒体的嵌入**

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

基本语法 <embed src=\#> \#=URL

本标记可以用来在主页中嵌入多媒体文本，如：  
电影(movie), 声音(sound), [虚拟现实][Link 2]语言(vrml)... ...  
体会 <embed> 标记，您需要把 plugin 安装完备。  
请注意：embed attributes are different between each plugins

**2.背景音乐**

<bgsound src=\#> \#=WAV 文件的 URL  
<bgsound loop=\#> \#=循环数

**3.插入视频剪辑**

用 url.avi 这一 AVI(Video for MS－WINDOWS) 文件来播放视频；  
用 url.gif 这一 GIF 图象作为视频的封面，即：在浏览器  
**尚未完全读入 AVI 文件时，先在 AVI 播放区域显示该图象。**

**何时开始播放** AVI <img start=\#> \#=fileopen, mouseover

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

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

也可以两者同时设置：<img start=fileopen,mouseover>

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

**控制条 <img controls>**

用来在视频窗口下附加 MS－WINDOWS 的 AVI 播放控制条。

**循环播放 <img loop=\#>**

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

**延时 <img loopdelay=\#> \#=毫秒数**

<img src="SAMPLE-S.GIF" dynsrc="SAMPLE-S.AVI"

loop=3 loopdelay=250>

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

[http_blog.csdn.net_csh624366188]: http://blog.csdn.net/csh624366188
[Link 1]: http://write.blog.csdn.net/postedit#target
[Link 2]: http://lib.csdn.net/base/vr