当前位置: 首页 > 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…...

Docker 与 Serverless(无服务器架构)

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

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

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

嵌入式开发:傅里叶变换(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;优化和调…...

飞鱼科技游戏策划岗内推

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

前端如何进行性能优化

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

seacms v9 实现的MySQL注入

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

Go中slice和map引用传递误区

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

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

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

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

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

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

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

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

Linux 文件类型,目录与路径,文件与目录管理

文件类型 后面的字符表示文件类型标志 普通文件&#xff1a;-&#xff08;纯文本文件&#xff0c;二进制文件&#xff0c;数据格式文件&#xff09; 如文本文件、图片、程序文件等。 目录文件&#xff1a;d&#xff08;directory&#xff09; 用来存放其他文件或子目录。 设备…...

进程地址空间(比特课总结)

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

【HarmonyOS 5.0】DevEco Testing:鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

java 实现excel文件转pdf | 无水印 | 无限制

文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具,自己手写的难度,恐怕高级程序员花费一年的事件,也…...

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

学校招生小程序源码介绍

基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码&#xff0c;专为学校招生场景量身打造&#xff0c;功能实用且操作便捷。 从技术架构来看&#xff0c;ThinkPHP提供稳定可靠的后台服务&#xff0c;FastAdmin加速开发流程&#xff0c;UniApp则保障小程序在多端有良好的兼…...

srs linux

下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935&#xff0c;SRS管理页面端口是8080&#xff0c;可…...

Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)

引言&#xff1a;为什么 Eureka 依然是存量系统的核心&#xff1f; 尽管 Nacos 等新注册中心崛起&#xff0c;但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制&#xff0c;是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

EtherNet/IP转DeviceNet协议网关详解

一&#xff0c;设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络&#xff0c;本网关连接到EtherNet/IP总线中做为从站使用&#xff0c;连接到DeviceNet总线中做为从站使用。 在自动…...