目录
一、列表标签的使用
1.1 无序列表ul
无序列表 ul （unordered list）
type 可以更改列表标志项 disc（默认值） circle（空心圆） square（方块）
注意：ul li不单独使用
<!-- 1.无序列表 ul unordered list ul li不单独使用
type 可以更改列表标志项 disc（默认值） circle（空心圆） square（方块）
-->
<ul type="circle">
<li>运城大盘鸡</li>
<li>大同刀削面</li>
<li>临汾丸子面</li>
</ul>浏览器运行结果如下：
1.2 有序列表ol
有序列表 （ol ordered list）
type 可以更改列表标志项 1 A a I i.....
同样ol li也不单独使用
<!-- <ol type="I">
<li>曹县</li>
<li>上海</li>
<li>北京</li>
</ol> -->浏览器运行结果如下：
1.3 定义列表dl
定义列表dl （definitio list ）
配合dt（definition title） 和 dd （definition description）来使用
<!-- 3.定义列表 dl definitio list dt definition title dd definition description -->
<dl>
<dt>太原</dt>
<dd>是山西省会</dd>
<dt>曹县</dt>
<dd>是世界中心</dd>
</dl>浏览器运行结果如下：
二、表格标签的使用
表格标签：table 一个table就是一个表格
表格属性：border（边框） width（宽） height（高） cellspacing(单元格和单元格之间的距离)
cellpadding(单元格内容到单元格之间的距离) bgcolor （背景色）
background （背景图片） align （设置表格在浏览器水平对齐方式) left center right
tr属性 bgcolor align：一整行单元格内容在单元格对齐方式 left（默认值） right center
valign 一整行单元格内容在垂直方向的对齐方式 top middle（默认值） bottom
td属性 bgcolor align：当前单元格内容对齐方式 left（默认值） right center
valign 当前单元格内容在垂直方向的对齐方式 top middle（默认值） bottom
th： 表头标签 自带居中加粗效果
caption 表格标题标签
合并单元格：
跨行合并 rowspan='number' 合并number个单元格
跨列合并 colspan='number' 合并number个单元格
表格的完整结构：
thead 表头
tbody 浏览器会自动补全 tfoot 表脚
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
/* 合并单元格 border-collapse */
border-collapse: collapse;
/* 设置背景图片 */
/* background-image: url('../Day01/音视频/ad7.jpeg'); */
/* 更改背景图片尺寸 */
/* background-size: 100% 100%; */
}
</style>
</head>
<body>
<!-- 表格标签 一个table就是一个表格
表格属性：border 表格边框的厚度 默认为0
width 宽
height 高
align 表格在浏览器水平方向的对齐方式 left（默认值） center right
cellspacing 单元格和单元格之间的距离 外边距
cellpadding 单元格边框和单元格内容之间的距离 内边距
bgcolor 背景色
background 背景图片
-->
<!-- tr属性 bgcolor align：一整行单元格内容在单元格对齐方式 left（默认值） right center
valign 一整行单元格内容在垂直方向的对齐方式 top middle（默认值） bottom
td属性 bgcolor align：当前单元格内容对齐方式 left（默认值） right center
valign 当前单元格内容在垂直方向的对齐方式 top middle（默认值） bottom
-->
<table bgcolor="cyan" align="center" cellspacing="0" cellpadding="5" width="300px" height="200px" border="1">
<!-- 一个tr就是一行 一个td就是一个单元格 -->
<!-- <tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr> -->
<!-- 表格表头单元格使用th标签 自带居中加粗的效果 -->
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr align="right" valign="top">
<td width="150px">terry</td>
<td align="center">18</td>
<td valign="bottom">男</td>
</tr>
<tr align="center" valign="bottom">
<td>larry</td>
<td>19</td>
<td>女</td>
</tr>
</table>
</body>
</html>浏览器运行结果如下：
三、表单标签的使用
表单标签用来收集用户信息
form 所有的表单元素都要写在表单标签 action属性就是表单提交的服务器地址
input ：
type text 明文输入框 name中提交给表单的属性名 value提交表单的属性值 默认就是用户输入的内容
type password 暗文输入框
type radio 单选按钮 将单选按钮设置同一个属性 name='gender' value='男/女'
checked 设置单选按钮被默认选中
label 点击文字可以使表单元素聚焦，它有以下两种方法：
1.将表单元素直接使用label标签包裹
2.label for属性和表单元素的id属性属性值一致 将文字写在label标签中
type checkbox 复选框
checked 设置复选框被默认选中
select 将所有的下拉选项全部展开multiple
optgroup 给下拉选项分组
option 下拉选项
selected 设置下拉框下拉选项默认选中
readonly只读 disabled禁用
textarea 多行文本框
type button 普通按钮 配合js完成一些操作
type image 图片按钮
type file 上传文件
type reset 重置表单元素 清空在表单元素输入或者选择选项 但是默认值不清空
type submit 提交按钮 将表单中输入的值提交到服务器
type hidden 隐藏域 页面不显示表单元素 悄悄的提交数据到服务器
<!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>
<!-- 所有的表单元素都要写在表单标签中
action属性就是表单提交的服务器地址
-->
<form action="test.php">
<!-- 表单元素 输入框 单选按钮 复选框 下拉框 -->
<!-- 明文输入框 name中提交给表单的属性名 value提交表单的属性值 默认就是用户输入的内容 -->
<!-- 设置表单元素只读readonly -->
用户名：<input type="text" readonly name="username" value="terry">
<!-- 暗文输入框 -->
密码：<input type="password"><br>
<!-- 性别：男：<input type="radio" name="gender" value="男"> 女：<input type="radio" name="gender" value="女"> -->
<!-- label 点击文字可以使表单元素聚焦
1.将表单元素直接使用label标签包裹
2.label for属性和表单元素的id属性属性值一致 将文字写在label标签中
-->
<label>
男：<input type="radio" name="gender" value="男">
</label>
<!-- 第二种方法 -->
<label for="female">女：</label>
<input type="radio" checked name="gender" value="女" id="female"><br>
<!-- 复选框input type checkbox -->
爱好：
游泳：<input type="checkbox" name="hobbies" id="swimming">
篮球：<input type="checkbox" name="hobbies" id="basketball">
<!-- 复选框设置默认选中checked -->
足球：<input checked type="checkbox" name="hobbies" id="football"><br>
<!-- 下拉框 select 选项使用option 将所有的下拉选项全部展开multiple
使用optgroup进行分组
-->
城市：
<select name="city" multiple>
<optgroup label="一线城市">
<option value="上海">上海</option>
<!-- selected 设置下拉选项默认选中 -->
<option value="北京" selected>北京</option>
<option value="杭州">杭州</option>
</optgroup>
<!-- 禁用表单元素 disabled -->
<optgroup label="二线城市" disabled>
<option value="太原">太原</option>
<option value="兰州">兰州</option>
<option value="晋中">晋中</option>
</optgroup>
</select><br>
<!-- 多行文本框 -->
描述：
<textarea name="" id="" cols="30" rows="10"></textarea>
<!-- 普通按钮 配合js完成一些操作 -->
<input type="button" value="点击">
<!-- 图片按钮 -->
<input type="image" width="150px" src="../Day01/音视频/ad7.jpeg" alt="">
<!-- 附件上传 -->
<input type="file">
<!-- 隐藏域 页面不显示表单元素 悄悄的提交数据到服务器 -->
<input type="hidden" name="token" value="123">
<!-- 重置按钮 重置表单 清空表单 -->
<input type="reset" value="重置">
<!-- 提交按钮 -->
<input type="submit" value="提交">
</form>
</body>
</html>浏览器运行结果如下：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
