zoukankan      html  css  js  c++  java
  • Java程序员从笨鸟到菜鸟之(十五)Html基础积累总结(下)

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

     

    一:表格

    1.表格的基本语法

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

    带边框的表格: 

    <table border>

    <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.跨多行、多列的表元(Table Span)

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

    <table border>

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

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

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

    </table>

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

    <table border>

    <tr><th rowspan=3> Morning Menu</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.表格尺寸设置

    边框尺寸设置: 

    <table border=#>

    表格尺寸设置: 

    <table border width=# height=#>

    表元间隙设置: 

    <table border cellspacing=#>

    表元内部空白设置:

    <table border cellpadding=#>

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

    <tr align=#>

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

    <td align=#>

    <tr valign=#>

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

    <td valign=#>

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

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

    <table align=right>

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

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

    6.表格的标题

    <table border>

    <caption align=center>Lunch</caption>

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

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

    </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=#>

    <table cellspacing=5 border=5  bordercolorlight=White bordercolordark=Maroon>

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

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

    </table>

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

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

    <table border>

    <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>

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

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

    9.表格中边框的显示 

    显示所有 个边框 <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.基本语法

    <frameset> ... </frameset>
    <frame src="url">
    <noframes> ... </noframes>

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

            <HTML>

            <HEAD>

            </HEAD>

            <FRAMESET>

                 <FRAME SRC="url">

                 <NOFRAMES> ... </NOFRAMES>

            </FRAMESET>

            </HTML>

    2.各窗口的尺寸设置

    <frameset cols=#>

    纵向排列多个窗口: 

    <frameset cols=30%,20%,50%>

    <frame src="A.html">

    <frame src="B.html">

    <frame src="C.html">

    </frameset>

    <frameset rows=#>

    横向排列多个窗口: 

    <frameset rows=25%,25%,50%>

    <frame src="A.html">

    <frame src="B.html">

    <frame src="C.html">

    </frameset>

    COLS & ROWS

    纵横排列多个窗口: 

    <frameset cols=20%,*>

    <frame src="A.html">

         <frameset rows=40%,*>

         <frame src="B.html">

         <frame src="C.html">

         </frameset>

    </frameset>

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

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

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

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

    <frameset cols=50%,50%>

    <frame src="A.html">

    <frame src="B.html" name="HELLO">

    </frameset>

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

    <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 rows=30%,*>

    <frame src="Acol.html" frameborder=1>

    <frameset cols=30%,*>

         <frame src="Bcol.html" frameborder=0>

         <frame src="Ccol.html" frameborder=0>

    </frameset>

    </frameset>

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

    边框色彩 <frameset bordercolor=#> 

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

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

    浮动窗口(Floating Frame)

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

    三:会移动的文字

    1.基本语法

    <marquee> ... </marquee>

    <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 loop=3 width=50% behavior=scroll>啦啦啦,我只走 趟哟!</marquee> <P>
    速度 <scrollamount=#>

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

    延时 <scrolldelay=#>

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

    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), 虚拟现实语言(vrml)... ...
    体会 <embed> 标记,您需要把 plugin 安装完备。
    请注意:embed attributes are different between each plugins

    2.背景音乐 

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

    <bgsound src="sound.wav" loop=3>

    3.插入视频剪辑 

    <img src="url.gif" dynsrc="url.avi">

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

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

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

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

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

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

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

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

    控制条 <img controls>

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

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

    循环播放 <img loop=#>

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

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

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

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

     loop=3 loopdelay=250>

     

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

  • 相关阅读:
    Win7+Ubuntu11.10(EasyBCD硬盘安装)
    ubuntu 定时执行php
    Javascript如何判断一个变量是普通变量还是数组还是对象?
    CSS3 Gradient
    CSS3 transform rotate(旋转)锯齿的解决办法
    win2003中Apache开启gzip功能
    CSS3图形,Css画图,Css3三角形
    apache开启gzip的压缩功能
    标签:article
    人人FED CSS编码规范
  • 原文地址:https://www.cnblogs.com/kangsir/p/6653298.html
Copyright © 2011-2022 走看看