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

【前端基础】Day 1 HTML

article 2026/4/6 15:58:07

总结：

1. Web标准的构成

2. 基本标签

目录

1. Web标准的构成

2. 基本标签

2.1快捷键

2.2.1标题标签 

2.2.2段落和换行标签

2.2.3文本格式化标签

2.2.4div和span标签

2.3.1 图像标签和路径

2.3.2路径

2.3.3超链接标签

2.4注释标签

2.5特殊字符

1. Web标准的构成

 

2. 基本标签

2.1快捷键

<!DOCTYPE html>
<!-- 文档类型声明标签，非HTML标签，位于文档最前面，作用是告诉浏览器用哪种HTML版本来显示网页，
此处表示：当前页面采取的是HTML5版本来显示网页 --><html lang="zh-CN">
<!-- 用来定义当前文档的显示语言，
en定义语言为英语（英文网页），zh-CN定义语言为中文（中文网页），定义为en的文档可以显示中文，定义为zh-CN的文档也可以显示英文，
此属性对浏览器和搜索引擎有作用（翻译） --><head><meta charset="UTF-8"><!-- 字符集（Character set），以便计算机能识别和存储各种文字，在<head>标签内，可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码，UTF-8被称为万国码，基本包含了全世界所有国家需要用到的字符，避免乱码 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我利用vscode创建的第一个页面</title>
</head><body><script>/* 快速复制一行：shift + alt + 下箭头（上箭头）选定多个相同的单词：ctrl + d向上/下移动光标：ctrl + alt + 上/下箭头全部替换相同单词：ctrl + H多行注释：shift + alt + A或ctrl + /选择某个区块：shift + alt 然后拖动鼠标放大/缩小页面：ctrl + +/-快速定位到某行：ctrl + G*/</script><p>今天天气很好</p></body></html>

2.2.1标题标签 

<body><h1>标题标签</h1><h1>标题一共六级选</h1><h2>文字加粗一行显</h2><h3>由小到大依次减</h3><h4>从重到轻随之变</h4><h5>语法规范书写后</h5><h6>具体效果刷新见</h6>------pink老师
</body>

2.2.2段落和换行标签

 

<body><p>在全球化背景下,大国关系格局<br />的构建成为国际政治中的重要议题。作为世界第二大经济体和联合国安理会常任理事国，中国在构建大国关系格局中发挥着举足轻重的作用。本文旨在探讨中国构建大国关系格局的路径与策略。</p><p>中国构建大国关系格局的首要原则是坚持和平共处五项原则，即互相尊重主权和领土完整、互不侵犯、互不干涉内政、平等互利、和平共处。这些原则不仅是中国外交政策的基础，也是处理大国关系的基本准则。中国主张通过对话和协商解决国际争端，反对任何形式的霸权主义和强权政治，致力于维护国际秩序的稳定性和连续性。</p>
</body>

2.2.3文本格式化标签

<body>我是<strong>加粗</strong>的文字我是<b>加粗</b>的文字我是<em>倾斜</em>的文字我是<i>倾斜</i>的文字我是<del>删除线</del>我是<s>删除线</s>我是<ins>下划线</ins>我是<u>下划线</u></body>

 

2.2.4div和span标签

<body><div>日化区</div><div>食品区</div><span>薯片</span><span>辣条</span><span>面包</span>
</body>

2.3.1 图像标签和路径

<body><h4>图像标签</h4><img src="图像标签1.jpg" /><h4>alt替换文本</h4><img src="图像标签2.jpg" alt="加载出错" /><h4>title提示文本</h4><img src="图像标签1.jpg" alt="加载出错" title="看得懂的人有福了" /><h4>width /height,修改其中任意一个等比例缩放</h4><img src="图像标签1.jpg" width="300" /><h4>border 边框</h4><img src="图像标签1.jpg" border="10" />
</body>

2.3.2路径

<body><img src="图像标签1.jpg" height="300" /><img src="images/下一级路径.jpg" height="300" /><img src="../上一级路径.jpg" height="300" /><img src="C:\Users\spring\Desktop\前端基础\案例\图像标签1.jpg" height="300" /><img src="https://ylsy.hnu.edu.cn/images/stories/weixintupian_20250219092247.jpg" height="300" /></body>

注意：相对路径图片都应该在vscode的资源管理器中，否则加载不出来

2.3.3超链接标签

<body><h4 id="head">1.外部链接</h4><a href="http://www.itcast.cn">传智播客</a>target默认值是_self，即当前页面打开<br /><a href="http://www.qq.com" target="_blank">腾讯</a>target值为_blank，新窗口打开<br /><a href="#tail">去往底部</a><h4>2.内部链接：网站内部页面之间的相互链接</h4><a href="01-第一个页面.html" target="_blank">第一个页面（在同一个目录下）</a><h4>3.空链接:#</h4><a href="#" target="_blank">deepseek的住址</a><h4>4.下载链接：地址链接的是文件.exe或者zip等压缩包形式</h4><a href="图像标签1.zip" target="_blank">下载文件</a><h4>5.网页元素的链接</h4><a href="http://www.baidu.com" target="_blank"> <img src=" img1.jpg" /> </a><h4 id="tail">6.锚点链接</h4><a href="#head">回到开头</a>
</body>

2.4注释标签

2.5特殊字符

<body><!-- 我要     学习<br /> -->我要&nbsp;&nbsp;&nbsp;&nbsp;学习<br /><!-- <p> 是一个段落标签 -->&lt; p &gt; 是一个段落标签
</body>

相关文章：

【前端基础】Day 1 HTML

总结&#xff1a; 1. Web标准的构成 2. 基本标签 目录 1. Web标准的构成 2. 基本标签 2.1快捷键 2.2.1标题标签 2.2.2段落和换行标签 2.2.3文本格式化标签 2.2.4div和span标签 2.3.1 图像标签和路径 2.3.2路径 2.3.3超链接标签 2.4注释标签 2.5特殊字符 1. Web标准…...

编程日记 2026/4/5 13:10:01

【前端基础】Day 2 HTML

目录 1.表格标签 2.列表标签 3.表单标签 4.综合案例 5.查阅文档 1.表格标签 <body><table align"center" border"1" cellpadding"0" cellspacing"0" width"500" height"100"><thead> …...

编程日记 2026/4/4 3:40:57

Docker run --add-host参数解析（在容器启动时向/etc/hosts文件中添加自定义的主机名与IP映射）（适用于临时调试或测试）

文章目录 Docker run --add-host 参数解析一、参数概述二、工作原理三、应用场景1. **开发与调试**2. **环境隔离**3. **跨网络访问** 四、使用示例示例 1&#xff1a;单个自定义映射示例 2&#xff1a;多个映射同时使用 五、注意事项六、总结 Docker run --add-host 参数解析 …...

编程日记 2025/10/26 8:37:10

电商网站如何解决高并发问题

电商网站如何解决高并发问题&#xff1f;当下电商行业蓬勃发展&#xff0c;电商网站面临的用户访问量和高并发问题日益严峻。在电商大促、节日促销等关键时期&#xff0c;如何确保网站稳定运行&#xff0c;提升用户体验&#xff0c;成为了电商企业亟需解决的问题。小编推荐大家…...

编程日记 2026/4/5 22:20:59

MySQL 入门“鸡”础

一、Win10 与Ubuntu安装 以下是一篇针对 Ubuntu 安装 MySQL 的过程中写的示例&#xff1a; --- # Ubuntu 安装 MySQL 详细指南 在本教程中&#xff0c;我们将向您展示如何在 Ubuntu 上安装 MySQL&#xff0c;并完成基本的安全配置。以下是具体步骤&#xff1a; # 1. 安装 …...

编程日记 2026/2/6 11:19:19

若依前后端分离框架修改3.8.9版本（重点在安全框架讲解与微信小程序登录集成）

若依模板改造&#xff08;3.8.9&#xff09; 1、基础改造 下载代码 从[RuoYi-Vue: &#x1f389; 基于SpringBoot&#xff0c;Spring Security&#xff0c;JWT&#xff0c;Vue & Element 的前后端分离权限管理系统&#xff0c;同时提供了 Vue3 的版本](https://gitee.co…...

编程日记 2026/4/4 3:21:06

selenium爬取苏宁易购平台某产品的评论

目录 selenium的介绍 1、 selenium是什么&#xff1f; 2、selenium的工作原理 3、如何使用selenium&#xff1f; webdriver浏览器驱动设置 关键步骤 代码 运行结果 注意事项 selenium的介绍 1、 selenium是什么&#xff1f; 用于Web应用程序测试的工具。可以驱动浏览…...

编程日记 2026/4/5 12:49:49

kubernetes-完美下载

话不多说&#xff0c;直接开始从0搭建k8s集群 环境&#xff1a;centous7.9 2核 20G k8s-master 192.168.37.20 k8s-node1 192.168.37.21 k8s-node2 192.168.37.22 一&#xff1a;设置主机名 #设置主机名 hostnamectl set-hostname k8s-master hostnamectl set-h…...

编程日记 2026/4/3 4:19:39

PostgreSQL 常用函数

PostgreSQL 常用函数 在数据库管理系统中&#xff0c;函数是执行特定任务的基本构建块。PostgreSQL 是一个功能强大的开源关系数据库管理系统&#xff0c;提供了丰富的内置函数&#xff0c;这些函数极大地增强了数据库操作的能力。以下是一些在 PostgreSQL 中常用的函数&#…...

编程日记 2025/8/19 14:30:02

【初阶数据结构】树和二叉树

目录 前言树的概念与结构树的概念树的相关概念树的表示 二叉树的概念及结构二叉树的概念几种特殊的二叉树1.满二叉树2.完全二叉树 二叉树的性质二叉树的存储结构1、顺序存储2、链式存储 前言 前面我们学习了顺序表&#xff0c;单链表&#xff0c;栈和队列&#xff0c;它们在逻…...

编程日记 2026/4/4 6:14:19

【中等】59.螺旋矩阵Ⅱ

题目描述 给你一个正整数 n &#xff0c;生成一个包含 1 到 n2 所有元素&#xff0c;且元素按顺时针顺序螺旋排列的 n x n 正方形矩阵 matrix 。 示例 1&#xff1a; 输入&#xff1a;n 3 输出&#xff1a;[[1,2,3],[8,9,4],[7,6,5]]示例 2&#xff1a; 输入&#xff1a;n…...

编程日记 2026/4/4 7:14:13

Spring Boot + Vue 接入腾讯云人脸识别API（SDK版本3.1.830）

一、需求分析 这次是基于一个Spring Boot Vue的在线考试系统进行二次开发&#xff0c;添加人脸识别功能以防止学生替考。其他有对应场景的也可按需接入API&#xff0c;方法大同小异。 主要有以下两个步骤&#xff1a; 人脸录入&#xff1a;将某个角色&#xff08;如学生&…...

编程日记 2026/3/19 14:26:16

测试工程师玩转DeepSeek之Prompt

以下是测试工程师使用DeepSeek的必知必会提示词指南&#xff0c;分为核心场景和高效技巧两大维度&#xff1a; 一、基础操作提示模板 1. 测试用例生成 "作为[金融系统/物联网设备/云服务]测试专家&#xff0c;请为[具体功能模块]设计测试用例&#xff0c;要求&#xff1…...

编程日记 2026/4/5 15:15:18

虚中断理解

虚中断&#xff08;Virtual Interrupt&#xff09;是指在计算机系统中&#xff0c;特别是在虚拟化环境下&#xff0c;虚拟机或虚拟操作系统中使用的一种中断机制。它允许虚拟机监控程序&#xff08;Hypervisor&#xff09;或虚拟化管理程序在虚拟机之间进行中断处理和资源管理。…...

编程日记 2025/7/14 5:29:50

PC端-发票真伪查验系统-Node.js全国发票查询接口

在现代企业的财务管理中&#xff0c;发票真伪的验证至关重要。随着电子发票的普及&#xff0c;假发票问题日益严峻&#xff0c;如何高效、准确的对发票进行真伪查验&#xff0c;已经成为各类企业在日常运营中必须解决的关键问题。翔云发票查验接口做企业财务管理、税务合规的好…...

编程日记 2026/2/26 5:21:26

给Python加入自己的函数

在日常研究中&#xff0c;我们有时候会写一些Python没有的&#xff0c;但是很多个脚本都需要用的函数&#xff0c;反复的复制函数太过麻烦&#xff0c;我们可以进行一些简单的操作来变成一个可以直接import的函数 1. 首先我们新建一个.py文件&#xff0c;把我们的函数放进去&a…...

编程日记 2025/8/24 9:11:11

JAVA中包装类和泛型 通配符

目录 1. 包装类 1.1 基本数据类型和对应的包装类 1.2 装箱和封箱 1.3 自动自动装箱和封箱 2. 什么是泛型 3. 引出泛型 3.1 语法 4. 泛型类的使⽤ 4.1 语法 4.2 ⽰例 4.3 类型推导(Type Inference) 5 泛型的上界 5.1 语法 6. 通配符 6.1 通配符解决什么问题 6.2…...

编程日记 2026/4/4 6:46:57

Qt TCP服务端和客户端程序

1、服务端程序 利用QtCreator新建QMainWindow或QWidget工程&#xff0c;绘制UI如下所示。 mainwindow.h代码如下&#xff1a; #ifndef MAINWINDOW_H #define MAINWINDOW_H#include <QMainWindow> #include <QTcpServer> #include <QTcpSocket> #include &l…...

编程日记 2026/4/5 8:41:45

level2Day5

Makefile make是工程管理器 先写了1个f1.c里面写了一个函数 然后f2.c里面也写了一个函数 还有一个头节点 又写了一个makefile的函数 输入make编译&#xff0c;但是我没装make需要装一下。 sudo apt install make 然后make&#xff0c; Makefile变量的使用 通过赋值&#xff…...

编程日记 2026/4/4 6:36:54

青少年学习编程如何平衡使用DeepSeek与独立思考

前言 对于正在学习编程的青少年来说&#xff0c;DeepSeek生成代码的功能是一把双刃剑。如果合理使用&#xff0c;它可以成为青少年学习编程的有力助手&#xff1b;但如果过度依赖&#xff0c;可能会阻碍他们的思维发展和能力提升。关键在于引导青少年正确看待工具的作用&#…...

编程日记 2026/4/2 17:51:46

MySQL 8.0 Enterprise Backup (MEB) 备份与恢复实践指南

一、MEB 核心价值与特性 1.1 产品定位 MySQL Enterprise Backup (MEB) 是Oracle官方推出的企业级物理热备份工具&#xff0c;专为MySQL 8.0设计&#xff0c;支持InnoDB/XtraDB引擎的在线备份&#xff0c;同时兼容MyISAM表的锁定备份。 1.2 核心优势 零停机热备份&#xff1…...

编程日记 2025/6/30 10:10:56

UE5从入门到精通之多人游戏编程常用函数

文章目录 前言一、权限与身份判断函数1. 服务器/客户端判断2. 网络角色判断二、网络同步与复制函数1. 变量同步2. RPC调用三、连接与会话管理函数1. 玩家连接控制2. 网络模式判断四、实用工具函数前言 UE5给我们提供了非常强大的多人网路系统，让我们可以很方便的开发多人游戏…...

编程日记 2025/7/1 14:06:06

[Web 安全] 反序列化漏洞 - 学习笔记

关注这个专栏的其他相关笔记&#xff1a;[Web 安全] Web 安全攻防 - 学习手册-CSDN博客 0x01&#xff1a;反序列化漏洞 — 漏洞介绍 反序列化漏洞是一种常见的安全漏洞&#xff0c;主要出现在应用程序将 序列化数据 重新转换为对象&#xff08;即反序列化&#xff09;的过程中…...

编程日记 2025/12/28 13:30:50

minio作为K8S后端存储

docker部署minio mkdir -p /minio/datadocker run -d \-p 9000:9000 \-p 9001:9001 \--name minio \-v /minio/data:/data \-e "MINIO_ROOT_USERjbk" \-e "MINIO_ROOT_PASSWORDjbjbjb123" \quay.io/minio/minio server /data --console-address ":90…...

编程日记 2026/4/4 6:59:26

Leetcode2717：半有序排列

题目描述&#xff1a; 给你一个下标从 0 开始、长度为 n 的整数排列 nums 。 如果排列的第一个数字等于 1 且最后一个数字等于 n &#xff0c;则称其为 半有序排列 。你可以执行多次下述操作&#xff0c;直到将 nums 变成一个 半有序排列 &#xff1a; 选择 nums 中相邻的两…...

编程日记 2025/12/5 2:05:00

redis小记

redis小记 下载redis sudo apt-get install redis-server redis基本命令 ubuntu16下的redis没有protected-mode属性&#xff0c;就算sudo启动&#xff0c;也不能往/var/spool/cron/crontabs写计划任务&#xff0c;感觉很安全 #连接到redis redis-cli -h 127.0.0.1 -p 6379 …...

编程日记 2026/4/4 6:57:28

C/C++基础知识复习（47）

1) 接口继承与实现继承的区别 接口继承 接口继承意味着定义一个类&#xff0c;它只声明一组方法&#xff08;通常是纯虚函数&#xff09;&#xff0c;但是不提供任何实现。继承这个接口的子类必须实现这些方法。接口继承的主要目的是规范化行为。 C 例子&#xff1a; 在 C 中…...

编程日记 2026/4/5 16:16:34

OkHttp、Retrofit、RxJava：一文讲清楚

一、okHttp的同步和异步请求 Call 是 OkHttp 的核心接口&#xff0c;代表一个已准备好执行的 HTTP 请求。它支持 同步 和 异步 两种模式&#xff1a; enqueue——>okHttp异步 OkHttpClient client new OkHttpClient();Request request new Request.Builder().url("…...

编程日记 2025/11/12 9:13:23

netty详细使用

Netty是一个基于Java的高性能网络应用框架&#xff0c;主要用于快速开发高性能的网络通信应用程序。以下是Netty的详细使用步骤&#xff1a; 添加Netty依赖&#xff1a;在项目的pom.xml中添加Netty的依赖项&#xff0c;例如&#xff1a; <dependency><groupId>io…...

编程日记 2026/3/4 4:10:04

计算机视觉(opencv-python)入门之图像的读取,显示,与保存

在计算机视觉领域&#xff0c;Python的cv2库是一个不可或缺的工具&#xff0c;它提供了丰富的图像处理功能。作为OpenCV的Python接口&#xff0c;cv2使得图像处理的实现变得简单而高效。 示例图片 目录 opencv获取方式 图像基本知识 颜色空间 RGB HSV CV2常用图像处理方…...

编程日记 2026/4/5 11:07:33