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

HTML 入门

news 2026/2/7 13:26:44

1. 什么是 HTML

HTML（Hyper Text Markup Language），超文本标记语言

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

标记语言：由标签构成的语言

HTML 的标签都是提前定义好的，使用不同的标签，表示不同的内容，如以下代码：

上面代码中的 <h1><h2><h3> 就是标签

1.1 认识 HTML 标签

HTML 代码是由 “标签” 构成的，特点如下：

标签名（body）放到 < > 中
大部分标签成对出现，<h1> 为开始标签，</h1> 为结束标签
少数标签只有开始标签，称为 “单标签”
开始标签和结束标签之间，写的是标签的内容
开始标签中可能会带有 “属性” （如：id 属性相当于给这个标签设置了一个唯一的标识符(身份证号码)，如下代码

<h3 id="myId">我是三级标题</h3>

1.2 HTML 文件基本结构

<html><head><title>第一个页面</title></head><body>hello world</body>
</html>

html 标签是整个 html 文件的根标签（最顶层标签）
head 标签中写页面的属性
body 标签中写的是页面上显示的内容
title 标签中写的是页面的标题

1.3 标签层次结构

父子关系
兄弟关系

<html><head><title>第一个页面</title></head><body>hello world</body>
</html>

其中：

head 和 body 是 html 的子标签（html 就是 head 和 body 的父标签）
title 是 head 的子标签，head 是 title 的父标签
head 和 body 之间是兄弟关系

tip：

可以使用浏览器的开发者工具查看页面的结构

F12 或鼠标右键检查，开启开发者工具，切换到 Elements 标签，就可看到页面结构细节

标签之间的结构关系，构成了一个 DOM 树，DOM 是 Document Object Mode（文档对象模型）的缩写

1.4 HTML 快速入门

开发工具：Visual Studio Code

在 VS Code 中创建文件 xxx.html，直接输入 ! ，按 Enter 或 tab 键，此时能自动生成代码的主体框架，如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>

在 <body></body> 标签中，任意书写文字，按 Ctrl + s 保存文件，通过浏览器访问即可，如：

1.5 HTML 常见标签

1.5.1 标题标签 h1-h6

从 h1 到 h6，数字越大，字体越小

1.5.2 段落标签：p

在 HTML 中，段落、换行符、空格都会失效，如果需要分成段落，需要使用专门的标签

p 标签表示一个段落

tip：

p 标签描述的段落，前面没有缩进
自动根据浏览器宽度来决定排版
html 内容首尾处的换行、空格均无效
在 html 中文字之间输入的多个空格只相当于一个空格
html 中直接输入换行不会真的换行，而是相当于一个空格

1.5.3 换行标签：br

换行通过 <br/> 标签实现，br 是 break 的缩写，表示换行

br 是一个单标签（不需要结束标签）

br 标签不像 p 标签那样带有很大的空隙

<br/> 是规范写法，不建议写成 <br>，虽然浏览器有很好的 “鲁棒性”，但这里没有问题，不代表后面也没问题

1.5.4 图片标签：img

img 标签必须带有 src 属性，表示图片的路径

<img src="rose.jpg">

此时要把 rose.jpg 这个图片放到和 html 中的同级目录中

img 标签的其他属性：

width / height：控制宽度高度，高度和宽度一般改一个就行，另一个会等比例缩放，否则就会图片失衡

border：边框，参数是宽度的像素，但是一般会使用 CSS 来设定

tip：

属性可以有多个，不能写到标签之前
属性之间用空格分割，可以是多个空格，也可以是换行
属性之间不分先后顺序
属性使用 “键值对” 的格式来表示

关于目录结构：

对于一个复杂的网站，页面资源很多，这种情况可以使用目录把这些文件整理好

1. 相对路径：以 html 所在位置为基准，找到图片的位置

同级路径：直接写文件名即可（或者 ./）
下一级路径：image/1.jpg
上一级路径：../image/1.jpg

2. 绝对路径：一个完整的磁盘路径，或者网络路径

磁盘路径 D:/rosr.jpg（最好使用 /，不要使用 \）
网络路径 https://cn.bing.com/images/search?view=detailV2&ccid=wtpfIxZv&id=0EB129930EAA55858F09715E195BAEA0462DF70E&thid=OIP.wtpfIxZvYE3XmBVy7hovYgHaEn&mediaurl=https%3A%2F%2Fimg-blog.csdnimg.cn%2F4dfc7057ff0f406187a2c7def724b99a.png&exph=508&expw=816&q=java&simid=608049172503483542&form=IRPRST&ck=0498F3C0DC5285A86C54AA8EBE301A5A&selectedindex=1&itb=0&ajaxhist=0&ajaxserp=0&vt=0&sim=11

1.5.5 超链接：a

href：必须具备，表示点击后会跳转到哪个页面

target：打开方式，默认是 _self，如果是 _blank 则用新的标签页打开

链接的几种形式：

1. 外部链接：href 引用其他网站的地址

<a href="https://www.baidu.com">百度</a>

2. 内部链接：网站内部页面之间的链接，写相对路径即可

在一个目录中，先创建一个 demo1.html，再创建一个 demo2.html

target 设置为 _blank

3. 空链接：使用 # 在 href 中占位

<a href="#">空链接<a>

用于此处需要插入超链接，但还不知道插入哪个的时候

1.5.6 表格标签

table 标签：表示整个表格
tr：表示表格的一行
td：表示一个单元格
thead：表格的头部区域
tbody：表格的主体区域

table 包含 tr，tr 包含 td

表格标签中有一些属性，可以用于设置大小边框等，但是一般使用 CSS 方式来设置，这些属性都要放到 table 标签中：

align 是表格相对于周围元素的对齐方式，align="center"（不是内部元素的对其方式）
border 表示边框，1 表示有边框（数字越大，边框越粗），"" 表示没边框
cellpadding：内容距离边框的距离，默认 1 像素
cellspacing：单元格之间的距离，默认 2 像素
width / height：设置尺寸

快速生成：

    <table><tr><td>姓名</td><td>性别</td><td>年龄</td></tr><tr><td>张三</td><td>男</td><td>10</td></tr><tr><td>李四</td><td>女</td><td>18</td></tr></table>

加上属性：

<table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="500">

1.5.7 表单标签

表单是让用户输入信息的重要途经，分为两个部分：

表单域：包含表单元素的区域，重点是 form 标签
表单控件：输入框，提交按钮等，重点是 input 标签

1) input 标签

各种输入控件，单行文本框、按钮、单选框、复选框

type(必须有)，取值种类很多，如：button、checkbox、text、file、image、password、radio 等
name：给 input 起了个名字，尤其是对于单选按钮，具有相同的 name 才能多选一
value：input 中的默认值
checked：默认被选中（用于单选按钮和多选按钮）

常用的类型：

1. 文本框

2. 密码框

3. 单选框

tip：单选框之间必须具备相同的 name 属性，才能实现 多选一 效果

4. 复选框

5. 普通按钮

当前点击了没有反应，需要搭配 JS 使用

6. 提交按钮

    <form action="demo1.html"><input type="text" name="username"><input type="submit" value="提交"></form>

提交按钮必须放到 form 标签中，点击后就会尝试给服务器发送请求

2) select 标签

下拉菜单，option 中定义 selected="selected" 表示默认选中

3) textarea 标签

文本域中的内容就是默认内容，空格也会有影响

rows 和 clos 不会直接使用，都是用 CSS 来改的

4) form 标签

    <form action="demo1.html">...[form 的内容]</form>

描述了要把数据按照什么方式，提交到哪个页面中

5) 无语义标签：div & span

div 标签，division 的缩写，含义是分割

span 标签，含义是跨度

类似于两个盒子，用于网页布局

div 是独占一行的，是一个大盒子

span 不独占一行，是一个小盒子

1.6 练习：用户注册

用户注册界面：

代码：

    <h1>用户注册</h1><table><tr><td>用户名</td><td><input type="text" placeholder="请输入用户名"></td></tr><tr><td>手机号</td><td><input type="text" placeholder="请输入手机号"></td></tr><tr><td>密码</td><td><input type="password" placeholder="请输入密码"></td></tr></table><div><input type="button" value="注册"><span>已有账号？</span><a href="#">登录</a><br/></div>

HTML 入门

1. 什么是 HTML HTML（Hyper Text Markup Language），超文本标记语言超文本：比文本要强大，通过链接和交互方式来组织和呈现信息的文本形式，不仅有文本，还可能包含图片、音频、或者自己已经审阅…...

编程日记 2024/10/14 9:19:57

前端面试题（十五）

83. ES6 中的 let 和 const let 和 const 的区别是什么？ let 和 const 是 ES6 引入的用于声明变量的新方式，相比于传统的 var，它们具有以下特性： 块级作用域：let 和 const 声明的变量在其所在的块级作用域内有效&…...

编程日记 2024/10/14 9:18:55

如何成为 Rust 核心贡献者？Rust 开发的核心是什么？Rust 重要技术专家揭秘

10 月 17 - 18日，由 GOSIM 开源创新汇主办、CSDN 承办的 GOSIM CHINA 2024 将在北京盛大启幕。作为 GOSIM 开源年度大会的第三届盛会，本次活动邀请了 60 多位国际开源专家，汇聚了来自全球百余家顶尖科技企业、知名高校及开源社区的技术大咖、…...

编程日记 2024/10/14 9:17:54

springboot + nacos + sofarpc 整合后报错403

springboot版本 2.2.2 nacos 版本 1.4.2 rpc-sofa-boot 版本 3.2.0 <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.2.2.RELEASE</version></parent>…...

编程日记 2024/10/14 9:16:53

小米路由器R3Gv2安装openwrt记录

前言小米路由器R3Gv2的硬件配置与小米路由器4A千兆版一致，但bootloader有所不同，因此openwrt的固件不要互刷。另外，R3Gv2和R3G、4A百兆版是不同的设备，切勿混淆。硬件信息 OpenWrt参数页-Xiaomi MiWiFi 3G v2 CPU&#xff1a…...

编程日记 2024/10/14 9:10:45

记录一下，android studio 登录不上github的问题

android studio 2023.3.1.18 版本的编译器，出现问题，之前连接过的项目可以正常提交和拉取到github。但是新建立的项目无法上传到github，提示错误cannot load information for github.com/:request response;access to this site，…...

编程日记 2024/10/14 9:04:38

springcloud之基于github webhook动态刷新服务配置

前言在实际开发中经常会有一个叫做配置中心的服务，这个服务经过变更参数来动态刷新线上业务数据行为配置。比如；行为开关、活动数据、黑白名单、本地/预发/线上环境切换等等，这些配置信息往往需要在我们不重启系统的时候就可以被更新执行。那…...

编程日记 2024/10/14 9:02:33

qt+opengl 实现纹理贴图，平移旋转，绘制三角形，方形

1 首先qt 已经封装了opengl，那么我们就可以直接用了，这里面有三个函数需要继承 virtual void initializeGL() override; virtual void resizeGL(int w,int h) override; virtual void paintGL() override; 这三个函数是实现opengl的重要函数。 2 我们…...

编程日记 2024/10/14 9:01:31

【动态规划】子数组系列（下）

1. 等差数列划分 413. 等差数列划分状态表示：以 i 位置为结尾时的等差数列的个数状态转移方程：由于至少需要三个元素才符合题目中等差数列的要求，所以需要判断 i - 2，i - 1，i 三个元素，当这三个元素符合…...

编程日记 2024/10/14 8:47:05

macos mendeley Unable to install the Microsoft Word Plugin 解决

windows也是相似的原理，这里主要说macos， 本质是找到mendeley的插件启动项，放在word启动目录下， GPT-o1的解决方案： 3. Manual Installation (If Automatic Installation Fails) If the automatic installation doe…...

编程日记 2024/10/14 8:46:02

【Linux进程间通信】Linux信号机制深度解析：保存与处理技巧

📝个人主页🌹：Eternity._ ⏩收录专栏⏪：Linux “ 登神长阶 ” 🌹🌹期待您的关注 🌹🌹 ❀Linux进程间通信 📒1. 信号的保存🌊在内核中的表示🍂sigs…...

编程日记 2024/10/14 8:45:00

常见开源组件的详解

文章目录 RPCRPC架构和工作流程为什么有了HTTP还要用RPC底层协议数据格式连接管理错误处理使用场景常见的RPC框架 Web应用框架主要功能常见的Web应用框架Spring Boot (Java)Django (Python)Express.js (Node.js) Redis主要特点应用场景缓存问题Redis集群架构主从复制Redis Clu…...

编程日记 2024/10/14 8:43:59

rust使用教程详解

欢迎来到 Rustlings。该项目包含一些小练习，让您习惯阅读和编写 Rust 代码。这包括阅读和响应编译器消息！ 建议在阅读Rust 官方书籍（学习 Rust 最全面的资源）的同时做 Rustlings 练习 📚️ Rust By Example是另一个推…...

编程日记 2024/10/14 8:42:56

并查集的实现（朴素版）

这是C算法基础-数据结构专栏的第二十九篇文章，专栏详情请见此处。由于作者即将参加CSP，所以到比赛结束前将不再发表文章！ 引入并查集是一种可以快速合并查找集合的一种数据结构，这次我们将通过三道题来详细讲解并查集&#xff…...

编程日记 2024/10/14 8:41:55

WPF 为button动态设置不同的模板

有时候需要动态的设置一些按钮的状态模板。使一个button显示不同的内容，比如Button未点击安装显示： 安装后显示： 可以通过设置button的content，通过content来设置不同的模板来实现功能，以下是代码： MainWi…...

编程日记 2024/10/14 8:37:49

【C++贪心 DFS】2673. 使二叉树所有路径值相等的最小代价|1917

本文涉及知识点 C贪心反证法决策包容性 CDFS LeetCode2673. 使二叉树所有路径值相等的最小代价给你一个整数 n 表示一棵满二叉树里面节点的数目，节点编号从 1 到 n 。根节点编号为 1 ，树中每个非叶子节点 i 都有两个孩子，分别是左孩子…...

编程日记 2024/10/14 8:32:42

虚幻引擎GAS入门学习笔记(一)

虚幻引擎GAS入门(一) Gameplay Ability System（GAS） 是一个模块化且强大的框架，用于管理虚幻引擎中的游戏玩法逻辑。它的核心组成部分包括 Gameplay Ability（定义和执行能力）、Gameplay Effect（应用和管理…...

编程日记 2024/10/14 8:29:40

Excel：vba实现合并工作表(表头相同)

这个代码应该也适用于一些表头相同的工作表的汇总，只需要修改想要遍历的表，适用于处理大量表头相同的表的合并这里的汇总合并表 total 是我事先创建的，我觉得比用vba代码创建要容易一下，如果不事先创建汇总表就用下面的代码&…...

编程日记 2024/10/14 8:27:37

Redis：分布式 - 主从复制

Redis：分布式 - 主从复制概念配置主从模式info replicationslave-read-onlytcp-nodelay 命令slaveof 主从结构一主一从一主多从主从复制流程数据同步命令全量同步部分同步实时同步节点晋升概念 Redis的最佳应用，还是要在分布式系统中。对于非分布式…...

编程日记 2024/10/14 8:26:36

el-date-picker设置只有某些日期可选

示例图： <el-date-pickerv-model"topFormObj.upTime"type"date"value-format"timestamp"format"dd/MM/yyyy":picker-options"pickerOptions" /> 固定限制每周的周末周三不可选 data() {return {pickerOp…...

编程日记 2024/10/14 8:14:06

Golang 面试经典题：map 的 key 可以是什么类型？哪些不可以？

Golang 面试经典题：map 的 key 可以是什么类型？哪些不可以？ 在 Golang 的面试中，map 类型的使用是一个常见的考点，其中对 key 类型的合法性是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

编程新知 2025/12/20 7:42:02

以下是对华为 HarmonyOS NETX 5属性动画（ArkTS）文档的结构化整理，通过层级标题、表格和代码块提升可读性：

一、属性动画概述NETX 作用：实现组件通用属性的渐变过渡效果，提升用户体验。支持属性：width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项： 布局类属性（如宽高）变化时&#…...

编程新知 2026/1/28 21:15:38

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中，每个页面需要使用ref，onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入，需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

编程新知 2025/9/14 18:41:15

HTML 列表、表格、表单

1 列表标签作用：布局内容排列整齐的区域列表分类：无序列表、有序列表、定义列表。例如： 1.1 无序列表标签：ul 嵌套 li，ul是无序列表，li是列表条目。注意事项： ul 标签里面只能包裹 li…...

编程新知 2026/1/24 22:33:33

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template>  </template>…...

编程新知 2026/1/31 6:04:01

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍，多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述二、position 的五种类型详解（初学者版） 1. static（默认值） 2. relative（相对定位） 3. absolute（绝对定位） 4. fixed（固定定位） 5. sticky（粘性定位）三、定位元素的层级关系（z-i…...

编程新知 2026/1/26 9:48:34

2025 后端自学UNIAPP【项目实战：旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口（适配服务端返回 Token） export const login async (code, avatar) > {const res await http…...

编程新知 2026/1/29 11:40:13