菜单 搜索
首页 前端知识 前端开发基础（HTML5 CSS3）【第二篇】：列表、表格、表单标签 && 文本域、label标签、button按钮、div、span标签以 及新闻列表和注册信息综合案例练习

前端开发基础（HTML5 CSS3）【第二篇】：列表、表格、表单标签 && 文本域、label标签、button按钮、div、span标签以 及新闻列表和注册信息综合案例练习

2024-06-04 10:06:25 前端知识 前端哥 479 591 我要收藏

文章目录

  • HTML5 + CSS3 开发
      • 一、列表、表格、表单标签 应用场景
      • 二、列表标签
          • 1.1 无序列表
          • 代码示例
          • 1.2 有序列表
          • 代码示例：
          • 1.3 定义标签
          • 代码示例：
      • 三、表格
          • 代码示例：
      • 四、表格结构
          • 代码示例：
      • 五、合并单元格
          • 代码示例:
      • 六、表单
          • 6.1 表单 - input 标签
            • 代码示例：
          • 6.2 input占位文本
            • 代码示例：
          • 6.3 radio 单选框
            • 代码示例：
          • 6.4 file多文件
            • 代码示例：
      • 七、多选框checkbox
            • 代码示例：
      • 八、下拉菜单
          • 代码示例：
      • 九、 表单 - 文本域
          • 代码示例：
      • label标签
          • 代码示例：
      • Button按钮
          • 代码示例：
      • 十、 无语义布局标签
          • 代码示例：
      • 十一、 字符实体
          • 代码示例：
      • 十二、 综合案例一 - 新闻列表
          • 代码示例：
      • 十三、综合案例二 - 注册信息
          • 代码示例：

HTML5 + CSS3 开发

一、列表、表格、表单标签 应用场景

  • 与之前最大的区别就是本章节学习的标签都是嵌套关系
    列表、表格、表单标签

二、列表标签

在这里插入图片描述

1.1 无序列表

在这里插入图片描述
在这里插入图片描述

代码示例
    <!-- 
         * 演示无序列表
            - 语法：      <ul>
                            <li></li>
                        </ul>
     -->

     <ul>
        <li>我是内容1</li>
     </ul>
1.2 有序列表

在这里插入图片描述

代码示例：
    <!-- 
         * 演示有序列表
            - 语法：      <ol>
                            <li></li>
                        </ol>
     -->

     <ol>
        <li>我是有序列表</li>
        <li>我是有序列表</li>
        <li>我是有序列表</li>
     </ol>
  • 效果展示：
    在这里插入图片描述
1.3 定义标签

在这里插入图片描述

代码示例：
    <!-- 
            * 演示定义列表
                - 语法：     <dl>
                                <dt></dt>
                                <dd></dd>
                             </dl>

     -->

     <dl>
        <dt>列表标题</dt>
        <dd>列表内容</dd>
     </dl>
  • 效果展示
  • 在这里插入图片描述

三、表格

在这里插入图片描述

代码示例：

    <!-- 
            * 演示表格
                —— 语法： table 包含 tr  → tr 包含 th（表头） / td（表格）
     -->

     <table border="1">
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>总分</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>99</td>
            <td>99</td>
            <td>198</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>99</td>
            <td>99</td>
            <td>198</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>99</td>
            <td>99</td>
            <td>198</td>
     </table>
  • 效果展示
    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

四、表格结构

在这里插入图片描述

代码示例：
    <!-- 
            * 演示表格结构
                —— 语法： table 包含：
                                - thead 表格头
                                - tbody 表格主体
                                - tfoot 表格底部
     -->

     <table border="1">
        <thead>
            <tr>
                <th>姓名</th>
                <th>语文</th>
                <th>数学</th>
                <th>总分</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>99</td>
                <td>99</td>
                <td>198</td>
            </tr>
            
        <tr>
            <td>李四</td>
            <td>99</td>
            <td>99</td>
            <td>198</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>99</td>
            <td>99</td>
            <td>198</td>
        </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>我是表格底部</td>
                <td>我是表格底部</td>
                <td>我是表格底部</td>
                <td>我是表格底部</td>
            </tr>
        </tfoot>

     </table>
  • 效果展示：
    在这里插入图片描述

五、合并单元格

在这里插入图片描述

代码示例:
  <!-- 
            * 演示表格合并

     -->

     <table border="1">
        <thead>
            <tr>
                <th>姓名</th>
                <th>语文</th>
                <th>数学</th>
                <th>总分</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>99</td>
                <td>99</td>
                <td rowspan="3">198</td>
            </tr>
            
        <tr>
            <td>李四</td>
            <td>99</td>
            <td>99</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>99</td>
            <td>99</td>
        </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="4">我是表格底部</td>
            </tr>
        </tfoot>

     </table>
  • 效果展示：

在这里插入图片描述

  • 这样我们就实现了合并

六、表单

在这里插入图片描述

6.1 表单 - input 标签

=在这里插入图片描述

代码示例：
    <!-- 
            * 演示 input 标签的基本使用
     -->

     文本框： <input type="text"><br><br>
     密码框： <input type="password"><br><br>
     单选框： <input type="radio"><br><br>
     多选框： <input type="checkbox"><br><br>
     上传文件： <input type="file">
  • 效果演示：

在这里插入图片描述

6.2 input占位文本

在这里插入图片描述

代码示例：
<body>
    账号：<input type="text" placeholder="输入手机号/邮箱"><br><br>
    密码：<input type="password" placeholder="请输入密码">
</body>
  • 效果展示：
    在这里插入图片描述
6.3 radio 单选框

在这里插入图片描述

代码示例：
<body>
   性别 <input type="radio" name="gender" checked="true"> 男
        <input type="radio" name="gender"> 女
</body>
  • 效果展示：

在这里插入图片描述

6.4 file多文件
代码示例：
<body>
        上传文件： <input type="file" multiple>
</body>
  • 效果展示：
    在这里插入图片描述

七、多选框checkbox

在这里插入图片描述

代码示例：
兴趣爱好： 
    <input type="checkbox" checked> 敲代码
    <input type="checkbox" checked> 前端开发
    <input type="checkbox" checked> 后端开发
    <input type="checkbox" checked> 全展开发
  • 效果展示：

在这里插入图片描述

八、下拉菜单

在这里插入图片描述

代码示例：
    城市；
    <select name="" id="">
        <option value="">北京</option>
        <option value="">上海</option>
        <option value="">广州</option>
        <option value="" selected>深圳</option>
        <option value="">江西</option>
        <option value="">浙江</option>
        <option value="">江苏</option>
    </select>
  • 效果展示：
    在这里插入图片描述

九、 表单 - 文本域

在这里插入图片描述

代码示例：
    <!-- 缩放功能实际开发应当禁用， 属性后面用 css设置 -->
    <textarea name="" id="" cols="30" rows="10">我是文本域</textarea>
  • 效果展示：

在这里插入图片描述

label标签

在这里插入图片描述

在这里插入图片描述

代码示例：
    <!-- label包裹后，点击被label 的内容都可以触发选中事件 -->
    性别：
    <label><input type="radio" name="man">男</label>

Button按钮

在这里插入图片描述

代码示例：
    <!-- form 表单区域 -->
    <!-- action="" 发送数据的地址 -->
    <form action="">
        用户名： <input type="text"><br><br>
        密码：   <input type="password"><br><br>

        <button type="submit">提交</button>
        <button type="reset">重置</button>
        <button type="button">普通按钮</button>
    </form>
  • 效果展示：
    在这里插入图片描述

十、 无语义布局标签

在这里插入图片描述

代码示例：
    <div>我是div</div>
    <div>我是div</div>

    <span>我是span</span>
    <span>我是span</span>
  • 效果展示

在这里插入图片描述

十一、 字符实体

在这里插入图片描述

代码示例：
    <!-- 空格 -->
    <p>长路&nbsp;漫漫，键盘为伴！</p>
    <!-- 小于号 -->
    <p>长路&nbsp;&lt;漫漫，键盘为伴！</p>
    <!-- 大于号 -->
    <p>长路&nbsp;&gt;漫漫，键盘为伴！</p>

在这里插入图片描述

十二、 综合案例一 - 新闻列表

代码示例：

```<!-- 大盒子包裹 -->
    <div>
        <ul>
            <li>
                <img src="../Image/HUAWEI.png" width="200" height="200" alt="">
                <span>不死的华为！</span>
            </li>
            <li>
                <img src="../Image/HUAWEI.png" width="200" height="200" alt="">
                <span>在一起，就可以！</span>
            </li>
            <li>
                <img src="../Image/HUAWEI.png" width="200" height="200" alt="">
                <span>轻舟已过万重山！</span>
            </li>
        </ul>
    </div>

在这里插入图片描述

十三、综合案例二 - 注册信息

在这里插入图片描述

代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册信息</title>
</head>
<body>
    <h1>注册信息</h1>
    <div>
        <form action="">
            <h3>个人信息</h3>
            <!-- 个人信息模块 -->
            <div>
                <form action="">
                    姓名： <input type="text" placeholder="请输入真实姓名"><br><br>
                    密码： <input type="password" placeholder="请输入密码"><br><br>
                    确认密码： <input type="password" placeholder="请输入确认密码"><br><br>
                    性别： <label><input type="radio">男 &nbsp;&nbsp; <input type="radio">女</label><br><br>
                    居住城市； <select name="" id="">
                        <option value="">江西</option>
                        <option value="">北京</option>
                        <option value="">上海</option>
                        <option value="">深圳</option>
                        <option value="">广州</option>
                    </select>
                </form>
            </div>
            <br>
            <!-- 教育经历模块 -->
            <h3>教育经历</h3>
            <div>
                <form action="">
                    最高学历：<select name="" id="">
                        <option value="">小学</option>
                        <option value="">初中</option>
                        <option value="">高中</option>
                        <option value="">专科</option>
                        <option value="">本科</option>
                        <option value="">硕士</option>
                        <option value="">博士</option>
                    </select><br><br>
                    学校名称： <input type="text"><br><br>
                    所学专业： <input type="text"><br><br>
                    在校时间： <select name="" id="">
                        <option value="">2023</option>
                    </select> -- 
                    <select name="" id="">
                        <option value="">2024</option>
                    </select><br><br>
                </form>
            </div>
            <!-- 工作经历 -->
            <div>
                <form action="">
                    公司名称： <input type="text"><br><br>
                    工作描述：<br>
                    <textarea name="" id="" cols="30" rows="10"></textarea>
                    <br><br>
                    <input type="checkbox">已阅读并同意一下协议：
                    <ul>
                        <li>
                            <a href="#">《用户服务协议》</a>
                        </li>
                        <li>
                            <a href="#">《隐私政策》</a>
                        </li>
                    </ul>
                </form>
            </div>
            <button>免费注册</button> &nbsp; <button>重新填写</button>
        </form>
    </div>
</body>
</html>
  • 效果图：

在这里插入图片描述

转载请注明出处或者链接地址：https://www.qianduange.cn//article/10736.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

基于javaweb mysql的ssm maven医院预约挂号系统(java ssm jsp js jquery layui mysql)

2024-06-22 10:06:27

jQuery入门到精通学习教程，收藏我这篇就够了，【大牛系列教学

2024-09-01 00:09:13

JavaScript jQuery,交换式web前端开发

2024-09-01 00:09:11

【Jquery】jquery的简单使用

2024-09-01 00:09:11

jQuery Tree Multiselect：优雅的前端树形选择器组件

2024-09-01 00:09:10

第1章-05-通过浏览器控制台安装JQuery.js库

2024-09-01 00:09:08

NodeJs使用jQuery中$Ajax

2024-09-01 00:09:45

推荐文章：JQuery Ajax Progress——掌握每一次数据流动的脉搏

2024-09-01 00:09:45

JqueryDataTablesServerSide项目指南

2024-09-01 00:09:44

解决vCharts不兼容Echarts5 版本问题

2024-09-01 00:09:44

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
3

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
4

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
5

npm的使用

2024-08-18 00:08:131000
6

JavaScript与jQuery：昔日王者与现代前端的交响曲【含代码示例】

2024-07-30 22:07:311000
7

在HTML和CSS当中运用显示隐藏

2024-06-17 09:06:541000
8

成为优秀的TS体操高手 之 TS 类型体操前置知识储备

2024-06-10 11:06:351000
9

django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

2024-06-06 10:06:201000
10

html简单网页代码：基于html关爱空巢老人网页设计与实现

2024-06-04 10:06:181000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！