一、列表
1、无序列表
- 使用
ul加li标签<h3>购物车</h3><ul> <li>笔记本电脑</li> <li>数码相机</li> <li>蓝牙耳机</li></ul>
2、有序列表
- 使用
ol加li标签 ol标签可以设置start=""属性来控制标签的起始数值
<h3>水果</h3><ol> <li>苹果</li> <li>香蕉</li> <li>橘子</li> <li>芒果</li></ol>
3、自定义列表
- 使用
dl加dt和dd标签 a标签href属性设置tel或mailto属性即可实现调用电话或者发邮件功能，但需要先配置相关电话功能或邮件功能
<dl> <dt>网站：</dt> <dd>PHP中文网</dd> <dt>网址：</dt> <dd><a href="https://www.php.cn">点击跳转</a></dd> <dt>联系：</dt> <dd>电话：<a href="tel:189****5487">189****5487</a></dd> <dd>邮件：<a href="mailto:admin@php.cn">admin@php.cn</a></dd></dl>
总结：列表一般可以用作导航、图文列表使用，使用css样式控制可以使标签变得更加美观。
二、表格
- 表格也是用一组标签来描述展示的：
table，thead，tbody，tr，td/th caption标签可以用来防止表格的标题thead标签中用来放置表头信息tbody标签中用来放置表格主体，一个表格可以有多个主体但是只能有一个表头tr是表格行，td/th时表格列，使用th具有加粗及居中效果，一般用于表头行<body> <table class="product"> <!-- 表格标题 --> <caption>商品信息表</caption> <!-- 表头 --> <thead> <tr> <td>ID</td> <td>品名</td> <td>单价</td> <td>数量</td> <td>金额</td> </tr> </thead> <!-- 表格主体，一个表格可以有多个主体但是只能有一个表头 --> <tbody> <tr> <td>iphone6</td> <td>手机</td> <td>部</td> <td>1</td> <td>3999</td> </tr> <tr> <td>sa-471</td> <td>电脑</td> <td>台</td> <td>1</td> <td>4999</td> </tr> <tr> <td>XD001</td> <td>水杯</td> <td>只</td> <td>1</td> <td>18</td> </tr> </tbody> </table></body>
课程表：自定义列表
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .lesson { border-collapse: collapse; width: 40em; text-align: center; margin: auto; } .lesson caption { font-size: 1.2rem; margin: 1em; } .lesson thead { background-color: lightcyan; } .lesson th, .lesson td { border: 1px solid; padding: 0.5em; } .lesson .rest { background-color: #efefef; } .lesson td[rowspan="4"], .lesson td[rowspan="3"] { background-color: rgb(186, 245, 213); } </style></head><body> <table class="lesson"> <caption>百万弟弟课程表</caption> <thead> <tr> <th colspan="2"></th> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> </tr> </thead> <tbody> <tr> <td rowspan="3">上午</td> <td>1</td> <td>语文</td> <td>数学</td> <td>语文</td> <td>语文</td> <td>数学</td> </tr> <tr> <td>2</td> <td>数学</td> <td>语文</td> <td>数学</td> <td>数学</td> <td>语文</td> </tr> <tr> <td>3</td> <td>音乐</td> <td>体育</td> <td>品德与生活</td> <td>美术</td> <td>音乐</td> </tr> <tr class="rest"> <td colspan="7">中午休息</td> </tr> <tr> <td rowspan="3">下午</td> <td>1</td> <td>语文</td> <td>美术</td> <td>音乐</td> <td>语文</td> <td>美术</td> </tr> <tr> <td>2</td> <td>自然</td> <td>语文</td> <td>科技活动</td> <td>体育</td> <td>语文</td> </tr> <tr> <td>3</td> <td>班队活动</td> <td colspan="2"></td> <td>手工劳动</td> <td>劳动</td> </tr> </tbody> </table></body></html>
三、表单
form表单中action用于处理表单的程序，method用于填写提交表单的类型method属性中，默认GET属性值，数据直接放在url地址上展示，明文模式；POST表单的数据在请求头体中，加密模式label标签的for属性可以与input标签的id属性绑定进行联动input标签type类型可以分为多种：文本类型、邮件类型、密码类型、单选框、多选框、文件类型等
5.select加option为下拉框组件
<!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> <h3 class="title">用户注册</h3> <form action="" method=""> <label for="username">账号：</label> <!-- type空间类型name控件名字标识符，value数据内容 --> <input type="text" id="username" name="username" value="用户名"> <br> <!-- 邮件类型文本框 --> <label for="email">邮箱：</label> <input type="email" id="email" name="email" value="admin@php.cn"> <br> <!-- 密码类型文本框 --> <label for="password">密码：</label> <input type="password" id="password" name="password" value=""> <br> <!-- 单选按钮 --> <label for="">性别：</label> <div> <input type="radio" name="gender" value="male" id="male"><label for="male">男</label> <input type="radio" name="gender" value="female" id="female"><label for="female">女</label> <input type="radio" name="gender" value="secret" id="secret" checked><label for="secret">保密</label> </div> <!-- 复选框 --> <label for="">兴趣：</label> <div> <!-- 复选框的name属性值应该写成数组的格式名称，这样才能确保服务器可以接受到一组值 --> <input type="checkbox" name="hobby[]" value="game" id="game" checked><label for="game">游戏</label> <input type="checkbox" name="hobby[]" value="shoot" id="shoot"><label for="shoot">摄影</label> <input type="checkbox" name="hobby[]" value="trvel" id="trvel"><label for="trvel">旅游</label> <input type="checkbox" name="hobby[]" value="program" id="program" checked><label for="program">旅游</label> </div> <!-- 下拉列表下拉框 --> <label for="edu">学历：</label> <!-- multiple size="2" --> <select name="edu" id="edu"> <option value="1">初中</option> <option value="2">高中</option> <option value="3" selected>本科</option> <option value="4">研究生</option> <!-- option中label属性的优先级大于option内部的文本 --> <option value="5" label="老司机"></option> </select> <br> <label for="user-pic">头像:</label> <!-- 隐藏域,在前端页面看不到的,它的值供后端处理时用 --> <input type="hidden" name="MAX_FILE_SIZE" value="80000" /> <input type="file" name="user_pic" id="user-pic" /> <!-- 头像占位符 --> <div class="user-pic" style="grid-column: span 2"></div> <br> <label for="user-resume">简历:</label> <!-- 隐藏域,在前端页面看不到的,它的值供后端处理时用 --> <input type="hidden" name="MAX_FILE_SIZE" value="100000" /> <input type="file" name="user_resume" id="user-resume" /> <!-- 简历占位符 --> <div class="user-resume" style="grid-column: span 2"></div> <br> <!-- 5. 文本域 --> <label for="comment">备注:</label> <textarea name="comment" id="comment" cols="30" rows="5"></textarea> <br> <!-- 提交按钮 --> <button>提交</button> </form></body></html>
