1. a 标签的使用
| 属性 |
值 |
描述 |
| href |
www.php.cn |
跳转到网页 |
| href |
9999.zip |
不可解析的文件直接下载 |
| href |
tel:13588789999 |
拨打电话 |
| href |
mailto:98989898@qq.com |
发送邮件 |
| href |
#当前页面 id 值 |
跳转到锚点 |
| target |
_blank |
新窗口打开 |
| download |
自定义文件名.zip |
自定义下载的文件名 |
<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>A标签作业案例</title> </head> <body> <h1>A链接标签的作业案例</h1> <div> <!-- 当前窗口跳转到php中文网 --> <a href="https://www.php.cn/">php中文网 当前窗口打开</a> </div> <div> <!-- 新窗口打开php中文网 --> <a href="https://www.php.cn/" target="_black">php中文网 新窗口打开</a> </div> <div> <!-- 下载（网页解析不了的会自动进行下载） --> <a href="9999.zip" target="_block" download="自定义文件名.zip" >文件下载</a > </div> <div> <!-- 利用a标签打电话 --> <a href="tel:18502078888">给我打个电话吧！</a> </div> <div> <!-- 用a标签快速发邮件 --> <a href="mailto:99998888@qq.com">给我发一封邮件吧！</a> </div> <div> <!-- 跳转到锚点 --> <a href="#maodian">点我跳转到页尾</a> </div> <div> <h4 id="maodian" style="margin-top: 1000px;">我是页尾</h4> </div> </body></html>
2. 列表
| 标签 |
描述 |
<ol>...</ol> |
有序列表 |
<ul>...</ul> |
无序列表 |
<li>...</li> |
列表项 |
<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>列表</title> </head> <body> <h2>有序列表</h2> <ol> <li>张三</li> <li>李四</li> <li>王五</li> <li>赵六</li> </ol> <hr /> <h2>无序列表</h2> <ul> <li>张三</li> <li>李四</li> <li>王五</li> <li>赵六</li> </ul> </body></html>
3. 表格
| 标签/属性 |
描述 |
<table>...</table> |
定义一个表格 |
<thead>...</thead> |
定义一个表头 |
<tbody>...</tbody> |
定义一个表格主体 |
<tr>...</tr> |
定义一行 |
<td>...</td> |
定义一列 |
<tfoot>...</tfoot> |
定义一个表格页脚 |
<caption>...</caption> |
定义表格名称 |
border |
添加表格线：<table border=“1”>...</table> |
cellspacing |
设置表格线条高度 同 border 用法 |
cellpadding |
设置单元格的内边距 |
width |
设置宽度，可使用百分数 同 border 用法 |
height |
设置高度，不用加 px，直接使用数字，同 border 用法 |
align |
对齐方式：left 左,right 右,center 居中 |
colgroup |
对表格列，进行统一设置 |
rowspan |
向下合并单元格 |
colspan |
向右合并单元格 |
<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>表格</title> </head> <body> <table border="1" cellpadding="5" cellspacing="0" width="90%" height="300" align="center" > <colgroup> <col /> <col bgcolor="lightgreen" /> <col bgcolor="yellow" /> <col /> </colgroup> <caption style="font-size: 2rem; margin-bottom: 10px;"> 员工信息表 </caption> <thead bgcolor="lightblue"> <td>部门</td> <td>姓名</td> <td>性别</td> <td>电话</td> </thead> <tbody> <tr> <td rowspan="3" align="center">开发部</td> <td>张三</td> <td>男</td> <td>13588885555</td> </tr> <tr> <!-- <td>开发部</td> --> <td>李四</td> <td>男</td> <td>13588887777</td> </tr> <tr> <!-- <td>开发部</td> --> <td>王五</td> <td>女</td> <td>13577778888</td> </tr> </tbody> <tbody> <tr> <td rowspan="3" align="center">测试部</td> <td>赵六</td> <td>男</td> <td>13785858585</td> </tr> <tr> <!-- <td>测试部</td> --> <td>孙七</td> <td>男</td> <td>13685888899</td> </tr> <tr> <!-- <td>测试部</td> --> <td>周九</td> <td>女</td> <td>13888887745</td> </tr> </tbody> <tfoot bgcolor="lightblue"> <tr> <td align="center">备注：</td> <td colspan="3">开工了开工了！努力工作哦~~</td> <!-- <td>女</td> <td>13888887745</td> --> </tr> </tfoot> </table> </body></html>
4. 表单
| 标签/属性 |
描述 |
<form>...</form> |
定义一个表单 |
<section>...</section> |
定义一个表单域 |
<label>...</label> |
定义当前表单项的名称 |
<input type="" /> |
定义当前表单项的属性 |
text |
inptu 的 type 值；text 是文本框输入框 |
password |
inptu 的 type 值； password 是密码输入框 |
radio |
inptu 的 type 值；radio 是单选框 需配合 name 属性使用，多个单选框的 name 值必须一致 |
checkbox |
inptu 的 type 值；checkbox 是多选框 需配合 name 属性使用，多个单选框的 name 值必须一致 |
- label 的 for 属性值，可以绑定 input 的 id 值，实现点击表单项名称，自动激活 input 光标
- 复选框的 name 值 最好使用数组形式，方便后台处理数据
- 示例代码
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <h2>用户注册</h2> <form action=""> <section> <label for="username">账号：</label> <input type="text" id="username" /> </section> <section> <label for="password">密码：</label> <input type="password" id="password" /> </section> <section> <label for="">性别：</label> <input type="radio" value="男" id="nan" name="gender" /><label for="nan" >男</label > <input type="radio" value="女" id="nv" name="gender" /><label for="nv" >女</label > <input type="radio" value="保密" id="baomi" name="gender" /><label for="baomi" >保密</label > </section> <section> <label for="">兴趣：</label> <input type="checkbox" id="bianc" value="bianc" name="xingqu[]" /><label for="" >编程</label > <input type="checkbox" id="youxi" value="youxi" name="xingqu[]" /><label for="" >游戏</label > <input type="checkbox" id="lvyou" value="lvyou" name="xingqu[]" /><label for="" >旅游</label > </section> </form> </body></html>
总结
- 通过本节课的学习和作业，已经初步掌握 a 标签、列表、表单、表格的使用！
