HTML常用标签

常用标签

1.注释标签

 <!--在这里写注释-->
 图示：

可以看到没有显示注释的文字

2.标题标签

标题标签一共有六个
h1 至 h6.
数字越小，里面的内容就越粗越大。
数字越大，里面的内容就越细越小。

图片展示：

3.段落标签

<p>这里写内容</p>
图片展示：

可以看到段落标签是一行独占的 而且段落与段落之间有行间距

4.换行标签

<br>
使用方法：
先使用lorem+Tab随机随机生一段话

我在单词“dolor”后面加了个换行标签之后的显示效果
注意：其他·标签都是成对存在的但是换行标签是单个存在的就是 < br >

5.格式化标签

格式化标签，其实是针对 文本 进行一些样式上的调整。
1、加粗: strong 标签 和 b 标签
2、倾斜: em 标签 和 i 标签
3、删除线: del 标签 和 s 标签
4、下划线: ins 标签 和 u 标签

可以看到这些格式标签不是独占一行的如果我们想要换行就用换行标签br

像这样我们把独占一行的标签叫做块状元素，不是独占一行的标签叫做行内元素

6.图片标签

效果展示：

使用的是img标签 ，在VScode中输入img就有提示

其中src里面放入图片的相对路径或者绝对路径或者图片的网络路径，这里alt就表示如果图片出错（图片挂了或者图片不存在）就会显示出alt里面的属性内容

比如这里我把图片的路径输了，然后就会显示alt里面的内容

接下来来看看img标签的其他属性

这里title 作用就是如果把鼠标放在图片上就会显示title里面的内容（由于我这里截图不方便就不在这里演示了）

img里新增了height 和width我们可以用这两个属性来改变图片的大小，单位是像素使用的时候就是数字后面加px

7.超链接标签

图片演示：

这里的标签是a标签，在VScode里面输入a然后点回车就行
其中href里面放的可以是外站的链接

此时我们就可以点击对应的文字了，点击完之后就可以跳转到对应的网站了

我们也可以进行自身网站内部的跳转

我又创建了一个ee.html的文件页面是长这样的

接下来我们就来跳转到这个页面
我在cc.html 里用了标签a然后href中写的是ee.html的相对路径

当我们点击本地后就会跳转

我们也可以把文字变成图片就是点击图片就会跳转到相应的链接

这样我们点击图片就可以跳转到响应的链接

8.表格标签

表格标签用的是table ，在表格内部分为行和列，行就用tr标签，一行内的列元素就用td标签或者th标签
图片演示：

这样就可以拥有一个差不多的表格形式了
我们还可以根据table里面的属性来改变表格的样子：

使用border 就可以让表格拥有实线，使用width 和height就可以设置表格的大小，但是图上的表格和我们常见的表格还是有点区别，就是每个方框之间有间隙，这时候我们就可以用cellspacing
效果展示：

这里说一下列元素th和td的区别，大家可以看到th有对文字加粗的作用，而且th会随这表格（table）的大小始终让文字处在居中的位置
tr中介绍两个属性height和align 其中height就是设置那一行的高度
效果展示：

align就是设置文字的对齐方式，有左对齐（leight）右对齐（right）居中（center）
效果展示：

其中td也有align属性也是设置文字的对齐方式，也有height 和width来设置表格的大小

表格行或列的合并

跨列合并用colspan属性，所以如果我们想让某一行的两列合并成一个就可以在td中用colspan这个标签来实现
效果展示：

1.没合并前

2.使用colspan后：

可以看到我是想让第二行中的两个列元素合并所以给colspan的值赋的是2；可以看到此时“10”，这个列元素就被挤出去了，最后我们把“10”这个列元素删掉就可以了
最终结果：

9.列标签

有序列标签ol，在ol内部用li标签设置元素：
效果展示

无序列标签ul，在ul内部用li标签设置元素：

10.表单标签

用户名、密码、验证码、手机号、邮箱、性别、生日、地址、户籍、爱好、政治面貌、上头像…
以上这些功能都是可以用一些表单项标签来实现的
表单标签是form

form中的action属性作用就是把form表单内的数据传到指定的位置

1.单行文本输入

使用input标签来实现
效果展示：

每个表单项一般都有name和value属性，那么就是给这个表单项取个名字，value就是这个表单项的值
这样我们就可以通过form中的action把数据传到后端来进行下一步操作
效果展示：

可以看到如果一开始我们就给value值它就会直接显示到单行文本框内，就相当一个默认值，如果用户在文本框内填入别的数据最终value的值也会改变，因此我们一般不在value属性中设置具体值
一般设置成这样就可以了：

2.单行文本密码输入

表单项标签input，这里我们需要改变它type的值，改成passworld就可以了
效果展示：

这时候我们再对文本框输入文字就是不可见的了，那么如果我还是想看到密码文本框的内容怎么办，这也是有办法的，在浏览器里我们可以按F12 进入开发者工具

然后带年纪这个一个框右下角有个箭头的图标

然后点击我们的密码文本框
在右边就可以找到这一行

然后我们将input里的type属性改成text就可以看见了

3.单选按钮

标签还是input，改变type 的值为radio即可
效果展示

但此时我们发现不是单选的而是两个都可以一起选，如果我们想要单选的效果就可以让它们的name属性值相同

我们还可以在这个单选表项中设置默认值，用到的属性是checked

4.复选框

把input的type属性改成checkbox
效果展示：

5.日期

同样是改变type属性
效果展示：

6.下拉表单

表单标签select，在里面的元素用option标签，这里有点像表格标签（table）
效果展示

如果要设置默认选项就在option中加入selected=”selected“属性即可
效果演示：

7.文件表单

使用这个表单就可以让用户上传一个文件了
表单标签为input，将属性type的值改为file
效果展示

点击选择文件我们就能上传文件了

8.多行文本域

标签为testarea
效果展示：

11.按钮

1.普通按钮

两中方式：1.使用button标签 ，2.使用input标签，将type属性改为botton
效果演示：

2.提交按钮

两种方式：1.使用input标签，将type属性改为submit ，2.使用button标签同样将type属性改为submit
这里我就挑一个来进行演示—button

之前不是说表单的标签是form，在form中有个属性是action，这个作用和超链接类似就是当点击提交按钮后就会跳转到指定页面，这里为了演示我就把百度链接填进去了：

也就是说当我们点击提交按钮后就会跳转到百度页面