目录
一、表格标签(对上篇文章的补充)
在做表格的时候,有些时候会碰到相邻的几行或者是几列,他们的数值是一样的,这样我们就可以将他们通过一些操作合并起来
合并单元格
跨行合并:rowspan="n"
跨列合并: colspan="n"
思路:
- 先确定到底是合并行(rowspan)还是合并列(colspan)
- 找对单元格,如果是行合并,那么去找最上面的行信息;如果是列合并,那么先去找最左侧的列信息
- 删除后面合并的行或者是列
二、列表标签
主要用于布局的,整齐好看
- 无序列表 ul(unorderedlist)li(list)
- 有序列表 ol(orderedlist)li(list)
- 自定义列表 dl dt dd
三、表单标签(组合标签)
表单是让用户来输入信息的
- 表单域 (重点是form标签)
- 若干个表单控件(重点是input标签)
3.1 form标签
描述了要把数据按照什么方式,提交到哪个页面中
3.2 input标签
各种输入控件, 单行文本框, 按钮, 单选框, 复选框.
- 文本框 <input type="text">
- 密码框 <input type="password">
- 单选框 <input type="radio">
注意:具有相同的 name 才能多选一
🍔name和id有什么区别?
- 数量:name可以重复,而id不能重复
- 作用:id给JS用的,name给后端用的
复选框 <input type="checkbox">
- 普通按钮(需要搭配JS来使用) <input type="button" value="我是一个按钮">
- 提交按钮 <input type="submit" value="提交">
清空按钮 <input type="reset" value="清空">
清空按钮必须放在 form 中. 点击后会将 form 内所有的用户输入内容重置
选择文件 <input type="file">
点击选择文件, 会弹出对话框, 选择文件.
3.3 select标签(下拉框)
3.4 textarea标签
3.5 无语义标签 (div & span)
通过下面两个案例就能了解了
四、HTML特殊字符
有些特殊的字符在 html 文件中是不能直接表示的, 例如:
- 空格:
- 小于号:<
- 大于号:>
- 按位与:&
五、综合案例
5.1 展示简历信息
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>个人简历</title> </head> <body> <h1>瑶瑶</h1> <!-- 基本信息 --> <h2>基本信息</h2> <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F6ebc99f1-64eb-4e62-9573-805c3dde29a5%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1685411492&t=f147bf3a516cbe4ae102a32f05900a36" alt="头像" title="瑶瑶" height="100px"/> <p> <span>求职信息:</span> <span>Java开发工程师</span> </p> <p> <span>职系电话:</span> <span>136-6666-6666</span> </p> <p> <span>邮箱:</span> <span>123456@qq.com</span> </p> <p> <a href="https://gitee.com/tong-qihan">我的gitee</a> </p> <p> <a href="https://blog.csdn.net/C_TQH?spm=1000.2115.3001.5343">我的博客</a> </p> <!-- 教育背景 --> <h2>教育背景</h2> <ol> <li>2005-2007 清华幼儿园</li> <li>2007-2012 清华附小</li> <li>2012-2017 清华附中</li> <li>2017-2019 清华大学本科</li> <li>2019-2021 清华大学硕士</li> <li>2021-2023 清华大学博士</li> </ol> <!-- 专业技能 --> <h2>专业技能</h2> <ul> <li>Java 基础语法扎实,已经刷了800道LeetCode题;</li> <li>常见数据结构都可以独立实现并熟练应用;</li> <li>熟知计算机网络理论,并且可以独立排查常见问题;</li> <li>掌握Web开发能力,并且独立开发了学校的留言墙功能。</li> </ul> <!-- 我的项目 --> <h2>我的项目</h2> <ol> <li> <h3>留言墙</h3> <p>开发时间:2017年3月 到 2017年9月</p> <p>功能介绍:</p> <ul> <li>支持留言发布</li> <li>支技匿名留言</li> </ul> </li> <li> <h3>学习小助手</h3> <p>开发时间:2019年5月 到 2019年9月</p> <p>功能介绍:</p> <ul> <li>支持错检索</li> <li>支持同学探讨</li> </ul> </li> </ol> <!-- 个人评价 --> <h2>个人评价</h2> <p>自我感觉非常优秀,不在乎别人的看法,我就是自己的王 ☆*: .。. o(≧▽≦)o .。.:*☆</p> </body> </html>
效果展示:
5.2 填写简历信息(表单的使用)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>在线填写简历</title> </head> <body> <table width="500px" cellspacing="0"> <thead> <h2>请填写简历信息</h2> </thead> <!-- 姓名 --> <tr> <td> <label for="name">姓名:</label> </td> <td> <input type="text" id="name"> </td> </tr> <!-- 性别 --> <tr> <td><label for="">性别:</label></td> <td> <input type="radio" name="gender" id="male"> <label for="male"><img src="image/male.png" alt="" width="20px">男</label> <input type="radio" name="gender" id="female" /> <label for="female"><img src="image/female.png" alt="" width="20px">女</label> </td> </tr> <!-- 出生日期 --> <tr> <td> <label for="">出生日期:</label> </td> <td> <select name="" id=""> <option value="0">--请选择年份--</option> <option value="1990">1990</option> <option value="1991">1991</option> <option value="1992">1992</option> <option value="1993">1993</option> <option value="1994">1994</option> <option value="1995">1995</option> <option value="1996">1996</option> <option value="1997">1997</option> <option value="1998">1998</option> <option value="1999">1999</option> <option value="2000">2000</option> <option value="2001">2001</option> <option value="2002">2002</option> <option value="2003">2003</option> <option value="2004">2004</option> <option value="2005">2005</option> </select> <select name="" id=""> <option value="0">--请选择月份--</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> </select> <select name="" id=""> <option value="0">--请选择日期--</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> <option value="25">25</option> <option value="26">26</option> <option value="27">27</option> <option value="28">28</option> <option value="29">29</option> <option value="30">30</option> <option value="31">31</option> </select> </td> </tr> <!-- 出生日期 --> <tr> <td><label for="school">就读学校:</label></td> <td> <select name="" id=""> <option value="0">--请选择你的毕业院校--</option> <option value="清华大学">清华大学</option> <option value="北京大学">北京大学</option> <option value="国防科技大学">国防科技大学</option> <option value="中国人民大学">中国人民大学</option> <option value="上海交通大学">上海交通大学</option> <option value="复旦大学">复旦大学</option> <option value="浙江大学">浙江大学</option> <option value="中国科学技术大学">中国科学技术大学</option> <option value="南京大学">南京大学</option> </select> </td> </tr> <!-- 应聘岗位 --> <tr> <td> <label for="position">应聘岗位:</label> </td> <td> <input type="checkbox" id="front"> <label for="front">前端开发</label> <input type="checkbox" id="backend"> <label for="backend">后端开发</label> <input type="checkbox" id="qa"> <label for="qa">测试开发</label> <input type="checkbox" name="" id="op"> <label for="op">运维开发</label> </td> </tr> <!-- 掌握技能 --> <tr> <td> <label>掌握技能:</label> </td> <td> <textarea cols="50" rows="10"></textarea> </td> </tr> <!-- 项目经历 --> <tr> <td> <label>项目经历:</label> </td> <td> <textarea cols="50" rows="10"></textarea> </td> </tr> <!-- 条款 --> <tr> <td></td> <td> <input type="checkbox" id="policy"> <label for="policy">我已仔细阅读过公司的招聘要求</label> </td> </tr> <!-- 查看我的状态 --> <tr> <td></td> <td> <a href="#">查看我的状态</a> </td> </tr> <!-- 其他 --> <tr> <td></td> <td> <h3>请招聘者确认</h3> <ul> <li>以上信息真实有效</li> <li>能够尽早去公司实习</li> <li>能够接受公司的加班文化</li> </ul> </td> </tr> </table> </body> </html>
效果展示: