【HTML】Day02
【HTML】Day02
- 1. 列表标签
- 1.1 无序列表
- 1.2 有序列表
- 1.3 定义列表
- 2. 表格标签
- 2.1 合并单元格
- 3. 表单标签
- 3.1 input标签基本使用
- 3.2 上传多个文件
- 4. 下拉菜单、文本域
- 5. label标签
- 6. 按钮button
- 7. div与span、字符实体
- 字符实体
1. 列表标签
作用：布局内容排列整齐的区域。
列表分类：无序列表、有序列表、定义列表。
1.1 无序列表
作用：布局排列整齐的不需要规定顺序的区域。
标签：ul 嵌套 li , ul 是无序列表, li是列表条目
1. ul标签里面只能包裹li标签
2. li标签里面可以包裹任何内容
<!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>
<ul>
<li>列表条目1</li>
<li>列表条目2</li>
</ul>
</body>
</html>
1.2 有序列表
作用：布局排列整齐的需要规定顺序的区域。
标签：ol嵌套li, ol是有序列表,li是列表条目。
<!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>
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
</body>
</html>
1.3 定义列表
标签：dl嵌套dt和dd, dl是定义列表，dt是定义列表的标题，dd是定义列表的描述/详情
<!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>
<dl>
<dt>列表标题</dt>
<dd>列表描述/详情</dd>
<dt>列表标题x</dt>
<dd>列表描述/详情x</dd>
</dl>
</body>
</html>
2. 表格标签
网页中的表格与Excel表格类似，用来展示数据。
标签：table 嵌套 tr tr嵌套td/th
<!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>
<!-- border边框
cellspacing单元格间距
cellpadding单元格距内容的距离-->
<table align="center" border="1" cellspacing="0"
cellpadding="20">
<caption>表格标题</caption>
<!-- tr表示行 th表头 加粗并居中 td表示列 16:20上课 -->
<tr>
<th>编号</th><th>姓名</th><th>年龄</th>
</tr>
<tr>
<td>1</td><td>张三</td><td>28</td>
</tr>
<tr>
<td>2</td><td>尼古拉斯赵四</td><td>18</td>
</tr>
</table>
</body>
</html>
表格标签
2.1 合并单元格
<!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>
<table border="" cellspacing="" cellpadding="">
<!-- colspan跨列合并 --> <!-- rowspan跨行合并 -->
<tr><td align="center" colspan="2">1-1</td><td rowspan="2">1-3</td></tr>
<tr><td rowspan="2">2-1</td><td>2-2</td></tr>
<tr><td colspan="2" align="center">3-2</td></tr>
</table>
</body>
</html>
3. 表单标签
3.1 input标签基本使用
input标签type属性值不同，功能也不同。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- action服务器地址 method提交方式 -->
<form action="http://www.tmooc.cn" method="get">
<!-- 文本框 name是对传递过去的参数做介绍 id唯一标识
value值 设置文本框的值-->
<input type="text" name="username"
placeholder="请输入用户名" id="" value="" />
<!-- 密码框 placeholder占位文本 -->
<input type="password" name="pwd"
placeholder="请输入您的密码" id="" value="" />
<hr >
<!-- 单选 必须写value checked 设置默认选中-->
性别: <input type="radio" name="gender" id="" value="m" />男
<input type="radio" checked="checked" name="gender" id="" value="f" />女
<hr >
<!-- 多选 和单选类似-->
爱好: <input type="checkbox" name="hobby" id=""
value="cy" />抽烟
<input type="checkbox" name="hobby" id=""
value="hj" />喝酒
<input type="checkbox" checked="checked" name="hobby" id="tt"
value="tt" /><label for="tt">烫头</label>
<!-- label扩充点击范围 -->
<input type="checkbox" name="hobby" id="wz" value="wangzhe"/>
<label for="wz">王者荣耀</label>
<hr >
<!-- 日期选择器-->
生日:<input type="date" name="birthday" id="birthday"/>
<hr >
<!-- 文件选择器-->
靓照:<input type="file" name="pic" id="pic"/>
<hr >
<input type="submit" value="注册"/>
</form>
</body>
</html>
3.2 上传多个文件
默认情况下，文件上传表单控件只能上传一个文件，添加multiple属性可以实现文件多选功能。
<input type="file" multiple>
4. 下拉菜单、文本域
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="http://www.tmooc.cn" method="get">
<!-- 下拉选 -->
所在城市:<select name="city">
<option value="bj">北京</option>
<!-- selected默认选中 -->
<option value="sh" selected="selected">上海</option>
<option value="gz">广州</option>
</select><br>
<!-- 文本域 rows行 cols列-->
自我介绍:<textarea name="intro" rows="3" cols="20"
placeholder="说点儿啥..."></textarea>
<!-- 提交按钮 -->
<input type="submit" value="注册"/>
<!-- 重置按钮 -->
<input type="reset" />
<!-- 自定义按钮 -->
<input type="button" value="按钮" />
<button type="button">按钮</button>
</form>
<p>测试 空格<abc></p>
<div id="">div1</div><div id="">div2</div>
<div id="">div3</div>
<span>span1</span>
<span>span2</span>
<span>span3</span>
</body>
</html>
5. label标签
作用：网页中，某个标签的说明文本。
经验：用label标签绑定文本和表单控件的关系，增大表单控件的点击范围。就比如上面的王者荣耀，点击文字也能选择到
6. 按钮button
<button type="">按钮 </button>
7. div与span、字符实体
作用：布局网页(划分网页区域，摆放内容)
- div:独占一行
- span：不换行
字符实体
