【HTML— 快速入门】HTML 基础

news/2025/2/27 4:37:33

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述


准备工作


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代码是由"标签"构成的,形如:

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

HTML 文件基本结构


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保存代码,然后在刚刚的文件夹中打开该文件

在这里插入图片描述


在这里插入图片描述

在这里插入图片描述


http://www.niftyadmin.cn/n/5869448.html

相关文章

学习笔记05——HashMap实现原理及源码解析(JDK8)

HashMap实现原理及源码解析&#xff08;JDK8&#xff09; 一、核心设计思想 数组链表红黑树&#xff1a;桶数组存储Node节点&#xff0c;哈希冲突时形成链表&#xff0c;链表长度≥8且桶数量≥64时转红黑树扰动函数&#xff1a;(h key.hashCode()) ^ (h >>> 16) 消除…

springBoot统一响应类型3.0版本

前言&#xff1a;起于环境&#xff0c;先于实践&#xff0c;源于变化&#xff0c;升于思考&#xff0c;再于实践&#xff0c;形于总结——实践至上&#xff01; 简单回顾&#xff1a; /*** 基础统一响应类* param <T>*/Data public class apiResult<T> {private in…

九、数据治理架构流程

一、总体结构 《数据治理架构流程图》&#xff08;Data Governance Architecture Flowchart&#xff09; 水平结构&#xff1a;流程图采用水平组织&#xff0c;显示从数据源到数据应用的进程。 垂直结构&#xff1a;每个水平部分进一步划分为垂直列&#xff0c;代表数据治理的…

在WINDOWS系统使用CMake gui编译NLopt配合VSCode使用

1. 准备工作 安装CMake&#xff1a;从CMake官网下载并安装CMake。下载Nlopt源码&#xff1a;从Nlopt官网或GitHub仓库下载Nlopt源码。安装编译器&#xff1a;确保已安装Visual Studio或其他支持的编译器&#xff08;如MinGW&#xff09;。 2. 配置CMake 方式1 打开CMake GU…

网页五子棋——项目测试

目录 测试用例设计 功能测试 注册功能测试 正常注册 异常注册 登录功能测试 正常登录 异常登录 匹配功能测试 对战功能测试 自动化测试 引入依赖 Utils 注册测试 登录测试 匹配测试 RunTest 界面测试 性能测试 总结 测试用例设计 在本篇文章中&#xff0c;…

Maven 依赖的深入理解(一)

一、Maven 依赖初相识 在 Java 项目开发的广袤天地里&#xff0c;Maven 就如同一位得力的助手&#xff0c;而 Maven 依赖则是其核心的 “魔法棒”&#xff0c;为项目构建带来了前所未有的便利与高效。随着项目规模的日益壮大&#xff0c;依赖的管理变得愈发复杂&#xff0c;手…

html - 手工添加上次阅读的位置, 方便下次阅读

文章目录 html - 手工添加上次阅读的位置, 方便下次阅读概述笔记END html - 手工添加上次阅读的位置, 方便下次阅读 概述 在看一本电子书&#xff0c;有pdf格式的&#xff0c;但是比较喜欢看html格式的(复制比较方便)。 但是有个缺点&#xff0c;如果看到一半&#xff0c;关掉…

LangChain教程 - RAG - 支持的100种向量数据库

系列文章索引 LangChain教程 - 系列文章 随着人工智能和机器学习应用的快速发展&#xff0c;尤其是在自然语言处理&#xff08;NLP&#xff09;、图像识别、推荐系统等领域&#xff0c;对高效的向量存储和检索需求日益增长。向量存储用于保存来自深度学习模型或其他机器学习算…