表格及多媒体

2018-06-10  本文已影响0人  Max_M

使用表格

表格这一章有很多要记的设计表格的标记如:tr、td、caption、th、width、height、align、border、bordercolor、cellspacing、cellpadding、bgcolor、background、colspan、rowspan、valign、bordercolorlight、bordercolordark还有其他表格的表首标记thead、表格的表主体标记tbody、表格的表尾标记tfoot。

<h1>表格</h1>                     <!--表格-->
<table align="center"   border="3" height="130" width="500" cellspacing="10" cellpadding="20" bordercolor="#33FF99" >
    <caption ><h1>表格2</caption>
    <tr>
    <td colspan="3" align="center">水平跨度</td></tr>
    <tr>
    <td rowspan="2"> 垂直跨度</td>

    <td>表格12</td>
    <td>表格13</td>
    </tr>

    <tr>
    <td>表格22</td>
    <td>表格23</td>
    </tr>
   </table>

以上代码呈现的效果为

7EO73TS8EGIFX3O~QYUSZ6F.png

表单

表单主要用于手机客户端提供的相关资料是页面具有交互功能,如会员注册、网上调查等等。

1.建立表单用<from>
2.插入表单的语法基本为:<input name="控件名称" type=“控件类型” value="默认值">
其中type十分重要它指定插入哪种表单元素。
3.表单的类型,即type的取值有:文本字段text、密码域password、单选按钮radio、复选框(多选按钮)checkbox、普通按钮button、提交按钮submit、重置按钮reset、图像域image、隐藏域hidden、文件域file。
4.根据表单元素不同可对表单进行不同的定义如:text可增加文本框长度size和最多字符数maxlenth、图像域可增加src=“地址”的定义。


<h1>表单</h1>
             <!--表单-->
    <form name="form1" action="index1.html" method="post" enctype="application/x-www-form-urlencoded">
    QQ:
    <input name="qq" type="text"  size="13" maxlength="15" />
    <br>密码:
    <input name="password" type="password" maxlength="16" />
    
    <br>  <!--单选 type=“radio” 一般名称相同,有一个checked(默认选项)-->
    男:<input name="radiobuttom" type="radio" value="radiobuttom" checked="checked" />
    女:<input name="radiobuttom" type="radio" value="radiobuttom" />
    
    <br>
    爱好: <!--多选 type=“checkbox”有一个checked(默认选项)-->
    羽毛球:<input name="checkbox1" type="checkbox" value="checkbox" checked="checked" />
    乒乓球:<input name="checkbox2" type="checkbox" value="checkbox" />
    篮球:<input name="checkbox3" type="checkbox" value="checkbox" />
    
    <br><!--按钮 可加上onclick=“处理程序”来实现一些特殊的功能-->
    <input name="buttom1" type="submit" value="普通按钮" onclick="window.close()" />
    <input name="buttom2" type="submit" value="提交" />
    <input name="buttom2" type="reset" value="重置" />
    
    <br><!--下拉菜单select name 若为列表可加size=“显示列表项数”-->
    上传文件:<input name="file"  type="file" size="30" maxlength="32" />
    <br>

上述代码实现如下


image.png

添加多媒体

滚动标记marquee

使用滚动标记不仅可以移动文字,也可以移动图片、表格等。其中标记direction控制滚动方向、标记scrollamount控制滚动速度、scrolldelay控制滚动延迟、loop控制滚动循环、width和heigth控制滚动范围、bgcolor设置滚动背景、hspace和vspace设置空白空间。

下面代码即为对上述标记的基本应用及效果

<marquee  direction="right" behavior="scroll" bgcolor="#FFCCCC" scrollamount="5"  scrolldelay="400" width="300" height="100" hspace="10" vspace="10"><i>还好还好<br>或或或或或或或或</i></marquee>

效果为


image.png

还可以通过<embed src="多媒体文件地址" width=“多媒体宽度” height=“多媒体高度”></embed>来实现Flash动画效果

但我通过以下代码无法在网页中看到动画效果

 <embed src="../KuGou/The Script - Hall of Fame.mkv"> </embed> <!--在网站不显示-->

通过HTML5的形式是可以的

<video src="../KuGou/The Script - Hall of Fame.mkv" type="vidio/mkv"    poster="tooopen_sy_234303751591.jpg" controls>
     </video>

呈现结果为


image.png
上一篇 下一篇

猜你喜欢

热点阅读