HTML5 学习(2)

五.制作表格

表格通常由标题,表头,行和单元格组成
①表格标记 <table></table>
表格标记中有width(设置宽度),border(设置边框),align(对齐方式),bgcolor(背景色)等属性
②标题标记<caption></caption>
③行标记<tr></tr>
④ 单元格标记(行中的列)<td></td>
又称列标记,一个tr标记中可以嵌套若干个td标记

eg

<table width="300" height-"150" border="1" align="center">
    <caption>学生成绩</caption>
    <tr>
        <td align="center" valign="middle">姓名</td>
        <td align="center" valign="middle">语文</td>
        <td align="center" valign="middle">数学</td>
        <td align="center" valign="middle">英语</td>
    </tr>
    <tr>
        <td align="center" valign="middle">琦琦</td>
        <td align="center" valign="middle">89</td>
        <td align="center" valign="middle">92</td>
        <td align="center" valign="middle">84</td>
    </tr>
    <tr>
        <td align="center" valign="middle">宁宁</td>
        <td align="center" valign="middle">98</td>
        <td align="center" valign="middle">89</td>
        <td align="center" valign="middle">87</td>
    </tr>
    <tr>
        <td align="center" valign="middle">婷婷</td>
        <td align="center" valign="middle">92</td>
        <td align="center" valign="middle">97</td>
        <td align="center" valign="middle">89</td>
    </tr>
</table>

运行结果

六 播放音频和视频

Web页面想要包含视频,可以使用object和embed,这两个元素使用起来需要制定很多参数,因此HTML5 提供了两个用来播放音频和视频的标记audio 和 video
①播放音频标记audio
想要在网络中播放一段MP3 可以使用下面的代码

<audio src="http://mingrisoft.com/temp/cuckoo.mp3" autoplay>您的浏览器不支持&lt;audio&gt;标记!</audio> 

浏览器支持的音频格式不同,因此可以提供不同格式的音频文件

 <audio autoplay="autoplay" controls="controls">
        浏览器不支持&lt;audio&gt;
        <source src="lujing.mp3" type="audio/mp3" />
        <source src="=lujing.ogg" type="audio/ogg" />
    </audio>
这样浏览器就可以选择支持的格式的源文件

② 视屏播放标记video

<video src="url" withd="value" height="value" autoplay="true|false" controls="true|false">
浏览器不支持`&lt;video&gt;`标记!
</video>

其中controls属性用于指定是否显示播放控制组件

七.表单标记

通过HTMl表单,可以将用户输入的信息提交到服务器,通过服务器处理,再传给客户的浏览器,从而实现网站和用户的交互 1.form标记 form标记用于在页面中插入表单,在该标记中可以定义处理表单数据程序的RUL地址等信息 格式如下

<form name="from name" method="method" action="url" enctype="value" target="target_win"
...
</form>

name属性: 用于指定表单的名称
method 属性:用于指定表单的提交方式,可选项包括 POST GET
action属性 用于指定表单提交的URL 地址(相对/绝对地址),表单的处理页
entype属性 表单的编码方式 可选值为:text/plain 纯文本方式传送信息 application/x-www-form-urlencoded 默认方式编码形式 multipart/form-data 表示使用MINE编码
target属性:用于指定返回信息的显示方式

• _black 将返回信息显示窗口
• _parent 返回信息显示在父及窗口
• _self 返回信息显示在当前窗口
• _top 返回信息显示在顶级窗口

eg: 在HTML文档中插入一个表单标记,名称为form,当用户提交表单是,提交至action.html页面进行处理

<form id="form1" name="form" method="post" action="action.html" target="_blanck">
</form>

① input 表单输入标记
最频繁的表单标记,向页面中天机单行文本,多行文本,按钮等

<input type="image" disabled="disabled" checked="checked" width="digit" height="digit" maxlenth="digit" readonly="" size="digit" src="uri"  usemap="uri" alt="" name="checkbox" value=checkbox ></input>

type 决定列输入数据的类型

② <select>...</select> 下拉菜单标记
select 标记格式

<select name="name" size="size" multiple="multiple" disable="">
</select>

size:指定列表框中显示的选项数量,超过则显示滚动条
multiple: 多行列表框支持多选
eg 在HTML 文档中插入一个表单标记,设置表单名称为form,当用户提供表单时,提交至action.html 页面进行处理

<select name="zone">
<option value="1">吉林</option>
<option value="2">辽宁</option>
<option value="3">黑龙江</option>
<option value="4">河南</option>
<option value="5">河北</option>
<option value="6">山西</option>
</select>

③ textarea 多行文本标记
textarea 为多行文本标记,多行文本标记可以输入更多的内容,textarea 一般出现在form 标记的标记内容中
默认值