博客列表 >HTML 文档基本结构,无序列表,表格,表单的用法的总结-20190702

HTML 文档基本结构,无序列表,表格,表单的用法的总结-20190702

skycheng
skycheng原创
2019年07月03日 20:06:26860浏览

实例

<!DOCTYPE html>                    <!--声明了此文档的类型为html-->
<html lang="zh-cn">                <!--此处用来告诉浏览器,此网站语言为英文/或者中文,此处我设置的为中文-->
<head>                             <!--头部标签一般只与浏览器做交互,用户看不到-->
    <meta charset="UTF-8">         <!--声明此网站编码格式为UTF-8格式-->
    <title>0702作业</title>           <!--页面标题,通常在浏览器的上面标题栏显示-->
</head>
<br>                             <!--网站正文内容部分,也是页面显示出来,让用户可以看到的-->
    <h1> 20190702-学习php作业</h1>  <!--此处<h1></h1>-->

<!--下处无序列表-->
<ul>
    <li><a href="">你好</a></li>
    <li><a href="">这是</a></li>
    <li><a href="">什么</a></li>
    <li><a href="">产品</a></li>
</ul>

<!--下面为表格用法,在行的方向和并-->
<table border="1"cellspacing="0" cellpadding="5" width="600" >
   <caption>购物清单</caption>
     <thead>
       <tr bgcolor="afa9a9">
           <th>序号</th>
           <th>品名</th>
           <th>单价</th>
           <th>数量</th>
           <th>金额</th>
       </tr>
     </thead>
    <tbody>
     <tr>
         <td width="20">1</td>
         <td width="40">橡皮擦</td>
         <td width="40">1</td>
         <td width="40">5</td>
         <td width="40" >5</td>
     </tr>
     <tr>
         <td width="20">2</td>
         <td width="40">铅笔</td>
         <td width="40">3</td>
         <td width="40">5</td>
         <td width="40">15</td>
      </tr>
      <tr>
          <td width="20">3</td>
          <td width="40">圆珠笔</td>
          <td width="40">4</td>
          <td width="40">5</td>
          <td width="40">20</td>
      </tr>
      <tr>
          <td width="20">4</td>
          <td width="40">钢笔</td>
          <td width="40">6</td>
          <td width="40">5</td>
          <td width="40">30</td>
      </tr>
      <tr>
          <td width="20">5</td>
          <td width="40">笔记本</td>
          <td width="40">7</td>
          <td width="40">5</td>
          <td width="40">35</td>
      </tr>
      <tfoot>
 <tr>
     <td colspan="3" >合计:</td>
     <!--   <td width="40"></td>
            <td width="40"></td>-->
    <td width="40">25</td>
    <td width="40">105</td>
</tr>
     </tfoot>
     </tr>
    </tbody>
</table>
    <!--下面为表格用法,在列的方向和并-->
    <table border="1"cellspacing="0" cellpadding="5" width="800" >
        <caption>购物清单</caption>
        <thead>
        <tr bgcolor="f3ca0d">
            <th>序号</th>
            <th>品名</th>
            <th>单价</th>
            <th>数量</th>
            <th>金额</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td width="20">1</td>
            <td width="40">橡皮擦</td>
            <td width="40">1</td>
            <td width="40">5</td>
            <td width="40" rowspan="2">5</td>
        </tr>
        <tr>
            <td width="20">2</td>
            <td width="40">铅笔</td>
            <td width="40">3</td>
            <td width="40">5</td>
           <!-- <td width="40">15</td>-->
        </tr>
        <tr>
            <td width="20">3</td>
            <td width="40">圆珠笔</td>
            <td width="40">4</td>
            <td width="40">5</td>
            <td width="40">20</td>
        </tr>
        <tr>
            <td width="20">4</td>
            <td width="40">钢笔</td>
            <td width="40">6</td>
            <td width="40">5</td>
            <td width="40">30</td>
        </tr>
        <tr>
            <td width="20">5</td>
            <td width="40">笔记本</td>
            <td width="40">7</td>
            <td width="40">5</td>
            <td width="40">35</td>
        </tr>
        <tfoot>
<tr>
    <td colspan="3" >合计:</td>
    <!--   <td width="40"></td>
           <td width="40"></td>-->
    <td width="40">25</td>
    <td width="40">90</td>
</tr>
        </tfoot>
        </tr>
        </tbody>
</table>
<h3>用户注册</h3>
<form action="" method="get" name="register">
    <p>
        <label for="username">账号:</label>
        <input type="text" id="username" name="username=" placeholder="不要超过10个字符" autofocus>
    </p>
    <p>
        <label for="password">密码:</label>
        <input type="password" id="password" placeholder="8-20的字母组合和数字组成" autofocus>
    </p>
    <p>
        <label for="email">邮箱:</label>
        <input type="email" id="email" name="email" placeholder="abc@abc.com" required>
    </p>
    <p>
        <label for="age">年龄:</label>
        <input type="numer" id="age" name="age" min="18" max="70"
    </p>
    <p>
      <label for="birthday">生日:</label>
        <input type="date" id="birthday" name="birthday"
    </p>
     <p>
         <label for="like">爱好</label>
         <select name="like" id="like" sie="1">
                 <option value="0">请选择</option>
                 <option value="1">上网</option>
                 <option value="2">唱歌</option>
                 <option value="3" >逛街</option>
         </select>
     </p>
   <!-复选框按钮相关-->
    <p>
       <label for="course">课程:</label>
        <input type="checkbox" name="hobby[]" value="yuwen" id="yuwen"><lable for="yuwen">语文</lable>
        <input type="checkbox" name="hobby[]" value="shuxue" id="shuxue"><lable for="shuxue">数学</lable>
        <input type="checkbox" name="hobby[]" value="English" id="English"><lable for="English">英语</lable>
    </p>
    <!-单选框按钮相关-->
    <p>
    <lable for="sex">性别:</lable>
        <input type="radio" name="gender" value="male"><label for="female">男生</label>
        <input type="radio" name="gender" value="female" id="female"><label for="female">女生</label>
        <input type="radio" name="gender" value="cecrey" id="secrcy" checked><label for="secrecy">保密</label>
    </p>
    <!-- 文本域-->
    <p>
        <label for="comment">简介:</label>
        <textarea name="comment" id="comment" cols="30" rows="10" maxlength="30" placeholder="不超过30个字符"></textarea>
    </p>
    <p>
    <!-   按钮---->
        <input type="submit" name="submit" value="提交">
        <input type="reset" name="reset" value="重置">
        <input type="button" name="button" value="按钮">
    </p>
</form>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议