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

HTML认知

news 2025/12/15 12:58:49

HTML认知

文章目录

  • HTML认知
    • 语法规范
      • 注释
      • 标签组成和关系
      • 标签的关系
    • 标签学习
      • 排版系列标签
        • **标题标签**
        • **段落标签**
        • 换行标签
        • 水平线标签
      • 文本格式化标签
      • 媒体标签
        • 图片标签
          • src 目标图片的路径
          • alt 替换文本
          • title 图片的标题
          • width 宽度 / height 高度
        • 路径
          • 绝对路径
          • 相对路径（常用）
            • 同级目录
            • 下级目录
            • 上级目录
        • 音频标签
        • 视频标签
      • 链接标签
        • 链接标签
        • 链接标签的target属性
    • 语法规范
      • 注释
      • 标签组成和关系
      • 标签的关系
    • 标签学习
      • 排版系列标签
        • **标题标签**
        • **段落标签**
        • 换行标签
        • 水平线标签
      • 文本格式化标签
      • 媒体标签
        • 图片标签
          • src 目标图片的路径
          • alt 替换文本
          • title 图片的标题
          • width 宽度 / height 高度
        • 路径
          • 绝对路径
          • 相对路径（常用）
            • 同级目录
            • 下级目录
            • 上级目录
        • 音频标签
        • 视频标签
      • 链接标签
        • 链接标签
        • 链接标签的target属性

语法规范

注释

光标选住Ctrl+/

标签组成和关系

image-20230221184132747

构成说明：

  1. 标签由< > / 英文单词或字母组成，并且把标签中的<>包括起来的英文单词或字母称为标签名
  2. 常见标签由两部分组成，称之为 双标签，前部分叫 开始标签 ，后部分叫 结束标签。
  3. 少数标签由一部分组成，我们称之为：单标签，自成一体。

标签的关系

  • 嵌套关系（父子

  • 并列关系（兄弟

标签学习

排版系列标签

标题标签

代码：

    <h1>1级标题</h1><h2>2级标题</h2><h3>3级标题</h3><h4>4级标题</h4><h5>5级标题</h5><h6>6级标题</h6>

选中<h6>中的数字6，按Ctrl+D，可以选中前后标签中的数字，可以直接修改

特点：

  • 文字都有加粗
  • 文字都有变大，并且从h1到h6文字逐渐变小
  • 独占一行

***注意点：**h1标签对于网页尤为重要，开发中有特定的使用场景，如：新闻标签，网页的logo部分

段落标签

代码：

<p>段落标签内容</p>

特点：

  • 段落之间存在间隙
  • 独占一行

换行标签

代码：br

  • 单标签
  • 让文字强制换行

水平线标签

代码：<hr>

  • 单标签
  • 在页面中现实一条水平线

文本格式化标签

文字加粗、下划线、倾斜、删除线

标签说明
b加粗
u下划线
i倾斜
s删除线
推荐用下一组 语义更强
标签说明
strong加粗
ins下划线
em倾斜
del删除线

媒体标签

图片标签

代码：<img src="" alt="">

  • 单标签
  • img标签需要展示对应的效果，需要借助标签的属性进行设置。

image-20230221194500522

注意点：

  • 标签的属性写在开始标签内部
  • 标签上可以同时存在多个属性
  • 属性之间以空格隔开
  • 标签名与属性之间必须以空格隔开
  • 属性之间没有顺序之分
src 目标图片的路径
  • 当前网页和目标图片在 同一个文件夹中，路径直接写在目标图片的名字即可（包括后缀名）

image-20230221195532239

./表示在当前文件夹中

alt 替换文本

  • 当图片加载失败时，才显示alt的文本

  • 当图片加载成功时，不会显示alt的文本

image-20230221195934358

title 图片的标题
  • 当鼠标悬停时，才会显示的文本

注意点：

  • title属性不仅仅可以用于图片标签，还可以用于其他标签

image-20230221200133263

width 宽度 / height 高度
  • 如果只设置width或height中的一个，另一个没设置的会自动的等比例缩放（此时图片不会变形）
  • 如果同时设置了width和height两个，若设置不当此时图片可能会变形

image-20230221201322204

所以width和height只需给出一个属性就行。

image-20230221201628661

路径

绝对路径

指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径

例如：

  • 盘符开头：D:\day01\images\1.jpg
  • 完整的网络地址：https://www.itcast.cn/2018czgw/images/logo.gif（了解）
相对路径（常用）

概念：

  • 当前文件：当前的html网页
  • 目标文件：要找到的图片

相对路径：从当前文件夹开始出发找目标文件的过程

相对路径分类：

  • 同级目录
  • 下级目录
  • 上级目录
同级目录

即当前文件和目标文件在同一目录中

代码：直接写目标文件的名字即可

  • 方法一：<img src="目标图片.gif">
  • 方法二：<img src="./目标图片.gif">

VSC 快捷操作：直接敲 ./后，会自动提示同级目录中有哪些文件，直接选择即可！

下级目录

下级目录：目标文件在下级目录中

代码：

  1. 先知道在哪个文件夹里面→文件夹名字
  2. 进入文件夹→/
  3. 进入后，直接写文件名字
image-20230221212314589

VS Code快捷操作：直接敲./后，会自动提示当前目录下有哪些文件夹，直接一层层选择即可

上级目录

代码：image-20230221212630697

VS Code快捷操作：直接敲…/后，会自动提示上级目录下有文件，直接选择即可

音频标签

代码：<audio src="./music.mp3" controls></audio>

image-20230221213413170

音频标签目前支持三种格式：MP3、Wav、Ogg

视频标签

代码：<video src="video.mp4" controls></video>

image-20230221213650845

视频标签目前支持三种格式：MP4 、WebM 、Ogg

链接标签

链接标签

代码：<a href="./目标页面。html">超链接</a>

  • 如果需要a标签点击之后去指定页面，需要设置a标签的href属性

href属性：跳到地址 既可以是外部链接，也可以是内部链接

当网站开发初期，我们还不知道跳转地址的时候，href的值可以书写为#(空链接)

链接标签的显示特点（了解）

  • a标间默认字体有下划线
  • a标签从未点击过，默认文字显示蓝色
  • a标签点击过后，文字显示为紫色（清楚浏览器历史记录为可恢复蓝色）

链接标签的target属性

target为目标网页的打开形式

image-20230221234927649

image-20230221234940733

[# HTML认知

语法规范

注释

光标选住Ctrl+/

标签组成和关系

image-20230221184132747

构成说明：

  1. 标签由< > / 英文单词或字母组成，并且把标签中的<>包括起来的英文单词或字母称为标签名
  2. 常见标签由两部分组成，称之为 双标签，前部分叫 开始标签 ，后部分叫 结束标签。
  3. 少数标签由一部分组成，我们称之为：单标签，自成一体。

标签的关系

  • 嵌套关系（父子

  • 并列关系（兄弟

标签学习

排版系列标签

标题标签

代码：

    <h1>1级标题</h1><h2>2级标题</h2><h3>3级标题</h3><h4>4级标题</h4><h5>5级标题</h5><h6>6级标题</h6>

选中<h6>中的数字6，按Ctrl+D，可以选中前后标签中的数字，可以直接修改

特点：

  • 文字都有加粗
  • 文字都有变大，并且从h1到h6文字逐渐变小
  • 独占一行

***注意点：**h1标签对于网页尤为重要，开发中有特定的使用场景，如：新闻标签，网页的logo部分

段落标签

代码：

<p>段落标签内容</p>

特点：

  • 段落之间存在间隙
  • 独占一行

换行标签

代码：br

  • 单标签
  • 让文字强制换行

水平线标签

代码：<hr>

  • 单标签
  • 在页面中现实一条水平线

文本格式化标签

文字加粗、下划线、倾斜、删除线

标签说明
b加粗
u下划线
i倾斜
s删除线
推荐用下一组 语义更强
标签说明
:----::----:
strong加粗
ins下划线
em倾斜
del删除线

媒体标签

图片标签

代码：<img src="" alt="">

  • 单标签
  • img标签需要展示对应的效果，需要借助标签的属性进行设置。

image-20230221194500522

注意点：

  • 标签的属性写在开始标签内部
  • 标签上可以同时存在多个属性
  • 属性之间以空格隔开
  • 标签名与属性之间必须以空格隔开
  • 属性之间没有顺序之分
src 目标图片的路径
  • 当前网页和目标图片在 同一个文件夹中，路径直接写在目标图片的名字即可（包括后缀名）

image-20230221195532239

./表示在当前文件夹中

alt 替换文本

  • 当图片加载失败时，才显示alt的文本

  • 当图片加载成功时，不会显示alt的文本

image-20230221195934358

title 图片的标题
  • 当鼠标悬停时，才会显示的文本

注意点：

  • title属性不仅仅可以用于图片标签，还可以用于其他标签

image-20230221200133263

width 宽度 / height 高度
  • 如果只设置width或height中的一个，另一个没设置的会自动的等比例缩放（此时图片不会变形）
  • 如果同时设置了width和height两个，若设置不当此时图片可能会变形

image-20230221201322204

所以width和height只需给出一个属性就行。

image-20230221201628661

路径

绝对路径

指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径

例如：

  • 盘符开头：D:\day01\images\1.jpg
  • 完整的网络地址：https://www.itcast.cn/2018czgw/images/logo.gif（了解）
相对路径（常用）

概念：

  • 当前文件：当前的html网页
  • 目标文件：要找到的图片

相对路径：从当前文件夹开始出发找目标文件的过程

相对路径分类：

  • 同级目录
  • 下级目录
  • 上级目录
同级目录

即当前文件和目标文件在同一目录中

代码：直接写目标文件的名字即可

  • 方法一：<img src="目标图片.gif">
  • 方法二：<img src="./目标图片.gif">

VSC 快捷操作：直接敲 ./后，会自动提示同级目录中有哪些文件，直接选择即可！

下级目录

下级目录：目标文件在下级目录中

代码：

  1. 先知道在哪个文件夹里面→文件夹名字
  2. 进入文件夹→/
  3. 进入后，直接写文件名字
image-20230221212314589

VS Code快捷操作：直接敲./后，会自动提示当前目录下有哪些文件夹，直接一层层选择即可

上级目录

代码：image-20230221212630697

VS Code快捷操作：直接敲…/后，会自动提示上级目录下有文件，直接选择即可

音频标签

代码：<audio src="./music.mp3" controls></audio>

image-20230221213413170

音频标签目前支持三种格式：MP3、Wav、Ogg

视频标签

代码：<video src="video.mp4" controls></video>

image-20230221213650845

视频标签目前支持三种格式：MP4 、WebM 、Ogg

链接标签

链接标签

代码：<a href="./目标页面。html">超链接</a>

  • 如果需要a标签点击之后去指定页面，需要设置a标签的href属性

href属性：跳到地址 既可以是外部链接，也可以是内部链接

当网站开发初期，我们还不知道跳转地址的时候，href的值可以书写为#(空链接)

链接标签的显示特点（了解）

  • a标间默认字体有下划线
  • a标签从未点击过，默认文字显示蓝色
  • a标签点击过后，文字显示为紫色（清楚浏览器历史记录为可恢复蓝色）

链接标签的target属性

target为目标网页的打开形式

image-20230221234927649

image-20230221234940733

思维导图总结.XMind

相关文章：

HTML认知

HTML认知 文章目录HTML认知语法规范注释标签组成和关系标签的关系标签学习排版系列标签**标题标签****段落标签**换行标签水平线标签文本格式化标签媒体标签图片标签src 目标图片的路径alt 替换文本title 图片的标题width 宽度 / height 高度路径绝对路径相对路径&#xff08;常…...

编程日记 2023/3/2 16:06:36

全流程基于最新导则下的生态环境影响评价技术方法及图件制作与案例实践

根据最新生态环境影响评价导则&#xff0c;结合生态环评内容庞杂、综合性强的特点&#xff0c;以既包括陆域、又包括水域的项目为主要案例&#xff0c;对生态环评的具体流程及所需内容进行系统阐述。利用Rstudio、Fragstats等软件分析计算生态环评中所需各种指数&#xff0c;利…...

编程日记 2023/3/2 16:05:31

【Spring】Spring缓存注解@Cacheable、@CacheEvict、@CachePut使

文章目录1 基于注解的支持1.1 Cacheable1.1.1 value属性指定Cache名称1.1.2 使用key属性自定义key1.1.3 condition属性指定发生的条件1.2 CachePut1.3 CacheEvict1.3.1 allEntries属性1.3.2 beforeInvocation属性1.4 Caching1.5 使用自定义注解2 配置Spring对Cache的支持2.1 声…...

编程日记 2023/3/2 16:04:25

学了很久python却什么都做不了？这个方法一定要试试

很多人学了两三个月的python却什么都做不了&#xff0c;但有的人只学了不到一个月的时间&#xff0c;就可以开始自己做项目或者接私活&#xff0c;这是为什么&#xff1f; 作为20年码龄的老程序员&#xff0c;龙叔我觉得除了内在原因外&#xff0c;学习资源占据着大头。拥有好的…...

编程日记 2023/3/2 16:03:20

SiC MOSFET驱动电压的分析

SiC MOSFET驱动电压的分析 tips:资料来自富昌电子&#xff0c;及各个模块数据手册。 1.常见的Vgs与Vgs(th)&#xff0c;以及对SiC MOSFET应用的影响 驱动电压Vgs和栅极电压阈值Vgs(th)关系到SiC MOSFET在应用过程中的可靠性&#xff0c;功率损耗(导通电阻)&#xff0c;以及驱…...

编程日记 2023/3/2 16:02:16

Python爬虫之Scrapy框架爬虫实战

Python爬虫中Scrapy框架应用非常广泛&#xff0c;经常被人用于属于挖掘、检测以及自动化测试类项目&#xff0c;为啥说Scrapy框架作为半成品我们又该如何利用好呢 &#xff1f;下面的实战案例值得大家看看。 目录&#xff1a; 1、Scrapy框架之命令行 2、项目实现 Scrapy框架…...

编程日记 2023/3/2 16:01:09

基于DSP的三相开关霍尔永磁同步电机控制

0 前言 本文本应该是一篇 记录我使用DSP28377D控制一个基于三相开关霍尔传感器的高速永磁同步电机全过程的长文&#xff0c;但大部分零散的知识点我都已经写成单独的博客了&#xff0c;所以本文更像是一个知识框架的梳理。本文最终目的是实现高速PMSM的电流-速度双闭环&#x…...

编程日记 2023/3/2 16:00:05

Vue和React的对比

1、响应式原理不同 vue&#xff1a;vue会遍历data数据对象&#xff0c;使用Object.definedProperty()将每个属性都转换为getter和setter&#xff0c;每个Vue组件实例都有一个对应的watcher实例&#xff0c;在组件初次渲染的时候会记录组件用到了那些数据&#xff0c;当数据发生…...

编程日记 2023/3/2 15:58:59

移动进阶之高效开发

响应式布局 媒体查询的语法 /* 4.媒体特性 *//* width / max-width / min-width *//* -webkit-device-pixel-ratio / -webkit-max-device-pixel-ratio / -webkit-min-pixel-ratio *//* orientation: landscape / portrait *//* media screen and (min-width: 320px) {body {b…...

编程日记 2023/3/2 15:57:50

用户手册：遥测服务之推送至 TDengine

创建TelemetryService Yaml 文件 apiVersion: shifu.edgenesis.io/v1alpha1 kind: TelemetryService metadata:name: push-endpoint-1namespace: devices spec:telemetrySeriveEndpoint: http://telemetryservice.shifu-service.svc.cluster.localserviceSettings:SQLSetting:…...

编程日记 2023/3/2 15:56:41

软件测试的主要工作内容是什么

平时说起程序员印象中大都是做Java、做前端、做后端&#xff0c;用着非常晦涩难懂的语言。在电脑前哐哐哐&#xff0c;没一会满屏代码显现出来。然而程序员并不全是印象中这样&#xff0c;还有一部分&#xff1a;他们不常写代码&#xff0c;主要去检查代码&#xff0c;是不是出…...

编程日记 2023/3/2 15:55:35

【云原生kubernetes】k8s中job与cronjob使用详解

一、前言 job&#xff0c;顾名思义就是任务&#xff0c;job的概念在很多框架中都有&#xff0c;而且实际业务场景中也使用非常广泛&#xff0c;比如大家熟悉的hadoop&#xff0c;客户端可以向集群提交一个job&#xff0c;然后集群根据一定的调度策略来处理这个job&#xff1b; …...

编程日记 2023/3/2 15:54:26

js-cookie的使用

实际上&#xff0c;cookie本身并不是用来做服务器存储的&#xff0c;关于jscookie存储的理解&#xff0c;可以参考我记录的js的数据存储专栏。 Cookie 是一些数据, 存储于客户端电脑上的文本文件中&#xff0c;其中记录了用户的用户名、密码、浏览的网页、停留的时间等等信息。…...

编程日记 2023/3/2 15:53:21

c++11 关键字 override 使用

写在最前。。。 请支持原创~~ 1. 功能 用在类中成员函数声明的地方&#xff0c;用以标记一个virtual function 是重写另一个 virtual function&#xff1b; 2. 语法 只声明时&#xff0c;override 紧跟参数的右括号&#xff0c;如果是纯虚函数&#xff0c;override 会出现在…...

编程日记 2023/3/2 15:52:13

从16K跳槽到20K，最后算下来年薪却还降了，我笑了····

跳槽时薪资涨了 4000&#xff0c;但年薪总包算下来反而变少了&#xff0c;这是怎么回事&#xff1f; 上周&#xff0c;我星球里一个同学就遇到了这么一个问题&#xff0c;薪资涨了、总包降了&#xff0c;而且谈薪时把自己坑了。 作为一个案例&#xff0c;我觉得对很多人可能会…...

编程日记 2023/3/2 15:51:00

线性表 链表表示

初识链表 用一组物理位置任意的存储单元来存放线性表的数据元素。这组存储单元既可以是连续的&#xff0c;也可以是不连续的&#xff0c;甚至是零散分布在内存中的任意位置上的。链表中元素的逻辑次序和物理次序不一定相同。 在存储自己内容的同时也存储下一个元素的地址。存…...

编程日记 2023/3/2 15:49:54

面试题JavaScript篇（二）

目录 一、内存泄露 1、是什么 2、导致的原因 二、垃圾回收机制的策略 三、浅拷贝和深拷贝 1、浅拷贝 .slice() ...展开运算符 Object.assign(目标对象, 被复制的对象) ...展开运算符 2、深拷贝 structuredClone() 浏览器提供 JSON.parse(JSON.stringify(obj)) …...

编程日记 2023/3/2 15:47:35

项目管理工具dhtmlxGantt甘特图入门教程（十五）：从MS项目导入/导出（下）

这篇文章给大家讲解dhtmlxGantt请求大文件导入的大小限制。 dhtmlxGantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表&#xff0c;可满足应用程序的所有需求&#xff0c;是完善的甘特图图表库 DhtmlxGantt正版试用下载&#xff08;qun 764148812&#xff09;https:…...

编程日记 2023/3/2 15:46:28

2023 年 6 大智能合约语言

如果你想成为一名 Web3 开发人员&#xff0c;你需要知道如何编写智能合约&#xff0c;智能合约是所有 Web3 应用程序的支柱。 简而言之&#xff0c;智能合约是在区块链网络上部署和执行的计算机程序&#xff0c;提供确定性保证&#xff0c;使多方能够达成一致的、防篡改的结果…...

编程日记 2023/3/2 15:45:19

家用洗地机哪款最好用?全球洗地机十大品牌

近年来&#xff0c;智能家用电器洗地机已经融入到我们生活中了&#xff0c;成为最受欢迎的清洁工具了&#xff0c;家用洗地机吸拖洗一体&#xff0c;不用先扫后拖那么麻烦&#xff0c;只需轻轻一推&#xff0c;就能把扫地、拖地、擦地的活全干了&#xff0c;操作简单&#xff0…...

编程日记 2023/3/2 15:44:05

椭圆曲线密码学(ECC)

一、ECC算法概述 椭圆曲线密码学&#xff08;Elliptic Curve Cryptography&#xff09;是基于椭圆曲线数学理论的公钥密码系统&#xff0c;由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA&#xff0c;ECC在相同安全强度下密钥更短&#xff08;256位ECC ≈ 3072位RSA…...

编程新知 2025/10/1 22:26:06

Spring Boot 实现流式响应（兼容 2.7.x）

在实际开发中&#xff0c;我们可能会遇到一些流式数据处理的场景&#xff0c;比如接收来自上游接口的 Server-Sent Events&#xff08;SSE&#xff09; 或 流式 JSON 内容&#xff0c;并将其原样中转给前端页面或客户端。这种情况下&#xff0c;传统的 RestTemplate 缓存机制会…...

编程新知 2025/8/11 8:18:44

深入浅出：JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出&#xff1a;JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中&#xff0c;随机数的生成看似简单&#xff0c;却隐藏着许多玄机。无论是生成密码、加密密钥&#xff0c;还是创建安全令牌&#xff0c;随机数的质量直接关系到系统的安全性。Jav…...

编程新知 2025/10/8 4:56:09

将对透视变换后的图像使用Otsu进行阈值化，来分离黑色和白色像素。这句话中的Otsu是什么意思？

Otsu 是一种自动阈值化方法&#xff0c;用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理&#xff0c;能够自动确定一个阈值&#xff0c;将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

编程新知 2025/10/11 3:56:08

DBAPI如何优雅的获取单条数据

API如何优雅的获取单条数据 案例一 对于查询类API&#xff0c;查询的是单条数据&#xff0c;比如根据主键ID查询用户信息&#xff0c;sql如下&#xff1a; select id, name, age from user where id #{id}API默认返回的数据格式是多条的&#xff0c;如下&#xff1a; {&qu…...

编程新知 2025/12/14 11:16:51

SpringCloudGateway 自定义局部过滤器

场景&#xff1a; 将所有请求转化为同一路径请求&#xff08;方便穿网配置&#xff09;在请求头内标识原来路径&#xff0c;然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

编程新知 2025/12/15 1:25:04

【HTTP三个基础问题】

面试官您好&#xff01;HTTP是超文本传输协议&#xff0c;是互联网上客户端和服务器之间传输超文本数据&#xff08;比如文字、图片、音频、视频等&#xff09;的核心协议&#xff0c;当前互联网应用最广泛的版本是HTTP1.1&#xff0c;它基于经典的C/S模型&#xff0c;也就是客…...

编程新知 2025/12/10 6:18:55

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

编程新知 2025/12/9 1:41:13

DeepSeek 技术赋能无人农场协同作业：用 AI 重构农田管理 “神经网”

目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...

编程新知 2025/9/24 13:35:36

Python ROS2【机器人中间件框架】 简介

销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...

编程新知 2025/8/17 7:11:57