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

【HTML— 快速入门】HTML 基础

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述


准备工作


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…...

github操作

在本地创建一个 Git 仓库并将其上传到 GitHub 的整个流程可以分为以下几个步骤。以下是详细的说明和对应的命令&#xff1a; 1. 安装 Git 确保你的系统已经安装了 Git。如果未安装&#xff0c;可以通过以下方式安装&#xff1a; Windows: 下载 Git for Windows 并安装。macOS…...

基于ArcGIS Pro、R、INVEST等多技术融合下生态系统服务权衡与协同动态分析实践应用

文章目录 前言第一章、生态系统服务第二章、平台基础一、ArcGIS Pro介绍二、R环境配置与基础操作 第三章、数据获取与预处理第四章、生态系统服务估算第五章、生态系统服务权衡与协同第六章、空间统计分析第七章、论文撰写与图表复现了解更多 ————————————————…...

Python Cookbook-2.18 从指定的搜索路径寻找文件

任务 给定一个搜索路径(一个描述目录信息的字符串)&#xff0c;需要根据这个路径和请求的文件名找到第一个符合要求的文件。 解决方案 需要循环指定的搜索路径中的目录: import os def search_file(filename,search path&#xff0c;pathsepos.pathsep): """…...

遗传算法详解及在matlab中的使用

遗传算法分析 一 遗传算法概述1 算法概念2 基本特点3 启发式算法 二 原理与方法1 实现步骤1.1 个体编码1.2 种群初始化1.3 适应度计算1.4 选择运算1.5 交叉运算1.6 变异运算 2 总结 三 应用实例1 GA工具使用教程2 设置目标函数3 搜索最小值4 搜索最大值 一 遗传算法概述 本章简…...

智能AI替代专家系统(ES)、决策支持系统(DSS)?

文章目录 前言一、专家系统&#xff08;ES&#xff09;是什么&#xff1f;二、决策支持系统&#xff08;DSS&#xff09;是什么&#xff1f;1.决策支持系统定义2.决策系统的功能与特点3.决策支持系统的组成 三、专家系统&#xff08;ES&#xff09;与决策支持系统&#xff08;D…...

活在AI原生时代的05后,开始用AI创业

大家好&#xff0c;我是Shelly&#xff0c;一个专注于输出AI工具和科技前沿内容的AI应用教练&#xff0c;体验过300款以上的AI应用工具。关注科技及大模型领域对社会的影响10年。关注我一起驾驭AI工具&#xff0c;拥抱AI时代的到来。 人工智能&AIGC术语100条 Shelly聊AI-重…...

【官方配图】win10/win11 安装cuda 和 cudnn

文章目录 参考资料1.安装cuda toolkit1. 下载安装包2.安装验证 2. 安装cudnn下载cudnn安装包安装cudnn安装后的配置 参考资料 官方nvidia安装cuda官方nvidia安装cudnn 1.安装cuda toolkit 1. 下载安装包 下载地址 https://developer.nvidia.com/cuda-downloads?target_osW…...

释放微软bing的力量:深度剖析其主要功能

在浩瀚无垠的互联网海洋中,搜索引擎就如同指南针,引领我们找到所需要的信息。微软必应凭借其一系列强大功能,在搜索引擎领域脱颖而出,成为极具竞争力的一员。在这篇博客文章中,我们将深入探讨微软必应的主要功能,这些功能使其独具特色,成为全球用户的得力工具。 1. 智能…...

【Nginx 】Nginx 部署前端 vue 项目

1. 项目打包 1.1 安装依赖 在项目部署之前&#xff0c;确保开发环境中已安装Node.js和npm&#xff0c;这是运行Vue项目的基础。通过执行npm install命令&#xff0c;可以安装项目所需的所有依赖。这一步是打包流程的前提&#xff0c;确保了后续编译的顺利进行。 根据npm的官…...

DO-254航空标准飞行器电机控制器设计注意事项

DO-254航空标准飞行器电机控制器设计注意事项 1.核心要求1.1 设计保证等级(DAL)划分1.2生命周期管理1.3验证与确认2.电机控制器硬件设计的关键注意事项2.1需求管理与可追溯性2.2冗余与容错设计2.3验证与确认策略2.4元器件选型与管理2.5环境适应性设计2.6文档与配置管理3.应用…...

C# Unity 唐老狮 No.3 模拟面试题

本文章不作任何商业用途 仅作学习与交流 安利唐老狮与其他老师合作的网站,内有大量免费资源和优质付费资源,我入门就是看唐老师的课程 打好坚实的基础非常非常重要: Unity课程 - 游习堂 - 唐老狮创立的游戏开发在线学习平台 - Powered By EduSoho 如果你发现了文章内特殊的字体…...

视频推拉流EasyDSS点播平台云端录像播放异常问题的排查与解决

EasyDSS视频直播点播平台是一个功能全面的系统&#xff0c;提供视频转码、点播、直播、视频推拉流以及H.265视频播放等一站式服务。该平台与RTMP高清摄像头配合使用&#xff0c;能够接收无人机设备的实时视频流&#xff0c;实现无人机视频推流直播和巡检等多种应用。 最近&…...

【分布式锁通关指南 05】通过redisson实现分布式锁

引言 在上个篇章中&#xff0c;我们通过redis手撸了一套分布式锁&#xff0c;但是最后也提到了它依然存在不完美的地方。那么有没有更简单和靠谱的实现方式。当然有&#xff0c;在本篇章中&#xff0c;我们将讲解如何使用redisson框架实现分布式锁以及理解它的源码。 什么是red…...

路劲家园大学:教育创新赋能社区人文生态建设

2025年2月10日至13日&#xff0c;路劲家园大学集训活动成功举办&#xff0c;众多教育领域学者与一线教师齐聚&#xff0c;通过专题研讨、教学展示、技术探索等多元形式&#xff0c;为家园大学注入全新活力&#xff0c;探索教育创新发展之路。 双院揭牌 构建社区美育新生态 集训…...

【前端进阶】10 掌握前端框架模板引擎的实现原理

前端框架模板引擎的实现原理 当用户对页面进行操作&#xff0c;页面内容更新&#xff0c;我们要实现的功能包括 如果使用前端框架 如果使用数据驱动的方式&#xff0c;还可以让逻辑与UI解耦的方式&#xff0c;提升代码的可维护性&#xff0c;其中的数据绑定、事件绑定等功能&a…...

Spring Boot 接口 JSON 序列化优化:忽略 Null 值的九种解决方案详解

一、针对特定接口null的处理&#xff1a; 方法一&#xff1a;使用 JsonInclude 注解 1.1 类级别&#xff1a;在接口返回的 ‌DTO 类或字段‌ 上添加 JsonInclude 注解&#xff0c;强制忽略 null 值&#xff1a; 类级别&#xff1a;所有字段为 null 时不返回 JsonInclude(Js…...

Golang 中如何实现一个强大的重试机制,来解决瞬态错误

文章精选推荐 1 JetBrains Ai assistant 编程工具让你的工作效率翻倍 2 Extra Icons&#xff1a;JetBrains IDE的图标增强神器 3 IDEA插件推荐-SequenceDiagram&#xff0c;自动生成时序图 4 BashSupport Pro 这个ides插件主要是用来干嘛的 &#xff1f; 5 IDEA必装的插件&…...

冒泡排序算法优化

一 概述 冒泡排序是一种简单的交换排序算法,其核心思想是通过相邻元素比较和交换将最大元素逐步移动到数组末尾。 二、基础冒泡排序 void bubbleSort(int arr[], int n) { for (int i = 0; i < n-1; i++) { for (int j = 0; j < n-i-1; j++) { if…...

2025年Linux主力系统选择指南:基于最新生态的深度解析(附2025年发行版对比速查表)

Linux发行版生态在2025年持续演进&#xff0c;既有经典系统的迭代升级&#xff0c;也有新兴项目的崛起。本文结合最新行业动态&#xff0c;从个人用户到企业场景&#xff0c;梳理主力系统选择策略&#xff0c;助你找到最适合的Linux发行版。 一、新手友好型&#xff1a;平滑过渡…...

聊聊大数据测试开展方向有哪些?

目录 一、功能性测试与验证 二、数据的更新实时性测试 三、数据响应的及时性测试 四、算法的效果验证 五、AI算法系统的线上稳定性保证 大数据测试实施建议 大数据测试和传统软件测试有什么不同呢&#xff1f;可能涉及数据量大、多样性、处理速度这些特点。然后&#xff…...

Ubuntu 下 nginx-1.24.0 源码分析 - ngx_init_cycle 函数 - 详解(11)

详解&#xff08;11&#xff09; 初始化配置解析上下文 senv environ;ngx_memzero(&conf, sizeof(ngx_conf_t));/* STUB: init array ? */conf.args ngx_array_create(pool, 10, sizeof(ngx_str_t));if (conf.args NULL) {ngx_destroy_pool(pool);return NULL;}conf.te…...

AI与机器学习、深度学习在气候变化预测中的应用

全球气候变化是现代社会面临的最重要的环境挑战之一&#xff0c;影响了气温、降水、海平面、农业、生态系统等多个方面。气候变化的驱动因素主要包括温室气体排放、气溶胶浓度、火灾频发、海冰融化、叶绿素变化、农业变化和生态环境变化等。这些因素在全球范围内交互作用&#…...

湖仓一体概述

湖仓一体之前&#xff0c;数据分析经历了数据库、数据仓库和数据湖分析三个时代。 首先是数据库&#xff0c;它是一个最基础的概念&#xff0c;主要负责联机事务处理&#xff0c;也提供基本的数据分析能力。 随着数据量的增长&#xff0c;出现了数据仓库&#xff0c;它存储的是…...

Go红队开发—语法补充

文章目录 错误控制使用自定义错误类型错误包装errors.Is 和 errors.Aspanic捕获、recover 、defer错误控制练习 接口结构体实现接口基本类型实现接口切片实现接口 接口练习Embed嵌入文件 之前有师傅问这个系列好像跟红队没啥关系&#xff0c;前几期确实没啥关系&#xff0c;因为…...

【VSCode】VSCode下载安装与配置极简描述

VSCode 参考网址&#xff1a;[Visual Studio Code Guide | GZTime’s Blog]. 下载安装 下载地址&#xff1a;Download Visual Studio Code - Mac, Linux, Windows. 注&#xff1a;推荐不更改安装位置&#xff0c;并且在附加任务中“其他”中的四项全部勾选&#xff0c;即将用…...

揭开人工智能中 Tokens 的神秘面纱

揭开人工智能中 Tokens 的神秘面纱 在人工智能&#xff0c;尤其是自然语言处理&#xff08;NLP&#xff09;领域&#xff0c;"tokens" 是一个频繁出现且至关重要的概念。对于理解语言模型如何处理和理解人类语言&#xff0c;tokens 起着基础性的作用。那么&#xff…...

Node.js安装与学习的简单记录

1. 下载与安装 参考&#xff1a; 2024最新版Node.js下载安装及环境配置教程【保姆级】 Node.js中文网 选择长期维护版: 18.19.0&#xff0c;Windows 安装包 (.msi) 64位。 安装选项都默认&#xff0c;安装路径可以改一下。 查看node版本&#xff1a;node -v v18.19.0 查看npm版…...

Spring也能接入Deepseek?

引言 最近DeepSeek可谓风光无限&#xff0c;AI可谓是目前互联网最火热的几个名词&#xff0c;我也一直在关注他的发展&#xff0c;从以前的人工智障&#xff0c;到chatGPT的高不可攀&#xff08;价格太贵&#xff09;&#xff0c;再到DeepSeek的横空出世&#xff0c;才看到了A…...

STM32 物联网智能家居 (七) 设备子系统--风扇控制

STM32 物联网智能家居 (七) 设备子系统–风扇控制 一、概述 下面我们来讲解设备子系统中的风扇控制,这是我们设备子系统中的最后一章,相信前面大家一家掌握了这种架构分层的编程思想,后续会很容易将程序进行扩展和开发。 上一节我们介绍了OLED屏幕的编程思想,有很多小伙…...

MySQL—Keepalived+MySQL双主复制实现MySQL高可用

Keepalived原理&#xff1a; Keepalived 的原理主要基于虚拟路由冗余协议&#xff08;VRRP&#xff0c;Virtual Router Redundancy Protocol&#xff09;、健康检查机制和负载均衡机制&#xff0c;以下为你详细介绍&#xff1a; VRRP 协议实现高可用&#xff1a;VRRP 是 Keep…...

CSS 使用white-space属性换行

一、white-space属性的常见值 * 原本格式&#xff1a; 1、white-space:normal 默认值&#xff0c;空格和换行符会被忽略过滤掉&#xff1b;宽度不够时文本会自动换行 * 宽度足够时&#xff0c;normal 处理后的格式 * 宽度不够时&#xff0c; normal 处理后的格式 2、white-spa…...

【数据结构第十六节】实现链式结构二叉树(详细递归图解—呕心沥血版!)

必须有为成功付出代价的决心&#xff0c;然后想办法付出这个代价。云边有个稻草人-CSDN博客 这节课挺抽象&#xff08;苦笑&#xff09;&#xff0c;没事&#xff0c;我会帮你&#xff01;干就完了&#xff01; &#xff08;目录在路上&#xff09; 正文开始—— 引言 用链表…...

mysqldump 参数详解

mysqldump 是一个用于备份 MySQL 数据库的工具。它可以生成一组 SQL 语句,这些语句可以用来重现原始数据库对象定义和表数据。以下是一些常用的 mysqldump 参数及其详细解释: 常用参数 基本参数 --host=host_name, -h host_name: 指定 MySQL 数据库主机地址,默认为 localh…...

Vue-Flow绘制流程图(Vue3+ElementPlus+TS)简单案例

本文是vue3Elementplusts框架编写的简单可拖拽绘制案例。 1.效果图&#xff1a; 2.Index.vue主代码&#xff1a; <script lang"ts" setup> import { ref, markRaw } from "vue"; import {VueFlow,useVueFlow,MarkerType,type Node,type Edge } fro…...

【11】RUST使用cargo组织crate

文章目录 使用cargo组织crate重导出编译文档生成测试 cargo组织工作空间 TODOcrate.io账号 TODO暂时不看发布crate 使用cargo组织crate 重导出 在模块顶部使用pub use self::重导出&#xff0c;方便使用模块时候直接使用use mod_X::xxx。从而隐藏crate内部模块的结构。方便向…...

开放标准(RFC 7519):JSON Web Token (JWT)

开放标准&#xff1a;JSON Web Token 前言基本使用整合Shiro登录自定义JWT认证过滤器配置Config自定义凭证匹配规则接口验证权限控制禁用session缓存的使用登录退出单用户登录Token刷新双Token方案单Token方案 前言 JSON Web Token &#xff08;JWT&#xff09; 是一种开放标准…...

Linux上用C++和GCC开发程序实现不同MySQL实例下单个Schema之间的稳定高效的数据迁移

设计一个在Linux上运行的GCC C程序&#xff0c;同时连接两个不同的MySQL实例&#xff0c;两个实例中分别有两个Schema的表结构完全相同&#xff0c;复制一个实例中一个Schema里的所有表的数据到另一个实例中一个Schema里&#xff0c;使用以下快速高效的方法&#xff0c;加入异常…...

【Windows】Windows常用命令

目录 文件和目录相关命令系统信息查看命令网络相关命令进程管理命令磁盘管理命令用户和权限管理命令计划任务和脚本命令其他常用命令1. 文件和目录相关命令 命令作用示例cd切换目录cd C:\Usersdir列出目录内容dirmkdir创建新目录mkdir NewFolderrmdir删除空目录rmdir OldFolder…...

趣讲TCP三次握手

一、TCP三次握手简介 TCP&#xff08;Transmission Control Protocol&#xff0c;传输控制协议&#xff09;是一种面向连接的、可靠的、基于字节流的传输层通信协议。在TCP连接中&#xff0c;只有两方进行通信&#xff0c;它使用校验和、确认和重传机制来保证数据的可靠传输。…...

vue3中的标签属性中的Ref

用在普通 DOM 标签上&#xff0c;获取的是 DOM 节点&#xff1a; 当你在一个普通的 HTML 标签&#xff08;例如 <div>、<input> 等&#xff09;上使用 ref 属性时&#xff0c;ref 会返回该 DOM 元素的直接引用。这使得你可以在 JavaScript 代码中方便地访问和操作…...

vue3.2 + vxe-table4.x 实现多层级结构的 合并、 展开、收起 功能

<template><div style"padding: 20px"><vxe-table border :data"list" :height"800" :span-method"rowspanMethod"><vxe-column title"一级类目" field"category1"><template #defaul…...

DeepSeek R1 + 飞书机器人实现AI智能助手

效果 TFChat项目地址 https://github.com/fish2018/TFChat 腾讯大模型知识引擎用的是DeepSeek R1&#xff0c;项目为sanic和redis实现&#xff0c;利用httpx异步处理流式响应&#xff0c;同时使用buffer来避免频繁调用飞书接口更新卡片的网络耗时。为了进一步减少网络IO消耗&…...

Java虚拟机监控工具

在Java应用高频出现的OOM、卡顿、线程阻塞等问题背后&#xff0c;往往隐藏着复杂的JVM运行机制异常。本文将通过真实案例场景&#xff0c;演示6款主流工具的组合使用技巧&#xff0c;助你快速定位90%以上的线上故障。 一、基础监控三板斧 1. jstat&#xff1a;GC性能透视仪 …...

利用python和gpt写一个conda环境可视化管理工具

最近在学习python&#xff0c;由于不同的版本之间的差距较大&#xff0c;如果是用环境变量来配置python的话&#xff0c;会需要来回改&#xff0c;于是请教得知可以用conda来管理&#xff0c;但是conda在管理的时候老是要输入命令&#xff0c;感觉也很烦&#xff0c;于是让gpt帮…...

软件工程----统一过程模型RUP

统一过程RUP是一种以用例驱动、以体系结构为核心、迭代和增量的软件开发过程&#xff0c;由UML方法和工具支持&#xff0c;广泛应用于各类面向对象项目。 RUP本身支持可裁剪性&#xff0c;可应付给类领域软件和不同的项目规模 RUP蕴含了大量优秀的实践方法&#xff0c;如&…...

Spring的MutipartFile 会直接将流转成文件存放在临时目录嘛?

Spring 的 MultipartFile 默认会将上传的文件存储到临时目录。具体行为取决于底层的 MultipartResolver 实现。常见的实现包括&#xff1a; 1. StandardServletMultipartResolver&#xff08;默认实现&#xff09; 如果使用的是 StandardServletMultipartResolver&#xff08…...

基于大数据的空气质量数据可视化分析系统

【大数据】基于大数据的空气质量数据可视化分析系统&#xff08;完整系统源码开发笔记详细部署教程&#xff09;✅ 目录 一、项目简介二、项目界面展示三、项目视频展示 一、项目简介 本系统的实践价值在于将大数据技术与空气质量监测相结合&#xff0c;为公众、研究机构和政府…...

一文了解:部署 Deepseek 各版本的硬件要求

很多朋友在咨询关于 DeepSeek 模型部署所需硬件资源的需求&#xff0c;最近自己实践了一部分&#xff0c;部分信息是通过各渠道收集整理&#xff0c;so 仅供参考。 言归正转&#xff0c;大家都知道&#xff0c;DeepSeek 模型的性能在很大程度上取决于它运行的硬件。我们先看一下…...

国内访问Github的四种方法(2025版)

声明&#xff1a;以下内容&#xff0c;仅供学习使用&#xff0c;不得他用。如有他用&#xff0c;与本文作者无关。 国内访问GitHub及下载文件的解决方案整理如下&#xff0c;结合最新技术方案和实测有效方法&#xff1a; 一、网络层解决方案 Hosts文件修改法 通过DNS查询工具…...