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

HTML详解连载（1）

news 2025/10/8 22:43:39

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

OpenLayers 可视化之热力图

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 热力图&#xff08;Heatmap&#xff09;又叫热点图&#xff0c;是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

编程新知 2025/9/25 23:02:22

多模态2025：技术路线“神仙打架”，视频生成冲上云霄

文&#xff5c;魏琳华 编&#xff5c;王一粟 一场大会&#xff0c;聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中&#xff0c;汇集了学界、创业公司和大厂等三方的热门选手&#xff0c;关于多模态的集中讨论达到了前所未有的热度。其中&#xff0c;…...

编程新知 2025/10/7 17:20:20

C++实现分布式网络通信框架RPC(3)--rpc调用端

目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中&#xff0c;我们已经大致实现了rpc服务端的各项功能代…...

编程新知 2025/10/5 9:18:27

iOS 26 携众系统重磅更新，但“苹果智能”仍与国行无缘

美国西海岸的夏天&#xff0c;再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至&#xff0c;这不仅是开发者的盛宴&#xff0c;更是全球数亿苹果用户翘首以盼的科技春晚。今年&#xff0c;苹果依旧为我们带来了全家桶式的系统更新&#xff0c;包括 iOS 26、iPadOS 26…...

编程新知 2025/10/7 12:23:01

第一篇：Agent2Agent (A2A) 协议——协作式人工智能的黎明

AI 领域的快速发展正在催生一个新时代&#xff0c;智能代理&#xff08;agents&#xff09;不再是孤立的个体&#xff0c;而是能够像一个数字团队一样协作。然而&#xff0c;当前 AI 生态系统的碎片化阻碍了这一愿景的实现&#xff0c;导致了“AI 巴别塔问题”——不同代理之间…...

编程新知 2025/9/28 3:30:31

微信小程序云开发平台MySQL的连接方式

注&#xff1a;微信小程序云开发平台指的是腾讯云开发 先给结论&#xff1a;微信小程序云开发平台的MySQL&#xff0c;无法通过获取数据库连接信息的方式进行连接&#xff0c;连接只能通过云开发的SDK连接&#xff0c;具体要参考官方文档&#xff1a; 为什么&#xff1f; 因为…...

编程新知 2025/9/29 20:53:11

uniapp中使用aixos 报错

问题&#xff1a; 在uniapp中使用aixos&#xff0c;运行后报如下错误&#xff1a; AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...

编程新知 2025/10/4 1:16:44

【Java学习笔记】BigInteger 和 BigDecimal 类

BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点&#xff1a;传参类型必须是类对象 一、BigInteger 1. 作用&#xff1a;适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...

编程新知 2025/10/4 17:23:01

C++.OpenGL （14/64）多光源（Multiple Lights）

多光源（Multiple Lights） 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...

编程新知 2025/6/11 3:15:20

jmeter聚合报告中参数详解

sample、average、min、max、90%line、95%line,99%line、Error错误率、吞吐量Thoughput、KB/sec每秒传输的数据量 sample&#xff08;样本数&#xff09; 表示测试中发送的请求数量&#xff0c;即测试执行了多少次请求。 单位&#xff0c;以个或者次数表示。 示例&#xff1a;…...

编程新知 2025/9/22 12:41:30