【前端】HTML标签汇总

目录

展示用户信息的标签

1.文本标签 span

2.标题标签 h1~h6

3.竖着布局的标签 div

4.段落标签 p

5.超链接标签 a

5.1跳转至网上的资源

5.2锚点

6.列表标签

6.1有序列表 ol

6.2无序列表 ul

7.图片标签 img

7.1相对路径

7.1.1兄弟关系

7.1.2叔侄关系

7.1.3表兄弟关系

7.2绝对路径

8.表格标签

8.1形成一个表格

8.2表格的大小以及边框

8.3表格的优化

8.4单元格合并

8.4.1行合并 rowspan

8.4.2列合并 colspan

9.框架标签 \ 窗口标签 iframe

收集用户信息的标签

1.input + type

1.1.单行文本框 text

1.2.密码框 password

1.3.单选框 radio

1.4.复选框 checkbox

1.5.文件选择器 file

1.6.颜色拾取器 color

1.7.日期选择器 date

1.8.日期时间选择器 datetime-local

1.9.周选择器 week

1.10.滑块 range

1.11.数字输入框 number

2.下拉框 select

3.多行文本域 textarea

4.按钮

4.1普通按钮 button

4.2重置按钮 reset

4.3提交按钮 submit

音频和视频

1.音频 audio

2.视频 video

展示用户信息的标签

1.文本标签 span

hello

可以添加 style 样式

hello

2.标题标签 h1~h6

h1标题

逐级减小, h4标题和文本一样大 .

3.竖着布局的标签 div

竖着布局的标签

4.段落标签 p

段落标签

段落标签是竖着布局的, 不同点是两个段落之间有较大的空隙

5.超链接标签 a

5.1跳转至网上的资源

超链接至百度

href 里面写想要跳转的网址,这里以百度为例

在这里我们没有写 target 属性, 所以 target 会取默认值 _self 导致在本窗口打开新的网站. 为了在新窗口打开,我们把 target 取值为 _blank, 如下

超链接至百度

5.2锚点

为了实现同一页面上不同位置的跳转, 我们使用 name 属性标记需要到达的地方

然后使用超链接传送到目标位置

跳转到aaa

当多个超链接叠放在一起时, 它们会在同一行显示

为了让不同超链接竖着布局, 我们添加

跳转到aaa
跳转到bbb
跳转到ccc

为了让超链接固定在网页的某个位置,我们可以添加 style 属性, 如下

跳转到aaa

当多个超链接叠放在一起时, 我们可以把它们放在一个块级元素中

    
        跳转到aaa

        跳转到bbb

        跳转到ccc

6.列表标签

6.1有序列表 ol

           这是有序标签       这是有序标签       这是有序标签

ol 即 Ordered Labels

为了把标签前面的序号修改为大小写字母或其他符号, 我们可以使用 type 关键字, 例如

除此之外,我们还可以使用 start 标签控制编号从几开始, 例如

           这是有序标签       这是有序标签       这是有序标签

6.2无序列表 ul

           这是无序标签       这是无序标签       这是无序标签

7.图片标签 img

在 src 属性里写资源路径, 路径分为相对路径和绝对路径. 图片加载失败时, 显示 alt 属性里面的内容.

7.1相对路径

在相对路径中, 图片与图片有三种位置关系, 分别是兄弟关系 叔侄关系 表兄弟关系

7.1.1兄弟关系

当 html 文件和 jpg 文件在同一个包中, 它们之间是兄弟关系, 形如

html

        index.html

        https://blog.csdn.net/2302_78914800/article/details/pic.jpg

为了控制图片的大小,我们使用 style 属性定义宽和高, 形如

7.1.2叔侄关系

当 html 文件与 jpg 的父级在同一个包中, 它们之间是叔侄关系, 形如

index.html

img

        https://blog.csdn.net/2302_78914800/article/details/pic.jpg

7.1.3表兄弟关系

当 html 文件的父级与 jpg 的父级在同一个包中, 它们之间是表兄弟关系, 形如

html

        index.html

img

        https://blog.csdn.net/2302_78914800/article/details/pic.jpg

首先使用 ../ 返回上级, 然后按照叔侄关系处理

7.2绝对路径

联网复制图片网址, 赋值给 src 即可

8.表格标签

8.1形成一个表格

table 是放表格的容器, tr 是表格的行, td 是表格的单元格, 没有列的概念, 如下

                      id           姓名           年龄           性别

此为一行四列

                      id           姓名           年龄           性别                         1           张三           13           男                         9           李四           14           女                         85           王五           15           男

此为四行四列

8.2表格的大小以及边框

为了让表格有边框, 我们添加 border 属性

我们使用 width, height 控制表格的宽和高

8.3表格的优化

相较于

为了不让内容紧贴边框, 我们使用 cellpadding 属性控制单元格填充度

为了改变单元格间的间距, 我们使用 cellspacing 属性, 通常将其置为 0 以取消间距

被

标签包围的行在顶端显示, 被标签包围的行在底端显示,在中间显示

8.4单元格合并

8.4.1行合并 rowspan

rowspan 将不同行合并

8.4.2列合并 colspan

colspan 将不同列合并

9.框架标签 \ 窗口标签 iframe

在 src 中放入目标网址, 以牛客为例

此时的窗口是有边框的, 为了取消边框, 我们把 frameborder 属性设置为 0

为了修改窗口大小, 我们调整宽高属性

我们可以使用 name 属性标识窗口, 配合超链接的target 属性达到在此窗口跳转不同链接的效果

    跳转到牛客
    跳转到力扣
    跳转到bilibili

收集用户信息的标签

1.input + type

使用 input 标签收集用户信息时, 根据 type 属性的值进行区分

1.1.单行文本框 text

单行文本框

1.2.密码框 password

密码框

1.3.单选框 radio

使用 name 属性进行匹配, name 值相同为一组

男女 单选框

1.4.复选框 checkbox

足球篮球排球 复选框

1.5.文件选择器 file

1.6.颜色拾取器 color

1.7.日期选择器 date

1.8.日期时间选择器 datetime-local

1.9.周选择器 week

1.10.滑块 range

滑块的属性: min 最小值, max 最大值, value 滑块的默认值

1.11.数字输入框 number

数字输入框中只能输入数字

数字输入框的属性: min 最小值, max 最大值, value 输入框的默认值, step 步长

2.下拉框 select

           语文       数学       英语       体育

3.多行文本域 textarea

4.按钮

4.1普通按钮 button

4.2重置按钮 reset

重置按钮会将同一个 form 表单内的输入内容重置

4.3提交按钮 submit

提交按钮会将同一个 form 表单内的输入内容提交, 提交后会刷新

音频和视频

1.音频 audio

在 src 中写资源路径, 加入 controls 属性后手动控制音频播放

将 controls 属性改为 autoplay 属性, 进入网页自动播放

2.视频 video