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

HTML详解连载（1）

news 2026/2/7 13:05:23

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

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间&#xff0c; 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点&#xff0c;不需要开启数据库闪回。…...

编程新知 2026/1/14 22:12:47

css实现圆环展示百分比，根据值动态展示所占比例

代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...

编程新知 2026/2/5 4:28:28

边缘计算医疗风险自查APP开发方案

核心目标：在便携设备（智能手表/家用检测仪）部署轻量化疾病预测模型，实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

编程新知 2026/1/28 10:02:54

在rocky linux 9.5上在线安装 docker

前面是指南&#xff0c;后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...

编程新知 2025/7/27 10:03:12

使用van-uploader 的UI组件，结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

编程新知 2026/1/31 2:37:22

学习STC51单片机31（芯片为STC89C52RCRC）OLED显示屏1

每日一言 生活的美好&#xff0c;总是藏在那些你咬牙坚持的日子里。 硬件&#xff1a;OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写&#xff0c;"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

编程新知 2026/1/30 4:16:26

2025 后端自学UNIAPP【项目实战：旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http…...

编程新知 2026/1/29 11:40:13

视频行为标注工具BehaviLabel（源码+使用介绍+Windows.Exe版本）

前言&#xff1a; 最近在做行为检测相关的模型&#xff0c;用的是时空图卷积网络&#xff08;STGCN&#xff09;&#xff0c;但原有kinetic-400数据集数据质量较低&#xff0c;需要进行细粒度的标注&#xff0c;同时粗略搜了下已有开源工具基本都集中于图像分割这块&#xff0c…...

编程新知 2026/2/6 5:04:18

20个超级好用的 CSS 动画库

分享 20 个最佳 CSS 动画库。 它们中的大多数将生成纯 CSS 代码&#xff0c;而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库&#xff0c;可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画&#xff0c;可以包含在你的网页或应用项目中。 3.An…...

编程新知 2026/1/25 11:46:42

vulnyx Blogger writeup

信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面&#xff0c;gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress&#xff0c;说明目标所使用的cms是wordpress&#xff0c;访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...

编程新知 2026/1/29 5:24:50