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

HTML 基础

news 文章来源：https://blog.csdn.net/qq_57907966/article/details/135316308 2025/1/10 5:38:07

文章目录

    • 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

Mybatis Java API - SqlSessionFactoryBuilder

在MyBatis中&#xff0c;用于与数据库进行交互的主要Java接口是SqlSession。通过这个接口&#xff0c;您可以执行命令、获取映射器并管理事务。稍后我们将更详细地讨论SqlSession本身&#xff0c;但首先我们必须学习如何获取SqlSession的实例。SqlSession是由SqlSessionFactory…...

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

【动态规划】 LCR 099. 最小路径和

LCR 099. 最小路径和 解题思路 采用动态规划的思路每次搜索都是向上或者向左进行搜索dp(grid, i, j) 的值取决于 dp(grid, i - 1, j) 和 dp(grid, i, j - 1) 返回的值。同时(i,j)到(i - 1,j - 1)有两种方法&#xff0c;所以一定存在重叠子问题设置备忘录Memo存储dp过程中所有…...

编程日记 2024/1/1 14:10:04

【51单片机系列】DS18B20温度传感器扩展实验之设计一个智能温控系统

本文是关于DS18B20温度传感器的一个扩展实验。 文章目录 一、相关元件介绍二、实验分析三、proteus原理图设计四、软件设计 本扩展实验实现的功能&#xff1a;利用DS18B20设计一个智能温度控制系统&#xff0c;具有温度上下限值设定。当温度高于上限值时&#xff0c;电机开启&a…...

编程日记 2024/1/1 14:09:03

2023年年度总结，一个小白的CSDN涨粉历程

前言 滚滚长江东逝水&#xff0c;一去不复返。 转眼间已到2024年节点&#xff0c;时间如滚滚长江水向东奔流不息&#xff0c;在长江消失之前&#xff0c;都不会停歇&#xff0c;也不会回头。人亦如此&#xff0c;不管是生活还是学习&#xff0c;都是不断往前走的过程&#xff…...

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

2023-12-17 LeetCode每日一题（使用最小花费爬楼梯）

2023-12-17每日一题 一、题目编号 746. 使用最小花费爬楼梯二、题目链接 点击跳转到题目位置 三、题目描述 给你一个整数数组 cost &#xff0c;其中 cost[i] 是从楼梯第 i 个台阶向上爬需要支付的费用。一旦你支付此费用&#xff0c;即可选择向上爬一个或者两个台阶。 你…...

编程日记 2024/1/1 14:01:57

《Webpack5 升级》- Vue2.x 组件库 Webpack3 升 5

前言 基于 Vue2.x 的项目和组件库开发于 2019 年 &#xff0c;那时对 Webpack 版本没有概念&#xff0c;项目和组件库的版本混乱…有的使用 v3&#xff0c;有的使用 v4… 对于现今 2023 年&#xff08;或 2024 年&#xff09;的整个生态环境是不够用的&#xff0c;无法使用较新…...

编程日记 2024/1/1 14:00:56

【7K⭐】Pot：一款开源免费支持跨平台划词翻译和OCR的软件

【7K⭐】Pot&#xff1a;一款开源免费支持跨平台划词翻译和OCR的软件 如果你经常需要阅读英文文档或者图片&#xff0c;你可能会遇到以下问题&#xff1a; 浏览器自带的翻译功能翻译效果不佳&#xff0c;无法对照原文&#xff0c;而且不能翻译图片中的文字翻译插件虽然支持多…...

编程日记 2024/1/1 13:53:50

navicat premium历史版本下载及更新navicat premium15 永久（使用）有效期

1、navicat premium介绍 Navicat Premium 是一套可创建多个连接的数据库开发工具&#xff0c;让你从单一应用程序中同时连接 MySQL、Redis、MariaDB、MongoDB、SQL Server、Oracle、PostgreSQL 和 SQLite 。它与 GaussDB 、OceanBase 数据库及 Amazon RDS、Amazon Aurora、Amaz…...

编程日记 2024/1/1 13:50:47

JAVA进化史: JDK8特性及说明

JDK 8&#xff08;Java Development Kit 8&#xff09;是Java平台的一个重大版本&#xff0c;于2014年3月发布。该版本引入了许多令人期待的新特性&#xff0c;其中一些改变了Java语言的面貌&#xff0c;提供了更丰富、灵活和现代的编程体验。以下是JDK 8的一些主要特性&#x…...

编程日记 2024/1/1 13:49:45

vue3基础知识一，安装及使用

一、安装vue3 需要安装node&#xff0c;然后在项目所在目录命令行执行以下代码。 npm create vuelatest 回车后需要配置以下内容。 二、安装所需的依赖包并运行 cd到项目目录&#xff0c;执行以下代码安装依赖包 npm i 运行项目 npm run dev 打开浏览器查看结果 ok&#…...

编程日记 2024/1/1 13:47:44

阿里巴巴官网登录/新站seo外包

ListView讲解&#xff1a; 一、ListView这个控件是一个使用非常广泛的控件&#xff0c;值得深入的学习和研究。基本使用已经在Adapter中使用过了 二、常用的属性和方法 footerDividersEnabled&#xff1a;是否在footerView&#xff08;表尾&#xff09;前绘制一条分割线&#x…...

编程日记 2025/1/10 1:23:18

企业网站如何进行seo/网络营销的方式有几种

委托是一种面向对象的&#xff0c;类型安全的&#xff0c;可以多播的函数指针 委托是一类继承自System.Delegate的类型&#xff0c;每个委托对象至少包含一个指向某个方法的指针&#xff0c;该方法可以是实例方法&#xff0c;也可以是静态方法 详细分析可见&#xff1a;http://…...

编程日记 2025/1/10 1:08:09

哪里可以做网站平台/seo研究中心vip教程

摘要&#xff1a;这篇文章主要介绍了php使用strip_tags()去除html标签仍有空白的解决方法,涉及php正则替换的相关操作技巧,需要的朋友可以参考下这篇文章主要介绍了php使用strip_tags()去除html标签仍有空白的解决方法,涉及php正则替换的相关操作技巧,需要的朋友可以参考下本文…...

编程日记 2025/1/9 21:57:29

广州正规网站建设公司/百度地图推广

新手发帖&#xff0c;很多方面都是刚入门&#xff0c;有错误的地方请大家见谅&#xff0c;欢迎批评指正 每日一道理 灯&#xff0c;带有一种明亮的光&#xff0c;每当深夜来临&#xff0c;是它陪伴着你&#xff0c;如此默默无闻。它是平凡的&#xff0c;外表华丽与否&#xff0…...

编程日记 2025/1/9 21:20:50

公司部门团建活动策划方案/深圳百度推广排名优化

数据结构有八大类 1、数组2、栈3、队列4、链表5、树6、散列表7、堆8、图链表基本操作&#xff1a;头位置添加、头位置删除、任意位置添加、任意位置删除、根据下标查找节点、根据数据查找节点、获取长度、打印所有节点 package com.autumn.LinkedList;/*** 节点*/ class Node{p…...

编程日记 2025/1/9 19:24:59

网站建设优化河南/免费下载b站视频软件

printf("\033[47;31mhello world\033[5m"); 47是字背景颜色, 31是字体的颜色, hello world是字符串. 后面的\033[5m是控制码.颜色代码:QUOTE:字背景颜色范围: 40--49 字颜色: 30--3940: 黑 30: 黑41: 红 …...

编程日记 2025/1/9 17:00:46