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

【HTML— 快速入门】HTML 基础

article 2026/4/4 13:05:54

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

准备工作

vscode下载

百度网盘 Subline Text 下载

Sublime Text下载

百度网盘 vscode 下载

Sublime Text 是一款轻量好用的文本编辑器，我们在写前端代码时，使用 Sublime Text 打开比使用记事本打开，得到的代码体验更好，比 vscode 更轻量；

在这里插入图片描述

Sublime Text使用

创建一个HTML文件

在这里插入图片描述

使用subline text 打开HTML文件，并用浏览器运行

在这里插入图片描述

HTML基础

概念

HTML(Hyper Text Markup Language)，超文本标记语言；

超文本：

比文本要强大，通过链接和交互式方式来组织和呈现信息的文本形式，不仅仅有文本，还可能包含图片，音频，或者自已经审阅过它的学者所加的评注、补充或脚注等等；

标记语言：

由标签构成的语言；

认识 HTML 标签

HTML代码是由"标签"构成的，形如:

<h3>我是三级标题</h3>
  • 标签名(body) 放到<>中
  • 大部分标签成对出现：<h3>为开始标签，</h3>为结束标签.
  • 少数标签只有开始标签，称为"单标签".
  • 开始标签和结束标签之间，写的是标签的内容；
<h3 id="myId">我是三级标题</h3>
  • 开始标签中可能会带有"属性"，id属性相当于给这个标签设置了一个唯一的标识符(身份证号码).

HTML 文件基本结构

<html><head><title>我是一个标签</title></head><body><h1>我是一级标题</h1></body>
</html>
  • html 标签是整个html文件的根标签 (最顶层标签)；
  • head 标签中写页面的属性；
  • body 标签中写的是页面上显示的内容；
  • title 标签中写的是页面的标题；

标签之间的结构关系,构成了一个 DOM 树，Document Object Mode(文档对象模型)

在这里插入图片描述

在这里插入图片描述

双击打开 test.html 文件

在这里插入图片描述

刚开始我们没写 <head>， <body> 等标签，在浏览器中依旧可以运行，因为浏览器有良好的“鲁棒性”，哪怕代码不规范，浏览器也能解析代码。

使用 chrome 的开发者工具查看页面的结构

F12 或者右键审查元素，开启开发者工具，切换到Elements标签，就可以看到页面结构细节.

在这里插入图片描述

快速入门开发

开发工具：vscode

在 VS Code中创建文件 xxx.html

在这里插入图片描述

直接输入! ，按 Enter或tab键，此时能自动生成代码的主体框架.

在这里插入图片描述

在这里插入图片描述

点击 ctrl+s保存代码，然后在刚刚的文件夹中打开该文件

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

相关文章：

【HTML— 快速入门】HTML 基础

准备工作 vscode下载 百度网盘 Subline Text 下载 Sublime Text下载 百度网盘 vscode 下载 Sublime Text 是一款轻量好用的文本编辑器&#xff0c;我们在写前端代码时&#xff0c;使用 Sublime Text 打开比使用记事本打开&#xff0c;得到的代码体验更好&#xff0c;比 vscode…...

编程日记 2026/3/25 23:37:57

【MATLAB中的图像数据结构】

MATLAB中的图像数据结构 目录 MATLAB中的图像数据结构目标 &#xff1a;知识点 &#xff1a;1. 图像的存储方式 &#xff1a;2. 图像的颜色空间 &#xff1a;3. 图像的像素操作 &#xff1a; 示例代码 &#xff1a;1. 读取和显示图像 &#xff1a;2. 查看图像信息 &#xff1a;…...

编程日记 2026/3/8 8:01:21

在线抽奖系统——项目介绍

目录 项目介绍 页面预览 需求分析 管理员登录注册 人员模块 奖品模块 活动模块 抽奖模块 系统设计 系统架构 项目环境 数据库设计 安全设计 完整代码&#xff1a;项目完整代码/在线抽奖系统/lottery-system Echo/project - 码云 - 开源中国 项目介绍 利用 MySQ…...

编程日记 2026/3/6 10:08:39

day7作业

编写一个如下场景&#xff1a; 有一个英雄Hero类&#xff0c;私有成员&#xff0c;攻击&#xff08;Atx&#xff09;&#xff0c;防御&#xff08;Defense&#xff09;&#xff0c;速度&#xff08;Speed)&#xff0c;生命值&#xff08;Blood)&#xff0c;以及所有的set get 方…...

编程日记 2026/2/23 6:56:26

JavaScript 系列之：Ajax、Promise、Axios

前言 同步&#xff1a;会阻塞。同步代码按照编写的顺序逐行依次执行&#xff0c;只有当前的任务完成后&#xff0c;才会执行下一个任务。 异步&#xff1a;异步代码不会阻塞后续代码的执行。当遇到异步操作时&#xff0c;JavaScript 会将该操作放入任务队列中&#xff0c;继续…...

编程日记 2026/3/18 22:42:41

AI人工智能机器学习之神经网络

1、概要 本篇学习AI人工智能机器学习之神经网络&#xff0c;以MLPClassifier和MLPRegressor为例&#xff0c;从代码层面讲述最常用的神经网络模型MLP。 2、神经网络 - 简介 在 Scikit-learn 中&#xff0c;神经网络是通过 sklearn.neural_network 模块提供的。最常用的神经网…...

编程日记 2026/3/15 6:21:27

鸿蒙开发深入浅出01（基本环境搭建、页面模板与TabBar）

鸿蒙开发深入浅出01&#xff08;基本环境搭建、页面模板与TabBar&#xff09; 1、效果展示2、下载 DevEco Studio3、创建项目4、新建页面模板5、更改应用信息6、新建以下页面7、Index.ets8、真机运行9、图片资源文件 1、效果展示 2、下载 DevEco Studio 访问官网根据自己的版本…...

编程日记 2026/3/15 14:16:33

FreeRTOS动态任务和静态任务创建

一.动态任务创建 1.搭建任务框架 去task.c中将任务参数复制到main中 然后将const去掉&#xff0c;它会限制参数类型&#xff0c;任务大小、任务优先级、任务句柄需要去宏定义&#xff0c;任务句柄是指针类型要取地址 vTaskStartScheduler(); //开启任务调度&#xff0c;.c…...

编程日记 2026/3/25 16:57:16

QT:Graphics View的坐标系介绍

在 Qt 的 Graphics View 框架中&#xff0c;存在三种不同的坐标系&#xff0c;分别是 物品坐标系&#xff08;Item Coordinates&#xff09;、场景坐标系&#xff08;Scene Coordinates&#xff09; 和 视图坐标系&#xff08;View Coordinates&#xff09;。这三种坐标系在图形…...

编程日记 2026/3/31 3:52:30

C# httpclient 和 Flurl.Http 的测试

关于C#调用接口或Post,Flurl封装了httpclient, CSDN有哥们提供了一个公网的测试网站&#xff0c;可以测试Post调用&#xff0c;我写了2个函数&#xff0c;测试httpclient和Flurl使用Post: async 和 await 是成对使用的&#xff0c;为了接受web异步返回的数据&#xff0c;winfor…...

编程日记 2026/3/27 4:59:24

精选案例展 | 智己汽车—全栈可观测驱动智能化运营与成本优化

本案例为“观测先锋 2024 可观测平台创新应用案例大赛”精选案例&#xff0c;同时荣获IT168“2024技术卓越奖评选-年度创新解决方案”奖。 项目背景 近年来&#xff0c;中国汽车行业进入转型升级阶段&#xff0c;智能网联技术成为行业发展的核心。车联网、自动驾驶等技术的加速…...

编程日记 2026/3/19 10:27:10

阿里云可观测全面拥抱 OpenTelemetry 社区

作者&#xff1a;古琦 在云计算、微服务、容器化等技术重塑 IT 架构的今天&#xff0c;系统复杂度呈指数级增长。在此背景下&#xff0c;开源可观测性技术已从辅助工具演变为现代 IT 系统的"数字神经系统"&#xff0c;为企业提供故障预警、性能优化和成本治理的全方…...

编程日记 2026/3/29 10:42:41

剑指 Offer II 032. 有效的变位词

comments: true edit_url: https://github.com/doocs/leetcode/edit/main/lcof2/%E5%89%91%E6%8C%87%20Offer%20II%20032.%20%E6%9C%89%E6%95%88%E7%9A%84%E5%8F%98%E4%BD%8D%E8%AF%8D/README.md 剑指 Offer II 032. 有效的变位词 题目描述 给定两个字符串 s 和 t &#xff0c…...

编程日记 2025/8/10 15:07:59

AcWing 蓝桥杯集训·每日一题2025·密接牛追踪2

密接牛追踪2 农夫约翰有 N 头奶牛排成一排&#xff0c;从左到右依次编号为 1∼N。 不幸的是&#xff0c;有一种传染病正在蔓延。 最开始时&#xff0c;只有一部分奶牛受到感染。 每经过一个晚上&#xff0c;受感染的牛就会将病毒传染给它左右两侧的牛&#xff08;如果有的话…...

编程日记 2026/3/5 1:33:05

银河麒麟高级服务器操作系统在线调整/pro/{PID}/limits文件中nofile的软限制和硬限制参数值操作方法

银河麒麟高级服务器操作系统在线调整/pro/{PID}/limits文件中nofile的软限制和硬限制参数值操作方法 一 系统环境二 使用场景三 操作步骤 一 系统环境 [rootlocalhost ~]# nkvers ############## Kylin Linux Version ################# Release: Kylin Linux Advanced Server…...

编程日记 2026/2/24 21:13:07

山大软院ai导论实验之采用BP神经网络分类MNIST数据集

目录 实验代码 实验内容 实验代码 import matplotlib.pyplot as plt from matplotlib import font_manager import torch from torch.utils.data import DataLoader import torchvision from torchvision import transforms# 数据预处理 transform transforms.Compose([tra…...

编程日记 2026/3/24 8:17:36

threeJs+vue 轻松切换几何体贴图

嗨&#xff0c;我是小路。今天主要和大家分享的主题是“threeJsvue 轻松切换几何体贴图”。 想象一下&#xff0c;手头上正好有个在线3D家具商店&#xff0c;用户不仅可以看到产品的静态图片&#xff0c;还能实时更换沙发的颜色或材质&#xff0c;获得真实的购物体验。…...

编程日记 2026/3/29 19:31:36

【python】01_写在前面的话

又是爆肝干文的日子&#xff0c;继上次说要出一期Python新手入门教程系列文章后&#xff0c;就在不停地整理和码字&#xff0c;终于是把【基础入门】这一块给写出来了。 不积跬步无以至千里&#xff0c;不积小流无以成江海&#xff0c;一个一个板块的知识积累&#xff0c;早晚你…...

编程日记 2026/3/16 16:19:51

跨平台公式兼容性大模型提示词模板(飞书 + CSDN + Microsoft Word)

飞书云文档 CSDN MD编辑器 Microsoft Word 跨平台公式兼容方案&#xff1a; 一、背景痛点与解决方案 在技术文档创作中&#xff0c;数学公式的跨平台渲染一直存在三大痛点&#xff1a; 飞书云文档&#xff1a;原生KaTeX渲染与导出功能存在语法限制微软Word&#xff1a;Math…...

编程日记 2026/3/26 5:46:59

【Python爬虫(85)】联邦学习：爬虫数据协作的隐私保护新范式

【Python爬虫】专栏简介&#xff1a;本专栏是 Python 爬虫领域的集大成之作&#xff0c;共 100 章节。从 Python 基础语法、爬虫入门知识讲起&#xff0c;深入探讨反爬虫、多线程、分布式等进阶技术。以大量实例为支撑&#xff0c;覆盖网页、图片、音频等各类数据爬取&#xff…...

编程日记 2026/4/2 4:23:20

深入理解 并查集LRUCaChe

并查集&LRUCaChe 个人主页&#xff1a;顾漂亮 文章专栏&#xff1a;Java数据结构 1.并查集的原理 在一些应用问题中&#xff0c;需要将n个不同的元素划分成一些不相交的集合。开始时&#xff0c;每个元素自成一个单元素集合&#xff0c;然后根据一定规律将归于同一组元素的…...

编程日记 2026/3/29 11:17:01

最新版本SpringAI接入DeepSeek大模型，并集成Mybatis

当时集成这个环境依赖冲突&#xff0c;搞了好久&#xff0c;分享一下依赖配置 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instan…...

编程日记 2026/4/2 11:46:48

Effective Python：（17）

Effective Python提供90条python编程技巧和秘籍&#xff0c;对于我们养成良好的编程习惯&#xff0c;减少程序出错非常重要。 这条就是一条很好的建议&#xff0c;即尽量使用抛出异常来处理意外情况&#xff0c;尽量不要用none作为返回值进行判断。问题也比较显然&#xff0c;如…...

编程日记 2026/3/26 0:07:51

3-2 WPS JS宏 工作簿的打开与保存(模板批量另存为工作)学习笔记

************************************************************************************************************** 点击进入 -我要自学网-国内领先的专业视频教程学习网站 *******************************************************************************************…...

编程日记 2026/3/7 0:23:59

React + TypeScript 复杂布局开发实战

React TypeScript 复杂布局开发实战 一、项目架构设计&#xff08;基于最新技术栈&#xff09; 1.1 技术选型与工程创建 # 使用Vite 5.x React 19 TypeScript 5.4 npx create-vitelatest power-designer-ui --template react-ts cd power-designer-ui && npm inst…...

编程日记 2026/3/10 3:24:51

滑动验证组件-微信小程序

微信小程序-滑动验证组件&#xff0c;直接引用就可以了&#xff0c;效果如下&#xff1a; 组件参数&#xff1a; 1.enable-close&#xff1a;是否允许关闭&#xff0c;默认true 2.bind:onsuccess&#xff1a;验证后回调方法 引用方式&#xff1a; <verification wx:if&qu…...

编程日记 2026/3/24 3:20:56

Linux 命令大全完整版（12）

Linux 命令大全 5. 文件管理命令 ln(link) 功能说明&#xff1a;连接文件或目录。语　　法&#xff1a;ln [-bdfinsv][-S <字尾备份字符串>][-V <备份方式>][--help][--version][源文件或目录][目标文件或目录] 或 ln [-bdfinsv][-S <字尾备份字符串>][-V…...

编程日记 2026/3/6 13:15:12

在VSCode中安装jupyter跑.ipynb格式文件

个人用vs用的较多&#xff0c;不习惯在浏览器单独打开jupyter&#xff0c;看着不舒服&#xff0c;直接上教程。 1、在你的环境中pip install ipykernel 2、在vscode的插件中安装jupyter扩展 3、安装扩展后&#xff0c;打开一个ipynb文件&#xff0c;并且在页面右上角配置内核 …...

编程日记 2026/3/21 14:01:07

IDEA配置JSP环境

首先下载IDEA2021.3&#xff0c;因为最新版本不能简单配置web开发环境。然后新建一个java开发项目&#xff1a; 然后右键创建的项目&#xff0c;添加web框架&#xff1a; 选择web appliciation 在web inf文件夹下创建classes和lib文件夹&#xff1a; 点击file &#xff0c;选择…...

编程日记 2026/3/15 20:12:47

Idea 中 Project Structure简介

在 IntelliJ IDEA 中&#xff0c;Project Structure&#xff08;项目结构&#xff09;对话框是一个非常重要的配置界面&#xff0c;它允许你对项目的各个方面进行详细的设置和管理。下面将详细介绍 Project Structure 中各个主要部分的功能和用途。 1. Project&#xff08;项…...

编程日记 2026/4/3 2:32:39