关于链接，列表，表格，表单的入门见解
2.链接元素
- 链接元素使用的是
<a> - 代码演示链接元素的具体用法
<!-- 链接跳转 --> <a href="https://www.php.cn/">php中文网</a> <!-- 浏览器不能解析的文件会自动下载 --> <!-- download=""指定下载的文件名称 --> <a href="0403.zip" download="这是0403上课的教案">教案</a> <!-- 拨打电话，手机端使用，H5端 --> <a href="tel:110">咨询110</a> <!-- 发送邮箱 --> <a href="mailto:88@qq.com">联系我们</a> <!-- 设置锚点 --> <a href="#anchor">跳转到当前页的锚点</a> <a href="/4.3/4.3.html">返回4.3作业列表</a> <h1 id="anchor" style="margin-top: 1000px;">我是锚点</h1>
- 具体划分为链接跳转，下载文件，拨打电话，发送邮箱，设置锚点等
3.列表元素
- 列表元素分为
<ul><li></li></ul>:无序列表<ol><li></li></ol>:有序列表<dl><dt><dd></dd></dt></dl>:自定义列表- 代码演示
<body> <!-- 无序列表演示 --> <h3>我的学习计划</h3> <ul> <li>课前准备</li> <li>课后复习</li> <li>作业提交</li> </ul> <hr /> <!-- 有序列表演示 --> <h3>我的学习计划</h3> <ol start="5"> <li>课前准备</li> <li>课后复习</li> <li>作业提交</li> </ol> <hr /> <!-- 自定义列表 --> <dl> <dt>html</dt> <dd>超文本标记语言</dd> <dd>页面是由多个元素组成</dd> <dt>CSS</dt> <dd>层叠样式表</dd> <dt>js</dt> <dd>脚本</dd> </dl></body>
4.表格元素
- 表格是最重要的数据格式化展示重要工具, 使用频率非常高
- 表格的数据,存储在由行与列组成的一系列单元格
- 数据必须存储在单元格元素中
- 与列表类似, 表格也是由一系列标签来描述
4.1 元素
| 序号 |
标签 |
描述 |
备注 |
| 1 |
<table> |
定义表格, |
必选 |
| 2 |
<tbody> |
定义表格主体, 允许定义多次 |
必选 |
| 3 |
<tr> |
定义表格中的行, |
必选 |
|
| 4 |
<th> |
定义表格头部中的单元格,默认加粗居中 |
必选 |
| 5 |
<td> |
定义 g 表格 e 主体与底部的的单元格 |
必选 |
| 6 |
<caption> |
定义表格标题, |
可选 |
| 7 |
<thead> |
定义表格头格, 只需定义一次 |
可选 |
| 8 |
<tfooter> |
定义表格底, 只需定义一次 |
可选 |
| 9 |
<col> |
为一个/多个列设置属性,仅限 |
可选 |
| 10 |
<colgroup> |
将多个<col>元素分组管理 |
可选 |
4.2 属性
| 序号 |
属性 |
适用元素 |
描述 |
| 1 |
border |
<table> |
添加表格框 |
| 2 |
cellpadding |
<table> |
设置单元格内边距 |
| 3 |
cellspacing |
<table> |
设置单元格边框间隙 |
| 4 |
align |
不限 |
设置单元格内容水平居中 |
| 5 |
bgcolor |
不限 |
设置背景色 |
| 6 |
width |
不限 |
设置宽度 |
| 7 |
height |
不限 |
设置高度 |
4.3 代码演示
<body> <table border="1" cellpadding="10" cellspacing="0" width="500" align="center" > <!-- 第一,第五列没有颜色，继承父级 --> <!-- <colgroup bgcolor="lightpink"> <col /> <col bgcolor="lightgreen" /> <col bgcolor="yellow" span="2" /> <col /> </colgroup> --> <caption style="font-size: 1.5rem;margin-top: 10px;"> 员工信息表 </caption> <thead bgcolor="lightblue"> <tr> <th>部门</th> <th>id</th> <th>姓名</th> <th>职务</th> <th>手机</th> </tr> </thead> <!-- 表格1 --> <tbody> <tr> <td rowspan="4" align="center">开发部</td> <td>101</td> <td>小郭</td> <td>霸道总裁</td> <td>888</td> </tr> <tr> <!-- <td>开发部</td> --> <td>110</td> <td>小马哥</td> <td>部长</td> <td>666</td> </tr> <tr> <!-- <td>开发部</td> --> <td>555</td> <td>小美</td> <td>部长</td> <td>222</td> </tr> <tr> <!-- <td>开发部</td> --> <td>444</td> <td>小刘</td> <td>部长</td> <td>111</td> </tr> </tbody> <!-- 表格2 --> <tbody> <tr> <td rowspan="4" align="center">销售部</td> <td>101</td> <td>小郭</td> <td>霸道总裁</td> <td>888</td> </tr> <tr> <!-- <td>销售部</td> --> <td>110</td> <td>小马哥</td> <td>部长</td> <td>666</td> </tr> <tr> <!-- <td>销售部</td> --> <td>555</td> <td>小美</td> <td>部长</td> <td>222</td> </tr> <tr> <!-- <td>销售部</td> --> <td>444</td> <td>小刘</td> <td>部长</td> <td>111</td> </tr> </tbody> <tfoot> <tr bgcolor="wheat"> <td>备注</td> <td colspan="4">所有员工离职必须提前30天提交书面申请</td> <!-- <td></td> <td></td> <td></td> --> </tr> </tfoot> </table> </body>
5.表单元素
5.1 初学表单的demo
<body> <h3>用户注册</h3> <form action=""> <section> <label for="username">用户名：</label> <input type="text" id="username" name="username" maxlength="20" placeholder="不少于6位" required autofocus /> </section> <section> <label for="password">密码：</label> <input type="password" id="password" name="password" placeholder="不少于8位" required size="10" /> </section> <!-- 单选框 --> <section> <label for="secret">性别：</label> <div class="box"> <input type="radio" name="gender" id="male" value="male" /> <label for="male">男</label> <input type="radio" name="gender" id="female" value="female" /> <label for="female">女</label> <input type="radio" name="gender" id="secret" value="secret" checked /> <label for="secret">保密</label> </div> </section> <!-- 复选框 --> <section> <label for="program">兴趣</label> <div class="box"> <input type="checkbox" name="hobby[]" id="game" value="game" checked /><label for="">游戏</label> <input type="checkbox" name="hobby[]" id="travel" value="travel" /><label for="">旅游</label> <input type="checkbox" name="hobby[]" id="shoot" value="shoot" /><label for="">摄影</label> <input type="checkbox" name="hobby[]" id="program" value="program" checked /><label for="">编程</label> </div> </section> </form> </body>
5.2 具体内容
- 上文5.1是课堂上老师现场演示的注册表单，包括简单的用户名，密码，性别，和兴趣复选框的功能，下节课将会重点讲解这方面的只是。
6.学习总结
- 本节课让我熟悉了元素（标签）语义化的优势和作用，加深了对语义化文本元素的使用了解，并且深入了解了链接元素，列表元素，表格的功能和使用，初步了解了表单的作用，熟悉和魔头表单的结构和使用将会对后期的学习带来很大的帮助。
