在正式讲解标签使用之前,需要先说明,标签这里只做简单用法说明,如果大家在有疑惑的地方,可以翻到最后有实例练习,结合实例一同食用可能会更加清楚标签的用法。
一、标题标签:
标题
代码语言:javascript代码运行次数:0运行复制标题1
标题2
标题3
标题4
标题5
标题6
二、段落标签:内容
代码语言:javascript代码运行次数:0运行复制zhes11111111111111111
22222222222222222222222222221111111111111111111
99999999999999999999999999999999999999999999999999999999999999999999999999999999999999
显示效果:三、换行标签:
换行标签换行后间隙比段落标签间隙小
代码语言:javascript代码运行次数:0运行复制
zhes11111111111111111
22222222222222222222222222221111111111111111111
9999999999999999999
9999999999999999999999999999999999
4.2、alt属性替换文本,当文本不能正确显示时,会显示一个替换的文字。图片正确显示则不替换文字
代码语言:javascript代码运行次数:0运行复制
路径正确,则显示图片成功,路径不正确则替换所给文字。
4.3、title属性提示文本,鼠标放在图片上就会有提示
代码语言:javascript代码运行次数:0运行复制
4.4、width/height属性控制宽度高度,高度宽度一般改一个就行,另一个会等比例缩放。参数是像素。
代码语言:javascript代码运行次数:0运行复制
4.5、border属性边框,参数是宽度的像素,但是一般使用CSS来设定。设置方法同width/height。
注意:
1. 属性可以有多个, 不能写到标签之前。
2. 属性之间用空格分割, 可以是多个空格, 也可以是换行。
3. 属性之间不分先后顺序。
4. 属性使用 "键值对" 的格式来表示。
五、超链接标签:a5.1、href属性必须具备, 表示点击后会跳转到哪个页面。
代码语言:javascript代码运行次数:0运行复制 跳转到百度5.2、target属性打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开。
对图片建立超链接代码语言:javascript代码运行次数:0运行复制

对文字建立超链接代码语言:javascript代码运行次数:0运行复制
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的值必须一样才能达到单选的效果。
代码语言:javascript代码运行次数:0运行复制性别:
男
女提交按钮:提交按钮、清空按钮肯定之前要有提交的内容,所以提交按钮之前一般会有各种标签。
代码语言:javascript代码运行次数:0运行复制
label 标签&&select 标签&&textarea 标签这几个标签用法较为简单,结合实例就能看懂用法。九、操作实例:1、绘制行星表格图以下代码用到的图片未提供,大家可自行找图片替代。
代码语言:javascript代码运行次数:0运行复制
| 名字 | 图片 | 质量(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、个人资料的上传代码语言:javascript代码运行次数:0运行复制








