一、列表
1.列表有3种:
- 无序列表
<h3>购物车</h3>
<ul>
<li>牛奶一箱</li>
<li>蛋糕一个</li>
<li>苹果10斤</li>
</ul>
- 有序列表
<h3>购物车</h3>
<ol>
<li>牛奶一箱</li>
<li>蛋糕一个</li>
<li>苹果10斤</li>
</ol>
- 自定义列表
<dl>
<dt>名称:</dt>
<dd>php中文网</dd>
<dt>地址:</dt>
<dd>河南省信阳市浉河区</dd>
<dt>联系</dt>
<dd>电话:<a href="tel:18937109272">18937109272</a></dd>
<dd>邮箱:<a href="mailto:734564242@qq.com">734564242@qq.com</a></dd>
</dl>
二、表格
table标签定义表格,一个HTML表格由table以及一个或多个tr、th或者td组成
tr元素定义表格行,th元素定义表头,td元素定义表格单元格。
一个表格的基本结构:
<table class="table">
<!-- 表格标题 -->
<caption>
商品信息表
</caption>
<!-- 表头 -->
<thead>
<!-- 每添加一组表格数据,必须先添加一行 -->
<tr>
<td>ID</td>
<td>品名</td>
<td>单价</td>
<td>单位</td>
<td>数量</td>
<td>金额</td>
</tr>
</thead>
<!-- 一个表格可以有多个tbody,但是只能有一个thead -->
<tbody>
<tr>
<td>1</td>
<td>iPhone 12 mini</td>
<td>5499</td>
<td>部</td>
<td>100</td>
<td>549900</td>
</tr>
</tbody>
</table>
总结:
1.一个表格可以有多个tbody,但是只能有一个thead。
2.每添加一组表格数据,必须先添加一行。
3.所有的数据必须填充到td/th中,th是td元素的一个加强版,th比td多了个加粗和居中的效果。备注:
VS Code快捷键PDF文档:https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf
三、表单与常用控件
form表单用于向服务器传送数据,一个表单可以包含input元素,例如:文本框、单选框、复选框、按钮等。
表单的基本格式:
<form action="" method="POST" class="register">
<!-- 这里面可以放input元素 -->
</form>
action 处理表单的程序。
method:表单数据提交类型,默认为GET:数据直接显示在url地址中;POST:表单数据在请求头体中。
- 控件:
3.1 文本类型控件:
- 单行文本框:
<label for="username">账号:</label>
<!-- type:控件类型 -->
<!-- name:数据的变量名,后端服务器接收前端传递的参数时就用该变量 -->
<!-- value:数据值 -->
<input type="text" name="username" id="username" value="admin" required>
- 邮箱型文本框:
<!-- 邮箱型文本框 -->
<label for="email">邮箱:</label>
<input type="email" name="email" id="email" value="html@html.cn" required>
- 密码型文本框/非明文:
<!-- 密码型文本框/非明文 -->
<label for="password">密码:</label>
<input type="password" name="password" id="password" value="" placeholder="密码不少于6位" required>
3.2 单选框和复选框
- 3.2.1 单选框
<label for="">性别:</label>
<div>
<!-- 一组单选按钮必须公用同一个名称的name值,否则无法实现值的唯一性 -->
<!-- checked:表示默认值 -->
<input type="radio" name="gender" value="male" id="male">
<label for="male">男</label>
<input type="radio" name="gender" value="male" id="male">
<label for="female">女</label>
<input type="radio" name="gender" value="male" id="male" checked>
<label for="secret">保密</label>
</div>
注意:
单选框(radio)的name值必须全部相同,这样才能保证值的唯一性,默认选中使用checked属性。3.2.2 复选框
<label for="#">兴趣:</label>
<div>
<input type="checkbox" name="hobby[]" value="basketball" id="basketball">
<label for="basketball">篮球</label>
<input type="checkbox" name="hobby[]" value="game" id="game">
<label for="game">游戏</label>
<input type="checkbox" name="hobby[]" value="travel" id="travel">
<label for="travel">旅游</label>
<input type="checkbox" name="hobby[]" value="program" id="program">
<label for="program">编程</label>
</div>
- 3.2.3 下拉列表/下拉框
<label for="">学历:</label>
<select name="edu" id="eud">
<option value="1">初中</option>
<option value="2">高中</option>
<option value="3" selected>本科</option>
<option value="4">研究生</option>
<option value="5" label="老司机">博士</option>
</select>
注意:
如果option里有label值,label属性的优先级于option里的内容。因此,上述列表第5项应该显示“老司机”。HTML5中新属性:
属性 | 值 | 描述 |
---|---|---|
multiple | multiple | 可以选择多个选项 |
size | 数值,如:2 | 下拉框里可见的选项数量 |
- 3.2.4 文件域与隐藏域
上传文件需要注意两点:
请求类型必须为POST;
将表单form数据编码设置为:enctype=”multipart/form-data”;
<form action="" method="POST" class="register" enctype="multipart/form-data">
<label for="user-pic">头像:</label>
<!-- 隐藏域,在前端页面是无法看到的,它的值是用于后端处理的 -->
<input type="hidden" name="MAX_FILE_ZIE" value="80000" />
<input type="file" name="user_pic" id="user-pic" />
<!-- 头像占位符 -->
<div class="user-pic" style="grid-column: 2;"></div>
<!-- 提交按钮 -->
<button>提交</button>
</form>
enctype有3个值:
值 | 描述 |
---|---|
application/x-www-form-urlencoded | 默认值,在发送之前编码所有字符 |
multipart/form-data | 使用上传文件空间时必须用该值 |
text/plain | 将空格转换为“+”,但不对特殊字符编码 |
隐藏域:在前端页面是无法看到的,它的值是用于后端处理的
<input type="hidden" name="MAX_FILE_ZIE" value="80000" />
- 3.2.5 文本域(多行文本框)
<label for="comment">备注:</label>
<textarea name="comment" id="comment" cols="30" rows="10"></textarea>
四、表单的form属性
- 如果控件写在form表单外部,则控件需要使用form属性,即:form=”表单id值”,才能在提交表单的时候传递控件的值,否则无法传递。
如上述代码,账号的input控件里没有写form属性,在提交的时候是无法提交username值,只能提交email和password的值。<form action="check.php" method="get" id="register">
<div class="box">
<!-- 使用form属性,将控件与它所属的表单进行关联/绑定 -->
<label for="email">邮箱:</label>
<input type="email" form="register" name="email" id="email" placeholder="demo@email.com" />
<label for="password">密码:</label>
<input type="password" form="register" name="password" id="password" placeholder="至少8位" />
<button form="register">提交</button>
</div>
</form>
<label for="username">帐号:</label>
<input type="text" name="username" id="username" placeholder="不能为空" />
如果不把表单控件写到form内部,这样会方便js获取表单元素的值,但是这样写会影响布局,造成布局混乱,建议还是按照标准的写法,写到form表单内部。
作业:用表格写一个课程表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/table.css">
<title>表格:行与列的合并</title>
</head>
<body>
<table class="lesson">
<!-- 表格标题 -->
<caption>
xxxx小学课程表
</caption>
<!-- 表头 -->
<thead>
<tr>
<th colspan="2"></th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
<!-- tbody -->
<tbody>
<tr>
<td rowspan="4">上午</td>
<td>1</td>
<td>语文</td>
<td>数学</td>
<td>音乐</td>
<td>社会</td>
<td>科学</td>
</tr>
<tr>
<td>2</td>
<td>数学</td>
<td>语文</td>
<td>音乐</td>
<td>语文</td>
<td>数学</td>
</tr>
<tr>
<td>3</td>
<td>美术</td>
<td>音乐</td>
<td>音乐</td>
<td>数学</td>
<td>音乐</td>
</tr>
<tr>
<td>4</td>
<td>社会</td>
<td>体育</td>
<td>音乐</td>
<td>体育</td>
<td>语文</td>
</tr>
<tr class="rest">
<td colspan="7">中午休息</td>
</tr>
<tr>
<td rowspan="4">下午</td>
<td>5</td>
<td>语文</td>
<td>数学</td>
<td>音乐</td>
<td>社会</td>
<td>科学</td>
</tr>
<tr>
<td>6</td>
<td>数学</td>
<td>语文</td>
<td>音乐</td>
<td>语文</td>
<td>数学</td>
</tr>
<tr>
<td>7</td>
<td>课外活动:</td>
<td colspan="4">各班自行组织,自愿参加</td>
<!-- <td>音乐</td>
<td>数学</td>
<td>音乐</td> -->
</tr>
</tbody>
</table>
</body>
</html>
效果: