美文网首页
2022-01-18 html第二天

2022-01-18 html第二天

作者: 学习生信的小兔子 | 来源:发表于2022-01-18 23:07 被阅读0次

表格标签

表格的主要作用

表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据
的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。
Pink老师总结: 表格不是用来布局页面的,而是用来展示数据的.

表格的基本语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table>
        <tr><td>姓名</td><td>性别</td><td>年龄</td></tr>
        <tr><td>小张</td><td>男</td><td>12</td></tr>
        <tr><td>小李</td><td>女</td><td>13</td></tr>
        <tr><td>小宋</td><td>男</td><td>14</td></tr>
    </table>
    
</body>
</html>

表头单元格标签

表格属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="249">
        <tr><th>姓名</th><th>性别</th><th>年龄</th></tr>
        <tr><td>小张</td><td>男</td><td>12</td></tr>
        <tr><td>小李</td><td>女</td><td>13</td></tr>
        <tr><td>小宋</td><td>男</td><td>14</td></tr>
    </table>
    
</body>
</html>

案例分析

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table align="center" border="1" cellpadding="0" cellspacing="0" width="700" height="249">
        <tr>
            <th>排名</th>
            <th>关键词</th>
            <th>趋势</th>
            <th>今日搜索</th>
            <th>最近七日</th>
            <th>相关连接</th>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td><img src="down.jpg"> </td>
            <td>345</td>
            <td>123</td>
            <td>
                <a href="http://www.tieba.com" target="_blank">贴吧</a> 
                <a href="#" >图片</a> 
                <a href="#" >百科</a> 
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>盗墓笔记</td>
            <td><img src="down.jpg"> </td>
            <td>124</td>
            <td>675432</td>
            <td>
                <a href="http://www.tieba.com" target="_blank">贴吧</a> 
                <a href="#" >图片</a> 
                <a href="#" >百科</a> 
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>盗墓笔记</td>
            <td><img src="up.jpg"> </td>
            <td>124</td>
            <td>675432</td>
            <td>
                <a href="http://www.tieba.com" target="_blank">贴吧</a> 
                <a href="#" >图片</a> 
                <a href="#" >百科</a> 
            </td>
        </tr>




    </table>

</body>
</html>

表格结构标签（使得结构更清晰）



合并单元格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table width="500" height="250" border="1" cellspacing="0">
        <tr>
            <td></td>
            <td colspan="2"></td>
            
        </tr>
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            
            <td></td>
            <td></td>
        </tr>





    </table>
</body>
</html>

列表标签

无序列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h4>数字字母</h4>
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
    </ul>
</body>
</html>

有序列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h4>粉丝排行量</h4>
    <ol>
        <li>a111</li>
        <li>b11</li>
        <li>c1</li>
    </ol>
</body>
</html>

自定义列表


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <dl>
        <dt>关注我们</dt>
        <dd>新浪微博</dd>
        <dd>官方微信</dd>
        <dd>联系我们</dd>
    </dl>
</body>
</html>

列表总结

表单标签

表单组成

表单域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="demo.php" method="POST" name="name1">

    </form>
</body>
</html>

表单元素



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form>
        用户名：<input type="text"> <br>
        密 码 ：<input type="password"><br>
        <!-- radio 单选按钮 可以实现多选一-->
        性 别 ：男<input type="radio"> 女<input type="radio"><br>
        <!-- cehckbox 复选框 可以实现多选 -->
        爱 好 ：吃饭<input type="checkbox"> 睡觉<input type="checkbox">
        </form>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form>
        用户名：<input type="text" name="username" value="请输入用户名"> <br>
        密 码 ：<input type="password" name="pwd"><br>
        <!-- radio 单选按钮 可以实现多选一-->
        性 别 ：男<input type="radio" name="sex" value="男"> 女<input type="radio" name="sex" value="女"><br>
        <!-- cehckbox 复选框 可以实现多选 -->
        爱 好 ：吃饭<input type="checkbox" name="hobby"> 睡觉<input type="checkbox" name="hobby">
        </form>
</body>
</html>

几个小问题




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="xxx.php" method="get">
        用户名：<input type="text" name="username" value="请输入用户名" maxlength="6"> <br>
        密 码 ：<input type="password" name="pwd"><br>
        <!-- radio 单选按钮 可以实现多选一-->
        性 别 ：男<input type="radio" name="sex" value="男"> 女<input type="radio" name="sex" value="女" checked="checked"><br>
        <!-- cehckbox 复选框 可以实现多选 -->
        爱 好 ：吃饭<input type="checkbox" name="hobby" checked="checked"> 睡觉<input type="checkbox" name="hobby"><br>
        <!-- 点击了提交按钮 就可以把 表单域form里面的表单元素 里面的值 提交给后台服务器 -->
        <input type="submit" value="免费注册">   
         <!--重置元素 可以还原表单元素初始的默认状态  -->
        <input type="reset" value="重新设置">
        <!-- 普通按钮 button -->
        <input type="button" value="获取短信验证码"><br>
        <!-- 文件域 使用场景 上传文件使用的 -->
        上传头像 <input type="file">
    </form>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <label for="text">用户名：</label> <input type="text" id="text">
    <input type="radio" id="nan"> <label for="nan">男</label>
    <input type="radio" id="nv"> <label for="nv">女</label>
</body>
</html>

select下拉表单选项

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form>
        籍贯
        <select>
            <option>贵州</option>
            <option>四川</option>
            <option>重庆</option>
            <option selected="selected">火星</option>
        </select>
    </form>
</body>
</html>

textarea文本域标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form>
        反馈
        <textarea cols="50" rows="5">我不想摸鱼</textarea>
    </form>
</body>
</html>

综合案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h4>青春不常在，抓紧谈恋爱</h4>
    <table width="600">
        <!-- 第一行 -->
        <tr>
            <td>性别</td>
            <td>
                <input type="radio" name="sex" checked="checked" id="nan"> <img src="images/man.jpg"> <label for="nan">男</label>
                <input type="radio" name="sex" id="nv"> <img src="images/women.jpg"> <label for="nv">女</label>
            </td>
        </tr>
        <!-- 第二行 -->
        <tr>
            <td>生日</td>
            <td>
                <select >
                    <option >--请选择年份--</option>
                    <option >1999</option>
                    <option >2000</option>
                    <option >2001</option>
                </select>
                <select >
                    <option >--请选择月--</option>
                    <option >10</option>
                    <option >11</option>
                    <option >12</option>
                </select>
                <select >
                    <option >--请选择日--</option>
                    <option >01</option>
                    <option >02</option>
                    <option >03</option>
                </select>

            </td>
            

        </tr>
        <!-- 第三行 -->
        <tr>
            <td>所在地区</td>
            <td><input type="text" value="北京思密达"></td>
        </tr>
        <!-- 第四行 -->
        <tr>
            <td>婚姻状况</td>
            <td>
                <input type="radio" checked="checked" name="marry" id="weihun"> <label for="weihun">未婚</label>
                <input type="radio" name="marry" id="yihun"> <label for="yihun">已婚</label>
                <input type="radio" name="marry" id="lihun"> <label for="lihun">离婚</label>
            </td>
  
        </tr>
        <!-- 第五行 -->
        <tr>
            <td>学历</td>
            <td>
                <input type="text" value="幼儿园">
            </td>
        </tr>
        <!-- 第六行 -->
        <tr>
            <td>喜欢的类型</td>
            <td>
                <input type="checkbox" name="love"> 妩媚的
                <input type="checkbox" name="love"> 可爱的
                <input type="checkbox" name="love"> 小鲜肉
                <input type="checkbox" name="love"> 老腊肉
                <input type="checkbox" checked="checked"> 都喜欢

            </td>
        </tr>
        <!-- 第七行 -->
        <tr>
            <td>
                自我介绍
            </td>
            <td>
                <textarea>自我介绍</textarea>
            </td>
        </tr>
        <!-- 第八行 -->
        <tr>
            <td> </td>
            <td>
                <input type="submit" value="免费注册">
            </td> 
        </tr>
        <!-- 第九行 -->
        <tr>
            <td>
                <td> </td>
                <input type="checkbox" checked="checked"> 我同意注册条款和会员加入标准

            </td>
        </tr>
        <!-- 第十行 -->
        <tr>
            <td></td>
            <td>
                <a href="#">我是会员，立即登录</a>
            </td>
        </tr>
        <!-- 第十一行 -->
        <tr>
            <td></td>
            <td>
                <h3>我承诺</h3>
                <ul>
                    <li>年满18岁、单身</li>
                    <li>抱着严肃的态度</li>
                    <li>真诚寻找另一半</li>
                </ul>
            </td>
        </tr>
            
    </table>
</body>
</html>

相关文章

  • 2022-01-18 html第二天

    表格标签 表格的主要作用 表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展...

  • 橙子的ScalersTalk第六轮新概念朗读持续力训练Day 9

    练习材料：[Day 2672 2022-01-18] Lesson96 The dead return A Fes...

  • 第1期—4/9—1组—裘叔—山人

    第1期—4/9—1组—裘叔—山人 CQY山人 字数 1287 · 阅读 14 2022-01-18 10:21 【...

  • 《句句成章》62  爱好浪费

    原创 老区游子 游子岁月 2022-01-18 06:12 收录于话题 #情感故事 8 个 #学会生活 懂得快乐 ...

  • 2022-01-18 html第一天

    HTML标签的导读： HTML语法规则： 1.HTML 标签是由尖括号包围的关键词，例如 。2.HTML 标签通...

  • 2018-03-20

    今天是正式上课的第二天，曹老师在帮我们讲解温习HTML，所以今天的总结还是针对html进行回顾HTML:超文本标记...

  • 2022-01-18

    《一百天打卡》2022-01-18 小结：还要连续三天的核酸检测，希望疫情快点过去吧。 昨天忘记打了，密切注...

  • 用bash写了个cgi脚本输出图片

    2022-01-18 遇到的一点小问题Android app和机器之前都是通过的TCP获取的图片，只有一个连接...

  • HTML第二天

    表格 table(会使用) 表格不是用来布局,常见处理、显示表格式数据. 表格学习要求: 能手写表格结构,并且能合...

  • HTML第二天

    Body标签：文档内容部分标签 h：标题标签 语法：标题内容 H1到 h6标签，相对于当前文档的重要...

网友评论

      本文标题：2022-01-18 html第二天

      本文链接：https://www.haomeiwen.com/subject/oklkhrtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|2022-01-18 html第二天|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！