收藏
天蓬老师批改状态：合格
老师批语：
ul加li标签
<h3>购物车</h3><ul><li>笔记本电脑</li><li>数码相机</li><li>蓝牙耳机</li></ul>
ol加li标签ol标签可以设置start=""属性来控制标签的起始数值
<h3>水果</h3><ol><li>苹果</li><li>香蕉</li><li>橘子</li><li>芒果</li></ol>
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>
table，thead，tbody，tr，td/thcaption标签可以用来防止表格的标题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类型可以分为多种：文本类型、邮件类型、密码类型、单选框、多选框、文件类型等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>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
