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

HTML笔记（1）

news 2026/2/9 6:41:23

介绍

 

  • 浏览器中内置了HTML的解析引擎，通过解析标记语言来展现网页；
  • HTML标签都是预定义好的；
  • Java工程师：后台代码的编写，和数据库打交道，把数据给网页前端的工程师；
  • 网页前端工程师：写HTML页面，它们拿到数据就可以把数据展现到页面上，呈现给用户；
  • 两类人联合起来开发软件的系统
  • W3C是万维网联盟：它们是定义标准的一个组织，它们规定一个网页由三部分组成，这三部分是网页的结构、网页的表现、以及网页的行为；分别对应了三种不同的语言来去定义这三种不同的组成部分。

       HTML - 定义网页的结构

       CSS - 定义网页的表现

       JavaScript - 定义网页的行为

       这三种语言被称为网页前端三剑客

基础标签

创建网页项目

新建模块（项目）→ 选择创建路径 → 编辑名称 → 创建目录 → 编辑目录名称为html → 创建html文件

在IDEA（Java工程师用）

不需要src目录，把它删去

在WebStorm（前端工程师用）

细节

注意

· 回车、换行、空白字符等都是不被页面所识别的，如需换行需要手动添加<br>标签。

  • · html要显示特殊字符，需要用特殊的转义字符。

图片、音频、视频标签

其他的音视频格式html暂时不支持

资源路径

1、绝对路径：完整路径

2、相对路径：（两个资源的）相对位置关系（*当前页面访问的路径；*当前资源访问的路径）

        情况一：在同一目录下   ./a.jpg   或   a.jpg

        页面访问：xxx(访问项目，怎么写无所谓)/html/02-图片音频视频.html

        资源访问：xxx/html/a.jpg

        情况二：在同一目录下的其他目录中   ./img/a.jpg   或   img/a.jpg

        页面访问：xxx/html/02-图片音频视频.html

        资源访问：xxx/html/img/a.jpg

        情况三：资源所在的目录和页面所在的目录为同级   ../img/a.jpg

        页面访问：xxx/html/02-图片音频视频.html

        资源访问：xxx/img/a.jpg

        需要找到页面的上一级目录(html)，html目录和img目录在同一级，这时再通过img目录下找到资源(a.jpg)，所以要通过html文件找到资源，就要首先找到它的上一级（用../表示，就到了html目录），再找同级的img，再拿资源就可以了，也就是   ../img/a.jpg

        当资源改变路径时，webstorm会同步更改代码中引用的路径。

 

示例代码

总结

超链接标签

在页面内部跳转会用_self；跳转到新的页面会用_blank。

示例代码

相关文章：

HTML笔记（1）

介绍 浏览器中内置了HTML的解析引擎&#xff0c;通过解析标记语言来展现网页&#xff1b;HTML标签都是预定义好的&#xff1b;Java工程师&#xff1a;后台代码的编写&#xff0c;和数据库打交道&#xff0c;把数据给网页前端的工程师&#xff1b;网页前端工程师&#xff1a;写H…...

编程日记 2023/8/2 2:57:49

重新审视MHA与Transformer

本文将基于PyTorch源码重新审视MultiheadAttention与Transformer。事实上&#xff0c;早在一年前博主就已经分别介绍了两者&#xff1a;各种注意力机制的PyTorch实现、从零开始手写一个Transformer&#xff0c;但当时的实现大部分是基于d2l教程的&#xff0c;这次将基于PyTorch…...

编程日记 2023/8/2 2:56:47

Docker 全栈体系（七）

Docker 体系&#xff08;高级篇&#xff09; 五、Docker-compose容器编排 1. 是什么 Compose 是 Docker 公司推出的一个工具软件&#xff0c;可以管理多个 Docker 容器组成一个应用。你需要定义一个 YAML 格式的配置文件docker-compose.yml&#xff0c;写好多个容器之间的调…...

编程日记 2023/8/2 2:55:46

【编程范式】聊聊什么是数据类型和范式的本质

什么是编程范式 范式其实就是做事的方式&#xff0c;编程范式可以理解为如何编程&#xff0c;按照什么样的模式或者风格进行编程。 编程范式包含哪些 泛型编程函数式编程面向对象编程编程本质和逻辑编程 虽然有不同的编程范式&#xff0c;但是对于目的来说都是为了解决同一…...

编程日记 2023/8/2 2:54:45

2023-08-01 python根据x轴、y轴坐标（数组）在坐标轴里画出曲线图，python 会调用鼎鼎大名的matlib，用来分析dac 数据

一、python 源码如下 import numpy as np import matplotlib as mpl import matplotlib.pyplot as plt#x[0 ,1,2,3,5,6,10] #y[0,0,3,4,5,7,8]# { 0 , 1 , 0x0003 },// 0 # { 0XFFFF * 1 / 10 , 3006 , 0x0a6b },// 1 # { 0XFFFF * 2 / 10 , 599…...

编程日记 2023/8/2 2:53:43

小研究 - 主动式微服务细粒度弹性缩放算法研究（四）

微服务架构已成为云数据中心的基本服务架构。但目前关于微服务系统弹性缩放的研究大多是基于服务或实例级别的水平缩放&#xff0c;忽略了能够充分利用单台服务器资源的细粒度垂直缩放&#xff0c;从而导致资源浪费。为此&#xff0c;本文设计了主动式微服务细粒度弹性缩放算法…...

编程日记 2023/8/2 2:52:41

机器学习深度学习——softmax回归的简洁实现

&#x1f468;‍&#x1f393;作者简介&#xff1a;一位即将上大四&#xff0c;正专攻机器学习的保研er &#x1f30c;上期文章&#xff1a;机器学习&&深度学习——softmax回归从零开始实现 &#x1f4da;订阅专栏&#xff1a;机器学习&&深度学习 希望文章对你…...

编程日记 2023/8/2 2:51:38

CPU利用率过高解决思路

文章目录 问题场景问题定位问题解决 本文参考&#xff1a; Linux服务器之CPU过高解决思路_linux cpu温度过高_Jeremy_Lee123的博客-CSDN博客 Java程序员必备&#xff1a;jstack命令解析 - 掘金 (juejin.cn) 重点问题&#xff01;CPU利用率过高排查思路&#xff5c;原创 (qq.…...

编程日记 2023/8/2 2:50:37

Redis（三）—— Redis基本的事务操作、Redis实现乐观锁

一、Redis基本的事务操作 首先声明&#xff1a; redis的单条命令是保证原子性的&#xff08;回想一下setnx k1 v1 k5 v5命令如果k1已经存在&#xff0c;那么k5也会设置失败&#xff09;但是redis的事务不保证原子性&#xff01;见下面“1.2 某条命令有错怎么办&#xff1f;”…...

编程日记 2023/8/2 2:49:36

SQLI_LABS攻击

目录 Less1 首先来爆字段 联合注入 判断注入点 爆数据库名 爆破表名 information_schema information_schmea.tables group_concat() 爆破列名 information_schema.columns 爆值 SQLMAP Less-2 -4 Less -5 布尔 数据库 表名 字段名 爆破值 SQLMAP Less-6 …...

编程日记 2023/8/2 2:48:33

如何查看 Chrome 网站有没有前端 JavaScript 报错？

您可以按照以下步骤在Chrome中查看网站是否存在前端JavaScript报错&#xff1a; 步骤1&#xff1a;打开Chrome浏览器并访问网站 首先&#xff0c;打开Chrome浏览器并访问您想要检查JavaScript报错的网站。 步骤2&#xff1a;打开开发者工具 在Chrome浏览器中&#xff0c;按…...

编程日记 2023/8/2 2:47:32

JS前端读取本地上传的File文件对象内容（包括Base64、text、JSON、Blob、ArrayBuffer等类型文件）

读取base64图片File file2Base64Image(file, cb) {const reader new FileReader();reader.readAsDataURL(file);reader.onload function (e) {cb && cb(e.target.result);//即为base64结果}; }, 读取text、JSON文件File readText(file, { onloadend } {}) {const re…...

编程日记 2023/8/2 2:46:31

【项目方案】OpenAI流式请求实现方案

文章目录 实现目的效果比对非stream模式stream模式实现方案方案思路总体描述前端方案对比event-source-polyfill代码示例前端实现遇到的问题与解决方法后端参考资料时序图关键代码示例后端实现时遇到的问题与解决方法实现目的 stream是OpenAI API中的一个参数，用于控制请求的…...

编程日记 2023/8/2 2:45:26

华为数通HCIP-IP组播基础

点到点业务&#xff1a;比如FTP&#xff0c;WEB业务&#xff0c;此类业务主要特点是不同的用户有不同的需求&#xff0c;比如用户A需要下载资料A&#xff0c;用户B需要下载资料B。此类业务一般由单播承载&#xff0c;服务器对于不同用户发送不同的点到点数据流。 ospf、isis…...

编程日记 2023/8/2 2:44:25

STM32 SPI学习

SPI 串行外设设备接口&#xff08;Serial Peripheral Interface&#xff09;&#xff0c;是一种高速的&#xff0c;全双工&#xff0c;同步的通信总线。 SCK时钟信号由主机发出。 SPI接口主要应用在存储芯片。 SPI相关引脚&#xff1a;MOSI&#xff08;输出数据线&#xff…...

编程日记 2023/8/2 2:43:23

分布式缓存与数据库的一致性记录

用户更新数据库&#xff0c;需要再去更新redis缓存&#xff0c;否则会造成缓存与数据库数据不一致 一致性的两种方法 1). 双写模式 更新完数据库之后&#xff0c;更新redis缓存数据 问题: 因为请求时间的问题&#xff0c;造成缓存数据不是最新的 数据。 原因&#xff1a;A先修…...

编程日记 2023/8/2 2:42:21

vue3的语法

main.js中写发生变化&#xff0c;并不兼容vue2的写法 //vue3 import { createApp } from vue import ./style.css import App from ./App.vuecreateApp(App).mount(#app)//vue2 import Vue from vue import ./style.css import App from ./App.vueconst vm new Vue({render:h…...

编程日记 2023/8/2 2:41:19

【git合并分支自定义提交消息】

开发分支 dev主分支 master 需求 dev分支开发完后合并到master分支自定义提交信息 通过 git merge dev --squash --no-commit此命令会拉取dev分支代码到当前分支&#xff0c;并不会自动提交&#xff0c;可以自己修改提交信息...

编程日记 2023/8/2 2:40:15

AttributeError: module ‘PyQt5.QtGui‘ has no attribute ‘QMainWindow‘

场景描述&#xff1a; 这个问题是使用PyUIC将ui文件变成py文件后遇到的 解决办法&#xff1a; 改动1&#xff1a;把object改成QtWidgets.QMainWindow 改动2&#xff1a;增加__init__函数&#xff0c;函数结构如下&#xff1a; def __init__(self):super(Ui_MainWindow,self).…...

编程日记 2023/8/2 2:39:12

基于Java+SpringBoot+Vue前后端分离电商项目

晚间lucky为友友们送福利啦~&#x1f381; Tips&#xff1a;有需要毕业设计指导的童鞋一定要认真看哦&#xff0c;文末有彩蛋。 一.项目介绍 该电商项目是一个简单、入门级的电商项目&#xff0c;是基于JavaSpringBootVue前后端分离项目。前端采用两套独立的系统分别完成项目…...

编程日记 2023/8/2 2:38:10

Java 8 Stream API 入门到实践详解

一、告别 for 循环&#xff01; 传统痛点&#xff1a; Java 8 之前&#xff0c;集合操作离不开冗长的 for 循环和匿名类。例如&#xff0c;过滤列表中的偶数&#xff1a; List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...

编程新知 2026/1/12 10:41:22

FastAPI 教程：从入门到实践

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建 API&#xff0c;支持 Python 3.6。它基于标准 Python 类型提示&#xff0c;易于学习且功能强大。以下是一个完整的 FastAPI 入门教程&#xff0c;涵盖从环境搭建到创建并运行一个简单的…...

编程新知 2025/10/16 7:51:26

剑指offer20_链表中环的入口节点

链表中环的入口节点 给定一个链表&#xff0c;若其中包含环&#xff0c;则输出环的入口节点。 若其中不包含环&#xff0c;则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...

编程新知 2026/1/31 6:09:22

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

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

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

【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张（Windows/Linux）

要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况&#xff0c;可以通过以下几种方式模拟或触发&#xff1a; 1. 增加CPU负载 运行大量计算密集型任务&#xff0c;例如&#xff1a; 使用多线程循环执行复杂计算&#xff08;如数学运算、加密解密等&#xff09;。运行图…...

编程新知 2025/11/30 10:30:15

OpenLayers 分屏对比(地图联动)

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

编程新知 2025/12/25 18:22:43

使用Spring AI和MCP协议构建图片搜索服务

目录 使用Spring AI和MCP协议构建图片搜索服务 引言 技术栈概览 项目架构设计 架构图 服务端开发 1. 创建Spring Boot项目 2. 实现图片搜索工具 3. 配置传输模式 Stdio模式&#xff08;本地调用&#xff09; SSE模式&#xff08;远程调用&#xff09; 4. 注册工具提…...

编程新知 2026/1/25 14:31:47

Kafka入门-生产者

生产者 生产者发送流程&#xff1a; 延迟时间为0ms时&#xff0c;也就意味着每当有数据就会直接发送 异步发送API 异步发送和同步发送的不同在于&#xff1a;异步发送不需要等待结果&#xff0c;同步发送必须等待结果才能进行下一步发送。 普通异步发送 首先导入所需的k…...

编程新知 2026/1/26 4:49:33

Web中间件--tomcat学习

Web中间件–tomcat Java虚拟机详解 什么是JAVA虚拟机 Java虚拟机是一个抽象的计算机&#xff0c;它可以执行Java字节码。Java虚拟机是Java平台的一部分&#xff0c;Java平台由Java语言、Java API和Java虚拟机组成。Java虚拟机的主要作用是将Java字节码转换为机器代码&#x…...

编程新知 2025/9/13 18:20:34

android13 app的触摸问题定位分析流程

一、知识点 一般来说，触摸问题都是app层面出问题，我们可以在ViewRootImpl.java添加log的方式定位；如果是touchableRegion的计算问题，就会相对比较麻烦了，需要通过adb shell dumpsys input > input.log指令，且通过打印堆栈的方式，逐步定位问题，并找到修改方案。 问题…...

编程新知 2026/1/31 13:18:31