DAY02-HTML5列表表格表单

夏驰和徐策

于 2024-07-21 12:55:34 发布

阅读量144

点赞数 3

分类专栏： HTML 文章标签： html5 前端 html

本文链接：https://blog.csdn.net/tang7mj/article/details/140585258

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

DAY02 - HTML5 列表、表格和表单

在今天的学习中，我们将深入探讨HTML5中的列表、表格和表单的使用方法和技巧。这些元素是构建网页的基本组件，掌握它们将帮助我们更好地组织和展示信息。

列表（List）

HTML提供了三种列表类型：无序列表、有序列表和定义列表。每种列表都有其特定的用途和结构。

无序列表（Unordered List）

无序列表使用<ul>标签，列表项使用<li>标签。无序列表的特点是每个列表项前都有一个圆点符号。

<!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>
    <ul>
        <li>列表条目1</li>
        <li>列表条目2</li>
        <li>列表条目3</li>
    </ul>
</body>
</html>

有序列表（Ordered List）

有序列表使用<ol>标签，列表项使用<li>标签。有序列表的特点是每个列表项前都有一个数字。

<!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>
    <ol>
        <li>步骤1</li>
        <li>步骤2</li>
        <li>步骤3</li>
    </ol>
</body>
</html>

定义列表（Definition List）

定义列表使用<dl>标签，定义项使用<dt>标签，定义描述使用<dd>标签。定义列表通常用于描述术语和定义。

<!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>
    <dl>
        <dt>服务中心</dt>
        <dd>申请售后</dd>
        <dd>售后政策</dd>
    </dl>
</body>
</html>

表格（Table）

表格用于组织和展示数据。HTML表格由<table>标签定义，行由<tr>标签定义，单元格由<td>或<th>标签定义。

基本表格

<!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>
    <table border="1">
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>总分</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>99</td>
            <td>100</td>
            <td>199</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>98</td>
            <td>100</td>
            <td>198</td>
        </tr>
        <tr>
            <td>总结</td>
            <td>全市第一</td>
            <td>全市第一</td>
            <td>全市第一</td>
        </tr>
    </table>
</body>
</html>

表格结构标签

使用<thead>、<tbody>和<tfoot>标签可以更清晰地组织表格内容。

<!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>
    <table border="1">
        <thead>
            <tr>
                <th>姓名</th>
                <th>语文</th>
                <th>数学</th>
                <th>总分</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>99</td>
                <td>100</td>
                <td>199</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>98</td>
                <td>100</td>
                <td>198</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>总结</td>
                <td>全市第一</td>
                <td>全市第一</td>
                <td>全市第一</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

合并单元格

使用rowspan和colspan属性可以合并表格单元格。

<!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>
    <table border="1">
        <thead>
            <tr>
                <th>姓名</th>
                <th>语文</th>
                <th>数学</th>
                <th>总分</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>99</td>
                <td rowspan="2">100</td>
                <td>199</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>98</td>
                <td>198</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>总结</td>
                <td colspan="3">全市第一</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

表单（Form）

表单是用户与网站进行交互的主要方式。表单包含多种控件，如文本框、单选框、多选框、按钮等。

文本框与密码框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>input基本使用</title>
</head>
<body>
    文本框：<input type="text">
    <br><br>
    密码框：<input type="password">
</body>
</html>

占位文本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>input占位文本</title>
</head>
<body>
    文本框：<input type="text" placeholder="请输入用户名">
    <br><br>
    密码框：<input type="password" placeholder="请输入密码">
</body>
</html>

单选框与多选框

<!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>
    性别：
    <input type="radio" name="gender"> 男
    <input type="radio" name="gender" checked> 女
</body>
</html>

<!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>
    兴趣爱好：
    <input type="checkbox">敲代码
    <input type="checkbox" checked>敲前端代码
    <input type="checkbox" checked>敲前端HTML代码
</body>
</html>

下拉菜单

<!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>
    城市:
    <select>
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
        <option>深圳</option>
        <option selected>武汉</option>
    </select>
</body>
</html>

文本域

<!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>
    <textarea>请输入评论</textarea>
</body>
</html>

Label 标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>label标签</title>
</head>
<body>
    性别：
    <input type="radio" name="gender" id="man"> <label for="man">男</label>
    <label><input type="radio" name="gender"> 女</label>
</body>
</html>

按钮

<!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>
   <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>
</body>
</html>

无语义元素（Div 和 Span）

<div>和<span>是无语义的元素，分别用于块级和内联容器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>div和span</title>
</head>
<body>
    <div>这是div标签</div>
    <div>这是div标签</div>
    <span>这是span标签</span>
    <span>这是span标签</span>
</body>
</html>

字符实体（Character Entities）

字符实体用于显示保留字符，如空格和尖括号。

<!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>
    乾坤未定，你我皆是&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;黑马。
    &lt;p&gt;
</body>
</html>

综合案例

案例一：体育新闻列表

<!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>
    <ul>
        <li>
            <img src="./images/1.jpg">
            <h3>主帅安东尼奥回西班牙休假 国青抵达海口进行隔离</h3>
        </li>
        <li>
            <img src="./images/2.jpg" alt="">
            <h3>梅州主帅：申花有强有力的教练组 球员体能水平高</h3>
        </li>
        <li>
            <img src="./images/3.jpg" alt="">
            <h3>马德兴:00后球员将首登亚洲舞台 调整心态才务实</h3>
        </li>
    </ul>
</body>
</html>

案例二：注册信息表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合案例2-注册信息</title>
</head>
<body>
    <h1>注册信息</h1>
    <form action="">
        <!-- 个人信息 -->
        <h2>个人信息</h2>
        <label>姓名：<input type="text" placeholder="请输入真实姓名"></label>
        <br><br>
        <label>密码：<input type="password" placeholder="请输入密码"></label>
        <br><br>
        <label>确认密码：<input type="password" placeholder="请输入确认密码"></label>
        <br><br>
        <label>性别：</label>
        <label><input type="radio" name="gender" checked> 男</label>
        <label><input type="radio" name="gender"> 女</label>
        <br><br>
        <label>居住城市：</label>
        <select>
            <option>北京</option>
            <option>上海</option>
            <option>广州</option>
            <option>深圳</option>
            <option>武汉</option>
        </select>
        <!-- 教育经历 -->
        <h2>教育经历</h2>
        <label>最高学历：</label>
        <select>
            <option>博士</option>
            <option>硕士</option>
            <option>本科</option>
            <option>大专</option>
        </select>
        <br><br>
        <label>学校名称：</label><input type="text">
        <br><br>
        <label>所学专业：</label<input type="text">
        <br><br>
        <label>在校时间：</label>
        <select>
            <option>2015</option>
            <option>2016</option>
            <option>2017</option>
            <option>2018</option>
        </select>
        --
        <select>
            <option>2019</option>
            <option>2020</option>
            <option>2021</option>
            <option>2022</option>
        </select>
        <!-- 工作经历 -->
        <h2>工作经历</h2>
        <label>公司名称：</label><input type="text">
        <br><br>
        <label>工作描述：</label>
        <br>
        <textarea></textarea>
        <br><br>
        <!-- 协议 和 按钮 -->
        <input type="checkbox"><label>已阅读并同意以下协议：</label>
        <ul>
            <li><a href="#">《用户服务协议》</a></li>
            <li><a href="#">《隐私政策》</a></li>
        </ul>
        <br><br>
        <button>免费注册</button>
        <button type="reset">重新填写</button>
    </form>
</body>
</html>