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

HTML 基础

news 2026/2/8 8:13:02

文章目录

    • 01-标签语法
      • 标签结构
    • 03-HTML骨架
    • 04-标签的关系
    • 05-注释
    • 06-标题标签
    • 07-段落标签
    • 08-换行和水平线
    • 09-文本格式化标签
    • 10-图像标签
      • 图像属性
    • 11-路径
      • 相对路径
      • 绝对路径
    • 12-超链接标签
    • 13-音频
    • 14-视频

01-标签语法

HTML 超文本标记语言——HyperText Markup Language。

  • 超文本：链接
  • 标记：标签，带尖括号的文本

标签结构

  • 标签要成对出现，中间包裹内容
  • <>里面放英文字母（标签名）
  • 结束标签比开始标签多 /
  • 标签分类：双标签和单标签
<strong>需要加粗的文字<strong>
<br>
<hr>

03-HTML骨架

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

提示

VS Code 可以快速生成骨架：在 HTML 文件（.html）中，!（英文）配合 Enter / Tab 键

04-标签的关系

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

  • 父子关系（嵌套关系）：子级标签换行且缩进（Tab键）

  • 兄弟关系（并列关系）：兄弟标签换行要对齐

05-注释

概念：注释是对代码的解释和说明，能够提高程序的可读性，方便理解、查找代码。

注释不会再浏览器中显示。

在 VS Code 中，添加 / 删除注释的快捷键：Ctrl + /

<!-- 我是 HTML 注释 -->

06-标题标签

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

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

显示特点：

  • 文字加粗
  • 字号逐渐减小
  • 独占一行（换行）

经验

  1. h1 标签在一个网页中只能用一次，用来放新闻标题或网页的 logo
  2. h2 ~ h6 没有使用次数的限制

07-段落标签

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

<p>段落</p>

显示特点：

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

08-换行和水平线

  • 换行：br
  • 水平线：hr
<br>
<hr>

09-文本格式化标签

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

    <strong>加粗</strong><em>倾斜</em><ins>下划线</ins><del>删除线</del>

效果：
在这里插入图片描述

提示：strong、em、ins、del 标签自带强调含义（语义）。

10-图像标签

作用：在网页中插入图片

<img  src="图片的 URL">

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

图像属性

属性作用说明
alt替换文本图片无法显示的时候显示的文字
title提示文本鼠标悬停在图片上面的时候显示的文字
width图片的宽度值为数字，没有单位
height图片的高度值为数字，没有单位

11-路径

概念：路径指的是查找文件时，从起点到终点经历的路线。

路径分类：

  • 相对路径：从当前文件位置出发查找目标文件
  • 绝对路径：从盘符出发查找目标文件
    • Windows 电脑从盘符出发
    • Mac 电脑从根目录出发

相对路径

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

特殊符号：

  • / 表示进入某个文件夹里面 → 文件夹名/
  • **. ** 表示当前文件所在文件夹 → ./
  • … 表示当前文件的上一级文件夹 → …/

绝对路径

查找方式：Windows 电脑从盘符出发；Mac 电脑从根目录（/）出发

<img  src="C:\images\mao.jpg">

提示

  1. Windows 默认是 \ ，其他系统是 /，建议统一写为 /
  2. 特殊的绝对路径 → 文件的在线网址：https://www.itheima.com/images/logo.png "，应用场景：网页底部友情链接

12-超链接标签

作用：点击跳转到其他页面。

<a href="https://www.baidu.com">跳转到百度</a>

href 属性值是跳转地址，是超链接的必须属性。

超链接默认是在当前窗口跳转页面，添加 target=“_blank” 实现新窗口打开页面。

拓展：开发初期，不确定跳转地址，则 href 属性值写为 #，表示空链接，页面不会跳转，在当前页面刷新一次。

<a href="https://www.baidu.com/">跳转到百度</a> <!-- 注意加上http或者https --><!-- 跳转到本地文件：相对路径查找 --> 
<!-- target="_blank" 新窗口跳转页面 --> 
<a href="./01-标签的写法.html" target="_blank">跳转到01-标签的写法</a><!-- 开发初期，不知道超链接的跳转地址，href属性值写#，表示空链接，不会跳转 -->
<a href="#">空链接</a>

13-音频

<audio src="音频的 URL"></audio>

常用属性

属性作用特殊说明
src（必须属性）音频URL支持格式：MP3、Ogg、Wav
controls显示音频控制面板
loog循环播放
autoplay自动播放

拓展：书写 HTML5 属性时，如果属性名和属性值相同，可以简写为一个单词

<!-- 在 HTML5 里面，如果属性名和属性值完全一样，可以简写为一个单词 -->
<audio src="./media/music.mp3" controls loop autoplay></audio>

14-视频

<video src="视频的 URL"></video>

常用属性

<!-- 在浏览器中，想要自动播放，必须有 muted（静音播放） 属性-->
<video src="./media/vue.mp4" controls loop muted autoplay></video>

相关文章：

HTML 基础

文章目录 01-标签语法标签结构 03-HTML骨架04-标签的关系05-注释06-标题标签07-段落标签08-换行和水平线09-文本格式化标签10-图像标签图像属性 11-路径相对路径绝对路径 12-超链接标签13-音频14-视频 01-标签语法 HTML 超文本标记语言——HyperText Markup Language。 超文本…...

编程日记 2024/1/1 14:37:29

大学物理II-作业1【题解】

1.【单选题】——考查高斯定理 下面关于高斯定理描述正确的是&#xff08;D &#xff09;。 A.高斯面上的电场强度是由高斯面内的电荷激发的 B.高斯面上的各点电场强度为零时&#xff0c;高斯面内一定没有电荷 C.通过高斯面的电通量为零时&#xff0c;高斯面上各点电场强度…...

编程日记 2024/1/1 14:36:28

Unity引擎有哪些优点

Unity引擎是一款跨平台的游戏引擎&#xff0c;拥有很多的优点&#xff0c;如跨平台支持、强大的工具和编辑器、灵活的脚本支持、丰富的资源库和强大的社区生态系统等&#xff0c;让他成为众多开发者选择的游戏开发引擎。下面我简单的介绍一下Unity引擎的优点。 跨平台支持 跨…...

编程日记 2024/1/1 14:35:27

【华为机试】2023年真题B卷（python）-猴子爬山

一、题目 题目描述&#xff1a; 一天一只顽猴想去从山脚爬到山顶&#xff0c;途中经过一个有个N个台阶的阶梯&#xff0c;但是这猴子有一个习惯&#xff1a; 每一次只能跳1步或跳3步&#xff0c;试问猴子通过这个阶梯有多少种不同的跳跃方式&#xff1f; 二、输入输出 输入描述…...

编程日记 2024/1/1 14:33:25

【Harmony OS - Stage应用模型】

基本概念 大类分为&#xff1a; Ability Module&#xff1a; 功能模块 、Library Module&#xff1a; 共享功能模块 编译时概念&#xff1a; Ability Module在编译时打包生成HAP&#xff08;Harmony Ability Package&#xff09;&#xff0c;一个应用可能会有多个HAP&#xf…...

编程日记 2024/1/1 14:32:24

Java 8 中的 Stream 轻松遍历树形结构！

可能平常会遇到一些需求&#xff0c;比如构建菜单&#xff0c;构建树形结构&#xff0c;数据库一般就使用父id来表示&#xff0c;为了降低数据库的查询压力&#xff0c;我们可以使用Java8中的Stream流一次性把数据查出来&#xff0c;然后通过流式处理&#xff0c;我们一起来看看…...

编程日记 2024/1/1 14:31:23

Openwrt修改Dropbear ssh root密码

使用ssh工具连接路由器 输入&#xff1a;passwd root 输入新密码 重复新密码 设置完成 rootImmortalWrt:~# passwd root Changing password for root New password:...

编程日记 2024/1/1 14:30:22

js 对象

js 对象定义 <!DOCTYPE html> <html> <body><h1>JavaScript 对象创建</h1><p id"demo1"></p> <p>new</p> <p id"demo"></p><script> // 创建对象&#xff1a; var persona {fi…...

编程日记 2024/1/1 14:29:21

【SpringBoot】常用注解

RequestBody&#xff1a;自动将请求体中的 json 数据转换为实体类对象。 这个例子凑巧传入的json属性键名和User键名一致&#xff0c;可以直接使用User实体类对象&#xff0c;如果键名不一致则需要用一个Map 类接收参数&#xff1a; PutMapping("/update")public R…...

编程日记 2024/1/1 14:27:20

【模拟电路】软件Circuit JS

一、模拟电路软件Circuit JS 二、Circuit JS软件配置 三、Circuit JS 软件 常见的快捷键 四、Circuit JS软件基础使用 五、Circuit JS软件使用讲解 欧姆定律电阻的串联和并联电容器的充放电过程电感器和实现理想超导的概念电容阻止电压的突变&#xff0c;电感阻止电流的突变LR…...

编程日记 2024/1/1 14:26:19

从入门到精通，30天带你学会C++【第十天：猜数游戏】

目录 Everyday English 前言 实战1——猜数游戏 综合指标 游玩方法 代码实现 最终代码 试玩时间 必胜策略 具体演示 结尾 Everyday English All good things come to those who wait. 时间不负有心人 前言 今天是2024年的第一天&#xff0c;新一年&#xff0c;新…...

编程日记 2024/1/1 14:25:18

使用ASP.NET MiniAPI 调试未匹配请求路径

本文将介绍如何在使用ASP.NET MiniAPI时调试未匹配到的请求路径。我们将详细讨论使用MapFallback方法、中间件等工具来解决此类问题。 1. 引言 ASP.NET MiniAPI是一个轻量级的Web API框架&#xff0c;它可以让我们快速地构建和部署RESTful服务。然而&#xff0c;在开发过程中如…...

编程日记 2024/1/1 14:23:16

数据结构: 位图

位图 概念 用一个bit为来标识数据在不在 功能 节省空间快速查找一个数在不在一个集合中排序 去重求两个集合的交集,并集操作系统中的磁盘标记 简单实现 1.设计思想:一个bit位标识一个数据, 使用char(8bit位)集合来模拟 2.预备工作:a.计算这个数在第几个char b.是这个ch…...

编程日记 2024/1/1 14:22:15

Nginx 反向代理负载均衡

Nginx 反向代理负载均衡 普通的负载均衡软件&#xff0c;如 LVS&#xff0c;其实现的功能只是对请求数据包的转发、传递&#xff0c;从负载均衡下的节点服务器来看&#xff0c;接收到的请求还是来自访问负载均衡器的客户端的真实用户&#xff1b;而反向代理就不一样了&#xf…...

编程日记 2024/1/1 14:20:14

SAP FIORI 初步了解

1、对网上存在的部分资料进行收集 一套适合 SAP UI5 开发人员循序渐进的学习教程 SAP Fiori 的学习路线指南 如何根据角色批量激活SAP Fiori服务 关于S/4和Fiori&#xff0c;你必须知道的10件事 SAP Fiori开发教程 SAP FIORI教程 面向ABAP开发人员&#xff0c;SAPUI5 Fiori开发…...

编程日记 2024/1/1 14:19:12

chrome浏览器记录不住网站登录状态，退出后再打开就需要重新登陆的解决办法

chrome浏览器记录不住网站登录状态&#xff0c;退出后再打开就需要重新登陆&#xff0c;比较繁琐。 解决办法&#xff1a; 1、chrome浏览器右上角三个竖的点&#xff0c;然后进入“设置”&#xff08;Settings&#xff09;&#xff0c;选择“隐私与安全”&#xff08;Privacy…...

编程日记 2024/1/1 14:18:11

Linux lpd命令教程：打印服务管理技巧全解析(附实例教程和注意事项)

Linux lpd命令介绍 lpd是Linux操作系统中的一个命令&#xff0c;全称为line printer daemon&#xff0c;其主要职责是管理和控制打印任务。lpd可以接收打印任务请求并将这些请求放入打印任务队列中。当打印机空闲时&#xff0c;lpd会自动将任务队列中的打印请求发送给打印机以…...

编程日记 2024/1/1 14:15:08

利用STM32和可控硅控制220V加热电路

利用STM32和可控硅控制220V加热电路 Chapter1 利用STM32和可控硅控制220V加热电路一、错误原理图二、正确原理图 Chapter2 可控硅驱动芯片MOC3081/3061Chapter3 一个MOC3061的可控硅触发电路的分析Chapter4 可控硅的两种触发方式&#xff1a;移相触发和过零触发1、过零触发2、移…...

编程日记 2024/1/1 14:14:07

在高并发场景下，缓存“雪崩”了怎么办

1. 缓存雪崩的常见原因 缓存“雪崩”是指&#xff0c;因为部分缓存节点不可用&#xff0c;而导致整个缓存系统&#xff08;甚至是整个服务系统&#xff09;不可用。缓存“雪崩”主要分为以下两种情况&#xff1a; 因缓存不支持 rehash 而导致的缓存“雪崩”缓存支持 rehash 时…...

编程日记 2024/1/1 14:13:07

本地git服务器的使用

Windows上使用&#xff1a; 首先要在windows开发机上生成密钥&#xff1a; 1.安装git&#xff0c;首先去git官网下载git&#xff0c;https://git-scm.com/downloads&#xff0c;下载.exe格式并安装。 2.从程序目录启动“Git Bash” 3.键入命令&#xff1a;ssh-keygen -t rsa -…...

编程日记 2024/1/1 14:12:06

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

编程新知 2025/12/14 11:45:02

令牌桶 滑动窗口-＞限流 分布式信号量-＞限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

编程新知 2026/1/29 16:36:27

Map相关知识

数据结构 二叉树 二叉树&#xff0c;顾名思义&#xff0c;每个节点最多有两个“叉”&#xff0c;也就是两个子节点&#xff0c;分别是左子 节点和右子节点。不过&#xff0c;二叉树并不要求每个节点都有两个子节点&#xff0c;有的节点只 有左子节点&#xff0c;有的节点只有…...

编程新知 2026/2/4 16:21:14

10-Oracle 23 ai Vector Search 概述和参数

一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI&#xff0c;使用客户端或是内部自己搭建集成大模型的终端&#xff0c;加速与大型语言模型&#xff08;LLM&#xff09;的结合&#xff0c;同时使用检索增强生成&#xff08;Retrieval Augmented Generation &#…...

编程新知 2026/2/7 21:32:44

华硕a豆14 Air香氛版，美学与科技的馨香融合

在快节奏的现代生活中&#xff0c;我们渴望一个能激发创想、愉悦感官的工作与生活伙伴&#xff0c;它不仅是冰冷的科技工具&#xff0c;更能触动我们内心深处的细腻情感。正是在这样的期许下&#xff0c;华硕a豆14 Air香氛版翩然而至&#xff0c;它以一种前所未有的方式&#x…...

编程新知 2026/1/29 14:27:00

Axure 下拉框联动

实现选省、选完省之后选对应省份下的市区...

编程新知 2026/1/20 13:43:41

Neko虚拟浏览器远程协作方案：Docker+内网穿透技术部署实践

前言&#xff1a;本文将向开发者介绍一款创新性协作工具——Neko虚拟浏览器。在数字化协作场景中&#xff0c;跨地域的团队常需面对实时共享屏幕、协同编辑文档等需求。通过本指南&#xff0c;你将掌握在Ubuntu系统中使用容器化技术部署该工具的具体方案&#xff0c;并结合内网…...

编程新知 2026/1/27 9:02:37

在golang中如何将已安装的依赖降级处理，比如：将 go-ansible/v2@v2.2.0 更换为 go-ansible/@v1.1.7

在 Go 项目中降级 go-ansible 从 v2.2.0 到 v1.1.7 具体步骤&#xff1a; 第一步&#xff1a; 修改 go.mod 文件 // 原 v2 版本声明 require github.com/apenella/go-ansible/v2 v2.2.0 替换为&#xff1a; // 改为 v…...

编程新知 2025/10/20 16:05:17

大数据治理的常见方式

大数据治理的常见方式 大数据治理是确保数据质量、安全性和可用性的系统性方法&#xff0c;以下是几种常见的治理方式&#xff1a; 1. 数据质量管理 核心方法&#xff1a; 数据校验&#xff1a;建立数据校验规则&#xff08;格式、范围、一致性等&#xff09;数据清洗&…...

编程新知 2025/10/6 12:34:16

IP选择注意事项

IP选择注意事项 MTP、FTP、EFUSE、EMEMORY选择时&#xff0c;需要考虑以下参数&#xff0c;然后确定后选择IP。 容量工作电压范围温度范围擦除、烧写速度/耗时读取所有bit的时间待机功耗擦写、烧写功耗面积所需要的mask layer...

编程新知 2025/10/26 7:24:53