【前端基础】摩天之建的艺术：html（下）
文章目录
- 1.表格标签
- 1.1 基本使用
- 1.2 合并单元格
- 2.列表标签
- 2.1 无序列表
- 2.2 有序列表
- 2.3 自定义列表
- 3.表单标签
- 3.1 form标签
- 3.2 input标签
- 3.3 label标签
- 3.4 select标签
- 3.5 textarea标签
- 4.无语义标签
- 希望读者们多多三连支持
- 小编会继续更新
- 你们的鼓励就是我前进的动力！
接上一篇，继续学习剩下的 html 知识点
1.表格标签
1.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 align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="500"><thead><th>姓名</th><th>性别</th><th>年龄</th></thead><tr><td>张三</td><td>男</td><td>20</td></tr><tr><td>李四</td><td>男</td><td>19</td></tr><tr><td>王五</td><td>女</td><td>23</td></tr></table>
</body>
</html>
table标签：表示整个表格tr：表示表格的一行td：表示一个单元格th：表示表头单元格. 会居中加粗thead：表格的头部区域(注意和th区分，范围是比th要大的)tbody：表格得到主体区域
table 包含 tr，tr 包含 td 或者 th
表格标签有一些属性，可以用于设置大小边框等，但是一般使用 css 方式来设置
这些属性都要放到 table 标签中
align是表格相对于周围元素的对齐方式，align="center"(不是内部元素的对齐方式)border表示边框，1表示有边框(数字越大，边框越粗)，" "表示没边框cellpadding：内容距离边框的距离，默认1像素cellspacing：单元格之间的距离，默认为2像素width / height：设置尺寸
注意，这几个属性，vscode 都提示不出来
🔥值得注意的是：
SHIFT + ALT + ↓ 可以快速复制某一行
✏️展示效果：
1.2 合并单元格
✏️举个例子：
<!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 align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="500"><thead><th>姓名</th><th>性别</th><th>年龄</th></thead><tr><td>张三</td><td rowspan="2">男</td><td>20</td></tr><tr><td>李四</td><!-- <td>男</td> --><td>19</td></tr><tr><td colspan="2">王五 / 女</td><!-- <td>女</td> --><td>23</td></tr></table>
</body>
</html>
- 跨行合并：
rowspan="n" - 跨列合并：
colspan="n"
跨行是向下合并，跨列是向左合并，注意注释掉别的单元格，避免排版错误
✏️展示效果：
2.列表标签
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><ul><li type="disc">小猫</li><li type="square">小兔</li><li type="circle">小狗</li></ul>
</body>
</html>
ul 表示无序列表（unorder_list），li 表示每一行列表
每行列表前的样式可以自行选择：
disc表示实心圆（默认）square表示实心正方形circle表示空心圆
🔥值得注意的是：
对于所有列表都可以使用比如：ul>li*3 的方式快速生成列表
✏️展示效果：
2.2 有序列表
✏️举个例子：
<!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 type="1"><li>小猫</li><li>小兔</li><li>小狗</li></ol><ol type="A"><li>小猫</li><li>小兔</li><li>小狗</li></ol><ol type="a"><li>小猫</li><li>小兔</li><li>小狗</li></ol><ol type="i"><li>小猫</li><li>小兔</li><li>小狗</li></ol><ol type="I"><li>小猫</li><li>小兔</li><li>小狗</li></ol>
</body>
</html>
ol 表示有序列表（order_list），li 表示每一行列表
每行列表前的样式可以自行选择：
1表示数字编号（默认）A表示大写英文字母编号a表示小写英文字母编号i表示小写罗马数字编号I表示大写罗马数字编号
✏️展示效果：
2.3 自定义列表
✏️举个例子：
<!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> 这是标题<dd>内容1</dd><dd>内容2</dd><dd>内容3</dd></dt></dl>
</body>
</html>
dl 表示自定义列表，dt 表示列表的标题，dd 表示列表内容
🔥值得注意的是：
- 元素之间是并列关系
ul/ol中只能放li不能放其他标签，dl中只能放dt和ddli中可以放其他标签- 列表带有自己的样式，可以使用
css来修改(例如前面的小圆点都会去掉)
✏️展示效果：
3.表单标签
比如在输入账号密码的框框部分，就是一种表单标签，会与后端进行数据交互
分成两个部分:
- 表单域：包含表单元素的区域，重点是
form标签 - 表单控件：输入框，提交按钮等，重点是
input标签
3.1 form标签
<form action="test.html">... [form 的内容]
</form>
描述了要把数据按照什么方式，提交到哪个页面中，一系列实现都是在这个标签域里，action 后面接的是后端服务器的接收地址
3.2 input标签
- 文本框
<input type="text">
- 密码框
<input type="password">
- 单选框
性别:
<input type="radio" name="sex">男
<input type="radio" name="sex" checked="checked">女
单选框之间必须具备相同的 name 属性，才能实现多选一效果，checked 表示默认选择
- 复选框
爱好:
<input type="checkbox">吃饭
<input type="checkbox">睡觉
<input type="checkbox">打游戏
- 普通按钮
<input type="button" value="我是个按钮" onclick="alert('hello')">
onclick="alert('hello')" 属于 js 的范畴，后面会学习的
- 提交按钮
<form action="test.html"><input type="text" name="username"><input type="submit" value="提交">
</form>
提交按钮必须放到 form 标签内，点击后就会尝试给服务器发送
- 清空按钮
<form action="test.html"><input type="text" name="username"><input type="submit" value="提交"><input type="reset" value="清空">
</form>
- 选择文件
<input type="file">
点击选择文件，会弹出对话框，选择文件
3.3 label标签
✏️举个例子：
<!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><input type="radio" name="sex" id="male"><label for="male">男</label><input type="radio" name="sex" id="female" checked="checked"><label for="female">女</label>
</body>
</html>
搭配 input 使用，点击文字也能选中对应的单选/复选框，能够提升用户体验
for 属性指定当前 label 和哪个相同 id 的 input 标签对应(此时点击才是有用的)
✏️展示效果：
3.4 select标签
✏️举个例子：
<!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>
<select><option>北京</option><option>广州</option><option>深圳</option><option selected="selected">上海</option>
</select>
</body>
</html>
select 表示下拉菜单，option 表示选项
option 中定义 selected="selected" 表示默认选中
✏️展示效果：
3.5 textarea标签
✏️举个例子：
<!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><textarea rows="10" cols="50">
</textarea>
</body>
</html>
textarea 标签表示一个文本域
rows="10"：设置文本区域的可见行数为10行cols="50"：设置文本区域的可见字符宽度为50个字符
🔥值得注意的是：
rows 和 cols 一般不会直接使用，都是用 css 来改的
✏️展示效果：
4.无语义标签
✏️举个例子：
<!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><div><span>咬人猫</span><span>咬人猫</span><span>咬人猫</span></div><div><span>兔总裁</span><span>兔总裁</span><span>兔总裁</span></div><div><span>阿叶君</span><span>阿叶君</span><span>阿叶君</span></div>
</textarea>
</body>
</html>
就是两个盒子，方便用于网页布局
div是独占一行的，是一个大盒子span不独占一行，是一个小盒子
✏️展示效果：
希望读者们多多三连支持
小编会继续更新
你们的鼓励就是我前进的动力！
