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

【HTML— 快速入门】HTML 基础

news 2026/5/27 13:16:07

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

准备工作

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

编程日记 2025/2/27 22:20:29

Docker 与 Serverless（无服务器架构）

Serverless&#xff08;无服务器架构&#xff09; 是一种新的云计算架构&#xff0c;它通过让开发者专注于业务逻辑而无需管理服务器基础设施&#xff0c;来简化应用的开发和部署。Serverless 模型通常由云服务提供商管理基础设施的所有方面&#xff0c;而开发者只需提供代码和…...

编程日记 2025/2/27 22:13:21

DMA 定制固件教程：小白跟做即得单人固件，超详细纯喂饭教程，100% 成功秘籍！FPGA仿真1:1、中断逻辑和TLP核心都在。

DMA 定制固件教程 小白跟着操作做可以做出的单人固件 图文教程 链接&#xff1a;https://docs.qq.com/doc/DQ01lVGtHelROVHNv 本图文教程包含内容&#xff1a; 一、DMA仿真技术采集真实单人固件 二、网卡TLP仿真固件生成 三、DMA仿真技术io、中断逻辑&#xff0c;从零仿真 四、…...

编程日记 2025/2/27 22:12:19

嵌入式开发：傅里叶变换（4）：在 STM32上面实现FFT（基于STM32L071KZT6 HAL库+DSP库）

目录 步骤 1&#xff1a;准备工作 步骤 2&#xff1a;创建 Keil 项目&#xff0c;并配置工程 步骤 3&#xff1a;在MDK工程上添加 CMSIS-DSP 库 步骤 5&#xff1a;编写代码 步骤 6&#xff1a;配置时钟和优化 步骤 7&#xff1a;调试与验证 步骤 8&#xff1a;优化和调…...

编程日记 2025/2/27 22:06:04

飞鱼科技游戏策划岗内推

协助策划完成相关工作&#xff0c;包括但不仅限于策划配置&#xff0c;资料搜集&#xff0c;游戏体验&#xff1b; 游戏策划相关作品&#xff1b;游戏大赛经历&#xff1b;游戏demo制作经历&#xff1b;游戏公司策划岗位实习经历优先 内推码 DSZP7YFU...

编程日记 2025/2/27 22:01:58

前端如何进行性能优化

1. 减少HTTP请求 合并文件&#xff1a;将多个CSS或JavaScript文件合并为一个&#xff0c;减少请求次数。 使用CSS Sprites&#xff1a;将多个小图标合并为一张大图&#xff0c;通过背景定位显示。 内联小资源&#xff1a;将小的CSS或JavaScript直接嵌入HTML中&#xff0c;减少…...

编程日记 2025/2/27 22:00:57

大白话Vuex 核心概念（state、mutations、actions）的使用案例与原理

大白话Vuex 核心概念&#xff08;state、mutations、actions&#xff09;的使用案例与原理 Vuex是Vue.js应用程序中专门用来管理状态的工具&#xff0c;就好像是一个大管家&#xff0c;帮你把项目里一些重要的数据和操作管理得井井有条。下面用大白话结合案例来介绍Vuex核心概…...

编程日记 2025/2/27 21:59:56

阿里云ack的创建与实战应用案例

阿里云ack的创建与应用案例 创建前开通ack相关服务&#xff1a;开始创建简单的魔方游戏&#xff0c;熟悉sv与clb自动注册创建部署一个nginx 服务示例&#xff1a;走不同域名访问不同svc资源&#xff1a;为什么需要 Ingress &#xff1f;创建第一个域名的 Deployment和Service。…...

编程日记 2025/2/27 21:54:50

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

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

编程日记 2025/2/27 21:44:39

Vue组件：从使用到原理的深度解析

一、什么是Vue组件&#xff1f; 组件是Vue的核心特性之一&#xff0c;它允许开发者将UI拆分为独立可复用的代码片段。每个组件本质上是一个Vue实例&#xff0c;具有自己的&#xff1a; 模板&#xff08;Template&#xff09; 数据&#xff08;Data&#xff09; 方法&#xf…...

编程日记 2025/2/27 21:43:37

Docker部署 MongoDB及常用命令

docker 部署 docker run -d \--name mongo \-e MONGO_INITDB_ROOT_USERNAMEroot \-e MONGO_INITDB_ROOT_PASSWORD123456 \-p 27017:27017 \-v ./local-mongo-data:/data/db \mongo:latest或者编写 docker-compose.yaml 文件。如下&#xff1a; version: 3.1services:mongo:im…...

编程日记 2025/2/27 21:30:19

27.[前端开发-JavaScript基础]Day04-函数基本使用-递归-变量作用域-函数式编程

一、JavaScript函数 1 认识JavaScript函数 程序中的foo、bar、baz 认识函数 函数使用的步骤 2 函数的声明和调用 声明和调用函数 函数的参数 有参数的函数练习 函数的返回值 函数的练习 arguments参数&#xff08;JS高级再学习&#xff09; 3 函数的递归调用 函数中调用函数…...

编程日记 2025/2/27 21:29:18

mac修改docker的daemon.json 镜像文件

1、找到daemon.json文件的位置 docker info 可以看出位置在&#xff1a; /Users/spuer/.docker 2. 进入daemon.json 所在的目录&#xff1a; cd /Users/spuer/.docker3. 查看daemon.json的内容&#xff1a; more daemon.json可以看出&#xff0c;没有配置registry-mirrors&…...

编程日记 2025/2/27 21:22:08

KIMI K1.5：大规模强化学习在大语言模型中的应用与工程实践

目录 1、核心技术创新：长上下文强化学习 2、策略优化的技术细节 2.1、在线镜像下降变体 2.2、长度惩罚机制 2.3、智能采样策略 3、工程架构创新 3.1、混合部署框架 3.2、代码沙箱与奖励模型 3.3、分布式系统架构 4、实验成果与性能提升 5、结论与未来展望 大语言模…...

编程日记 2025/2/27 21:20:04

seacms v9 实现的MySQL注入

目录 过滤关键词information_schema 怎么办 一、环境搭建 二、环境分析 三、源代码分析 1、过滤程序 2、注入点 四、获取数据库名 五、获取数据库表名 六、获取表的列名 七、获取数据信息 过滤关键词information_schema 怎么办 1.、利用sys数据库&#xff08;MySQL 5.…...

编程日记 2025/2/27 21:19:02

Go中slice和map引用传递误区

背景 关于slice和map是指传递还是引用传递&#xff0c;很多文章都分析得模棱两可&#xff0c;其实在Go中只有值传递&#xff0c;但是很多情况下是因为分不清slice和map的底层实现&#xff0c;所以导致很多人在这一块产生疑惑&#xff0c;下面通过代码案例分析slice和map到底是…...

编程日记 2025/2/27 21:18:00

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

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

编程日记 2025/2/27 21:15:56

【Uniapp-Vue3】开发userStore用户所需的相关操作

在项目根路径下创建的stores文件夹中创建user.js文件 并将以下内容复制到user.js中 import {ref} from "vue" import { defineStore } from pinia; const uniIdCo uniCloud.importObject("uni-id-co") const db uniCloud.database(); const usersTable…...

编程日记 2025/2/27 21:13:53

DeepSeek开源周首日：发布大模型加速核心技术可变长度高效FlashMLA 加持H800算力解码性能狂飙升至3000GB/s

FlashMLA的核心技术特性包括对BF16精度的全面支持&#xff0c;以及采用块大小为64的页式键值缓存&#xff08;Paged KV Cache&#xff09;系统&#xff0c;实现更精确的内存管理。在性能表现方面&#xff0c;基于CUDA12.6平台&#xff0c;FlashMLA在H800SXM5GPU上创下了显著成绩…...

编程日记 2025/2/27 21:11:50

易语言模拟真人鼠标轨迹算法 - 防止游戏检测

一.简介 鼠标轨迹算法是一种模拟人类鼠标操作的程序&#xff0c;它能够模拟出自然而真实的鼠标移动路径。 鼠标轨迹算法的底层实现采用C/C语言&#xff0c;原因在于C/C提供了高性能的执行能力和直接访问操作系统底层资源的能力。 鼠标轨迹算法具有以下优势&#xff1a; 模拟…...

编程日记 2025/2/27 21:08:41

2026 西安 AI 问答曝光搭建技术解析：GEO 知识图谱 + 深度测评

随着大语言模型技术的快速普及&#xff0c;AI 搜索已经成为用户获取企业信息、商家服务的核心入口。根据中国互联网信息中心 2026 年发布的《中国人工智能搜索发展报告》显示&#xff0c;2025 年国内 AI 搜索用户规模突破 8.2 亿&#xff0c;日均搜索请求超过 20 亿次&#xff…...

编程新知 2026/5/26 1:39:10

基于声卡与电流互感器的安全交流功率测量系统设计与实践

1. 项目概述&#xff1a;用声卡安全测量交流功率我一直对各种测量技术抱有浓厚的兴趣&#xff0c;毕竟“测量即认知”这句老话在今天依然适用。对于电力消耗和产出&#xff0c;没有什么比直接测量更能说明问题了。交流功率的测量&#xff0c;核心在于同时获取电压和电流的瞬时值…...

编程新知 2026/5/26 0:44:32

告别浪费！SolidWorks企业级共享方案，实现降本增效全攻略

还在为 SolidWorks 高昂的硬件投入和混乱的图纸管理头疼&#xff1f;告别“一人一机”的浪费模式&#xff0c;企业级共享方案才是降本增效的正解。这套攻略基于“1 台高性能服务器 云飞云共享云桌面”架构&#xff0c;帮你把硬件成本砍掉 60%&#xff0c;把软件利用率翻倍。一…...

编程新知 2026/5/26 0:30:20

孤舟笔记 互联网常用框架篇三 Dubbo是如何动态感知服务下线的？注册中心和服务端双保险

文章目录先说结论机制一&#xff1a;注册中心通知机制二&#xff1a;心跳检测机制三&#xff1a;连接事件感知机制四&#xff1a;定时拉取四种机制的协作回答技巧与点评加分回答面试官点评个人网站微服务环境下&#xff0c;服务实例随时可能上下线——重启、扩容、宕机……调用…...

编程新知 2026/5/25 23:41:42

AI学习 - 大模型基础入门

AI学习 - 大模型基础入门 从零开始&#xff1a;Ollama 安装 → 本地模型运行 → Python 代码接入 → 理解核心概念 摘要 本文记录了在 Windows 上使用 Ollama 部署本地大模型、并通过 Python 代码接入调用的完整过程。内容涵盖&#xff1a;Ollama 安装与模型拉取、大模型基础概…...

编程新知 2026/5/25 23:29:27

Python UiAutomation实战：从网页数据抓取到桌面应用，一个库打通数据采集全链路

Python UiAutomation实战&#xff1a;打通数据采集全链路的智能解决方案 在数据驱动的商业环境中&#xff0c;企业常常面临跨平台数据采集的挑战——财务系统里的交易记录需要与网站后台的报表进行交叉分析&#xff0c;销售数据要从桌面软件导出后上传到云端处理系统。传统的人…...

编程新知 2026/5/25 23:16:51

如何在浏览器中一键解密所有加密音乐文件：Unlock-Music完全指南

如何在浏览器中一键解密所有加密音乐文件&#xff1a;Unlock-Music完全指南 【免费下载链接】unlock-music 在浏览器中解锁加密的音乐文件。原仓库&#xff1a; 1. https://github.com/unlock-music/unlock-music &#xff1b;2. https://git.unlock-music.dev/um/web 项目地…...

编程新知 2026/5/25 21:25:46

应对Claude Code访问不稳定，快速切换至Taotoken的应急方案

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 应对Claude Code访问不稳定&#xff0c;快速切换至Taotoken的应急方案 对于依赖Claude Code进行日常开发或自动化任务的用户来说&a…...

编程新知 2026/5/25 20:13:59

利用FTDI芯片MPSSE模式构建Arduino兼容开发环境

1. 项目概述&#xff1a;当FTDI芯片遇上Arduino生态如果你手头有一些闲置的FTDI USB转串口模块&#xff0c;比如常见的FT232R、FT2232H&#xff0c;或者像我一样&#xff0c;从某个旧设备上拆下来一块FT2232C的老古董&#xff0c;除了用来给单片机烧录程序或者做串口调试&#…...

编程新知 2026/5/25 20:07:55

Go开发者必备：circuitbreaker API全解析与最佳实践指南 [特殊字符]

Go开发者必备&#xff1a;circuitbreaker API全解析与最佳实践指南 &#x1f680; 【免费下载链接】circuitbreaker Circuit Breakers in Go 项目地址: https://gitcode.com/gh_mirrors/circ/circuitbreaker 作为一名Go开发者&#xff0c;你是否经常遇到远程服务调用失败…...

编程新知 2026/5/25 18:08:05