HTML表格及表单

表格table

• 三行三列表格

<table width="500" height="300" border="1">
        <tr>
            <td>姓名</td>
            <td>姓名</td>
            <td>姓名</td>
        </tr>
        <tr>
            <td>姓名</td>
            <td>姓名</td>
            <td>姓名</td>
        </tr>
        <tr>
            <td>姓名</td>
            <td>姓名</td>
            <td>姓名</td>
        </tr>   
    </table>

• 表头标签<th></th>

<table width="500" height="300" border="1">
        <tr>
            <th>姓名</th>
            <th>姓名</th>
            <th>姓名</th>
        </tr>
        <tr>
            <td>姓名</td>
            <td>姓名</td>
            <td>姓名</td>
        </tr>
        <tr>
            <td>姓名</td>
            <td>姓名</td>
            <td>姓名</td>
        </tr>
    </table>

• 表格结构
  

  <thead></thead>
<tbody></tbody>

<table width="500" height="300" border="1">
        <thead>
        <tr>
            <th>姓名</th>
            <th>姓名</th>
            <th>姓名</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>姓名</td>
            <td>姓名</td>
            <td>姓名</td>
        </tr>
        <tr>
            <td>姓名</td>
            <td>姓名</td>
            <td>姓名</td>
        </tr>
        </tbody>
    </table>

• 表格标题<caption></caption>

<table width="500" height="300" border="1">
        <caption>三行三列表格</caption>
        <thead>

        </thead>
        <tbody>

        </tbody>
    </table>

• 合并单元格
  

  跨行合并rowspan 跨列合并colspan

    <h3>跨行合并</h3>

    <table width="500" height="300" border="1">
        <caption>三行三列表格</caption>
        <thead>
        <tr>
            <th>姓名</th>
            <th>姓名</th>
            <th>姓名</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>姓名</td>
            <td>姓名</td>
            <td rowspan="2">姓名</td>
        </tr>

        <tr>
            <td>姓名</td>
            <td>姓名</td>

        </tr>
        </tbody>
    </table>

<h3>跨列合并</h3>

    <table width="500" height="300" border="1">
        <caption>三行三列表格</caption>
        <thead>
        <tr>
            <th>姓名</th>
            <th>姓名</th>
            <th>姓名</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>姓名</td>
            <td>姓名</td>
            <td>姓名</td>
        </tr>

        <tr>
            <td>姓名</td>
            <td colspan="2">姓名</td>

        </tr>
        </tbody>
    </table>

表单

• input表单

input是一个单标签 br hr img base input<br />
    用户名：<input type="text" /><!-- 这是一个文本框 --><br />
    密  码：<input type="password" /><!-- 这是一个文本框 --><br />
    性别：<input type="radio" name="sex" />女<input type="radio" name="sex" />男<br /><!-- 单选框 如果是一组，我们通过相同的name值 来实现 -->
    爱好：<input type="checkbox" name="hobby" />足球<input type="checkbox" name="hobby" />篮球<input type="checkbox" name="hobby" />乒乓球<!-- 复选框 可以同时选择多个 -->

    <h3>默认选中</h3>
    性别：<input type="radio" name="sex" checked="checked" />女<input type="radio" name="sex" />男<br />
    爱好：<input type="checkbox" name="hobby"  checked="checked"/>足球<input type="checkbox" name="hobby" />篮球<input type="checkbox" name="hobby" />乒乓球

    <h3>按钮组</h3>
    普通按钮：搜索：<input type="button" value="搜索什么"/><br />
    提交按钮：<input type="submit" value="提交表单"/><br />
    普通按钮：<input type="reset" value="重置表单"/><br />
    图像按钮：<input type="image" src="image/im.jpg" /><br />
    上传文件：<input type="file" />

    <h3>字数限制</h3>
    密  码：<input type="password" maxlength="6" /><br />

    <h3>文本框内</h3>
    用户名：<input type="text" value="输入用户名" /><br />

• label

    <h3>label标签的使用</h3>
    <label>输入账号：<input type="text" /></label><br />
    <label for="two">输入账号：<input type="text" /><input type="text" id="two" /></label><br />

    1.用label直接进行包裹input就可以<br />
    2.如果label里面有多个表单，想定位到某个for id 可以通过的格式来进行

• 文本域textarea

    留言板：
    <textarea>请输入留言</textarea>

• 下拉菜单

    籍贯：
    <select>
        <option>点击选择您的籍贯</option>
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
        <option selected="selected">火星</option>
    </select>

• 表单域

<form action="xxx.php" method="get" name="usermessage">
</form>

• HTML5新增标签

<header>语义：定义页面的头部 页眉</header>
    <nav>语义：定义导航栏</nav>
    <footer>语义：定义 页面底部 页脚</footer>
    <article>语义：定义文章</article>
    <section>语义：定义区域</section>
    <aside>语义：定义其所处内容之外的内容 侧边</aside>
    <input type="text" value="输入明星" list="star" /><!-- input里面用list -->
    <datalist id="star"><!-- datalist里面用id来实现和input链接 -->
        <option>刘德华</option>
        <option>刘若英</option>
        <option>刘晓庆</option>
        <option>郭富城</option>
        <option>张学友</option>
    </datalist>
    <br /><br /><br /><br />

    <fieldset>
        <legend>用户登录</legend>
        用户名：<input type="text" ><br /><br /><br />
        密码 ：<input type="password" >
    </fieldset>

• HTML新增 input type

    <fieldset>
        <legend>HTML5新增的Input type 类型 那些表单</legend>
        <form action="">
            邮箱：<input type="email" /><!-- aa@aa.com --><br />
            手机：<input type="tel" /><!-- 手机格式 数字 --><br />
            数字：<input type="number" /><!-- 只能是数字 --><br />
            url：<input type="url" /><!-- 网址格式的 --><br />
            搜索：<input type="search" /><!-- 搜索 --><br />
            区域：<input type="range" /><!-- 区域 --><br />

            时间：<input type="time" /><!-- 小时 分钟 --><br />
            年月日：<input type="date" /><!-- 获得年月日 --><br />
            月份：<input type="month" /><!--年月 --><br />
            星期：<input type="week" /><!-- 周 --><br />
            颜色：<input type="color" /><!-- 颜色--><br />
            <input type="submit">
        </form>
    </fieldset>

• 新增表单属性

<h3>placeholder 占位符 当用户输入时 里面的文字消失</h3>
    <h3>autofocus 自动获得焦点</h3>
    <h3>multiple 多文件上传</h3>
    用户名：<input type="text" placeholder="请输入用户名" autofocus />
    上传头像：<input type="file" multiple />
    <h3>自动记录完成</h3>
    1.autocomplete 首先需要提交按钮<br />
    2.这个表单您必须给他名字
    3.默认是on 关闭off
    <form action="">
        姓名：<input type="text" autocomplete="on" name="username" />
        <input type="submit"/>

    </form>
    <h3>required 必填项</h3>
    <h3>accesskey 规定激活元素的快捷键 "alt+s" </h3>

    昵称：<input type="text" required accesskey="s"/>

• embed引入视频

<embed src='http://player.youku.com/player.php/sid/XMjQ3NDMxMzQzNg==/v.swf' allowFullScreen='true' quality='high' width='480' height='400' align='middle' allowScriptAccess='always' type='application/x-shockwave-flash'></embed>

• 播放音频视频

<audio src="tonghuaz.mp3" autoplay="autoplay" controls loop ="-1" /></audio><br />

    为了浏览器兼容，我们需要做三种声音文件 ogg mp3 wav<br />
        <audio controls autoplay>
        <source src="tonghuaz.mp3" />
        <source src="music.ogg" />
        您的浏览器不支持播放声音    
    </audio>

    <br />
        <video src="mp4.mp4" autoplay="autoplay" controls loop ="-1" /></video><br />

    为了浏览器兼容，我们需要做三种视频文件 ogg mp4 wavM<br />
        <video controls autoplay>
        <source src="mp4.mp4" />
        <source src="movie.ogg" />
        您的浏览器不支持播放视频    
    </video>