当前位置：首页 > news >正文

【前端寻宝之路】学习和总结HTML的标签属性

news 2026/4/21 11:08:10

](https://img-home.csdnimg.cn/images/20220524100510.png#pic_center)

🌈个人主页: Aileen_0v0
🔥热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法|MySQL|
💫个人格言:“没有罗马,那就自己创造罗马~”

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击👉跳转到网站

文章目录

- Dom树
- `段落标签:`p是双标签
- `换行标签:`br是单标签
`Img标签`
- `属性1:`
- `属性2`
`a标签`
- `herg属性`

Html:html文件根标签
Head:编写页面相关的属性
Title:页面标题
Body:页面内容展示

Dom树

所有的标签都是html子标签
Head和body是兄弟标签
Head和title父子标签

每一个标签相当于一个对象,我们可以通过代码拿到这些对象,然后对这些对象进行增删查改.

在这里插入图片描述

快速生成代码框架
Shift+!+Enter
生成代码框架的含义

在这里插入图片描述

标题标签:h1-h6 有六个,从h1-h6,数字越大,则则字体越小.

在这里插入图片描述

注释:ctrl+/
我们可以通过快捷键:Fn + F12 查看到页面的源代码.

在这里插入图片描述

`段落标签:`p是双标签

在这里插入图片描述

`换行标签:`br是单标签

Br是break的缩写,表示换行.
Br是一个单标签(不需要结束标签)

在这里插入图片描述

换行标签和段落标签的区别:换行标签换行后的间隙比段落标签小.

格式化标签

加粗:strong标签和 b标签
斜线:em 标签和 I 标签
删除线:del 标签和 s 标签
下划线:ins 标签和 u 标签

`Img标签`

`属性1:`

Src属性
Img标签必须搭配着src使用(指定图片路径)

在这里插入图片描述

`属性2`

alt:替换文本,当文本不能正确显示的时候,会显示一个替换的文字.(alt后面的文案,只有当图片加载出错的时候才会展示,如果图片加载成功,这个文案就不会展示)
title:提示文本,鼠标放到图片上,就会有提示.
width/height:控制宽度高度,宽度和高度一般改一个就行,另外一个会等比例缩放,否则就会图片失衡.
border:边框,参数是宽度的像素.但一般使用 CSS 来设定.

`a标签`

`herg属性`

在这里插入图片描述

<!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><a href="https://blog.csdn.net/Aileenvov?type=blog">Aileen_0v0</a><a href="html01.html">跳转到html01页面</a><a href="#">跳转到当前页面</a><a href="https://blog.csdn.net/Aileenvov?type=blog"><img src="D:\html猫.jpg" alt=""></a>
</body>
</html>

在这里插入图片描述

](https://img-home.csdnimg.cn/images/20220524100510.png#pic_center)

【前端寻宝之路】学习和总结HTML的标签属性

🌈个人主页: Aileen_0v0 🔥热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法|MySQL| 💫个人格言:“没有罗马,那就自己创造罗马~” 前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不…...

编程日记 2024/3/20 9:41:17

kafka2.x版本配置SSL进行加密和身份验证

背景：找了一圈资料，都是东讲讲西讲讲，最后我还没搞好，最终决定参考官网说明。官网指导手册地址：Apache Kafka 需要预备的知识，keytool和openssl 关于keytool的参考：keytool的使用-CSDN博客 …...

编程日记 2024/3/20 9:40:15

一、Linux下文件批量重命名 rename命令说明： Usage: rename [options] … Rename files. Options: -v, --verbose explain what is being done -s, --symlink act on the target of symlinks -n, --no-act do not make any changes -o, --no-overwrite don’t overw…...

编程日记 2024/3/20 9:38:13

stm32之GPIO电路介绍

文章目录 1 GPIO介绍2 GPIO的工作模式2.1 浮空输入2.2 上拉输入2.3 下拉输入2.4 模拟输入2.5 开漏输出2.6 推挽输出2.7 复用开漏输出2.8 复用推挽输出2.9 其他 3 应用方式4 常用库函数 1 GPIO介绍保护二极管：保护引脚，让引脚的电压位于正常的范围施密特…...

编程日记 2024/3/20 9:36:10

Unity Toggle处理状态变化事件

Toggle处理状态变化事件，有两个方法。法一、通过Inspector面板设置实现步骤： 在Inspector面板中找到Toggle组件的"On Value Changed"事件。单击""按钮添加一个新的监听器。拖动一个目标对象到"None (Object)"字段&am…...

编程日记 2024/3/20 9:34:06

UE5.1 iClone8 正确导入角色骨骼与动作

使用iClone8插件Auto Setup 附录下载链接里面有两个文件夹,使用Auto Setup C:\Program Files\Reallusion\Shared Plugins 在UE内新建Plugins,把插件复制进去在工具栏出现这三个人物的图标就安装成功了 iClone选择角色,导入动作选择导出FBX UE内直接导入会出现是否启动插件…...

编程日记 2024/3/20 9:31:02

FFmpeg-- c++实现：pcm和yuv编码

文章目录流程音频视频 api核心代码audioencoder.haudioencoder.cppvideoencoder.hvideoencoder.cpp pcm和yuv编码为aac和h264，封装为c的AudioEncoder类和VideoEncoder类流程音频初始化音频参数 int InitAAC(int channels, int sample_rate, int bit_rate); 音…...

编程日记 2024/3/20 9:26:58

图解CodeWhisperer的安装使用

🎬 江城开朗的豌豆：个人主页 🔥 个人专栏 :《 VUE 》《 javaScript 》 📝 个人网站 :《江城开朗的豌豆🫛 》 ⛺️ 生活的理想，就是为了理想的生活 ! 目录 📘 CodeWhisperer简介 &#…...

编程日记 2024/3/20 9:22:52

Python内置对象

Python是一种强大的、动态类型的高级编程语言，其内置对象是构成程序的基础元素。Python的内置对象包括数字、字符串、列表、元组、字典、集合、布尔值和None等，每种对象都有特定的类型和用途。 01 什么是内置对象这些对象是编程语言的基础构建块&…...

编程日记 2024/3/20 9:17:45

开源数据集 nuScenes 之 3D Occupancy Prediction

数据总体结构 Nuscenes 数据结构可以看一下我的blog如何下载完整版 mmdetection3d ├── mmdet3d ├── tools ├── configs ├── data │ ├── nuscenes │ │ ├── maps │ │ ├── samples │ │ ├── sweeps │ │ ├── lidarseg (o…...

编程日记 2024/3/20 9:15:43

物联网竞赛板CubMx全部功能简洁配置汇总

目录前言：1、按键&LED灯配置：2、OLED配置：3、继电器配置：4、LORA模块配置：5、矩阵模块：6、串口模块：7、RTC配置：8、ADC模块配置：9、温度传感器模块：后续…...

编程日记 2024/3/20 9:14:42

使用Redis做缓存的小案例

如果不了解Redis，可以查看本人博客：Redis入门 Redis基于内存，因此查询速度快，常常可以用来作为缓存使用，缓存就是我们在内存中开辟一段区域来存储我们查询比较频繁的数据，这样，我们在下一次查询…...

编程日记 2024/3/20 9:13:40

剧本杀小程序功能介绍

剧本杀功能介绍剧本杀，一种融合了角色扮演与推理解谜的社交游戏，近年来在年轻人中越来越受欢迎。它不仅可以锻炼参与者的逻辑推理能力，还能增进朋友间的感情，提升团队协作能力。下面，我们将详细介绍剧本杀的核心功能…...

编程日记 2024/3/20 9:09:35

C#基础语法学习笔记（传智播客学习）

最近在学习C#开发知识，跟着传智播客的视频学习了一下，感觉还不错，整理一下学习笔记。 C#基础语法学习笔记 1.背景知识2.Visual Studio使用3.基础知识4.变量5.运算符与表达式6.程序调试7.判断结构8.循环结构9.常量、枚举类型10.结构体类型11.数…...

编程日记 2024/3/20 9:03:28

图论01-DFS和BFS(深搜和广搜邻接矩阵和邻接表/Java)

1.深度优先理论基础(dfs) dfs的两个关键操作搜索方向，是认准一个方向搜，直到碰壁之后再换方向换方向是撤销原路径，改为节点链接的下一个路径，回溯的过程。dfs解题模板 void dfs(参数) {if (终止条件) {存放结果;return;}for …...

编程日记 2024/3/20 8:59:24

【Python】Miniconda+Vscode+Jupyter 环境搭建

1.安装 Miniconda Conda 是一个开源的包管理和环境管理系统，可在 Windows、macOS 和 Linux 上运行，它可以快速安装、运行和更新软件包及其依赖项。使用 Conda，我们可以轻松在本地计算机上创建、保存、加载和切换不同的环境 Conda 分为 Anaco…...

编程日记 2024/3/20 8:57:21

Redis消息队列与thinkphp/queue操作

业务场景场景一用户完成注册后需要发送欢迎注册的问候邮件、同时后台要发送实时消息给用户对应的业务员有新的客户注册、最后将用户的注册数据通过接口推送到一个营销用的第三方平台。遇到两个问题： 由于代码是串行方式，流程大致为：开…...

编程日记 2024/3/20 8:56:20

【Ubuntu】常用命令

一般操作 pwd（present working directory） 显示当前的工作目录/路径。 cd (change directory) 改变目录，用于输入需要前往的路径/目录。有一些特殊命令也很常用 : 解释前往同一级的另一个目录 cd ../directory name cd .. 表示进入上…...

编程日记 2024/3/20 8:50:14

稀碎从零算法笔记Day22-LeetCode:

题型：链表链接：2. 两数相加 - 力扣（LeetCode） 来源：Leet 题目描述给你两个非空的链表，表示两个非负的整数。它们每位数字都是按照逆序的方式存储的，并且每个节点只能存储一位数字。 …...

编程日记 2024/3/20 8:45:09

Nacos下载和安装

（1）下载地址和版本下载地址：Releases alibaba/nacos GitHub 解压在没有中文及空格的文件夹 （2）启动nacos服务在bin目录下,打开命令行,输入启动命令：sh startup.sh -m standalone - Linux/Unix/Mac …...

编程日记 2024/3/20 8:43:08

5步解决Windows游戏手柄兼容问题：DS4Windows完全配置指南

5步解决Windows游戏手柄兼容问题：DS4Windows完全配置指南【免费下载链接】DS4Windows Like those other ds4tools, but sexier 项目地址: https://gitcode.com/gh_mirrors/ds/DS4Windows 还在为心爱的PlayStation手柄无法在PC上使用而烦恼吗？当你…...

编程新知 2026/4/21 9:09:55

NVIDIA Profile Inspector深度解析：高级显卡配置文件管理架构与性能调优实战

NVIDIA Profile Inspector深度解析：高级显卡配置文件管理架构与性能调优实战【免费下载链接】nvidiaProfileInspector 项目地址: https://gitcode.com/gh_mirrors/nv/nvidiaProfileInspector NVIDIA Profile Inspector是一款面向技术专家和游戏发烧友的专业…...

编程新知 2026/4/21 8:21:32