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

HTML详解连载（1）

news 2026/2/7 16:09:25

HTML详解连载（1）

    • HTML
      • 定义
      • HTML 超文本标记语言
      • 标签语法
      • 注意
      • 拓展
    • HTML基本骨架
      • 解释
      • VS Code 快速生成骨架：
      • 标签的关系
        • 父子关系（嵌套关系）
        • 兄弟关系（并列关系）
      • 代码格式
      • 注释
    • 标题标签
    • 标签名:h1-h6(双标签)
      • 经验：
    • 段落标签
      • 标签名：p(双标签)
      • 显示特点：独占一行、段落之间存在间隙
    • 换行和水平线标签
    • 文本格式化标签
      • 作用：
    • 图像标签-基本使用
      • 强调
      • 图像标签-属性
      • 属性名=“属性值”
    • 路径
      • 路径分类：
        • 相对路径
          • 强调
        • 绝对路径
    • 注释

HTML

定义

Hyper TextMarkup Language。
在这里插入图片描述

HTML 超文本标记语言

超文本是链接
标记也叫标签，带尖括号的文本

标签语法

<strong> 需要加粗的文字 </strong>
<strong>--开始标签
</strong>--结束标签

注意

标签成对出现，中间包裹内容
<>里面放英文字母(标签名)
结束标签比开始标签多/

拓展

双标签：成对出现的标签
单标签：只有开始标签，没有结束标签
<br>:换行
<hr>:水平线

HTML基本骨架

	<html><head><title>网页标题</title>	</head><body>网页主体内容</body></html>

在这里插入图片描述

解释

html:整个网页
head:网页头部，用来存放给浏览器看的信息，例如CSS
title:网页标题
body:网页主体，用来存放给用户看的信息，例如图片，文字

VS Code 快速生成骨架：

在HTML文件(.html)中，!(英文)配合Enter/Tab

标签的关系

作用：明确标签的书写位置，让代码格式更整齐

父子关系（嵌套关系）

	<html><head></head></html>

兄弟关系（并列关系）

<head></head>
<body></body>

代码格式

父子关系：子集标签换行且缩进
兄弟关系：兄弟标签换行要对齐

注释

注释中...是注释内容

快捷键: Ctrl + /

在这里插入图片描述

标题标签

一般用在新闻标题、文章标题、网页区域名称、产品名称等等。

标签名:h1-h6(双标签)

显示特点：文字加粗、字号逐渐减小、独占一行（换行）

经验：

h1标签再一个网页中只能用一次，用来放新闻标题或者网页的logo
h2-h6没有使用的限制

段落标签

一般用在新闻段落，文章段落，产品描述信息等。

标签名：p(双标签)

显示特点：独占一行、段落之间存在间隙

换行和水平线标签

  换行<br>(单标签)水平线<hr>(单标签)

文本格式化标签

作用：

为文本添加特殊格式，以突出重点。常见的文本格式：加粗、倾斜、下划线、删 除线等

  效果		标签名1		标签名2加粗		strong		b倾斜		em			i下划线	ins			u删除线	del			s

strong em ins del标签自带强调含义（语义）。
在这里插入图片描述

图像标签-基本使用

作用：在网页中插入图片

<img src=”图片的URL”>

强调

src用于指定图像的位置和名称，是的必须属性。

图像标签-属性

属性作用说明
alt替换文本图片无法显示的时候显示文字，可以不影响图片浏览
title提示文本鼠标悬停再图片上的时候显示的文字
width图片的宽度值为数字，没有单位 默认等比缩放
height图片的高度值为数字，没有单位

属性名=“属性值”

属性写在尖括号里面，标签名后面，标签名和属性之间用空格隔开，不区分先后顺序

路径

路径值得是查找文件是，从起点到终点经历的路线。

路径分类：

相对路径

从当前文件位置出发查找目标文件

强调

/表示进入莫格文件夹里面
.表示当前文件所在文件夹
…表示当前文件的上一个文件夹

绝对路径

从盘符出发查找目标文件
Windows默认是\，其他系统是/

注释

自己通过黑马课程并通过自己整合其他资料总结的笔记，希望能帮助大家。

相关文章：

HTML详解连载（1）

HTML详解连载&#xff08;1&#xff09; HTML定义HTML 超文本标记语言标签语法注意拓展 HTML基本骨架解释VS Code 快速生成骨架&#xff1a;标签的关系父子关系&#xff08;嵌套关系&#xff09;兄弟关系&#xff08;并列关系&#xff09; 代码格式注释 标题标签标签名:h1-h6(双…...

编程日记 2023/8/12 10:07:17

最新版本2023UI千月影视APP源码 开源完美版前后端完美匹配 后端基于ThinkPHP框架

最新版本的2023UI千月影视APP源码是一款开源的完美版应用程序&#xff0c;具备前后端完美匹配的特点。该应用的后端开发基于ThinkPHP框架&#xff0c;这是一个广泛使用的PHP开发框架&#xff0c;具有稳定性和安全性方面的优势。 2023UI千月影视APP是一款提供电影、电视剧、综艺…...

编程日记 2023/8/12 10:06:15

centos7安装Docker详细步骤（无坑版教程）

一、安装前必读 在安装 Docker 之前&#xff0c;先说一下配置&#xff0c;我这里是Centos7 Linux 内核&#xff1a;官方建议 3.10 以上&#xff0c;3.8以上貌似也可。 注意&#xff1a;本文的命令使用的是 root 用户登录执行&#xff0c;不是 root 的话所有命令前面要加 sudo…...

编程日记 2023/8/12 10:05:14

Python入门自学进阶-Web框架——39、redis、rabbitmq、git——2

RabbitMQ的exchange&#xff0c;即交换机有不同的类型&#xff1a; 1.direct Exchange(直接交换机) 匹配路由键&#xff0c;只有完全匹配消息才会被转发 2.Fanout Excange&#xff08;扇出交换机&#xff09; 将消息发送至所有的队列 3.Topic Exchange(主题交换机) 将路由按模…...

编程日记 2023/8/12 10:04:13

了解IL汇编跳转语句

il代码&#xff0c; .assembly extern mscorlib {}.assembly Test{.ver 1:0:1:0}.module test.exe.method static void main() cil managed{.maxstack 5.entrypointldstr "Enter First Number"call void [mscorlib]System.Console::WriteLine (string)call string …...

编程日记 2023/8/12 10:03:12

JVM运行时五大数据区域详解

前言&#xff1a; java虚拟机再执行Java程序的时候把它所拥有的内存区域划分了若干个数据区域。这些区域有着不同的功能&#xff0c;各司其职。这些区域不但功能不同&#xff0c;创建、销毁时间也不同。有些区域为线程私有&#xff0c;如&#xff1a;每个线程都有自己的程序计数…...

编程日记 2023/8/12 10:02:11

Vuex 使用教程

Vuex 各子模块的内部结构及作用 这是vuex的内部代码结构&#xff0c;所有的子模块都是一样的 state&#xff1a;存放数据状态&#xff1b; action&#xff1a;指派 mutation &#xff1b; mutation&#xff1a;修改state里面的状态&#xff1b; getter&#xff1a;侧重于对数据…...

编程日记 2023/8/12 10:01:10

springboot启动you will need to add ‘org.slf4j‘ to prefer-application-packages异常解决

摘自个人印象笔记2020-09-12内容&#xff1a;[https://app.yinxiang.com/fx/6c3c7d9d-d5e5-4e5b-b2a1-33d6f29c48a7](https://app.yinxiang.com/fx/6c3c7d9d-d5e5-4e5b-b2a1-33d6f29c48a7) 启动异常&#xff1a; Caused by: java.lang.IllegalArgumentException: LoggerFactory…...

编程日记 2023/8/12 10:00:08

云原生核心原则和特征

云原生&#xff08;Cloud Native&#xff09;是一种软件开发和部署方法论&#xff0c;旨在充分利用云计算的优势来构建和管理应用程序。云原生应用程序是专为在云环境中设计、构建和运行的应用程序。 以下是云原生的一些核心原则和特征&#xff1a; 微服务架构&#xff1a;云…...

编程日记 2023/8/12 9:59:08

【ElasticSearch入门】

目录 1.ElasticSearch的简介 2.用数据库实现搜素的功能 3.ES的核心概念 3.1 NRT(Near Realtime)近实时 3.2 cluster集群&#xff0c;ES是一个分布式的系统 3.3 Node节点&#xff0c;就是集群中的一台服务器 3.4 index 索引&#xff08;索引库&#xff09; 3.5 type类型 3.6 doc…...

编程日记 2023/8/12 9:58:06

SQL | 注释

2-注释 2.1-单行注释 select prod_name -- 这是一条行内注释 from products; 使用两个连字符(-- ) 放在行内&#xff0c;两个连字符后的内容即为注释内容。 # 这是一条注释 select prod_name from products; 这种注释方式可能有些数据库不支持&#xff0c;所以使用前应该…...

编程日记 2023/8/12 9:57:05

oi知识表+NOIP提高组算法及算法思想总结

&#xfeff;算法及算法思想总结 │ By lib │ ├暴力 ├模拟 ├递归及递推:数位统计类 ├构造 ▼├排序算法 │ ├冒泡排序 │ ├选择排序 │ ├计数排序 │ ├基数排序 │ ├插入排序 │ ├归并排序 │ ├快速排序 │…...

编程日记 2023/8/12 9:56:04

【mysql】实现递归查询

mysql实现递归查询的方法&#xff1a;首先创建表&#xff0c;并初始化数据&#xff1b;然后向下递归&#xff0c;利用find_in_set()函数和group_concat()函数、with recursive实现递归查询。 mysql实现递归查询的方法&#xff1a; 1、创建表 DROP TABLE IF EXISTS t_areainf…...

编程日记 2023/8/12 9:55:03

JUC并发编程之原子类

目录 1. 什么是原子操作 1.1 原子类的作用 1.2 原子类的常见操作 原子类的使用注意事项 并发编程是现代计算机应用中不可或缺的一部分&#xff0c;而在并发编程中&#xff0c;处理共享资源的并发访问是一个重要的问题。为了避免多线程访问共享资源时出现竞态条件&#xff0…...

编程日记 2023/8/12 9:54:01

测试设计中隐藏的边界有哪些？

概述&#xff1a;边界值分析是测试设计一个稳定的部分&#xff0c;但是对黑盒测试人员来讲有时候边界并不是那么明显。这些不明显的边界被称作隐藏的边界。本文提供几个隐藏的边界的例子&#xff0c;还有一些以让隐藏边界显露来设计测试计划的要点方法。 使用边界值分析和等价…...

编程日记 2023/8/12 9:53:00

领航优配：暑期旅游市场热度持续攀升，相关公司业绩有望持续释放

到发稿&#xff0c;海看股份涨停&#xff0c;中广天择、探路者、众信旅行等涨幅居前。 8月8日&#xff0c;在线旅行板块震动上涨&#xff0c;到发稿&#xff0c;海看股份涨停&#xff0c;中广天择、探路者、众信旅行等涨幅居前。 今年以来&#xff0c;国内旅行商场逐渐恢复。文…...

编程日记 2023/8/12 9:51:59

基于 CentOS 7 构建 LVS-DR 集群 及 配置nginx负载均衡

一、构建LVS-DR集群 1、主机规划 Node01&#xff1a;PC Node02&#xff1a;LVS Node03、Node04&#xff1a;Webserver 2、部署环境 2.1 在Node02上配置 2.1.1 安装ipvsadm管理软件按 [rootlocalhost ~]# yum install -y ipvsadm 2.1.2 配置VIP [rootlocalhost ~]# if…...

编程日记 2023/8/12 9:50:58

docker搭建在线Markdown服务器

1.安装docker 2.编写docker-compose.yml version: "3" services:database:image: postgres:11.6-alpineenvironment:- POSTGRES_USERcodimd- POSTGRES_PASSWORDchange_password- POSTGRES_DBcodimdvolumes:- "database-data:/var/lib/postgresql/data"re…...

编程日记 2023/8/12 9:49:57

打靶练习：WestWild 1.1（一个简单但不失优雅的Ubuntu靶机）

主机发现和nmap信息收集 //主机发现 sudo nmap -sn 192.168.226.0/24 //扫描整个C段//端口扫描//初步扫描 sudo nmap -sT --min-rate 10000 -p- 192.168.226.131 -oA nmapscan/ports //用TCP的三次握手&#xff0c;以速率10000扫描1-65535端口&#xff0c;扫描结果以全格式…...

编程日记 2023/8/12 9:48:56

【2.3】Java微服务：sentinel服务哨兵

✅作者简介&#xff1a;大家好&#xff0c;我是 Meteors., 向往着更加简洁高效的代码写法与编程方式&#xff0c;持续分享Java技术内容。 &#x1f34e;个人主页&#xff1a;Meteors.的博客 &#x1f49e;当前专栏&#xff1a;Java微服务 ✨特色专栏&#xff1a; 知识分享 &…...

编程日记 2023/8/12 9:47:53

conda相比python好处

Conda 作为 Python 的环境和包管理工具&#xff0c;相比原生 Python 生态&#xff08;如 pip 虚拟环境&#xff09;有许多独特优势&#xff0c;尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处&#xff1a; 一、一站式环境管理&#xff1a…...

编程新知 2025/11/29 6:54:19

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

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

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

day52 ResNet18 CBAM

在深度学习的旅程中&#xff0c;我们不断探索如何提升模型的性能。今天&#xff0c;我将分享我在 ResNet18 模型中插入 CBAM&#xff08;Convolutional Block Attention Module&#xff09;模块&#xff0c;并采用分阶段微调策略的实践过程。通过这个过程&#xff0c;我不仅提升…...

编程新知 2025/11/9 1:27:18

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中，用户注册、登录、修改密码等操作，都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输，在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

编程新知 2025/11/28 6:00:25

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用React Native…...

编程新知 2025/8/19 2:57:37

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

编程新知 2026/1/29 18:30:30

Java面试专项一-准备篇

一、企业简历筛选规则 一般企业的简历筛选流程&#xff1a;首先由HR先筛选一部分简历后&#xff0c;在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如&#xff1a;Boss直聘&#xff08;招聘方平台&#xff09; 直接按照条件进行筛选 例如&#xff1a…...

编程新知 2026/1/26 19:10:48

全面解析各类VPN技术：GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec&#xff1f; IPsec VPN 5.1 IPsec传输模式&#xff08;Transport Mode&#xff09; 5.2 IPsec隧道模式&#xff08;Tunne…...

编程新知 2025/11/3 0:44:41

【从零学习JVM|第三篇】类的生命周期(高频面试题)

前言&#xff1a; 在Java编程中&#xff0c;类的生命周期是指类从被加载到内存中开始&#xff0c;到被卸载出内存为止的整个过程。了解类的生命周期对于理解Java程序的运行机制以及性能优化非常重要。本文会深入探寻类的生命周期&#xff0c;让读者对此有深刻印象。 目录 ​…...

编程新知 2026/1/26 8:42:13

【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制

使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下&#xff0c;限制某个 IP 的访问频率是非常重要的&#xff0c;可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案&#xff0c;使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...

编程新知 2025/10/22 6:06:44