网站重构与web标准设计视频教程百度快速排名
【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：不换行
字符实体
