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

【HTML5】html5开篇基础（2）

news 2025/7/6 15:23:21

1.❤️❤️前言~🥳🎉🎉🎉

Hello, Hello~ 亲爱的朋友们👋👋，这里是E绵绵呀✍️✍️。

如果你喜欢这篇文章，请别吝啬你的点赞❤️❤️和收藏📖📖。如果你对我的内容感兴趣，记得关注我👀👀以便不错过每一篇精彩。

当然，如果在阅读中发现任何问题或疑问，我非常欢迎你在评论区留言指正🗨️🗨️。让我们共同努力，一起进步！

加油，一起CHIN UP！💪💪

🔗个人主页：E绵绵的博客
📚所属专栏：

1. JAVA知识点专栏

        深入探索JAVA的核心概念与技术细节

2.JAVA题目练习

        实战演练，巩固JAVA编程技能

3.c语言知识点专栏

        揭示c语言的底层逻辑与高级特性

4.c语言题目练习

        挑战自我，提升c语言编程能力

5.Mysql数据库专栏

        了解Mysql知识点，提升数据库管理能力

6.html5知识点专栏

         学习前端知识，更好的运用它

📘 持续更新中，敬请期待❤️❤️

2.常用标签

标题标签： 

标题标签 <h1> - <h6>（重要）
为了使网页更具有语义化，我们经常会在页面中用到标题标签。
HTML 提供了 6 个等级的网页标题，即<h1> - <h6> 。
具体实现：
      <h1> 我是一级标题 </h1>
特点：
    1.加了标题的文字会变的加粗，字号也会依次变大。
    2. 一个标题独占一行。

段落标签： 

 在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。
在 HTML 标签中，<p>标签用于定义段落，它可以将整个网页分为若干个段落。
具体实现：
     <p> 我是一个段落标签 </p>
特点：
    1. 文本在一个段落中会根据浏览器窗口的大小自动换行。
    2. 段落和段落之间保有空隙。

换行标签： 

在 HTML 中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。
如果希望某段文本强制换行显示，就需要使用换行标签 <br />。
具体实现：
      <br />
特点：
    1. <br /> 是个单标签。
    2. <br /> 标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。

文本格式化标签：

在网页中，有时需要为文字设置粗体、斜体 或下划线等效果。
这时就需要用到 HTML 中的文本格式化标签，使文字以特殊的方式显示。

 div和span标签

 <div> 和 <span> 是没有语义的，它们就是一个盒子，用来装内容的。
具体实现：
     <div> 这是头部 </div>    
     <span> 今日价格 </span>
特点：
    1. <div> 标签用来布局，如果存在<div>，里面的内容在游览器中独占一行。 大盒子
    2. <span> 标签用来布局，一行上可以多个 <span>。小盒子

之后在网页布局中会用到。

 图片标签

在 HTML 标签中，<img> 标签用于定义 HTML 页面中的图像，注意它是一个单标签。
具体实现：
      <img src="图像URL" />
解释：
    src 是<img>标签的必须属性，它用于指定图像文件的路径和文件名。
    所谓属性：简单理解就是属于这个图像标签的特性。
图像标签的其他属性：

图像标签注意点：
1.图像标签可以拥有多个属性，必须写在标签名的后面。
2.属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
3.属性采取键值对的格式，即 key=“value" 的格式，属性 =“属性值” 

 案例：

注意图片要与该文件在一个目录中。之后路径中会提到为什么。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><img src="nahida.webp" alt="显示错误噢" title="纳西妲" width="1000" height="600" border="3" />
</body></html>

通过该代码就生成一个图片，如果图片生成不成功则会出现显示错误噢代替图片。 

3.相对路径和绝对路径

相对路径

相对路径是从代码所在的这个文件出发，去寻找目标文件的，而我们这里所说的上一级 、下一级和同一级就是 图片相对于 HTML 页面的位置。 

当图像文件和项目文件位于同一文件夹：只需输入图像文件的名称即可 

<img src="music.jpg" alt="图片加载异常！！！">

当图像文件位于项目文件的下一级文件夹：输入文件夹名和文件名，之间用 / 隔开，

<img src="images/music.jpg" alt="图片加载异常！！！">

当图像文件位于项目文件的上一级文件夹：在文件名之前加入 …/ ，如果是上两级，则需要使用…/…/ ，以此类推

    <img src="../music.jpg" alt="图片加载异常！！！">

绝对路径

是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。

例如，物理地址“D:\web\img\logo.png”或完整的网络地址“http://www.xxx.cn/images/logo.png” 都是绝对路径

一般情况下我们都不推荐绝对地址中的物理地址，因为它移植性差，并且有些时候该物理地址在一些软件中生成图片会显示错误，而其他的软件又可以生成。（可能是电脑权限的原因），网络地址还可以用下，有些时候挺好用的。

我们正常情况通常用相对路径。

 4.链接标签

 链接的语法格式
    <a href="跳转目标路径" target="目标窗口的弹出方式"> 文本或图像等其他形式 </a>
属性：
    1.href：用于指定目标的url地址
    2.target:用于指定链接页面的打开方式，默认是_self（打开新窗口后会替代原本窗口） _blank（新窗口打开，不会替代原本窗口）

链接分类：
1.外部链接: 例如 <a href="https://www.baidu.com/?a=1" target="_blank"> 百度网址</a>。

其href接收的通常是绝对路径中的网址链接。


2.内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可，例如 < a href=“index.html” target=“_blank”> 内部链接</a> 。内部链接中href接收的通常都是相对路径


3.空链接: 如果当时没有确定链接目标时，< a href=”#” target="_blank"> 首页</a> 。

点进去如下：


4.下载链接: 如果 href 里面地址是一个文件或者压缩包（exe或zip等形式）点进去会下载这个文件，网页链接或相对路径链接都可以。


5.网页元素链接: 在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接.

  <a href="https://www.baidu.com/?a=1" target="_blank"> <img src="图库/nahida.webp"></a>

点进去后会生成该网页

6.锚点链接: 我们点击该链接,可以快速定位到页面中的某个位置.

在链接文本的 href 属性中，设置属性值为 #名字 的形式，如<a href="#two" target="_blank"> 第2集 </a> ，而后找到目标位置标签，里面添加一个 id 属性 = 刚才的名字 ，如：<h3 id="two">第2集介绍</h3>. 此时就可以点击第二集链接发生跳转。

5.注释标签

如果需要在 HTML 文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。

注释标签规则如下：

 <!-- 内容 -->

一般我们都用快捷键crtl+shift直接生成

6.特殊字符 

在 HTML 页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来替代。

重点记住：空格 、大于号、 小于号 这三个， 其余的使用很少，如果需要回头查阅即可。 

相关文章：

【HTML5】html5开篇基础（2）

1.❤️❤️前言~&#x1f973;&#x1f389;&#x1f389;&#x1f389; Hello, Hello~ 亲爱的朋友们&#x1f44b;&#x1f44b;&#xff0c;这里是E绵绵呀✍️✍️。 如果你喜欢这篇文章&#xff0c;请别吝啬你的点赞❤️❤️和收藏&#x1f4d6;&#x1f4d6;。如果你对我的…...

编程日记 2024/9/24 7:36:30

大数据新视界 --大数据大厂之 Reactjs 在大数据应用开发中的优势与实践

&#x1f496;&#x1f496;&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎你们来到 青云交的博客&#xff01;能与你们在此邂逅&#xff0c;我满心欢喜&#xff0c;深感无比荣幸。在这个瞬息万变的时代&#xff0c;我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…...

编程日记 2024/9/24 7:32:26

【论文阅读笔记】TOOD: Task-aligned One-stage Object Detection

论文代码&#xff1a;https://github.com/fcjian/TOOD 文章目录 论文小结论文简介论文方法Task-aligned Head&#xff08;T-Head&#xff09;T-Head伪代码解释 Task Alignment Learning&#xff08;TAL&#xff09;Task-aligned Sample AssignmentTask-aligned Loss 论文实验消…...

编程日记 2024/9/24 7:30:24

类中的特殊内容

仿照string类&#xff0c;自己手动实现 My_string #include <iostream> #include <string.h> using namespace std;class My_string { private:int len;int size;char *ptr; public:My_string():size(15),len(0){ptrnew char[size];ptr[0]\0;}My_string(const char…...

编程日记 2024/9/24 7:29:22

network request to https://registry.npmjs.org/xxx failed, reason: connect ETIM

目录&#xff1a; 1、问题描述2、解决方案3、npm镜像仓库替换 1、问题描述 npm install 时&#xff0c;报错&#xff1a;npm ERR! network request to https://registry.npmjs.org/postcss-pxtorem failed, reason: connect ETIMEDOU npm ERR! code ETIMEDOUT npm ERR! errno…...

编程日记 2024/9/24 7:27:20

MQ入门（二）：java客户端SpringAMQP

目录 1.SpringAMQP 1.1.导入demo工程 1.2.快速入门 1.2.1.消息发送 1.2.2.消息接收 1.2.3.测试 1.3.WorkQueues模型 1.4.交换机类型 1.4.1.Fanout交换机 1.4.2.Direct交换机 1.4.3.Topic交换机 1.5.声明队列和交换机 1.5.1.基于注解声明 1.6.消息转换器 1.6.1.测…...

编程日记 2024/9/24 7:25:18

软技能与AI技术的融合

一、引言 ----  随着人工智能&#xff08;AI&#xff09;和生成式人工智能&#xff08;AIGC&#xff09;如ChatGPT、Midjourney、Claude等大语言模型的迅速崛起&#xff0c;AI辅助编程工具已经变得越来越普遍。这不仅意味着程序员的工作方式正在发生深刻的变革&#xff0c;同…...

编程日记 2024/9/24 7:24:17

在视频上绘制区域：使用Vue和JavaScript实现交互式画布

在数字时代&#xff0c;交互式媒体内容的创建和消费变得越来越普遍。特别是视频内容&#xff0c;它不仅提供了视觉信息&#xff0c;还允许用户与之互动&#xff0c;从而增强了用户体验。本文将介绍如何使用Vue.js框架和JavaScript创建一个交互式组件&#xff0c;该组件允许用户…...

编程日记 2024/9/24 7:22:15

31. RabbitMQ顺序消费

1. 前言 上个小节中我们介绍了 RabbitMQ 中如何防止消息丢失，即保证消息发送的 At Least Once 性质，除此之外，如何防止消息被重复消费，即保证消息消费的 Exactly Once 性质，也是业务逻辑中需要考虑的问题。 2. 消息消费顺序 面试官提问：业务中使用了 RabbitMQ 消息队列…...

编程日记 2024/9/24 7:19:11

BERT-BiLSTM-CRF模型实战

文章目录 BERT-BiLSTM-CRF模型项目结构数据预处理运行环境使用方法关于BERT-BiLSTM-CRF参考文章BERT-BiLSTM-CRF模型 使用谷歌的BERT模型在BiLSTM-CRF模型上进行预训练用于中文命名实体识别。 项目结构 bert_bilstm_crf_ner_pytorchtorch_nerbert-base-chinese --…...

编程日记 2024/9/24 7:16:09

npm 安装 与 切换 淘宝镜像

一、镜像源 npm默认镜像源是国外的&#xff0c;安装依赖速度较慢&#xff0c;使用国内的镜像源速度会快一些。 1、设置淘宝镜像源&#xff1a; #最新地址 淘宝 NPM 镜像站喊你切换新域名啦! npm config set registry https://registry.npm.taobao.org&#xff08;弃用了&…...

编程日记 2024/9/24 7:11:05

在Windows系统上安装的 Arrow C++ 库

在Windows系统上安装的 Arrow C 库 正文第一步第二步第三步第四步注: 检查是否安装成功 吐槽 正文 第一步 git clone gitgithub.com:apache/arrow.git第二步 打开powershell (好像cmd也可以,不过我试了powershell中不报错,cmd中报错,不是很清楚为什么) 打开arrow的目录 cd …...

编程日记 2024/9/24 7:09:04

格雷母线电缆头安装方法视频-武汉正向科技

正向科技|格雷母线电缆头怎么处理&#xff1f; 正向科技格雷母线采用整体热压工艺生产&#xff0c;一次成型&#xff0c;防护等级 IP67&#xff0c;用在直线或环形位移检测&#xff0c;抗污染能力强&#xff0c;防水、油、灰尘、蒸汽等&#xff0c;能在强粉尘、高温的环境下稳定…...

编程日记 2024/9/24 7:06:01

统信服务器操作系统【Cron定时任务服务】

Cron定时任务服务服务介绍、服务管理、服务配置 文章目录 一、功能概述二、功能介绍1. Cron 服务管理2.Cron 服务管理3.Cron 服务配置run-parts一、功能概述 cron是一个可以用来根据时间、日期、月份、星期的组合来 调度对周期性任务执行的守护进程。利用 cron 所提供的功能，可…...

编程日记 2024/9/24 7:02:58

微前端中的路由加载流程

1. 初始化基座应用 基座应用&#xff1a;基座应用是微前端架构中的主应用&#xff0c;负责管理和协调各个子应用的加载和卸载。 初始化&#xff1a;基座应用在启动时会初始化路由配置&#xff0c;注册各个子应用的路由。 2. 注册子应用 子应用需要向基座应用注册自己的路由和…...

编程日记 2024/9/24 7:00:56

Axure大屏可视化模板：跨领域数据分析平台原型案例

随着信息技术的飞速发展&#xff0c;数据可视化已成为各行各业提升管理效率、优化决策过程的重要手段。Axure作为一款强大的原型设计工具&#xff0c;其大屏可视化模板在农业、园区、城市、企业数据可视化、医疗等多个领域得到了广泛应用。本文将通过几个具体案例&#xff0c;展…...

编程日记 2024/9/24 6:59:55

机器学习（1）——线性回归、线性分类与梯度下降

文章目录 线性回归线性分类线性可分数据线性不可分数据逻辑回归支持向量机 梯度下降批量梯度下降随机梯度下降批量随机梯度下降 线性回归 概述&#xff1a; 在一元线性回归中&#xff0c;我们假设目标变量y与特征变量x存在线性关系&#xff0c;模型表达式为&#xff1a; y …...

编程日记 2024/9/24 6:58:50

完整的端到端的中文聊天机器人

这段代码是一个完整的端到端的中文聊天机器人的实现，包括数据处理、模型训练、预测和图形用户界面（GUI），下面是对各个部分功能的详细说明： 1. 导入必要的库 import os os.environ[CUDA_LAUNCH_BLOCKING] = 1import torch import torch.nn as nn import torch.optim as o…...

编程日记 2024/9/24 6:57:49

【有啥问啥】Stackelberg博弈方法：概念、原理及其在AI中的应用

Stackelberg博弈方法&#xff1a;概念、原理及其在AI中的应用 1. 什么是Stackelberg博弈&#xff1f; Stackelberg博弈&#xff08;Stackelberg Competition&#xff09;是一种不对称的领导者-追随者&#xff08;Leader-Follower&#xff09;博弈模型&#xff0c;由德国经济学…...

编程日记 2024/9/24 6:56:48

【UI自动化】前言

系列文章目录 【UI自动化】前言 自动化不能代替手工测试&#xff0c;自动化都是以手工测试为基础&#xff0c;自动化测试实现的步骤要依赖手工&#xff1b; 文章目录 系列文章目录【UI自动化】前言 自动化测试的类型自动化解决的问题什么是UI测试测试分类一、使用UI自动化的…...

编程日记 2024/9/24 6:52:45

为什么需要建设工程项目管理？工程项目管理有哪些亮点功能？

在建筑行业&#xff0c;项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升&#xff0c;传统的管理模式已经难以满足现代工程的需求。过去&#xff0c;许多企业依赖手工记录、口头沟通和分散的信息管理&#xff0c;导致效率低下、成本失控、风险频发。例如&#…...

编程新知 2025/7/4 16:09:41

将对透视变换后的图像使用Otsu进行阈值化，来分离黑色和白色像素。这句话中的Otsu是什么意思？

Otsu 是一种自动阈值化方法&#xff0c;用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理&#xff0c;能够自动确定一个阈值&#xff0c;将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

编程新知 2025/6/21 2:09:08

深度学习习题2

1.如果增加神经网络的宽度&#xff0c;精确度会增加到一个特定阈值后&#xff0c;便开始降低。造成这一现象的可能原因是什么&#xff1f; A、即使增加卷积核的数量&#xff0c;只有少部分的核会被用作预测 B、当卷积核数量增加时&#xff0c;神经网络的预测能力会降低 C、当卷…...

编程新知 2025/7/6 5:39:23

Python 包管理器 uv 介绍

Python 包管理器 uv 全面介绍 uv 是由 Astral&#xff08;热门工具 Ruff 的开发者&#xff09;推出的下一代高性能 Python 包管理器和构建工具&#xff0c;用 Rust 编写。它旨在解决传统工具&#xff08;如 pip、virtualenv、pip-tools&#xff09;的性能瓶颈&#xff0c;同时…...

编程新知 2025/6/19 4:13:08

Java求职者面试指南：计算机基础与源码原理深度解析

Java求职者面试指南&#xff1a;计算机基础与源码原理深度解析 第一轮提问&#xff1a;基础概念问题 1. 请解释什么是进程和线程的区别&#xff1f; 面试官&#xff1a;进程是程序的一次执行过程&#xff0c;是系统进行资源分配和调度的基本单位&#xff1b;而线程是进程中的…...

编程新知 2025/7/5 14:21:47

虚拟电厂发展三大趋势：市场化、技术主导、车网互联

市场化&#xff1a;从政策驱动到多元盈利 政策全面赋能 2025年4月&#xff0c;国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》&#xff0c;首次明确虚拟电厂为“独立市场主体”&#xff0c;提出硬性目标&#xff1a;2027年全国调节能力≥2000万千瓦&#xff0…...

编程新知 2025/6/16 11:14:36

2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师（题目+回答）

安全领域各种资源&#xff0c;学习文档&#xff0c;以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具&#xff0c;欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...

编程新知 2025/7/4 7:42:03

Modbus RTU与Modbus TCP详解指南

目录 1. Modbus协议基础 1.1 什么是Modbus？ 1.2 Modbus协议历史 1.3 Modbus协议族 1.4 Modbus通信模型 🎭 主从架构 🔄 请求响应模式 2. Modbus RTU详解 2.1 RTU是什么？ 2.2 RTU物理层 🔌 连接方式 ⚡ 通信参数 2.3 RTU数据帧格式 📦 帧结构详解 🔍…...

编程新知 2025/6/21 0:49:44

用神经网络读懂你的“心情”：揭秘情绪识别系统背后的AI魔法

用神经网络读懂你的“心情”：揭秘情绪识别系统背后的AI魔法 大家好，我是Echo_Wish。最近刷短视频、看直播，有没有发现，越来越多的应用都开始“懂你”了——它们能感知你的情绪，推荐更合适的内容，甚至帮客服识别用户情绪，提升服务体验。这背后，神经网络在悄悄发力，撑起…...

编程新知 2025/7/4 9:35:38

react菜单，动态绑定点击事件，菜单分离出去单独的js文件，Ant框架

1、菜单文件treeTop.js // 顶部菜单 import { AppstoreOutlined, SettingOutlined } from ant-design/icons; // 定义菜单项数据 const treeTop [{label: Docker管理,key: 1,icon: <AppstoreOutlined />,url:"/docker/index"},{label: 权限管理,key: 2,icon:…...

编程新知 2025/7/4 13:57:10