目录
一、标题标签：
标题
二、段落标签：
内容
三、换行标签：
四、img标签
4.1、src属性：指定图片路径
4.2、alt属性
4.3、title属性
4.4、width/height属性
4.5、border属性
五、超链接标签：a
5.1、href属性
5.2、target属性
对图片建立超链接
对文字建立超链接
六、表格标签
七、列表标签
八、表单标签
8.1、input 标签
label 标签&&select 标签&&textarea 标签
操作实例：
1、绘制行星表格图
2、个人资料的上传
在正式讲解标签使用之前，需要先说明，标签这里只做简单用法说明，如果大家在有疑惑的地方，可以翻到最后有实例练习，结合实例一同食用可能会更加清楚标签的用法。
一、标题标签：
标题
标题1
标题2
标题3
标题4
标题5
标题6
二、段落标签：
内容
zhes11111111111111111
22222222222222222222222222221111111111111111111
99999999999999999999999999999999999999999999999999999999999999999999999999999999999999
显示效果：
三、换行标签：
换行标签换行后间隙比段落标签间隙小
zhes11111111111111111
22222222222222222222222222221111111111111111111
9999999999999999999
9999999999999999999999999999999999
四、img标签
4.1、src属性：指定图片路径
在该文件同级目录下有这样一张图片
4.2、alt属性
替换文本，当文本不能正确显示时，会显示一个替换的文字。图片正确显示则不替换文字
路径正确，则显示图片成功，路径不正确则替换所给文字。
4.3、title属性
提示文本，鼠标放在图片上就会有提示
4.4、width/height属性
控制宽度高度，高度宽度一般改一个就行，另一个会等比例缩放。参数是像素。
4.5、border属性
边框，参数是宽度的像素，但是一般使用CSS来设定。设置方法同width/height。
注意：
1. 属性可以有多个, 不能写到标签之前。
2. 属性之间用空格分割, 可以是多个空格, 也可以是换行。
3. 属性之间不分先后顺序。
4. 属性使用 "键值对" 的格式来表示。
五、超链接标签：a
5.1、href属性
必须具备, 表示点击后会跳转到哪个页面。
5.2、target属性
打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开。
对图片建立超链接
对文字建立超链接
22222222222222222222222222221111111111111111111
六、表格标签
table 标签: 表示整个表格
tr: 表示表格的一行
td: 表示一个单元格
th: 表示表头单元格. 会居中加粗
thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)
tbody: 表格得到主体区域.
表格标签有一些属性, 可以用于设置大小边框等. 但是一般使用 CSS 方式来设置. 这些属性都要放到 table 标签中。
align 是表格相对于周围元素的对齐方式. align="center" (不是内部元素的对齐方式)。
border 表示边框. 1 表示有边框(数字越大, 边框越粗), "" 表示没边框。
cellpadding: 内容距离边框的距离, 默认 1 像素。
cellspacing: 单元格之间的距离. 默认为 2 像素。
width / height: 设置尺寸。
注意, 这几个属性, vscode 都提示不出来。
合并单元格：向下和向右合并单元格，最重要的是找准要合并的单元格，然后删除掉多余的单元格
跨行合并: rowspan="n"
跨列合并: colspan="n"
七、列表标签
无序列表：ul li
有序列表：ol li
快速生成列表的方法：ul>li*n：一次性生成n行列表。
注意：ul/ol 中只能放 li 不能放其他标签, li 中可以放其他标签。
八、表单标签
表单域: 包含表单元素的区域. 重点是 form 标签。描述了要把数据按照什么方式, 提交到哪个页面中。
表单控件: 输入框, 提交按钮等.重点是input标签。
8.1、input 标签
各种输入控件, 包括单行文本框（text）, 按钮（button）, 单选框（radio）, 复选框（checkbox）。下面是input标签的各种属性：
type(必须有), 取值种类很多多, button, checkbox, text, file, image, password, radio 等。
name: 给 input 起了个名字. 尤其是对于 单选按钮, 具有相同的 name 才能多选一。
value: input 中的默认值。
checked: 默认被选中. (用于单选按钮和多选按钮）。
重点说一下单选框和提交按钮、清空按钮。单选框的name的值必须一样才能达到单选的效果。
性别:
男
女
提交按钮：提交按钮、清空按钮肯定之前要有提交的内容，所以提交按钮之前一般会有各种标签。
label 标签&&select 标签&&textarea 标签
这几个标签用法较为简单，结合实例就能看懂用法。
九、操作实例：
1、绘制行星表格图
以下代码用到的图片未提供，大家可自行找图片替代。
| 名字 | 图片 | 质量（10的24次方kg） | 直径（km） | 密度（kg/m3） | 重力（m/s2） | 天长（小时） | 与太阳距离（10的6次方km） | 平均温度 | 卫星数量 | 备注 | ||
| 类地行星 | 水星 |  | 0.330 | 4879 | 5427 | 3.7 | 4222.6 | 57.9 | 167 | 0 | 距太阳最近 | |
| 金星 |  | 4.87 | 12104 | 5243 | 8.9 | 2802.0 | 108.2 | 464 | 0 | |||
| 地球 |  | 5.97 | 12756 | 5514 | 9.8 | 24.0 | 149.6 | 15 | 1 | 我们的世界 | ||
| 火星 |  | 0.642 | 6792 | 3933 | 3.7 | 24.7 | 227.9 | -65 | 2 | 红色星球 | ||
| 类木行星 | 气巨星 | 木星 |  | 1898 | 142984 | 1326 | 23.1 | 9.9 | 778.6 | -110 | 67 | 太阳系最大 |
| 土星 |  | 568 | 120536 | 687 | 9.0 | 10.7 | 1433.5 | -140 | 62 | |||
| 冰巨星 | 天王星 |  | 86.8 | 51118 | 1271 | 8.7 | 17.2 | 2872.5 | -195 | 27 | ||
| 海王星 |  | 102 | 49528 | 1638 | 11.0 | 16.1 | 4495.1 | -200 | 14 | |||
| 矮行星 | 冥王星 |  | 0.0146 | 2370 | 2095 | 0.7 | 153.3 | 5906.4 | -225 | 5 | 2006年降格，但尚存争议 | |
2、个人资料的上传
精彩内容
发表评论