前言:
考虑到大家没看过之前的文章,所以来回顾一下上一篇的内容:、
我们学完此专栏 HTML CSS 能干什么?
我们学完HTML和CSS可以制作如下图所示的特效:
目录:
🍓学习目标:
- 能够使用 列表标签 实现网页中列表结构的搭建
- 能够使用 表格标签及属性 实现网页中表格结构的搭建
- 能够使用 表单标签及属性 实现表单类网页结构搭建
🍒列表标签
1.列表的应用场景
场景:在网页中按照 行 展示关联性的内容,如:新闻列表、排行榜、账单等特点:按照行的方式,整齐显示内容种类:无序列表、有序列表、自定义列表
无序列表
有序列表
自定义列表:
2.无序列表
场景:在网页中表示一组无顺序之分的列表,如:新闻列表。标签组成:
标签名 说明 ul 表示无序列表的整体,用于包裹li标签 li 表示无序列表的每一项,用于包含每一行的内容 显示特点:• 列表的每一项前默认显示圆点标识注意点:• ul标签中只允许包含li标签• li标签可以包含任意内容代码:<body> <ul> <li>兄弟们</li> <li>卷起来</li> <li>冲冲冲</li> </ul> </body>
3.有序列表
场景:在网页中表示一组有顺序之分的列表,如:排行榜。标签组成:
标签名 说明 ol 表示有序列表的整体,用于包裹li标签 li 表示有序列表的每一项,用于包含每一行的内容 显示特点:• 列表的每一项前默认显示序号标识注意点:• ol标签中只允许包含li标签• li标签可以包含任意内容代码:<body> <ol> <li>兄弟们</li> <li>卷起来</li> <li>冲冲冲</li> </ol> </body>
4.自定义列表
场景:在网页的底部导航中通常会使用自定义列表实现。标签组成:
标签名 说明 di 表示自定义列表的整体,用于包裹dt/dd标签 dt 表示自定义列表的主题 dd 表示自定义列表的针对主题的每一项内容 显示特点:• dd前会默认显示缩进效果注意点:• dl标签中只允许包含dt/dd标签• dt/dd标签可以包含任意内容代码:<dl> <dt>帮助中心</dt> <dd>账号管理</dd> <dd>查询账单</dd> <dd>咨询客服</dd> </dl>
🍓表格标签
1.表格的基本标签
场景:在网页中以行+列的单元格的方式整齐展示和数据,如:学生成绩表基本标签:
注意点:• 标签的嵌套关系:table > tr > td
2.表格相关属性
场景:设置表格基本展示效果常见相关属性:
注意点:• 实际开发时针对于样式效果 推荐用CSS设置![]()
3.表格标题和表头单元格标签
场景:在表格中表示整体大标题和一列小标题其他标签:
注意点:• caption标签书写在table标签内部• th标签书写在tr标签内部(用于替换td标签)![]()
4. 表格的结构标签(了解)
场景:让表格的内容结构分组,突出表格的不同部分(头部、主体、底部),使语义更加清晰结构标签:
注意点:• 表格结构标签内部用于包裹tr标签• 表格的结构标签可以省略![]()
5.合并单元格
场景:将水平或垂直多个单元格合并成一个单元格
合并单元格步骤:1. 明确合并哪几个单元格2. 通过左上原则,确定保留谁删除谁• 上下合并→只保留最上的,删除其他• 左右合并→只保留最左的,删除其他3. 给保留的单元格设置:跨行合并(rowspan)或者跨列合并(colspan)
注意点:• 只有同一个结构标签中的单元格才能合并,不能跨结构标签合并(不能跨:thead、tbody、tfoot)代码:<!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 border="1"> <caption><strong>学生成绩单</strong></caption> <thead> <tr> <!-- <td></td> --> <th>姓名</th> <th>成绩</th> <th>评语</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td rowspan="2">100分</td> <td>真棒, 第一名</td> </tr> <tr> <td>李四</td> <td>真棒, 第二名</td> </tr> </tbody> <tfoot> <tr> <td>总结</td> <td colspan="2">郎才女貌</td> </tr> </tfoot> </table> </body> </html>
6.总结
① 表格基本标签:table > tr > td
② 表格标题和表头单元格标签:table > caption + tr > th
③ 表格结构标签:table > thead > tr > td
④ 表格相关属性
⑤ 合并单元格步骤
1. 明确合并哪几个单元格2. 通过左上原则,确定保留谁删除谁• 上下合并→只保留最上的,删除其他• 左右合并→只保留最左的,删除其他3. 给保留的单元格设置:跨行合并(rowspan)或者跨列合并(colspan)![]()
🍉表单标签
1. input系列标签
场景:在网页中显示收集用户信息的表单效果,如:登录页、注册页标签名:input• input标签可以通过 type属性值的不同 ,展示不同效果type属性值:![]()
现在演示的比较粗略,后期会有案例来进行讲解
<!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> <!-- 写什么就显示什么 --> 文本框: <input type="text"> <br> <br> <!-- 书写的内容都会变成点点显示 --> 密码框: <input type="password"> <br> <br> 单选框: <input type="radio"> <br> <br> 多选框: <input type="checkbox"> <br> <br> 上传文件: <input type="file"> </body> </html>
(拓展)value属性和name属性作用介绍
value属性:用户输入的内容,提交之后会发送给后端服务器name属性:当前控件的含义,提交之后可以告诉后端发送过去的数据是什么含义后端接收到数据的格式是:name的属性值 = value的属性值![]()
2. button按钮标签
场景:在网页中显示用户点击的按钮标签名:buttontype属性值(同input的按钮系列):
注意点:• 谷歌浏览器中button默认是提交按钮• button标签是双标签,更便于包裹其他内容:文字、图片等
代码:<button type="submit"> 提交 </button>
代码:
<button type="reset"> 重置 </button>
后期学会CSS后:
代码:
<!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> <style> /* From www.lingdaima.com */ button { position: relative; padding: 19px 36px; display: block; text-decoration: none; text-transform: uppercase; overflow: hidden; border-radius: 40px; border: none; } button span { position: relative; color: #fff; font-family: Arial; letter-spacing: 8px; z-index: 1; } button .liquid { position: absolute; top: -80px; left: 0; width: 100%; height: 200px; background: #4973ff; box-shadow: inset 0 0 50px rgba(0, 0, 0, .5); transition: .5s; } button .liquid::after, button .liquid::before { content: ''; width: 200%; height: 200%; position: absolute; top: 0; left: 50%; transform: translate(-50%, -75%); background: #fff; } button .liquid::before { border-radius: 45%; background: rgba(20, 20, 20, 1); animation: animate 5s linear infinite; } button .liquid::after { border-radius: 40%; background: rgba(20, 20, 20, .5); animation: animate 10s linear infinite; } button:hover .liquid { top: -120px; } @keyframes animate { 0% { transform: translate(-50%, -75%) rotate(0deg); } 100% { transform: translate(-50%, -75%) rotate(360deg); } } </style> </head> <body> <div> <button> <span>卷起来 兄弟们</span> <div class="liquid"></div> </button> </div> </body> </html>
3. select下拉菜单标签
场景:在网页中提供多个选择项的下拉菜单表单控件标签组成:• select标签:下拉菜单的整体• option标签:下拉菜单的每一项常见属性:• selected:下拉菜单的默认选中![]()
<body> <select> <option>北京</option> <option>上海</option> <option>广州</option> <option selected>深圳</option> </select> </body>
4. textarea文本域标签
场景:在网页中提供可输入多行文本的表单控件标签名:textarea常见属性:• cols:规定了文本域内可见宽度• rows:规定了文本域内可见行数注意点:• 右下角可以拖拽改变大小• 实际开发时针对于样式效果 推荐用CSS设置![]()
<body> <textarea cols="60" rows="30"></textarea> </body>
后期学会CSS后:
<!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> <style> /* From www.lingdaima.com */ .card { width: 190px; height: 254px; background: rgb(255, 255, 255); border-radius: 0.4em; box-shadow: 0.3em 0.3em 0.7em #00000015; transition: border 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); border: rgb(250, 250, 250) 0.2em solid; } .card:hover { border: #006fff 0.2em solid; } </style> </head> <body > <textarea class="card"></textarea> </body> </html>
5. label标签
场景:常用于绑定内容与表单标签的关系标签名:label使用方法①:1. 使用label标签把内容(如:文本)包裹起来2. 在表单标签上添加id属性3. 在label标签的for属性中设置对应的id属性值使用方法②:1. 直接使用label标签把内容(如:文本)和表单标签一起包裹起来2. 需要把label标签的for属性删除即可![]()
<!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> 性别: <input type="radio" name="sex" id="nan"> <label for="nan">男</label> <label><input type="radio" name="sex"> 女</label> </body> </html>