![ThinkPHP5实战之[教学管理系统]](https://img.php.cn/upload/course/000/000/068/6253d87459486427.png)
批改状态：合格
老师批语：第三期的学员, 那应该是去年的, 这次希望一定要坚持, 不放弃每一堂课, 认真写完每一次作业, 就一定能成功的...
收藏
收藏
收藏
HTML基础标签的使用，以及列表、表格、表单等基础标签的使用
一：对HTML标签, 元素与属性的理解
1. 标签： 标签主要是就是被尖括号“<”和“>”包起来的对象（<head>、<body>、<table>等），绝大部分的标签都是成对出现的，又开始标签和结束标签如<table></talbe>、<form></form>。 当然还有少部分不是成对出现的，如<br>、<hr><input>等。 标签就是用来标记HTML元素的。位于起始标签和结束标签之间的文本就是HTML元素的内容。
2. 元素： HTML网页实际上就是由许许多多各种各样的HTML元素构成的文本文件，并且任何网页浏览器都可以直接运行HTML文件。所以可以这样说，HTML元素就是构成HTML文件的基本对象，HTML元素可以说是一个统称而已。HTML元素就是通过使用HTML标签进行定义的。
3. 属性： 为HTML元素提供各种附加信息的就是HTML属性，它总是以"属性名=属性值"（name = “value”）这种名值对的形式出现，而且属性总是在HTML元素的开始标签中进行定义。
二：HTML中常见的列表的形式和使用方法
1、无序列表：主要是由ul>li标签组成，常用语网站导航、商品信息等。
<ul>
<li>我是无序列表1</li>
<li>我是无序列表2</li>
<li>我是无序列表3</li>
</ul>
2、有序列表：主要是有ol>li标签组成，列表项目使用数字进行标记，可用于列表计数等。
<ol>
<li>我是有序列表1</li>
<li>我是有序列表2</li>
<li>我是有序列表3</li>
</ol>
3、自定义列表：主要是有dl>dt标签组成，定义列表是当无序列表和有序列表都不适合时，通过自定义列表来完成自定义展示。
<dl>
<dt>我是自定义列表1</dt>
<dd>我是自定义列表2</dd>
<dt>我是自定义列表3</dt>
<dd>我是自定义列表4</dd>
</dl>
三：列表与表格的区别与联系，以及选用场景
列表主要是有：ul li ol li dl dt标签组成，而表格主要是有一个或多个单元格纵横排列组成（table tr td）。
列表主要用于来表示行，而表格的使用主要是用来有效的组织单元格的数据。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Hello Word</title> </head> <body> <!-- 无序列表 --> <h2>无序列表</h2> <ul> <li>我是无序列表1</li> <li>我是无序列表2</li> <li>我是无序列表3</li> </ul> <!-- 有序列表 --> <h2>有序列表</h2> <ol> <li>我是有序列表1</li> <li>我是有序列表2</li> <li>我是有序列表3</li> </ol> <!-- 自定义列表 --> <h2>自定义列表</h2> <dl> <dt>我是自定义列表1</dt> <dt>我是自定义列表3</dt> <dd>我是自定义列表2</dd> <dd>我是自定义列表4</dd> </dl> <!-- 表格 --> <h2>表格</h2> <table border="1"> <tr> <!-- 使用colspan合并行 --> <td colspan="8">本周天气表</td> </tr> <tr> <!-- 使用rowspan合并行 --> <td rowspan="2">日期</td> <td>周一</td> <td>周二</td> <td>周三</td> <td>周四</td> <td>周五</td> <td>周六</td> <td>周日</td> </tr> <tr> <td>9.1</td> <td>9.2</td> <td>9.3</td> <td>9.4</td> <td>9.5</td> <td>9.6</td> <td>9.7</td> </tr> <tr> <td>天气</td> <td>晴</td> <td>雨</td> <td>晴</td> <td>雨</td> <td>晴</td> <td>雨</td> <td>晴</td> </tr> </table> <!-- 常用注册表单常用控件 --> <h2>注册表单常用控件</h2> <form action=“” method=“”> <!-- action表示提交的地址，method包含post和get --> <!-- 单行输入框 --> <P> <label for='user'>账号：</ label> <input type ='text' id ='user' name ='user' value='' placeholder=''> </p> <P> <label for ='email'>邮箱：</ label> <input type ='email' id ='email' name ='email' value='' placeholder=''> </p> <!-- 下拉选择框 --> <P> <label for =“”>课程：</ label> <select class =“” name =“”> <optgroup label ='请选择报名课程'> <option value =“”> HTML </option> <option value =“”> JS </option> <option value =“”> PHP </option> </optgroup> </select> </p> <!-- 单选框 --> <p> <label for =“”>性别:</label> <label><input type="radio" name="sex" value="男生">男生</label> <label><input type="radio" name="sex" value="女生">女生</label> </div> <!-- 复选框 --> <p> <label for=“”>爱好：</label> <label><input type="checkbox" name="like" value="0">音乐</label> <label><input type="checkbox" name="like" value="1">旅游</label> <label><input type="checkbox" name="like" value="3">游戏</label> </p> <!-- 密码框 --> <P> <label for=“password”>密码：</ label> <input type="password" id="password" maxlength="10" placeholder="6-10位数字&字母"/> </p> <P> <label for =“password”>重复密码：</ label> <input type="password" id="password" maxlength="10" placeholder="重复密码"/> </p> <!-- 提交按钮 --> <P> <button type =“button”>注册</ button> </p> </form> </body> </html>
点击 "运行实例" 按钮查看在线实例
小结：网站的基础标签相当于是构成网站结构的地基，网站常用标签的使用主要是要结合网站的布局结构，浏览器的兼容以及对搜索引擎的友好来选择使用。
（附：第三期学员从头开始学习，希望这次有更大的收获！）
Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
